@memobit/libs 3.8.3 → 3.9.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/dist/components/Icon/Icon2.js +34 -17
- package/dist/components/IconPicker/IconPicker2.js +43 -29
- package/dist/helpers/VersionInfo.js +1 -1
- package/dist/styles/base.scss +36 -36
- package/dist/styles/effects.scss +72 -72
- package/dist/styles/scrollbars.scss +30 -30
- package/dist/styles/utilities.scss +238 -238
- package/dist/styles/utility-classes.scss +93 -93
- package/dist/styles/variables.scss +73 -73
- package/dist/version.js +1 -1
- package/dist/version.json +4 -4
- package/package.json +142 -142
|
@@ -1,238 +1,238 @@
|
|
|
1
|
-
// Mixins only — emits no CSS. Safe to @use from any component SCSS.
|
|
2
|
-
// Emitted utility classes live in utility-classes.scss (imported once globally).
|
|
3
|
-
|
|
4
|
-
// Flex mixins
|
|
5
|
-
@mixin flex-around {
|
|
6
|
-
display: flex;
|
|
7
|
-
justify-content: space-around;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@mixin flex-center {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@mixin flex-between {
|
|
17
|
-
display: flex;
|
|
18
|
-
align-items: center;
|
|
19
|
-
justify-content: space-between;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@mixin flex-column {
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@mixin flex-wrap {
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
flex-wrap: wrap;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Typography
|
|
34
|
-
@mixin text-truncate {
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
text-overflow: ellipsis;
|
|
37
|
-
white-space: nowrap;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@mixin text-clamp($lines: 2) {
|
|
41
|
-
display: -webkit-box;
|
|
42
|
-
-webkit-line-clamp: $lines;
|
|
43
|
-
-webkit-box-orient: vertical;
|
|
44
|
-
overflow: hidden;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@mixin themed-card-title($fallback-color: inherit, $fallback-size: var(--font-size-md), $fallback-weight: var(--font-weight-bold)) {
|
|
48
|
-
color: var(--card-title-color, #{$fallback-color});
|
|
49
|
-
font-family: var(--card-title-font-family, var(--font-family, sans-serif));
|
|
50
|
-
font-size: var(--card-title-font-size, #{$fallback-size});
|
|
51
|
-
font-style: var(--card-title-font-style, normal);
|
|
52
|
-
font-weight: var(--card-title-font-weight, #{$fallback-weight});
|
|
53
|
-
letter-spacing: var(--card-title-letter-spacing, normal);
|
|
54
|
-
text-transform: var(--card-title-text-transform, none);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@mixin themed-modal-title($fallback-color: var(--modal-header-color), $fallback-size: var(--font-size-xl), $fallback-weight: var(--font-weight-semibold)) {
|
|
58
|
-
color: var(--modal-title-color, #{$fallback-color});
|
|
59
|
-
font-family: var(--modal-title-font-family, var(--font-family, sans-serif));
|
|
60
|
-
font-size: var(--modal-title-font-size, #{$fallback-size});
|
|
61
|
-
font-style: var(--modal-title-font-style, normal);
|
|
62
|
-
font-weight: var(--modal-title-font-weight, #{$fallback-weight});
|
|
63
|
-
letter-spacing: var(--modal-title-letter-spacing, normal);
|
|
64
|
-
text-transform: var(--modal-title-text-transform, none);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@mixin themed-form-control-label($fallback-color: var(--form-control-color), $fallback-size: var(--font-size-sm), $fallback-weight: var(--font-weight-medium)) {
|
|
68
|
-
color: var(--form-control-label-color, #{$fallback-color});
|
|
69
|
-
font-size: var(--form-control-label-font-size, #{$fallback-size});
|
|
70
|
-
font-weight: var(--form-control-label-font-weight, #{$fallback-weight});
|
|
71
|
-
letter-spacing: var(--form-control-label-letter-spacing, normal);
|
|
72
|
-
text-transform: var(--form-control-label-text-transform, none);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// ── Form input mixins ────────────────────────────────────────────────────────
|
|
76
|
-
@mixin input-wrapper {
|
|
77
|
-
display: flex;
|
|
78
|
-
flex-direction: column;
|
|
79
|
-
gap: var(--spacing-8);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
@mixin input-label {
|
|
83
|
-
@include themed-form-control-label;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@mixin input-required {
|
|
87
|
-
color: var(--body-danger-color, #dc2626);
|
|
88
|
-
margin-left: var(--spacing-2);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
@mixin input-field {
|
|
92
|
-
background-color: var(--form-control-background-color);
|
|
93
|
-
color: var(--form-control-color);
|
|
94
|
-
border: var(--spacing-1) solid var(--form-control-border-color);
|
|
95
|
-
border-radius: var(--radius-sm);
|
|
96
|
-
padding: var(--spacing-12);
|
|
97
|
-
font-family: var(--form-control-font-family);
|
|
98
|
-
font-size: var(--font-size-sm);
|
|
99
|
-
line-height: var(--line-height-normal);
|
|
100
|
-
width: 100%;
|
|
101
|
-
box-sizing: border-box;
|
|
102
|
-
|
|
103
|
-
&:focus {
|
|
104
|
-
outline: none;
|
|
105
|
-
background-color: var(--form-control-focus-background-color);
|
|
106
|
-
border-color: var(--form-control-focus-border-color);
|
|
107
|
-
color: var(--form-control-focus-color);
|
|
108
|
-
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&::placeholder {
|
|
112
|
-
color: var(--form-control-placeholder-color);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@mixin input-highlighted {
|
|
117
|
-
border-color: var(--form-control-focus-border-color);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@mixin input-error {
|
|
121
|
-
background-color: var(--form-control-error-background-color);
|
|
122
|
-
border-color: var(--form-control-error-border-color);
|
|
123
|
-
color: var(--form-control-error-color);
|
|
124
|
-
|
|
125
|
-
&:focus {
|
|
126
|
-
background-color: var(--form-control-error-background-color);
|
|
127
|
-
border-color: var(--form-control-error-border-color);
|
|
128
|
-
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
@mixin input-error-message {
|
|
133
|
-
font-size: var(--font-size-xs);
|
|
134
|
-
color: var(--form-control-error-color);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
@mixin input-success {
|
|
138
|
-
background-color: var(--form-control-success-background-color);
|
|
139
|
-
border-color: var(--form-control-success-border-color);
|
|
140
|
-
color: var(--form-control-success-color);
|
|
141
|
-
|
|
142
|
-
&:focus {
|
|
143
|
-
background-color: var(--form-control-success-background-color);
|
|
144
|
-
border-color: var(--form-control-success-border-color);
|
|
145
|
-
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
@mixin input-success-message {
|
|
150
|
-
font-size: var(--font-size-xs);
|
|
151
|
-
color: var(--form-control-success-color);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
@mixin form-control-component($name, $full-width: false) {
|
|
155
|
-
.#{$name}-wrapper {
|
|
156
|
-
@include input-wrapper;
|
|
157
|
-
|
|
158
|
-
@if $full-width {
|
|
159
|
-
width: 100%;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.#{$name}-label {
|
|
163
|
-
@include input-label;
|
|
164
|
-
|
|
165
|
-
.#{$name}-required {
|
|
166
|
-
@include input-required;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.#{$name} {
|
|
171
|
-
@include input-field;
|
|
172
|
-
@content;
|
|
173
|
-
|
|
174
|
-
&.#{$name}-error {
|
|
175
|
-
@include input-error;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
&.#{$name}-success {
|
|
179
|
-
@include input-success;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&.#{$name}-highlighted {
|
|
184
|
-
.#{$name} {
|
|
185
|
-
@include input-highlighted;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.#{$name}-error-message {
|
|
190
|
-
@include input-error-message;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.#{$name}-success-message {
|
|
194
|
-
@include input-success-message;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
@mixin form-control-affix($height) {
|
|
200
|
-
position: absolute;
|
|
201
|
-
height: $height;
|
|
202
|
-
display: flex;
|
|
203
|
-
align-items: center;
|
|
204
|
-
justify-content: center;
|
|
205
|
-
color: var(--form-control-placeholder-color);
|
|
206
|
-
z-index: 2;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
// Responsive breakpoints
|
|
210
|
-
@mixin mobile {
|
|
211
|
-
@media (max-width: 768px) {
|
|
212
|
-
@content;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
@mixin tablet {
|
|
217
|
-
@media (min-width: 769px) and (max-width: 1024px) {
|
|
218
|
-
@content;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
@mixin desktop {
|
|
223
|
-
@media (min-width: 1025px) {
|
|
224
|
-
@content;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
@mixin not-mobile {
|
|
229
|
-
@media (min-width: 769px) {
|
|
230
|
-
@content;
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
@mixin not-desktop {
|
|
235
|
-
@media (max-width: 1024px) {
|
|
236
|
-
@content;
|
|
237
|
-
}
|
|
238
|
-
}
|
|
1
|
+
// Mixins only — emits no CSS. Safe to @use from any component SCSS.
|
|
2
|
+
// Emitted utility classes live in utility-classes.scss (imported once globally).
|
|
3
|
+
|
|
4
|
+
// Flex mixins
|
|
5
|
+
@mixin flex-around {
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: space-around;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin flex-center {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@mixin flex-between {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin flex-column {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin flex-wrap {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Typography
|
|
34
|
+
@mixin text-truncate {
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
text-overflow: ellipsis;
|
|
37
|
+
white-space: nowrap;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin text-clamp($lines: 2) {
|
|
41
|
+
display: -webkit-box;
|
|
42
|
+
-webkit-line-clamp: $lines;
|
|
43
|
+
-webkit-box-orient: vertical;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin themed-card-title($fallback-color: inherit, $fallback-size: var(--font-size-md), $fallback-weight: var(--font-weight-bold)) {
|
|
48
|
+
color: var(--card-title-color, #{$fallback-color});
|
|
49
|
+
font-family: var(--card-title-font-family, var(--font-family, sans-serif));
|
|
50
|
+
font-size: var(--card-title-font-size, #{$fallback-size});
|
|
51
|
+
font-style: var(--card-title-font-style, normal);
|
|
52
|
+
font-weight: var(--card-title-font-weight, #{$fallback-weight});
|
|
53
|
+
letter-spacing: var(--card-title-letter-spacing, normal);
|
|
54
|
+
text-transform: var(--card-title-text-transform, none);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin themed-modal-title($fallback-color: var(--modal-header-color), $fallback-size: var(--font-size-xl), $fallback-weight: var(--font-weight-semibold)) {
|
|
58
|
+
color: var(--modal-title-color, #{$fallback-color});
|
|
59
|
+
font-family: var(--modal-title-font-family, var(--font-family, sans-serif));
|
|
60
|
+
font-size: var(--modal-title-font-size, #{$fallback-size});
|
|
61
|
+
font-style: var(--modal-title-font-style, normal);
|
|
62
|
+
font-weight: var(--modal-title-font-weight, #{$fallback-weight});
|
|
63
|
+
letter-spacing: var(--modal-title-letter-spacing, normal);
|
|
64
|
+
text-transform: var(--modal-title-text-transform, none);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@mixin themed-form-control-label($fallback-color: var(--form-control-color), $fallback-size: var(--font-size-sm), $fallback-weight: var(--font-weight-medium)) {
|
|
68
|
+
color: var(--form-control-label-color, #{$fallback-color});
|
|
69
|
+
font-size: var(--form-control-label-font-size, #{$fallback-size});
|
|
70
|
+
font-weight: var(--form-control-label-font-weight, #{$fallback-weight});
|
|
71
|
+
letter-spacing: var(--form-control-label-letter-spacing, normal);
|
|
72
|
+
text-transform: var(--form-control-label-text-transform, none);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// ── Form input mixins ────────────────────────────────────────────────────────
|
|
76
|
+
@mixin input-wrapper {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: var(--spacing-8);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@mixin input-label {
|
|
83
|
+
@include themed-form-control-label;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@mixin input-required {
|
|
87
|
+
color: var(--body-danger-color, #dc2626);
|
|
88
|
+
margin-left: var(--spacing-2);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@mixin input-field {
|
|
92
|
+
background-color: var(--form-control-background-color);
|
|
93
|
+
color: var(--form-control-color);
|
|
94
|
+
border: var(--spacing-1) solid var(--form-control-border-color);
|
|
95
|
+
border-radius: var(--radius-sm);
|
|
96
|
+
padding: var(--spacing-12);
|
|
97
|
+
font-family: var(--form-control-font-family);
|
|
98
|
+
font-size: var(--font-size-sm);
|
|
99
|
+
line-height: var(--line-height-normal);
|
|
100
|
+
width: 100%;
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
|
|
103
|
+
&:focus {
|
|
104
|
+
outline: none;
|
|
105
|
+
background-color: var(--form-control-focus-background-color);
|
|
106
|
+
border-color: var(--form-control-focus-border-color);
|
|
107
|
+
color: var(--form-control-focus-color);
|
|
108
|
+
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&::placeholder {
|
|
112
|
+
color: var(--form-control-placeholder-color);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@mixin input-highlighted {
|
|
117
|
+
border-color: var(--form-control-focus-border-color);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@mixin input-error {
|
|
121
|
+
background-color: var(--form-control-error-background-color);
|
|
122
|
+
border-color: var(--form-control-error-border-color);
|
|
123
|
+
color: var(--form-control-error-color);
|
|
124
|
+
|
|
125
|
+
&:focus {
|
|
126
|
+
background-color: var(--form-control-error-background-color);
|
|
127
|
+
border-color: var(--form-control-error-border-color);
|
|
128
|
+
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@mixin input-error-message {
|
|
133
|
+
font-size: var(--font-size-xs);
|
|
134
|
+
color: var(--form-control-error-color);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@mixin input-success {
|
|
138
|
+
background-color: var(--form-control-success-background-color);
|
|
139
|
+
border-color: var(--form-control-success-border-color);
|
|
140
|
+
color: var(--form-control-success-color);
|
|
141
|
+
|
|
142
|
+
&:focus {
|
|
143
|
+
background-color: var(--form-control-success-background-color);
|
|
144
|
+
border-color: var(--form-control-success-border-color);
|
|
145
|
+
box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@mixin input-success-message {
|
|
150
|
+
font-size: var(--font-size-xs);
|
|
151
|
+
color: var(--form-control-success-color);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@mixin form-control-component($name, $full-width: false) {
|
|
155
|
+
.#{$name}-wrapper {
|
|
156
|
+
@include input-wrapper;
|
|
157
|
+
|
|
158
|
+
@if $full-width {
|
|
159
|
+
width: 100%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.#{$name}-label {
|
|
163
|
+
@include input-label;
|
|
164
|
+
|
|
165
|
+
.#{$name}-required {
|
|
166
|
+
@include input-required;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.#{$name} {
|
|
171
|
+
@include input-field;
|
|
172
|
+
@content;
|
|
173
|
+
|
|
174
|
+
&.#{$name}-error {
|
|
175
|
+
@include input-error;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&.#{$name}-success {
|
|
179
|
+
@include input-success;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&.#{$name}-highlighted {
|
|
184
|
+
.#{$name} {
|
|
185
|
+
@include input-highlighted;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.#{$name}-error-message {
|
|
190
|
+
@include input-error-message;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.#{$name}-success-message {
|
|
194
|
+
@include input-success-message;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@mixin form-control-affix($height) {
|
|
200
|
+
position: absolute;
|
|
201
|
+
height: $height;
|
|
202
|
+
display: flex;
|
|
203
|
+
align-items: center;
|
|
204
|
+
justify-content: center;
|
|
205
|
+
color: var(--form-control-placeholder-color);
|
|
206
|
+
z-index: 2;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// Responsive breakpoints
|
|
210
|
+
@mixin mobile {
|
|
211
|
+
@media (max-width: 768px) {
|
|
212
|
+
@content;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@mixin tablet {
|
|
217
|
+
@media (min-width: 769px) and (max-width: 1024px) {
|
|
218
|
+
@content;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@mixin desktop {
|
|
223
|
+
@media (min-width: 1025px) {
|
|
224
|
+
@content;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@mixin not-mobile {
|
|
229
|
+
@media (min-width: 769px) {
|
|
230
|
+
@content;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
@mixin not-desktop {
|
|
235
|
+
@media (max-width: 1024px) {
|
|
236
|
+
@content;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
// Emitted utility classes — import once globally (not per component).
|
|
2
|
-
// Mixins live in utilities.scss.
|
|
3
|
-
@use 'utilities' as *;
|
|
4
|
-
|
|
5
|
-
// use this effect when you want to bring attention
|
|
6
|
-
.status-pulse {
|
|
7
|
-
animation: pulse-status 2s ease-in-out infinite;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@keyframes pulse-status {
|
|
11
|
-
0%,
|
|
12
|
-
100% {
|
|
13
|
-
opacity: 1;
|
|
14
|
-
}
|
|
15
|
-
50% {
|
|
16
|
-
opacity: 0.6;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// Text alignment
|
|
21
|
-
.text-center {
|
|
22
|
-
text-align: center;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.text-left {
|
|
26
|
-
text-align: left;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.text-right {
|
|
30
|
-
text-align: right;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Text color
|
|
34
|
-
.text-muted {
|
|
35
|
-
color: var(--body-color-muted);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// Cursor
|
|
39
|
-
.cursor-pointer {
|
|
40
|
-
cursor: pointer;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// Flexbox helpers
|
|
44
|
-
.flex-around {
|
|
45
|
-
@include flex-around;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.flex-center {
|
|
49
|
-
@include flex-center;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.flex-between {
|
|
53
|
-
@include flex-between;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.flex-column {
|
|
57
|
-
@include flex-column;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.flex-wrap {
|
|
61
|
-
@include flex-wrap;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// Responsive visibility
|
|
65
|
-
.mobile {
|
|
66
|
-
@media (min-width: 769px) {
|
|
67
|
-
display: none !important;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.tablet {
|
|
72
|
-
@media (max-width: 768px), (min-width: 1025px) {
|
|
73
|
-
display: none !important;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.desktop {
|
|
78
|
-
@media (max-width: 1024px) {
|
|
79
|
-
display: none !important;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.not-mobile {
|
|
84
|
-
@media (max-width: 768px) {
|
|
85
|
-
display: none !important;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.not-desktop {
|
|
90
|
-
@media (min-width: 1025px) {
|
|
91
|
-
display: none !important;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
1
|
+
// Emitted utility classes — import once globally (not per component).
|
|
2
|
+
// Mixins live in utilities.scss.
|
|
3
|
+
@use 'utilities' as *;
|
|
4
|
+
|
|
5
|
+
// use this effect when you want to bring attention
|
|
6
|
+
.status-pulse {
|
|
7
|
+
animation: pulse-status 2s ease-in-out infinite;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@keyframes pulse-status {
|
|
11
|
+
0%,
|
|
12
|
+
100% {
|
|
13
|
+
opacity: 1;
|
|
14
|
+
}
|
|
15
|
+
50% {
|
|
16
|
+
opacity: 0.6;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Text alignment
|
|
21
|
+
.text-center {
|
|
22
|
+
text-align: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.text-left {
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text-right {
|
|
30
|
+
text-align: right;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Text color
|
|
34
|
+
.text-muted {
|
|
35
|
+
color: var(--body-color-muted);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Cursor
|
|
39
|
+
.cursor-pointer {
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Flexbox helpers
|
|
44
|
+
.flex-around {
|
|
45
|
+
@include flex-around;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.flex-center {
|
|
49
|
+
@include flex-center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.flex-between {
|
|
53
|
+
@include flex-between;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.flex-column {
|
|
57
|
+
@include flex-column;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.flex-wrap {
|
|
61
|
+
@include flex-wrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Responsive visibility
|
|
65
|
+
.mobile {
|
|
66
|
+
@media (min-width: 769px) {
|
|
67
|
+
display: none !important;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.tablet {
|
|
72
|
+
@media (max-width: 768px), (min-width: 1025px) {
|
|
73
|
+
display: none !important;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.desktop {
|
|
78
|
+
@media (max-width: 1024px) {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.not-mobile {
|
|
84
|
+
@media (max-width: 768px) {
|
|
85
|
+
display: none !important;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.not-desktop {
|
|
90
|
+
@media (min-width: 1025px) {
|
|
91
|
+
display: none !important;
|
|
92
|
+
}
|
|
93
|
+
}
|