@sk-web-gui/core 0.1.8 → 0.1.11

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/colors.js +68 -0
  3. package/src/components/pagination.js +70 -0
  4. package/src/components/tag.js +1 -1
  5. package/src/index.js +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.8",
3
+ "version": "0.1.11",
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": "6399e82a177dee62d0f8fb10e3fbe3d7f80a1cac"
34
+ "gitHead": "2aea5f0eee07746231bea3ef99993620c0c0dc8f"
35
35
  }
package/src/colors.js CHANGED
@@ -35,6 +35,74 @@ module.exports = {
35
35
  900: withOpacity("--vc-colors-secondary-DEFAULT"),
36
36
  },
37
37
 
38
+ success: {
39
+ DEFAULT: withOpacity("--vc-colors-success-DEFAULT"),
40
+ dark: withOpacity("--vc-colors-success-dark"),
41
+ light: withOpacity("--vc-colors-success-light"),
42
+ active: withOpacity("--vc-colors-success-active"),
43
+ 50: withOpacity("--vc-colors-success-DEFAULT"),
44
+ 100: withOpacity("--vc-colors-success-DEFAULT"),
45
+ 200: withOpacity("--vc-colors-success-DEFAULT"),
46
+ 300: withOpacity("--vc-colors-success-DEFAULT"),
47
+ 400: withOpacity("--vc-colors-success-DEFAULT"),
48
+ 500: withOpacity("--vc-colors-success-DEFAULT"),
49
+ 600: withOpacity("--vc-colors-success-DEFAULT"),
50
+ 700: withOpacity("--vc-colors-success-DEFAULT"),
51
+ 800: withOpacity("--vc-colors-success-DEFAULT"),
52
+ 900: withOpacity("--vc-colors-success-DEFAULT"),
53
+ },
54
+
55
+ info: {
56
+ DEFAULT: withOpacity("--vc-colors-info-DEFAULT"),
57
+ dark: withOpacity("--vc-colors-info-dark"),
58
+ light: withOpacity("--vc-colors-info-light"),
59
+ active: withOpacity("--vc-colors-info-active"),
60
+ 50: withOpacity("--vc-colors-info-DEFAULT"),
61
+ 100: withOpacity("--vc-colors-info-DEFAULT"),
62
+ 200: withOpacity("--vc-colors-info-DEFAULT"),
63
+ 300: withOpacity("--vc-colors-info-DEFAULT"),
64
+ 400: withOpacity("--vc-colors-info-DEFAULT"),
65
+ 500: withOpacity("--vc-colors-info-DEFAULT"),
66
+ 600: withOpacity("--vc-colors-info-DEFAULT"),
67
+ 700: withOpacity("--vc-colors-info-DEFAULT"),
68
+ 800: withOpacity("--vc-colors-info-DEFAULT"),
69
+ 900: withOpacity("--vc-colors-info-DEFAULT"),
70
+ },
71
+
72
+ warning: {
73
+ DEFAULT: withOpacity("--vc-colors-warning-DEFAULT"),
74
+ dark: withOpacity("--vc-colors-warning-dark"),
75
+ light: withOpacity("--vc-colors-warning-light"),
76
+ active: withOpacity("--vc-colors-warning-active"),
77
+ 50: withOpacity("--vc-colors-warning-DEFAULT"),
78
+ 100: withOpacity("--vc-colors-warning-DEFAULT"),
79
+ 200: withOpacity("--vc-colors-warning-DEFAULT"),
80
+ 300: withOpacity("--vc-colors-warning-DEFAULT"),
81
+ 400: withOpacity("--vc-colors-warning-DEFAULT"),
82
+ 500: withOpacity("--vc-colors-warning-DEFAULT"),
83
+ 600: withOpacity("--vc-colors-warning-DEFAULT"),
84
+ 700: withOpacity("--vc-colors-warning-DEFAULT"),
85
+ 800: withOpacity("--vc-colors-warning-DEFAULT"),
86
+ 900: withOpacity("--vc-colors-warning-DEFAULT"),
87
+ },
88
+
89
+ error: {
90
+ DEFAULT: withOpacity("--vc-colors-error-DEFAULT"),
91
+ dark: withOpacity("--vc-colors-error-dark"),
92
+ light: withOpacity("--vc-colors-error-light"),
93
+ active: withOpacity("--vc-colors-error-active"),
94
+ 50: withOpacity("--vc-colors-error-DEFAULT"),
95
+ 100: withOpacity("--vc-colors-error-DEFAULT"),
96
+ 200: withOpacity("--vc-colors-error-DEFAULT"),
97
+ 300: withOpacity("--vc-colors-error-DEFAULT"),
98
+ 400: withOpacity("--vc-colors-error-DEFAULT"),
99
+ 500: withOpacity("--vc-colors-error-DEFAULT"),
100
+ 600: withOpacity("--vc-colors-error-DEFAULT"),
101
+ 700: withOpacity("--vc-colors-error-DEFAULT"),
102
+ 800: withOpacity("--vc-colors-error-DEFAULT"),
103
+ 900: withOpacity("--vc-colors-error-DEFAULT"),
104
+ },
105
+
38
106
  neutral: {
39
107
  DEFAULT: withOpacity("--vc-colors-neutral"),
40
108
  50: withOpacity("--vc-colors-neutral-50"),
package/src/components/pagination.js ADDED
@@ -0,0 +1,70 @@
1
+ module.exports = Pagination = () => ({
2
+ ".pagination": {
3
+ "@apply select-none": {},
4
+
5
+ "&-sm": {
6
+ "@apply text-xs": {},
7
+ },
8
+
9
+ "&-md": {
10
+ "@apply text-lg": {},
11
+ },
12
+
13
+ "&-lg": {
14
+ "@apply text-xl": {},
15
+ },
16
+
17
+ "&-list": {
18
+ "@apply flex items-baseline": {},
19
+ },
20
+
21
+ "&-pageLabel": {
22
+ "@apply cursor-pointer m-sm": {},
23
+ width: "1.5em",
24
+ height: "1.75em",
25
+
26
+ "&[aria-disabled='true']": {
27
+ "@apply border-primary border-b cursor-default text-primary": {},
28
+ },
29
+ },
30
+
31
+ "&-prevNextButton": {
32
+ "@apply ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none":
33
+ {},
34
+
35
+ "&[data-reverse=true]": {
36
+ "@apply mr-4 ml-0 flex-row-reverse": {},
37
+
38
+ ".pagination-prevNextButton-label": {
39
+ "@apply mr-sm ml-0": {},
40
+ },
41
+ },
42
+
43
+ "&[disabled]": {
44
+ "@apply opacity-50 cursor-default": {},
45
+ },
46
+
47
+ "&[disabled='false']": {
48
+ "&-label, &-icon": {
49
+ "@apply cursor-pointer": {},
50
+ },
51
+ },
52
+
53
+ "&-label": {
54
+ "@apply hidden sm:inline ml-sm leading-none": {},
55
+ },
56
+
57
+ "&-icon": {
58
+ "@apply m-1 align-text-bottom leading-none flex items-center": {},
59
+
60
+ ".material-icons-outlined": {
61
+ fontSize: ".675em",
62
+ },
63
+ },
64
+ },
65
+
66
+ "&-ellipsis": {
67
+ "@apply inline-block w-16 text-center": {},
68
+ },
69
+ },
70
+ });
package/src/components/tag.js CHANGED
@@ -53,7 +53,7 @@ module.exports = Tag = (colors) => ({
53
53
  borderRadius: "3.2rem",
54
54
 
55
55
  "&-text": {
56
- padding: "0.4285em 0"
56
+ padding: "0.5em 0"
57
57
  },
58
58
 
59
59
  "&-sm": {
package/src/index.js CHANGED
@@ -30,6 +30,7 @@ const Divider = require("./components/divider");
30
30
  const UserMenu = require("./components/user-menu");
31
31
 
32
32
  const Tag = require("./components/tag");
33
+ const Pagination = require("./components/pagination");
33
34
 
34
35
  const components = [
35
36
  Alert,
@@ -58,6 +59,7 @@ const components = [
58
59
  UserMenu,
59
60
 
60
61
  Tag,
62
+ Pagination,
61
63
  ];
62
64
 
63
65
  const defaultColors = ["primary", "secondary"];
@@ -148,6 +150,7 @@ module.exports = plugin.withOptions(
148
150
  base: "var(--vc-cursor)",
149
151
  },
150
152
  spacing: {
153
+ xs: "4px",
151
154
  sm: "8px",
152
155
  md: "16px",
153
156
  lg: "24px",