Timepicker
React Bootstrap 5 Timepicker component
Use MDB custom Timepicker component to select time.
Note: Read the API tab to find all available options and advanced customization
Basic example
MDB allows us to automatically initialize a Timepicker when the page is loaded.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker />
);
}
Inline Timepicker with 12h
MDBTimepicker allows you to use a inline version timepicker. Default version is with 12h.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker inline />
);
}
Inline Timepicker with 24h
MDB Timepicker allows you to use a inline version timepicker. You have to add options
format24
to true.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker inline format="24h" />
);
}
Custom Icon
You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours.
With icon
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker customIconSize='2x' customIcon='fab fa-react' btnIcon={false} />
);
}
Without icon
MDBTimepicker allows to set input without icon.
import React, { useRef } from 'react';
import { MDBTimepicker, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const customToggle1 = useRef(null);
const customToggle2 = useRef(null);
return (
<>
<div className='me-3'>
<MDBTimepicker openRef={customToggle1} noIcon />
<MDBBtn className='mt-2' ref={customToggle1} size='sm'>
Toggle TimePicker above
</MDBBtn>
</div>
<div>
<MDBTimepicker openRef={customToggle2} noIcon />
<MDBBtn className='mt-2' ref={customToggle2} size='sm'>
Toggle TimePicker above
</MDBBtn>
</div>
</>
);
}
Default time
MDB Timepicker allows to initialize a default time in the picker and input. You can set it
with option defaultTime
. This options accepts strings like:
- 12:34
- 12:34 PM
- 12:34 AM
and also new Date() format like:
- new Date()
- new Date().toLocaleTimeString([],{timeStyle: 'short'})
Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formate to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
const date = new Date()
export default function App() {
return (
<>
<MDBTimepicker defaultTime='02:12 PM' />
<MDBTimepicker defaultTime='05:12 AM' />
<MDBTimepicker defaultTime='05:12' />
<MDBTimepicker format='24h' defaultTime='23:44' />
<MDBTimepicker format='12h' defaultTime={date} />
<MDBTimepicker format='24h' defaultTime={date} />
</>
);
}
Handle input value
If you want handle input value on modal approve, you have to add custom event to selected picker.
import React, { useState } from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
const [value, setValue] = useState('');
return (
<>
<MDBTimepicker onChange={(e) => setValue(e)} />
<div className='my-2'>
Input value: <span id='span-input-value'>{value}</span>
</div>
</>
);
}
Format 24h
Timepicker allows you to use time format with 24 hours. You can set it with the format="24h"
property.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker format='24h' />
);
}
Just Input
You can set a timepicker to just an input.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker justInput />
);
}
Increment
You can set a increment value by 5 to a minutes.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker increment />
);
}
Max time
You can max time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker maxTime="6:35" />
);
}
Max time with PM
You can max time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker maxTime="6:35 PM" />
);
}
Max time with AM
You can max time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker maxTime="6:35 AM" />
);
}
Min time
You can min time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker minTime="10:15" />
);
}
Min time with PM
You can min time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker minTime="6:35 PM" />
);
}
Min time with AM
You can min time to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker minTime="6:35 AM" />
);
}
Max/Min hours
You can max and min hour to timepicker with options.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker maxHour={12} minHour={5} />
);
}
Maximum hour
You can set only maximum hour to timepicker.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker maxHour={5} />
);
}
Minimum hour
You can set only minimum hour to timepicker.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker minHour={8} />
);
}
Disable past
Use the disablePast
option to disallow past time selection.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker disablePast />
);
}
Disable future
Use the disableFuture
option to disallow future time selection.
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker disableFuture />
);
}
Accessibility
We added proper aria attributes to the timepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component options:
import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTimepicker
inputLabel='Select a time'
invalidLabel='Invalid Time Format'
clearLabel='Clear'
submitLabel='Ok'
cancelLabel='Cancel'
/>
);
}
Timepicker - API
Import
import { MDBTimepicker } from 'mdb-react-ui-kit';
Properties
MDBTimepicker
Name | Type | Default | Description | Example |
---|---|---|---|---|
amLabel
|
string | 'AM' |
Allows to set custom text to the AM button |
<MDBTimepicker amLabel='Ante Meridiem' />
|
pmLabel
|
string | 'PM' |
Allows to set custom text to the PM button |
<MDBTimepicker pmLabel='Post Meridiem' />
|
bodyId
|
string | '' |
Set the ID to the Timepicker's body. |
<MDBTimepicker bodyId='bodyID' />
|
headId
|
string | '' |
Set the ID to the Timepicker's head. |
<MDBTimepicker headId='headID' />
|
btnIcon
|
boolean | 'true' |
Appends an icon as a button. Set it to false to keep icon only. |
<MDBTimepicker btnIcon={false} />
|
cancelLabel
|
string | 'Cancel' |
Changes a cancel button label |
<MDBTimepicker cancelLabel='Close' />
|
clearLabel
|
string | 'Clear' |
Changes a clear button label |
<MDBTimepicker clearLabel='Clear a picker' />
|
customIcon
|
string | '' |
Sets a custom icon. You have to provide an icon type as well (i.e. "far", "fas", "fab" |
<MDBTimepicker customIcon='fab fa-react' />
|
customIconSize
|
string | '' |
Sets a size for the custom icon |
<MDBTimepicker customIcon='fab fa-react' customIconSize='2x' />
|
customValue
|
string | '' |
Custom value to control the input |
<MDBTimepicker customIcon='fab fa-react' customValue={value} />
|
defaultValue
|
string | date | '' |
Sets picker default value |
<MDBTimepicker defaultValue="12:33 AM" />
|
disabled
|
boolean | false |
Disables picker |
<MDBTimepicker disabled />
|
disableFuture
|
boolean | false |
Disallows future time selection |
<MDBTimepicker disableFuture />
|
disablePast
|
boolean | false |
Disallows past time selection |
<MDBTimepicker disablePast />
|
format
|
"12h" | "24h" | '12h' |
Sets a format for the picker |
<MDBTimepicker format='24h' />
|
inline
|
boolean | 'false' |
Changes a picker into inline version |
<MDBTimepicker inline />
|
increment
|
boolean | 'false' |
Increment minutes by 5 |
<MDBTimepicker increment />
|
inputWrapperTag
|
string | 'span' |
Defines tag of the MDBTimepicker input wrapper element |
<MDBTimepicker inputWrapperTag="span" />
|
inputID
|
string | '' |
Sets an ID for the input |
<MDBTimepicker inputID='customID' />
|
inputClasses
|
string | '' |
Add custom class to input |
<MDBTimepicker inputClasses='test' />
|
inputLabel
|
string | 'Select a time' |
Changes an input label |
<MDBTimepicker inputLabel='Pick a time' />
|
invalidLabel
|
string | 'Invalid Time Format' |
Changes an invalid feedback label |
<MDBTimepicker invalidLabel='Provide a correct time' />
|
justInput
|
boolean | 'false' |
Opens a timepicker after clicking on input |
<MDBTimepicker inputID='customID' />
|
minHour
|
number | '' |
Sets picker minimum hour |
<MDBTimepicker minHour={8} />
|
maxHour
|
number | '' |
Sets picker maximum hour |
<MDBTimepicker maxHour={10} />
|
minTime
|
string | '' |
Sets picker minimum time |
<MDBTimepicker minTime='06:07 AM' />
|
maxTime
|
string | '' |
Sets picker maximum time |
<MDBTimepicker maxTime='09:07 AM' />
|
noIcon
|
boolean | 'false' |
Removes icon from picker input |
<MDBTimepicker noIcon />
|
openRef
|
React.RefObject | '' |
Reference to the custom toggle element |
<MDBTimepicker openRef={customRef} />
|
submitLabel
|
string | 'Ok' |
Changes a submit button label |
<MDBTimepicker submitLabel='Submit' />
|
switchHoursToMinutesOnClick
|
boolean | true |
Allows to enable/disable switching to minutes if hours are selected |
<MDBTimepicker switchHoursToMinutesOnClick={true} />
|
timePickerClasses
|
string | '' |
Sets custom classes to the picker modal element |
<MDBTimepicker timePickerClasses='bg-danger' />
|
Events
Name | Type | Description |
---|---|---|
onChange
|
(value: string) => void | Returns string value on input change |
onOpen
|
() => void | Executed when the timepicker is opened |
onClose
|
() => void | Executed when the timepicker is closed |
CSS variables
As part of MDB’s evolving CSS variables approach, timepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Timepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.
// .timepicker
// &-wrapper
--#{$prefix}timepicker-wrapper-bg: #{$timepicker-wrapper-bg};
--#{$prefix}timepicker-elements-min-width: #{$timepicker-elements-min-width};
--#{$prefix}timepicker-elements-min-height: #{$timepicker-elements-min-height};
--#{$prefix}timepicker-elements-background: #{$timepicker-elements-background};
--#{$prefix}timepicker-elements-border-top-right-radius: #{$timepicker-elements-border-top-right-radius};
--#{$prefix}timepicker-elements-border-top-left-radius: #{$timepicker-elements-border-top-left-radius};
--#{$prefix}timepicker-elements-media-border-bottom-left-radius: #{$timepicker-elements-media-border-bottom-left-radius};
--#{$prefix}timepicker-head-bg: #{$timepicker-head-bg};
--#{$prefix}timepicker-head-height: #{$timepicker-head-height};
--#{$prefix}timepicker-head-border-top-right-radius: #{$timepicker-head-border-top-right-radius};
--#{$prefix}timepicker-head-border-top-left-radius: #{$timepicker-head-border-top-left-radius};
--#{$prefix}timepicker-head-padding-y: #{$timepicker-head-padding-y};
--#{$prefix}timepicker-head-padding-right: #{$timepicker-head-padding-right};
--#{$prefix}timepicker-head-padding-left: #{$timepicker-head-padding-left};
--#{$prefix}timepicker-head-media-padding: #{$timepicker-head-media-padding};
--#{$prefix}timepicker-head-media-padding-right: #{$timepicker-head-media-padding-right};
--#{$prefix}timepicker-head-media-min-height: #{$timepicker-head-media-min-height};
--#{$prefix}timepicker-head-inline-border-bottom-right-radius: #{$timepicker-head-inline-border-bottom-right-radius};
--#{$prefix}timepicker-head-inline-border-bottom-left-radius: #{$timepicker-head-inline-border-bottom-left-radius};
--#{$prefix}timepicker-button-font-size: #{$timepicker-button-font-size};
--#{$prefix}timepicker-button-min-width: #{$timepicker-button-min-width};
--#{$prefix}timepicker-button-font-weight: #{$timepicker-button-font-weight};
--#{$prefix}timepicker-button-line-height: #{$timepicker-button-line-height};
--#{$prefix}timepicker-button-border-radius: #{$timepicker-button-border-radius};
--#{$prefix}timepicker-button-letter-spacing: #{$timepicker-button-letter-spacing};
--#{$prefix}timepicker-button-color: #{$timepicker-button-color};
--#{$prefix}timepicker-button-transition: #{$timepicker-button-transition};
--#{$prefix}timepicker-button-padding-x: #{$timepicker-button-padding-x};
--#{$prefix}timepicker-button-height: #{$timepicker-button-height};
--#{$prefix}timepicker-button-margin-bottom: #{$timepicker-button-margin-bottom};
--#{$prefix}timepicker-button-hover-bg: #{$timepicker-button-hover-bg};
--#{$prefix}timepicker-button-focus-bg: #{$timepicker-button-focus-bg};
--#{$prefix}timepicker-submit-inline-height: #{$timepicker-submit-inline-height};
--#{$prefix}timepicker-submit-inline-min-width: #{$timepicker-submit-inline-min-width};
--#{$prefix}timepicker-submit-inline-margin-left: #{$timepicker-submit-inline-margin-left};
--#{$prefix}timepicker-submit-inline-color: #{$timepicker-submit-inline-color};
--#{$prefix}timepicker-current-font-size: #{$timepicker-current-font-size};
--#{$prefix}timepicker-current-font-weight: #{$timepicker-current-font-weight};
--#{$prefix}timepicker-current-line-height: #{$timepicker-current-line-height};
--#{$prefix}timepicker-current-letter-spacing: #{$timepicker-current-letter-spacing};
--#{$prefix}timepicker-current-color: #{$timepicker-current-color};
--#{$prefix}timepicker-current-opacity: #{$timepicker-current-opacity};
--#{$prefix}timepicker-clock-wrapper-min-width: #{$timepicker-clock-wrapper-min-width};
--#{$prefix}timepicker-clock-wrapper-max-width: #{$timepicker-clock-wrapper-max-width};
--#{$prefix}timepicker-clock-wrapper-min-height: #{$timepicker-clock-wrapper-min-height};
--#{$prefix}timepicker-mode-wrapper-font-size: #{$timepicker-mode-wrapper-font-size};
--#{$prefix}timepicker-mode-wrapper-color: #{$timepicker-mode-wrapper-color};
--#{$prefix}timepicker-clock-inner-top: #{$timepicker-clock-inner-top};
--#{$prefix}timepicker-clock-inner-left: #{$timepicker-clock-inner-left};
--#{$prefix}timepicker-clock-inner-transform: #{$timepicker-clock-inner-transform};
--#{$prefix}timepicker-clock-inner-width: #{$timepicker-clock-inner-width};
--#{$prefix}timepicker-clock-inner-height: #{$timepicker-clock-inner-height};
--#{$prefix}timepicker-time-tips-inner-width: #{$timepicker-time-tips-inner-width};
--#{$prefix}timepicker-time-tips-inner-height: #{$timepicker-time-tips-inner-height};
--#{$prefix}timepicker-time-tips-inner-font-size: #{$timepicker-time-tips-inner-font-size};
--#{$prefix}timepicker-time-tips-inner-font-weight: #{$timepicker-time-tips-inner-font-weight};
--#{$prefix}timepicker-clock-width: #{$timepicker-clock-width};
--#{$prefix}timepicker-clock-height: #{$timepicker-clock-height};
--#{$prefix}timepicker-clock-bg: #{$timepicker-clock-bg};
--#{$prefix}timepicker-time-tips-inner-active-color: #{$timepicker-time-tips-inner-active-color};
--#{$prefix}timepicker-time-tips-inner-active-bg: #{$timepicker-time-tips-inner-active-bg};
--#{$prefix}timepicker-time-tips-inner-active-font-weight: #{$timepicker-time-tips-inner-active-font-weight};
--#{$prefix}timepicker-time-tips-inner-disabled-color: #{$timepicker-time-tips-inner-disabled-color};
--#{$prefix}timepicker-dot-font-weight: #{$timepicker-dot-font-weight};
--#{$prefix}timepicker-dot-line-height: #{$timepicker-dot-line-height};
--#{$prefix}timepicker-dot-letter-spacing: #{$timepicker-dot-letter-spacing};
--#{$prefix}timepicker-dot-color: #{$timepicker-dot-color};
--#{$prefix}timepicker-dot-media-font-size: #{$timepicker-dot-media-font-size};
--#{$prefix}timepicker-dot-media-font-weight: #{$timepicker-dot-media-font-weight};
--#{$prefix}timepicker-dot-font-size: #{$timepicker-dot-font-size};
--#{$prefix}timepicker-dot-opacity: #{$timepicker-dot-opacity};
--#{$prefix}timepicker-current-inline-font-size: #{$timepicker-current-inline-font-size};
--#{$prefix}timepicker-item-width: #{$timepicker-item-width};
--#{$prefix}timepicker-item-height: #{$timepicker-item-height};
--#{$prefix}timepicker-item-padding: #{$timepicker-item-padding};
--#{$prefix}timepicker-item-font-size: #{$timepicker-item-font-size};
--#{$prefix}timepicker-item-middle-dot-top: #{$timepicker-item-middle-dot-top};
--#{$prefix}timepicker-item-middle-dot-left: #{$timepicker-item-middle-dot-left};
--#{$prefix}timepicker-item-middle-dot-width: #{$timepicker-item-middle-dot-width};
--#{$prefix}timepicker-item-middle-dot-height: #{$timepicker-item-middle-dot-height};
--#{$prefix}timepicker-item-middle-dot-transform: #{$timepicker-item-middle-dot-transform};
--#{$prefix}timepicker-item-middle-dot-border-radius: #{$timepicker-item-middle-dot-border-radius};
--#{$prefix}timepicker-item-middle-dot-bg: #{$timepicker-item-middle-dot-bg};
--#{$prefix}timepicker-hand-pointer-bg: #{$timepicker-hand-pointer-bg};
--#{$prefix}timepicker-hand-pointer-bottom: #{$timepicker-hand-pointer-bottom};
--#{$prefix}timepicker-hand-pointer-height: #{$timepicker-hand-pointer-height};
--#{$prefix}timepicker-hand-pointer-left: #{$timepicker-hand-pointer-left};
--#{$prefix}timepicker-hand-pointer-width: #{$timepicker-hand-pointer-width};
--#{$prefix}timepicker-transform-transition: #{$timepicker-transform-transition};
--#{$prefix}timepicker-time-tips-width: #{$timepicker-time-tips-width};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-font-size: #{$timepicker-time-tips-font-size};
--#{$prefix}timepicker-time-tips-active-color: #{$timepicker-time-tips-active-color};
--#{$prefix}timepicker-circle-top: #{$timepicker-circle-top};
--#{$prefix}timepicker-circle-left: #{$timepicker-circle-left};
--#{$prefix}timepicker-circle-width: #{$timepicker-circle-width};
--#{$prefix}timepicker-circle-border-width: #{$timepicker-circle-border-width};
--#{$prefix}timepicker-circle-border-color: #{$timepicker-circle-border-color};
--#{$prefix}timepicker-circle-height: #{$timepicker-circle-height};
--#{$prefix}timepicker-hour-mode-color: #{$timepicker-hour-mode-color};
--#{$prefix}timepicker-hour-mode-opacity: #{$timepicker-hour-mode-opacity};
--#{$prefix}timepicker-hour-mode-hover-bg: #{$timepicker-hour-mode-hover-bg};
--#{$prefix}timepicker-hour-mode-font-size: #{$timepicker-hour-mode-font-size};
--#{$prefix}timepicker-hour-mode-active-color: #{$timepicker-hour-mode-active-color};
--#{$prefix}timepicker-footer-border-bottom-left-radius: #{$timepicker-footer-border-bottom-left-radius};
--#{$prefix}timepicker-footer-border-bottom-right-radius: #{$timepicker-footer-border-bottom-right-radius};
--#{$prefix}timepicker-footer-height: #{$timepicker-footer-height};
--#{$prefix}timepicker-footer-padding-x: #{$timepicker-footer-padding-x};
--#{$prefix}timepicker-footer-bg: #{$timepicker-footer-bg};
--#{$prefix}timepicker-container-max-height: #{$timepicker-container-max-height};
--#{$prefix}timepicker-container-box-shadow: #{$box-shadow-4};
--#{$prefix}timepicker-icon-up-down-transition: #{$timepicker-icon-up-down-transition};
--#{$prefix}timepicker-icon-up-down-transform: #{$timepicker-icon-up-down-transform};
--#{$prefix}timepicker-icon-up-down-left: #{$timepicker-icon-up-down-left};
--#{$prefix}timepicker-icon-up-down-width: #{$timepicker-icon-up-down-width};
--#{$prefix}timepicker-icon-up-down-height: #{$timepicker-icon-up-down-height};
--#{$prefix}timepicker-icon-up-top: #{$timepicker-icon-up-top};
--#{$prefix}timepicker-icon-down-bottom: #{$timepicker-icon-down-bottom};
--#{$prefix}timepicker-icon-btn-width: #{$timepicker-icon-btn-width};
--#{$prefix}timepicker-icon-btn-height: #{$timepicker-icon-btn-height};
--#{$prefix}timepicker-input-color: #{$timepicker-input-color};
--#{$prefix}timepicker-clock-animation: #{$timepicker-clock-animation};
// &-wrapper-inline
--#{$prefix}timepicker-wrapper-inline-border-radius: #{$timepicker-wrapper-inline-border-radius};
// @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape)
--#{$prefix}timepicker-elements-media-border-bottom-left-radius
// &-toggle-button
--#{$prefix}timepicker-btn-icon-right: #{$timepicker-btn-icon-right};
--#{$prefix}timepicker-btn-icon-top: #{$timepicker-btn-icon-top};
--#{$prefix}timepicker-btn-icon-transform: #{$timepicker-btn-icon-transform};
--#{$prefix}timepicker-btn-icon-transition: #{$timepicker-btn-icon-transition};
--#{$prefix}timepicker-btn-icon-hover-color: #{$timepicker-btn-icon-hover-color};
--#{$prefix}timepicker-btn-icon-focus-color: #{$timepicker-btn-icon-focus-color};
// .timepicker-modal
--#{$prefix}timepicker-zindex: #{$timepicker-zindex};
SCSS variables
$timepicker-zindex: 1065;
$timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);
$timepicker-wrapper-inline-border-radius: 0.5rem;
$timepicker-elements-min-width: 310px;
$timepicker-elements-min-height: 325px;
$timepicker-elements-background: $white;
$timepicker-elements-border-top-right-radius: 0.6rem;
$timepicker-elements-border-top-left-radius: 0.6rem;
$timepicker-elements-media-border-bottom-left-radius: 0.5rem;
$timepicker-head-bg: $primary;
$timepicker-head-height: 100px;
$timepicker-head-border-top-right-radius: 0.5rem;
$timepicker-head-border-top-left-radius: 0.5rem;
$timepicker-head-padding-y: 10px;
$timepicker-head-padding-right: 24px;
$timepicker-head-padding-left: 50px;
$timepicker-head-media-padding: 10px;
$timepicker-head-media-padding-right: 10px;
$timepicker-head-media-min-height: 305px;
$timepicker-head-inline-border-bottom-right-radius: 0.5rem;
$timepicker-head-inline-border-bottom-left-radius: 0.5rem;
$timepicker-button-font-size: 0.8rem;
$timepicker-button-min-width: 64px;
$timepicker-button-font-weight: 500;
$timepicker-button-line-height: 40px;
$timepicker-button-border-radius: 10px;
$timepicker-button-letter-spacing: 0.1rem;
$timepicker-button-color: $primary;
$timepicker-button-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
$timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
$timepicker-button-focus-bg: $timepicker-button-hover-bg;
$timepicker-button-padding-x: 10px;
$timepicker-button-height: 40px;
$timepicker-button-margin-bottom: 10px;
$timepicker-submit-inline-height: 48px;
$timepicker-submit-inline-min-width: 48px;
$timepicker-submit-inline-margin-left: 30px;
$timepicker-submit-inline-color: $white;
$timepicker-current-font-size: 3.75rem;
$timepicker-current-font-weight: 300;
$timepicker-current-line-height: 1.2;
$timepicker-current-letter-spacing: -0.00833em;
$timepicker-current-color: $white;
$timepicker-current-opacity: 0.54;
$timepicker-mode-wrapper-font-size: 18px;
$timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);
$timepicker-clock-wrapper-min-width: 310px;
$timepicker-clock-wrapper-max-width: 325px;
$timepicker-clock-wrapper-min-height: 305px;
$timepicker-clock-animation: show-up-clock 350ms linear;
$timepicker-clock-width: 260px;
$timepicker-clock-height: 260px;
$timepicker-clock-bg: rgba(0, 0, 0, 0.07);
$timepicker-clock-inner-top: 50%;
$timepicker-clock-inner-left: 50%;
$timepicker-clock-inner-transform: translate(-50%, -50%);
$timepicker-clock-inner-width: 160px;
$timepicker-clock-inner-height: 160px;
$timepicker-time-tips-inner-width: 32px;
$timepicker-time-tips-inner-height: 32px;
$timepicker-time-tips-inner-font-size: 1.1rem;
$timepicker-time-tips-inner-font-weight: 300;
$timepicker-time-tips-inner-active-color: $white;
$timepicker-time-tips-inner-active-bg: $primary;
$timepicker-time-tips-inner-active-font-weight: 400;
$timepicker-time-tips-inner-disabled-color: #b3afaf;
$timepicker-dot-font-weight: 300;
$timepicker-dot-line-height: 1.2;
$timepicker-dot-letter-spacing: -0.00833em;
$timepicker-dot-color: $white;
$timepicker-dot-font-size: 3.75rem;
$timepicker-dot-opacity: 0.54;
$timepicker-dot-media-font-size: 3rem;
$timepicker-dot-media-font-weight: 400;
$timepicker-current-inline-font-size: 2.5rem;
$timepicker-item-width: 20px;
$timepicker-item-height: 20px;
$timepicker-item-padding: 10px;
$timepicker-item-font-size: 1.1em;
$timepicker-item-middle-dot-top: 50%;
$timepicker-item-middle-dot-left: 50%;
$timepicker-item-middle-dot-width: 6px;
$timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width;
$timepicker-item-middle-dot-transform: translate(-50%, -50%);
$timepicker-item-middle-dot-border-radius: 50%;
$timepicker-item-middle-dot-bg: $primary;
$timepicker-hand-pointer-bg: $primary;
$timepicker-hand-pointer-bottom: 50%;
$timepicker-hand-pointer-height: 40%;
$timepicker-hand-pointer-left: calc(50% - 1px);
$timepicker-hand-pointer-width: 2px;
$timepicker-transform-transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
$timepicker-time-tips-width: 32px;
$timepicker-time-tips-height: 32px;
$timepicker-time-tips-font-size: 1.1rem;
$timepicker-time-tips-active-color: $white;
$timepicker-circle-top: -21px;
$timepicker-circle-left: -15px;
$timepicker-circle-width: 4px;
$timepicker-circle-border-width: 14px;
$timepicker-circle-border-color: $primary;
$timepicker-circle-height: 4px;
$timepicker-hour-mode-color: $white;
$timepicker-hour-mode-opacity: 0.54;
$timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15);
$timepicker-hour-mode-active-color: $white;
$timepicker-hour-mode-font-size: 2.5rem;
$timepicker-footer-border-bottom-left-radius: 0.5rem;
$timepicker-footer-border-bottom-right-radius: 0.5rem;
$timepicker-footer-height: 56px;
$timepicker-footer-padding-x: 12px;
$timepicker-footer-bg: $white;
$timepicker-container-max-height: calc(100% - 64px);
$timepicker-icon-up-down-transition: 0.2s ease all;
$timepicker-icon-up-down-transform: translate(-50%, -50%);
$timepicker-icon-up-down-left: 50%;
$timepicker-icon-up-down-width: 30px;
$timepicker-icon-up-down-height: 30px;
$timepicker-icon-up-top: -35px;
$timepicker-icon-down-bottom: -47px;
$timepicker-icon-btn-width: 30px;
$timepicker-icon-btn-height: 30px;
$timepicker-input-color: $primary;
$timepicker-btn-icon-right: -10px;
$timepicker-btn-icon-transform: translate(-50%, -50%);
$timepicker-btn-icon-top: 50%;
$timepicker-btn-icon-transition: all 0.3s ease;
$timepicker-btn-icon-hover-color: $primary;
$timepicker-btn-icon-focus-color: $primary;