@kws3/ui 4.4.0-alpha.1 → 4.4.0-alpha.3

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 (4) hide show
  1. package/package.json +2 -2
  2. package/styles/DataSort.scss +23 -12
  3. package/styles/Grid.scss +44 -48
  4. package/styles/Skeleton.scss +13 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kws3/ui",
3
- "version": "4.4.0-alpha.1",
3
+ "version": "4.4.0-alpha.3",
4
4
  "description": "UI components for use with Svelte v3 applications.",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
@@ -39,5 +39,5 @@
39
39
  "devDependencies": {
40
40
  "typescript": "^5.2.2"
41
41
  },
42
- "gitHead": "cf074da1936f0203001ff52e74bcf8ad2c921dd9"
42
+ "gitHead": "1ded16f6162f60f1251a3d525101c25ad9bc1cf8"
43
43
  }
package/styles/DataSort.scss CHANGED
@@ -3,22 +3,36 @@
3
3
  @use "bulma/sass/utilities/derived-variables" as dv;
4
4
  @use "bulma/sass/utilities/mixins" as mx;
5
5
 
6
+ $border-radius: cv.getVar("radius-medium") !default;
7
+ $background: cv.getVar("border") !default;
8
+ $label-background: hsla(
9
+ cv.getVar("scheme-h"),
10
+ cv.getVar("scheme-s"),
11
+ calc(cv.getVar("border-l") - 5%),
12
+ 1
13
+ ) !default;
14
+ $dropdown-text-color: cv.getVar("primary") !default;
15
+ $dropdown-marker-color: cv.getVar("primary") !default;
16
+
6
17
  .sorting-filters {
7
18
  font-weight: bold;
8
19
  margin-top: -1.55rem;
9
20
  margin-bottom: 1.5rem;
21
+ .field {
22
+ gap: 0;
23
+ }
10
24
  .control {
11
- background: cv.getVar("border");
25
+ background: $background;
12
26
  margin: 0 !important;
13
27
  padding: 0.2rem 0;
14
28
  &:first-child {
15
29
  padding-left: calc(0.625rem - 1px);
16
- border-radius: 0 0 0 #{cv.getVar("radius-medium")};
17
- background: darken(dv.$border, 5%);
30
+ border-radius: 0 0 0 $border-radius;
31
+ background: $label-background;
18
32
  padding-right: calc(0.625rem - 1px);
19
33
  }
20
34
  &:last-child {
21
- border-radius: 0 0 #{cv.getVar("radius-medium")} 0;
35
+ border-radius: 0 0 $border-radius 0;
22
36
  }
23
37
  }
24
38
  .select {
@@ -28,7 +42,7 @@
28
42
  padding-bottom: 0.2rem;
29
43
  border: none;
30
44
  background: transparent;
31
- color: #{cv.getVar("primary")};
45
+ color: $dropdown-text-color;
32
46
  height: auto;
33
47
  font-weight: bold;
34
48
  &:focus,
@@ -41,7 +55,8 @@
41
55
  }
42
56
  }
43
57
  &::after {
44
- border-color: #{cv.getVar("primary")};
58
+ border-color: $dropdown-marker-color;
59
+ top: 40%;
45
60
  }
46
61
  }
47
62
  }
@@ -54,14 +69,10 @@
54
69
  }
55
70
  .control {
56
71
  &:first-child {
57
- border-radius: #{cv.getVar("radius-large")} 0 0 #{cv.getVar(
58
- "radius-large"
59
- )};
72
+ border-radius: $border-radius 0 0 $border-radius;
60
73
  }
61
74
  &:last-child {
62
- border-radius: 0 #{cv.getVar("radius-large")} #{cv.getVar(
63
- "radius-large"
64
- )} 0;
75
+ border-radius: 0 $border-radius $border-radius 0;
65
76
  flex-grow: 1;
66
77
  flex-shrink: 1;
67
78
  .select {
package/styles/Grid.scss CHANGED
@@ -1,39 +1,36 @@
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;
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;
12
10
 
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;
11
+ $active-row-background: cv.getVar("table-row-active-background-color") !default;
12
+ $active-row-color: cv.getVar("table-row-active-color") !default;
17
13
 
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;
14
+ $background: cv.getVar("table-background-color") !default;
15
+ $striped-row-background: cv.getVar(
16
+ "table-striped-row-even-background-color"
17
+ ) !default;
18
+ $sticky-column-border-color: cv.getVar("border") !default;
19
+ $sticky-column-active-row-border-color: cv.getVar(
20
+ "table-row-active-color"
21
+ ) !default;
23
22
 
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;
23
+ $hover-background-color: cv.getVar("table-row-hover-background-color") !default;
24
+ $even-row-hover-background-color: cv.getVar(
25
+ "table-striped-row-even-hover-background-color"
26
+ ) !default;
27
+ $kws-gridView-cell-border-color: cv.getVar("table-cell-border-color") !default;
31
28
 
32
29
  .table.kws-grid-view {
33
- box-shadow: $kws-gridview-box-shadow;
30
+ box-shadow: $box-shadow;
34
31
  th {
35
- background: $kws-gridview-th-background;
36
- color: $kws-gridview-th-color;
32
+ background: $th-background;
33
+ color: $th-color;
37
34
  vertical-align: middle;
38
35
  }
39
36
  td {
@@ -58,13 +55,13 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
58
55
  }
59
56
  }
60
57
  .tag {
61
- margin: $kws-gridview-tag-margin;
58
+ margin: $tag-margin;
62
59
  }
63
60
  td.is-icon {
64
61
  width: 25px;
65
62
  vertical-align: middle;
66
63
  .icon {
67
- font-size: $kws-gridview-icon-size;
64
+ font-size: $icon-size;
68
65
  }
69
66
  }
70
67
  &.is-hoverable {
@@ -73,18 +70,11 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
73
70
  }
74
71
  }
75
72
 
76
- tr.is-selected {
77
- td {
78
- color: currentColor !important;
79
- //border-color: $kws-gridView-cell-border-color !important;
80
- }
81
- }
82
-
83
73
  tr.is-checked {
84
- background-color: $kws-gridview-checked-row-background !important;
74
+ background-color: $checked-row-background !important;
85
75
  td {
86
- background-color: $kws-gridview-checked-row-background !important;
87
- color: $kws-gridview-th-color !important;
76
+ background-color: $checked-row-background !important;
77
+ color: $th-color !important;
88
78
  }
89
79
  }
90
80
 
@@ -105,7 +95,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
105
95
  }
106
96
  .kws-sticky-columns-table-wrapper {
107
97
  position: relative;
108
- box-shadow: $kws-gridview-box-shadow;
98
+ box-shadow: $box-shadow;
109
99
 
110
100
  .data-table {
111
101
  margin-bottom: 1.5rem;
@@ -119,7 +109,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
119
109
  tbody {
120
110
  tr:not(.is-selected):not(.is-checked):hover {
121
111
  td.is-sticky-column {
122
- background-color: $kws-gridview-hover-background-color;
112
+ background-color: $hover-background-color;
123
113
  }
124
114
  }
125
115
  }
@@ -127,16 +117,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
127
117
  &.is-striped {
128
118
  tbody {
129
119
  tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
130
- background: $kws-gridview-background;
120
+ background: $background;
131
121
  }
132
122
  tr:not(.is-selected):nth-child(even) td.is-sticky-column {
133
- background: $kws-gridview-striped-row-background;
123
+ background: $striped-row-background;
134
124
  }
135
125
  tr.is-selected {
136
126
  background-color: transparent;
137
127
  td {
138
- background: $kws-gridview-active-row-background;
139
- color: $kws-gridview-active-row-color;
128
+ background: $active-row-background;
129
+ color: $active-row-color;
140
130
  }
141
131
  }
142
132
  }
@@ -144,11 +134,11 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
144
134
  tbody {
145
135
  tr:not(.is-selected):not(.is-checked):hover {
146
136
  td.is-sticky-column {
147
- background-color: $kws-gridview-hover-background-color;
137
+ background-color: $hover-background-color;
148
138
  }
149
139
  &:nth-child(even) {
150
140
  td.is-sticky-column {
151
- background-color: $kws-gridview-even-row-hover-background-color;
141
+ background-color: $even-row-hover-background-color;
152
142
  }
153
143
  }
154
144
  }
@@ -169,10 +159,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
169
159
  &.is-bordered {
170
160
  td.is-sticky-column,
171
161
  th.is-sticky-column {
172
- box-shadow: inset -1px 0 0 $kws-gridview-sticky-column-border-color;
162
+ box-shadow: inset -1px 0 0 $sticky-column-border-color;
173
163
  border-left-width: 0;
174
164
  border-right-width: 0;
175
165
  }
166
+ tr.is-selected {
167
+ td.is-sticky-column,
168
+ th.is-sticky-column {
169
+ box-shadow: inset -1px 0 0 $sticky-column-active-row-border-color;
170
+ }
171
+ }
176
172
  }
177
173
  }
178
174
 
package/styles/Skeleton.scss CHANGED
@@ -1,38 +1,30 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
  @use "bulma/sass/utilities/derived-variables" as dv;
3
- @use "bulma/sass/utilities/functions" as fn;
4
3
 
5
- $kws-theme-colors: dv.$colors !default;
6
- $text: dv.$text !default;
7
- $kws-skeleton-color: fn.bulmaLighten(dv.$text, 60%) !default;
8
- $kws-skeleton-hilight-color: fn.bulmaLighten(dv.$text, 65%) !default;
4
+ $theme-colors: dv.$colors !default;
5
+ $color: cv.getVar("text-90");
6
+ $hilight-color: cv.getVar("text-100") !default;
9
7
 
10
8
  .kws-skeleton {
11
9
  width: 100%;
12
10
  line-height: 1;
13
11
  display: inline-block;
14
- background-color: $kws-skeleton-color;
15
- background-image: linear-gradient(
16
- 90deg,
17
- $kws-skeleton-color,
18
- $kws-skeleton-hilight-color,
19
- $kws-skeleton-color
20
- );
12
+ background-color: $color;
13
+ background-image: linear-gradient(90deg, $color, $hilight-color, $color);
21
14
  background-size: 200px 100%;
22
15
  background-repeat: no-repeat;
23
16
  animation: kws-skeleton-shine 1.2s infinite;
24
17
 
25
- @each $name, $pair in $kws-theme-colors {
26
- $color: nth($pair, 1);
27
- $color-light: fn.bulmaFindLightColor($color);
28
- $color-dark: darken($color-light, 10%);
18
+ @each $name, $pair in $theme-colors {
19
+ $_color-light: cv.getVar($name, "", "-90");
20
+ $_color-dark: cv.getVar($name, "", "-60");
29
21
  &.is-#{$name} {
30
- background-color: $color-light;
22
+ background-color: $_color-light;
31
23
  background-image: linear-gradient(
32
24
  90deg,
33
- $color-light,
34
- $color-dark,
35
- $color-light
25
+ $_color-light,
26
+ $_color-dark,
27
+ $_color-light
36
28
  );
37
29
  }
38
30
  }
@@ -42,7 +34,7 @@ $kws-skeleton-hilight-color: fn.bulmaLighten(dv.$text, 65%) !default;
42
34
  background-image: linear-gradient(
43
35
  90deg,
44
36
  transparent,
45
- transparentize($kws-skeleton-hilight-color, 0.6),
37
+ cv.getVar("text-90"),
46
38
  transparent
47
39
  );
48
40
  }