@oardi/css-utils 0.47.1 → 0.49.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 (31) 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 +156 -155
  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 -52
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +64 -76
  19. package/scss/flex.scss +114 -127
  20. package/scss/gap-responsive.scss +22 -0
  21. package/scss/gap.scss +18 -0
  22. package/scss/grid-responsive.scss +7 -5
  23. package/scss/grid.scss +14 -12
  24. package/scss/index.scss +9 -1
  25. package/scss/reboot.scss +110 -108
  26. package/scss/spacings-responsive.scss +12 -10
  27. package/scss/spacings.scss +33 -28
  28. package/scss/text.scss +69 -39
  29. package/scss/typography.scss +92 -125
  30. package/scss/utilities.scss +207 -205
  31. package/scss/variables.scss +70 -68
package/scss/components/form.scss CHANGED
@@ -1,88 +1,5 @@
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 {
41
- 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
- }
47
-
48
- &.is-invalid {
49
- color: var(--error);
50
- border-color: var(--error) !important;
51
- padding-right: calc(1.5em + 0.75rem) !important;
52
- &:focus {
53
- outline: var(--focus-outline-error);
54
- outline-offset: var(--focus-offset);
55
- }
56
- }
57
-
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);
68
- }
69
-
70
- &::placeholder {
71
- color: var(--gray-500);
72
- }
73
- }
74
-
75
- textarea.form-control {
76
- height: auto;
77
- }
78
-
79
- .form-check {
80
- display: flex;
81
- flex-direction: row;
82
- align-items: center;
83
- gap: 0.75rem;
84
-
85
- .form-check-input {
1
+ @layer components {
2
+ .form-control {
86
3
  --input-bg-color: var(--bg-surface);
87
4
  --input-border-width: var(--border-width);
88
5
  --input-border-color: var(--border-color);
@@ -98,101 +15,185 @@ textarea.form-control {
98
15
  --form-control-transition-duration: var(--transition-duration, 0.18s);
99
16
  --form-control-transition-easing: var(--transition-easing, ease-out);
100
17
 
101
- flex-shrink: 0;
102
- appearance: none;
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);
103
25
  -webkit-appearance: none;
104
- width: 16px;
105
- height: 16px;
106
- border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
107
- border-radius: 4px;
108
- position: relative;
109
- background-color: var(--input-bg-color, var(--bg-surface));
110
- cursor: pointer;
111
- transition: transform 0.2s ease;
112
-
113
- &:checked {
114
- background-color: var(--primary);
115
- border-color: var(--primary);
116
- }
26
+ -moz-appearance: none;
27
+ appearance: none;
28
+ color: var(--text-color);
29
+ background-color: var(--input-bg-color);
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);
117
40
 
118
- &:checked::after {
119
- content: '';
120
- position: absolute;
121
- left: 4px;
122
- top: 1px;
123
- width: 5px;
124
- height: 10px;
125
- border: solid white;
126
- border-width: 0 2px 2px 0;
127
- transform: rotate(45deg);
41
+ &:focus {
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);
46
+ outline-offset: var(--focus-offset);
128
47
  }
129
48
 
130
49
  &.is-invalid {
131
- border-color: var(--error) !important;
132
-
50
+ color: var(--error);
51
+ border-color: var(--error);
52
+ padding-right: calc(1.5em + 0.75rem);
133
53
  &:focus {
134
54
  outline: var(--focus-outline-error);
135
55
  outline-offset: var(--focus-offset);
136
56
  }
137
57
  }
138
58
 
139
- &:required ~ .form-label::after {
140
- content: ' *';
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);
141
69
  }
142
70
 
143
- &:focus {
144
- // background-color: var(--input-bg-color);
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);
148
- outline-offset: var(--focus-offset);
71
+ &::placeholder {
72
+ color: var(--gray-500);
149
73
  }
74
+ }
150
75
 
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));
76
+ textarea.form-control {
77
+ height: auto;
78
+ }
79
+
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
+ }
118
+
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
+ }
130
+
131
+ &.is-invalid {
132
+ border-color: var(--error);
133
+
134
+ &:focus {
135
+ outline: var(--focus-outline-error);
136
+ outline-offset: var(--focus-offset);
137
+ }
138
+ }
139
+
140
+ &:required ~ .form-label::after {
141
+ content: ' *';
142
+ }
143
+
144
+ &:focus {
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);
148
+ outline-offset: var(--focus-offset);
149
+ }
150
+
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
+ }
155
+
156
+ &[disabled]:hover,
157
+ &[disabled]:focus {
158
+ cursor: not-allowed;
159
+ outline: 0;
160
+ }
154
161
  }
155
162
 
156
- &[disabled]:hover,
157
- &[disabled]:focus {
158
- cursor: not-allowed;
159
- outline: 0;
163
+ .form-label {
164
+ margin-bottom: 0;
160
165
  }
161
- }
162
166
 
163
- .form-label {
164
- margin-bottom: 0;
167
+ &:required ~ .form-label::after {
168
+ content: ' *';
169
+ }
165
170
  }
166
171
 
167
- &:required ~ .form-label::after {
168
- content: ' *';
169
- }
170
- }
172
+ .form-label {
173
+ margin-bottom: 0.5rem;
174
+ display: inline-block;
171
175
 
172
- .form-label {
173
- margin-bottom: 0.5rem;
174
- display: inline-block;
176
+ &:has(~ .form-control:required)::after {
177
+ content: ' *';
178
+ }
175
179
 
176
- &:has(~ .form-control:required)::after {
177
- content: ' *';
180
+ &:hover {
181
+ cursor: pointer;
182
+ }
178
183
  }
179
184
 
180
- &:hover {
181
- 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;
182
190
  }
183
- }
184
191
 
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;
190
- }
191
-
192
- .invalid-feedback {
193
- display: none;
194
- width: 100%;
195
- margin-top: 0.25rem;
196
- font-size: 0.875em;
197
- 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
+ }
198
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
  }