react-toolbox/components/time_picker/style.styl

61 lines
1.3 KiB
Stylus

@import '../constants'
AMPM_HEIGHT = 22px
AMPM_WIDTH = 40px
PICKER_WIDTH = 330px
// Picker dialog
:local(.dialog)
padding : 0
width : PICKER_WIDTH
> nav
margin-top : 0
padding-bottom : 10px
:local(.header)
background : ACCENT
color : WHITE
font-size : 52px
padding : 10px
text-align : center
position : relative
width : 100%
:local(.hours), :local(.minutes)
cursor : pointer
display : inline-block
opacity : .6
:local(.separator)
margin : 0 5px
opacity : .6
:local(.ampm)
font-size : 16px
height : AMPM_HEIGHT * 2
line-height : AMPM_HEIGHT
margin-top : - AMPM_HEIGHT
position : absolute
right : 20px
text-align : center
top : 50%
width : AMPM_WIDTH
:local(.am), :local(.pm)
cursor : pointer
display : block
opacity : .6
// Modifiers
:local(.dialog).display-hours :local(.hours)
opacity : 1
:local(.dialog).display-minutes :local(.minutes)
opacity : 1
:local(.dialog).format-am :local(.am)
opacity : 1
:local(.dialog).format-pm :local(.pm)
opacity : 1