@agnos-ui/core-bootstrap 0.4.0 → 0.4.1

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 (17) hide show
  1. package/css/agnosui.css +22 -2
  2. package/css/agnosui.css.map +1 -1
  3. package/css/rating.css +16 -0
  4. package/css/rating.css.map +1 -0
  5. package/css/select.css +9 -0
  6. package/css/select.css.map +1 -0
  7. package/css/slider.css +196 -0
  8. package/css/slider.css.map +1 -0
  9. package/package.json +9 -9
  10. package/scss/_variables.scss +2 -0
  11. package/scss/agnosui.scss +1 -3
  12. package/scss/rating.scss +17 -0
  13. package/scss/select.scss +10 -0
  14. package/scss/slider.scss +243 -0
  15. package/scss/_select.scss +0 -7
  16. package/scss/_slider.scss +0 -221
  17. package/scss/_toast.scss +0 -3
package/css/agnosui.css CHANGED
@@ -20,12 +20,14 @@
20
20
  --bs-slider-translate-vertical: translateY(-50%);
21
21
  --bs-slider-translate-horizontal: translateX(-50%);
22
22
  --bs-slider-handle-color: var(--bs-primary, #0d6efd);
23
+ --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
23
24
  --bs-slider-handle-size: 1.25rem;
24
25
  --bs-slider-handle-border: none;
25
26
  --bs-slider-handle-border-hover: none;
26
27
  --bs-slider-handle-border-radius: 50%;
27
28
  --bs-slider-handle-outline: none;
28
29
  --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
30
+ --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
29
31
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
30
32
  --bs-slider-progress-height: 0.25rem;
31
33
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -111,6 +113,10 @@
111
113
  }
112
114
  .au-slider .au-slider-handle:not([disabled]):hover {
113
115
  border: var(--bs-slider-handle-border-hover);
116
+ background-color: var(--bs-slider-handle-hover-color);
117
+ }
118
+ .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
119
+ box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
114
120
  }
115
121
  .au-slider .au-slider-handle:focus-visible {
116
122
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
@@ -144,6 +150,9 @@
144
150
  font-weight: var(--bs-slider-label-now-font-weight);
145
151
  transform: var(--bs-slider-label-now-transform);
146
152
  }
153
+ .au-slider .au-slider-label.invisible {
154
+ visibility: hidden;
155
+ }
147
156
  .au-slider .au-slider-label-vertical {
148
157
  position: absolute;
149
158
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
@@ -192,8 +201,19 @@
192
201
  cursor: var(--bs-slider-disabled-cursor);
193
202
  }
194
203
 
195
- .au-toast {
196
- width: unset;
204
+ .au-rating.d-inline-flex {
205
+ display: inline-flex;
206
+ }
207
+ .au-rating .visually-hidden {
208
+ position: absolute;
209
+ width: 1px;
210
+ height: 1px;
211
+ padding: 0;
212
+ margin: -1px;
213
+ overflow: hidden;
214
+ clip: rect(0, 0, 0, 0);
215
+ white-space: nowrap;
216
+ border: 0;
197
217
  }
198
218
 
199
219
  /*# sourceMappingURL=agnosui.css.map */
package/css/agnosui.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/scss/_select.scss","../../src/scss/_slider.scss","../../src/scss/_toast.scss","../../src/scss/_variables.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;;ACeD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA7EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAoEA;EAjFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAwEA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;;ACzNH;EACC,OCDiB","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAEA;EACC;;;AAID;EACC;;;ACcD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA/EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA2EA;EAxFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAoFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;;AC9OF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
package/css/rating.css ADDED
@@ -0,0 +1,16 @@
1
+ .au-rating.d-inline-flex {
2
+ display: inline-flex;
3
+ }
4
+ .au-rating .visually-hidden {
5
+ position: absolute;
6
+ width: 1px;
7
+ height: 1px;
8
+ padding: 0;
9
+ margin: -1px;
10
+ overflow: hidden;
11
+ clip: rect(0, 0, 0, 0);
12
+ white-space: nowrap;
13
+ border: 0;
14
+ }
15
+
16
+ /*# sourceMappingURL=rating.css.map */
package/css/rating.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/rating.scss"],"names":[],"mappings":"AACC;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"rating.css"}
package/css/select.css ADDED
@@ -0,0 +1,9 @@
1
+ .au-select:focus-within {
2
+ box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
3
+ }
4
+
5
+ .au-select-input {
6
+ outline: none;
7
+ }
8
+
9
+ /*# sourceMappingURL=select.css.map */
package/css/select.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/select.scss"],"names":[],"mappings":"AAEA;EACC;;;AAID;EACC","file":"select.css"}
package/css/slider.css ADDED
@@ -0,0 +1,196 @@
1
+ .au-slider {
2
+ --bs-slider-background-color: var(--bs-secondary-bg, #e9ecef);
3
+ --bs-slider-font-size: 1rem;
4
+ --bs-slider-border-radius: 0.125rem;
5
+ --bs-slider-line-height: 1.5;
6
+ --bs-slider-primary-size: 100%;
7
+ --bs-slider-secondary-size: 0.25rem;
8
+ --bs-slider-margin-block-start: calc((1.25rem - 0.25rem) / 2 + 1rem * 1.5 + 0.5rem);
9
+ --bs-slider-margin-block-end: calc((1.25rem - 0.25rem) / 2 + 0.5rem);
10
+ --bs-slider-vertical-margin-inline-start: 1rem;
11
+ --bs-slider-vertical-margin-inline-end: 3rem;
12
+ --bs-slider-translate-vertical: translateY(-50%);
13
+ --bs-slider-translate-horizontal: translateX(-50%);
14
+ --bs-slider-handle-color: var(--bs-primary, #0d6efd);
15
+ --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
16
+ --bs-slider-handle-size: 1.25rem;
17
+ --bs-slider-handle-border: none;
18
+ --bs-slider-handle-border-hover: none;
19
+ --bs-slider-handle-border-radius: 50%;
20
+ --bs-slider-handle-outline: none;
21
+ --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
22
+ --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
23
+ --bs-slider-progress-color: var(--bs-primary, #0d6efd);
24
+ --bs-slider-progress-height: 0.25rem;
25
+ --bs-slider-progress-vertical-transform: rotate(90deg);
26
+ --bs-slider-label-margin-block-start: calc(-1 * (1rem * 1.5 + (1.25rem - 0.25rem) / 2));
27
+ --bs-slider-label-font-weight: normal;
28
+ --bs-slider-label-now-font-weight: normal;
29
+ --bs-slider-label-min-position: 0;
30
+ --bs-slider-label-max-position: 0;
31
+ --bs-slider-label-now-transform: translateX(-50%);
32
+ --bs-slider-label-vertical-margin-inline-start: 1rem;
33
+ --bs-slider-label-vertical-min-transform: translateY(-75%);
34
+ --bs-slider-label-vertical-max-transform: translateY(-25%);
35
+ --bs-slider-label-vertical-white-space: nowrap;
36
+ --bs-slider-label-vertical-min-top: 100%;
37
+ --bs-slider-label-vertical-max-top: 0%;
38
+ --bs-slider-label-vertical-now-transform: translateY(-50%);
39
+ --bs-slider-clickable-area-main-size: 1.5rem;
40
+ --bs-slider-clickable-area-secondary-size: 100%;
41
+ --bs-slider-clickable-area-translate: translateY(-50%);
42
+ --bs-slider-clickable-area-vertical-translate: translateX(-50%);
43
+ --bs-slider-clickable-area-vertical-flex-shrink: 0;
44
+ --bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
45
+ --bs-slider-disabled-cursor: not-allowed;
46
+ display: flex;
47
+ background-color: var(--bs-slider-background-color);
48
+ border-radius: var(--bs-slider-border-radius);
49
+ font-size: var(--bs-slider-font-size);
50
+ line-height: var(--bs-slider-line-height);
51
+ position: relative;
52
+ }
53
+ .au-slider.au-slider-lg {
54
+ --bs-slider-font-size: 1.125rem;
55
+ --bs-slider-border-radius: calc(0.3125rem / 2);
56
+ --bs-slider-secondary-size: 0.3125rem;
57
+ --bs-slider-margin-block-start: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
58
+ --bs-slider-margin-block-end: calc((1.5rem - 0.3125rem) / 2 + 0rem);
59
+ --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
60
+ --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
61
+ --bs-slider-handle-size: 1.5rem;
62
+ --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
63
+ --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
64
+ }
65
+ .au-slider.au-slider-sm {
66
+ --bs-slider-font-size: 0.875rem;
67
+ --bs-slider-border-radius: calc(0.2rem / 2);
68
+ --bs-slider-secondary-size: 0.2rem;
69
+ --bs-slider-margin-block-start: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
70
+ --bs-slider-margin-block-end: calc((1rem - 0.2rem) / 2 + 0rem);
71
+ --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
72
+ --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
73
+ --bs-slider-handle-size: 1rem;
74
+ --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
75
+ --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
76
+ }
77
+ .au-slider.au-slider-horizontal {
78
+ width: var(--bs-slider-primary-size);
79
+ height: var(--bs-slider-secondary-size);
80
+ margin-block-start: var(--bs-slider-margin-block-start);
81
+ margin-block-end: var(--bs-slider-margin-block-end);
82
+ }
83
+ .au-slider.au-slider-horizontal .au-slider-handle-horizontal {
84
+ top: calc(50% - var(--bs-slider-handle-size) / 2);
85
+ transform: var(--bs-slider-translate-horizontal);
86
+ }
87
+ .au-slider.au-slider-vertical {
88
+ height: var(--bs-slider-primary-size);
89
+ width: var(--bs-slider-secondary-size);
90
+ margin-inline-start: var(--bs-slider-vertical-margin-inline-start);
91
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-end);
92
+ }
93
+ .au-slider.au-slider-vertical .au-slider-handle-vertical {
94
+ left: calc(50% - var(--bs-slider-handle-size) / 2);
95
+ transform: var(--bs-slider-translate-vertical);
96
+ }
97
+ .au-slider .au-slider-handle {
98
+ background-color: var(--bs-slider-handle-color);
99
+ border: var(--bs-slider-handle-border);
100
+ border-radius: var(--bs-slider-handle-border-radius);
101
+ outline: var(--bs-slider-handle-outline);
102
+ position: absolute;
103
+ width: var(--bs-slider-handle-size);
104
+ height: var(--bs-slider-handle-size);
105
+ }
106
+ .au-slider .au-slider-handle:not([disabled]):hover {
107
+ border: var(--bs-slider-handle-border-hover);
108
+ background-color: var(--bs-slider-handle-hover-color);
109
+ }
110
+ .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
111
+ box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
112
+ }
113
+ .au-slider .au-slider-handle:focus-visible {
114
+ box-shadow: var(--bs-slider-handle-focus-box-shadow);
115
+ }
116
+ .au-slider .au-slider-progress {
117
+ background-color: var(--bs-slider-progress-color);
118
+ border-radius: var(--bs-slider-border-radius);
119
+ position: absolute;
120
+ }
121
+ .au-slider .au-slider-progress-vertical {
122
+ transform: var(--bs-slider-progress-vertical-transform);
123
+ }
124
+ .au-slider .au-slider-label {
125
+ font-weight: var(--bs-slider-label-font-weight);
126
+ margin-block-start: var(--bs-slider-label-margin-block-start);
127
+ position: absolute;
128
+ }
129
+ .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
130
+ left: var(--bs-slider-label-min-position);
131
+ }
132
+ .au-slider .au-slider-label.au-slider-label-min.au-slider-rtl {
133
+ right: var(--bs-slider-label-max-position);
134
+ }
135
+ .au-slider .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
136
+ right: var(--bs-slider-label-max-position);
137
+ }
138
+ .au-slider .au-slider-label.au-slider-label-max.au-slider-rtl {
139
+ left: var(--bs-slider-label-min-position);
140
+ }
141
+ .au-slider .au-slider-label.au-slider-label-now {
142
+ font-weight: var(--bs-slider-label-now-font-weight);
143
+ transform: var(--bs-slider-label-now-transform);
144
+ }
145
+ .au-slider .au-slider-label.invisible {
146
+ visibility: hidden;
147
+ }
148
+ .au-slider .au-slider-label-vertical {
149
+ position: absolute;
150
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
151
+ white-space: var(--bs-slider-label-vertical-white-space);
152
+ }
153
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
154
+ top: var(--bs-slider-label-vertical-min-top);
155
+ transform: var(--bs-slider-label-vertical-min-transform);
156
+ }
157
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
158
+ top: var(--bs-slider-label-vertical-max-top);
159
+ transform: var(--bs-slider-label-vertical-max-transform);
160
+ }
161
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
162
+ top: var(--bs-slider-label-vertical-max-top);
163
+ transform: var(--bs-slider-label-vertical-max-transform);
164
+ }
165
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
166
+ top: var(--bs-slider-label-vertical-min-top);
167
+ transform: var(--bs-slider-label-vertical-min-transform);
168
+ }
169
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-now {
170
+ transform: var(--bs-slider-label-vertical-now-transform);
171
+ }
172
+ .au-slider .au-slider-clickable-area {
173
+ height: var(--bs-slider-clickable-area-main-size);
174
+ width: var(--bs-slider-clickable-area-secondary-size);
175
+ transform: var(--bs-slider-clickable-area-translate);
176
+ }
177
+ .au-slider .au-slider-clickable-area-vertical {
178
+ width: var(--bs-slider-clickable-area-main-size);
179
+ height: var(--bs-slider-clickable-area-secondary-size);
180
+ transform: var(--bs-slider-clickable-area-vertical-translate);
181
+ flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
182
+ }
183
+ .au-slider.disabled {
184
+ cursor: var(--bs-slider-disabled-cursor);
185
+ }
186
+ .au-slider.disabled .au-slider-label,
187
+ .au-slider.disabled .au-slider-label-vertical {
188
+ color: var(--bs-slider-disabled-color);
189
+ }
190
+ .au-slider.disabled .au-slider-progress,
191
+ .au-slider.disabled .au-slider-handle {
192
+ background-color: var(--bs-slider-disabled-color);
193
+ cursor: var(--bs-slider-disabled-cursor);
194
+ }
195
+
196
+ /*# sourceMappingURL=slider.css.map */
package/css/slider.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AAsBA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA/EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA2EA;EAxFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAoFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA","file":"slider.css"}
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@agnos-ui/core-bootstrap",
3
3
  "description": "Styles and widget interface extensions necessary to use AgnosUI with Bootstrap.",
4
- "version": "0.4.0",
4
+ "version": "0.4.1",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
8
8
  "scss",
9
- "AgnosUI",
10
9
  "accordion",
10
+ "AgnosUI",
11
11
  "alert",
12
12
  "components",
13
13
  "modal",
@@ -49,17 +49,17 @@
49
49
  "require": "./config.cjs",
50
50
  "default": "./config.js"
51
51
  },
52
- "./scss/agnosui.scss": {
53
- "require": "./scss/agnosui.scss",
54
- "default": "./scss/agnosui.scss"
52
+ "./scss/*.scss": {
53
+ "require": "./scss/*.scss",
54
+ "default": "./scss/*.scss"
55
55
  },
56
- "./css/agnosui.css": {
57
- "require": "./css/agnosui.css",
58
- "default": "./css/agnosui.css"
56
+ "./css/*.css": {
57
+ "require": "./css/*.css",
58
+ "default": "./css/*.css"
59
59
  }
60
60
  },
61
61
  "dependencies": {
62
- "@agnos-ui/core": "0.4.0"
62
+ "@agnos-ui/core": "0.4.1"
63
63
  },
64
64
  "sideEffects": false,
65
65
  "homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
package/scss/_variables.scss CHANGED
@@ -20,12 +20,14 @@ $au-slider-vertical-margin-inline-end: 3rem !default;
20
20
  $au-slider-translate-vertical: translateY(-50%) !default;
21
21
  $au-slider-translate-horizontal: translateX(-50%) !default;
22
22
  $au-slider-handle-color: var(--#{$prefix}primary, #0d6efd) !default;
23
+ $au-slider-handle-hover-color: var(--#{$prefix}primary, #0d6efd) !default;
23
24
  $au-slider-handle-size: 1.25rem !default;
24
25
  $au-slider-handle-border: none !default;
25
26
  $au-slider-handle-border-hover: none !default;
26
27
  $au-slider-handle-border-radius: 50% !default;
27
28
  $au-slider-handle-outline: none !default;
28
29
  $au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
30
+ $au-slider-handle-focus-hover-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
29
31
  $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
30
32
  $au-slider-progress-height: 0.25rem !default;
31
33
  $au-slider-progress-vertical-transform: rotate(90deg) !default;
package/scss/agnosui.scss CHANGED
@@ -1,6 +1,4 @@
1
- @import 'variables';
2
-
3
1
  //components
4
2
  @import 'select';
5
3
  @import 'slider';
6
- @import 'toast';
4
+ @import 'rating';
package/scss/rating.scss ADDED
@@ -0,0 +1,17 @@
1
+ .au-rating {
2
+ &.d-inline-flex {
3
+ display: inline-flex;
4
+ }
5
+
6
+ .visually-hidden {
7
+ position: absolute;
8
+ width: 1px;
9
+ height: 1px;
10
+ padding: 0;
11
+ margin: -1px;
12
+ overflow: hidden;
13
+ clip: rect(0, 0, 0, 0);
14
+ white-space: nowrap;
15
+ border: 0;
16
+ }
17
+ }
package/scss/select.scss ADDED
@@ -0,0 +1,10 @@
1
+ @use 'variables';
2
+
3
+ .au-select:focus-within {
4
+ box-shadow: var(--#{variables.$prefix}focus-ring-x, 0) var(--#{variables.$prefix}focus-ring-y, 0) var(--#{variables.$prefix}focus-ring-blur, 0)
5
+ var(--#{variables.$prefix}focus-ring-width) var(--#{variables.$prefix}focus-ring-color);
6
+ }
7
+
8
+ .au-select-input {
9
+ outline: none;
10
+ }
package/scss/slider.scss ADDED
@@ -0,0 +1,243 @@
1
+ @use 'variables';
2
+
3
+ /// Mixin used to redefine css variable for different size of slider
4
+ /// In particular the size bar and the size of the handle
5
+ /// The offset is used to add some space between the text and the slider
6
+ @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
7
+ --#{variables.$prefix}slider-font-size: #{$fontSize};
8
+ --#{variables.$prefix}slider-border-radius: calc(#{$barSize} / 2);
9
+
10
+ --#{variables.$prefix}slider-secondary-size: #{$barSize};
11
+
12
+ --#{variables.$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
13
+ --#{variables.$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
14
+ --#{variables.$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
15
+ --#{variables.$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
16
+
17
+ --#{variables.$prefix}slider-handle-size: #{$handleSize};
18
+
19
+ --#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
20
+ --#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
21
+ }
22
+
23
+ .au-slider {
24
+ // scss-docs-start slider-css-vars
25
+ --#{variables.$prefix}slider-background-color: #{variables.$au-slider-color-background};
26
+ --#{variables.$prefix}slider-font-size: #{variables.$au-slider-font-size};
27
+ --#{variables.$prefix}slider-border-radius: #{variables.$au-slider-border-radius};
28
+ --#{variables.$prefix}slider-line-height: #{variables.$au-slider-line-height};
29
+
30
+ --#{variables.$prefix}slider-primary-size: #{variables.$au-slider-primary-size};
31
+ --#{variables.$prefix}slider-secondary-size: #{variables.$au-slider-secondary-size};
32
+ --#{variables.$prefix}slider-margin-block-start: #{variables.$au-slider-margin-block-start};
33
+ --#{variables.$prefix}slider-margin-block-end: #{variables.$au-slider-margin-block-end};
34
+ --#{variables.$prefix}slider-vertical-margin-inline-start: #{variables.$au-slider-vertical-margin-inline-start};
35
+ --#{variables.$prefix}slider-vertical-margin-inline-end: #{variables.$au-slider-vertical-margin-inline-end};
36
+ --#{variables.$prefix}slider-translate-vertical: #{variables.$au-slider-translate-vertical};
37
+ --#{variables.$prefix}slider-translate-horizontal: #{variables.$au-slider-translate-horizontal};
38
+
39
+ --#{variables.$prefix}slider-handle-color: #{variables.$au-slider-handle-color};
40
+ --#{variables.$prefix}slider-handle-hover-color: #{variables.$au-slider-handle-hover-color};
41
+ --#{variables.$prefix}slider-handle-size: #{variables.$au-slider-handle-size};
42
+ --#{variables.$prefix}slider-handle-border: #{variables.$au-slider-handle-border};
43
+ --#{variables.$prefix}slider-handle-border-hover: #{variables.$au-slider-handle-border-hover};
44
+ --#{variables.$prefix}slider-handle-border-radius: #{variables.$au-slider-handle-border-radius};
45
+ --#{variables.$prefix}slider-handle-outline: #{variables.$au-slider-handle-outline};
46
+ --#{variables.$prefix}slider-handle-focus-box-shadow: #{variables.$au-slider-handle-focus-box-shadow};
47
+ --#{variables.$prefix}slider-handle-focus-hover-box-shadow: #{variables.$au-slider-handle-focus-hover-box-shadow};
48
+
49
+ --#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
50
+ --#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
51
+ --#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};
52
+
53
+ --#{variables.$prefix}slider-label-margin-block-start: #{variables.$au-slider-label-margin-block-start};
54
+ --#{variables.$prefix}slider-label-font-weight: #{variables.$au-slider-label-font-weight};
55
+ --#{variables.$prefix}slider-label-now-font-weight: #{variables.$au-slider-label-now-font-weight};
56
+
57
+ --#{variables.$prefix}slider-label-min-position: #{variables.$au-slider-label-min-position};
58
+ --#{variables.$prefix}slider-label-max-position: #{variables.$au-slider-label-max-position};
59
+ --#{variables.$prefix}slider-label-now-transform: #{variables.$au-slider-label-now-transform};
60
+
61
+ --#{variables.$prefix}slider-label-vertical-margin-inline-start: #{variables.$au-slider-label-vertical-margin-inline-start};
62
+ --#{variables.$prefix}slider-label-vertical-min-transform: #{variables.$au-slider-label-vertical-min-transform};
63
+ --#{variables.$prefix}slider-label-vertical-max-transform: #{variables.$au-slider-label-vertical-max-transform};
64
+ --#{variables.$prefix}slider-label-vertical-white-space: #{variables.$au-slider-label-vertical-white-space};
65
+ --#{variables.$prefix}slider-label-vertical-min-top: #{variables.$au-slider-label-vertical-min-top};
66
+ --#{variables.$prefix}slider-label-vertical-max-top: #{variables.$au-slider-label-vertical-max-top};
67
+ --#{variables.$prefix}slider-label-vertical-now-transform: #{variables.$au-slider-label-vertical-now-transform};
68
+
69
+ --#{variables.$prefix}slider-clickable-area-main-size: #{variables.$au-slider-clickable-area-main-size};
70
+ --#{variables.$prefix}slider-clickable-area-secondary-size: #{variables.$au-slider-clickable-area-secondary-size};
71
+ --#{variables.$prefix}slider-clickable-area-translate: #{variables.$au-slider-clickable-area-translateY};
72
+ --#{variables.$prefix}slider-clickable-area-vertical-translate: #{variables.$au-slider-clickable-area-translateX};
73
+ --#{variables.$prefix}slider-clickable-area-vertical-flex-shrink: #{variables.$au-slider-clickable-area-vertical-flex-shrink};
74
+
75
+ --#{variables.$prefix}slider-disabled-color: #{variables.$au-slider-disabled-color};
76
+ --#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
77
+ // scss-docs-end slider-css-vars
78
+
79
+ display: flex;
80
+ background-color: var(--#{variables.$prefix}slider-background-color);
81
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
82
+ font-size: var(--#{variables.$prefix}slider-font-size);
83
+ line-height: var(--#{variables.$prefix}slider-line-height);
84
+ position: relative;
85
+
86
+ &.au-slider-lg {
87
+ @include setSliderSize(
88
+ variables.$au-slider-bar-size-lg,
89
+ variables.$au-slider-handle-size-lg,
90
+ variables.$au-slider-font-size-lg,
91
+ variables.$au-slider-offset-lg
92
+ );
93
+ }
94
+
95
+ &.au-slider-sm {
96
+ @include setSliderSize(
97
+ variables.$au-slider-bar-size-sm,
98
+ variables.$au-slider-handle-size-sm,
99
+ variables.$au-slider-font-size-sm,
100
+ variables.$au-slider-offset-sm
101
+ );
102
+ }
103
+
104
+ &.au-slider-horizontal {
105
+ width: var(--#{variables.$prefix}slider-primary-size);
106
+ height: var(--#{variables.$prefix}slider-secondary-size);
107
+ margin-block-start: var(--#{variables.$prefix}slider-margin-block-start);
108
+ margin-block-end: var(--#{variables.$prefix}slider-margin-block-end);
109
+ .au-slider-handle-horizontal {
110
+ top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
111
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
112
+ }
113
+ }
114
+
115
+ &.au-slider-vertical {
116
+ height: var(--#{variables.$prefix}slider-primary-size);
117
+ width: var(--#{variables.$prefix}slider-secondary-size);
118
+ margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-start);
119
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-end);
120
+ .au-slider-handle-vertical {
121
+ left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
122
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
123
+ }
124
+ }
125
+
126
+ .au-slider-handle {
127
+ background-color: var(--#{variables.$prefix}slider-handle-color);
128
+ border: var(--#{variables.$prefix}slider-handle-border);
129
+ border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
130
+ outline: var(--#{variables.$prefix}slider-handle-outline);
131
+ position: absolute;
132
+ width: var(--#{variables.$prefix}slider-handle-size);
133
+ height: var(--#{variables.$prefix}slider-handle-size);
134
+
135
+ &:not([disabled]):hover {
136
+ border: var(--#{variables.$prefix}slider-handle-border-hover);
137
+ background-color: var(--#{variables.$prefix}slider-handle-hover-color);
138
+ &:focus-visible {
139
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
140
+ }
141
+ }
142
+ &:focus-visible {
143
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
144
+ }
145
+ }
146
+
147
+ .au-slider-progress {
148
+ background-color: var(--#{variables.$prefix}slider-progress-color);
149
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
150
+ position: absolute;
151
+ }
152
+
153
+ .au-slider-progress-vertical {
154
+ transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
155
+ }
156
+
157
+ .au-slider-label {
158
+ font-weight: var(--#{variables.$prefix}slider-label-font-weight);
159
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
160
+ position: absolute;
161
+
162
+ &.au-slider-label-min:not(.au-slider-rtl) {
163
+ left: var(--#{variables.$prefix}slider-label-min-position);
164
+ }
165
+
166
+ &.au-slider-label-min.au-slider-rtl {
167
+ right: var(--#{variables.$prefix}slider-label-max-position);
168
+ }
169
+
170
+ &.au-slider-label-max:not(.au-slider-rtl) {
171
+ right: var(--#{variables.$prefix}slider-label-max-position);
172
+ }
173
+
174
+ &.au-slider-label-max.au-slider-rtl {
175
+ left: var(--#{variables.$prefix}slider-label-min-position);
176
+ }
177
+
178
+ &.au-slider-label-now {
179
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
180
+ transform: var(--#{variables.$prefix}slider-label-now-transform);
181
+ }
182
+
183
+ &.invisible {
184
+ visibility: hidden;
185
+ }
186
+ }
187
+
188
+ .au-slider-label-vertical {
189
+ position: absolute;
190
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
191
+ white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);
192
+
193
+ &.au-slider-label-vertical-min:not(.au-slider-rtl) {
194
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
195
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
196
+ }
197
+
198
+ &.au-slider-label-vertical-min.au-slider-rtl {
199
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
200
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
201
+ }
202
+
203
+ &.au-slider-label-vertical-max:not(.au-slider-rtl) {
204
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
205
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
206
+ }
207
+
208
+ &.au-slider-label-vertical-max.au-slider-rtl {
209
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
210
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
211
+ }
212
+
213
+ &.au-slider-label-vertical-now {
214
+ transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
215
+ }
216
+ }
217
+
218
+ .au-slider-clickable-area {
219
+ height: var(--#{variables.$prefix}slider-clickable-area-main-size);
220
+ width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
221
+ transform: var(--#{variables.$prefix}slider-clickable-area-translate);
222
+ }
223
+
224
+ .au-slider-clickable-area-vertical {
225
+ width: var(--#{variables.$prefix}slider-clickable-area-main-size);
226
+ height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
227
+ transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
228
+ flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
229
+ }
230
+
231
+ &.disabled {
232
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
233
+ .au-slider-label,
234
+ .au-slider-label-vertical {
235
+ color: var(--#{variables.$prefix}slider-disabled-color);
236
+ }
237
+ .au-slider-progress,
238
+ .au-slider-handle {
239
+ background-color: var(--#{variables.$prefix}slider-disabled-color);
240
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
241
+ }
242
+ }
243
+ }
package/scss/_select.scss DELETED
@@ -1,7 +0,0 @@
1
- .au-select:focus-within {
2
- box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
3
- }
4
-
5
- .au-select-input {
6
- outline: none;
7
- }
package/scss/_slider.scss DELETED
@@ -1,221 +0,0 @@
1
- /// Mixin used to redefine css variable for different size of slider
2
- /// In particular the size bar and the size of the handle
3
- /// The offset is used to add some space between the text and the slider
4
- @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
5
- --#{$prefix}slider-font-size: #{$fontSize};
6
- --#{$prefix}slider-border-radius: calc(#{$barSize} / 2);
7
-
8
- --#{$prefix}slider-secondary-size: #{$barSize};
9
-
10
- --#{$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
11
- --#{$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
12
- --#{$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
13
- --#{$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
14
-
15
- --#{$prefix}slider-handle-size: #{$handleSize};
16
-
17
- --#{$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
18
- --#{$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
19
- }
20
-
21
- .au-slider {
22
- // scss-docs-start slider-css-vars
23
- --#{$prefix}slider-background-color: #{$au-slider-color-background};
24
- --#{$prefix}slider-font-size: #{$au-slider-font-size};
25
- --#{$prefix}slider-border-radius: #{$au-slider-border-radius};
26
- --#{$prefix}slider-line-height: #{$au-slider-line-height};
27
-
28
- --#{$prefix}slider-primary-size: #{$au-slider-primary-size};
29
- --#{$prefix}slider-secondary-size: #{$au-slider-secondary-size};
30
- --#{$prefix}slider-margin-block-start: #{$au-slider-margin-block-start};
31
- --#{$prefix}slider-margin-block-end: #{$au-slider-margin-block-end};
32
- --#{$prefix}slider-vertical-margin-inline-start: #{$au-slider-vertical-margin-inline-start};
33
- --#{$prefix}slider-vertical-margin-inline-end: #{$au-slider-vertical-margin-inline-end};
34
- --#{$prefix}slider-translate-vertical: #{$au-slider-translate-vertical};
35
- --#{$prefix}slider-translate-horizontal: #{$au-slider-translate-horizontal};
36
-
37
- --#{$prefix}slider-handle-color: #{$au-slider-handle-color};
38
- --#{$prefix}slider-handle-size: #{$au-slider-handle-size};
39
- --#{$prefix}slider-handle-border: #{$au-slider-handle-border};
40
- --#{$prefix}slider-handle-border-hover: #{$au-slider-handle-border-hover};
41
- --#{$prefix}slider-handle-border-radius: #{$au-slider-handle-border-radius};
42
- --#{$prefix}slider-handle-outline: #{$au-slider-handle-outline};
43
- --#{$prefix}slider-handle-focus-box-shadow: #{$au-slider-handle-focus-box-shadow};
44
-
45
- --#{$prefix}slider-progress-color: #{$au-slider-progress-color};
46
- --#{$prefix}slider-progress-height: #{$au-slider-progress-height};
47
- --#{$prefix}slider-progress-vertical-transform: #{$au-slider-progress-vertical-transform};
48
-
49
- --#{$prefix}slider-label-margin-block-start: #{$au-slider-label-margin-block-start};
50
- --#{$prefix}slider-label-font-weight: #{$au-slider-label-font-weight};
51
- --#{$prefix}slider-label-now-font-weight: #{$au-slider-label-now-font-weight};
52
-
53
- --#{$prefix}slider-label-min-position: #{$au-slider-label-min-position};
54
- --#{$prefix}slider-label-max-position: #{$au-slider-label-max-position};
55
- --#{$prefix}slider-label-now-transform: #{$au-slider-label-now-transform};
56
-
57
- --#{$prefix}slider-label-vertical-margin-inline-start: #{$au-slider-label-vertical-margin-inline-start};
58
- --#{$prefix}slider-label-vertical-min-transform: #{$au-slider-label-vertical-min-transform};
59
- --#{$prefix}slider-label-vertical-max-transform: #{$au-slider-label-vertical-max-transform};
60
- --#{$prefix}slider-label-vertical-white-space: #{$au-slider-label-vertical-white-space};
61
- --#{$prefix}slider-label-vertical-min-top: #{$au-slider-label-vertical-min-top};
62
- --#{$prefix}slider-label-vertical-max-top: #{$au-slider-label-vertical-max-top};
63
- --#{$prefix}slider-label-vertical-now-transform: #{$au-slider-label-vertical-now-transform};
64
-
65
- --#{$prefix}slider-clickable-area-main-size: #{$au-slider-clickable-area-main-size};
66
- --#{$prefix}slider-clickable-area-secondary-size: #{$au-slider-clickable-area-secondary-size};
67
- --#{$prefix}slider-clickable-area-translate: #{$au-slider-clickable-area-translateY};
68
- --#{$prefix}slider-clickable-area-vertical-translate: #{$au-slider-clickable-area-translateX};
69
- --#{$prefix}slider-clickable-area-vertical-flex-shrink: #{$au-slider-clickable-area-vertical-flex-shrink};
70
-
71
- --#{$prefix}slider-disabled-color: #{$au-slider-disabled-color};
72
- --#{$prefix}slider-disabled-cursor: #{$au-slider-disabled-cursor};
73
- // scss-docs-end slider-css-vars
74
-
75
- display: flex;
76
- background-color: var(--#{$prefix}slider-background-color);
77
- border-radius: var(--#{$prefix}slider-border-radius);
78
- font-size: var(--#{$prefix}slider-font-size);
79
- line-height: var(--#{$prefix}slider-line-height);
80
- position: relative;
81
-
82
- &.au-slider-lg {
83
- @include setSliderSize($au-slider-bar-size-lg, $au-slider-handle-size-lg, $au-slider-font-size-lg, $au-slider-offset-lg);
84
- }
85
-
86
- &.au-slider-sm {
87
- @include setSliderSize($au-slider-bar-size-sm, $au-slider-handle-size-sm, $au-slider-font-size-sm, $au-slider-offset-sm);
88
- }
89
-
90
- &.au-slider-horizontal {
91
- width: var(--#{$prefix}slider-primary-size);
92
- height: var(--#{$prefix}slider-secondary-size);
93
- margin-block-start: var(--#{$prefix}slider-margin-block-start);
94
- margin-block-end: var(--#{$prefix}slider-margin-block-end);
95
- .au-slider-handle-horizontal {
96
- top: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
97
- transform: var(--#{$prefix}slider-translate-horizontal);
98
- }
99
- }
100
-
101
- &.au-slider-vertical {
102
- height: var(--#{$prefix}slider-primary-size);
103
- width: var(--#{$prefix}slider-secondary-size);
104
- margin-inline-start: var(--#{$prefix}slider-vertical-margin-inline-start);
105
- margin-inline-end: var(--#{$prefix}slider-vertical-margin-inline-end);
106
- .au-slider-handle-vertical {
107
- left: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
108
- transform: var(--#{$prefix}slider-translate-vertical);
109
- }
110
- }
111
-
112
- .au-slider-handle {
113
- background-color: var(--#{$prefix}slider-handle-color);
114
- border: var(--#{$prefix}slider-handle-border);
115
- border-radius: var(--#{$prefix}slider-handle-border-radius);
116
- outline: var(--#{$prefix}slider-handle-outline);
117
- position: absolute;
118
- width: var(--#{$prefix}slider-handle-size);
119
- height: var(--#{$prefix}slider-handle-size);
120
-
121
- &:not([disabled]):hover {
122
- border: var(--#{$prefix}slider-handle-border-hover);
123
- }
124
- &:focus-visible {
125
- box-shadow: var(--#{$prefix}slider-handle-focus-box-shadow);
126
- }
127
- }
128
-
129
- .au-slider-progress {
130
- background-color: var(--#{$prefix}slider-progress-color);
131
- border-radius: var(--#{$prefix}slider-border-radius);
132
- position: absolute;
133
- }
134
-
135
- .au-slider-progress-vertical {
136
- transform: var(--#{$prefix}slider-progress-vertical-transform);
137
- }
138
-
139
- .au-slider-label {
140
- font-weight: var(--#{$prefix}slider-label-font-weight);
141
- margin-block-start: var(--#{$prefix}slider-label-margin-block-start);
142
- position: absolute;
143
-
144
- &.au-slider-label-min:not(.au-slider-rtl) {
145
- left: var(--#{$prefix}slider-label-min-position);
146
- }
147
-
148
- &.au-slider-label-min.au-slider-rtl {
149
- right: var(--#{$prefix}slider-label-max-position);
150
- }
151
-
152
- &.au-slider-label-max:not(.au-slider-rtl) {
153
- right: var(--#{$prefix}slider-label-max-position);
154
- }
155
-
156
- &.au-slider-label-max.au-slider-rtl {
157
- left: var(--#{$prefix}slider-label-min-position);
158
- }
159
-
160
- &.au-slider-label-now {
161
- font-weight: var(--#{$prefix}slider-label-now-font-weight);
162
- transform: var(--#{$prefix}slider-label-now-transform);
163
- }
164
- }
165
-
166
- .au-slider-label-vertical {
167
- position: absolute;
168
- margin-inline-start: var(--#{$prefix}slider-label-vertical-margin-inline-start);
169
- white-space: var(--#{$prefix}slider-label-vertical-white-space);
170
-
171
- &.au-slider-label-vertical-min:not(.au-slider-rtl) {
172
- top: var(--#{$prefix}slider-label-vertical-min-top);
173
- transform: var(--#{$prefix}slider-label-vertical-min-transform);
174
- }
175
-
176
- &.au-slider-label-vertical-min.au-slider-rtl {
177
- top: var(--#{$prefix}slider-label-vertical-max-top);
178
- transform: var(--#{$prefix}slider-label-vertical-max-transform);
179
- }
180
-
181
- &.au-slider-label-vertical-max:not(.au-slider-rtl) {
182
- top: var(--#{$prefix}slider-label-vertical-max-top);
183
- transform: var(--#{$prefix}slider-label-vertical-max-transform);
184
- }
185
-
186
- &.au-slider-label-vertical-max.au-slider-rtl {
187
- top: var(--#{$prefix}slider-label-vertical-min-top);
188
- transform: var(--#{$prefix}slider-label-vertical-min-transform);
189
- }
190
-
191
- &.au-slider-label-vertical-now {
192
- transform: var(--#{$prefix}slider-label-vertical-now-transform);
193
- }
194
- }
195
-
196
- .au-slider-clickable-area {
197
- height: var(--#{$prefix}slider-clickable-area-main-size);
198
- width: var(--#{$prefix}slider-clickable-area-secondary-size);
199
- transform: var(--#{$prefix}slider-clickable-area-translate);
200
- }
201
-
202
- .au-slider-clickable-area-vertical {
203
- width: var(--#{$prefix}slider-clickable-area-main-size);
204
- height: var(--#{$prefix}slider-clickable-area-secondary-size);
205
- transform: var(--#{$prefix}slider-clickable-area-vertical-translate);
206
- flex-shrink: var(--#{$prefix}slider-clickable-area-vertical-flex-shrink);
207
- }
208
-
209
- &.disabled {
210
- cursor: var(--#{$prefix}slider-disabled-cursor);
211
- .au-slider-label,
212
- .au-slider-label-vertical {
213
- color: var(--#{$prefix}slider-disabled-color);
214
- }
215
- .au-slider-progress,
216
- .au-slider-handle {
217
- background-color: var(--#{$prefix}slider-disabled-color);
218
- cursor: var(--#{$prefix}slider-disabled-cursor);
219
- }
220
- }
221
- }
package/scss/_toast.scss DELETED
@@ -1,3 +0,0 @@
1
- .au-toast {
2
- width: $toast-max-width;
3
- }