@oardi/css-utils 0.99.0 → 0.101.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 (5) hide show
  1. package/package.json +1 -1
  2. package/scss/components/range-slider.scss +209 -0
  3. package/scss/components/stepper.scss +1 -1
  4. package/scss/index.scss +1 -0
  5. package/scss/mixins/breakpoints.scss +15 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.99.0",
3
+ "version": "0.101.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/range-slider.scss ADDED
@@ -0,0 +1,209 @@
1
+ @layer components {
2
+ .range-slider {
3
+ --range-slider-gap: var(--spacer-1);
4
+ --range-slider-header-gap: var(--spacer-3);
5
+ --range-slider-progress: 0%;
6
+ --range-slider-target-size: 2.75rem;
7
+ --range-slider-track-size: 0.5rem;
8
+ --range-slider-track-bg-color: var(--control-border-color);
9
+ --range-slider-fill-color: var(--primary);
10
+ --range-slider-thumb-size: 1.5rem;
11
+ --range-slider-thumb-bg-color: var(--primary);
12
+ --range-slider-thumb-border-width: 0.125rem;
13
+ --range-slider-thumb-border-color: var(--on-primary);
14
+ --range-slider-thumb-box-shadow: var(--shadow-sm);
15
+ --range-slider-value-color: var(--text-color);
16
+ --range-slider-marker-color: var(--text-muted);
17
+ --range-slider-disabled-track-bg-color: var(--disabled-border-color);
18
+ --range-slider-disabled-fill-color: var(--disabled-text-color);
19
+ --range-slider-disabled-thumb-bg-color: var(--disabled-text-color);
20
+ --range-slider-disabled-thumb-border-color: var(--disabled-bg-color);
21
+ --range-slider-invalid-color: var(--error);
22
+ --range-slider-focus-outline-width: var(--focus-outline-width);
23
+ --range-slider-focus-outline-style: var(--focus-outline-style);
24
+ --range-slider-focus-outline-color: var(--focus-outline-color);
25
+ --range-slider-focus-outline-offset: var(--focus-offset);
26
+ --range-slider-transition-duration: var(--transition-duration);
27
+ --range-slider-transition-easing: var(--transition-easing);
28
+
29
+ display: grid;
30
+ gap: var(--range-slider-gap);
31
+ min-width: 0;
32
+ }
33
+
34
+ .range-slider-header {
35
+ display: flex;
36
+ align-items: baseline;
37
+ justify-content: space-between;
38
+ gap: var(--range-slider-header-gap);
39
+ min-width: 0;
40
+
41
+ .form-label {
42
+ margin-bottom: 0;
43
+ }
44
+ }
45
+
46
+ .range-slider-output {
47
+ flex-shrink: 0;
48
+ color: var(--range-slider-value-color);
49
+ font-variant-numeric: tabular-nums;
50
+ }
51
+
52
+ .range-slider-input {
53
+ --_range-slider-fill-direction: to right;
54
+
55
+ box-sizing: border-box;
56
+ display: block;
57
+ inline-size: 100%;
58
+ min-inline-size: 0;
59
+ block-size: var(--range-slider-target-size);
60
+ margin: 0;
61
+ padding: 0;
62
+ appearance: none;
63
+ cursor: pointer;
64
+ background: linear-gradient(
65
+ var(--_range-slider-fill-direction),
66
+ var(--range-slider-fill-color) 0%,
67
+ var(--range-slider-fill-color) var(--range-slider-progress),
68
+ var(--range-slider-track-bg-color) var(--range-slider-progress),
69
+ var(--range-slider-track-bg-color) 100%
70
+ )
71
+ center / 100% var(--range-slider-track-size) no-repeat;
72
+ outline: 0;
73
+
74
+ &:dir(rtl) {
75
+ --_range-slider-fill-direction: to left;
76
+ }
77
+
78
+ &::-webkit-slider-runnable-track {
79
+ block-size: var(--range-slider-track-size);
80
+ background: transparent;
81
+ border: 0;
82
+ border-radius: 9999px;
83
+ }
84
+
85
+ &::-moz-range-track {
86
+ block-size: var(--range-slider-track-size);
87
+ background: var(--range-slider-track-bg-color);
88
+ border: 0;
89
+ border-radius: 9999px;
90
+ }
91
+
92
+ &::-moz-range-progress {
93
+ block-size: var(--range-slider-track-size);
94
+ background: var(--range-slider-fill-color);
95
+ border: 0;
96
+ border-radius: 9999px;
97
+ }
98
+
99
+ &::-webkit-slider-thumb {
100
+ box-sizing: border-box;
101
+ inline-size: var(--range-slider-thumb-size);
102
+ block-size: var(--range-slider-thumb-size);
103
+ margin-block-start: calc(
104
+ (var(--range-slider-track-size) - var(--range-slider-thumb-size)) / 2
105
+ );
106
+ appearance: none;
107
+ background: var(--range-slider-thumb-bg-color);
108
+ border: var(--range-slider-thumb-border-width) solid
109
+ var(--range-slider-thumb-border-color);
110
+ border-radius: 50%;
111
+ box-shadow: var(--range-slider-thumb-box-shadow);
112
+ transition:
113
+ background-color var(--range-slider-transition-duration)
114
+ var(--range-slider-transition-easing),
115
+ border-color var(--range-slider-transition-duration)
116
+ var(--range-slider-transition-easing),
117
+ outline-offset var(--range-slider-transition-duration)
118
+ var(--range-slider-transition-easing);
119
+ }
120
+
121
+ &::-moz-range-thumb {
122
+ box-sizing: border-box;
123
+ inline-size: var(--range-slider-thumb-size);
124
+ block-size: var(--range-slider-thumb-size);
125
+ background: var(--range-slider-thumb-bg-color);
126
+ border: var(--range-slider-thumb-border-width) solid
127
+ var(--range-slider-thumb-border-color);
128
+ border-radius: 50%;
129
+ box-shadow: var(--range-slider-thumb-box-shadow);
130
+ transition:
131
+ background-color var(--range-slider-transition-duration)
132
+ var(--range-slider-transition-easing),
133
+ border-color var(--range-slider-transition-duration)
134
+ var(--range-slider-transition-easing),
135
+ outline-offset var(--range-slider-transition-duration)
136
+ var(--range-slider-transition-easing);
137
+ }
138
+
139
+ &:focus-visible::-webkit-slider-thumb,
140
+ &.is-focus-visible::-webkit-slider-thumb {
141
+ outline: var(--range-slider-focus-outline-width) var(--range-slider-focus-outline-style)
142
+ var(--range-slider-focus-outline-color);
143
+ outline-offset: var(--range-slider-focus-outline-offset);
144
+ }
145
+
146
+ &:focus-visible::-moz-range-thumb,
147
+ &.is-focus-visible::-moz-range-thumb {
148
+ outline: var(--range-slider-focus-outline-width) var(--range-slider-focus-outline-style)
149
+ var(--range-slider-focus-outline-color);
150
+ outline-offset: var(--range-slider-focus-outline-offset);
151
+ }
152
+
153
+ &.is-invalid,
154
+ &[aria-invalid='true'] {
155
+ --range-slider-fill-color: var(--range-slider-invalid-color);
156
+ --range-slider-thumb-bg-color: var(--range-slider-invalid-color);
157
+ --range-slider-focus-outline-color: var(--range-slider-invalid-color);
158
+ }
159
+
160
+ &:disabled,
161
+ &[disabled] {
162
+ --range-slider-track-bg-color: var(--range-slider-disabled-track-bg-color);
163
+ --range-slider-fill-color: var(--range-slider-disabled-fill-color);
164
+ --range-slider-thumb-bg-color: var(--range-slider-disabled-thumb-bg-color);
165
+ --range-slider-thumb-border-color: var(--range-slider-disabled-thumb-border-color);
166
+
167
+ opacity: 1;
168
+ cursor: not-allowed;
169
+ }
170
+ }
171
+
172
+ .range-slider-marks {
173
+ display: flex;
174
+ justify-content: space-between;
175
+ gap: var(--spacer-1);
176
+ padding-inline: calc(var(--range-slider-thumb-size) / 2);
177
+ color: var(--range-slider-marker-color);
178
+ font-size: var(--font-size-sm);
179
+ font-variant-numeric: tabular-nums;
180
+ line-height: var(--line-height-sm);
181
+ }
182
+
183
+ @media (forced-colors: active) {
184
+ .range-slider-input {
185
+ --range-slider-track-bg-color: CanvasText;
186
+ --range-slider-fill-color: Highlight;
187
+ --range-slider-thumb-bg-color: Canvas;
188
+ --range-slider-thumb-border-color: Highlight;
189
+ --range-slider-focus-outline-color: Highlight;
190
+
191
+ forced-color-adjust: none;
192
+ }
193
+
194
+ .range-slider-input.is-invalid,
195
+ .range-slider-input[aria-invalid='true'] {
196
+ --range-slider-fill-color: Mark;
197
+ --range-slider-thumb-border-color: Mark;
198
+ --range-slider-focus-outline-color: Mark;
199
+ }
200
+
201
+ .range-slider-input:disabled,
202
+ .range-slider-input[disabled] {
203
+ --range-slider-track-bg-color: GrayText;
204
+ --range-slider-fill-color: GrayText;
205
+ --range-slider-thumb-bg-color: Canvas;
206
+ --range-slider-thumb-border-color: GrayText;
207
+ }
208
+ }
209
+ }
package/scss/components/stepper.scss CHANGED
@@ -158,7 +158,7 @@
158
158
  }
159
159
  }
160
160
 
161
- @include bp.media(md) {
161
+ @include bp.media-up(md) {
162
162
  .stepper-horizontal {
163
163
  flex-direction: row;
164
164
  inline-size: 100%;
package/scss/index.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  @forward './components/navbar.scss';
43
43
  @forward './components/overlay.scss';
44
44
  @forward './components/pagination.scss';
45
+ @forward './components/range-slider.scss';
45
46
  @forward './components/stepper.scss';
46
47
  @forward './components/table.scss';
47
48
  @forward './components/tabs.scss';
package/scss/mixins/breakpoints.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss' as theme;
3
3
 
4
- @mixin media($size) {
4
+ @mixin media-up($size) {
5
5
  $bps: map.get(theme.$theme, breakpoints);
6
6
 
7
7
  @if map.has-key($bps, $size) {
@@ -13,6 +13,20 @@
13
13
  }
14
14
  }
15
15
 
16
+ @mixin media-below($size) {
17
+ $bps: map.get(theme.$theme, breakpoints);
18
+
19
+ @if map.has-key($bps, $size) {
20
+ $breakpoint: map.get($bps, $size);
21
+
22
+ @media (max-width: calc(#{$breakpoint} - 0.02px)) {
23
+ @content;
24
+ }
25
+ } @else {
26
+ @error "Breakpoint `#{$size}` not found!";
27
+ }
28
+ }
29
+
16
30
  // usage
17
31
  // @use '@oardi/css-utils/scss/mixins/breakpoints' as bp;
18
32
  // @include bp.media(md) {