@kws3/ui 4.4.0-alpha.2 → 4.4.0-alpha.4

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 (38) hide show
  1. package/controls/FileUpload.svelte +7 -4
  2. package/controls/RangeSlider.svelte +1 -1
  3. package/controls/Toggle.svelte +0 -6
  4. package/controls/ToggleButtons.svelte +2 -43
  5. package/forms/AutoComplete.svelte +1 -1
  6. package/forms/actions.d.ts +28 -5
  7. package/forms/actions.d.ts.map +1 -1
  8. package/forms/actions.js +21 -7
  9. package/forms/colorpicker/Colorpicker.svelte +1 -1
  10. package/helpers/Skeleton.svelte +3 -3
  11. package/helpers/Timeline/TimelineItem.svelte +2 -2
  12. package/package.json +2 -2
  13. package/styles/ActionSheet.scss +7 -6
  14. package/styles/AutoComplete.scss +45 -51
  15. package/styles/Canvas.scss +3 -4
  16. package/styles/Chart.scss +5 -5
  17. package/styles/CheckRadio.scss +32 -36
  18. package/styles/Colorpicker.scss +31 -9
  19. package/styles/DataSearch.scss +14 -7
  20. package/styles/DataSort.scss +4 -2
  21. package/styles/Datepicker.scss +36 -31
  22. package/styles/Divider.scss +16 -16
  23. package/styles/FileUpload.scss +37 -53
  24. package/styles/FloatingUI.scss +73 -31
  25. package/styles/Grid.scss +44 -44
  26. package/styles/Loader.scss +28 -26
  27. package/styles/Pagination.scss +52 -34
  28. package/styles/Panel.scss +16 -14
  29. package/styles/RangeSlider.scss +56 -56
  30. package/styles/Select.scss +38 -39
  31. package/styles/Skeleton.scss +56 -22
  32. package/styles/SlidingPane.scss +3 -1
  33. package/styles/Timeline.scss +25 -17
  34. package/styles/Timepicker.scss +18 -29
  35. package/styles/Toggle.scss +29 -32
  36. package/styles/ToggleButtons.scss +50 -0
  37. package/styles/Tooltip.scss +26 -24
  38. package/types/type-defs/index.d.ts +1 -1
package/styles/FloatingUI.scss CHANGED
@@ -1,9 +1,58 @@
1
1
  @use "bulma/sass/utilities/derived-variables" as dv;
2
2
  @use "bulma/sass/utilities/css-variables" as cv;
3
- @use "bulma/sass/utilities/functions" as fn;
4
3
 
5
- $kws-theme-colors: dv.$colors !default;
6
- $kws3-floating-item-width: 25rem !default;
4
+ $theme-colors: dv.$colors !default;
5
+ $item-width: 25rem !default;
6
+ $progressbar-radius: 0 cv.getVar("radius") cv.getVar("radius")
7
+ cv.getVar("radius") !default;
8
+ $notification-radius: cv.getVar("radius") !default;
9
+ $notification-shadow:
10
+ 0 1px 4px
11
+ hsla(
12
+ cv.getVar("shadow-h"),
13
+ cv.getVar("shadow-s"),
14
+ cv.getVar("shadow-l"),
15
+ 0.12
16
+ ),
17
+ 0 0 6px
18
+ hsla(
19
+ cv.getVar("shadow-h"),
20
+ cv.getVar("shadow-s"),
21
+ cv.getVar("shadow-l"),
22
+ 0.04
23
+ ) !default;
24
+ $snackbar-radius: cv.getVar("radius") !default;
25
+ $snackbar-shadow:
26
+ 0 1px 4px
27
+ hsla(
28
+ cv.getVar("shadow-h"),
29
+ cv.getVar("shadow-s"),
30
+ cv.getVar("shadow-l"),
31
+ 0.12
32
+ ),
33
+ 0 0 6px
34
+ hsla(
35
+ cv.getVar("shadow-h"),
36
+ cv.getVar("shadow-s"),
37
+ cv.getVar("shadow-l"),
38
+ 0.04
39
+ ) !default;
40
+ $toast-radius: 1.5em !default;
41
+ $toast-shadow:
42
+ 0 1px 4px
43
+ hsla(
44
+ cv.getVar("shadow-h"),
45
+ cv.getVar("shadow-s"),
46
+ cv.getVar("shadow-l"),
47
+ 0.12
48
+ ),
49
+ 0 0 6px
50
+ hsla(
51
+ cv.getVar("shadow-h"),
52
+ cv.getVar("shadow-s"),
53
+ cv.getVar("shadow-l"),
54
+ 0.04
55
+ ) !default;
7
56
 
8
57
  .kws-floatie-output {
9
58
  position: fixed;
@@ -29,8 +78,8 @@ $kws3-floating-item-width: 25rem !default;
29
78
  transform: translate3d(0, 0, 0);
30
79
  pointer-events: none;
31
80
  margin-bottom: 1rem;
32
- max-width: $kws3-floating-item-width;
33
- min-width: $kws3-floating-item-width;
81
+ max-width: $item-width;
82
+ min-width: $item-width;
34
83
  &.has-toast {
35
84
  max-width: 100%;
36
85
  width: fit-content;
@@ -60,9 +109,7 @@ $kws3-floating-item-width: 25rem !default;
60
109
  animation-name: floatie-progress-running;
61
110
  animation-fill-mode: forwards;
62
111
  animation-timing-function: linear;
63
- border-radius: 0 #{cv.getVar("radius")} #{cv.getVar("radius")} #{cv.getVar(
64
- "radius"
65
- )};
112
+ border-radius: $progressbar-radius;
66
113
  }
67
114
  .notification {
68
115
  padding: 0.5em 0.75em;
@@ -70,9 +117,8 @@ $kws3-floating-item-width: 25rem !default;
70
117
  font-size: 1rem;
71
118
  width: 100%;
72
119
  pointer-events: auto;
73
- box-shadow:
74
- 0 1px 4px rgba(0, 0, 0, 0.12),
75
- 0 0 6px rgba(0, 0, 0, 0.04);
120
+ border-radius: $notification-radius;
121
+ box-shadow: $notification-shadow;
76
122
  p {
77
123
  margin: 0;
78
124
  }
@@ -82,14 +128,12 @@ $kws3-floating-item-width: 25rem !default;
82
128
  position: relative;
83
129
  align-items: center;
84
130
  justify-content: space-around;
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);
131
+ border-radius: $snackbar-radius;
132
+ box-shadow: $snackbar-shadow;
89
133
  pointer-events: auto;
90
134
  min-height: 3em;
91
135
  background: cv.getVar("scheme-invert");
92
- color: cv.getVar("scheme-main");
136
+ color: cv.getVar("text-invert");
93
137
  font-size: 1rem;
94
138
 
95
139
  .text {
@@ -118,11 +162,11 @@ $kws3-floating-item-width: 25rem !default;
118
162
  }
119
163
  }
120
164
 
121
- @each $name, $pair in $kws-theme-colors {
122
- $color: nth($pair, 1);
123
- $color-invert: fn.bulmaFindColorInvert($color);
124
- $color-light: fn.bulmaFindLightColor($color);
125
- $color-dark: fn.bulmaFindDarkColor($color);
165
+ @each $name, $pair in $theme-colors {
166
+ $color: cv.getVar($name);
167
+ $color-invert: cv.getVar($name, "", "-invert");
168
+ $color-light: cv.getVar($name, "", "-soft");
169
+ $color-dark: cv.getVar($name, "", "-bold");
126
170
  &.is-#{$name} {
127
171
  background: $color;
128
172
  color: $color-invert;
@@ -137,22 +181,20 @@ $kws3-floating-item-width: 25rem !default;
137
181
  .toast {
138
182
  text-align: center;
139
183
  padding: 0.5em 0.75em;
140
- border-radius: 1.5em;
184
+ border-radius: $toast-radius;
141
185
  margin: 0;
142
- box-shadow:
143
- 0 1px 4px rgba(0, 0, 0, 0.12),
144
- 0 0 6px rgba(0, 0, 0, 0.04);
186
+ box-shadow: $toast-shadow;
145
187
  pointer-events: none;
146
188
  background: cv.getVar("scheme-invert");
147
- color: cv.getVar("scheme-main");
189
+ color: cv.getVar("text-invert");
148
190
  white-space: nowrap;
149
191
  overflow: hidden;
150
192
  text-overflow: ellipsis;
151
- @each $name, $pair in $kws-theme-colors {
152
- $color: nth($pair, 1);
153
- $color-invert: fn.bulmaFindColorInvert($color);
154
- $color-light: fn.bulmaFindLightColor($color);
155
- $color-dark: fn.bulmaFindDarkColor($color);
193
+ @each $name, $pair in $theme-colors {
194
+ $color: cv.getVar($name);
195
+ $color-invert: cv.getVar($name, "", "-invert");
196
+ $color-light: cv.getVar($name, "", "-soft");
197
+ $color-dark: cv.getVar($name, "", "-bold");
156
198
  &.is-#{$name} {
157
199
  background: $color;
158
200
  color: $color-invert;
package/styles/Grid.scss CHANGED
@@ -1,39 +1,33 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
  @use "bulma/sass/utilities/functions" as fn;
3
3
 
4
- $kws-gridview-box-shadow:
5
- 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
6
- 0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
7
- $kws-gridview-th-background: #{cv.getVar("table-background-color")} !default;
8
- $kws-gridview-th-color: #{cv.getVar("text")} !default;
9
- $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
10
- $kws-gridview-icon-size: 1.5em !default;
11
- $kws-gridview-checked-row-background: #{cv.getVar("info-light")} !default;
12
-
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;
17
-
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;
23
-
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;
4
+ $box-shadow: cv.getVar("shadow") !default;
5
+ $th-background: cv.getVar("table-background-color") !default;
6
+ $th-color: cv.getVar("text") !default;
7
+ $tag-margin: 0 0.125rem 0.125rem 0 !default;
8
+ $icon-size: 1.5em !default;
9
+ $checked-row-background: cv.getVar("info-light") !default;
10
+ $active-row-background: cv.getVar("table-row-active-background-color") !default;
11
+ $active-row-color: cv.getVar("table-row-active-color") !default;
12
+ $background: cv.getVar("table-background-color") !default;
13
+ $striped-row-background: cv.getVar(
14
+ "table-striped-row-even-background-color"
15
+ ) !default;
16
+ $sticky-column-border-color: cv.getVar("border") !default;
17
+ $sticky-column-active-row-border-color: cv.getVar(
18
+ "table-row-active-color"
19
+ ) !default;
20
+ $hover-background-color: cv.getVar("table-row-hover-background-color") !default;
21
+ $even-row-hover-background-color: cv.getVar(
22
+ "table-striped-row-even-hover-background-color"
23
+ ) !default;
24
+ $cell-border-color: cv.getVar("table-cell-border-color") !default;
31
25
 
32
26
  .table.kws-grid-view {
33
- box-shadow: $kws-gridview-box-shadow;
27
+ box-shadow: $box-shadow;
34
28
  th {
35
- background: $kws-gridview-th-background;
36
- color: $kws-gridview-th-color;
29
+ background: $th-background;
30
+ color: $th-color;
37
31
  vertical-align: middle;
38
32
  }
39
33
  td {
@@ -58,13 +52,13 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
58
52
  }
59
53
  }
60
54
  .tag {
61
- margin: $kws-gridview-tag-margin;
55
+ margin: $tag-margin;
62
56
  }
63
57
  td.is-icon {
64
58
  width: 25px;
65
59
  vertical-align: middle;
66
60
  .icon {
67
- font-size: $kws-gridview-icon-size;
61
+ font-size: $icon-size;
68
62
  }
69
63
  }
70
64
  &.is-hoverable {
@@ -74,10 +68,10 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
74
68
  }
75
69
 
76
70
  tr.is-checked {
77
- background-color: $kws-gridview-checked-row-background !important;
71
+ background-color: $checked-row-background !important;
78
72
  td {
79
- background-color: $kws-gridview-checked-row-background !important;
80
- color: $kws-gridview-th-color !important;
73
+ background-color: $checked-row-background !important;
74
+ color: $th-color !important;
81
75
  }
82
76
  }
83
77
 
@@ -98,7 +92,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
98
92
  }
99
93
  .kws-sticky-columns-table-wrapper {
100
94
  position: relative;
101
- box-shadow: $kws-gridview-box-shadow;
95
+ box-shadow: $box-shadow;
102
96
 
103
97
  .data-table {
104
98
  margin-bottom: 1.5rem;
@@ -112,7 +106,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
112
106
  tbody {
113
107
  tr:not(.is-selected):not(.is-checked):hover {
114
108
  td.is-sticky-column {
115
- background-color: $kws-gridview-hover-background-color;
109
+ background-color: $hover-background-color;
116
110
  }
117
111
  }
118
112
  }
@@ -120,16 +114,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
120
114
  &.is-striped {
121
115
  tbody {
122
116
  tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
123
- background: $kws-gridview-background;
117
+ background: $background;
124
118
  }
125
119
  tr:not(.is-selected):nth-child(even) td.is-sticky-column {
126
- background: $kws-gridview-striped-row-background;
120
+ background: $striped-row-background;
127
121
  }
128
122
  tr.is-selected {
129
123
  background-color: transparent;
130
124
  td {
131
- background: $kws-gridview-active-row-background;
132
- color: $kws-gridview-active-row-color;
125
+ background: $active-row-background;
126
+ color: $active-row-color;
133
127
  }
134
128
  }
135
129
  }
@@ -137,11 +131,11 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
137
131
  tbody {
138
132
  tr:not(.is-selected):not(.is-checked):hover {
139
133
  td.is-sticky-column {
140
- background-color: $kws-gridview-hover-background-color;
134
+ background-color: $hover-background-color;
141
135
  }
142
136
  &:nth-child(even) {
143
137
  td.is-sticky-column {
144
- background-color: $kws-gridview-even-row-hover-background-color;
138
+ background-color: $even-row-hover-background-color;
145
139
  }
146
140
  }
147
141
  }
@@ -162,10 +156,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
162
156
  &.is-bordered {
163
157
  td.is-sticky-column,
164
158
  th.is-sticky-column {
165
- box-shadow: inset -1px 0 0 $kws-gridview-sticky-column-border-color;
159
+ box-shadow: inset -1px 0 0 $sticky-column-border-color;
166
160
  border-left-width: 0;
167
161
  border-right-width: 0;
168
162
  }
163
+ tr.is-selected {
164
+ td.is-sticky-column,
165
+ th.is-sticky-column {
166
+ box-shadow: inset -1px 0 0 $sticky-column-active-row-border-color;
167
+ }
168
+ }
169
169
  }
170
170
  }
171
171
 
package/styles/Loader.scss CHANGED
@@ -1,31 +1,33 @@
1
1
  @use "bulma/sass/utilities/derived-variables" as dv;
2
+ @use "bulma/sass/utilities/css-variables" as cv;
2
3
  @use "bulma/sass/utilities/mixins" as mx;
3
4
 
4
- $kws-theme-colors: dv.$colors !default;
5
- $kws-loader-width: 2rem !default;
6
- $kws-loader-height: 2rem !default;
7
- $kws-loader-width-medium: ($kws-loader-width * 1.5) !default;
8
- $kws-loader-height-medium: ($kws-loader-height * 1.5) !default;
9
- $kws-loader-width-large: ($kws-loader-width * 3) !default;
10
- $kws-loader-height-large: ($kws-loader-height * 3) !default;
11
- $kws-loader-color: #ccc !default;
12
- $kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
5
+ $theme-colors: dv.$colors !default;
6
+ $width: 2rem !default;
7
+ $height: 2rem !default;
8
+ $width-medium: ($width * 1.5) !default;
9
+ $height-medium: ($height * 1.5) !default;
10
+ $width-large: ($width * 3) !default;
11
+ $height-large: ($height * 3) !default;
12
+ $color: cv.getVar("text") !default;
13
+ $overlay-background: rgba(0, 0, 0, 0.15) !default;
14
+
13
15
  .kws-loader {
14
16
  .hero-body {
15
17
  position: relative;
16
18
  &:after {
17
19
  @include mx.loader();
18
- border-left-color: $kws-loader-color;
19
- border-bottom-color: $kws-loader-color;
20
+ border-left-color: $color;
21
+ border-bottom-color: $color;
20
22
  position: absolute !important;
21
- width: $kws-loader-width;
22
- height: $kws-loader-height;
23
- left: calc(50% - (#{$kws-loader-width} / 2));
24
- top: calc(50% - (#{$kws-loader-height} / 2));
23
+ width: $width;
24
+ height: $height;
25
+ left: calc(50% - (#{$width} / 2));
26
+ top: calc(50% - (#{$height} / 2));
25
27
  }
26
28
 
27
- @each $name, $pair in $kws-theme-colors {
28
- $color: nth($pair, 1);
29
+ @each $name, $pair in $theme-colors {
30
+ $color: cv.getVar($name);
29
31
  &.is-#{$name} {
30
32
  &:after {
31
33
  border-left-color: $color !important;
@@ -36,19 +38,19 @@ $kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
36
38
 
37
39
  &.is-medium {
38
40
  &:after {
39
- width: $kws-loader-width-medium;
40
- height: $kws-loader-height-medium;
41
- left: calc(50% - (#{$kws-loader-width-medium} / 2));
42
- top: calc(50% - (#{$kws-loader-height-medium} / 2));
41
+ width: $width-medium;
42
+ height: $height-medium;
43
+ left: calc(50% - (#{$width-medium} / 2));
44
+ top: calc(50% - (#{$height-medium} / 2));
43
45
  }
44
46
  }
45
47
 
46
48
  &.is-large {
47
49
  &:after {
48
- width: $kws-loader-width-large;
49
- height: $kws-loader-height-large;
50
- left: calc(50% - (#{$kws-loader-width-large} / 2));
51
- top: calc(50% - (#{$kws-loader-height-large} / 2));
50
+ width: $width-large;
51
+ height: $height-large;
52
+ left: calc(50% - (#{$width-large} / 2));
53
+ top: calc(50% - (#{$height-large} / 2));
52
54
  }
53
55
  }
54
56
  }
@@ -61,7 +63,7 @@ $kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
61
63
  height: 100%;
62
64
  width: 100%;
63
65
  position: relative;
64
- background: $kws-loader-overlay-background;
66
+ background: $overlay-background;
65
67
  z-index: 3;
66
68
  .hero-body {
67
69
  padding: 0;
package/styles/Pagination.scss CHANGED
@@ -1,24 +1,36 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
  @use "bulma/sass/utilities/mixins" as mx;
3
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;
7
- $kws-pagination-item-hover-color: $kws-pagination-item-color !default;
8
- $kws-pagination-item-hover-border: $kws-pagination-item-border !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;
14
- $kws-pagination-item-active-color: findColorInvert(
15
- $kws-pagination-item-active-background
4
+ $item-color: cv.getVar("text") !default;
5
+ $item-background: cv.getVar("scheme-main") !default;
6
+ $item-border: 1px solid cv.getVar("border") !default;
7
+ $item-hover-color: $item-color !default;
8
+ $item-hover-border: $item-border !default;
9
+ $item-disabled-background: cv.getVar(
10
+ "pagination-disabled-background-color"
16
11
  ) !default;
12
+ $item-disabled-color: cv.getVar("pagination-disabled-color") !default;
13
+ $item-ellipsis-background: transparent !default;
14
+ $item-ellipsis-border-color: transparent !default;
15
+ $item-active-background: cv.getVar("success") !default;
16
+ $item-active-color: cv.getVar("success-invert") !default;
17
17
 
18
- $kws-pagination-frame-box-shadow:
19
- 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
20
- 0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
21
- $kws-pagination-frame-background: linear-gradient(
18
+ $frame-box-shadow:
19
+ 0 0.125rem 0.1875rem
20
+ rgba(
21
+ cv.getVar("shadow-h"),
22
+ cv.getVar("shadow-s"),
23
+ cv.getVar("shadow-l"),
24
+ 0.1
25
+ ),
26
+ 0 0 0 0.0625rem
27
+ rgba(
28
+ cv.getVar("shadow-h"),
29
+ cv.getVar("shadow-s"),
30
+ cv.getVar("shadow-l"),
31
+ 0.1
32
+ ) !default;
33
+ $frame-background: linear-gradient(
22
34
  cv.getVar("scheme-main"),
23
35
  cv.getVar("scheme-main-ter")
24
36
  ) !default;
@@ -41,31 +53,31 @@ $kws-pagination-frame-background: linear-gradient(
41
53
  .pagination-next,
42
54
  .pagination-link,
43
55
  .pagination-ellipsis {
44
- background: $kws-pagination-item-background;
45
- color: $kws-pagination-item-color;
46
- border: $kws-pagination-item-border;
56
+ background: $item-background;
57
+ color: $item-color;
58
+ border: $item-border;
47
59
  margin: 0;
48
60
  border-radius: 0;
49
61
  min-height: 100%;
50
62
  margin-left: -1px;
51
63
  &.is-disabled {
52
- background: $kws-pagination-item-disabled-background;
53
- color: $kws-pagination-item-disabled-color;
64
+ background: $item-disabled-background;
65
+ color: $item-disabled-color;
54
66
  }
55
67
  &:hover {
56
- border: $kws-pagination-item-hover-border;
57
- color: $kws-pagination-item-hover-color;
68
+ border: $item-hover-border;
69
+ color: $item-hover-color;
58
70
  }
59
71
  }
60
72
  .pagination-ellipsis {
61
- background: $kws-pagination-item-ellipsis-background;
62
- border-color: $kws-pagination-item-ellipsis-border-color;
73
+ background: $item-ellipsis-background;
74
+ border-color: $item-ellipsis-border-color;
63
75
  }
64
76
  .pagination-link.is-current {
65
77
  text-shadow: none;
66
- color: $kws-pagination-item-active-color;
67
- background: $kws-pagination-item-active-background;
68
- border-color: $kws-pagination-item-active-background;
78
+ color: $item-active-color;
79
+ background: $item-active-background;
80
+ border-color: $item-active-background;
69
81
  }
70
82
  .pagination-list {
71
83
  &.pagination-limit-chooser {
@@ -75,18 +87,24 @@ $kws-pagination-frame-background: linear-gradient(
75
87
  }
76
88
  .pagination_frame.has-frame {
77
89
  padding: 0.625rem;
78
- box-shadow: $kws-pagination-frame-box-shadow;
79
- background: $kws-pagination-frame-background;
90
+ box-shadow: $frame-box-shadow;
91
+ background: $frame-background;
80
92
  }
81
93
 
82
94
  @include mx.mobile {
83
95
  .pagination_frame {
84
96
  .level {
85
- display: flex;
86
- flex-wrap: wrap;
97
+ justify-content: center;
98
+ flex-direction: column;
87
99
  .level-right {
88
- margin-top: 0.75rem;
89
- flex-basis: 100%;
100
+ margin-top: 0;
101
+ }
102
+ .level-left {
103
+ .level-item {
104
+ .pagination {
105
+ flex-direction: column;
106
+ }
107
+ }
90
108
  }
91
109
  }
92
110
  .pagination-showing {
package/styles/Panel.scss CHANGED
@@ -1,26 +1,27 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
 
3
- $kws-panel-heading-background: #{cv.getVar("scheme-main-bis")} !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;
7
- $kws-panel-title-weight: 700 !default;
8
- $kws-panel-caret-open-color: #888 !default;
9
- $kws-panel-caret-closed-color: #00a4d8 !default;
3
+ $heading-background: cv.getVar("scheme-main-bis") !default;
4
+ $background: cv.getVar("scheme-main") !default;
5
+ $box-shadow: cv.getVar("shadow") !default;
6
+ $color: cv.getVar("text") !default;
7
+ $title-color: cv.getVar("text") !default;
8
+ $title-weight: 600 !default;
9
+ $caret-open-color: cv.getVar("text") !default;
10
+ $caret-closed-color: cv.getVar("link") !default;
10
11
 
11
12
  .panel {
12
- background: $kws-panel-background;
13
+ background: $background;
13
14
  border-radius: none;
14
15
  border: none;
15
- box-shadow: $kws-panel-box-shadow;
16
+ box-shadow: $box-shadow;
16
17
  .panel-heading {
17
18
  border-top: none;
18
19
  border-left: none;
19
20
  border-right: none;
20
- background-color: $kws-panel-heading-background;
21
+ background-color: $heading-background;
21
22
  .subtitle {
22
- font-weight: $kws-panel-title-weight;
23
- color: $kws-panel-title-color;
23
+ font-weight: $title-weight;
24
+ color: $title-color;
24
25
  }
25
26
  .level {
26
27
  .level-right {
@@ -35,6 +36,7 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
35
36
  border: none;
36
37
  padding: 0.9375rem 1.25rem 1.25rem 1.25rem;
37
38
  display: block;
39
+ color: $color;
38
40
  }
39
41
 
40
42
  &.collapsible .panel-heading {
@@ -49,7 +51,7 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
49
51
  transform 0.4s,
50
52
  color 0.4s;
51
53
  transform: rotate(-90deg);
52
- color: $kws-panel-caret-open-color;
54
+ color: $caret-open-color;
53
55
 
54
56
  font-size: 1.5em;
55
57
  line-height: 0.9em;
@@ -62,7 +64,7 @@ $kws-panel-caret-closed-color: #00a4d8 !default;
62
64
 
63
65
  &.collapsed .collapsor .icon-i {
64
66
  transform: rotate(90deg) translate(5px, 0);
65
- color: $kws-panel-caret-closed-color;
67
+ color: $caret-closed-color;
66
68
  }
67
69
 
68
70
  &.collapsible .panel-content-outer {