@kws3/ui 4.3.0 → 4.4.0-alpha.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 (33) hide show
  1. package/CHANGELOG.mdx +5 -1
  2. package/controls/ToggleButtons.svelte +3 -3
  3. package/datagrid/DataSort/DataSort.svelte +1 -1
  4. package/forms/AutoComplete.svelte +6 -6
  5. package/forms/PasswordInput.svelte +2 -2
  6. package/forms/SearchInput.svelte +1 -1
  7. package/forms/select/MultiSelect.svelte +14 -12
  8. package/helpers/FloatingUI/Floatie.svelte +1 -1
  9. package/package.json +6 -2
  10. package/styles/ActionSheet.scss +7 -4
  11. package/styles/AutoComplete.scss +39 -19
  12. package/styles/Canvas.scss +8 -5
  13. package/styles/Chart.scss +4 -2
  14. package/styles/CheckRadio.scss +21 -7
  15. package/styles/DataSearch.scss +8 -4
  16. package/styles/DataSort.scss +18 -9
  17. package/styles/Datepicker.scss +19 -9
  18. package/styles/Divider.scss +8 -5
  19. package/styles/FileUpload.scss +18 -16
  20. package/styles/FloatingUI.scss +28 -16
  21. package/styles/Grid.scss +30 -11
  22. package/styles/Loader.scss +5 -3
  23. package/styles/Pagination.scss +16 -12
  24. package/styles/Panel.scss +10 -4
  25. package/styles/RangeSlider.scss +32 -29
  26. package/styles/Select.scss +41 -24
  27. package/styles/Skeleton.scss +9 -3
  28. package/styles/SlidingPane.scss +32 -26
  29. package/styles/Timeline.scss +12 -6
  30. package/styles/Timepicker.scss +18 -13
  31. package/styles/Toggle.scss +18 -8
  32. package/styles/Tooltip.scss +16 -18
  33. package/types/index.d.ts +6 -4
package/styles/FileUpload.scss CHANGED
@@ -1,18 +1,20 @@
1
- $kws-theme-colors: $colors !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/derived-variables" as dv;
3
+ @use "bulma/sass/utilities/functions" as fn;
2
4
 
3
- $kws-fileupload-bg-color: $input-background-color !default;
4
- $kws-fileupload-border-color: $input-border-color !default;
5
- $kws-fileupload-shadow: $input-shadow !default;
6
- $kws-fileupload-radius: $radius !default;
7
- $kws-fileupload-text-color: $text !default;
8
- $kws-fileupload-disabled-bg-color: $input-disabled-background-color !default;
9
- $kws-fileupload-disabled-border-color: $input-disabled-border-color !default;
10
-
11
- $kws-fileupload-progress-bg-color: $success-light !default;
12
- $kws-fileupload-progress-text-color: $success-dark !default;
5
+ $kws-theme-colors: dv.$colors !default;
6
+ $kws-fileupload-bg-color: #{cv.getVar("background-white")} !default;
7
+ $kws-fileupload-border-color: #{cv.getVar("border")} !default;
8
+ $kws-fileupload-shadow: #{cv.getVar("shadow-s")} !default;
9
+ $kws-fileupload-radius: #{cv.getVar("radius")} !default;
10
+ $kws-fileupload-text-color: #{cv.getVar("text")} !default;
11
+ $kws-fileupload-disabled-bg-color: #{cv.getVar("white-ter")} !default;
12
+ $kws-fileupload-disabled-border-color: #{cv.getVar("white-ter")} !default;
13
+ $kws-fileupload-progress-bg-color: #{cv.getVar("success-light")} !default;
14
+ $kws-fileupload-progress-text-color: #{cv.getVar("success-dark")} !default;
13
15
  $kws-fileupload-progress-anim-easing: linear !default;
14
- @if (variable-exists($easeOutCustom)) {
15
- $kws-fileupload-progress-anim-easing: $easeOutCustom !default;
16
+ @if (variable-exists(#{cv.getVar("easeOutCustom")})) {
17
+ $kws-fileupload-progress-anim-easing: #{cv.getVar("easeOutCustom")} !default;
16
18
  }
17
19
 
18
20
  .kws-file-upload {
@@ -110,9 +112,9 @@ $kws-fileupload-progress-anim-easing: linear !default;
110
112
  }
111
113
  @each $name, $pair in $kws-theme-colors {
112
114
  $color: nth($pair, 1);
113
- $color-invert: nth($pair, 2);
114
- $color-light: findLightColor($color);
115
- $color-dark: findDarkColor($color);
115
+ $color-invert: fn.bulmaFindColorInvert($color);
116
+ $color-light: fn.bulmaFindLightColor($color);
117
+ $color-dark: fn.bulmaFindDarkColor($color);
116
118
  &.is-#{$name} {
117
119
  .file-upload-inner {
118
120
  border-color: $color;
package/styles/FloatingUI.scss CHANGED
@@ -1,4 +1,8 @@
1
- $kws-theme-colors: $colors !default;
1
+ @use "bulma/sass/utilities/derived-variables" as dv;
2
+ @use "bulma/sass/utilities/css-variables" as cv;
3
+ @use "bulma/sass/utilities/functions" as fn;
4
+
5
+ $kws-theme-colors: dv.$colors !default;
2
6
  $kws3-floating-item-width: 25rem !default;
3
7
 
4
8
  .kws-floatie-output {
@@ -56,7 +60,9 @@ $kws3-floating-item-width: 25rem !default;
56
60
  animation-name: floatie-progress-running;
57
61
  animation-fill-mode: forwards;
58
62
  animation-timing-function: linear;
59
- border-radius: 0 $radius $radius $radius;
63
+ border-radius: 0 #{cv.getVar("radius")} #{cv.getVar("radius")} #{cv.getVar(
64
+ "radius"
65
+ )};
60
66
  }
61
67
  .notification {
62
68
  padding: 0.5em 0.75em;
@@ -64,7 +70,9 @@ $kws3-floating-item-width: 25rem !default;
64
70
  font-size: 1rem;
65
71
  width: 100%;
66
72
  pointer-events: auto;
67
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
73
+ box-shadow:
74
+ 0 1px 4px rgba(0, 0, 0, 0.12),
75
+ 0 0 6px rgba(0, 0, 0, 0.04);
68
76
  p {
69
77
  margin: 0;
70
78
  }
@@ -74,12 +82,14 @@ $kws3-floating-item-width: 25rem !default;
74
82
  position: relative;
75
83
  align-items: center;
76
84
  justify-content: space-around;
77
- border-radius: $radius;
78
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
85
+ border-radius: cv.getVar("radius");
86
+ box-shadow:
87
+ 0 1px 4px rgba(0, 0, 0, 0.12),
88
+ 0 0 6px rgba(0, 0, 0, 0.04);
79
89
  pointer-events: auto;
80
90
  min-height: 3em;
81
- background: $scheme-invert;
82
- color: $scheme-main;
91
+ background: cv.getVar("scheme-invert");
92
+ color: cv.getVar("scheme-main");
83
93
  font-size: 1rem;
84
94
 
85
95
  .text {
@@ -110,9 +120,9 @@ $kws3-floating-item-width: 25rem !default;
110
120
 
111
121
  @each $name, $pair in $kws-theme-colors {
112
122
  $color: nth($pair, 1);
113
- $color-invert: nth($pair, 2);
114
- $color-light: findLightColor($color);
115
- $color-dark: findDarkColor($color);
123
+ $color-invert: fn.bulmaFindColorInvert($color);
124
+ $color-light: fn.bulmaFindLightColor($color);
125
+ $color-dark: fn.bulmaFindDarkColor($color);
116
126
  &.is-#{$name} {
117
127
  background: $color;
118
128
  color: $color-invert;
@@ -129,18 +139,20 @@ $kws3-floating-item-width: 25rem !default;
129
139
  padding: 0.5em 0.75em;
130
140
  border-radius: 1.5em;
131
141
  margin: 0;
132
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
142
+ box-shadow:
143
+ 0 1px 4px rgba(0, 0, 0, 0.12),
144
+ 0 0 6px rgba(0, 0, 0, 0.04);
133
145
  pointer-events: none;
134
- background: $scheme-invert;
135
- color: $scheme-main;
146
+ background: cv.getVar("scheme-invert");
147
+ color: cv.getVar("scheme-main");
136
148
  white-space: nowrap;
137
149
  overflow: hidden;
138
150
  text-overflow: ellipsis;
139
151
  @each $name, $pair in $kws-theme-colors {
140
152
  $color: nth($pair, 1);
141
- $color-invert: nth($pair, 2);
142
- $color-light: findLightColor($color);
143
- $color-dark: findDarkColor($color);
153
+ $color-invert: fn.bulmaFindColorInvert($color);
154
+ $color-light: fn.bulmaFindLightColor($color);
155
+ $color-dark: fn.bulmaFindDarkColor($color);
144
156
  &.is-#{$name} {
145
157
  background: $color;
146
158
  color: $color-invert;
package/styles/Grid.scss CHANGED
@@ -1,21 +1,33 @@
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/functions" as fn;
3
+
1
4
  $kws-gridview-box-shadow:
2
5
  0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
3
6
  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
4
- $kws-gridview-th-background: $table-background-color !default;
5
- $kws-gridview-th-color: $text !default;
7
+ $kws-gridview-th-background: #{cv.getVar("table-background-color")} !default;
8
+ $kws-gridview-th-color: #{cv.getVar("text")} !default;
6
9
  $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
7
10
  $kws-gridview-icon-size: 1.5em !default;
8
- $kws-gridview-checked-row-background: $info-light !default;
11
+ $kws-gridview-checked-row-background: #{cv.getVar("info-light")} !default;
9
12
 
10
- $kws-gridview-active-row-background: $table-row-active-background-color !default;
11
- $kws-gridview-active-row-color: $table-row-active-color !default;
13
+ $kws-gridview-active-row-background: #{cv.getVar(
14
+ "table-row-active-background-color"
15
+ )} !default;
16
+ $kws-gridview-active-row-color: #{cv.getVar("table-row-active-color")} !default;
12
17
 
13
- $kws-gridview-background: $table-background-color !default;
14
- $kws-gridview-striped-row-background: $table-striped-row-even-background-color !default;
15
- $kws-gridview-sticky-column-border-color: $border !default;
18
+ $kws-gridview-background: #{cv.getVar("table-background-color")} !default;
19
+ $kws-gridview-striped-row-background: #{cv.getVar(
20
+ "table-striped-row-even-background-color"
21
+ )} !default;
22
+ $kws-gridview-sticky-column-border-color: #{cv.getVar("border")} !default;
16
23
 
17
- $kws-gridview-hover-background-color: $table-row-hover-background-color !default;
18
- $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-background-color !default;
24
+ $kws-gridview-hover-background-color: #{cv.getVar(
25
+ "table-row-hover-background-color"
26
+ )} !default;
27
+ $kws-gridview-even-row-hover-background-color: #{cv.getVar(
28
+ "table-striped-row-even-hover-background-color"
29
+ )} !default;
30
+ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !default;
19
31
 
20
32
  .table.kws-grid-view {
21
33
  box-shadow: $kws-gridview-box-shadow;
@@ -61,11 +73,18 @@ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-bac
61
73
  }
62
74
  }
63
75
 
76
+ tr.is-selected {
77
+ td {
78
+ color: currentColor !important;
79
+ //border-color: $kws-gridView-cell-border-color !important;
80
+ }
81
+ }
82
+
64
83
  tr.is-checked {
65
84
  background-color: $kws-gridview-checked-row-background !important;
66
85
  td {
67
86
  background-color: $kws-gridview-checked-row-background !important;
68
- color: findColorInvert($kws-gridview-checked-row-background) !important;
87
+ color: $kws-gridview-th-color !important;
69
88
  }
70
89
  }
71
90
 
package/styles/Loader.scss CHANGED
@@ -1,4 +1,7 @@
1
- $kws-theme-colors: $colors !default;
1
+ @use "bulma/sass/utilities/derived-variables" as dv;
2
+ @use "bulma/sass/utilities/mixins" as mx;
3
+
4
+ $kws-theme-colors: dv.$colors !default;
2
5
  $kws-loader-width: 2rem !default;
3
6
  $kws-loader-height: 2rem !default;
4
7
  $kws-loader-width-medium: ($kws-loader-width * 1.5) !default;
@@ -7,12 +10,11 @@ $kws-loader-width-large: ($kws-loader-width * 3) !default;
7
10
  $kws-loader-height-large: ($kws-loader-height * 3) !default;
8
11
  $kws-loader-color: #ccc !default;
9
12
  $kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
10
-
11
13
  .kws-loader {
12
14
  .hero-body {
13
15
  position: relative;
14
16
  &:after {
15
- @include loader();
17
+ @include mx.loader();
16
18
  border-left-color: $kws-loader-color;
17
19
  border-bottom-color: $kws-loader-color;
18
20
  position: absolute !important;
package/styles/Pagination.scss CHANGED
@@ -1,22 +1,26 @@
1
- $kws-pagination-item-color: $text !default;
2
- $kws-pagination-item-background: $scheme-main !default;
3
- $kws-pagination-item-border: 1px solid $border !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/mixins" as mx;
3
+
4
+ $kws-pagination-item-color: #{cv.getVar("text")} !default;
5
+ $kws-pagination-item-background: #{cv.getVar("scheme-main")} !default;
6
+ $kws-pagination-item-border: 1px solid #{cv.getVar("border")} !default;
4
7
  $kws-pagination-item-hover-color: $kws-pagination-item-color !default;
5
8
  $kws-pagination-item-hover-border: $kws-pagination-item-border !default;
6
- $kws-pagination-item-disabled-background: $scheme-main-ter !default;
7
- $kws-pagination-item-disabled-color: $grey !default;
8
- $kws-pagination-item-ellipsis-background: $scheme-main-ter !default;
9
- $kws-pagination-item-ellipsis-border-color: $scheme-main-ter !default;
10
- $kws-pagination-item-active-background: $success !default;
9
+ $kws-pagination-item-disabled-background: #{cv.getVar("scheme-main-ter")} !default;
10
+ $kws-pagination-item-disabled-color: #{cv.getVar("grey")} !default;
11
+ $kws-pagination-item-ellipsis-background: #{cv.getVar("scheme-main-ter")} !default;
12
+ $kws-pagination-item-ellipsis-border-color: #{cv.getVar("scheme-main-ter")} !default;
13
+ $kws-pagination-item-active-background: #{cv.getVar("success")} !default;
11
14
  $kws-pagination-item-active-color: findColorInvert(
12
15
  $kws-pagination-item-active-background
13
16
  ) !default;
14
17
 
15
- $kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
18
+ $kws-pagination-frame-box-shadow:
19
+ 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
16
20
  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
17
21
  $kws-pagination-frame-background: linear-gradient(
18
- $scheme-main,
19
- $scheme-main-ter
22
+ cv.getVar("scheme-main"),
23
+ cv.getVar("scheme-main-ter")
20
24
  ) !default;
21
25
 
22
26
  .pagination {
@@ -75,7 +79,7 @@ $kws-pagination-frame-background: linear-gradient(
75
79
  background: $kws-pagination-frame-background;
76
80
  }
77
81
 
78
- @include mobile {
82
+ @include mx.mobile {
79
83
  .pagination_frame {
80
84
  .level {
81
85
  display: flex;
package/styles/Panel.scss CHANGED
@@ -1,6 +1,9 @@
1
- $kws-panel-background: $scheme-main !default;
2
- $kws-panel-box-shadow: $card-shadow !default;
3
- $kws-panel-title-color: $text !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+
3
+ $kws-panel-heading-background: #{cv.getVar("scheme-main-ter")} !default;
4
+ $kws-panel-background: #{cv.getVar("scheme-main")} !default;
5
+ $kws-panel-box-shadow: #{cv.getVar("panel-shadow")} !default;
6
+ $kws-panel-title-color: #{cv.getVar("scheme-invert-bis")} !default;
4
7
  $kws-panel-title-weight: 700 !default;
5
8
  $kws-panel-caret-open-color: #888 !default;
6
9
  $kws-panel-caret-closed-color: #00a4d8 !default;
@@ -14,6 +17,7 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
14
17
  border-top: none;
15
18
  border-left: none;
16
19
  border-right: none;
20
+ background-color: $kws-panel-heading-background;
17
21
  .subtitle {
18
22
  font-weight: $kws-panel-title-weight;
19
23
  color: $kws-panel-title-color;
@@ -41,7 +45,9 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
41
45
  display: none;
42
46
  }
43
47
  .collapsor .icon-i {
44
- transition: transform 0.4s, color 0.4s;
48
+ transition:
49
+ transform 0.4s,
50
+ color 0.4s;
45
51
  transform: rotate(-90deg);
46
52
  color: $kws-panel-caret-open-color;
47
53
 
package/styles/RangeSlider.scss CHANGED
@@ -1,23 +1,27 @@
1
- $kws-theme-colors: $colors !default;
2
- $kws-slider-radius: $radius !default;
3
- $kws-slider-track-background: $grey-lighter !default;
4
- $kws-slider-track-radius: $radius !default;
5
- $kws-slider-track-border: 0px solid $grey !default;
6
- $kws-slider-track-shadow: 0px 0px 0px $grey !default;
7
- $kws-slider-thumb-background: $white !default;
8
- $kws-slider-thumb-radius: $radius !default;
9
- $kws-slider-thumb-border: 1px solid $grey-light !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/derived-variables" as dv;
3
+ @use "bulma/sass/utilities/functions" as fn;
4
+
5
+ $kws-theme-colors: dv.$colors !default;
6
+ $kws-slider-radius: #{cv.getVar("radius")} !default;
7
+ $kws-slider-track-background: #{cv.getVar("grey-lighter")} !default;
8
+ $kws-slider-track-radius: #{cv.getVar("radius")} !default;
9
+ $kws-slider-track-border: 0px solid #{cv.getVar("grey")} !default;
10
+ $kws-slider-track-shadow: 0px 0px 0px #{cv.getVar("grey")} !default;
11
+ $kws-slider-thumb-background: #{cv.getVar("white")} !default;
12
+ $kws-slider-thumb-radius: #{cv.getVar("radius")} !default;
13
+ $kws-slider-thumb-border: 1px solid #{cv.getVar("grey-light")} !default;
10
14
  $kws-slider-thumb-shadow: none !default;
11
15
  $kws-slider-thumb-to-track-ratio: 2 !default;
12
16
  $kws-slider-output-width: 3rem !default;
13
- $kws-slider-output-background: $grey-dark !default;
14
- $kws-slider-output-color: $white !default;
15
- $kws-slider-output-radius: $radius !default;
17
+ $kws-slider-output-background: #{cv.getVar("grey-dark")} !default;
18
+ $kws-slider-output-color: #{cv.getVar("white")} !default;
19
+ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
16
20
 
17
21
  @use "sass:math";
18
22
 
19
23
  @mixin slider-size($size) {
20
- $track-height: math.div($size, $kws-slider-thumb-to-track-ratio);
24
+ $track-height: $size / $kws-slider-thumb-to-track-ratio;
21
25
  $thumb-size: $size;
22
26
 
23
27
  min-height: calc((#{$size} + 2px) * 1.25);
@@ -47,7 +51,7 @@ $kws-slider-output-radius: $radius !default;
47
51
  margin-top: 0;
48
52
  }
49
53
  &::-webkit-slider-thumb {
50
- margin-top: -(math.div($thumb-size, 4));
54
+ margin-top: -($thumb-size / 4);
51
55
  }
52
56
  }
53
57
 
@@ -85,8 +89,8 @@ $kws-slider-output-radius: $radius !default;
85
89
  background: $kws-slider-output-background;
86
90
  border-radius: $kws-slider-output-radius;
87
91
  padding: 0.4rem 0.8rem;
88
- font-size: $size-7;
89
- line-height: $size-7;
92
+ font-size: cv.getVar("size-7");
93
+ line-height: cv.getVar("size-7");
90
94
  text-align: center;
91
95
  text-overflow: ellipsis;
92
96
  white-space: nowrap;
@@ -142,11 +146,11 @@ $kws-slider-output-radius: $radius !default;
142
146
  border: $kws-slider-track-border;
143
147
  }
144
148
  &::-ms-fill-lower {
145
- background: $grey-lighter;
149
+ background: cv.getVar("grey-lighter");
146
150
  border-radius: $kws-slider-radius;
147
151
  }
148
152
  &::-ms-fill-upper {
149
- background: $grey-lighter;
153
+ background: cv.getVar("grey-lighter");
150
154
  border-radius: $kws-slider-radius;
151
155
  }
152
156
  &::-webkit-slider-thumb {
@@ -175,13 +179,13 @@ $kws-slider-output-radius: $radius !default;
175
179
  }
176
180
  &.is-circle {
177
181
  &::-webkit-slider-thumb {
178
- border-radius: $radius-rounded;
182
+ border-radius: cv.getVar("radius-rounded");
179
183
  }
180
184
  &::-moz-range-thumb {
181
- border-radius: $radius-rounded;
185
+ border-radius: cv.getVar("radius-rounded");
182
186
  }
183
187
  &::-ms-thumb {
184
- border-radius: $radius-rounded;
188
+ border-radius: cv.getVar("radius-rounded");
185
189
  }
186
190
  }
187
191
  &:active {
@@ -212,23 +216,22 @@ $kws-slider-output-radius: $radius !default;
212
216
  transform: scale(1);
213
217
  }
214
218
  }
215
- @include slider-size($size-normal);
219
+ @include slider-size(cv.getVar("size-normal"));
216
220
 
217
221
  &.is-small {
218
- @include slider-size($size-small);
222
+ @include slider-size(cv.getVar("size-small"));
219
223
  }
220
224
  &.is-medium {
221
- @include slider-size($size-medium);
225
+ @include slider-size(cv.getVar("size-medium"));
222
226
  }
223
227
  &.is-large {
224
- @include slider-size($size-large);
228
+ @include slider-size(cv.getVar("size-large"));
225
229
  }
226
230
  @each $name, $pair in $kws-theme-colors {
227
231
  $color: nth($pair, 1);
228
- $color-invert: nth($pair, 2);
229
- $color-light: findLightColor($color);
230
- $color-dark: findDarkColor($color);
231
-
232
+ $color-invert: fn.bulmaFindColorInvert($color);
233
+ $color-light: fn.bulmaFindLightColor($color);
234
+ $color-dark: fn.bulmaFindDarkColor($color);
232
235
  &.is-#{$name} {
233
236
  &::-moz-range-track {
234
237
  background: $color !important;
package/styles/Select.scss CHANGED
@@ -1,19 +1,33 @@
1
- $kws-theme-colors: $colors !default;
2
- $kws-select-radius: $radius !default;
3
- $kws-select-focus-border-color: $input-focus-border-color !default;
4
- $kws-select-focus-box-shadow-size: $input-focus-box-shadow-size !default;
5
- $kws-select-focus-box-shadow-color: $input-focus-box-shadow-color !default;
6
- $kws-select-disabled-background-color: $input-disabled-background-color !default;
7
- $kws-select-disabled-border-color: $input-disabled-border-color !default;
8
- $kws-select-disabled-color: $input-disabled-color !default;
9
- $kws-select-selecting-color: $primary-invert !default;
10
- $kws-select-selecting-background: $primary !default;
11
- $kws-select-selected-color: $primary-dark !default;
12
- $kws-select-selected-background: $primary-light !default;
13
- $kws-select-options-background: $scheme-main-ter !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/derived-variables" as dv;
3
+
4
+ $kws-theme-colors: dv.$colors !default;
5
+ $kws-select-radius: #{cv.getVar("radius")} !default;
6
+ $kws-select-focus-border-color: hsl(
7
+ #{cv.getVar("input-focus-h")},
8
+ #{cv.getVar("input-focus-s")},
9
+ #{cv.getVar("input-focus-l")}
10
+ ) !default;
11
+ $kws-select-focus-box-shadow-size: #{cv.getVar("input-focus-shadow-size")} !default;
12
+ $kws-select-focus-box-shadow-color: hsl(
13
+ #{cv.getVar("input-focus-h")},
14
+ #{cv.getVar("input-focus-s")},
15
+ #{cv.getVar("input-focus-l")},
16
+ #{cv.getVar("input-focus-shadow-alpha")}
17
+ ) !default;
18
+ $kws-select-disabled-background-color: #{cv.getVar(
19
+ "input-disabled-background-color"
20
+ )} !default;
21
+ $kws-select-disabled-border-color: #{cv.getVar("input-disabled-border-color")} !default;
22
+ $kws-select-disabled-color: #{cv.getVar("input-disabled-color")} !default;
23
+ $kws-select-selecting-color: #{cv.getVar("primary-invert")} !default;
24
+ $kws-select-selecting-background: #{cv.getVar("primary")} !default;
25
+ $kws-select-selected-color: #{cv.getVar("primary-dark")} !default;
26
+ $kws-select-selected-background: #{cv.getVar("primary-light")} !default;
27
+ $kws-select-options-background: #{cv.getVar("scheme-main-ter")} !default;
14
28
 
15
29
  $__modal-z: 41 !default;
16
- @if $modal-z {
30
+ @if variable-exists("modal-z") {
17
31
  $__modal-z: $modal-z;
18
32
  }
19
33
 
@@ -53,6 +67,7 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
53
67
  margin-bottom: -0.25rem;
54
68
  margin-left: -0.25rem;
55
69
  margin-right: 0.25rem;
70
+ gap: 0;
56
71
  .tag.is-small {
57
72
  font-size: 0.6rem;
58
73
  .delete.is-small {
@@ -184,25 +199,27 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
184
199
  }
185
200
 
186
201
  @each $name, $pair in $kws-theme-colors {
187
- $color: nth($pair, 1);
188
- $color-invert: nth($pair, 2);
189
- $color-light: findLightColor($color);
190
- $color-dark: findDarkColor($color);
191
202
  .kws-searchableselect {
192
203
  &.is-#{$name} {
193
- border-color: $color;
204
+ border-color: cv.getVar($name);
194
205
  &:focus-within {
195
- box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
206
+ box-shadow: $kws-select-focus-box-shadow-size
207
+ hsla(
208
+ cv.getVar($name, "", "-h"),
209
+ cv.getVar($name, "", "-s"),
210
+ cv.getVar($name, "", "-l"),
211
+ cv.getVar("input-focus-shadow-alpha")
212
+ );
196
213
  }
197
214
  ul.options {
198
215
  li {
199
216
  &.selected {
200
- color: $color-dark;
201
- background: $color-light;
217
+ color: cv.getVar($name, "", "-dark");
218
+ background: cv.getVar($name, "", "-light");
202
219
  }
203
220
  &.active {
204
- color: $color-invert;
205
- background: $color;
221
+ color: cv.getVar($name, "", "-invert");
222
+ background: cv.getVar($name);
206
223
  }
207
224
  }
208
225
  }
package/styles/Skeleton.scss CHANGED
@@ -1,4 +1,9 @@
1
- $kws-theme-colors: $colors !default;
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/derived-variables" as dv;
3
+ @use "bulma/sass/utilities/functions" as fn;
4
+
5
+ $kws-theme-colors: dv.$colors !default;
6
+ $text: dv.$text !default;
2
7
  $kws-skeleton-color: lighten($text, 60%) !default;
3
8
  $kws-skeleton-hilight-color: lighten($text, 65%) !default;
4
9
 
@@ -19,13 +24,14 @@ $kws-skeleton-hilight-color: lighten($text, 65%) !default;
19
24
 
20
25
  @each $name, $pair in $kws-theme-colors {
21
26
  $color: nth($pair, 1);
22
- $color-light: findLightColor($color);
27
+ $color-light: fn.bulmaFindLightColor($color);
28
+ $color-dark: darken($color-light, 10%);
23
29
  &.is-#{$name} {
24
30
  background-color: $color-light;
25
31
  background-image: linear-gradient(
26
32
  90deg,
27
33
  $color-light,
28
- darken($color-light, 10%),
34
+ $color-dark,
29
35
  $color-light
30
36
  );
31
37
  }
package/styles/SlidingPane.scss CHANGED
@@ -1,56 +1,62 @@
1
- .sliding-pane-set{
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+
3
+ .sliding-pane-set {
2
4
  position: relative;
3
5
  overflow: hidden;
4
- width:100%;
5
- height:100%;
6
- .sliding-pane{
6
+ width: 100%;
7
+ height: 100%;
8
+ .sliding-pane {
7
9
  position: absolute;
8
- width:100%;
10
+ width: 100%;
9
11
  transform: translate3d(-100%, 0, 0);
10
12
  backface-visibility: hidden;
11
13
  transform-style: preserve-3d;
12
- transition: transform 0.4s $easeOutCustom, opacity 0.1s;
14
+ transition:
15
+ transform 0.4s cv.getVar("easing"),
16
+ opacity 0.1s;
13
17
  transform-origin: left top;
14
- .sliding-pane-inner{
15
- width:100%;
16
- height:auto;
17
- &>.columns{
18
- margin:0;
18
+ .sliding-pane-inner {
19
+ width: 100%;
20
+ height: auto;
21
+ & > .columns {
22
+ margin: 0;
19
23
  }
20
24
  }
21
- &.v-centered, .v-centered{
25
+ &.v-centered,
26
+ .v-centered {
22
27
  display: flex;
23
28
  align-items: center;
24
- width:100%;
29
+ width: 100%;
25
30
  //height:100%;
26
- overflow:auto;
31
+ overflow: auto;
27
32
  }
28
- &.h-centered, .h-centered{
33
+ &.h-centered,
34
+ .h-centered {
29
35
  display: flex;
30
36
  justify-content: center;
31
- width:100%;
37
+ width: 100%;
32
38
  //height:100%;
33
- overflow:auto;
39
+ overflow: auto;
34
40
  }
35
41
 
36
- &.is-active{
42
+ &.is-active {
37
43
  transform: translate3d(0, 0, 0);
38
- opacity:1;
39
- & ~ .sliding-pane{
44
+ opacity: 1;
45
+ & ~ .sliding-pane {
40
46
  transform: translate3d(100%, 0, 0);
41
47
  }
42
48
  }
43
49
  }
44
- &.is-vertical{
45
- .sliding-pane{
50
+ &.is-vertical {
51
+ .sliding-pane {
46
52
  transform: translate3d(0, -100%, 0);
47
- &.is-active{
53
+ &.is-active {
48
54
  transform: translate3d(0, 0, 0);
49
- opacity:1;
50
- & ~ .sliding-pane{
55
+ opacity: 1;
56
+ & ~ .sliding-pane {
51
57
  transform: translate3d(0, 100%, 0);
52
58
  }
53
59
  }
54
60
  }
55
61
  }
56
- }
62
+ }