@aristobyte-ui/spinner 2.9.1 → 2.10.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 (3) hide show
  1. package/es/components/Spinner/Spinner.scss +64 -123
  2. package/lib/components/Spinner/Spinner.scss +64 -123
  3. package/package.json +2 -2
package/es/components/Spinner/Spinner.scss CHANGED
@@ -32,6 +32,39 @@
32
32
  }
33
33
  }
34
34
 
35
+ @mixin spinner-variant-default($name, $color) {
36
+ .spinner-type--default.spinner-variant--#{$name} {
37
+ border: 3px solid rgba($color, 0.25);
38
+ border-top-color: rgba($color, 1);
39
+ }
40
+ }
41
+
42
+ @mixin spinner-variant-duo($name, $color) {
43
+ .spinner-type--duo.spinner-variant--#{$name} {
44
+ border-bottom-color: rgba($color, 1);
45
+ border-top-color: rgba($color, 1);
46
+ }
47
+ }
48
+
49
+ @mixin spinner-variant-gradient($name, $color) {
50
+ .spinner-type--gradient.spinner-variant--#{$name} {
51
+ border-top: 3px solid rgba($color, 1);
52
+ }
53
+ }
54
+
55
+ @mixin spinner-variant-pulse($name, $color) {
56
+ .spinner-type--pulse.spinner-variant--#{$name} {
57
+ background-color: $color;
58
+ }
59
+ }
60
+
61
+ @mixin spinner-variant-pulse-duo($name, $color) {
62
+ .spinner-type--pulse-duo.spinner-variant--#{$name}::after,
63
+ .spinner-type--pulse-duo.spinner-variant--#{$name}::before {
64
+ background-color: $color;
65
+ }
66
+ }
67
+
35
68
  .spinner {
36
69
  &-size {
37
70
  &--xsm {
@@ -64,152 +97,29 @@
64
97
  &--default {
65
98
  animation: rotation 800ms ease infinite;
66
99
  border-radius: 50%;
67
-
68
- &.spinner-variant {
69
- &--default {
70
- border: 3px solid rgba($color-default, 0.25);
71
- border-top-color: rgba($color-default, 1);
72
- }
73
- &--primary {
74
- border: 3px solid rgba($color-primary, 0.25);
75
- border-top-color: rgba($color-primary, 1);
76
- }
77
- &--secondary {
78
- border: 3px solid rgba($color-secondary, 0.25);
79
- border-top-color: rgba($color-secondary, 1);
80
- }
81
- &--success {
82
- border: 3px solid rgba($color-success, 0.25);
83
- border-top-color: rgba($color-success, 1);
84
- }
85
- &--error {
86
- border: 3px solid rgba($color-error, 0.25);
87
- border-top-color: rgba($color-error, 1);
88
- }
89
- &--warning {
90
- border: 3px solid rgba($color-warning, 0.25);
91
- border-top-color: rgba($color-warning, 1);
92
- }
93
- }
94
100
  }
95
101
 
96
102
  &--duo {
97
103
  animation: rotation 800ms ease infinite;
98
104
  border: 3px solid transparent;
99
105
  border-radius: 50%;
100
-
101
- &.spinner-variant {
102
- &--default {
103
- border-bottom-color: rgba($color-default, 1);
104
- border-top-color: rgba($color-default, 1);
105
- }
106
- &--primary {
107
- border-bottom-color: rgba($color-primary, 1);
108
- border-top-color: rgba($color-primary, 1);
109
- }
110
- &--secondary {
111
- border-bottom-color: rgba($color-secondary, 1);
112
- border-top-color: rgba($color-secondary, 1);
113
- }
114
- &--success {
115
- border-bottom-color: rgba($color-success, 1);
116
- border-top-color: rgba($color-success, 1);
117
- }
118
- &--error {
119
- border-bottom-color: rgba($color-error, 1);
120
- border-top-color: rgba($color-error, 1);
121
- }
122
- &--warning {
123
- border-bottom-color: rgba($color-warning, 1);
124
- border-top-color: rgba($color-warning, 1);
125
- }
126
- }
127
106
  }
128
107
 
129
108
  &--gradient {
130
109
  animation: rotation 800ms linear infinite;
131
110
  border-right: 3px solid transparent;
132
111
  border-radius: 50%;
133
-
134
- &.spinner-variant {
135
- &--default {
136
- border-top: 3px solid rgba($color-default, 1);
137
- }
138
- &--primary {
139
- border-top: 3px solid rgba($color-primary, 1);
140
- }
141
- &--secondary {
142
- border-top: 3px solid rgba($color-secondary, 1);
143
- }
144
- &--success {
145
- border-top: 3px solid rgba($color-success, 1);
146
- }
147
- &--error {
148
- border-top: 3px solid rgba($color-error, 1);
149
- }
150
- &--warning {
151
- border-top: 3px solid rgba($color-warning, 1);
152
- }
153
- }
154
112
  }
155
113
 
156
114
  &--pulse {
157
115
  animation: pulse 1s ease-in-out infinite;
158
116
  border-radius: 50%;
159
117
  position: relative;
160
-
161
- &.spinner-variant {
162
- &--default {
163
- background-color: $color-default;
164
- }
165
- &--primary {
166
- background-color: $color-primary;
167
- }
168
- &--secondary {
169
- background-color: $color-secondary;
170
- }
171
- &--success {
172
- background-color: $color-success;
173
- }
174
- &--error {
175
- background-color: $color-error;
176
- }
177
- &--warning {
178
- background-color: $color-warning;
179
- }
180
- }
181
118
  }
182
119
 
183
120
  &--pulse-duo {
184
121
  position: relative;
185
122
 
186
- &.spinner-variant {
187
- &--default::after,
188
- &--default::before {
189
- background-color: $color-default;
190
- }
191
- &--primary::after,
192
- &--primary::before {
193
- background-color: $color-primary;
194
- }
195
- &--secondary::after,
196
- &--secondary::before {
197
- background-color: $color-secondary;
198
- }
199
- &--success::after,
200
- &--success::before {
201
- background-color: $color-success;
202
- }
203
- &--error::after,
204
- &--error::before {
205
- background-color: $color-error;
206
- }
207
- &--warning::after,
208
- &--warning::before {
209
- background-color: $color-warning;
210
- }
211
- }
212
-
213
123
  &::before,
214
124
  &::after {
215
125
  content: '';
@@ -230,3 +140,34 @@
230
140
  }
231
141
  }
232
142
  }
143
+
144
+ @include spinner-variant-default('default', $color-default);
145
+ @include spinner-variant-default('primary', $color-primary);
146
+ @include spinner-variant-default('secondary', $color-secondary);
147
+ @include spinner-variant-default('success', $color-success);
148
+ @include spinner-variant-default('error', $color-error);
149
+ @include spinner-variant-default('warning', $color-warning);
150
+ @include spinner-variant-duo('default', $color-default);
151
+ @include spinner-variant-duo('primary', $color-primary);
152
+ @include spinner-variant-duo('secondary', $color-secondary);
153
+ @include spinner-variant-duo('success', $color-success);
154
+ @include spinner-variant-duo('error', $color-error);
155
+ @include spinner-variant-duo('warning', $color-warning);
156
+ @include spinner-variant-gradient('default', $color-default);
157
+ @include spinner-variant-gradient('primary', $color-primary);
158
+ @include spinner-variant-gradient('secondary', $color-secondary);
159
+ @include spinner-variant-gradient('success', $color-success);
160
+ @include spinner-variant-gradient('error', $color-error);
161
+ @include spinner-variant-gradient('warning', $color-warning);
162
+ @include spinner-variant-pulse('default', $color-default);
163
+ @include spinner-variant-pulse('primary', $color-primary);
164
+ @include spinner-variant-pulse('secondary', $color-secondary);
165
+ @include spinner-variant-pulse('success', $color-success);
166
+ @include spinner-variant-pulse('error', $color-error);
167
+ @include spinner-variant-pulse('warning', $color-warning);
168
+ @include spinner-variant-pulse-duo('default', $color-default);
169
+ @include spinner-variant-pulse-duo('primary', $color-primary);
170
+ @include spinner-variant-pulse-duo('secondary', $color-secondary);
171
+ @include spinner-variant-pulse-duo('success', $color-success);
172
+ @include spinner-variant-pulse-duo('error', $color-error);
173
+ @include spinner-variant-pulse-duo('warning', $color-warning);
package/lib/components/Spinner/Spinner.scss CHANGED
@@ -32,6 +32,39 @@
32
32
  }
33
33
  }
34
34
 
35
+ @mixin spinner-variant-default($name, $color) {
36
+ .spinner-type--default.spinner-variant--#{$name} {
37
+ border: 3px solid rgba($color, 0.25);
38
+ border-top-color: rgba($color, 1);
39
+ }
40
+ }
41
+
42
+ @mixin spinner-variant-duo($name, $color) {
43
+ .spinner-type--duo.spinner-variant--#{$name} {
44
+ border-bottom-color: rgba($color, 1);
45
+ border-top-color: rgba($color, 1);
46
+ }
47
+ }
48
+
49
+ @mixin spinner-variant-gradient($name, $color) {
50
+ .spinner-type--gradient.spinner-variant--#{$name} {
51
+ border-top: 3px solid rgba($color, 1);
52
+ }
53
+ }
54
+
55
+ @mixin spinner-variant-pulse($name, $color) {
56
+ .spinner-type--pulse.spinner-variant--#{$name} {
57
+ background-color: $color;
58
+ }
59
+ }
60
+
61
+ @mixin spinner-variant-pulse-duo($name, $color) {
62
+ .spinner-type--pulse-duo.spinner-variant--#{$name}::after,
63
+ .spinner-type--pulse-duo.spinner-variant--#{$name}::before {
64
+ background-color: $color;
65
+ }
66
+ }
67
+
35
68
  .spinner {
36
69
  &-size {
37
70
  &--xsm {
@@ -64,152 +97,29 @@
64
97
  &--default {
65
98
  animation: rotation 800ms ease infinite;
66
99
  border-radius: 50%;
67
-
68
- &.spinner-variant {
69
- &--default {
70
- border: 3px solid rgba($color-default, 0.25);
71
- border-top-color: rgba($color-default, 1);
72
- }
73
- &--primary {
74
- border: 3px solid rgba($color-primary, 0.25);
75
- border-top-color: rgba($color-primary, 1);
76
- }
77
- &--secondary {
78
- border: 3px solid rgba($color-secondary, 0.25);
79
- border-top-color: rgba($color-secondary, 1);
80
- }
81
- &--success {
82
- border: 3px solid rgba($color-success, 0.25);
83
- border-top-color: rgba($color-success, 1);
84
- }
85
- &--error {
86
- border: 3px solid rgba($color-error, 0.25);
87
- border-top-color: rgba($color-error, 1);
88
- }
89
- &--warning {
90
- border: 3px solid rgba($color-warning, 0.25);
91
- border-top-color: rgba($color-warning, 1);
92
- }
93
- }
94
100
  }
95
101
 
96
102
  &--duo {
97
103
  animation: rotation 800ms ease infinite;
98
104
  border: 3px solid transparent;
99
105
  border-radius: 50%;
100
-
101
- &.spinner-variant {
102
- &--default {
103
- border-bottom-color: rgba($color-default, 1);
104
- border-top-color: rgba($color-default, 1);
105
- }
106
- &--primary {
107
- border-bottom-color: rgba($color-primary, 1);
108
- border-top-color: rgba($color-primary, 1);
109
- }
110
- &--secondary {
111
- border-bottom-color: rgba($color-secondary, 1);
112
- border-top-color: rgba($color-secondary, 1);
113
- }
114
- &--success {
115
- border-bottom-color: rgba($color-success, 1);
116
- border-top-color: rgba($color-success, 1);
117
- }
118
- &--error {
119
- border-bottom-color: rgba($color-error, 1);
120
- border-top-color: rgba($color-error, 1);
121
- }
122
- &--warning {
123
- border-bottom-color: rgba($color-warning, 1);
124
- border-top-color: rgba($color-warning, 1);
125
- }
126
- }
127
106
  }
128
107
 
129
108
  &--gradient {
130
109
  animation: rotation 800ms linear infinite;
131
110
  border-right: 3px solid transparent;
132
111
  border-radius: 50%;
133
-
134
- &.spinner-variant {
135
- &--default {
136
- border-top: 3px solid rgba($color-default, 1);
137
- }
138
- &--primary {
139
- border-top: 3px solid rgba($color-primary, 1);
140
- }
141
- &--secondary {
142
- border-top: 3px solid rgba($color-secondary, 1);
143
- }
144
- &--success {
145
- border-top: 3px solid rgba($color-success, 1);
146
- }
147
- &--error {
148
- border-top: 3px solid rgba($color-error, 1);
149
- }
150
- &--warning {
151
- border-top: 3px solid rgba($color-warning, 1);
152
- }
153
- }
154
112
  }
155
113
 
156
114
  &--pulse {
157
115
  animation: pulse 1s ease-in-out infinite;
158
116
  border-radius: 50%;
159
117
  position: relative;
160
-
161
- &.spinner-variant {
162
- &--default {
163
- background-color: $color-default;
164
- }
165
- &--primary {
166
- background-color: $color-primary;
167
- }
168
- &--secondary {
169
- background-color: $color-secondary;
170
- }
171
- &--success {
172
- background-color: $color-success;
173
- }
174
- &--error {
175
- background-color: $color-error;
176
- }
177
- &--warning {
178
- background-color: $color-warning;
179
- }
180
- }
181
118
  }
182
119
 
183
120
  &--pulse-duo {
184
121
  position: relative;
185
122
 
186
- &.spinner-variant {
187
- &--default::after,
188
- &--default::before {
189
- background-color: $color-default;
190
- }
191
- &--primary::after,
192
- &--primary::before {
193
- background-color: $color-primary;
194
- }
195
- &--secondary::after,
196
- &--secondary::before {
197
- background-color: $color-secondary;
198
- }
199
- &--success::after,
200
- &--success::before {
201
- background-color: $color-success;
202
- }
203
- &--error::after,
204
- &--error::before {
205
- background-color: $color-error;
206
- }
207
- &--warning::after,
208
- &--warning::before {
209
- background-color: $color-warning;
210
- }
211
- }
212
-
213
123
  &::before,
214
124
  &::after {
215
125
  content: '';
@@ -230,3 +140,34 @@
230
140
  }
231
141
  }
232
142
  }
143
+
144
+ @include spinner-variant-default('default', $color-default);
145
+ @include spinner-variant-default('primary', $color-primary);
146
+ @include spinner-variant-default('secondary', $color-secondary);
147
+ @include spinner-variant-default('success', $color-success);
148
+ @include spinner-variant-default('error', $color-error);
149
+ @include spinner-variant-default('warning', $color-warning);
150
+ @include spinner-variant-duo('default', $color-default);
151
+ @include spinner-variant-duo('primary', $color-primary);
152
+ @include spinner-variant-duo('secondary', $color-secondary);
153
+ @include spinner-variant-duo('success', $color-success);
154
+ @include spinner-variant-duo('error', $color-error);
155
+ @include spinner-variant-duo('warning', $color-warning);
156
+ @include spinner-variant-gradient('default', $color-default);
157
+ @include spinner-variant-gradient('primary', $color-primary);
158
+ @include spinner-variant-gradient('secondary', $color-secondary);
159
+ @include spinner-variant-gradient('success', $color-success);
160
+ @include spinner-variant-gradient('error', $color-error);
161
+ @include spinner-variant-gradient('warning', $color-warning);
162
+ @include spinner-variant-pulse('default', $color-default);
163
+ @include spinner-variant-pulse('primary', $color-primary);
164
+ @include spinner-variant-pulse('secondary', $color-secondary);
165
+ @include spinner-variant-pulse('success', $color-success);
166
+ @include spinner-variant-pulse('error', $color-error);
167
+ @include spinner-variant-pulse('warning', $color-warning);
168
+ @include spinner-variant-pulse-duo('default', $color-default);
169
+ @include spinner-variant-pulse-duo('primary', $color-primary);
170
+ @include spinner-variant-pulse-duo('secondary', $color-secondary);
171
+ @include spinner-variant-pulse-duo('success', $color-success);
172
+ @include spinner-variant-pulse-duo('error', $color-error);
173
+ @include spinner-variant-pulse-duo('warning', $color-warning);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/spinner",
3
3
  "description": "Flexible, highly customizable React Spinner component for AristoByteUI. Supports multiple variants, sizes, and animation types, designed for seamless integration with modern React projects and monorepos.",
4
- "version": "2.9.1",
4
+ "version": "2.10.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -52,7 +52,7 @@
52
52
  "sass": "^1.97.3"
53
53
  },
54
54
  "dependencies": {
55
- "@aristobyte-ui/utils": "^2.9.1"
55
+ "@aristobyte-ui/utils": "^2.10.0"
56
56
  },
57
57
  "exports": {
58
58
  ".": {