@oardi/css-utils 0.66.1 → 0.67.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 (6) hide show
  1. package/package.json +1 -1
  2. package/scss/components/chip.scss +26 -5
  3. package/scss/components/drawer.scss +6 -1
  4. package/scss/theme.scss +2 -4
  5. package/scss/typography.scss +2 -0
  6. package/scss/utilities.scss +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.66.1",
3
+ "version": "0.67.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/chip.scss CHANGED
@@ -55,6 +55,10 @@
55
55
  border-color: var(--chip-highlight);
56
56
  }
57
57
 
58
+ &:has(> i.icon:last-child) {
59
+ padding-inline-end: 0;
60
+ }
61
+
58
62
  .chip-label {
59
63
  display: inline-flex;
60
64
  flex-shrink: 0;
@@ -81,12 +85,18 @@
81
85
  background-color: var(--chip-color);
82
86
  border-color: var(--chip-color);
83
87
 
84
- &:hover,
85
- &:active {
88
+ &:hover {
86
89
  color: var(--chip-on-color);
87
90
  background-color: var(--chip-color-hover);
88
91
  border-color: var(--chip-color-hover);
89
92
  }
93
+
94
+ &.is-active,
95
+ &:active {
96
+ color: var(--chip-on-color);
97
+ background-color: var(--chip-color-active);
98
+ border-color: var(--chip-color-active);
99
+ }
90
100
  }
91
101
 
92
102
  .chip-outline {
@@ -94,12 +104,18 @@
94
104
  background-color: transparent;
95
105
  border-color: var(--chip-color);
96
106
 
97
- &:hover,
98
- &:active {
107
+ &:hover {
99
108
  color: var(--chip-on-color);
100
109
  background-color: var(--chip-color-hover);
101
110
  border-color: var(--chip-color-hover);
102
111
  }
112
+
113
+ &.is-active,
114
+ &:active {
115
+ color: var(--chip-on-color);
116
+ background-color: var(--chip-color-active);
117
+ border-color: var(--chip-color-active);
118
+ }
103
119
  }
104
120
 
105
121
  .chip-text {
@@ -107,8 +123,13 @@
107
123
  background-color: transparent;
108
124
  border-color: transparent;
109
125
 
110
- &:hover,
126
+ &:hover {
127
+ background-color: var(--chip-highlight);
128
+ }
129
+
130
+ &.is-active,
111
131
  &:active {
132
+ color: var(--chip-color-active);
112
133
  background-color: var(--chip-highlight);
113
134
  }
114
135
  }
package/scss/components/drawer.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  .drawer {
3
3
  --drawer-width: 20rem;
4
4
  --drawer-z-index: var(--z-index-drawer);
5
+ --drawer-closed-translate-x: -100%;
5
6
 
6
7
  --drawer-bg-color: var(--bg-surface);
7
8
 
@@ -27,10 +28,14 @@
27
28
  height: 100dvh;
28
29
  background-color: var(--drawer-bg-color);
29
30
  border-inline-end: var(--drawer-border-width) solid var(--drawer-border-color);
30
- transform: translateX(-100%);
31
+ transform: translateX(var(--drawer-closed-translate-x));
31
32
 
32
33
  transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
33
34
 
35
+ &:dir(rtl) {
36
+ --drawer-closed-translate-x: 100%;
37
+ }
38
+
34
39
  &.is-open {
35
40
  transform: translateX(0);
36
41
  }
package/scss/theme.scss CHANGED
@@ -58,11 +58,9 @@ $default-theme: (
58
58
  ),
59
59
  directions: (
60
60
  t: top,
61
- e: right,
62
- // rename r to e -> end
61
+ e: inline-end,
63
62
  b: bottom,
64
- s: left,
65
- // rename l to s -> start
63
+ s: inline-start,
66
64
  // add x for left and right
67
65
  // add y for top and bottom
68
66
  ),
package/scss/typography.scss CHANGED
@@ -96,6 +96,8 @@
96
96
  outline-offset var(--link-transition-duration) var(--link-transition-easing);
97
97
 
98
98
  &:hover {
99
+ color: var(--link-hover-color, var(--link-text-color));
100
+ fill: var(--link-hover-color, var(--link-text-color));
99
101
  text-decoration: underline;
100
102
  }
101
103
 
package/scss/utilities.scss CHANGED
@@ -122,13 +122,13 @@
122
122
  }
123
123
 
124
124
  .rounded-start {
125
- border-top-left-radius: var(--border-radius);
126
- border-bottom-left-radius: var(--border-radius);
125
+ border-start-start-radius: var(--border-radius);
126
+ border-end-start-radius: var(--border-radius);
127
127
  }
128
128
 
129
129
  .rounded-end {
130
- border-top-right-radius: var(--border-radius);
131
- border-bottom-right-radius: var(--border-radius);
130
+ border-start-end-radius: var(--border-radius);
131
+ border-end-end-radius: var(--border-radius);
132
132
  }
133
133
 
134
134
  .rounded-0 {