nanoui 0.4.0 → 0.6.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 (42) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/README.md +353 -15
  4. data/lib/generators/nanoui/component_generator.rb +49 -14
  5. data/lib/generators/nanoui/templates/css/components/accordion.css +58 -58
  6. data/lib/generators/nanoui/templates/css/components/alert.css +56 -56
  7. data/lib/generators/nanoui/templates/css/components/avatar.css +88 -0
  8. data/lib/generators/nanoui/templates/css/components/badge.css +30 -30
  9. data/lib/generators/nanoui/templates/css/components/breadcrumb.css +54 -0
  10. data/lib/generators/nanoui/templates/css/components/button.css +136 -115
  11. data/lib/generators/nanoui/templates/css/components/card.css +35 -35
  12. data/lib/generators/nanoui/templates/css/components/checkbox.css +74 -72
  13. data/lib/generators/nanoui/templates/css/components/checklist.css +133 -0
  14. data/lib/generators/nanoui/templates/css/components/code.css +80 -0
  15. data/lib/generators/nanoui/templates/css/components/copy.css +71 -0
  16. data/lib/generators/nanoui/templates/css/components/dialog.css +103 -103
  17. data/lib/generators/nanoui/templates/css/components/dropdown.css +71 -71
  18. data/lib/generators/nanoui/templates/css/components/empty.css +68 -0
  19. data/lib/generators/nanoui/templates/css/components/input.css +72 -83
  20. data/lib/generators/nanoui/templates/css/components/label.css +11 -5
  21. data/lib/generators/nanoui/templates/css/components/navbar.css +128 -0
  22. data/lib/generators/nanoui/templates/css/components/progress.css +53 -47
  23. data/lib/generators/nanoui/templates/css/components/radio.css +73 -71
  24. data/lib/generators/nanoui/templates/css/components/select.css +49 -22
  25. data/lib/generators/nanoui/templates/css/components/sidebar.css +145 -0
  26. data/lib/generators/nanoui/templates/css/components/skeleton.css +49 -0
  27. data/lib/generators/nanoui/templates/css/components/stat.css +91 -0
  28. data/lib/generators/nanoui/templates/css/components/switch.css +25 -25
  29. data/lib/generators/nanoui/templates/css/components/table.css +169 -29
  30. data/lib/generators/nanoui/templates/css/components/tabs.css +20 -20
  31. data/lib/generators/nanoui/templates/css/components/timeline.css +141 -0
  32. data/lib/generators/nanoui/templates/css/components/toast.css +119 -68
  33. data/lib/generators/nanoui/templates/css/components/tooltip.css +79 -72
  34. data/lib/generators/nanoui/templates/css/components/upload.css +161 -0
  35. data/lib/generators/nanoui/templates/css/layout/container.css +6 -6
  36. data/lib/generators/nanoui/templates/js/controllers/copy_controller.js +64 -0
  37. data/lib/generators/nanoui/templates/js/controllers/data_table_controller.js +75 -0
  38. data/lib/generators/nanoui/templates/js/controllers/navbar_controller.js +70 -0
  39. data/lib/generators/nanoui/templates/js/controllers/sidebar_controller.js +27 -0
  40. data/lib/generators/nanoui/templates/js/controllers/upload_controller.js +137 -0
  41. data/lib/nanoui/version.rb +1 -1
  42. metadata +47 -2
data/lib/generators/nanoui/templates/css/components/dropdown.css CHANGED
@@ -1,84 +1,84 @@
1
1
  .nano-dropdown {
2
2
  position: relative;
3
3
  display: inline-flex;
4
- }
5
4
 
6
- .nano-dropdown__trigger {
7
- cursor: pointer;
8
- }
5
+ .nano-dropdown__trigger {
6
+ cursor: pointer;
7
+ }
9
8
 
10
- .nano-dropdown__content {
11
- position: absolute;
12
- top: 100%;
13
- left: 0;
14
- z-index: var(--z-dropdown);
15
- min-width: 12rem;
16
- margin-top: var(--space-1);
17
- padding: var(--space-1);
18
- background-color: hsl(var(--color-popover));
19
- color: hsl(var(--color-popover-foreground));
20
- border: 1px solid hsl(var(--color-border));
21
- border-radius: var(--radius-md);
22
- box-shadow: var(--shadow-md);
23
- opacity: 0;
24
- transform: translateY(-0.25rem);
25
- pointer-events: none;
26
- transition: opacity var(--duration-fast) var(--ease-default),
27
- transform var(--duration-fast) var(--ease-default);
28
- }
9
+ .nano-dropdown__content {
10
+ position: absolute;
11
+ top: 100%;
12
+ left: 0;
13
+ z-index: var(--z-dropdown);
14
+ min-width: 12rem;
15
+ margin-top: var(--space-1);
16
+ padding: var(--space-1);
17
+ background-color: hsl(var(--color-popover));
18
+ color: hsl(var(--color-popover-foreground));
19
+ border: 1px solid hsl(var(--color-border));
20
+ border-radius: var(--radius-md);
21
+ box-shadow: var(--shadow-md);
22
+ opacity: 0;
23
+ transform: translateY(-0.25rem);
24
+ pointer-events: none;
25
+ transition: opacity var(--duration-fast) var(--ease-default),
26
+ transform var(--duration-fast) var(--ease-default);
29
27
 
30
- .nano-dropdown__content.is-open {
31
- opacity: 1;
32
- transform: translateY(0);
33
- pointer-events: auto;
34
- }
28
+ &.is-open {
29
+ opacity: 1;
30
+ transform: translateY(0);
31
+ pointer-events: auto;
32
+ }
33
+ }
35
34
 
36
- .nano-dropdown__item {
37
- display: flex;
38
- align-items: center;
39
- gap: var(--space-2);
40
- width: 100%;
41
- padding: var(--space-1-5) var(--space-2);
42
- font-size: var(--text-sm);
43
- line-height: var(--leading-normal);
44
- color: hsl(var(--color-foreground));
45
- background: none;
46
- border: none;
47
- border-radius: var(--radius-sm);
48
- cursor: pointer;
49
- text-align: left;
50
- text-decoration: none;
51
- transition: background-color var(--duration-fast) var(--ease-default);
52
- }
35
+ .nano-dropdown__item {
36
+ display: flex;
37
+ align-items: center;
38
+ gap: var(--space-2);
39
+ width: 100%;
40
+ padding: var(--space-1-5) var(--space-2);
41
+ font-size: var(--text-sm);
42
+ line-height: var(--leading-normal);
43
+ color: hsl(var(--color-foreground));
44
+ background: none;
45
+ border: none;
46
+ border-radius: var(--radius-sm);
47
+ cursor: pointer;
48
+ text-align: left;
49
+ text-decoration: none;
50
+ transition: background-color var(--duration-fast) var(--ease-default);
53
51
 
54
- .nano-dropdown__item:hover,
55
- .nano-dropdown__item:focus-visible {
56
- background-color: hsl(var(--color-muted));
57
- outline: none;
58
- }
52
+ &:hover,
53
+ &:focus-visible {
54
+ background-color: hsl(var(--color-muted));
55
+ outline: none;
56
+ }
59
57
 
60
- .nano-dropdown__item[aria-disabled="true"],
61
- .nano-dropdown__item:disabled {
62
- opacity: 0.5;
63
- pointer-events: none;
64
- }
58
+ &[aria-disabled="true"],
59
+ &:disabled {
60
+ opacity: 0.5;
61
+ pointer-events: none;
62
+ }
65
63
 
66
- .nano-dropdown__item svg {
67
- width: 1rem;
68
- height: 1rem;
69
- flex-shrink: 0;
70
- color: hsl(var(--color-muted-foreground));
71
- }
64
+ svg {
65
+ width: 1rem;
66
+ height: 1rem;
67
+ flex-shrink: 0;
68
+ color: hsl(var(--color-muted-foreground));
69
+ }
70
+ }
72
71
 
73
- .nano-dropdown__separator {
74
- height: 1px;
75
- margin: var(--space-1) calc(-1 * var(--space-1));
76
- background-color: hsl(var(--color-border));
77
- }
72
+ .nano-dropdown__separator {
73
+ height: 1px;
74
+ margin: var(--space-1) calc(-1 * var(--space-1));
75
+ background-color: hsl(var(--color-border));
76
+ }
78
77
 
79
- .nano-dropdown__label {
80
- padding: var(--space-1-5) var(--space-2);
81
- font-size: var(--text-xs);
82
- font-weight: var(--font-semibold);
83
- color: hsl(var(--color-muted-foreground));
78
+ .nano-dropdown__label {
79
+ padding: var(--space-1-5) var(--space-2);
80
+ font-size: var(--text-xs);
81
+ font-weight: var(--font-semibold);
82
+ color: hsl(var(--color-muted-foreground));
83
+ }
84
84
  }
data/lib/generators/nanoui/templates/css/components/empty.css ADDED
@@ -0,0 +1,68 @@
1
+ .nano-empty {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: center;
5
+ justify-content: center;
6
+ text-align: center;
7
+ gap: var(--space-3);
8
+ padding: var(--space-12) var(--space-6);
9
+ color: hsl(var(--color-foreground));
10
+
11
+ .nano-empty__icon {
12
+ display: inline-flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ width: 3rem;
16
+ height: 3rem;
17
+ margin-bottom: var(--space-2);
18
+ border-radius: var(--radius-full);
19
+ background-color: hsl(var(--color-muted));
20
+ color: hsl(var(--color-muted-foreground));
21
+
22
+ svg {
23
+ width: 1.5rem;
24
+ height: 1.5rem;
25
+ }
26
+ }
27
+
28
+ .nano-empty__title {
29
+ font-size: var(--text-lg);
30
+ font-weight: var(--font-semibold);
31
+ line-height: var(--leading-tight);
32
+ }
33
+
34
+ .nano-empty__description {
35
+ font-size: var(--text-sm);
36
+ color: hsl(var(--color-muted-foreground));
37
+ line-height: var(--leading-normal);
38
+ max-width: 28rem;
39
+ }
40
+
41
+ .nano-empty__actions {
42
+ display: flex;
43
+ gap: var(--space-2);
44
+ margin-top: var(--space-2);
45
+ flex-wrap: wrap;
46
+ justify-content: center;
47
+ }
48
+
49
+ &--bordered {
50
+ border: 1px dashed hsl(var(--color-border));
51
+ border-radius: var(--radius-lg);
52
+ }
53
+
54
+ &--compact {
55
+ padding: var(--space-6) var(--space-4);
56
+
57
+ .nano-empty__icon {
58
+ width: 2.5rem;
59
+ height: 2.5rem;
60
+ margin-bottom: var(--space-1);
61
+
62
+ svg {
63
+ width: 1.25rem;
64
+ height: 1.25rem;
65
+ }
66
+ }
67
+ }
68
+ }
data/lib/generators/nanoui/templates/css/components/input.css CHANGED
@@ -1,4 +1,44 @@
1
- .nano-input,
1
+ .nano-input {
2
+ display: block;
3
+ width: 100%;
4
+ padding: var(--space-2) var(--space-3);
5
+ font-size: var(--text-sm);
6
+ font-family: var(--font-sans);
7
+ line-height: var(--leading-normal);
8
+ color: hsl(var(--color-foreground));
9
+ background-color: hsl(var(--color-background));
10
+ border: 1px solid hsl(var(--color-input));
11
+ border-radius: var(--radius-md);
12
+ transition: border-color var(--duration-fast) var(--ease-default),
13
+ box-shadow var(--duration-fast) var(--ease-default);
14
+
15
+ &::placeholder {
16
+ color: hsl(var(--color-muted-foreground));
17
+ }
18
+
19
+ &:focus {
20
+ border-color: hsl(var(--color-input-focus));
21
+ outline: 2px solid hsl(var(--color-input-focus));
22
+ outline-offset: -1px;
23
+ }
24
+
25
+ &:disabled {
26
+ opacity: 0.5;
27
+ cursor: not-allowed;
28
+ }
29
+
30
+ &--error,
31
+ &[aria-invalid="true"] {
32
+ border-color: hsl(var(--color-destructive));
33
+
34
+ &:focus {
35
+ border-color: hsl(var(--color-destructive));
36
+ outline: 2px solid hsl(var(--color-destructive));
37
+ outline-offset: -1px;
38
+ }
39
+ }
40
+ }
41
+
2
42
  input[type="text"],
3
43
  input[type="email"],
4
44
  input[type="password"],
@@ -24,72 +64,21 @@ textarea {
24
64
  border-radius: var(--radius-md);
25
65
  transition: border-color var(--duration-fast) var(--ease-default),
26
66
  box-shadow var(--duration-fast) var(--ease-default);
27
- }
28
67
 
29
- .nano-input::placeholder,
30
- input[type="text"]::placeholder,
31
- input[type="email"]::placeholder,
32
- input[type="password"]::placeholder,
33
- input[type="search"]::placeholder,
34
- input[type="tel"]::placeholder,
35
- input[type="url"]::placeholder,
36
- input[type="number"]::placeholder,
37
- input[type="date"]::placeholder,
38
- input[type="datetime-local"]::placeholder,
39
- input[type="month"]::placeholder,
40
- input[type="week"]::placeholder,
41
- input[type="time"]::placeholder,
42
- textarea::placeholder {
43
- color: hsl(var(--color-muted-foreground));
44
- }
45
-
46
- .nano-input:focus,
47
- input[type="text"]:focus,
48
- input[type="email"]:focus,
49
- input[type="password"]:focus,
50
- input[type="search"]:focus,
51
- input[type="tel"]:focus,
52
- input[type="url"]:focus,
53
- input[type="number"]:focus,
54
- input[type="date"]:focus,
55
- input[type="datetime-local"]:focus,
56
- input[type="month"]:focus,
57
- input[type="week"]:focus,
58
- input[type="time"]:focus,
59
- textarea:focus {
60
- border-color: hsl(var(--color-input-focus));
61
- outline: 2px solid hsl(var(--color-input-focus));
62
- outline-offset: -1px;
63
- }
68
+ &::placeholder {
69
+ color: hsl(var(--color-muted-foreground));
70
+ }
64
71
 
65
- .nano-input:disabled,
66
- input[type="text"]:disabled,
67
- input[type="email"]:disabled,
68
- input[type="password"]:disabled,
69
- input[type="search"]:disabled,
70
- input[type="tel"]:disabled,
71
- input[type="url"]:disabled,
72
- input[type="number"]:disabled,
73
- input[type="date"]:disabled,
74
- input[type="datetime-local"]:disabled,
75
- input[type="month"]:disabled,
76
- input[type="week"]:disabled,
77
- input[type="time"]:disabled,
78
- textarea:disabled {
79
- opacity: 0.5;
80
- cursor: not-allowed;
81
- }
72
+ &:focus {
73
+ border-color: hsl(var(--color-input-focus));
74
+ outline: 2px solid hsl(var(--color-input-focus));
75
+ outline-offset: -1px;
76
+ }
82
77
 
83
- .nano-input--error,
84
- .nano-input[aria-invalid="true"] {
85
- border-color: hsl(var(--color-destructive));
86
- }
87
-
88
- .nano-input--error:focus,
89
- .nano-input[aria-invalid="true"]:focus {
90
- border-color: hsl(var(--color-destructive));
91
- outline: 2px solid hsl(var(--color-destructive));
92
- outline-offset: -1px;
78
+ &:disabled {
79
+ opacity: 0.5;
80
+ cursor: not-allowed;
81
+ }
93
82
  }
94
83
 
95
84
  textarea.nano-input,
@@ -102,32 +91,32 @@ textarea {
102
91
  display: flex;
103
92
  flex-direction: column;
104
93
  gap: var(--space-1-5);
105
- }
106
94
 
107
- .nano-field__error {
108
- font-size: var(--text-sm);
109
- color: hsl(var(--color-destructive));
95
+ .nano-field__error {
96
+ font-size: var(--text-sm);
97
+ color: hsl(var(--color-destructive));
98
+ }
110
99
  }
111
100
 
112
101
  .nano-input-group {
113
102
  display: flex;
114
103
  align-items: stretch;
115
- }
116
104
 
117
- .nano-input-group .nano-input,
118
- .nano-input-group .nano-btn {
119
- min-height: 2.5rem;
120
- }
105
+ .nano-input,
106
+ .nano-btn {
107
+ min-height: 2.5rem;
108
+ }
121
109
 
122
- .nano-input-group .nano-input {
123
- flex: 1 1 auto;
124
- min-width: 0;
125
- border-top-right-radius: 0;
126
- border-bottom-right-radius: 0;
127
- }
110
+ .nano-input {
111
+ flex: 1 1 auto;
112
+ min-width: 0;
113
+ border-top-right-radius: 0;
114
+ border-bottom-right-radius: 0;
115
+ }
128
116
 
129
- .nano-input-group .nano-btn {
130
- flex: 0 0 auto;
131
- border-top-left-radius: 0;
132
- border-bottom-left-radius: 0;
117
+ .nano-btn {
118
+ flex: 0 0 auto;
119
+ border-top-left-radius: 0;
120
+ border-bottom-left-radius: 0;
121
+ }
133
122
  }
data/lib/generators/nanoui/templates/css/components/label.css CHANGED
@@ -1,12 +1,18 @@
1
- .nano-label,
2
- label {
1
+ .nano-label {
3
2
  font-size: var(--text-sm);
4
3
  font-weight: var(--font-medium);
5
4
  line-height: var(--leading-none);
6
5
  color: hsl(var(--color-foreground));
6
+
7
+ &--required::after {
8
+ content: " *";
9
+ color: hsl(var(--color-destructive));
10
+ }
7
11
  }
8
12
 
9
- .nano-label--required::after {
10
- content: " *";
11
- color: hsl(var(--color-destructive));
13
+ label {
14
+ font-size: var(--text-sm);
15
+ font-weight: var(--font-medium);
16
+ line-height: var(--leading-none);
17
+ color: hsl(var(--color-foreground));
12
18
  }
data/lib/generators/nanoui/templates/css/components/navbar.css ADDED
@@ -0,0 +1,128 @@
1
+ .nano-navbar {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: var(--space-4);
5
+ padding: var(--space-3) var(--space-6);
6
+ background-color: hsl(var(--color-background));
7
+ border-bottom: 1px solid hsl(var(--color-border));
8
+
9
+ &--sticky {
10
+ position: sticky;
11
+ top: 0;
12
+ z-index: var(--z-sticky);
13
+ }
14
+
15
+ .nano-navbar__brand {
16
+ display: flex;
17
+ align-items: center;
18
+ gap: var(--space-2);
19
+ font-weight: var(--font-bold);
20
+ font-size: var(--text-base);
21
+ color: hsl(var(--color-foreground));
22
+ text-decoration: none;
23
+ flex-shrink: 0;
24
+ }
25
+
26
+ .nano-navbar__links {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: var(--space-1);
30
+ list-style: none;
31
+ margin: 0;
32
+ padding: 0;
33
+ }
34
+
35
+ .nano-navbar__link {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ padding: var(--space-1-5) var(--space-3);
39
+ font-size: var(--text-sm);
40
+ font-weight: var(--font-medium);
41
+ color: hsl(var(--color-muted-foreground));
42
+ text-decoration: none;
43
+ border-radius: var(--radius-md);
44
+ transition: color var(--duration-fast) var(--ease-default),
45
+ background-color var(--duration-fast) var(--ease-default);
46
+
47
+ &:hover {
48
+ color: hsl(var(--color-foreground));
49
+ background-color: hsl(var(--color-muted));
50
+ }
51
+
52
+ &:focus-visible {
53
+ outline: 2px solid hsl(var(--color-ring));
54
+ outline-offset: 2px;
55
+ }
56
+
57
+ &--active {
58
+ color: hsl(var(--color-foreground));
59
+ background-color: hsl(var(--color-muted));
60
+ }
61
+ }
62
+
63
+ .nano-navbar__actions {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--space-2);
67
+ margin-left: auto;
68
+ }
69
+
70
+ .nano-navbar__toggle {
71
+ display: none;
72
+ align-items: center;
73
+ justify-content: center;
74
+ width: 2rem;
75
+ height: 2rem;
76
+ padding: 0;
77
+ border: none;
78
+ border-radius: var(--radius-md);
79
+ background-color: transparent;
80
+ color: hsl(var(--color-foreground));
81
+ cursor: pointer;
82
+ transition: background-color var(--duration-fast) var(--ease-default);
83
+
84
+ &:hover {
85
+ background-color: hsl(var(--color-muted));
86
+ }
87
+
88
+ &:focus-visible {
89
+ outline: 2px solid hsl(var(--color-ring));
90
+ outline-offset: 2px;
91
+ }
92
+
93
+ svg {
94
+ width: 1.25rem;
95
+ height: 1.25rem;
96
+ }
97
+ }
98
+
99
+ @media (max-width: 768px) {
100
+ flex-wrap: wrap;
101
+
102
+ .nano-navbar__toggle {
103
+ display: inline-flex;
104
+ }
105
+
106
+ .nano-navbar__links {
107
+ display: none;
108
+ flex-direction: column;
109
+ align-items: stretch;
110
+ width: 100%;
111
+ order: 99;
112
+ padding-top: var(--space-2);
113
+ border-top: 1px solid hsl(var(--color-border));
114
+
115
+ &.is-open {
116
+ display: flex;
117
+ }
118
+ }
119
+
120
+ .nano-navbar__link {
121
+ width: 100%;
122
+ }
123
+
124
+ .nano-navbar__actions {
125
+ margin-left: auto;
126
+ }
127
+ }
128
+ }
data/lib/generators/nanoui/templates/css/components/progress.css CHANGED
@@ -2,62 +2,68 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--space-1-5);
5
- }
6
5
 
7
- .nano-progress__bar {
8
- display: block;
9
- width: 100%;
10
- height: 0.625rem;
11
- border-radius: var(--radius-full);
12
- border: none;
13
- overflow: hidden;
14
- appearance: none;
15
- background-color: hsl(var(--color-muted));
16
- }
6
+ .nano-progress__bar {
7
+ display: block;
8
+ width: 100%;
9
+ height: 0.625rem;
10
+ border-radius: var(--radius-full);
11
+ border: none;
12
+ overflow: hidden;
13
+ appearance: none;
14
+ background-color: hsl(var(--color-muted));
17
15
 
18
- .nano-progress__bar::-webkit-progress-bar {
19
- background-color: hsl(var(--color-muted));
20
- border-radius: var(--radius-full);
21
- }
16
+ &::-webkit-progress-bar {
17
+ background-color: hsl(var(--color-muted));
18
+ border-radius: var(--radius-full);
19
+ }
22
20
 
23
- .nano-progress__bar::-webkit-progress-value {
24
- background-color: hsl(var(--color-primary));
25
- border-radius: var(--radius-full);
26
- transition: width var(--duration-slow) var(--ease-default);
27
- }
21
+ &::-webkit-progress-value {
22
+ background-color: hsl(var(--color-primary));
23
+ border-radius: var(--radius-full);
24
+ transition: width var(--duration-slow) var(--ease-default);
25
+ }
28
26
 
29
- .nano-progress__bar::-moz-progress-bar {
30
- background-color: hsl(var(--color-primary));
31
- border-radius: var(--radius-full);
32
- }
27
+ &::-moz-progress-bar {
28
+ background-color: hsl(var(--color-primary));
29
+ border-radius: var(--radius-full);
30
+ }
31
+ }
33
32
 
34
- .nano-progress__label {
35
- font-size: var(--text-xs);
36
- font-weight: var(--font-medium);
37
- color: hsl(var(--color-muted-foreground));
38
- text-align: right;
39
- }
33
+ .nano-progress__label {
34
+ font-size: var(--text-xs);
35
+ font-weight: var(--font-medium);
36
+ color: hsl(var(--color-muted-foreground));
37
+ text-align: right;
38
+ }
40
39
 
41
- .nano-progress--success .nano-progress__bar::-webkit-progress-value {
42
- background-color: hsl(var(--color-success));
43
- }
40
+ &--success {
41
+ .nano-progress__bar::-webkit-progress-value {
42
+ background-color: hsl(var(--color-success));
43
+ }
44
44
 
45
- .nano-progress--success .nano-progress__bar::-moz-progress-bar {
46
- background-color: hsl(var(--color-success));
47
- }
45
+ .nano-progress__bar::-moz-progress-bar {
46
+ background-color: hsl(var(--color-success));
47
+ }
48
+ }
48
49
 
49
- .nano-progress--warning .nano-progress__bar::-webkit-progress-value {
50
- background-color: hsl(var(--color-warning));
51
- }
50
+ &--warning {
51
+ .nano-progress__bar::-webkit-progress-value {
52
+ background-color: hsl(var(--color-warning));
53
+ }
52
54
 
53
- .nano-progress--warning .nano-progress__bar::-moz-progress-bar {
54
- background-color: hsl(var(--color-warning));
55
- }
55
+ .nano-progress__bar::-moz-progress-bar {
56
+ background-color: hsl(var(--color-warning));
57
+ }
58
+ }
56
59
 
57
- .nano-progress--destructive .nano-progress__bar::-webkit-progress-value {
58
- background-color: hsl(var(--color-destructive));
59
- }
60
+ &--destructive {
61
+ .nano-progress__bar::-webkit-progress-value {
62
+ background-color: hsl(var(--color-destructive));
63
+ }
60
64
 
61
- .nano-progress--destructive .nano-progress__bar::-moz-progress-bar {
62
- background-color: hsl(var(--color-destructive));
65
+ .nano-progress__bar::-moz-progress-bar {
66
+ background-color: hsl(var(--color-destructive));
67
+ }
68
+ }
63
69
  }