@aristobyte-ui/dropdown 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 (5) hide show
  1. package/es/components/Dropdown/Dropdown.scss +13 -24
  2. package/es/components/DropdownOption/DropdownOption.scss +11 -24
  3. package/lib/components/Dropdown/Dropdown.scss +13 -24
  4. package/lib/components/DropdownOption/DropdownOption.scss +11 -24
  5. package/package.json +3 -3
package/es/components/Dropdown/Dropdown.scss CHANGED
@@ -8,29 +8,18 @@
8
8
  }
9
9
 
10
10
  &__box {
11
- &-variant--default &-options {
12
- background-color: $color-default;
11
+ @mixin dropdown-variant($name, $color) {
12
+ &-variant--#{$name} &-options {
13
+ background-color: $color;
14
+ }
13
15
  }
14
16
 
15
- &-variant--primary &-options {
16
- background-color: $color-primary;
17
- }
18
-
19
- &-variant--secondary &-options {
20
- background-color: $color-secondary;
21
- }
22
-
23
- &-variant--warning &-options {
24
- background-color: $color-warning;
25
- }
26
-
27
- &-variant--error &-options {
28
- background-color: $color-error;
29
- }
30
-
31
- &-variant--success &-options {
32
- background-color: $color-success;
33
- }
17
+ @include dropdown-variant('default', $color-default);
18
+ @include dropdown-variant('primary', $color-primary);
19
+ @include dropdown-variant('secondary', $color-secondary);
20
+ @include dropdown-variant('warning', $color-warning);
21
+ @include dropdown-variant('error', $color-error);
22
+ @include dropdown-variant('success', $color-success);
34
23
 
35
24
  &-overlay {
36
25
  backdrop-filter: blur(12px);
@@ -44,10 +33,10 @@
44
33
 
45
34
  &-options {
46
35
  align-items: flex-start;
47
- border-radius: 8px; //TODO: change to dynamic
36
+ border-radius: 8px; // TODO: change to dynamic
48
37
  box-shadow:
49
- 0 4px 6px rgba(0, 0, 0, 0.04),
50
- 0 12px 24px rgba(0, 0, 0, 0.1);
38
+ 0 4px 6px rgb(0 0 0 / 4%),
39
+ 0 12px 24px rgb(0 0 0 / 10%);
51
40
  display: flex;
52
41
  flex-direction: column;
53
42
  opacity: 1;
package/es/components/DropdownOption/DropdownOption.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  .dropdown-option {
4
4
  align-items: center;
5
- border-radius: 8px; //TODO: change to dynamic
5
+ border-radius: 8px; // TODO: change to dynamic
6
6
  color: $white;
7
7
  display: flex;
8
8
  font-size: 14px;
@@ -13,32 +13,19 @@
13
13
  transition: all 120ms ease-out;
14
14
  width: 100%;
15
15
 
16
- &-variant {
17
- &--default:hover {
18
- background-color: $color-default-hover;
19
- }
20
-
21
- &--primary:hover {
22
- background-color: $color-primary-hover;
23
- }
24
-
25
- &--secondary:hover {
26
- background-color: $color-secondary-hover;
27
- }
28
-
29
- &--warning:hover {
30
- background-color: $color-warning-hover;
31
- }
32
-
33
- &--error:hover {
34
- background-color: $color-error-hover;
35
- }
36
-
37
- &--success:hover {
38
- background-color: $color-success-hover;
16
+ @mixin dropdown-option-variant($name, $hover-color) {
17
+ &-variant--#{$name}:hover {
18
+ background-color: $hover-color;
39
19
  }
40
20
  }
41
21
 
22
+ @include dropdown-option-variant('default', $color-default-hover);
23
+ @include dropdown-option-variant('primary', $color-primary-hover);
24
+ @include dropdown-option-variant('secondary', $color-secondary-hover);
25
+ @include dropdown-option-variant('warning', $color-warning-hover);
26
+ @include dropdown-option-variant('error', $color-error-hover);
27
+ @include dropdown-option-variant('success', $color-success-hover);
28
+
42
29
  &--disabled,
43
30
  &--disabled:hover {
44
31
  background-color: $color-default-disabled;
package/lib/components/Dropdown/Dropdown.scss CHANGED
@@ -8,29 +8,18 @@
8
8
  }
9
9
 
10
10
  &__box {
11
- &-variant--default &-options {
12
- background-color: $color-default;
11
+ @mixin dropdown-variant($name, $color) {
12
+ &-variant--#{$name} &-options {
13
+ background-color: $color;
14
+ }
13
15
  }
14
16
 
15
- &-variant--primary &-options {
16
- background-color: $color-primary;
17
- }
18
-
19
- &-variant--secondary &-options {
20
- background-color: $color-secondary;
21
- }
22
-
23
- &-variant--warning &-options {
24
- background-color: $color-warning;
25
- }
26
-
27
- &-variant--error &-options {
28
- background-color: $color-error;
29
- }
30
-
31
- &-variant--success &-options {
32
- background-color: $color-success;
33
- }
17
+ @include dropdown-variant('default', $color-default);
18
+ @include dropdown-variant('primary', $color-primary);
19
+ @include dropdown-variant('secondary', $color-secondary);
20
+ @include dropdown-variant('warning', $color-warning);
21
+ @include dropdown-variant('error', $color-error);
22
+ @include dropdown-variant('success', $color-success);
34
23
 
35
24
  &-overlay {
36
25
  backdrop-filter: blur(12px);
@@ -44,10 +33,10 @@
44
33
 
45
34
  &-options {
46
35
  align-items: flex-start;
47
- border-radius: 8px; //TODO: change to dynamic
36
+ border-radius: 8px; // TODO: change to dynamic
48
37
  box-shadow:
49
- 0 4px 6px rgba(0, 0, 0, 0.04),
50
- 0 12px 24px rgba(0, 0, 0, 0.1);
38
+ 0 4px 6px rgb(0 0 0 / 4%),
39
+ 0 12px 24px rgb(0 0 0 / 10%);
51
40
  display: flex;
52
41
  flex-direction: column;
53
42
  opacity: 1;
package/lib/components/DropdownOption/DropdownOption.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  .dropdown-option {
4
4
  align-items: center;
5
- border-radius: 8px; //TODO: change to dynamic
5
+ border-radius: 8px; // TODO: change to dynamic
6
6
  color: $white;
7
7
  display: flex;
8
8
  font-size: 14px;
@@ -13,32 +13,19 @@
13
13
  transition: all 120ms ease-out;
14
14
  width: 100%;
15
15
 
16
- &-variant {
17
- &--default:hover {
18
- background-color: $color-default-hover;
19
- }
20
-
21
- &--primary:hover {
22
- background-color: $color-primary-hover;
23
- }
24
-
25
- &--secondary:hover {
26
- background-color: $color-secondary-hover;
27
- }
28
-
29
- &--warning:hover {
30
- background-color: $color-warning-hover;
31
- }
32
-
33
- &--error:hover {
34
- background-color: $color-error-hover;
35
- }
36
-
37
- &--success:hover {
38
- background-color: $color-success-hover;
16
+ @mixin dropdown-option-variant($name, $hover-color) {
17
+ &-variant--#{$name}:hover {
18
+ background-color: $hover-color;
39
19
  }
40
20
  }
41
21
 
22
+ @include dropdown-option-variant('default', $color-default-hover);
23
+ @include dropdown-option-variant('primary', $color-primary-hover);
24
+ @include dropdown-option-variant('secondary', $color-secondary-hover);
25
+ @include dropdown-option-variant('warning', $color-warning-hover);
26
+ @include dropdown-option-variant('error', $color-error-hover);
27
+ @include dropdown-option-variant('success', $color-success-hover);
28
+
42
29
  &--disabled,
43
30
  &--disabled:hover {
44
31
  background-color: $color-default-disabled;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/dropdown",
3
3
  "description": "react dropdown component with trigger button, dropdownoptions, placement variants, fully typed typescript support, and composable integration with aristobyte ui button",
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,8 +52,8 @@
52
52
  "sass": "^1.97.3"
53
53
  },
54
54
  "dependencies": {
55
- "@aristobyte-ui/button": "^2.9.1",
56
- "@aristobyte-ui/utils": "^2.9.1"
55
+ "@aristobyte-ui/button": "^2.10.0",
56
+ "@aristobyte-ui/utils": "^2.10.0"
57
57
  },
58
58
  "exports": {
59
59
  ".": {