@operato/styles 2.0.0-alpha.99 → 2.0.0-beta.0
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.
- package/CHANGELOG.md +148 -0
- package/dist/src/button-container-styles.js +25 -23
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-grist-styles.js +19 -17
- package/dist/src/common-grist-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +30 -20
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/scrollbar-styles.js +9 -8
- package/dist/src/scrollbar-styles.js.map +1 -1
- package/dist/src/spinner-styles.js +1 -0
- package/dist/src/spinner-styles.js.map +1 -1
- package/dist/src/tooltip-styles.js +1 -1
- package/dist/src/tooltip-styles.js.map +1 -1
- package/dist/stories/button-container-styles.stories.d.ts +7 -2
- package/dist/stories/button-container-styles.stories.js +35 -6
- package/dist/stories/button-container-styles.stories.js.map +1 -1
- package/dist/stories/common-header-styles-actions.stories.d.ts +5 -0
- package/dist/stories/common-header-styles-actions.stories.js +40 -16
- package/dist/stories/common-header-styles-actions.stories.js.map +1 -1
- package/dist/stories/common-header-styles-pure.stories.d.ts +5 -0
- package/dist/stories/common-header-styles-pure.stories.js +36 -13
- package/dist/stories/common-header-styles-pure.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/button-container-styles.ts +25 -23
- package/src/common-grist-styles.ts +19 -17
- package/src/common-header-styles.ts +30 -20
- package/src/scrollbar-styles.ts +9 -8
- package/src/spinner-styles.ts +1 -0
- package/src/tooltip-styles.ts +1 -1
- package/stories/button-container-styles.stories.ts +36 -7
- package/stories/common-header-styles-actions.stories.ts +67 -42
- package/stories/common-header-styles-pure.stories.ts +37 -13
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/grist-theme.css +169 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +43 -0
- package/themes/state-color.css +6 -0
- package/themes/app-theme.css +0 -161
- package/themes/form-theme.css +0 -75
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,154 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/styles
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* theming styles ([118fe71](https://github.com/hatiolab/operato/commit/118fe711fd86d89453f97320bf9fef1e51b4ac23))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @operato/styles
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### :bug: Bug Fix
|
|
35
|
+
|
|
36
|
+
* theming styles ([4f2c9bb](https://github.com/hatiolab/operato/commit/4f2c9bbc1ad4f27d99a18e99c10604b3db480899))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### :bug: Bug Fix
|
|
44
|
+
|
|
45
|
+
* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### :rocket: New Features
|
|
53
|
+
|
|
54
|
+
* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
|
|
55
|
+
* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
### :sparkles: Styling
|
|
59
|
+
|
|
60
|
+
* form ([4a71d2b](https://github.com/hatiolab/operato/commit/4a71d2be48d7c95a6611a5cf0e1ff46d50c63cb3))
|
|
61
|
+
* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
### :rocket: New Features
|
|
69
|
+
|
|
70
|
+
* css-variable for scrollbar size (--scrollbar-width, --scrollbar-height) ([2396c31](https://github.com/hatiolab/operato/commit/2396c31e766710ae1ce6d490ae8b5f639758f22d))
|
|
71
|
+
* css-variable for scrollbar thumb border-radius (--scrollbar-thumb-border-radius) ([05cc4ca](https://github.com/hatiolab/operato/commit/05cc4ca21b28ba94d5a23c7a0ee982a703dc4eac))
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
### :bug: Bug Fix
|
|
79
|
+
|
|
80
|
+
* ox-filter-personalizer bug on sorting ([4527ba5](https://github.com/hatiolab/operato/commit/4527ba598605d54380e81c8a00f2d5188197f757))
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
### :bug: Bug Fix
|
|
88
|
+
|
|
89
|
+
* md-icon color on danger attribute ([8ef41b3](https://github.com/hatiolab/operato/commit/8ef41b3938f90a2d766433b1637dd95313356a86))
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
### :rocket: New Features
|
|
97
|
+
|
|
98
|
+
* prevent button reaction during executing previous user action ([370a6c5](https://github.com/hatiolab/operato/commit/370a6c57267ad2a127311996cc393c25ad0b424c))
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
### :bug: Bug Fix
|
|
106
|
+
|
|
107
|
+
* ox-input-select-button ([1e1be72](https://github.com/hatiolab/operato/commit/1e1be72dcb5d5d23e2d0df0701b0da04855e73d2))
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
### :bug: Bug Fix
|
|
115
|
+
|
|
116
|
+
* tweak popup position ([cf962de](https://github.com/hatiolab/operato/commit/cf962deda8c92e0fb59d51a7c4f7e06d6c0bde07))
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
|
|
121
|
+
|
|
122
|
+
**Note:** Version bump only for package @operato/styles
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
|
|
129
|
+
|
|
130
|
+
**Note:** Version bump only for package @operato/styles
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
### :bug: Bug Fix
|
|
140
|
+
|
|
141
|
+
* sppiner z-index 수정 ([b5441c4](https://github.com/hatiolab/operato/commit/b5441c41bd3c881e9be0544881f8dbf585a6d585))
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
### :bug: Bug Fix
|
|
149
|
+
|
|
150
|
+
* common-header-styles for mobile device ([6826da4](https://github.com/hatiolab/operato/commit/6826da4750effb7f3dba0913b2e74c5829cc4de2))
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
6
154
|
## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
|
|
7
155
|
|
|
8
156
|
|
|
@@ -3,36 +3,32 @@ export const ButtonContainerStyles = css `
|
|
|
3
3
|
.button-container {
|
|
4
4
|
display: flex;
|
|
5
5
|
margin-left: auto;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
padding: var(--spacing-small);
|
|
7
|
+
gap: var(--spacing-small);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
button {
|
|
11
11
|
display: flex;
|
|
12
12
|
align-items: center;
|
|
13
|
-
background-color: var(--button-background-color,
|
|
14
|
-
border: 1px solid
|
|
13
|
+
background-color: var(--button-background-color, var(--md-sys-color-secondary-container));
|
|
14
|
+
border: 1px solid var(--md-sys-color-secondary-container);
|
|
15
15
|
border-radius: var(--button-border-radius);
|
|
16
16
|
|
|
17
17
|
font-size: var(--fontsize-default);
|
|
18
|
-
color: var(--secondary-
|
|
18
|
+
color: var(--button-color, var(--md-sys-color-on-secondary-container));
|
|
19
19
|
text-wrap: nowrap;
|
|
20
20
|
|
|
21
21
|
md-icon {
|
|
22
22
|
margin: 4px 1px;
|
|
23
23
|
|
|
24
|
-
--md-icon-size:
|
|
25
|
-
color: var(--primary-color);
|
|
24
|
+
--md-icon-size: var(--icon-size-small);
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
&:hover {
|
|
29
|
-
background-color: var(--
|
|
28
|
+
background-color: var(--md-sys-color-secondary);
|
|
29
|
+
color: var(--md-sys-color-on-secondary);
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
md-icon {
|
|
34
|
-
color: var(--white-theme-color);
|
|
35
|
-
}
|
|
31
|
+
border: 1px solid var(--md-sys-color-secondary);
|
|
36
32
|
}
|
|
37
33
|
}
|
|
38
34
|
|
|
@@ -41,27 +37,33 @@ export const ButtonContainerStyles = css `
|
|
|
41
37
|
}
|
|
42
38
|
|
|
43
39
|
[danger] {
|
|
44
|
-
color: var(--
|
|
45
|
-
|
|
40
|
+
--md-assist-chip-elevated-container-color: var(--md-sys-color-error);
|
|
41
|
+
--md-assist-chip-label-text-color: var(--md-sys-color-on-error);
|
|
42
|
+
--md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
|
|
46
43
|
|
|
47
|
-
md-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
color: var(--md-sys-color-on-error);
|
|
45
|
+
background-color: var(--md-sys-color-error);
|
|
46
|
+
border-color: var(--md-sys-color-error);
|
|
50
47
|
|
|
51
48
|
&:hover {
|
|
52
|
-
|
|
49
|
+
--md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
|
|
50
|
+
--md-assist-chip-label-text-color: var(--md-sys-color-error);
|
|
51
|
+
--md-assist-chip-leading-iccolor: var(--md-sys-color-error);
|
|
52
|
+
|
|
53
|
+
color: var(--md-sys-color-error);
|
|
54
|
+
background-color: var(--md-sys-color-on-error);
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
select,
|
|
57
59
|
input[type='text'] {
|
|
58
|
-
background-color: var(--button-background-color,
|
|
59
|
-
border: 1px solid
|
|
60
|
+
background-color: var(--button-background-color, var(--md-sys-color-secondary-container));
|
|
61
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
60
62
|
border-radius: var(--button-border-radius);
|
|
61
|
-
padding: 0 var(--
|
|
63
|
+
padding: 0 var(--spacing-tiny);
|
|
62
64
|
|
|
63
65
|
font-size: var(--fontsize-default);
|
|
64
|
-
color: var(--secondary-
|
|
66
|
+
color: var(--button-color, var(--md-sys-color-on-secondary-container));
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
[filler] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-container-styles.js","sourceRoot":"","sources":["../../src/button-container-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"button-container-styles.js","sourceRoot":"","sources":["../../src/button-container-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ButtonContainerStyles = css`\n .button-container {\n display: flex;\n margin-left: auto;\n padding: var(--spacing-small);\n gap: var(--spacing-small);\n }\n\n button {\n display: flex;\n align-items: center;\n background-color: var(--button-background-color, var(--md-sys-color-secondary-container));\n border: 1px solid var(--md-sys-color-secondary-container);\n border-radius: var(--button-border-radius);\n\n font-size: var(--fontsize-default);\n color: var(--button-color, var(--md-sys-color-on-secondary-container));\n text-wrap: nowrap;\n\n md-icon {\n margin: 4px 1px;\n\n --md-icon-size: var(--icon-size-small);\n }\n\n &:hover {\n background-color: var(--md-sys-color-secondary);\n color: var(--md-sys-color-on-secondary);\n\n border: 1px solid var(--md-sys-color-secondary);\n }\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger] {\n --md-assist-chip-elevated-container-color: var(--md-sys-color-error);\n --md-assist-chip-label-text-color: var(--md-sys-color-on-error);\n --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);\n\n color: var(--md-sys-color-on-error);\n background-color: var(--md-sys-color-error);\n border-color: var(--md-sys-color-error);\n\n &:hover {\n --md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);\n --md-assist-chip-label-text-color: var(--md-sys-color-error);\n --md-assist-chip-leading-iccolor: var(--md-sys-color-error);\n\n color: var(--md-sys-color-error);\n background-color: var(--md-sys-color-on-error);\n }\n }\n\n select,\n input[type='text'] {\n background-color: var(--button-background-color, var(--md-sys-color-secondary-container));\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--button-border-radius);\n padding: 0 var(--spacing-tiny);\n\n font-size: var(--fontsize-default);\n color: var(--button-color, var(--md-sys-color-on-secondary-container));\n }\n\n [filler] {\n flex: 1;\n }\n\n @media screen and (max-width: 460px) {\n .button-container {\n padding: 0;\n gap: 0;\n }\n\n button,\n md-icon {\n border-radius: 0;\n }\n\n button:not(:last-child),\n md-icon:not(:last-child) {\n border-right-width: 0;\n }\n }\n`\n"]}
|
|
@@ -16,9 +16,9 @@ export const CommonGristStyles = css `
|
|
|
16
16
|
flex-direction: row;
|
|
17
17
|
gap: 0 10px;
|
|
18
18
|
align-items: center;
|
|
19
|
-
padding: var(--
|
|
19
|
+
padding: var(--spacing-small) var(--spacing-medium);
|
|
20
20
|
|
|
21
|
-
--md-icon-size:
|
|
21
|
+
--md-icon-size: var(--icon-size-medium);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
[slot='headroom']:empty {
|
|
@@ -27,11 +27,12 @@ export const CommonGristStyles = css `
|
|
|
27
27
|
|
|
28
28
|
#sorters md-icon,
|
|
29
29
|
#modes md-icon {
|
|
30
|
-
--md-icon-size:
|
|
30
|
+
--md-icon-size: var(--icon-size-small);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
[slot='setting'] {
|
|
34
34
|
position: absolute;
|
|
35
|
+
top: -2px;
|
|
35
36
|
right: 0;
|
|
36
37
|
}
|
|
37
38
|
|
|
@@ -40,38 +41,38 @@ export const CommonGristStyles = css `
|
|
|
40
41
|
flex-wrap: nowrap;
|
|
41
42
|
align-items: center;
|
|
42
43
|
margin-left: auto;
|
|
43
|
-
margin-right: var(--
|
|
44
|
-
padding-left: var(--
|
|
45
|
-
border-bottom: var(--
|
|
44
|
+
margin-right: var(--spacing-small);
|
|
45
|
+
padding-left: var(--spacing-tiny);
|
|
46
|
+
border-bottom: var(--md-sys-color-outline);
|
|
46
47
|
position: relative;
|
|
47
|
-
color: var(--secondary-
|
|
48
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
48
49
|
font-size: var(--fontsize-default);
|
|
49
50
|
user-select: none;
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
#sorters > * {
|
|
53
|
-
padding: var(--
|
|
54
|
+
padding: var(--spacing-tiny);
|
|
54
55
|
vertical-align: middle;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
#modes > * {
|
|
58
|
-
padding: var(--
|
|
59
|
+
padding: var(--spacing-tiny);
|
|
59
60
|
opacity: 0.5;
|
|
60
|
-
color: var(--
|
|
61
|
+
color: var(--md-sys-color-on-primary-container);
|
|
61
62
|
cursor: pointer;
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
#modes > md-icon[active] {
|
|
65
66
|
border-radius: 9px;
|
|
66
|
-
background-color:
|
|
67
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
67
68
|
opacity: 1;
|
|
68
|
-
color: var(--
|
|
69
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
69
70
|
cursor: default;
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
#modes > md-icon:hover {
|
|
73
74
|
opacity: 1;
|
|
74
|
-
color: var(--
|
|
75
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
75
76
|
}
|
|
76
77
|
|
|
77
78
|
#add {
|
|
@@ -84,7 +85,8 @@ export const CommonGristStyles = css `
|
|
|
84
85
|
justify-content: center;
|
|
85
86
|
gap: 0px 10px;
|
|
86
87
|
|
|
87
|
-
background-color: var(--primary-
|
|
88
|
+
background-color: var(--md-sys-color-primary-container);
|
|
89
|
+
color: var(--md-sys-color-on-primary-container);
|
|
88
90
|
border: 0;
|
|
89
91
|
border-radius: 50%;
|
|
90
92
|
padding: 5px;
|
|
@@ -94,13 +96,13 @@ export const CommonGristStyles = css `
|
|
|
94
96
|
}
|
|
95
97
|
|
|
96
98
|
#add button:hover {
|
|
97
|
-
background-color: var(--
|
|
99
|
+
background-color: var(--md-sys-color-on-primary-container);
|
|
100
|
+
color: var(--md-sys-color-primary-container);
|
|
98
101
|
box-shadow: var(--box-shadow);
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
#add button md-icon {
|
|
102
105
|
font-size: 1.5em;
|
|
103
|
-
color: var(--theme-white-color);
|
|
104
106
|
}
|
|
105
107
|
|
|
106
108
|
#filters {
|
|
@@ -111,7 +113,7 @@ export const CommonGristStyles = css `
|
|
|
111
113
|
}
|
|
112
114
|
|
|
113
115
|
#filters > * {
|
|
114
|
-
margin-right: var(--
|
|
116
|
+
margin-right: var(--spacing-small);
|
|
115
117
|
}
|
|
116
118
|
|
|
117
119
|
@media only screen and (max-width: 460px) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../src/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../src/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqInC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonGristStyles = css`\n :host {\n display: flex;\n\n width: 100%;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n gap: 0 10px;\n align-items: center;\n padding: var(--spacing-small) var(--spacing-medium);\n\n --md-icon-size: var(--icon-size-medium);\n }\n\n [slot='headroom']:empty {\n padding: 0;\n }\n\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: var(--icon-size-small);\n }\n\n [slot='setting'] {\n position: absolute;\n top: -2px;\n right: 0;\n }\n\n #sorters {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n margin-left: auto;\n margin-right: var(--spacing-small);\n padding-left: var(--spacing-tiny);\n border-bottom: var(--md-sys-color-outline);\n position: relative;\n color: var(--md-sys-color-on-secondary-container);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--spacing-tiny);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--spacing-tiny);\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: var(--md-sys-color-secondary-container);\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n #add {\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0px 10px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--md-sys-color-on-primary-container);\n color: var(--md-sys-color-primary-container);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n }\n\n #filters {\n flex: 1;\n\n display: flex;\n align-items: center;\n }\n\n #filters > * {\n margin-right: var(--spacing-small);\n }\n\n @media only screen and (max-width: 460px) {\n [slot='headroom'] {\n box-shadow: var(--box-shadow);\n padding: 0;\n }\n\n #modes {\n display: none;\n }\n\n #add {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n }\n`\n"]}
|
|
@@ -5,8 +5,8 @@ export const CommonHeaderStyles = css `
|
|
|
5
5
|
grid-template-areas:
|
|
6
6
|
'title actions'
|
|
7
7
|
'filters filters';
|
|
8
|
-
gap: var(--
|
|
9
|
-
padding: calc(var(--
|
|
8
|
+
gap: var(--spacing-small) var(--spacing-medium);
|
|
9
|
+
padding: calc(var(--spacing-medium) / 2) var(--spacing-medium);
|
|
10
10
|
|
|
11
11
|
align-items: center;
|
|
12
12
|
|
|
@@ -15,35 +15,36 @@ export const CommonHeaderStyles = css `
|
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: row;
|
|
17
17
|
align-items: center;
|
|
18
|
-
gap: var(--
|
|
18
|
+
gap: var(--spacing-small);
|
|
19
19
|
|
|
20
20
|
font: var(--subtitle-font);
|
|
21
|
-
color: var(--
|
|
21
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
22
22
|
text-transform: capitalize;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.filters {
|
|
26
26
|
grid-area: filters;
|
|
27
|
-
border: 1px solid
|
|
28
|
-
border-radius: var(--
|
|
29
|
-
background-color:
|
|
30
|
-
padding: var(--
|
|
27
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
28
|
+
border-radius: var(--md-sys-shape-corner-small, 5px);
|
|
29
|
+
background-color: var(--md-sys-color-surface-container);
|
|
30
|
+
padding: var(--spacing-medium);
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: row;
|
|
33
33
|
align-items: center;
|
|
34
|
-
gap: var(--
|
|
34
|
+
gap: var(--spacing-large);
|
|
35
35
|
|
|
36
36
|
.filter {
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: row;
|
|
39
39
|
|
|
40
40
|
align-items: center;
|
|
41
|
-
gap: var(--
|
|
41
|
+
gap: var(--spacing-small);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
label {
|
|
45
|
-
font:
|
|
46
|
-
|
|
45
|
+
font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
|
|
46
|
+
var(--fontsize-default) var(--theme-font);
|
|
47
|
+
color: var(--md-sys-color-primary);
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
|
|
@@ -57,7 +58,7 @@ export const CommonHeaderStyles = css `
|
|
|
57
58
|
display: flex;
|
|
58
59
|
flex-direction: row-reverse;
|
|
59
60
|
align-items: center;
|
|
60
|
-
gap: var(--
|
|
61
|
+
gap: var(--spacing-small);
|
|
61
62
|
|
|
62
63
|
* {
|
|
63
64
|
cursor: pointer;
|
|
@@ -65,12 +66,12 @@ export const CommonHeaderStyles = css `
|
|
|
65
66
|
|
|
66
67
|
.textbtn,
|
|
67
68
|
.iconbtn {
|
|
68
|
-
background-color: var(--
|
|
69
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
69
70
|
border: var(--button-border);
|
|
70
71
|
border-radius: var(--button-border-radius);
|
|
71
72
|
padding: var(--button-padding);
|
|
72
73
|
|
|
73
|
-
color: var(--
|
|
74
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
74
75
|
font: var(--button-font);
|
|
75
76
|
|
|
76
77
|
&:hover {
|
|
@@ -78,15 +79,16 @@ export const CommonHeaderStyles = css `
|
|
|
78
79
|
background-color: var(--button-activ-background-color);
|
|
79
80
|
box-shadow: var(--button-active-box-shadow);
|
|
80
81
|
|
|
81
|
-
color: var(--
|
|
82
|
+
color: var(--md-sys-color-on-secondary);
|
|
82
83
|
}
|
|
83
84
|
}
|
|
85
|
+
|
|
84
86
|
.iconbtn {
|
|
85
|
-
padding: var(--
|
|
87
|
+
padding: var(--spacing-tiny);
|
|
86
88
|
line-height: 0.9;
|
|
87
89
|
|
|
88
90
|
md-icon {
|
|
89
|
-
--md-icon-size: var(--
|
|
91
|
+
--md-icon-size: var(--icon-size-medium);
|
|
90
92
|
}
|
|
91
93
|
}
|
|
92
94
|
}
|
|
@@ -102,15 +104,23 @@ export const CommonHeaderStyles = css `
|
|
|
102
104
|
gap: 0;
|
|
103
105
|
|
|
104
106
|
grid-template-areas:
|
|
105
|
-
'title'
|
|
106
107
|
'actions'
|
|
107
108
|
'filters';
|
|
108
109
|
|
|
110
|
+
.title {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
109
114
|
.filters {
|
|
110
115
|
flex-wrap: wrap;
|
|
111
|
-
gap: var(--
|
|
116
|
+
gap: var(--spacing-medium);
|
|
112
117
|
border: none;
|
|
113
118
|
}
|
|
119
|
+
|
|
120
|
+
.actions {
|
|
121
|
+
background-color: var(--md-sys-color-on-secondary-container);
|
|
122
|
+
margin: 0;
|
|
123
|
+
}
|
|
114
124
|
}
|
|
115
125
|
}
|
|
116
126
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonHeaderStyles = css`\n .header {\n display: grid;\n grid-template-areas:\n 'title actions'\n 'filters filters';\n gap: var(--spacing-small) var(--spacing-medium);\n padding: calc(var(--spacing-medium) / 2) var(--spacing-medium);\n\n align-items: center;\n\n .title {\n grid-area: title;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n\n font: var(--subtitle-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface-container);\n padding: var(--spacing-small) var(--spacing-medium);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-large);\n\n .filter {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n label {\n font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--fontsize-default) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n }\n\n .filters:empty {\n display: none;\n }\n\n .actions {\n grid-area: actions;\n margin-left: auto;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: var(--spacing-small);\n\n * {\n cursor: pointer;\n }\n\n .textbtn,\n .iconbtn {\n background-color: var(--md-sys-color-secondary-container);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n\n color: var(--md-sys-color-on-secondary-container);\n font: var(--button-font);\n\n &:hover {\n border: var(--button-activ-border);\n background-color: var(--button-activ-background-color);\n box-shadow: var(--button-active-box-shadow);\n\n color: var(--md-sys-color-on-secondary);\n }\n }\n\n .iconbtn {\n padding: var(--spacing-tiny);\n line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n @media only screen and (max-width: 460px) {\n .header {\n padding: 0;\n gap: 0;\n\n grid-template-areas:\n 'actions'\n 'filters';\n\n .title {\n display: none;\n }\n\n .filters {\n flex-wrap: wrap;\n gap: var(--spacing-medium);\n border: none;\n }\n\n .actions {\n background-color: var(--md-sys-color-on-secondary-container);\n margin: 0;\n }\n }\n }\n`\n"]}
|
|
@@ -1,31 +1,32 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const ScrollbarStyles = css `
|
|
3
3
|
::-webkit-scrollbar {
|
|
4
|
-
width: 5px;
|
|
5
|
-
height: 5px;
|
|
4
|
+
width: var(--scrollbar-width, 5px);
|
|
5
|
+
height: var(--scrollbar-height, 5px);
|
|
6
6
|
}
|
|
7
7
|
::-webkit-scrollbar-track {
|
|
8
8
|
background-color: transparent;
|
|
9
9
|
}
|
|
10
10
|
::-webkit-scrollbar-thumb {
|
|
11
|
-
background-color: var(--scrollbar-thumb-color,
|
|
11
|
+
background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));
|
|
12
|
+
border-radius: var(--scrollbar-thumb-border-radius, 0);
|
|
12
13
|
}
|
|
13
14
|
::-webkit-scrollbar-thumb:hover {
|
|
14
|
-
background-color: var(--scrollbar-thumb-hover-color,
|
|
15
|
+
background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
:host::-webkit-scrollbar {
|
|
18
|
-
width: 5px;
|
|
19
|
-
height: 5px;
|
|
19
|
+
width: var(--scrollbar-width, 5px);
|
|
20
|
+
height: var(--scrollbar-height, 5px);
|
|
20
21
|
}
|
|
21
22
|
:host::-webkit-scrollbar-track {
|
|
22
23
|
background-color: transparent;
|
|
23
24
|
}
|
|
24
25
|
:host::-webkit-scrollbar-thumb {
|
|
25
|
-
background-color: var(--scrollbar-thumb-color,
|
|
26
|
+
background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));
|
|
26
27
|
}
|
|
27
28
|
:host::-webkit-scrollbar-thumb:hover {
|
|
28
|
-
background-color: var(--scrollbar-thumb-hover-color,
|
|
29
|
+
background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
|
|
29
30
|
}
|
|
30
31
|
`;
|
|
31
32
|
//# sourceMappingURL=scrollbar-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbar-styles.js","sourceRoot":"","sources":["../../src/scrollbar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"scrollbar-styles.js","sourceRoot":"","sources":["../../src/scrollbar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ScrollbarStyles = css`\n ::-webkit-scrollbar {\n width: var(--scrollbar-width, 5px);\n height: var(--scrollbar-height, 5px);\n }\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));\n border-radius: var(--scrollbar-thumb-border-radius, 0);\n }\n ::-webkit-scrollbar-thumb:hover {\n background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));\n }\n\n :host::-webkit-scrollbar {\n width: var(--scrollbar-width, 5px);\n height: var(--scrollbar-height, 5px);\n }\n :host::-webkit-scrollbar-track {\n background-color: transparent;\n }\n :host::-webkit-scrollbar-thumb {\n background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));\n }\n :host::-webkit-scrollbar-thumb:hover {\n background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner-styles.js","sourceRoot":"","sources":["../../src/spinner-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spinner-styles.js","sourceRoot":"","sources":["../../src/spinner-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B/B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SpinnerStyles = css`\n #spinner {\n display: none;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n width: 70px;\n height: 70px;\n margin: 0 auto;\n background: var(--oops-spinner-image) 0 0 no-repeat;\n background-size: 700%;\n animation: spinner steps(6) 2s infinite both;\n z-index: 10;\n }\n\n #spinner[show] {\n display: block;\n }\n\n @keyframes spinner {\n 0% {\n background-position: 0%;\n }\n 100% {\n background-position: 100%;\n }\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-styles.js","sourceRoot":"","sources":["../../src/tooltip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B/B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TooltipStyles = css`\n /* for tooltip */\n [data-tooltip]:after {\n position: absolute;\n content: attr(data-tooltip);\n color: #fff;\n z-index:
|
|
1
|
+
{"version":3,"file":"tooltip-styles.js","sourceRoot":"","sources":["../../src/tooltip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B/B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const TooltipStyles = css`\n /* for tooltip */\n [data-tooltip]:after {\n position: absolute;\n content: attr(data-tooltip);\n color: #fff;\n z-index: 1000;\n pointer-events: none;\n display: block;\n\n padding: var(--tooltip-padding);\n background-color: var(--tooltip-background-color, black);\n font: var(--tooltip-font);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n\n left: var(--tooltip-left-positon-left);\n top: var(--tooltip-left-position-top);\n right: var(--tooltip-left-position-right);\n bottom: var(--tooltip-left-position-bottom);\n\n max-width: var(--tooltip-max-width, 300px);\n max-height: var(--tooltip-max-height, 300px);\n width: fit-content;\n word-wrap: break-word;\n white-space: pre-wrap;\n overflow: hidden;\n }\n`\n"]}
|
|
@@ -3,7 +3,12 @@ import { TemplateResult } from 'lit';
|
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: string;
|
|
6
|
-
argTypes: {
|
|
6
|
+
argTypes: {
|
|
7
|
+
theme: {
|
|
8
|
+
control: string;
|
|
9
|
+
options: string[];
|
|
10
|
+
};
|
|
11
|
+
};
|
|
7
12
|
};
|
|
8
13
|
export default _default;
|
|
9
14
|
interface Story<T> {
|
|
@@ -12,6 +17,6 @@ interface Story<T> {
|
|
|
12
17
|
argTypes?: Record<string, unknown>;
|
|
13
18
|
}
|
|
14
19
|
interface ArgTypes {
|
|
15
|
-
|
|
20
|
+
theme?: 'light' | 'dark';
|
|
16
21
|
}
|
|
17
22
|
export declare const Regular: Story<ArgTypes>;
|