@oardi/css-utils 0.97.0 → 0.99.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 (3) hide show
  1. package/package.json +1 -1
  2. package/scss/components/stepper.scss +27 -19
  3. package/scss/components/tabs.scss +13 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.97.0",
3
+ "version": "0.99.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/stepper.scss CHANGED
@@ -136,13 +136,6 @@
136
136
  background: var(--stepper-current-bg);
137
137
  color: var(--stepper-current-color);
138
138
  }
139
-
140
- > .stepper-content {
141
- margin-block: calc(-1 * var(--stepper-content-padding) / 2);
142
- padding: var(--stepper-content-padding);
143
- border-radius: var(--stepper-content-radius);
144
- background: var(--stepper-current-surface);
145
- }
146
139
  }
147
140
 
148
141
  .stepper-item.is-error {
@@ -171,7 +164,9 @@
171
164
  inline-size: 100%;
172
165
 
173
166
  .stepper-item {
174
- grid-template-columns: var(--stepper-marker-size) minmax(var(--stepper-gap), 1fr);
167
+ grid-template-columns: minmax(0, 1fr);
168
+ justify-items: center;
169
+ text-align: center;
175
170
  grid-template-rows: var(--stepper-marker-size) auto;
176
171
  gap: var(--spacer-2) var(--stepper-gap);
177
172
  padding-block-end: 0;
@@ -181,26 +176,39 @@
181
176
  (var(--stepper-marker-size) - var(--stepper-connector-width)) / 2
182
177
  );
183
178
  inset-block-end: auto;
184
- inset-inline-start: calc(var(--stepper-marker-size) + var(--stepper-gap));
185
- inset-inline-end: var(--stepper-gap);
179
+ inset-inline-start: calc(
180
+ 50% + var(--stepper-marker-size) / 2 + var(--stepper-gap)
181
+ );
182
+ inset-inline-end: calc(
183
+ -50% + var(--stepper-marker-size) / 2 + var(--stepper-gap)
184
+ );
186
185
  inline-size: auto;
187
186
  block-size: var(--stepper-connector-width);
188
187
  }
189
188
  }
190
189
 
191
- .stepper-content {
192
- grid-column: 1 / -1;
193
- padding-block: 0;
194
- padding-inline-end: var(--stepper-gap);
190
+ .stepper-item:first-child {
191
+ justify-items: start;
192
+ text-align: start;
193
+
194
+ &::before {
195
+ inset-inline-start: calc(var(--stepper-marker-size) + var(--stepper-gap));
196
+ }
195
197
  }
196
198
 
197
- .stepper-item[aria-current='step'] > .stepper-content {
198
- margin-block: 0;
199
- padding: var(--stepper-content-padding);
199
+ .stepper-item:nth-last-child(2)::before {
200
+ inset-inline-end: calc(-100% + var(--stepper-marker-size) + var(--stepper-gap));
200
201
  }
201
202
 
202
- .stepper-item[aria-current='step']:not(:last-child) > .stepper-content {
203
- margin-inline-end: var(--stepper-item-gap);
203
+ .stepper-item:last-child:not(:first-child) {
204
+ justify-items: end;
205
+ text-align: end;
206
+ }
207
+
208
+ .stepper-content {
209
+ grid-column: 1;
210
+ max-inline-size: 100%;
211
+ padding-block: 0;
204
212
  }
205
213
  }
206
214
  }
package/scss/components/tabs.scss CHANGED
@@ -1,37 +1,41 @@
1
1
  @layer components {
2
2
  .tabs {
3
3
  --tabs-bg-color: transparent;
4
+ --tabs-border-width: var(--border-width);
5
+ --tabs-border-color: var(--border-color);
4
6
 
5
7
  display: flex;
6
8
  overflow-x: auto;
7
- overflow-y: visible;
9
+ overflow-y: hidden;
8
10
  background-color: var(--tabs-bg-color);
11
+ box-shadow: inset 0 calc(-1 * var(--tabs-border-width)) 0 var(--tabs-border-color);
9
12
  -webkit-tap-highlight-color: transparent;
10
13
 
11
14
  .tab {
12
15
  --tab-color: var(--text-color);
13
- --tab-bg-color: var(--bg-surface);
16
+ --tab-bg-color: transparent;
14
17
 
15
18
  --tab-hover-color: var(--primary);
16
19
  --tab-hover-bg-color: var(--bg-surface-hover);
17
20
 
18
21
  --tab-active-color: var(--primary);
22
+ --tab-active-bg-color: transparent;
19
23
  --tab-active-border-color: var(--primary);
20
24
 
21
- --tab-border-width: 3px;
22
- --tab-border-color: var(--border-color);
25
+ --tab-border-width: 2px;
26
+ --tab-border-color: transparent;
23
27
 
24
28
  --tab-padding-y: var(--spacer-3);
25
29
  --tab-padding-x: var(--spacer-4);
26
30
 
27
31
  --tab-disabled-text-color: var(--disabled-text-color);
28
- --tab-disabled-bg-color: var(--disabled-bg-color);
29
- --tab-disabled-border-color: var(--disabled-border-color);
32
+ --tab-disabled-bg-color: transparent;
33
+ --tab-disabled-border-color: transparent;
30
34
 
31
35
  --tab-focus-outline-width: var(--focus-outline-width);
32
36
  --tab-focus-outline-style: var(--focus-outline-style);
33
37
  --tab-focus-outline-color: var(--focus-outline-color);
34
- --tab-focus-outline-offset: calc(-1 * var(--tab-border-width));
38
+ --tab-focus-outline-offset: calc(-1 * var(--tab-focus-outline-width));
35
39
 
36
40
  --tab-transition-duration: var(--transition-duration);
37
41
  --tab-transition-easing: var(--transition-easing);
@@ -45,6 +49,7 @@
45
49
  text-align: center;
46
50
  font: inherit;
47
51
  white-space: nowrap;
52
+ touch-action: manipulation;
48
53
 
49
54
  transition:
50
55
  color var(--tab-transition-duration) var(--tab-transition-easing),
@@ -59,6 +64,7 @@
59
64
  }
60
65
 
61
66
  &.is-active {
67
+ background-color: var(--tab-active-bg-color);
62
68
  color: var(--tab-active-color);
63
69
  border-block-end-color: var(--tab-active-border-color);
64
70
  }