@itcase/ui 1.9.0 → 1.9.1
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/dist/css/mediaqueries/mediaqueries.css +78 -0
- package/dist/css/mixins/mixin_animation.css +8 -0
- package/dist/css/mixins/mixin_dark-light.css +16 -0
- package/dist/css/mixins/mixin_elevation.css +31 -0
- package/dist/css/mixins/mixin_fill-gradient.css +47 -0
- package/dist/css/mixins/mixin_typography.css +237 -0
- package/dist/css/mixins/mixin_utils.css +54 -0
- package/dist/css/styles/bundles.css +12 -0
- package/package.json +3 -3
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--mobile-tiny: 15em; /* 240px */
|
|
3
|
+
--mobile-small: 20em; /* 320px */
|
|
4
|
+
--mobile-medium: 23.435em; /* 375px */
|
|
5
|
+
--mobile-large: 25.875em; /* 414px */
|
|
6
|
+
--mobile-extra-large: 30em; /* 480px */
|
|
7
|
+
--mobile-super-extra-large: 40em; /* 640px */
|
|
8
|
+
--tablet: 48em; /* 768px */
|
|
9
|
+
--desktop-small: 60em; /* 960px */
|
|
10
|
+
--desktop-medium: 64em; /* 1024px */
|
|
11
|
+
--desktop-normal: 72.5em; /* 1160px */
|
|
12
|
+
--desktop-large: 80em; /* 1280px */
|
|
13
|
+
--desktop-extra-large: 90em; /* 1441px */
|
|
14
|
+
--desktop-super-extra-large: 120em; /* 1920px */
|
|
15
|
+
--desktop-huge: 160em; /* 2560px */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@custom-media --warning (width <= 15em);
|
|
19
|
+
|
|
20
|
+
@custom-media --mobile (width >= 15em) and (width < 48em);
|
|
21
|
+
|
|
22
|
+
@custom-media --mobile-tiny (width >= 15em) and (width < 20em);
|
|
23
|
+
|
|
24
|
+
@custom-media --mobile-small (width >= 20em) and (width < 23.435em);
|
|
25
|
+
|
|
26
|
+
@custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
|
|
27
|
+
|
|
28
|
+
@custom-media --mobile-standart (width >= 25.875em) and (width < 30em);
|
|
29
|
+
|
|
30
|
+
@custom-media --mobile-large (width >= 30em) and (width < 40em);
|
|
31
|
+
|
|
32
|
+
@custom-media --mobile-huge (width >= 40em) and (width < 48em);
|
|
33
|
+
|
|
34
|
+
@custom-media --tablet (width >= 48em) and (width < 60em);
|
|
35
|
+
|
|
36
|
+
@custom-media --tablet-small (width >= 40em) and (width < 48em);
|
|
37
|
+
|
|
38
|
+
@custom-media --tablet-large (width >= 48em) and (width < 60em);
|
|
39
|
+
|
|
40
|
+
@custom-media --desktop (width >= 60em);
|
|
41
|
+
|
|
42
|
+
@custom-media --desktop-small (width >= 60em) and (width < 64em);
|
|
43
|
+
|
|
44
|
+
@custom-media --desktop-medium (width >= 64em) and (width < 72.5em);
|
|
45
|
+
|
|
46
|
+
@custom-media --desktop-normal (width >= 72.5em) and (width < 80em);
|
|
47
|
+
|
|
48
|
+
@custom-media --desktop-standart (width >= 80em) and (width < 90em);
|
|
49
|
+
|
|
50
|
+
@custom-media --desktop-large (width >= 90em) and (width < 120em);
|
|
51
|
+
|
|
52
|
+
@custom-media --desktop-huge (width >= 120em) and (width < 160em);
|
|
53
|
+
|
|
54
|
+
@custom-media --desktop-super-huge (width >= 160em);
|
|
55
|
+
|
|
56
|
+
@custom-media --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
|
|
57
|
+
|
|
58
|
+
@custom-media --portrait (orientation: portrait) and (width >= 15em) and (width < 60em);
|
|
59
|
+
|
|
60
|
+
@custom-media --touch (hover: none) and (pointer: coarse);
|
|
61
|
+
|
|
62
|
+
@custom-media --stylus (hover: none) and (pointer: fine);
|
|
63
|
+
|
|
64
|
+
@custom-media --console (hover: hover) and (pointer: coarse);
|
|
65
|
+
|
|
66
|
+
@custom-media --mouse (hover: hover) and (pointer: fine);
|
|
67
|
+
|
|
68
|
+
@custom-media --tiny-viewport (width <= 1366px) and (height <= 720px);
|
|
69
|
+
|
|
70
|
+
@custom-media --small-viewport (width >= 1366px) and (height < 768px);
|
|
71
|
+
|
|
72
|
+
@custom-media --medium-viewport (width >= 1440px) and (height < 900px);
|
|
73
|
+
|
|
74
|
+
@custom-media --large-viewport (width >= 1440px) and (height < 900px);
|
|
75
|
+
|
|
76
|
+
@custom-media --huge-viewport (width >= 1600px) and (height < 900px);
|
|
77
|
+
|
|
78
|
+
@custom-media --super-huge-viewport (width >= 1920px) and (height >= 1080px);
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@define-mixin elevation-1 {
|
|
2
|
+
box-shadow: var(--elevation-1);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@define-mixin elevation-2 {
|
|
6
|
+
box-shadow: var(--elevation-2);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@define-mixin elevation-4 {
|
|
10
|
+
box-shadow: var(--elevation-4);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@define-mixin elevation-6 {
|
|
14
|
+
box-shadow: var(--elevation-6);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@define-mixin elevation-8 {
|
|
18
|
+
box-shadow: var(--elevation-8);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@define-mixin elevation-12 {
|
|
22
|
+
box-shadow: var(--elevation-12);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@define-mixin elevation-16 {
|
|
26
|
+
box-shadow: var(--elevation-16);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@define-mixin elevation-24 {
|
|
30
|
+
box-shadow: var(--elevation-24);
|
|
31
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@define-mixin fill-gradient_surface-primary-left {
|
|
2
|
+
background: linear-gradient(
|
|
3
|
+
to left,
|
|
4
|
+
hsl(0, 0%, 0%, 0) 0%,
|
|
5
|
+
hsl(0, 0%, 0%, 0.65) 100%
|
|
6
|
+
);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@define-mixin fill-gradient_surface-primary-top {
|
|
10
|
+
background: linear-gradient(
|
|
11
|
+
to top,
|
|
12
|
+
hsl(0, 0%, 0%, 0) 0%,
|
|
13
|
+
hsl(0, 0%, 0%, 0.65) 100%
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@define-mixin fill-gradient_surface-primary-right {
|
|
18
|
+
background: linear-gradient(
|
|
19
|
+
to left,
|
|
20
|
+
hsl(0, 0%, 0%, 0.65) 0%,
|
|
21
|
+
hsl(0, 0%, 0%, 0) 100%
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@define-mixin fill-gradient_surface-primary-bottom {
|
|
26
|
+
background: linear-gradient(
|
|
27
|
+
to top,
|
|
28
|
+
hsl(0, 0%, 0%, 0.65) 0%,
|
|
29
|
+
hsl(0, 0%, 0%, 0) 100%
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@define-mixin fill-gradient_surface-primary-diagonal-left {
|
|
34
|
+
background: linear-gradient(
|
|
35
|
+
to bottom,
|
|
36
|
+
hsl(0, 0%, 0%, 0) 0%,
|
|
37
|
+
hsl(0, 0%, 0%, 0.65) 100%
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@define-mixin fill-gradient_surface-primary-diagonal-right {
|
|
42
|
+
background: linear-gradient(
|
|
43
|
+
to bottom,
|
|
44
|
+
hsl(0, 0%, 0%, 0) 0%,
|
|
45
|
+
hsl(0, 0%, 0%, 0.65) 100%
|
|
46
|
+
);
|
|
47
|
+
}
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
@define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
2
|
+
@mixin font $weight, var(--typography-h1-min), var(--typography-h1-max),
|
|
3
|
+
$minLetterSpacing, var(--typography-h1-min-line-height),
|
|
4
|
+
var(--typography-h1-max-line-height), $maxLetterSpacing,
|
|
5
|
+
var(--typography-h1-font);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
9
|
+
@mixin font $weight, var(--typography-h2-min), var(--typography-h2-max),
|
|
10
|
+
$minLetterSpacing, var(--typography-h2-min-line-height),
|
|
11
|
+
var(--typography-h2-max-line-height), $maxLetterSpacing,
|
|
12
|
+
var(--typography-h2-font);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
16
|
+
@mixin font $weight, var(--typography-h3-min), var(--typography-h3-max),
|
|
17
|
+
$minLetterSpacing, var(--typography-h3-min-line-height),
|
|
18
|
+
var(--typography-h3-max-line-height), $maxLetterSpacing,
|
|
19
|
+
var(--typography-h3-font);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
23
|
+
@mixin font $weight, var(--typography-h4-min), var(--typography-h4-max),
|
|
24
|
+
$minLetterSpacing, var(--typography-h4-min-line-height),
|
|
25
|
+
var(--typography-h4-max-line-height), $maxLetterSpacing,
|
|
26
|
+
var(--typography-h4-font);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
30
|
+
@mixin font $weight, var(--typography-h5-min), var(--typography-h5-max),
|
|
31
|
+
$minLetterSpacing, var(--typography-h5-min-line-height),
|
|
32
|
+
var(--typography-h5-max-line-height), $maxLetterSpacing,
|
|
33
|
+
var(--typography-h5-font);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
37
|
+
@mixin font $weight, var(--typography-h6-min), var(--typography-h6-max),
|
|
38
|
+
$minLetterSpacing, var(--typography-h6-min-line-height),
|
|
39
|
+
var(--typography-h6-max-line-height), $maxLetterSpacing,
|
|
40
|
+
var(--typography-h6-font);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
|
|
44
|
+
$maxLetterSpacing: 0 {
|
|
45
|
+
@mixin font $weight, var(--typography-hero1-min), var(--typography-hero1-max),
|
|
46
|
+
$minLetterSpacing, var(--typography-hero1-min-line-height),
|
|
47
|
+
var(--typography-hero1-max-line-height), $maxLetterSpacing,
|
|
48
|
+
var(--typography-hero1-font);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
|
|
52
|
+
$maxLetterSpacing: 0 {
|
|
53
|
+
@mixin font $weight, var(--typography-hero2-min), var(--typography-hero2-max),
|
|
54
|
+
$minLetterSpacing, var(--typography-hero2-min-line-height),
|
|
55
|
+
var(--typography-hero2-max-line-height), $maxLetterSpacing,
|
|
56
|
+
var(--typography-hero2-font);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
|
|
60
|
+
$maxLetterSpacing: 0 {
|
|
61
|
+
@mixin font $weight, var(--typography-hero3-min), var(--typography-hero3-max),
|
|
62
|
+
$minLetterSpacing, var(--typography-hero3-min-line-height),
|
|
63
|
+
var(--typography-hero3-max-line-height), $maxLetterSpacing,
|
|
64
|
+
var(--typography-hero3-font);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
|
|
68
|
+
$maxLetterSpacing: 0 {
|
|
69
|
+
@mixin font $weight, var(--typography-hero4-min), var(--typography-hero4-max),
|
|
70
|
+
$minLetterSpacing, var(--typography-hero4-min-line-height),
|
|
71
|
+
var(--typography-hero4-max-line-height), $maxLetterSpacing,
|
|
72
|
+
var(--typography-hero4-font);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
|
|
76
|
+
$maxLetterSpacing: 0 {
|
|
77
|
+
@mixin font $weight, var(--typography-hero5-min), var(--typography-hero5-max),
|
|
78
|
+
$minLetterSpacing, var(--typography-hero5-min-line-height),
|
|
79
|
+
var(--typography-hero5-max-line-height), $maxLetterSpacing,
|
|
80
|
+
var(--typography-hero5-font);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
|
|
84
|
+
$maxLetterSpacing: 0 {
|
|
85
|
+
@mixin font $weight, var(--typography-hero6-min), var(--typography-hero6-max),
|
|
86
|
+
$minLetterSpacing, var(--typography-hero6-min-line-height),
|
|
87
|
+
var(--typography-hero6-max-line-height), $maxLetterSpacing,
|
|
88
|
+
var(--typography-hero6-font);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
92
|
+
@mixin font $weight, var(--typography-p-min), var(--typography-p-max),
|
|
93
|
+
$minLetterSpacing, var(--typography-p-min-line-height),
|
|
94
|
+
var(--typography-p-max-line-height), $maxLetterSpacing,
|
|
95
|
+
var(--typography-p-font);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
|
|
99
|
+
$maxLetterSpacing: 0 {
|
|
100
|
+
@mixin font $weight, var(--typography-text-xxl-min),
|
|
101
|
+
var(--typography-text-xxl-max), $minLetterSpacing,
|
|
102
|
+
var(--typography-text-xxl-min-line-height),
|
|
103
|
+
var(--typography-text-xxl-max-line-height), $maxLetterSpacing,
|
|
104
|
+
var(--typography-text-xxl-font);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
|
|
108
|
+
$maxLetterSpacing: 0 {
|
|
109
|
+
@mixin font $weight, var(--typography-text-xl-min),
|
|
110
|
+
var(--typography-text-xl-max), $minLetterSpacing,
|
|
111
|
+
var(--typography-text-xl-min-line-height),
|
|
112
|
+
var(--typography-text-xl-max-line-height), $maxLetterSpacing,
|
|
113
|
+
var(--typography-text-xl-font);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
117
|
+
@mixin font $weight, var(--typography-text-l-min),
|
|
118
|
+
var(--typography-text-l-max), $minLetterSpacing,
|
|
119
|
+
var(--typography-text-l-min-line-height),
|
|
120
|
+
var(--typography-text-l-max-line-height), $maxLetterSpacing,
|
|
121
|
+
var(--typography-text-l-font);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
125
|
+
@mixin font $weight, var(--typography-text-m-min),
|
|
126
|
+
var(--typography-text-m-max), $minLetterSpacing,
|
|
127
|
+
var(--typography-text-m-min-line-height),
|
|
128
|
+
var(--typography-text-m-max-line-height), $maxLetterSpacing,
|
|
129
|
+
var(--typography-text-m-font);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
133
|
+
@mixin font $weight, var(--typography-text-s-min),
|
|
134
|
+
var(--typography-text-s-max), $minLetterSpacing,
|
|
135
|
+
var(--typography-text-s-min-line-height),
|
|
136
|
+
var(--typography-text-s-max-line-height), $maxLetterSpacing,
|
|
137
|
+
var(--typography-text-s-font);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
|
|
141
|
+
$maxLetterSpacing: 0 {
|
|
142
|
+
@mixin font $weight, var(--typography-text-xs-min),
|
|
143
|
+
var(--typography-text-xs-max), $minLetterSpacing,
|
|
144
|
+
var(--typography-text-xs-min-line-height),
|
|
145
|
+
var(--typography-text-xs-max-line-height), $maxLetterSpacing,
|
|
146
|
+
var(--typography-text-xs-font);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
|
|
150
|
+
$maxLetterSpacing: 0 {
|
|
151
|
+
@mixin font $weight, var(--typography-text-xxs-min),
|
|
152
|
+
var(--typography-text-xxs-max), $minLetterSpacing,
|
|
153
|
+
var(--typography-text-xxs-min-line-height),
|
|
154
|
+
var(--typography-text-xxs-max-line-height), $maxLetterSpacing,
|
|
155
|
+
var(--typography-text-xxs-font);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@define-mixin email-h1 $weight: normal {
|
|
159
|
+
@mixin font-fixed $weight, var(--typography-email-h1),
|
|
160
|
+
var(--typography-email-h1-line-height), var(--font-email);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@define-mixin email-h2 $weight: normal {
|
|
164
|
+
@mixin font-fixed $weight, var(--typography-email-h2),
|
|
165
|
+
var(--typography-email-h2-line-height), var(--font-email);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
@define-mixin email-h3 $weight: normal {
|
|
169
|
+
@mixin font-fixed $weight, var(--typography-email-h3),
|
|
170
|
+
var(--typography-email-h3-line-height), var(--font-email);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@define-mixin email-h4 $weight: normal {
|
|
174
|
+
@mixin font-fixed $weight, var(--typography-email-h4),
|
|
175
|
+
var(--typography-email-h4-line-height), var(--font-email);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@define-mixin email-h5 $weight: normal {
|
|
179
|
+
@mixin font-fixed $weight, var(--typography-email-h5),
|
|
180
|
+
var(--typography-email-h5-line-height), var(--font-email);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@define-mixin email-h6 $weight: normal {
|
|
184
|
+
@mixin font-fixed $weight, var(--typography-email-h6),
|
|
185
|
+
var(--typography-email-h6-line-height), var(--font-email);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@define-mixin email-p $weight: normal {
|
|
189
|
+
@mixin font-fixed $weight, var(--typography-email-p),
|
|
190
|
+
var(--typography-email-p-line-height), var(--font-email);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@define-mixin email-text-xxl $weight: normal {
|
|
194
|
+
@mixin font-fixed $weight, var(--typography-email-text-xxl),
|
|
195
|
+
var(--typography-email-text-xxl-line-height), var(--font-email);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@define-mixin email-text-xl $weight: normal {
|
|
199
|
+
@mixin font-fixed $weight, var(--typography-email-text-xl),
|
|
200
|
+
var(--typography-email-text-xl-line-height), var(--font-email);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
@define-mixin email-text-l $weight: normal {
|
|
204
|
+
@mixin font-fixed $weight, var(--typography-email-text-l),
|
|
205
|
+
var(--typography-email-text-l-line-height), var(--font-email);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
@define-mixin email-text-m $weight: normal {
|
|
209
|
+
@mixin font-fixed $weight, var(--typography-email-text-m),
|
|
210
|
+
var(--typography-email-text-m-line-height), var(--font-email);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
@define-mixin email-text-s $weight: normal {
|
|
214
|
+
@mixin font-fixed $weight, var(--typography-email-text-s),
|
|
215
|
+
var(--typography-email-text-s-line-height), var(--font-email);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
@define-mixin email-text-xs $weight: normal {
|
|
219
|
+
@mixin font-fixed $weight, var(--typography-email-text-xs),
|
|
220
|
+
var(--typographyemail-text-xs-line-height), var(--font-email);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@define-mixin email-text-xxs $weight: normal {
|
|
224
|
+
@mixin font-fixed $weight, var(--typography-email-text-xxs),
|
|
225
|
+
var(--typography-email-text-xxs-line-height), var(--font-email);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@define-mixin text-gradient-primary {
|
|
229
|
+
color: transparent;
|
|
230
|
+
background: linear-gradient(
|
|
231
|
+
90deg,
|
|
232
|
+
hsl(266, 100%, 64%, 1) 0%,
|
|
233
|
+
hsl(213, 79%, 68%, 1) 50%
|
|
234
|
+
);
|
|
235
|
+
background-clip: text;
|
|
236
|
+
text-fill-color: transparent;
|
|
237
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* stylelint-disable declaration-property-value-keyword-no-deprecated */
|
|
2
|
+
@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing,
|
|
3
|
+
$minLineHeight, $maxLineHeight, $maxLetterSpacing, $fontFamily {
|
|
4
|
+
font-size: fluid(
|
|
5
|
+
$minFontSize,
|
|
6
|
+
$maxFontSize,
|
|
7
|
+
var(--typography-min-viewport),
|
|
8
|
+
var(--typography-max-viewport)
|
|
9
|
+
);
|
|
10
|
+
font-weight: $fontWeight;
|
|
11
|
+
line-height: fluid(
|
|
12
|
+
$minLineHeight,
|
|
13
|
+
$maxLineHeight,
|
|
14
|
+
var(--typography-min-viewport),
|
|
15
|
+
var(--typography-max-viewport)
|
|
16
|
+
);
|
|
17
|
+
letter-spacing: fluid(
|
|
18
|
+
$minLetterSpacing,
|
|
19
|
+
$maxLetterSpacing,
|
|
20
|
+
var(--typography-min-viewport),
|
|
21
|
+
var(--typography-max-viewport)
|
|
22
|
+
);
|
|
23
|
+
font-family: $fontFamily;
|
|
24
|
+
}
|
|
25
|
+
@define-mixin font-fixed $weight, $size, $line, $family {
|
|
26
|
+
font-size: $size;
|
|
27
|
+
font-weight: $weight;
|
|
28
|
+
font-family: $family;
|
|
29
|
+
line-height: $line;
|
|
30
|
+
}
|
|
31
|
+
@define-mixin word-wrap {
|
|
32
|
+
overflow-wrap: break-word;
|
|
33
|
+
word-wrap: break-word;
|
|
34
|
+
-ms-word-break: break-all;
|
|
35
|
+
word-break: break-all;
|
|
36
|
+
word-break: break-word;
|
|
37
|
+
hyphens: auto;
|
|
38
|
+
}
|
|
39
|
+
@define-mixin truncate-text $font-size: 16px, $line-height: 1.4,
|
|
40
|
+
$lines-to-show: 2 {
|
|
41
|
+
position: relative;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
display: -webkit-box;
|
|
44
|
+
-webkit-line-clamp: $lines-to-show;
|
|
45
|
+
-webkit-box-orient: vertical;
|
|
46
|
+
word-wrap: break-word;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
visibility: visible;
|
|
49
|
+
@supports not (-webkit-line-clamp: $lines-to-show) {
|
|
50
|
+
max-height: $font-size * $line-height * $lines-to-show;
|
|
51
|
+
line-height: $line-height;
|
|
52
|
+
display: block;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -38298,6 +38298,18 @@ textarea.fill {
|
|
|
38298
38298
|
.shape {
|
|
38299
38299
|
&_rounded {
|
|
38300
38300
|
border-radius: 8px;
|
|
38301
|
+
&S {
|
|
38302
|
+
border-radius: 0.5m;
|
|
38303
|
+
}
|
|
38304
|
+
&M {
|
|
38305
|
+
border-radius: 1m;
|
|
38306
|
+
}
|
|
38307
|
+
&L {
|
|
38308
|
+
border-radius: 1.5m;
|
|
38309
|
+
}
|
|
38310
|
+
&XL {
|
|
38311
|
+
border-radius: 2m;
|
|
38312
|
+
}
|
|
38301
38313
|
}
|
|
38302
38314
|
&_circular {
|
|
38303
38315
|
border-radius: 50%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.1",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
"scripts": {
|
|
73
73
|
"build": "npm run build-js && npm run build-css",
|
|
74
74
|
"build-js": "rm -rf dist && NODE_ENV=production rollup -c",
|
|
75
|
-
"build-css": "rm -rf dist/css && postcss 'src/styles/bundles.css' --base src --dir dist/css/ --env production",
|
|
75
|
+
"build-css": "rm -rf dist/css && postcss 'src/styles/bundles.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' --base src --dir dist/css/ --env production",
|
|
76
76
|
"dev-js": "rollup -c -w",
|
|
77
|
-
"dev-css": "postcss 'src/styles/bundles.css' --base src --dir dist/css/ --env production -w --verbose",
|
|
77
|
+
"dev-css": "postcss 'src/styles/bundles.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' --base src --dir dist/css/ --env production -w --verbose",
|
|
78
78
|
"prepare": "husky",
|
|
79
79
|
"prepack": "npm run build",
|
|
80
80
|
"semantic-release": "semantic-release",
|