119 lines
2.7 KiB
Stylus
119 lines
2.7 KiB
Stylus
@import '../constants'
|
|
|
|
// -- Calendar sizes
|
|
ROW_HEIGHT = 40px
|
|
DAY_PADDING = 2px
|
|
TOTAL_HEIGHT = ROW_HEIGHT * 8 + DAY_PADDING * 12
|
|
|
|
:local(.root)
|
|
background : WHITE
|
|
height : TOTAL_HEIGHT
|
|
font-size : 14px
|
|
overflow : hidden
|
|
position : relative
|
|
line-height : ROW_HEIGHT
|
|
text-align : center
|
|
|
|
:local(.prev), :local(.next)
|
|
color : lighten(TEXT, 15%)
|
|
cursor : pointer
|
|
font-size : 26px
|
|
height : ROW_HEIGHT
|
|
line-height : ROW_HEIGHT
|
|
opacity : .7
|
|
position : absolute
|
|
text-align : center
|
|
top : 0
|
|
width : ROW_HEIGHT
|
|
z-index : Z_INDEX_HIGH
|
|
|
|
:local(.title)
|
|
font-weight : 500
|
|
|
|
:local(.prev)
|
|
left : 0
|
|
|
|
:local(.next)
|
|
right : 0
|
|
|
|
:local(.week)
|
|
display : flex
|
|
flex-wrap : wrap
|
|
font-size : 13px
|
|
height : ROW_HEIGHT
|
|
line-height : ROW_HEIGHT
|
|
opacity : .5
|
|
|
|
> span
|
|
flex : 0 0 (100/7)%
|
|
|
|
:local(.days)
|
|
display : flex
|
|
flex-wrap : wrap
|
|
font-size : 13px
|
|
|
|
:local(.day)
|
|
flex : 0 0 (100/7)%
|
|
padding : DAY_PADDING
|
|
|
|
> span
|
|
border-radius : 50%
|
|
cursor : pointer
|
|
display : inline-block
|
|
height : ROW_HEIGHT
|
|
line-height : ROW_HEIGHT
|
|
width : ROW_HEIGHT
|
|
|
|
&:hover:not(.active) > span
|
|
background : lighten(ACCENT, 65%)
|
|
color : WHITE
|
|
|
|
&.active > span
|
|
background : ACCENT
|
|
color : WHITE
|
|
|
|
// -- Transitions
|
|
:local(.root) .slide-horizontal-enter, :local(.root) .slide-horizontal-leave
|
|
transition : all .5s
|
|
|
|
:local(.root) .right
|
|
.slide-horizontal-enter
|
|
position : absolute
|
|
transform : translateX(100%)
|
|
opacity : 0
|
|
|
|
.slide-horizontal-leave, .slide-horizontal-enter-active
|
|
transform : translateX(0)
|
|
opacity : 1
|
|
|
|
.slide-horizontal-leave-active
|
|
transform : translateX(-100%)
|
|
opacity : 0
|
|
|
|
:local(.root) .left
|
|
.slide-horizontal-enter
|
|
position : absolute
|
|
transform : translateX(-100%)
|
|
opacity : 0
|
|
|
|
.slide-horizontal-leave, .slide-horizontal-enter-active
|
|
transform : translateX(0)
|
|
opacity : 1
|
|
|
|
.slide-horizontal-leave-active
|
|
transform : translateX(100%)
|
|
opacity : 0
|
|
|
|
:local(.years)
|
|
font-size : 18px
|
|
height : 100%
|
|
overflow : scroll
|
|
|
|
> li
|
|
cursor : pointer
|
|
line-height : 2.4
|
|
|
|
&.active
|
|
color : ACCENT
|
|
font-size : 24px
|