@sk-web-gui/core 0.1.51 → 0.1.53

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 (5) hide show
  1. package/package.json +2 -2
  2. package/src/components/alert-banner.js +2 -2
  3. package/src/components/checkbox.js +2 -2
  4. package/src/components/dropdown-filter.js +61 -62
  5. package/src/components/forms.js +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.51",
3
+ "version": "0.1.53",
4
4
  "license": "MIT",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -31,5 +31,5 @@
31
31
  "postcss-import": "^14.0.2",
32
32
  "tailwindcss": "^2.2.4"
33
33
  },
34
- "gitHead": "caf8dd4bd626f3b5b6e2fbb382436e605cd0c3ae"
34
+ "gitHead": "52eadc25b58d23c56796ffb4442f598550a16cf7"
35
35
  }
package/src/components/alert-banner.js CHANGED
@@ -14,8 +14,8 @@ module.exports = Modal = () => ({
14
14
  '@apply mr-[10px]': {},
15
15
  },
16
16
 
17
- '&-message': {
18
- '@apply underline inline-block max-w-[800px] text-body text-base': {},
17
+ '&-children': {
18
+ '@apply w-full underline inline-block max-w-[800px] text-body text-base': {},
19
19
  },
20
20
 
21
21
  '&-close': {
package/src/components/checkbox.js CHANGED
@@ -96,8 +96,8 @@ module.exports = Checkbox = (colors, theme) => ({
96
96
  },
97
97
 
98
98
  // disabled
99
- '&-disabled': {
100
- backgroundColor: '#ECECEC',
99
+ '&-disabled, &-disabled:checked': {
100
+ '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {},
101
101
  //"@apply disabled:bg-gray-stroke": {},
102
102
  //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
103
103
  //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
package/src/components/dropdown-filter.js CHANGED
@@ -1,73 +1,72 @@
1
1
  module.exports = DropdownFilter = () => ({
2
- ".DropdownFilter": {
3
- position: "relative",
4
- height: 50,
5
- border: "1px solid #939393",
6
- maxWidth: 291,
7
- display: "flex",
8
- background: "#fff",
9
- borderRadius: 2,
10
-
11
- ".dropdown-button": {
12
- justifyContent: "space-between",
13
- display: "flex",
14
- flexGrow: 1,
15
- alignItems: "center",
16
- padding: "0 1rem",
2
+ '.DropdownFilter': {
3
+ position: 'relative',
4
+ height: 50,
5
+ border: '1px solid #939393',
6
+ maxWidth: 291,
7
+ display: 'flex',
8
+ background: '#fff',
9
+ borderRadius: 2,
17
10
 
18
- ".arrow-icon": {
19
- transform: "rotate(180deg)",
11
+ '.dropdown-button': {
12
+ justifyContent: 'space-between',
13
+ display: 'flex',
14
+ flexGrow: 1,
15
+ alignItems: 'center',
16
+ padding: '0 1rem',
20
17
 
21
- "&.open": {
22
- transform: "rotate(0)"
23
- }
24
- }
18
+ '.arrow-icon': {
19
+ transform: 'rotate(180deg)',
20
+
21
+ '&.open': {
22
+ transform: 'rotate(0)',
25
23
  },
24
+ },
25
+ },
26
+
27
+ '.filter-container': {
28
+ position: 'absolute',
29
+ top: '100%',
30
+ left: '-1px',
31
+ zIndex: 10,
32
+ width: 'calc(100% + 2px)',
33
+ background: '#fff',
34
+ border: '1px solid #939393',
35
+ padding: '1rem',
36
+ borderRadius: 2,
26
37
 
27
- ".fitler-container": {
28
- position: "absolute",
29
- top: "100%",
30
- left: "-1px",
31
- zIndex: 10,
32
- width: "calc(100% + 2px)",
33
- background: "#fff",
34
- border: "1px solid #939393",
35
- padding: "1rem",
36
- borderRadius: 2,
38
+ '.filter-controls': {
39
+ display: 'flex',
40
+ justifyContent: 'flex-end',
41
+ padding: '0 1rem',
42
+ paddingBottom: 12,
37
43
 
38
- ".filter-controls": {
39
- display: "flex",
40
- justifyContent: "flex-end",
41
- padding: "0 1rem",
42
- paddingBottom: 12,
44
+ button: {
45
+ marginLeft: '1rem',
46
+ textDecoration: 'underline',
47
+ },
48
+ },
43
49
 
44
- "button": {
45
- marginLeft: "1rem",
46
- textDecoration: "underline"
47
- }
48
- },
50
+ '.FilterItem': {
51
+ height: 48,
52
+ display: 'flex',
53
+ justifyContent: 'space-between',
54
+ alignItems: 'center',
55
+ borderBottom: '1px solid #939393',
56
+ padding: '0 1rem',
49
57
 
50
- ".FilterItem": {
51
- height: 48,
52
- display: "flex",
53
- justifyContent: "space-between",
54
- alignItems: "center",
55
- borderBottom: "1px solid #939393",
56
- padding: "0 1rem",
57
-
58
- "&.disabled": {
59
- color: "#939393"
60
- },
58
+ '&.disabled': {
59
+ color: '#939393',
60
+ },
61
61
 
62
- "&:first-of-type": {
63
- borderTop: "1px solid #939393",
64
- },
62
+ '&:first-of-type': {
63
+ borderTop: '1px solid #939393',
64
+ },
65
65
 
66
- "&:last-child": {
67
- borderBottom: "none",
68
- }
69
- }
70
- }
71
- }
66
+ '&:last-child': {
67
+ borderBottom: 'none',
68
+ },
69
+ },
70
+ },
71
+ },
72
72
  });
73
-
package/src/components/forms.js CHANGED
@@ -211,9 +211,9 @@ module.exports = Forms = (colors) => ({
211
211
  padding: '1.32rem 1.76rem',
212
212
  },
213
213
 
214
- '&-disabled': {
215
- '@apply disabled:cursor-not-allowed': {},
216
- '@apply disabled:bg-gray-lighter': {},
214
+ '&-disabled, &&-disabled': {
215
+ '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
216
+ '@apply disabled:bg-gray-lighter bg-gray-lighter': {},
217
217
  //"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
218
218
  //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
219
219
  //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20": {},