@kws3/ui 4.4.0-alpha.2 → 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 +2 -1
  3. package/styles/Grid.scss +44 -41
  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.2",
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": "67ef949462d49fde55b07a24d2a484f9840771dd"
42
+ "gitHead": "1ded16f6162f60f1251a3d525101c25ad9bc1cf8"
43
43
  }
package/styles/DataSort.scss CHANGED
@@ -8,7 +8,7 @@ $background: cv.getVar("border") !default;
8
8
  $label-background: hsla(
9
9
  cv.getVar("scheme-h"),
10
10
  cv.getVar("scheme-s"),
11
- 90%,
11
+ calc(cv.getVar("border-l") - 5%),
12
12
  1
13
13
  ) !default;
14
14
  $dropdown-text-color: cv.getVar("primary") !default;
@@ -56,6 +56,7 @@ $dropdown-marker-color: cv.getVar("primary") !default;
56
56
  }
57
57
  &::after {
58
58
  border-color: $dropdown-marker-color;
59
+ top: 40%;
59
60
  }
60
61
  }
61
62
  }
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 {
@@ -74,10 +71,10 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
74
71
  }
75
72
 
76
73
  tr.is-checked {
77
- background-color: $kws-gridview-checked-row-background !important;
74
+ background-color: $checked-row-background !important;
78
75
  td {
79
- background-color: $kws-gridview-checked-row-background !important;
80
- color: $kws-gridview-th-color !important;
76
+ background-color: $checked-row-background !important;
77
+ color: $th-color !important;
81
78
  }
82
79
  }
83
80
 
@@ -98,7 +95,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
98
95
  }
99
96
  .kws-sticky-columns-table-wrapper {
100
97
  position: relative;
101
- box-shadow: $kws-gridview-box-shadow;
98
+ box-shadow: $box-shadow;
102
99
 
103
100
  .data-table {
104
101
  margin-bottom: 1.5rem;
@@ -112,7 +109,7 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
112
109
  tbody {
113
110
  tr:not(.is-selected):not(.is-checked):hover {
114
111
  td.is-sticky-column {
115
- background-color: $kws-gridview-hover-background-color;
112
+ background-color: $hover-background-color;
116
113
  }
117
114
  }
118
115
  }
@@ -120,16 +117,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
120
117
  &.is-striped {
121
118
  tbody {
122
119
  tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
123
- background: $kws-gridview-background;
120
+ background: $background;
124
121
  }
125
122
  tr:not(.is-selected):nth-child(even) td.is-sticky-column {
126
- background: $kws-gridview-striped-row-background;
123
+ background: $striped-row-background;
127
124
  }
128
125
  tr.is-selected {
129
126
  background-color: transparent;
130
127
  td {
131
- background: $kws-gridview-active-row-background;
132
- color: $kws-gridview-active-row-color;
128
+ background: $active-row-background;
129
+ color: $active-row-color;
133
130
  }
134
131
  }
135
132
  }
@@ -137,11 +134,11 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
137
134
  tbody {
138
135
  tr:not(.is-selected):not(.is-checked):hover {
139
136
  td.is-sticky-column {
140
- background-color: $kws-gridview-hover-background-color;
137
+ background-color: $hover-background-color;
141
138
  }
142
139
  &:nth-child(even) {
143
140
  td.is-sticky-column {
144
- background-color: $kws-gridview-even-row-hover-background-color;
141
+ background-color: $even-row-hover-background-color;
145
142
  }
146
143
  }
147
144
  }
@@ -162,10 +159,16 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
162
159
  &.is-bordered {
163
160
  td.is-sticky-column,
164
161
  th.is-sticky-column {
165
- box-shadow: inset -1px 0 0 $kws-gridview-sticky-column-border-color;
162
+ box-shadow: inset -1px 0 0 $sticky-column-border-color;
166
163
  border-left-width: 0;
167
164
  border-right-width: 0;
168
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
+ }
169
172
  }
170
173
  }
171
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
  }