@unlk/keymaster 1.6.3 → 1.6.5

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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/css/keymaster.css +209 -209
  3. package/dist/css/keymaster.css.map +1 -1
  4. package/dist/css/keymaster.min.css +1 -1
  5. package/dist/js/keymaster.js +1 -1
  6. package/dist/js/keymaster.min.js +2 -2
  7. package/dist/js/keymaster.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/scss/theme/_buttons.scss +18 -20
  10. package/scss/theme/_variables-overrides.scss +1 -0
  11. package/scss/theme/_version.scss +1 -1
  12. package/scss/theme/mixins/_buttons.scss +39 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unlk/keymaster",
3
- "version": "1.6.3",
3
+ "version": "1.6.5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/scss/theme/_buttons.scss CHANGED
@@ -3,16 +3,14 @@
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
 
6
- // Icon on the left, add margin to its right
7
- > i:first-child,
8
- > .icon:first-child {
6
+ > i:first-child:not(:only-child),
7
+ > .icon:first-child:not(:only-child) {
9
8
  width: fit-content;
10
9
  margin-right: $spacer * .5;
11
10
  }
12
11
 
13
- // Icon on the right, add margin to its left
14
- > i:last-child,
15
- > .icon:last-child {
12
+ > i:last-child:not(:only-child),
13
+ > .icon:last-child:not(:only-child) {
16
14
  width: fit-content;
17
15
  margin-left: $spacer * .5;
18
16
  }
@@ -30,27 +28,28 @@
30
28
  }
31
29
  .btn-#{$color} {
32
30
  @if $color == "secondary" {
33
- @include button-variant(
31
+ @include custom-button-variant(
34
32
  $value,
35
33
  $value,
36
34
  $hover-background: tint-color($value, $btn-hover-bg-shade-amount),
37
35
  $hover-border: tint-color($value, $btn-hover-border-shade-amount),
38
36
  $active-background: tint-color($value, $btn-active-bg-shade-amount),
39
37
  $active-border: tint-color($value, $btn-active-border-shade-amount),
40
- $disabled-color: $gray-900
41
38
  );
42
39
  } @else {
43
- @include button-variant(
40
+ @include custom-button-variant(
44
41
  $value,
45
42
  $value,
46
43
  $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
47
44
  $hover-border: shade-color($value, $btn-hover-border-shade-amount),
48
45
  $active-background: shade-color($value, $btn-active-bg-shade-amount),
49
46
  $active-border: shade-color($value, $btn-active-border-shade-amount),
50
- $disabled-color: $white
51
47
  );
52
48
  }
53
49
  }
50
+ .btn-outline-#{$color} {
51
+ @include custom-button-outline-variant($value);
52
+ }
54
53
  .btn-icon-#{$color} {
55
54
  @if $color == "secondary" {
56
55
  @include button-icon-variant(
@@ -69,7 +68,6 @@
69
68
  $hover-border: shade-color($value, $btn-hover-border-shade-amount),
70
69
  $active-background: shade-color($value, $btn-active-bg-shade-amount),
71
70
  $active-border: shade-color($value, $btn-active-border-shade-amount),
72
- $disabled-color: $white
73
71
  );
74
72
  }
75
73
  }
@@ -87,7 +85,6 @@
87
85
 
88
86
  [class*="btn-icon-"],
89
87
  [class*="btn-icon-outline-"] {
90
-
91
88
  &.btn-sm {
92
89
  width: rfs-value(32px);
93
90
  height: rfs-value(32px);
@@ -100,26 +97,27 @@
100
97
  height: rfs-value(48px);
101
98
  }
102
99
  }
100
+
103
101
  .btn-sm {
104
- > i:first-child,
105
- > .icon:first-child {
102
+ > i:first-child:not(:only-child),
103
+ > .icon:first-child:not(:only-child) {
106
104
  margin-right: $spacer * .375;
107
105
  }
108
106
 
109
- > i:last-child,
110
- > .icon:last-child {
107
+ > i:last-child:not(:only-child),
108
+ > .icon:last-child:not(:only-child) {
111
109
  margin-left: $spacer * .375;
112
110
  }
113
111
  }
114
112
 
115
113
  .btn-lg {
116
- > i:first-child,
117
- > .icon:first-child {
114
+ > i:first-child:not(:only-child),
115
+ > .icon:first-child:not(:only-child) {
118
116
  margin-right: $spacer * .625;
119
117
  }
120
118
 
121
- > i:last-child,
122
- > .icon:last-child {
119
+ > i:last-child:not(:only-child),
120
+ > .icon:last-child:not(:only-child) {
123
121
  margin-left: $spacer * .625;
124
122
  }
125
123
  }
package/scss/theme/_variables-overrides.scss CHANGED
@@ -382,6 +382,7 @@ $btn-active-bg-shade-amount: 40% !default;
382
382
  $btn-active-bg-tint-amount: 20% !default;
383
383
  $btn-active-border-shade-amount: 40% !default;
384
384
  $btn-active-border-tint-amount: 10% !default;
385
+ $btn-disabled-opacity: 1 !default;
385
386
 
386
387
  // Border Radius
387
388
  $border-radius: .5rem !default;
package/scss/theme/_version.scss CHANGED
@@ -1,2 +1,2 @@
1
1
  // GENERATED FILE – do not edit manually
2
- $km-version: "1.6.3" !default;
2
+ $km-version: "1.6.5" !default;
package/scss/theme/mixins/_buttons.scss CHANGED
@@ -1,5 +1,4 @@
1
- // scss-docs-start btn-variant-mixin
2
- @mixin button-variant(
1
+ @mixin custom-button-variant(
3
2
  $background,
4
3
  $border,
5
4
  $color: color-contrast($background),
@@ -9,9 +8,9 @@
9
8
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
10
9
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
11
10
  $active-color: color-contrast($active-background),
12
- $disabled-background: rgba($background, 1),
13
- $disabled-border: rgba($border, 1),
14
- $disabled-color: color-contrast($disabled-background)
11
+ $disabled-background: $gray-200,
12
+ $disabled-border: $gray-200,
13
+ $disabled-color: $gray-400
15
14
  ) {
16
15
  --#{$prefix}btn-color: #{$color};
17
16
  --#{$prefix}btn-bg: #{$background};
@@ -28,7 +27,35 @@
28
27
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
29
28
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
30
29
  }
31
- // scss-docs-end btn-variant-mixin
30
+
31
+ @mixin custom-button-outline-variant(
32
+ $color,
33
+ $btn-color: $color,
34
+ $btn-border: $color,
35
+ $color-hover: $color,
36
+ $hover-background: tint-color($color, 90%),
37
+ $hover-border: $color,
38
+ $active-background: shade-color($color, 20%),
39
+ $active-border: shade-color($color, 20%),
40
+ $active-color: color-contrast($active-background),
41
+ $disabled-color: $gray-400,
42
+ $disabled-border: $gray-200,
43
+ ) {
44
+ --#{$prefix}btn-color: #{$btn-color};
45
+ --#{$prefix}btn-border-color: #{$btn-border};
46
+ --#{$prefix}btn-hover-color: #{$color-hover};
47
+ --#{$prefix}btn-hover-bg: #{$hover-background};
48
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
49
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
50
+ --#{$prefix}btn-active-color: #{$active-color};
51
+ --#{$prefix}btn-active-bg: #{$active-background};
52
+ --#{$prefix}btn-active-border-color: #{$active-border};
53
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
54
+ --#{$prefix}btn-disabled-color: #{$disabled-color};
55
+ --#{$prefix}btn-disabled-bg: transparent;
56
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
57
+ --#{$prefix}gradient: none;
58
+ }
32
59
 
33
60
  @mixin button-link-variant(
34
61
  $color,
@@ -37,7 +64,7 @@
37
64
  $active-background: shade-color($color, 20%),
38
65
  $active-border: $color,
39
66
  $active-color: $white,
40
- $disabled-color: $gray-300
67
+ $disabled-color: $gray-400
41
68
  ) {
42
69
  --#{$prefix}btn-color: #{$btn-color};
43
70
  --#{$prefix}btn-bg: transparent;
@@ -65,9 +92,9 @@
65
92
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
66
93
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
67
94
  $active-color: color-contrast($active-background),
68
- $disabled-background: rgba($background, 1),
69
- $disabled-border: rgba($border, 1),
70
- $disabled-color: color-contrast($disabled-background)
95
+ $disabled-background: $gray-200,
96
+ $disabled-border: $gray-200,
97
+ $disabled-color: $gray-400,
71
98
  ) {
72
99
  width: rfs-value(40px);
73
100
  height: rfs-value(40px);
@@ -100,8 +127,8 @@
100
127
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
101
128
  $active-color: color-contrast($active-background),
102
129
  $disabled-background: transparent,
103
- $disabled-border: rgba($border, 1),
104
- $disabled-color: rgba($color, 1)
130
+ $disabled-border: $gray-200,
131
+ $disabled-color: $gray-400
105
132
  ) {
106
133
  width: rfs-value(40px);
107
134
  height: rfs-value(40px);