@nuvoui/core 1.1.7 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -35
- package/dist/nuvoui.css +28531 -0
- package/dist/nuvoui.css.map +1 -0
- package/dist/nuvoui.min.css +2 -1
- package/dist/nuvoui.min.css.map +1 -0
- package/package.json +48 -27
- package/src/styles/abstracts/_config.scss +157 -0
- package/src/styles/abstracts/_functions.scss +81 -0
- package/src/styles/abstracts/_index.scss +2 -0
- package/src/styles/base/_base.scss +2 -2
- package/src/styles/base/_index.scss +2 -0
- package/src/styles/base/_reset.scss +8 -6
- package/src/styles/index.scss +11 -28
- package/src/styles/layouts/_container.scss +14 -22
- package/src/styles/layouts/_flex.scss +60 -18
- package/src/styles/layouts/_grid.scss +36 -28
- package/src/styles/layouts/_index.scss +3 -0
- package/src/styles/mixins-map.scss +877 -1225
- package/src/styles/themes/_index.scss +1 -0
- package/src/styles/themes/_theme.scss +175 -57
- package/src/styles/utilities/_alignment.scss +20 -0
- package/src/styles/utilities/_animations.scss +65 -61
- package/src/styles/utilities/_borders.scss +280 -16
- package/src/styles/utilities/_colors.scss +68 -49
- package/src/styles/utilities/_container-queries.scss +46 -7
- package/src/styles/utilities/_display.scss +57 -3
- package/src/styles/utilities/_helpers.scss +110 -108
- package/src/styles/utilities/_index.scss +19 -0
- package/src/styles/utilities/_media-queries.scss +54 -19
- package/src/styles/utilities/_opacity.scss +110 -8
- package/src/styles/utilities/_position.scss +177 -71
- package/src/styles/utilities/_shadows.scss +194 -67
- package/src/styles/utilities/_sizing.scss +62 -57
- package/src/styles/utilities/_spacing.scss +331 -64
- package/src/styles/utilities/_tooltips.scss +153 -105
- package/src/styles/utilities/_transitions.scss +152 -0
- package/src/styles/utilities/_typography.scss +113 -89
- package/src/styles/utilities/_functions.scss +0 -84
- package/src/styles/utilities/_variables.scss +0 -98
|
@@ -1,95 +1,130 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
// Tooltip core variables
|
|
3
|
+
--tooltip-bg: rgba(17 17 17 / 90%);
|
|
4
|
+
--tooltip-shadow-color: rgb(0 0 0 / 20%);
|
|
5
|
+
--tooltip-text-color: #FFF;
|
|
1
6
|
|
|
7
|
+
// Animation variables
|
|
8
|
+
--microtip-transition-duration: 0.18s;
|
|
9
|
+
--microtip-transition-easing: ease-in-out;
|
|
10
|
+
--microtip-transition-delay: 0s;
|
|
2
11
|
|
|
3
|
-
|
|
4
|
-
|
|
12
|
+
// Typography variables
|
|
13
|
+
--microtip-font-size: 13px;
|
|
14
|
+
--microtip-font-weight: normal;
|
|
15
|
+
--microtip-text-transform: none;
|
|
16
|
+
|
|
17
|
+
// Sizing variables
|
|
18
|
+
--tooltip-small-width: 80px;
|
|
19
|
+
--tooltip-medium-width: 150px;
|
|
20
|
+
--tooltip-large-width: 260px;
|
|
21
|
+
--tooltip-border-radius: 4px;
|
|
5
22
|
}
|
|
6
23
|
|
|
7
|
-
[data-tooltip][role~="tooltip"]
|
|
8
|
-
|
|
24
|
+
[data-tooltip][role~="tooltip"] {
|
|
25
|
+
position: relative;
|
|
26
|
+
|
|
27
|
+
&::before,
|
|
28
|
+
&::after {
|
|
9
29
|
transform: translate3d(0, 0, 0);
|
|
10
30
|
backface-visibility: hidden;
|
|
11
31
|
will-change: transform;
|
|
12
32
|
opacity: 0;
|
|
13
33
|
pointer-events: none;
|
|
14
|
-
transition: all var(--microtip-transition-duration
|
|
34
|
+
transition: all var(--microtip-transition-duration) var(--microtip-transition-easing)
|
|
35
|
+
var(--microtip-transition-delay);
|
|
15
36
|
position: absolute;
|
|
16
37
|
box-sizing: border-box;
|
|
17
38
|
z-index: 10;
|
|
18
|
-
transform-origin: top
|
|
19
|
-
}
|
|
39
|
+
transform-origin: top;
|
|
40
|
+
}
|
|
20
41
|
|
|
21
|
-
|
|
42
|
+
&::before {
|
|
22
43
|
background-size: 100% auto !important;
|
|
23
|
-
content: ""
|
|
24
|
-
}
|
|
44
|
+
content: "";
|
|
45
|
+
}
|
|
25
46
|
|
|
26
|
-
|
|
27
|
-
background: var(--tooltip-bg);
|
|
47
|
+
&::after {
|
|
48
|
+
background: var(--tooltip-bg);
|
|
28
49
|
box-shadow: 0 3px 7px var(--tooltip-shadow-color);
|
|
29
|
-
border-radius:
|
|
30
|
-
color:
|
|
50
|
+
border-radius: var(--tooltip-border-radius);
|
|
51
|
+
color: var(--tooltip-text-color);
|
|
31
52
|
content: attr(data-tooltip);
|
|
32
|
-
font-size: var(--microtip-font-size
|
|
33
|
-
font-weight: var(--microtip-font-weight
|
|
34
|
-
text-transform: var(--microtip-text-transform
|
|
35
|
-
padding: .5em 1em;
|
|
53
|
+
font-size: var(--microtip-font-size);
|
|
54
|
+
font-weight: var(--microtip-font-weight);
|
|
55
|
+
text-transform: var(--microtip-text-transform);
|
|
56
|
+
padding: 0.5em 1em;
|
|
36
57
|
white-space: nowrap;
|
|
37
|
-
box-sizing: content-box
|
|
38
|
-
}
|
|
58
|
+
box-sizing: content-box;
|
|
59
|
+
}
|
|
39
60
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
61
|
+
&:hover::before,
|
|
62
|
+
&:hover::after,
|
|
63
|
+
&:focus::before,
|
|
64
|
+
&:focus::after {
|
|
44
65
|
opacity: 1;
|
|
45
|
-
pointer-events: auto
|
|
66
|
+
pointer-events: auto;
|
|
67
|
+
}
|
|
46
68
|
}
|
|
47
69
|
|
|
48
|
-
|
|
49
|
-
|
|
70
|
+
// Top position tooltips
|
|
71
|
+
[role~="tooltip"][data-microtip-position|="top"] {
|
|
72
|
+
&::before {
|
|
73
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
74
|
+
no-repeat;
|
|
50
75
|
height: 6px;
|
|
51
76
|
width: 18px;
|
|
52
77
|
margin-bottom: 5px;
|
|
53
78
|
transform: translate3d(-50%, 0, 0);
|
|
54
79
|
bottom: 100%;
|
|
55
|
-
left: 50
|
|
56
|
-
}
|
|
80
|
+
left: 50%;
|
|
81
|
+
}
|
|
57
82
|
|
|
58
|
-
|
|
83
|
+
&::after {
|
|
59
84
|
margin-bottom: 11px;
|
|
60
85
|
transform: translate3d(-50%, 0, 0);
|
|
61
86
|
bottom: 100%;
|
|
62
|
-
left: 50
|
|
63
|
-
}
|
|
87
|
+
left: 50%;
|
|
88
|
+
}
|
|
64
89
|
|
|
65
|
-
|
|
66
|
-
transform: translate3d(-50%, -5px, 0)
|
|
90
|
+
&:hover::before {
|
|
91
|
+
transform: translate3d(-50%, -5px, 0);
|
|
92
|
+
}
|
|
67
93
|
}
|
|
68
94
|
|
|
69
|
-
[role~="tooltip"][data-microtip-position="top"]
|
|
70
|
-
|
|
95
|
+
[role~="tooltip"][data-microtip-position="top"] {
|
|
96
|
+
&:hover::after {
|
|
97
|
+
transform: translate3d(-50%, -5px, 0);
|
|
98
|
+
}
|
|
71
99
|
}
|
|
72
100
|
|
|
73
|
-
[role~="tooltip"][data-microtip-position="top-left"]
|
|
101
|
+
[role~="tooltip"][data-microtip-position="top-left"] {
|
|
102
|
+
&::after {
|
|
74
103
|
transform: translate3d(calc(-100% + 16px), 0, 0);
|
|
75
|
-
bottom: 100
|
|
76
|
-
}
|
|
104
|
+
bottom: 100%;
|
|
105
|
+
}
|
|
77
106
|
|
|
78
|
-
|
|
79
|
-
transform: translate3d(calc(-100% + 16px), -5px, 0)
|
|
107
|
+
&:hover::after {
|
|
108
|
+
transform: translate3d(calc(-100% + 16px), -5px, 0);
|
|
109
|
+
}
|
|
80
110
|
}
|
|
81
111
|
|
|
82
|
-
[role~="tooltip"][data-microtip-position="top-right"]
|
|
112
|
+
[role~="tooltip"][data-microtip-position="top-right"] {
|
|
113
|
+
&::after {
|
|
83
114
|
transform: translate3d(calc(0% + -16px), 0, 0);
|
|
84
|
-
bottom: 100
|
|
85
|
-
}
|
|
115
|
+
bottom: 100%;
|
|
116
|
+
}
|
|
86
117
|
|
|
87
|
-
|
|
88
|
-
transform: translate3d(calc(0% + -16px), -5px, 0)
|
|
118
|
+
&:hover::after {
|
|
119
|
+
transform: translate3d(calc(0% + -16px), -5px, 0);
|
|
120
|
+
}
|
|
89
121
|
}
|
|
90
122
|
|
|
91
|
-
|
|
92
|
-
|
|
123
|
+
// Bottom position tooltips
|
|
124
|
+
[role~="tooltip"][data-microtip-position|="bottom"] {
|
|
125
|
+
&::before {
|
|
126
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
127
|
+
no-repeat;
|
|
93
128
|
height: 6px;
|
|
94
129
|
width: 18px;
|
|
95
130
|
margin-top: 5px;
|
|
@@ -97,104 +132,117 @@
|
|
|
97
132
|
transform: translate3d(-50%, -10px, 0);
|
|
98
133
|
bottom: auto;
|
|
99
134
|
left: 50%;
|
|
100
|
-
top: 100
|
|
101
|
-
}
|
|
135
|
+
top: 100%;
|
|
136
|
+
}
|
|
102
137
|
|
|
103
|
-
|
|
138
|
+
&::after {
|
|
104
139
|
margin-top: 11px;
|
|
105
140
|
transform: translate3d(-50%, -10px, 0);
|
|
106
141
|
top: 100%;
|
|
107
|
-
left: 50
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
142
|
+
left: 50%;
|
|
143
|
+
}
|
|
111
144
|
|
|
112
|
-
|
|
113
|
-
transform: translate3d(-50%, 0, 0)
|
|
145
|
+
&:hover::before {
|
|
146
|
+
transform: translate3d(-50%, 0, 0);
|
|
147
|
+
}
|
|
114
148
|
}
|
|
115
149
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
transform: translate3d(-50%, 0, 0)
|
|
150
|
+
[role~="tooltip"][data-microtip-position="bottom"] {
|
|
151
|
+
&:hover::after {
|
|
152
|
+
transform: translate3d(-50%, 0, 0);
|
|
153
|
+
}
|
|
119
154
|
}
|
|
120
155
|
|
|
121
|
-
[role~="tooltip"][data-microtip-position="bottom-left"]
|
|
156
|
+
[role~="tooltip"][data-microtip-position="bottom-left"] {
|
|
157
|
+
&::after {
|
|
122
158
|
transform: translate3d(calc(-100% + 16px), -10px, 0);
|
|
123
|
-
top: 100
|
|
124
|
-
}
|
|
159
|
+
top: 100%;
|
|
160
|
+
}
|
|
125
161
|
|
|
126
|
-
|
|
127
|
-
transform: translate3d(calc(-100% + 16px), 0, 0)
|
|
162
|
+
&:hover::after {
|
|
163
|
+
transform: translate3d(calc(-100% + 16px), 0, 0);
|
|
164
|
+
}
|
|
128
165
|
}
|
|
129
166
|
|
|
130
|
-
[role~="tooltip"][data-microtip-position="bottom-right"]
|
|
167
|
+
[role~="tooltip"][data-microtip-position="bottom-right"] {
|
|
168
|
+
&::after {
|
|
131
169
|
transform: translate3d(calc(0% + -16px), -10px, 0);
|
|
132
|
-
top: 100
|
|
133
|
-
}
|
|
170
|
+
top: 100%;
|
|
171
|
+
}
|
|
134
172
|
|
|
135
|
-
|
|
136
|
-
transform: translate3d(calc(0% + -16px), 0, 0)
|
|
173
|
+
&:hover::after {
|
|
174
|
+
transform: translate3d(calc(0% + -16px), 0, 0);
|
|
175
|
+
}
|
|
137
176
|
}
|
|
138
177
|
|
|
139
|
-
|
|
140
|
-
[role~="tooltip"][data-microtip-position="left"]
|
|
178
|
+
// Left position tooltips
|
|
179
|
+
[role~="tooltip"][data-microtip-position="left"] {
|
|
180
|
+
&::before,
|
|
181
|
+
&::after {
|
|
141
182
|
inset: auto auto auto 100%;
|
|
142
|
-
transform: translate3d(10px, -50%, 0)
|
|
143
|
-
}
|
|
183
|
+
transform: translate3d(10px, -50%, 0);
|
|
184
|
+
}
|
|
144
185
|
|
|
145
|
-
|
|
146
|
-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
186
|
+
&::before {
|
|
187
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
188
|
+
no-repeat;
|
|
147
189
|
height: 18px;
|
|
148
190
|
width: 6px;
|
|
149
191
|
margin-right: 5px;
|
|
150
|
-
margin-bottom: 0
|
|
151
|
-
}
|
|
192
|
+
margin-bottom: 0;
|
|
193
|
+
}
|
|
152
194
|
|
|
153
|
-
|
|
154
|
-
margin-right: 11px
|
|
155
|
-
}
|
|
195
|
+
&::after {
|
|
196
|
+
margin-right: 11px;
|
|
197
|
+
}
|
|
156
198
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
transform: translate3d(0, -50%, 0)
|
|
199
|
+
&:hover::before,
|
|
200
|
+
&:hover::after {
|
|
201
|
+
transform: translate3d(0, -50%, 0);
|
|
202
|
+
}
|
|
160
203
|
}
|
|
161
204
|
|
|
162
|
-
|
|
163
|
-
[role~="tooltip"][data-microtip-position="right"]
|
|
205
|
+
// Right position tooltips
|
|
206
|
+
[role~="tooltip"][data-microtip-position="right"] {
|
|
207
|
+
&::before,
|
|
208
|
+
&::after {
|
|
164
209
|
bottom: auto;
|
|
165
210
|
left: 100%;
|
|
166
211
|
top: 50%;
|
|
167
|
-
transform: translate3d(-10px, -50%, 0)
|
|
168
|
-
}
|
|
212
|
+
transform: translate3d(-10px, -50%, 0);
|
|
213
|
+
}
|
|
169
214
|
|
|
170
|
-
|
|
171
|
-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
215
|
+
&::before {
|
|
216
|
+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
|
|
217
|
+
no-repeat;
|
|
172
218
|
height: 18px;
|
|
173
219
|
width: 6px;
|
|
174
220
|
margin-bottom: 0;
|
|
175
|
-
margin-left: 5px
|
|
176
|
-
}
|
|
221
|
+
margin-left: 5px;
|
|
222
|
+
}
|
|
177
223
|
|
|
178
|
-
|
|
179
|
-
margin-left: 11px
|
|
180
|
-
}
|
|
224
|
+
&::after {
|
|
225
|
+
margin-left: 11px;
|
|
226
|
+
}
|
|
181
227
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
transform: translate3d(0, -50%, 0)
|
|
228
|
+
&:hover::before,
|
|
229
|
+
&:hover::after {
|
|
230
|
+
transform: translate3d(0, -50%, 0);
|
|
231
|
+
}
|
|
185
232
|
}
|
|
186
233
|
|
|
234
|
+
// Tooltip sizes
|
|
187
235
|
[role~="tooltip"][data-microtip-size="small"]::after {
|
|
188
|
-
|
|
189
|
-
|
|
236
|
+
white-space: initial;
|
|
237
|
+
width: var(--tooltip-small-width);
|
|
190
238
|
}
|
|
191
239
|
|
|
192
240
|
[role~="tooltip"][data-microtip-size="medium"]::after {
|
|
193
|
-
|
|
194
|
-
|
|
241
|
+
white-space: initial;
|
|
242
|
+
width: var(--tooltip-medium-width);
|
|
195
243
|
}
|
|
196
244
|
|
|
197
245
|
[role~="tooltip"][data-microtip-size="large"]::after {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
}
|
|
246
|
+
white-space: initial;
|
|
247
|
+
width: var(--tooltip-large-width);
|
|
248
|
+
}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
// _transitions.scss
|
|
2
|
+
@use '../abstracts' as *;
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Transition Utilities
|
|
6
|
+
*
|
|
7
|
+
* - .transition: Default transition for common properties
|
|
8
|
+
* - .transition-{property}: Transition specific properties
|
|
9
|
+
* - .duration-{time}: Set transition duration
|
|
10
|
+
* - .ease-{type}: Set transition timing function
|
|
11
|
+
* - .delay-{time}: Set transition delay
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
// Base transition mixins
|
|
15
|
+
@mixin transition {
|
|
16
|
+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
17
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
18
|
+
transition-duration: 150ms;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Property-specific transition mixins
|
|
22
|
+
@mixin transition-none { transition-property: none; }
|
|
23
|
+
@mixin transition-all { transition-property: all; }
|
|
24
|
+
@mixin transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
|
|
25
|
+
@mixin transition-opacity { transition-property: opacity; }
|
|
26
|
+
@mixin transition-shadow { transition-property: box-shadow; }
|
|
27
|
+
@mixin transition-transform { transition-property: transform; }
|
|
28
|
+
|
|
29
|
+
// Duration mixins
|
|
30
|
+
@mixin duration($time) {
|
|
31
|
+
transition-duration: $time;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Timing function mixins
|
|
35
|
+
@mixin ease-linear { transition-timing-function: linear; }
|
|
36
|
+
@mixin ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
|
|
37
|
+
@mixin ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
38
|
+
@mixin ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
|
39
|
+
|
|
40
|
+
// Delay mixins
|
|
41
|
+
@mixin delay($time) {
|
|
42
|
+
transition-delay: $time;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Base transition
|
|
46
|
+
.transition {
|
|
47
|
+
@include transition;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Property-specific transitions
|
|
51
|
+
.transition-none { @include transition-none; }
|
|
52
|
+
.transition-all { @include transition-all; }
|
|
53
|
+
.transition-colors { @include transition-colors; }
|
|
54
|
+
.transition-opacity { @include transition-opacity; }
|
|
55
|
+
.transition-shadow { @include transition-shadow; }
|
|
56
|
+
.transition-transform { @include transition-transform; }
|
|
57
|
+
|
|
58
|
+
// Durations
|
|
59
|
+
$durations: (
|
|
60
|
+
'0': 0ms,
|
|
61
|
+
'75': 75ms,
|
|
62
|
+
'100': 100ms,
|
|
63
|
+
'150': 150ms,
|
|
64
|
+
'200': 200ms,
|
|
65
|
+
'300': 300ms,
|
|
66
|
+
'500': 500ms,
|
|
67
|
+
'700': 700ms,
|
|
68
|
+
'1000': 1000ms,
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
@each $name, $value in $durations {
|
|
72
|
+
.duration-#{$name} {
|
|
73
|
+
@include duration($value);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Timing functions
|
|
78
|
+
$timing-functions: (
|
|
79
|
+
'linear': linear,
|
|
80
|
+
'in': cubic-bezier(0.4, 0, 1, 1),
|
|
81
|
+
'out': cubic-bezier(0, 0, 0.2, 1),
|
|
82
|
+
'in-out': cubic-bezier(0.4, 0, 0.2, 1),
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
@each $name, $value in $timing-functions {
|
|
86
|
+
.ease-#{$name} {
|
|
87
|
+
transition-timing-function: $value;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Specific timing function classes
|
|
92
|
+
.ease-linear { @include ease-linear; }
|
|
93
|
+
.ease-in { @include ease-in; }
|
|
94
|
+
.ease-out { @include ease-out; }
|
|
95
|
+
.ease-in-out { @include ease-in-out; }
|
|
96
|
+
|
|
97
|
+
// Delays
|
|
98
|
+
$delays: (
|
|
99
|
+
'0': 0ms,
|
|
100
|
+
'75': 75ms,
|
|
101
|
+
'100': 100ms,
|
|
102
|
+
'150': 150ms,
|
|
103
|
+
'200': 200ms,
|
|
104
|
+
'300': 300ms,
|
|
105
|
+
'500': 500ms,
|
|
106
|
+
'700': 700ms,
|
|
107
|
+
'1000': 1000ms,
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
@each $name, $value in $delays {
|
|
111
|
+
.delay-#{$name} {
|
|
112
|
+
@include delay($value);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Responsive variants
|
|
117
|
+
@each $breakpoint, $width in $breakpoints {
|
|
118
|
+
@media (min-width: #{$width}) {
|
|
119
|
+
// Base transition
|
|
120
|
+
.transition\@#{$breakpoint} {
|
|
121
|
+
@include transition;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Property-specific transitions
|
|
125
|
+
.transition-none\@#{$breakpoint} { @include transition-none; }
|
|
126
|
+
.transition-all\@#{$breakpoint} { @include transition-all; }
|
|
127
|
+
.transition-colors\@#{$breakpoint} { @include transition-colors; }
|
|
128
|
+
.transition-opacity\@#{$breakpoint} { @include transition-opacity; }
|
|
129
|
+
.transition-shadow\@#{$breakpoint} { @include transition-shadow; }
|
|
130
|
+
.transition-transform\@#{$breakpoint} { @include transition-transform; }
|
|
131
|
+
|
|
132
|
+
// Duration responsive variants
|
|
133
|
+
@each $name, $value in $durations {
|
|
134
|
+
.duration-#{$name}\@#{$breakpoint} {
|
|
135
|
+
@include duration($value);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// Timing function responsive variants
|
|
140
|
+
.ease-linear\@#{$breakpoint} { @include ease-linear; }
|
|
141
|
+
.ease-in\@#{$breakpoint} { @include ease-in; }
|
|
142
|
+
.ease-out\@#{$breakpoint} { @include ease-out; }
|
|
143
|
+
.ease-in-out\@#{$breakpoint} { @include ease-in-out; }
|
|
144
|
+
|
|
145
|
+
// Delay responsive variants
|
|
146
|
+
@each $name, $value in $delays {
|
|
147
|
+
.delay-#{$name}\@#{$breakpoint} {
|
|
148
|
+
@include delay($value);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|