/
VCalendarCategory.sass
101 lines (80 loc) 路 2.2 KB
/
VCalendarCategory.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
@import './_variables.scss'
// Theme
+theme(v-calendar-category) using ($material)
.v-calendar-category__column,
.v-calendar-category__column-header
border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
.v-calendar-category
.v-calendar-daily__head
background: map-deep-get($material, 'calendar', 'background-color')
.v-calendar-daily__intervals-head
background: map-deep-get($material, 'calendar', 'background-color')
.v-calendar-daily__intervals-body
background: map-deep-get($material, 'calendar', 'background-color')
.v-calendar-category
overflow: auto
position: relative
.v-calendar-category__category
text-align: center
.v-calendar-daily__day-container
width: min-content
.v-calendar-category__columns
position: absolute
height: 100%
width: 100%
top: 0
.v-calendar-daily__day-body
display: flex
flex: 1
width: 100%
height: 100%
.v-calendar-daily__head
flex-direction: row
width: min-content
min-width: 100%
position: sticky
top: 0
z-index: 2
.v-calendar-daily_head-day
width: auto
position: unset
.v-calendar-daily__intervals-head
position: sticky
left: 0
top: 0
z-index: 2
.v-calendar-daily_head-weekday
position: sticky
left: 50%
width: $calendar-daily-head-weekday-size
.v-calendar-daily_head-day-label
width: $calendar-daily-head-day-label-size
position: sticky
left: 50%
.v-calendar-daily__day
min-width: $calendar-category-column-min-width
.v-calendar-daily__intervals-body
position: sticky
left: 0
z-index: 1
.v-calendar-daily__interval
&:last-of-type::after
display: none
.v-calendar-daily__body
overflow: visible
.v-calendar-daily__scroll-area
overflow-y: visible
flex: none
.v-calendar-daily__pane
overflow-y: visible
.v-calendar-category__columns
display: flex
width: min-content
min-width: 100%
.v-calendar-category__column,
.v-calendar-category__column-header
flex: 1 1 auto
width: 0
position: relative
.v-calendar-category__column-header
min-width: $calendar-category-column-min-width