@oardi/css-utils 0.47.0 → 0.48.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.
Files changed (29) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +24 -19
  3. package/scss/components/breadcrumb.scss +27 -25
  4. package/scss/components/button.scss +146 -140
  5. package/scss/components/card.scss +49 -47
  6. package/scss/components/chip.scss +81 -79
  7. package/scss/components/drawer.scss +30 -28
  8. package/scss/components/expansion-panel.scss +93 -91
  9. package/scss/components/form.scss +164 -146
  10. package/scss/components/icon-button.scss +112 -110
  11. package/scss/components/list.scss +57 -55
  12. package/scss/components/navbar.scss +24 -22
  13. package/scss/components/overlay.scss +9 -7
  14. package/scss/components/table.scss +35 -33
  15. package/scss/components/tabs.scss +54 -51
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +77 -75
  19. package/scss/flex.scss +127 -125
  20. package/scss/grid-responsive.scss +7 -5
  21. package/scss/grid.scss +14 -12
  22. package/scss/index.scss +2 -1
  23. package/scss/reboot.scss +110 -108
  24. package/scss/spacings-responsive.scss +12 -10
  25. package/scss/spacings.scss +33 -28
  26. package/scss/text.scss +69 -39
  27. package/scss/typography.scss +92 -125
  28. package/scss/utilities.scss +44 -35
  29. package/scss/variables.scss +70 -68
package/scss/components/form.scss CHANGED
@@ -1,181 +1,199 @@
1
- .form-control {
2
- --input-bg-color: var(--bg-surface);
3
- --input-border-width: var(--border-width);
4
- --input-border-color: var(--border-color);
5
-
6
- --form-control-disabled-text-color: var(--disabled-text-color);
7
- --form-control-disabled-bg-color: var(--disabled-bg-color);
8
- --form-control-disabled-border-color: var(--disabled-border-color);
9
-
10
- --form-control-focus-outline-width: var(--focus-outline-width);
11
- --form-control-focus-outline-style: var(--focus-outline-style);
12
- --form-control-focus-outline-color: var(--focus-outline-color);
13
-
14
- --form-control-transition-duration: var(--transition-duration, 0.18s);
15
- --form-control-transition-easing: var(--transition-easing, ease-out);
16
-
17
- display: block;
18
- width: 100%;
19
- max-width: 100%;
20
- padding: 0.375rem 0.75rem;
21
- font-size: 1rem;
22
- font-weight: 400;
23
- line-height: var(--line-height);
24
- -webkit-appearance: none;
25
- -moz-appearance: none;
26
- appearance: none;
27
- color: var(--text-color);
28
- background-color: var(--input-bg-color);
29
- background-clip: padding-box;
30
- border: var(--input-border-width) solid var(--input-border-color);
31
- border-radius: var(--border-radius);
32
-
33
- transition:
34
- color var(--form-control-transition-duration) var(--form-control-transition-easing),
35
- background-color var(--form-control-transition-duration) var(--form-control-transition-easing),
36
- box-shadow var(--form-control-transition-duration) var(--form-control-transition-easing),
37
- border-color var(--form-control-transition-duration) var(--form-control-transition-easing),
38
- outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
39
-
40
- &:focus {
1
+ @layer components {
2
+ .form-control {
3
+ --input-bg-color: var(--bg-surface);
4
+ --input-border-width: var(--border-width);
5
+ --input-border-color: var(--border-color);
6
+
7
+ --form-control-disabled-text-color: var(--disabled-text-color);
8
+ --form-control-disabled-bg-color: var(--disabled-bg-color);
9
+ --form-control-disabled-border-color: var(--disabled-border-color);
10
+
11
+ --form-control-focus-outline-width: var(--focus-outline-width);
12
+ --form-control-focus-outline-style: var(--focus-outline-style);
13
+ --form-control-focus-outline-color: var(--focus-outline-color);
14
+
15
+ --form-control-transition-duration: var(--transition-duration, 0.18s);
16
+ --form-control-transition-easing: var(--transition-easing, ease-out);
17
+
18
+ display: block;
19
+ width: 100%;
20
+ max-width: 100%;
21
+ padding: 0.375rem 0.75rem;
22
+ font-size: 1rem;
23
+ font-weight: 400;
24
+ line-height: var(--line-height);
25
+ -webkit-appearance: none;
26
+ -moz-appearance: none;
27
+ appearance: none;
28
+ color: var(--text-color);
41
29
  background-color: var(--input-bg-color);
42
- border-color: var(--primary-hover);
43
- outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
44
- var(--form-control-focus-outline-color);
45
- outline-offset: var(--focus-offset);
46
- }
30
+ background-clip: padding-box;
31
+ border: var(--input-border-width) solid var(--input-border-color);
32
+ border-radius: var(--border-radius);
33
+
34
+ transition:
35
+ color var(--form-control-transition-duration) var(--form-control-transition-easing),
36
+ background-color var(--form-control-transition-duration) var(--form-control-transition-easing),
37
+ box-shadow var(--form-control-transition-duration) var(--form-control-transition-easing),
38
+ border-color var(--form-control-transition-duration) var(--form-control-transition-easing),
39
+ outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
47
40
 
48
- &.is-invalid {
49
- color: var(--error);
50
- border-color: var(--error) !important;
51
- padding-right: calc(1.5em + 0.75rem) !important;
52
41
  &:focus {
53
- outline: var(--focus-outline-error);
42
+ background-color: var(--input-bg-color);
43
+ border-color: var(--primary-hover);
44
+ outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
45
+ var(--form-control-focus-outline-color);
54
46
  outline-offset: var(--focus-offset);
55
47
  }
56
- }
57
48
 
58
- &:disabled,
59
- &[disabled] {
60
- opacity: 1; // ios useragent fix
61
- cursor: not-allowed;
62
- pointer-events: none;
63
- box-shadow: none;
64
- outline: 0;
65
- color: var(--form-control-disabled-text-color);
66
- background-color: var(--form-control-disabled-bg-color);
67
- border-color: var(--form-control-disabled-border-color);
49
+ &.is-invalid {
50
+ color: var(--error);
51
+ border-color: var(--error);
52
+ padding-right: calc(1.5em + 0.75rem);
53
+ &:focus {
54
+ outline: var(--focus-outline-error);
55
+ outline-offset: var(--focus-offset);
56
+ }
57
+ }
58
+
59
+ &:disabled,
60
+ &[disabled] {
61
+ opacity: 1; // ios useragent fix
62
+ cursor: not-allowed;
63
+ pointer-events: none;
64
+ box-shadow: none;
65
+ outline: 0;
66
+ color: var(--form-control-disabled-text-color);
67
+ background-color: var(--form-control-disabled-bg-color);
68
+ border-color: var(--form-control-disabled-border-color);
69
+ }
70
+
71
+ &::placeholder {
72
+ color: var(--gray-500);
73
+ }
68
74
  }
69
75
 
70
- &::placeholder {
71
- color: var(--gray-500);
76
+ textarea.form-control {
77
+ height: auto;
72
78
  }
73
- }
74
79
 
75
- textarea.form-control {
76
- height: auto;
77
- }
80
+ .form-check {
81
+ display: flex;
82
+ flex-direction: row;
83
+ align-items: center;
84
+ gap: 0.75rem;
85
+
86
+ .form-check-input {
87
+ --input-bg-color: var(--bg-surface);
88
+ --input-border-width: var(--border-width);
89
+ --input-border-color: var(--border-color);
90
+
91
+ --form-control-disabled-text-color: var(--disabled-text-color);
92
+ --form-control-disabled-bg-color: var(--disabled-bg-color);
93
+ --form-control-disabled-border-color: var(--disabled-border-color);
94
+
95
+ --form-control-focus-outline-width: var(--focus-outline-width);
96
+ --form-control-focus-outline-style: var(--focus-outline-style);
97
+ --form-control-focus-outline-color: var(--focus-outline-color);
98
+
99
+ --form-control-transition-duration: var(--transition-duration, 0.18s);
100
+ --form-control-transition-easing: var(--transition-easing, ease-out);
101
+
102
+ flex-shrink: 0;
103
+ appearance: none;
104
+ -webkit-appearance: none;
105
+ width: 16px;
106
+ height: 16px;
107
+ border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
108
+ border-radius: 4px;
109
+ position: relative;
110
+ background-color: var(--input-bg-color, var(--bg-surface));
111
+ cursor: pointer;
112
+ transition: transform 0.2s ease;
113
+
114
+ &:checked {
115
+ background-color: var(--primary);
116
+ border-color: var(--primary);
117
+ }
78
118
 
79
- .form-check {
80
- display: flex;
81
- flex-direction: row;
82
- align-items: center;
83
- gap: 0.75rem;
119
+ &:checked::after {
120
+ content: '';
121
+ position: absolute;
122
+ left: 4px;
123
+ top: 1px;
124
+ width: 5px;
125
+ height: 10px;
126
+ border: solid white;
127
+ border-width: 0 2px 2px 0;
128
+ transform: rotate(45deg);
129
+ }
84
130
 
85
- .form-check-input {
86
- flex-shrink: 0;
87
- appearance: none;
88
- -webkit-appearance: none;
89
- width: 16px;
90
- height: 16px;
91
- border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
92
- border-radius: 4px;
93
- position: relative;
94
- background-color: var(--input-bg-color, var(--bg-surface));
95
- cursor: pointer;
96
- transition: transform 0.2s ease;
97
-
98
- &:checked {
99
- background-color: var(--primary);
100
- border-color: var(--primary);
101
- }
131
+ &.is-invalid {
132
+ border-color: var(--error);
102
133
 
103
- &:checked::after {
104
- content: '';
105
- position: absolute;
106
- left: 4px;
107
- top: 1px;
108
- width: 5px;
109
- height: 10px;
110
- border: solid white;
111
- border-width: 0 2px 2px 0;
112
- transform: rotate(45deg);
113
- }
134
+ &:focus {
135
+ outline: var(--focus-outline-error);
136
+ outline-offset: var(--focus-offset);
137
+ }
138
+ }
114
139
 
115
- &.is-invalid {
116
- border-color: var(--error) !important;
140
+ &:required ~ .form-label::after {
141
+ content: ' *';
142
+ }
117
143
 
118
144
  &:focus {
119
- outline: var(--focus-outline-error);
145
+ border-color: var(--primary-hover);
146
+ outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
147
+ var(--form-control-focus-outline-color);
120
148
  outline-offset: var(--focus-offset);
121
149
  }
122
- }
123
150
 
124
- &:required ~ .form-label::after {
125
- content: ' *';
126
- }
151
+ &[disabled] {
152
+ background-color: var(--form-check-disabled-bg-color, var(--disabled-bg-color));
153
+ border-color: var(--form-check-disabled-bg-color, var(--disabled-border-color));
154
+ }
127
155
 
128
- &:focus {
129
- outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
130
- var(--form-control-focus-outline-color);
131
- outline-offset: var(--focus-offset);
156
+ &[disabled]:hover,
157
+ &[disabled]:focus {
158
+ cursor: not-allowed;
159
+ outline: 0;
160
+ }
132
161
  }
133
162
 
134
- &[disabled] {
135
- background-color: var(--form-check-disabled-bg-color, var(--disabled-bg-color));
136
- border-color: var(--form-check-disabled-bg-color, var(--disabled-border-color));
163
+ .form-label {
164
+ margin-bottom: 0;
137
165
  }
138
166
 
139
- &[disabled]:hover,
140
- &[disabled]:focus {
141
- cursor: not-allowed;
142
- outline: 0;
167
+ &:required ~ .form-label::after {
168
+ content: ' *';
143
169
  }
144
170
  }
145
171
 
146
172
  .form-label {
147
- margin-bottom: 0;
148
- }
173
+ margin-bottom: 0.5rem;
174
+ display: inline-block;
149
175
 
150
- &:required ~ .form-label::after {
151
- content: ' *';
152
- }
153
- }
154
-
155
- .form-label {
156
- margin-bottom: 0.5rem;
157
- display: inline-block;
176
+ &:has(~ .form-control:required)::after {
177
+ content: ' *';
178
+ }
158
179
 
159
- &:has(~ .form-control:required)::after {
160
- content: ' *';
180
+ &:hover {
181
+ cursor: pointer;
182
+ }
161
183
  }
162
184
 
163
- &:hover {
164
- cursor: pointer;
185
+ .is-invalid ~ .invalid-feedback,
186
+ .is-invalid ~ .invalid-tooltip,
187
+ .was-validated :invalid ~ .invalid-feedback,
188
+ .was-validated :invalid ~ .invalid-tooltip {
189
+ display: block;
165
190
  }
166
- }
167
191
 
168
- .is-invalid ~ .invalid-feedback,
169
- .is-invalid ~ .invalid-tooltip,
170
- .was-validated :invalid ~ .invalid-feedback,
171
- .was-validated :invalid ~ .invalid-tooltip {
172
- display: block;
173
- }
174
-
175
- .invalid-feedback {
176
- display: none;
177
- width: 100%;
178
- margin-top: 0.25rem;
179
- font-size: 0.875em;
180
- color: var(--error);
192
+ .invalid-feedback {
193
+ display: none;
194
+ width: 100%;
195
+ margin-top: 0.25rem;
196
+ font-size: 0.875em;
197
+ color: var(--error);
198
+ }
181
199
  }
package/scss/components/icon-button.scss CHANGED
@@ -8,132 +8,134 @@ $sizes: (
8
8
  lg: 44px,
9
9
  );
10
10
 
11
- .icon-btn {
12
- --icon-button-border-width: var(--border-width);
13
- --icon-button-padding: 0.25rem;
14
- --icon-button-width: 40px;
15
- --icon-button-min-width: 40px;
16
- --icon-button-height: 40px;
17
- --icon-button-border-radius: 100%;
18
-
19
- --icon-button-focus-outline-width: var(--focus-outline-width);
20
- --icon-button-focus-outline-style: var(--focus-outline-style);
21
- --icon-button-focus-outline-color: var(--focus-outline-color);
22
-
23
- --icon-button-svg-width: 18px;
24
- --icon-button-svg-height: 18px;
25
-
26
- --icon-button-transition-duration: var(--transition-duration, 0.2s);
27
-
28
- padding: var(--icon-button-padding);
29
- min-width: var(--icon-button-min-width);
30
- width: var(--icon-button-width);
31
- height: var(--icon-button-height);
32
- border-radius: var(--icon-button-border-radius);
33
- display: inline-flex;
34
- align-items: center;
35
- justify-content: center;
36
-
37
- border-width: var(--icon-button-border-width, var(--border-width));
38
- border-style: solid;
39
- background-color: transparent;
40
- border-color: transparent;
41
-
42
- fill: var(--text-color);
43
- color: var(--text-color);
44
-
45
- transition:
46
- color var(--icon-button-transition-duration) ease,
47
- background-color var(--icon-button-transition-duration) ease,
48
- box-shadow var(--icon-button-transition-duration) ease,
49
- border-color var(--icon-button-transition-duration) ease;
50
-
51
- -webkit-tap-highlight-color: transparent;
52
- touch-action: manipulation; // ios fix
53
-
54
- svg {
55
- max-width: var(--icon-button-svg-width);
56
- max-height: var(--icon-button-svg-width);
57
- overflow: visible;
58
- }
11
+ @layer components {
12
+ .icon-btn {
13
+ --icon-button-border-width: var(--border-width);
14
+ --icon-button-padding: 0.25rem;
15
+ --icon-button-width: 40px;
16
+ --icon-button-min-width: 40px;
17
+ --icon-button-height: 40px;
18
+ --icon-button-border-radius: 100%;
19
+
20
+ --icon-button-focus-outline-width: var(--focus-outline-width);
21
+ --icon-button-focus-outline-style: var(--focus-outline-style);
22
+ --icon-button-focus-outline-color: var(--focus-outline-color);
23
+
24
+ --icon-button-svg-width: 18px;
25
+ --icon-button-svg-height: 18px;
26
+
27
+ --icon-button-transition-duration: var(--transition-duration, 0.2s);
28
+
29
+ padding: var(--icon-button-padding);
30
+ min-width: var(--icon-button-min-width);
31
+ width: var(--icon-button-width);
32
+ height: var(--icon-button-height);
33
+ border-radius: var(--icon-button-border-radius);
34
+ display: inline-flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+
38
+ border-width: var(--icon-button-border-width, var(--border-width));
39
+ border-style: solid;
40
+ background-color: transparent;
41
+ border-color: transparent;
59
42
 
60
- &:hover {
61
- cursor: pointer;
62
- text-decoration: none;
63
- background-color: var(--icon-button-highlight, var(--highlight));
64
- }
43
+ fill: var(--text-color);
44
+ color: var(--text-color);
65
45
 
66
- &:disabled,
67
- &[disabled],
68
- &[disabled]:hover {
69
- color: var(--gray-800);
70
- fill: var(--gray-800);
71
- cursor: not-allowed;
72
- outline: 0;
73
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
74
- }
75
-
76
- &:focus-visible {
77
- outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
78
- var(--icon-button-focus-outline-color);
79
- outline-offset: var(--focus-offset);
80
- background-color: var(--icon-button-highlight, var(--highlight));
81
- }
82
- }
46
+ transition:
47
+ color var(--icon-button-transition-duration) ease,
48
+ background-color var(--icon-button-transition-duration) ease,
49
+ box-shadow var(--icon-button-transition-duration) ease,
50
+ border-color var(--icon-button-transition-duration) ease;
83
51
 
84
- // sizes
85
- // change to use css vars
86
- @each $name, $value in $sizes {
87
- .icon-btn-#{$name} {
88
- min-width: $value;
89
- width: $value;
90
- height: $value;
52
+ -webkit-tap-highlight-color: transparent;
53
+ touch-action: manipulation; // ios fix
91
54
 
92
55
  svg {
93
- max-width: calc($value - 20px);
94
- max-height: calc($value - 20px);
56
+ max-width: var(--icon-button-svg-width);
57
+ max-height: var(--icon-button-svg-width);
58
+ overflow: visible;
95
59
  }
96
- }
97
- }
98
60
 
99
- @each $name, $value in map.get(theme.$theme, colors) {
100
- .icon-btn-#{$name} {
101
- color: var(--#{$name});
102
- fill: var(--#{$name});
103
- background-color: transparent;
61
+ &:hover {
62
+ cursor: pointer;
63
+ text-decoration: none;
64
+ background-color: var(--icon-button-highlight, var(--highlight));
65
+ }
66
+
67
+ &:disabled,
68
+ &[disabled],
69
+ &[disabled]:hover {
70
+ color: var(--gray-800);
71
+ fill: var(--gray-800);
72
+ cursor: not-allowed;
73
+ outline: 0;
74
+ background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
75
+ }
104
76
 
105
77
  &:focus-visible {
106
- // color: var(--on-#{$name});
107
- outline: var(--icon-button-focus-outline-width)
108
- var(--icon-button-focus-outline-style)
109
- rgba(var(--#{$name}-rgb), 0.5);
78
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
79
+ var(--icon-button-focus-outline-color);
110
80
  outline-offset: var(--focus-offset);
81
+ background-color: var(--icon-button-highlight, var(--highlight));
111
82
  }
112
83
  }
113
84
 
114
- .icon-btn-#{$name}-contained {
115
- color: var(--on-#{$name});
116
- fill: var(--on-#{$name});
117
- background-color: var(--#{$name});
85
+ // sizes
86
+ // change to use css vars
87
+ @each $name, $value in $sizes {
88
+ .icon-btn-#{$name} {
89
+ min-width: $value;
90
+ width: $value;
91
+ height: $value;
92
+
93
+ svg {
94
+ max-width: calc($value - 20px);
95
+ max-height: calc($value - 20px);
96
+ }
97
+ }
98
+ }
118
99
 
119
- &:hover,
120
- &:active,
121
- &:focus-visible {
122
- outline: var(--icon-button-focus-outline-width)
123
- var(--icon-button-focus-outline-style)
124
- var(--#{$name}-hover);
125
- background-color: var(--#{$name}-hover);
100
+ @each $name, $value in map.get(theme.$theme, colors) {
101
+ .icon-btn-#{$name} {
102
+ color: var(--#{$name});
103
+ fill: var(--#{$name});
104
+ background-color: transparent;
105
+
106
+ &:focus-visible {
107
+ // color: var(--on-#{$name});
108
+ outline: var(--icon-button-focus-outline-width)
109
+ var(--icon-button-focus-outline-style)
110
+ rgba(var(--#{$name}-rgb), 0.5);
111
+ outline-offset: var(--focus-offset);
112
+ }
126
113
  }
127
114
 
128
- &:disabled,
129
- &[disabled],
130
- &[disabled]:hover {
131
- color: var(--#{$name}-hover);
132
- fill: var(--#{$name}-hover);
133
- cursor: not-allowed;
134
- box-shadow: none;
135
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
136
- outline: 0;
115
+ .icon-btn-#{$name}-contained {
116
+ color: var(--on-#{$name});
117
+ fill: var(--on-#{$name});
118
+ background-color: var(--#{$name});
119
+
120
+ &:hover,
121
+ &:active,
122
+ &:focus-visible {
123
+ outline: var(--icon-button-focus-outline-width)
124
+ var(--icon-button-focus-outline-style)
125
+ var(--#{$name}-hover);
126
+ background-color: var(--#{$name}-hover);
127
+ }
128
+
129
+ &:disabled,
130
+ &[disabled],
131
+ &[disabled]:hover {
132
+ color: var(--#{$name}-hover);
133
+ fill: var(--#{$name}-hover);
134
+ cursor: not-allowed;
135
+ box-shadow: none;
136
+ background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
137
+ outline: 0;
138
+ }
137
139
  }
138
140
  }
139
141
  }