@aristobyte-ui/button 2.11.2 → 2.12.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 (7) hide show
  1. package/es/.tsbuildinfo +1 -1
  2. package/es/components/Button/Button.scss +36 -104
  3. package/es/components/Button/index.js +12 -1
  4. package/lib/.tsbuildinfo +1 -1
  5. package/lib/components/Button/Button.scss +36 -104
  6. package/lib/components/Button/index.js +12 -1
  7. package/package.json +3 -3
package/es/components/Button/Button.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  gap: 10px;
10
10
  justify-content: center;
11
11
  letter-spacing: 0rem;
12
- line-height: 1.42;
12
+ line-height: 1.42px;
13
13
  overflow: hidden;
14
14
  position: relative;
15
15
  text-align: center;
@@ -30,127 +30,59 @@
30
30
  background-color: transparent !important;
31
31
  }
32
32
 
33
- @mixin button-variant($name, $color, $color-hover, $color-disabled) {
34
- .button-variant--#{$name}.button-appearance--solid {
35
- background-color: $color;
36
- backdrop-filter: 8px;
37
- color: $text-color-white;
38
-
39
- &:hover {
40
- background-color: $color-hover;
41
- }
33
+ @mixin button-style($bg, $hover-bg, $disabled-bg, $border: null, $glow: false) {
34
+ background-color: $bg;
35
+ backdrop-filter: 8px;
36
+ color: $text-color-white;
42
37
 
43
- &:disabled {
44
- background-color: $color-disabled;
45
- color: $text-color-white-disabled;
46
-
47
- .icon {
48
- color: $text-color-white-disabled;
49
- }
50
- }
51
-
52
- .icon {
53
- color: $text-color-white;
54
- }
38
+ @if $border != null {
39
+ border: $border;
55
40
  }
56
41
 
57
- .button-variant--#{$name}.button-appearance--outline {
58
- background-color: rgba($color, 0.2);
59
- backdrop-filter: 8px;
60
- border: 1px solid $color;
61
- color: $text-color-white;
62
-
63
- &:hover {
64
- background-color: $color;
65
- }
66
-
67
- &:disabled {
68
- background-color: rgba($color-disabled, 0.2);
69
- color: $text-color-white-disabled;
70
-
71
- .icon {
72
- color: $text-color-white-disabled;
73
- }
74
- }
75
-
76
- .icon {
77
- color: $text-color-white;
78
- }
42
+ @if $glow {
43
+ box-shadow:
44
+ 0 0 8px rgba($hover-bg, 0.5),
45
+ 0 0 16px rgba($hover-bg, 0.4),
46
+ 0 0 24px rgba($hover-bg, 0.3);
79
47
  }
80
48
 
81
- .button-variant--#{$name}.button-appearance--outline-dashed {
82
- background-color: rgba($color, 0.2);
83
- backdrop-filter: 8px;
84
- border: 1px dashed $color;
85
- color: $text-color-white;
86
-
87
- &:hover {
88
- background-color: $color;
89
- }
90
-
91
- &:disabled {
92
- background-color: rgba($color-disabled, 0.2);
93
- color: $text-color-white-disabled;
49
+ &:hover {
50
+ background-color: $hover-bg;
51
+ }
94
52
 
95
- .icon {
96
- color: $text-color-white-disabled;
97
- }
98
- }
53
+ &:disabled {
54
+ background-color: $disabled-bg;
55
+ color: $text-color-white-disabled;
99
56
 
100
57
  .icon {
101
- color: $text-color-white;
58
+ color: $text-color-white-disabled;
102
59
  }
103
60
  }
104
61
 
105
- .button-variant--#{$name}.button-appearance--no-outline {
106
- background-color: rgba($color, 0.2);
107
- backdrop-filter: 8px;
62
+ .icon {
108
63
  color: $text-color-white;
109
-
110
- &:hover {
111
- background-color: $color;
112
- }
113
-
114
- &:disabled {
115
- background-color: rgba($color-disabled, 0.2);
116
- color: $text-color-white-disabled;
117
-
118
- .icon {
119
- color: $text-color-white-disabled;
120
- }
121
- }
122
-
123
- .icon {
124
- color: $text-color-white;
125
- }
126
64
  }
65
+ }
127
66
 
128
- .button-variant--#{$name}.button-appearance--glowing {
129
- background-color: rgba($color, 0.2);
130
- backdrop-filter: 8px;
131
- border: 1px solid $color;
132
- color: $text-color-white;
133
- box-shadow:
134
- 0 0 8px rgba($color, 0.5),
135
- 0 0 16px rgba($color, 0.4),
136
- 0 0 24px rgba($color, 0.3);
67
+ @mixin button-variant($name, $color, $color-hover, $color-disabled) {
68
+ &.button-variant--#{$name}.button-appearance--solid {
69
+ @include button-style($color, $color-hover, $color-disabled);
70
+ }
137
71
 
138
- &:hover {
139
- background-color: $color;
140
- }
72
+ &.button-variant--#{$name}.button-appearance--outline {
73
+ @include button-style(rgba($color, 0.2), $color, rgba($color-disabled, 0.2), 1px solid $color);
74
+ }
141
75
 
142
- &:disabled {
143
- background-color: rgba($color-disabled, 0.2);
144
- color: $text-color-white-disabled;
76
+ &.button-variant--#{$name}.button-appearance--outline-dashed {
77
+ @include button-style(rgba($color, 0.2), $color, rgba($color-disabled, 0.2), 1px dashed $color);
78
+ }
145
79
 
146
- .icon {
147
- color: $text-color-white-disabled;
148
- }
149
- }
80
+ &.button-variant--#{$name}.button-appearance--no-outline {
81
+ @include button-style(rgba($color, 0.2), $color, rgba($color-disabled, 0.2));
82
+ }
150
83
 
151
- .icon {
152
- color: $text-color-white;
153
- }
84
+ &.button-variant--#{$name}.button-appearance--glowing {
85
+ @include button-style(rgba($color, 0.2), $color, rgba($color-disabled, 0.2), 1px solid $color, true);
154
86
  }
155
87
  }
156
88
 
package/es/components/Button/index.js CHANGED
@@ -33,7 +33,18 @@ export var Button = function (_a) {
33
33
  onClick: handleClick,
34
34
  disabled: disabled || isLoading,
35
35
  style: style,
36
- className: "button ".concat(transparent ? 'button--transparent' : '', " ").concat("button-variant--".concat(variant), " ").concat("button-appearance--".concat(appearance), " ").concat("button-size--".concat(size), " ").concat("button-radius--".concat(radius), " ").concat(isLoading ? 'button--loading' : '', " ").concat(className),
36
+ className: [
37
+ 'button',
38
+ transparent && 'button--transparent',
39
+ "button-variant--".concat(variant),
40
+ "button-appearance--".concat(appearance),
41
+ "button-size--".concat(size),
42
+ "button-radius--".concat(radius),
43
+ isLoading && 'button--loading',
44
+ className,
45
+ ]
46
+ .filter(Boolean)
47
+ .join(' '),
37
48
  }); };
38
49
  var renderChildren = function () {
39
50
  var _a;