@oardi/css-utils 0.70.0 → 0.71.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.70.0",
3
+ "version": "0.71.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",
@@ -13,6 +13,7 @@
13
13
  --chip-padding-x: var(--spacer-2);
14
14
  --chip-border-radius: 9999px;
15
15
  --chip-border-width: var(--border-width);
16
+ --chip-action-size: 1.5rem;
16
17
 
17
18
  --chip-highlight: var(--bg-highlight);
18
19
 
@@ -55,7 +56,8 @@
55
56
  border-color: var(--chip-highlight);
56
57
  }
57
58
 
58
- &:has(> i.icon:last-child) {
59
+ &:has(> i.icon:last-child),
60
+ &:has(> .chip-action:last-child) {
59
61
  padding-inline-end: 0;
60
62
  }
61
63
 
@@ -69,6 +71,32 @@
69
71
  padding: 0;
70
72
  }
71
73
  }
74
+
75
+ .chip-action {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ flex-shrink: 0;
80
+ width: var(--chip-action-size);
81
+ height: var(--chip-action-size);
82
+ padding: 0;
83
+ border: 0;
84
+ border-radius: var(--chip-border-radius);
85
+ background-color: transparent;
86
+ color: inherit;
87
+ fill: currentColor;
88
+ line-height: 1;
89
+
90
+ &:hover {
91
+ cursor: pointer;
92
+ }
93
+
94
+ &:focus-visible {
95
+ outline: var(--focus-outline-width) var(--focus-outline-style)
96
+ var(--focus-outline-color);
97
+ outline-offset: var(--focus-offset);
98
+ }
99
+ }
72
100
  }
73
101
 
74
102
  @each $name, $value in map.get(theme.$theme, colors) {
@@ -33,7 +33,7 @@
33
33
 
34
34
  --expansion-panel-transition-duration: var(--transition-duration);
35
35
  --expansion-panel-transition-easing: var(--transition-easing);
36
- --expansion-panel-content-transition-duration: 0.25s;
36
+ --expansion-panel-content-transition-duration: var(--transition-duration);
37
37
 
38
38
  color: var(--text-color);
39
39
  background-color: var(--expansion-panel-bg-color);
@@ -285,7 +285,6 @@
285
285
  background-color: var(--form-check-disabled-bg-color);
286
286
  border-color: var(--form-check-disabled-border-color);
287
287
 
288
- & + .form-label,
289
288
  & + .form-label {
290
289
  color: var(--disabled-text-color);
291
290
  cursor: not-allowed;
@@ -453,7 +452,6 @@
453
452
  background-color: var(--form-switch-disabled-thumb-bg-color);
454
453
  }
455
454
 
456
- & + .form-label,
457
455
  & + .form-label {
458
456
  color: var(--disabled-text-color);
459
457
  cursor: not-allowed;
@@ -108,7 +108,6 @@
108
108
 
109
109
  &:focus-visible,
110
110
  &.is-focus-visible {
111
- outline-color: rgba(var(--icon-button-color-rgb), 0.5);
112
111
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
113
112
  rgba(var(--icon-button-color-rgb), 0.5);
114
113
  }
@@ -128,7 +127,6 @@
128
127
 
129
128
  &:focus-visible,
130
129
  &.is-focus-visible {
131
- outline-color: rgba(var(--icon-button-color-rgb), 0.5);
132
130
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
133
131
  rgba(var(--icon-button-color-rgb), 0.5);
134
132
  background-color: var(--icon-button-highlight);
@@ -155,7 +153,6 @@
155
153
 
156
154
  &:focus-visible,
157
155
  &.is-focus-visible {
158
- outline-color: rgba(var(--icon-button-color-rgb), 0.5);
159
156
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
160
157
  rgba(var(--icon-button-color-rgb), 0.5);
161
158
  }
package/scss/reboot.scss CHANGED
@@ -90,6 +90,8 @@
90
90
  [type='submit'],
91
91
  button {
92
92
  -webkit-appearance: button;
93
+ // Kept for the established cross-browser button normalization.
94
+ // stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
93
95
  appearance: button;
94
96
  }
95
97
 
@@ -128,10 +130,4 @@
128
130
  ul {
129
131
  padding-left: 1rem;
130
132
  }
131
-
132
- @media (prefers-reduced-motion: reduce) {
133
- :root {
134
- --transition-duration: 0ms;
135
- }
136
- }
137
133
  }
@@ -127,4 +127,11 @@
127
127
  --disabled-bg-color: var(--gray-750);
128
128
  --disabled-border-color: var(--gray-700);
129
129
  }
130
+
131
+ @media (prefers-reduced-motion: reduce) {
132
+ :root {
133
+ --transition-duration-fast: 0ms;
134
+ --transition-duration: 0ms;
135
+ }
136
+ }
130
137
  }