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