-
Notifications
You must be signed in to change notification settings - Fork 75
/
calcite-date-picker-month-header.scss
141 lines (124 loc) · 1.8 KB
/
calcite-date-picker-month-header.scss
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
:host {
@apply block;
}
.header {
@apply flex justify-between;
@apply py-0 px-1;
}
:host([scale="s"]) {
.text {
@apply text--1h my-2;
}
.chevron {
@apply h-9;
}
}
:host([scale="m"]) {
.text {
@apply text-0h my-3;
}
.chevron {
@apply h-12;
}
}
:host([scale="l"]) {
.text {
@apply text-1h my-4;
}
.chevron {
// @apply h-16;
height: 3.5rem;
}
}
.chevron {
@apply text-color-3
flex-grow-0
box-content
outline-none
px-1
-mx-1
border-none
flex
items-center
justify-center
bg-foreground-1
cursor-pointer
transition-all
duration-150
ease-in-out
focus-base;
width: calc(100% / 7);
&:focus {
@apply focus-inset;
}
&:hover,
&:focus {
@apply text-color-1 bg-foreground-2 fill-color-1;
}
&:active {
@apply bg-foreground-3;
}
&[aria-disabled="true"] {
@apply pointer-events-none opacity-0;
}
}
.text {
@apply flex-auto
items-center
justify-center
leading-none
my-auto
text-center
w-full;
}
.text--reverse {
@apply flex-row-reverse;
}
.month,
.year,
.suffix {
@apply text-color-1
bg-foreground-1
font-medium
leading-tight
mx-1
my-auto
inline-block;
font-size: inherit;
}
.year {
@apply font-inherit
text-center
border-none
w-12
bg-transparent
relative
focus-base;
z-index: 2;
&:hover {
@apply duration-100 ease-in-out;
transition-property: outline-color;
outline: 2px solid var(--calcite-ui-border-2);
outline-offset: 2px;
}
&:focus {
@apply focus-outset;
}
}
.year--suffix {
@apply w-16 text-left;
}
.year-wrap {
@apply relative;
}
.suffix {
@apply absolute
w-16
whitespace-nowrap
text-left
top-0
left-0;
}
.suffix__invisible {
@apply invisible;
}