@acorex/styles 5.8.0 → 6.0.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 (51) hide show
  1. package/index.js +191 -0
  2. package/index.scss +0 -1
  3. package/package.json +17 -10
  4. package/src/base/index.scss +3 -1
  5. package/src/components/_action-sheet.scss +2 -3
  6. package/src/components/_alert.scss +53 -55
  7. package/src/components/_avatar.scss +1 -3
  8. package/src/components/_badge.scss +150 -6
  9. package/src/components/_breadcrumbs.scss +14 -11
  10. package/src/components/_button.scss +11 -15
  11. package/src/components/_calendar.scss +5 -5
  12. package/src/components/_checkbox.scss +3 -8
  13. package/src/components/_collapse.scss +5 -12
  14. package/src/components/_color-palette.scss +9 -25
  15. package/src/components/_color-picker.scss +2 -2
  16. package/src/components/_data-table.scss +6 -6
  17. package/src/components/_datapager.scss +3 -3
  18. package/src/components/_decoration.scss +13 -13
  19. package/src/components/_dialog.scss +1 -1
  20. package/src/components/_drawer.scss +7 -7
  21. package/src/components/_dropdown.scss +8 -10
  22. package/src/components/_editor-container.scss +13 -13
  23. package/src/components/_fieldset.scss +2 -2
  24. package/src/components/_form.scss +1 -1
  25. package/src/components/_input.scss +1 -1
  26. package/src/components/_label.scss +1 -1
  27. package/src/components/_list.scss +8 -23
  28. package/src/components/_loading.scss +14 -21
  29. package/src/components/_menu.scss +4 -5
  30. package/src/components/_numberbox.scss +1 -3
  31. package/src/components/_popup.scss +1 -5
  32. package/src/components/_progress.scss +11 -13
  33. package/src/components/_radio.scss +1 -1
  34. package/src/components/_range-slider.scss +162 -31
  35. package/src/components/_result.scss +2 -3
  36. package/src/components/_selectbox.scss +2 -2
  37. package/src/components/_selection-list.scss +1 -1
  38. package/src/components/_switch.scss +0 -1
  39. package/src/components/_table.scss +5 -5
  40. package/src/components/_tabs.scss +3 -3
  41. package/src/components/_textarea.scss +5 -6
  42. package/src/components/_toast.scss +1 -1
  43. package/src/components/_treeview.scss +0 -1
  44. package/src/components/index.scss +0 -2
  45. package/src/icons/demo-files/demo.css +152 -152
  46. package/src/icons/demo-files/demo.js +30 -30
  47. package/src/utility/_mixins.scss +6 -6
  48. package/src/utility/index.scss +3 -3
  49. package/src/components/_picker.scss +0 -179
  50. package/src/components/_side-menu.scss +0 -42
  51. package/src/components/_switch copy.scss +0 -185
package/src/components/_dropdown.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @layer components {
2
- ax-drop-down,
3
2
  .ax-drop-down {
4
- display: contents;
5
-
3
+ @apply ax-contents;
6
4
  .ax-dropdown-content {
7
5
  @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
8
6
  &.ax-state-disabled {
@@ -14,16 +12,16 @@
14
12
  .ax-overlay-pane {
15
13
  @apply ax-bg-white ax-border ax-rounded ax-border-light-200 ax-shadow-lg;
16
14
  @include control-states("surface");
17
- ax-header,
18
- ax-footer {
15
+ .ax-header,
16
+ .ax-footer {
19
17
  @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ;
20
18
  @include control-states("editor");
21
19
  }
22
- ax-footer
20
+ .ax-footer
23
21
  {
24
22
  @apply ax-border-t;
25
23
  }
26
- ax-header
24
+ .ax-header
27
25
  {
28
26
  @apply ax-border-b;
29
27
  }
@@ -55,7 +53,7 @@
55
53
  &.ax-dropdown-list {
56
54
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
57
55
 
58
- ax-button-item {
56
+ .ax-button-item {
59
57
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
60
58
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
61
59
  @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-2 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
@@ -68,11 +66,11 @@
68
66
  @apply ax-cursor-not-allowed ax-opacity-60;
69
67
  }
70
68
 
71
- ax-prefix {
69
+ .ax-prefix {
72
70
  @apply ax-flex ax-flex-row ax-pe-2;
73
71
  }
74
72
 
75
- ax-suffix {
73
+ .ax-suffix {
76
74
  @apply ax-flex ax-flex-row ax-ps-2;
77
75
  }
78
76
 
package/src/components/_editor-container.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .ax-editor-container {
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
4
  line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
- @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
5
+ @apply ax-flex ax-rounded-default ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
6
6
  @include control-states("editor");
7
7
 
8
8
  @screen md {
@@ -53,38 +53,38 @@
53
53
  box-shadow: none;
54
54
  }
55
55
  }
56
- &>ax-prefix {
56
+ &>.ax-prefix {
57
57
  *,
58
- ax-button,
59
- ax-addon {
58
+ .ax-button,
59
+ .ax-addon {
60
60
  @apply ax-rounded-s;
61
61
  }
62
62
  }
63
63
 
64
- &>ax-suffix {
64
+ &>.ax-suffix {
65
65
  *,
66
- ax-button,
67
- ax-addon {
66
+ .ax-button,
67
+ .ax-addon {
68
68
  @apply ax-rounded-e;
69
69
  }
70
70
  }
71
71
 
72
- &>ax-prefix,
73
- &>ax-suffix {
72
+ &>.ax-prefix,
73
+ &>.ax-suffix {
74
74
  * {
75
75
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
76
76
  }
77
77
 
78
- ax-icon {
78
+ .ax-icon {
79
79
  @apply ax-px-2;
80
80
  }
81
81
 
82
- ax-addon {
82
+ .ax-addon {
83
83
  @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
84
84
  }
85
85
  }
86
86
 
87
- ax-button {
87
+ .ax-button {
88
88
  height: 100% !important;
89
89
  @apply ax-rounded-none;
90
90
 
@@ -134,7 +134,7 @@
134
134
  }
135
135
  }
136
136
 
137
- ax-button {
137
+ .ax-button {
138
138
  &.ax-state-disabled {
139
139
  @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
140
140
  }
package/src/components/_fieldset.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components{
2
- fieldset{
3
- @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded;
2
+ .ax-fieldset{
3
+ @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded dark:ax-border-white/10;
4
4
  legend{
5
5
  @apply ax-text-sm ax-px-1;
6
6
  }
package/src/components/_form.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- ax-form-field {
2
+ .ax-form-field {
3
3
  @apply ax-mb-2 ax-relative;
4
4
  .ax-error-msg {
5
5
  @apply ax-block ax-text-danger-500 ax-text-xs ax-py-2;
package/src/components/_input.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @apply ax-outline-none ax-p-0;
5
5
  font-size: inherit;
6
6
  &:focus {
7
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
7
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-default;
8
8
  }
9
9
  &.ax-state-disabled {
10
10
  @include control-states("editor-disabled");
package/src/components/_label.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- ax-label {
2
+ .ax-label {
3
3
  label {
4
4
  @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700 dark:ax-text-light-100;
5
5
  }
package/src/components/_list.scss CHANGED
@@ -1,14 +1,12 @@
1
1
  @layer components {
2
2
  .ax-list {
3
- display: block;
4
3
  @apply ax-h-full ax-flex ax-flex-col ax-overflow-hidden md:ax-max-h-80;
5
- ax-header,
6
- ax-footer {
4
+ .ax-header,
5
+ .ax-footer {
7
6
  @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
8
7
  @include control-states("editor");
9
8
  }
10
- ax-footer
11
- {
9
+ .ax-footer {
12
10
  @apply ax-border-t;
13
11
  }
14
12
  .ax-content {
@@ -29,12 +27,12 @@
29
27
  @apply ax-cursor-pointer;
30
28
 
31
29
  .ax-list-item-group {
32
- &>span {
30
+ & > span {
33
31
  @apply ax-font-bold ax-flex ax-items-center ax-px-3 ax-text-sm ax-text-light-900;
34
32
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
35
33
  }
36
34
 
37
- &>ul {
35
+ & > ul {
38
36
  @apply ax-px-3;
39
37
  }
40
38
  }
@@ -49,7 +47,7 @@
49
47
  }
50
48
 
51
49
  &.ax-state-selected {
52
- @apply ax-bg-light-200 ax-text-light-900 ax-font-medium ;
50
+ @apply ax-bg-light-200 ax-text-light-900 ax-font-medium;
53
51
  }
54
52
 
55
53
  &:not(.ax-check-box) {
@@ -72,27 +70,14 @@
72
70
  }
73
71
  }
74
72
 
75
-
76
73
  .ax-list-loading-container {
77
74
  @apply ax-flex ax-justify-center ax-p-2;
78
75
  }
79
76
  }
80
77
  }
81
78
 
82
- .ax-footer {}
79
+ .ax-footer {
80
+ }
83
81
  }
84
-
85
-
86
82
  }
87
83
 
88
- // .ax-list {
89
- // @apply ax-h-full ax-flex ax-flex-col;
90
-
91
- // .ax-list-header {}
92
-
93
- // .ax-list-body {
94
- // @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
95
- // }
96
-
97
- // .ax-list-footer {}
98
- // }
package/src/components/_loading.scss CHANGED
@@ -1,11 +1,6 @@
1
1
  @layer components {
2
-
3
- .ax-loading {
4
- }
5
-
6
2
  .ax-loading-host {
7
3
  .ax-loading {
8
-
9
4
  position: relative;
10
5
  background: rgba(var(--ax-color-white) 2);
11
6
  width: 4rem;
@@ -32,6 +27,18 @@
32
27
  @apply ax-bg-primary-500;
33
28
  animation: pulse2 2s 1s ease-in-out infinite;
34
29
  }
30
+ @keyframes pulse2 {
31
+ 0%,
32
+ 100% {
33
+ transform: translate(-50%, -50%) scale(0);
34
+ opacity: 1;
35
+ }
36
+
37
+ 50% {
38
+ transform: translate(-50%, -50%) scale(1);
39
+ opacity: 0;
40
+ }
41
+ }
35
42
  }
36
43
  }
37
44
 
@@ -39,21 +46,7 @@
39
46
  background: rgba(var(--ax-color-white) 2);
40
47
  }
41
48
 
42
- ax-loading-spinner{
49
+ .ax-loading-spinner {
43
50
  @apply ax-flex;
44
51
  }
45
-
46
- @keyframes pulse2 {
47
-
48
- 0%,
49
- 100% {
50
- transform: translate(-50%, -50%) scale(0);
51
- opacity: 1;
52
- }
53
-
54
- 50% {
55
- transform: translate(-50%, -50%) scale(1);
56
- opacity: 0;
57
- }
58
- }
59
- }
52
+ }
package/src/components/_menu.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @layer components {
2
- ax-menu,
3
2
  .ax-menu {
4
3
  > ul {
5
4
  @apply ax-flex ax-text-sm;
@@ -18,7 +17,7 @@
18
17
  }
19
18
 
20
19
  a {
21
- @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-md;
20
+ @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-default;
22
21
 
23
22
  &.active {
24
23
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
@@ -28,17 +27,17 @@
28
27
  @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
29
28
 
30
29
  }
31
- ax-icon {
30
+ .ax-icon {
32
31
  @apply ax-text-xl;
33
32
  }
34
33
  .ax-menu-start-side {
35
34
  @apply ax-flex ax-items-center;
36
- ax-icon {
35
+ .ax-icon {
37
36
  @apply ax-me-1.5;
38
37
  }
39
38
  }
40
39
  .ax-menu-end-side {
41
- ax-icon {
40
+ .ax-icon {
42
41
  @apply ax-block ax--rotate-180 ax-transition-all ;
43
42
  &.active-icon {
44
43
  @apply ax--rotate-90;
package/src/components/_numberbox.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  @layer components {
2
-
3
- ax-number-box,
4
2
  .ax-number-box {
5
3
  .ax-number-box-arrows {
6
4
  @apply ax-grid ax-invisible;
@@ -14,4 +12,4 @@
14
12
  }
15
13
  }
16
14
  }
17
- }
15
+ }
package/src/components/_popup.scss CHANGED
@@ -5,17 +5,13 @@
5
5
  @include control-states("surface");
6
6
  ax-header,
7
7
  ax-footer {
8
- @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700;
8
+ @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
9
9
  @include control-states("editor");
10
10
  }
11
11
  ax-footer
12
12
  {
13
13
  @apply ax-border-t;
14
14
  }
15
- ax-header
16
- {
17
- @apply ax-border-b;
18
- }
19
15
  .ax-popup-main-container {
20
16
  @apply ax-overflow-auto ax-flex-1;
21
17
  }
package/src/components/_progress.scss CHANGED
@@ -1,16 +1,14 @@
1
1
  @layer components {
2
- ax-progress-bar,
3
2
  .ax-progress-bar {
4
3
  @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
5
- ax-prefix{
4
+ .ax-prefix{
6
5
  @apply ax-pe-2;
7
6
  }
8
- ax-suffix{
7
+ .ax-suffix{
9
8
  @apply ax-ps-2;
10
9
  }
11
10
  .ax-progress-bar-container {
12
- @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
13
- @include control-states("editor");
11
+ @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
14
12
  .ax-progress-bar-rise {
15
13
  max-width: 100%;
16
14
  transition: width 1s;
@@ -20,42 +18,42 @@
20
18
 
21
19
  &.ax-primary-default {
22
20
  .ax-progress-bar-rise {
23
- @apply ax-bg-primary-500;
21
+ @apply ax-bg-primary-500 dark:ax-bg-primary-800;
24
22
  }
25
23
  }
26
24
  &.ax-secondary-default {
27
25
  .ax-progress-bar-rise {
28
- @apply ax-bg-secondary-500;
26
+ @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
29
27
  }
30
28
  }
31
29
  &.ax-success-default {
32
30
  .ax-progress-bar-rise {
33
- @apply ax-bg-success-500;
31
+ @apply ax-bg-success-500 dark:ax-bg-success-800;
34
32
  }
35
33
  }
36
34
  &.ax-warning-default {
37
35
  .ax-progress-bar-rise {
38
- @apply ax-bg-warning-500;
36
+ @apply ax-bg-warning-500 dark:ax-bg-warning-800;
39
37
  }
40
38
  }
41
39
  &.ax-danger-default {
42
40
  .ax-progress-bar-rise {
43
- @apply ax-bg-danger-500;
41
+ @apply ax-bg-danger-500 dark:ax-bg-danger-800;
44
42
  }
45
43
  }
46
44
  &.ax-info-default {
47
45
  .ax-progress-bar-rise {
48
- @apply ax-bg-info-500;
46
+ @apply ax-bg-info-500 dark:ax-bg-info-800;
49
47
  }
50
48
  }
51
49
  &.ax-light-default {
52
50
  .ax-progress-bar-rise {
53
- @apply ax-bg-light-300;
51
+ @apply ax-bg-light-300 dark:ax-border-light-500;
54
52
  }
55
53
  }
56
54
  &.ax-dark-default {
57
55
  .ax-progress-bar-rise {
58
- @apply ax-bg-dark-500 dark:ax-bg-dark-300;
56
+ @apply ax-bg-dark-500 dark:ax-bg-dark-200;
59
57
  }
60
58
  }
61
59
  }
package/src/components/_radio.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- ax-radio,.ax-radio {
2
+ .ax-radio {
3
3
  @apply ax-text-sm ax-font-medium ax-text-light-700;
4
4
 
5
5
  .ax-radio {
package/src/components/_range-slider.scss CHANGED
@@ -1,72 +1,203 @@
1
1
  @layer components {
2
- ax-range-slider {
2
+ .ax-dark {
3
+ .ax-range-slider {
4
+ &.ax-primary-default {
5
+ input {
6
+ background: linear-gradient(
7
+ to right,
8
+ rgb(var(--ax-color-primary-800)) 0%,
9
+ rgb(var(--ax-color-primary-800)) var(--ax-current-value),
10
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
11
+ rgba(255, 255, 255, 0.1) 100%
12
+ );
13
+ }
14
+ }
15
+ &.ax-secondary-default {
16
+ input {
17
+ background: linear-gradient(
18
+ to right,
19
+ rgb(var(--ax-color-secondary-800)) 0%,
20
+ rgb(var(--ax-color-secondary-800)) var(--ax-current-value),
21
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
22
+ rgba(255, 255, 255, 0.1) 100%
23
+ );
24
+ }
25
+ }
26
+ &.ax-success-default {
27
+ input {
28
+ background: linear-gradient(
29
+ to right,
30
+ rgb(var(--ax-color-success-800)) 0%,
31
+ rgb(var(--ax-color-success-800)) var(--ax-current-value),
32
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
33
+ rgba(255, 255, 255, 0.1) 100%
34
+ );
35
+ }
36
+ }
37
+ &.ax-warning-default {
38
+ input {
39
+ background: linear-gradient(
40
+ to right,
41
+ rgb(var(--ax-color-warning-800)) 0%,
42
+ rgb(var(--ax-color-warning-800)) var(--ax-current-value),
43
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
44
+ rgba(255, 255, 255, 0.1) 100%
45
+ );
46
+ }
47
+ }
48
+ &.ax-danger-default {
49
+ input {
50
+ background: linear-gradient(
51
+ to right,
52
+ rgb(var(--ax-color-danger-800)) 0%,
53
+ rgb(var(--ax-color-danger-800)) var(--ax-current-value),
54
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
55
+ rgba(255, 255, 255, 0.1) 100%
56
+ );
57
+ }
58
+ }
59
+ &.ax-info-default {
60
+ input {
61
+ background: linear-gradient(
62
+ to right,
63
+ rgb(var(--ax-color-info-800)) 0%,
64
+ rgb(var(--ax-color-info-800)) var(--ax-current-value),
65
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
66
+ rgba(255, 255, 255, 0.1) 100%
67
+ );
68
+ }
69
+ }
70
+ &.ax-light-default {
71
+ input {
72
+ background: linear-gradient(
73
+ to right,
74
+ rgb(var(--ax-color-light-600)) 0%,
75
+ rgb(var(--ax-color-light-600)) var(--ax-current-value),
76
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
77
+ rgba(255, 255, 255, 0.1) 100%
78
+ );
79
+ }
80
+ }
81
+ &.ax-dark-default {
82
+ input {
83
+ background: linear-gradient(
84
+ to right,
85
+ rgb(var(--ax-color-dark-200)) 0%,
86
+ rgb(var(--ax-color-dark-200)) var(--ax-current-value),
87
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
88
+ rgba(255, 255, 255, 0.1) 100%
89
+ );
90
+ }
91
+ }
92
+ }
93
+ }
94
+ .ax-range-slider {
3
95
  @apply ax-w-full;
4
- --ax-current-value:0%;
96
+ --ax-current-value: 0%;
5
97
  input {
6
- @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-light-600;
98
+ @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-200 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-white/10;
7
99
  &::-webkit-slider-thumb {
8
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
100
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
9
101
  }
10
102
  &::-moz-range-thumb {
11
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
103
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
12
104
  }
13
-
14
105
  }
15
106
 
16
- &.ax-primary-default
17
- {
107
+ &.ax-primary-default {
18
108
  input {
19
- background: linear-gradient(to right, rgb(var(--ax-color-primary-500)) 0%, rgb(var(--ax-color-primary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
109
+ background: linear-gradient(
110
+ to right,
111
+ rgb(var(--ax-color-primary-500)) 0%,
112
+ rgb(var(--ax-color-primary-500)) var(--ax-current-value),
113
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
114
+ rgb(var(--ax-color-light-100)) 100%
115
+ );
20
116
  }
21
117
  }
22
118
 
23
- &.ax-secondary-default
24
- {
119
+ &.ax-secondary-default {
25
120
  input {
26
- background: linear-gradient(to right, rgb(var(--ax-color-secondary-500)) 0%, rgb(var(--ax-color-secondary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
121
+ background: linear-gradient(
122
+ to right,
123
+ rgb(var(--ax-color-secondary-500)) 0%,
124
+ rgb(var(--ax-color-secondary-500)) var(--ax-current-value),
125
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
126
+ rgb(var(--ax-color-light-100)) 100%
127
+ );
27
128
  }
28
129
  }
29
130
 
30
- &.ax-danger-default
31
- {
131
+ &.ax-danger-default {
32
132
  input {
33
- background: linear-gradient(to right, rgb(var(--ax-color-danger-500)) 0%, rgb(var(--ax-color-danger-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
133
+ background: linear-gradient(
134
+ to right,
135
+ rgb(var(--ax-color-danger-500)) 0%,
136
+ rgb(var(--ax-color-danger-500)) var(--ax-current-value),
137
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
138
+ rgb(var(--ax-color-light-100)) 100%
139
+ );
34
140
  }
35
141
  }
36
142
 
37
- &.ax-success-default
38
- {
143
+ &.ax-success-default {
39
144
  input {
40
- background: linear-gradient(to right, rgb(var(--ax-color-success-500)) 0%, rgb(var(--ax-color-success-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
145
+ background: linear-gradient(
146
+ to right,
147
+ rgb(var(--ax-color-success-500)) 0%,
148
+ rgb(var(--ax-color-success-500)) var(--ax-current-value),
149
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
150
+ rgb(var(--ax-color-light-100)) 100%
151
+ );
41
152
  }
42
153
  }
43
154
 
44
- &.ax-warning-default
45
- {
155
+ &.ax-warning-default {
46
156
  input {
47
- background: linear-gradient(to right, rgb(var(--ax-color-warning-500)) 0%, rgb(var(--ax-color-warning-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
157
+ background: linear-gradient(
158
+ to right,
159
+ rgb(var(--ax-color-warning-500)) 0%,
160
+ rgb(var(--ax-color-warning-500)) var(--ax-current-value),
161
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
162
+ rgb(var(--ax-color-light-100)) 100%
163
+ );
48
164
  }
49
165
  }
50
166
 
51
- &.ax-info-default
52
- {
167
+ &.ax-info-default {
53
168
  input {
54
- background: linear-gradient(to right, rgb(var(--ax-color-info-500)) 0%, rgb(var(--ax-color-info-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
169
+ background: linear-gradient(
170
+ to right,
171
+ rgb(var(--ax-color-info-500)) 0%,
172
+ rgb(var(--ax-color-info-500)) var(--ax-current-value),
173
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
174
+ rgb(var(--ax-color-light-100)) 100%
175
+ );
55
176
  }
56
177
  }
57
178
 
58
- &.ax-light-default
59
- {
179
+ &.ax-light-default {
60
180
  input {
61
- background: linear-gradient(to right, rgb(var(--ax-color-light-500)) 0%, rgb(var(--ax-color-light-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
181
+ background: linear-gradient(
182
+ to right,
183
+ rgb(var(--ax-color-light-500)) 0%,
184
+ rgb(var(--ax-color-light-500)) var(--ax-current-value),
185
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
186
+ rgb(var(--ax-color-light-100)) 100%
187
+ );
62
188
  }
63
189
  }
64
190
 
65
- &.ax-dark-default
66
- {
191
+ &.ax-dark-default {
67
192
  input {
68
- background: linear-gradient(to right, rgb(var(--ax-color-dark-500)) 0%, rgb(var(--ax-color-dark-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
193
+ background: linear-gradient(
194
+ to right,
195
+ rgb(var(--ax-color-dark-500)) 0%,
196
+ rgb(var(--ax-color-dark-500)) var(--ax-current-value),
197
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
198
+ rgb(var(--ax-color-light-100)) 100%
199
+ );
69
200
  }
70
201
  }
71
202
  }
72
- }
203
+ }