143 lines
3.5 KiB
Sass
143 lines
3.5 KiB
Sass
@use '../../styles/tools'
|
|
@use '../../styles/settings'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-calendar-daily
|
|
background-color: $calendar-background
|
|
color: $calendar-on-background
|
|
border-left: $calendar-outline-color $calendar-line-width solid
|
|
border-top: $calendar-outline-color $calendar-line-width solid
|
|
|
|
.v-calendar-daily__intervals-head
|
|
border-right: $calendar-grid-color $calendar-line-width solid
|
|
|
|
&::after
|
|
background: $calendar-grid-color
|
|
background: linear-gradient(90deg, transparent, $calendar-grid-color)
|
|
|
|
.v-calendar-daily_head-day
|
|
border-right: $calendar-grid-color $calendar-line-width solid
|
|
border-bottom: $calendar-grid-color $calendar-line-width solid
|
|
|
|
&.v-past
|
|
.v-calendar-daily_head-weekday,
|
|
.v-calendar-daily_head-day-label
|
|
color: $calendar-past-color
|
|
|
|
.v-calendar-daily__intervals-body
|
|
border-right: $calendar-grid-color $calendar-line-width solid
|
|
|
|
.v-calendar-daily__interval-text
|
|
color: $calendar-interval-text-color
|
|
|
|
.v-calendar-daily__day
|
|
border-right: $calendar-grid-color $calendar-line-width solid
|
|
border-bottom: $calendar-grid-color $calendar-line-width solid
|
|
|
|
.v-calendar-daily__day-interval
|
|
border-top: $calendar-grid-color $calendar-line-width solid
|
|
|
|
&:first-child
|
|
border-top: none
|
|
|
|
.v-calendar-daily__interval::after
|
|
border-top: $calendar-grid-color $calendar-line-width solid
|
|
|
|
.v-calendar-daily
|
|
display: flex
|
|
flex-direction: column
|
|
overflow: hidden
|
|
height: 100%
|
|
|
|
.v-calendar-daily__head
|
|
flex: none
|
|
display: flex
|
|
|
|
.v-calendar-daily__intervals-head
|
|
flex: none
|
|
position: relative
|
|
|
|
&::after
|
|
position: absolute
|
|
bottom: 0px
|
|
height: $calendar-line-width
|
|
left: 0
|
|
right: 0
|
|
content: ''
|
|
|
|
.v-calendar-daily_head-day
|
|
flex: 1 1 auto
|
|
width: 0
|
|
position: relative
|
|
|
|
.v-calendar-daily_head-weekday
|
|
user-select: none
|
|
padding: $calendar-daily-weekday-padding
|
|
font-size: $calendar-daily-weekday-font-size
|
|
text-align: center
|
|
text-transform: uppercase
|
|
|
|
.v-calendar-daily_head-day-label
|
|
user-select: none
|
|
padding: $calendar-daily-day-padding
|
|
cursor: pointer
|
|
text-align: center
|
|
|
|
.v-calendar-daily__body
|
|
flex: 1 1 60%
|
|
overflow: hidden
|
|
display: flex
|
|
position: relative
|
|
flex-direction: column
|
|
|
|
.v-calendar-daily__scroll-area
|
|
overflow-y: scroll
|
|
flex: 1 1 auto
|
|
display: flex
|
|
align-items: flex-start
|
|
|
|
.v-calendar-daily__pane
|
|
width: 100%
|
|
overflow-y: hidden
|
|
flex: none
|
|
display: flex
|
|
align-items: flex-start
|
|
|
|
.v-calendar-daily__day-container
|
|
display: flex
|
|
flex: 1
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.v-calendar-daily__intervals-body
|
|
flex: none
|
|
user-select: none
|
|
|
|
.v-calendar-daily__interval
|
|
text-align: $calendar-daily-interval-gutter-align
|
|
padding-right: $calendar-daily-interval-gutter-line-width
|
|
border-bottom: none
|
|
position: relative
|
|
|
|
&::after
|
|
width: $calendar-daily-interval-gutter-line-width
|
|
position: absolute
|
|
height: $calendar-line-width
|
|
display: block
|
|
content: ''
|
|
right: 0
|
|
bottom: -$calendar-line-width
|
|
|
|
.v-calendar-daily__interval-text
|
|
display: block
|
|
position: relative
|
|
top: $calendar-daily-interval-gutter-top
|
|
font-size: $calendar-daily-interval-gutter-font-size
|
|
padding-right: $calendar-daily-interval-gutter-width
|
|
|
|
.v-calendar-daily__day
|
|
flex: 1
|
|
width: 0
|
|
position: relative
|