@operato/styles 1.12.3 → 2.0.0-alpha.100
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/.storybook/main.js +3 -0
- package/.storybook/server.mjs +8 -0
- package/CHANGELOG.md +180 -0
- package/dist/src/button-container-styles.js +76 -7
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-grist-styles.js +36 -13
- package/dist/src/common-grist-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +97 -96
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/stories/button-container-styles.stories.d.ts +17 -0
- package/dist/stories/button-container-styles.stories.js +54 -0
- package/dist/stories/button-container-styles.stories.js.map +1 -0
- package/dist/stories/common-header-styles-actions.stories.d.ts +22 -0
- package/dist/stories/common-header-styles-actions.stories.js +83 -0
- package/dist/stories/common-header-styles-actions.stories.js.map +1 -0
- package/dist/stories/common-header-styles-pure.stories.d.ts +21 -0
- package/dist/stories/common-header-styles-pure.stories.js +60 -0
- package/dist/stories/common-header-styles-pure.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -5
- package/src/button-container-styles.ts +76 -7
- package/src/common-grist-styles.ts +36 -13
- package/src/common-header-styles.ts +97 -96
- package/stories/button-container-styles.stories.ts +67 -0
- package/stories/common-header-styles-actions.stories.ts +97 -0
- package/stories/common-header-styles-pure.stories.ts +73 -0
- package/themes/app-theme.css +161 -0
- package/themes/form-theme.css +75 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { storybookPlugin } from '@web/dev-server-storybook';
|
|
2
|
+
import baseConfig from '../web-dev-server.config.mjs';
|
|
3
|
+
|
|
4
|
+
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
5
|
+
...baseConfig,
|
|
6
|
+
open: '/',
|
|
7
|
+
plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
|
|
8
|
+
});
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,186 @@
|
|
|
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-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* common-header-styles for mobile device ([6826da4](https://github.com/hatiolab/operato/commit/6826da4750effb7f3dba0913b2e74c5829cc4de2))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* button text-wrap style in button container ([068741c](https://github.com/hatiolab/operato/commit/068741ca0278676038c55ccaafc08c32616b3f89))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## [2.0.0-alpha.98](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.97...v2.0.0-alpha.98) (2024-04-21)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### :bug: Bug Fix
|
|
28
|
+
|
|
29
|
+
* header style ([933f150](https://github.com/hatiolab/operato/commit/933f1506e8ec41de3f0c598d977ac1238c3fc3df))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
### :bug: Bug Fix
|
|
37
|
+
|
|
38
|
+
* support 'checkbox' type in ox-filters-form-base ([1ffe0e5](https://github.com/hatiolab/operato/commit/1ffe0e5fc16480240c8c5accf57d247bb3299867))
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### :bug: Bug Fix
|
|
46
|
+
|
|
47
|
+
* common styles for grist ([6683ec7](https://github.com/hatiolab/operato/commit/6683ec7b21515b49d43420e6a5ef890ff882a96b))
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### :bug: Bug Fix
|
|
55
|
+
|
|
56
|
+
* style for data-grid setting slot ([862b9b9](https://github.com/hatiolab/operato/commit/862b9b908b2fb09ce263897b4e9d704724b6e6d4))
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
### :bug: Bug Fix
|
|
64
|
+
|
|
65
|
+
* style for data-grid setting slot ([475c3cd](https://github.com/hatiolab/operato/commit/475c3cda007611b56b902cd37290433e1e36dfe6))
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
### :bug: Bug Fix
|
|
73
|
+
|
|
74
|
+
* common-grist-styles ([2caf603](https://github.com/hatiolab/operato/commit/2caf603f4e527b691e1f5f077851b4eea9b95882))
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
### :bug: Bug Fix
|
|
82
|
+
|
|
83
|
+
* tweak filters-form style ([6fb293d](https://github.com/hatiolab/operato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
### :bug: Bug Fix
|
|
91
|
+
|
|
92
|
+
* context styles ([10af436](https://github.com/hatiolab/operato/commit/10af4368cc63c2145662abcda1f31d3fa911d8fb))
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
### :bug: Bug Fix
|
|
100
|
+
|
|
101
|
+
* use button-container styles ([bd91be3](https://github.com/hatiolab/operato/commit/bd91be3eaf5337a0ffe8cfc3b37191b6427ce5f6))
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
### :bug: Bug Fix
|
|
109
|
+
|
|
110
|
+
* context btn style & app theme ([80d9f5a](https://github.com/hatiolab/operato/commit/80d9f5acc9a363e5fee22aa8bc618a6234d55745))
|
|
111
|
+
* material theme ([7f9acfb](https://github.com/hatiolab/operato/commit/7f9acfbd97e933812bee45eaf4ab4bf90dc2e5dc))
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
### :bug: Bug Fix
|
|
119
|
+
|
|
120
|
+
* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
### :bug: Bug Fix
|
|
128
|
+
|
|
129
|
+
* mwc=>md for context ([72ab75f](https://github.com/hatiolab/operato/commit/72ab75fd8525f8d1b0e0c35866339122194f510a))
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
### :bug: Bug Fix
|
|
137
|
+
|
|
138
|
+
* common header style capitalize ([f4cceda](https://github.com/hatiolab/operato/commit/f4ccedabb7f15e0b240750a97308be438483bc0f))
|
|
139
|
+
* header style ([097c493](https://github.com/hatiolab/operato/commit/097c49368023c74090c91b199dcb12bf6a249efb))
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
**Note:** Version bump only for package @operato/styles
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
### :bug: Bug Fix
|
|
155
|
+
|
|
156
|
+
* upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
### :bug: Bug Fix
|
|
164
|
+
|
|
165
|
+
* storybook 실행 환경 ([6a2940f](https://github.com/hatiolab/operato/commit/6a2940fb89dc26566acdce7cf1781a71cbad61c5))
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
### :bug: Bug Fix
|
|
173
|
+
|
|
174
|
+
* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
## [2.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v1.13.1...v2.0.0-alpha.0) (2024-01-05)
|
|
179
|
+
|
|
180
|
+
**Note:** Version bump only for package @operato/styles
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
6
186
|
### [1.12.3](https://github.com/hatiolab/operato/compare/v1.12.2...v1.12.3) (2024-01-01)
|
|
7
187
|
|
|
8
188
|
|
|
@@ -3,17 +3,86 @@ export const ButtonContainerStyles = css `
|
|
|
3
3
|
.button-container {
|
|
4
4
|
display: flex;
|
|
5
5
|
margin-left: auto;
|
|
6
|
-
|
|
6
|
+
gap: var(--padding-narrow);
|
|
7
|
+
padding: 6px 10px;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
button {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
14
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
15
|
+
border-radius: var(--button-border-radius);
|
|
16
|
+
|
|
17
|
+
font-size: var(--fontsize-default);
|
|
18
|
+
color: var(--secondary-color);
|
|
19
|
+
text-wrap: nowrap;
|
|
20
|
+
|
|
21
|
+
md-icon {
|
|
22
|
+
margin: 4px 1px;
|
|
23
|
+
|
|
24
|
+
--md-icon-size: 18px;
|
|
25
|
+
color: var(--primary-color);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
background-color: var(--primary-color);
|
|
30
|
+
|
|
31
|
+
color: var(--theme-white-color);
|
|
32
|
+
|
|
33
|
+
md-icon {
|
|
34
|
+
color: var(--white-theme-color);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[filled] {
|
|
40
|
+
font-variation-settings: 'FILL' 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[danger] {
|
|
44
|
+
color: var(--status-danger-color);
|
|
45
|
+
border-color: var(--status-danger-color);
|
|
46
|
+
|
|
47
|
+
md-icon {
|
|
48
|
+
color: var(--status-danger-color);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:hover {
|
|
52
|
+
background-color: var(--status-danger-color);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
select,
|
|
57
|
+
input[type='text'] {
|
|
58
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
59
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
60
|
+
border-radius: var(--button-border-radius);
|
|
61
|
+
padding: 0 var(--padding-narrow);
|
|
62
|
+
|
|
63
|
+
font-size: var(--fontsize-default);
|
|
64
|
+
color: var(--secondary-color);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[filler] {
|
|
68
|
+
flex: 1;
|
|
12
69
|
}
|
|
13
70
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
71
|
+
@media screen and (max-width: 460px) {
|
|
72
|
+
.button-container {
|
|
73
|
+
padding: 0;
|
|
74
|
+
gap: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
button,
|
|
78
|
+
md-icon {
|
|
79
|
+
border-radius: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
button:not(:last-child),
|
|
83
|
+
md-icon:not(:last-child) {
|
|
84
|
+
border-right-width: 0;
|
|
85
|
+
}
|
|
17
86
|
}
|
|
18
87
|
`;
|
|
19
88
|
//# sourceMappingURL=button-container-styles.js.map
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ButtonContainerStyles = css`\n .button-container {\n display: flex;\n margin-left: auto;\n gap: var(--padding-narrow);\n padding: 6px 10px;\n }\n\n button {\n display: flex;\n align-items: center;\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n\n font-size: var(--fontsize-default);\n color: var(--secondary-color);\n text-wrap: nowrap;\n\n md-icon {\n margin: 4px 1px;\n\n --md-icon-size: 18px;\n color: var(--primary-color);\n }\n\n &:hover {\n background-color: var(--primary-color);\n\n color: var(--theme-white-color);\n\n md-icon {\n color: var(--white-theme-color);\n }\n }\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger] {\n color: var(--status-danger-color);\n border-color: var(--status-danger-color);\n\n md-icon {\n color: var(--status-danger-color);\n }\n\n &:hover {\n background-color: var(--status-danger-color);\n }\n }\n\n select,\n input[type='text'] {\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n padding: 0 var(--padding-narrow);\n\n font-size: var(--fontsize-default);\n color: var(--secondary-color);\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"]}
|
|
@@ -14,23 +14,31 @@ export const CommonGristStyles = css `
|
|
|
14
14
|
[slot='headroom'] {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: row;
|
|
17
|
+
gap: 0 10px;
|
|
17
18
|
align-items: center;
|
|
18
19
|
padding: var(--padding-default) var(--padding-wide);
|
|
19
|
-
background-color: var(--theme-white-color);
|
|
20
|
-
box-shadow: var(--box-shadow);
|
|
21
20
|
|
|
22
|
-
--
|
|
21
|
+
--md-icon-size: 24px;
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
[slot='headroom']:empty {
|
|
26
25
|
padding: 0;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
|
-
#sorters
|
|
30
|
-
#modes
|
|
31
|
-
--
|
|
28
|
+
#sorters md-icon,
|
|
29
|
+
#modes md-icon {
|
|
30
|
+
--md-icon-size: 18px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[slot='setting'] {
|
|
34
|
+
position: absolute;
|
|
35
|
+
right: 0;
|
|
32
36
|
}
|
|
37
|
+
|
|
33
38
|
#sorters {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-wrap: nowrap;
|
|
41
|
+
align-items: center;
|
|
34
42
|
margin-left: auto;
|
|
35
43
|
margin-right: var(--margin-default);
|
|
36
44
|
padding-left: var(--padding-narrow);
|
|
@@ -53,7 +61,7 @@ export const CommonGristStyles = css `
|
|
|
53
61
|
cursor: pointer;
|
|
54
62
|
}
|
|
55
63
|
|
|
56
|
-
#modes >
|
|
64
|
+
#modes > md-icon[active] {
|
|
57
65
|
border-radius: 9px;
|
|
58
66
|
background-color: rgba(var(--primary-color-rgb), 0.05);
|
|
59
67
|
opacity: 1;
|
|
@@ -61,23 +69,27 @@ export const CommonGristStyles = css `
|
|
|
61
69
|
cursor: default;
|
|
62
70
|
}
|
|
63
71
|
|
|
64
|
-
#modes >
|
|
72
|
+
#modes > md-icon:hover {
|
|
65
73
|
opacity: 1;
|
|
66
74
|
color: var(--secondary-text-color);
|
|
67
75
|
}
|
|
68
76
|
|
|
69
77
|
#add {
|
|
70
|
-
width: 50px;
|
|
71
78
|
text-align: right;
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
#add button {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
gap: 0px 10px;
|
|
86
|
+
|
|
75
87
|
background-color: var(--primary-color);
|
|
76
88
|
border: 0;
|
|
77
89
|
border-radius: 50%;
|
|
78
90
|
padding: 5px;
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
91
|
+
width: 30px;
|
|
92
|
+
height: 30px;
|
|
81
93
|
cursor: pointer;
|
|
82
94
|
}
|
|
83
95
|
|
|
@@ -86,8 +98,8 @@ export const CommonGristStyles = css `
|
|
|
86
98
|
box-shadow: var(--box-shadow);
|
|
87
99
|
}
|
|
88
100
|
|
|
89
|
-
#add button
|
|
90
|
-
font-size:
|
|
101
|
+
#add button md-icon {
|
|
102
|
+
font-size: 1.5em;
|
|
91
103
|
color: var(--theme-white-color);
|
|
92
104
|
}
|
|
93
105
|
|
|
@@ -103,9 +115,20 @@ export const CommonGristStyles = css `
|
|
|
103
115
|
}
|
|
104
116
|
|
|
105
117
|
@media only screen and (max-width: 460px) {
|
|
118
|
+
[slot='headroom'] {
|
|
119
|
+
box-shadow: var(--box-shadow);
|
|
120
|
+
padding: 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
106
123
|
#modes {
|
|
107
124
|
display: none;
|
|
108
125
|
}
|
|
126
|
+
|
|
127
|
+
#add {
|
|
128
|
+
position: absolute;
|
|
129
|
+
top: 10px;
|
|
130
|
+
right: 10px;
|
|
131
|
+
}
|
|
109
132
|
}
|
|
110
133
|
`;
|
|
111
134
|
//# sourceMappingURL=common-grist-styles.js.map
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmInC,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(--padding-default) var(--padding-wide);\n\n --md-icon-size: 24px;\n }\n\n [slot='headroom']:empty {\n padding: 0;\n }\n\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n\n [slot='setting'] {\n position: absolute;\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(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\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(--primary-color);\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(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n flex: 1;\n\n display: flex;\n align-items: center;\n }\n\n #filters > * {\n margin-right: var(--margin-default);\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"]}
|
|
@@ -7,117 +7,118 @@ export const CommonHeaderStyles = css `
|
|
|
7
7
|
'filters filters';
|
|
8
8
|
gap: var(--padding-narrow) var(--padding-default);
|
|
9
9
|
padding: calc(var(--padding-default) / 2) var(--padding-default);
|
|
10
|
-
background-color: transparent;
|
|
11
|
-
box-shadow: none;
|
|
12
|
-
font-size: 0.9em;
|
|
13
10
|
|
|
14
11
|
align-items: center;
|
|
15
|
-
--mdc-icon-size: 24px;
|
|
16
|
-
--mdc-theme-primary: var(--primary-color);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.header:empty {
|
|
20
|
-
padding: 0;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.header .filters {
|
|
24
|
-
grid-area: filters;
|
|
25
|
-
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
26
|
-
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
27
|
-
padding: var(--padding-default);
|
|
28
|
-
|
|
29
|
-
display: flex;
|
|
30
|
-
flex-direction: row;
|
|
31
|
-
align-items: center;
|
|
32
|
-
gap: var(--gap-inter-filter, 10px);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.header .filters:empty {
|
|
36
|
-
display: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.header .filter {
|
|
40
|
-
display: flex;
|
|
41
|
-
flex-direction: row;
|
|
42
12
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
font-size: var(--fontsize-default);
|
|
50
|
-
color: var(--primary-text-color);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.header .title {
|
|
54
|
-
grid-area: title;
|
|
13
|
+
.title {
|
|
14
|
+
grid-area: title;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: var(--padding-narrow);
|
|
55
19
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
font-weight: bold;
|
|
62
|
-
font-size: var(--fontsize-default);
|
|
63
|
-
color: var(--primary-text-color);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.header .title mwc-icon {
|
|
67
|
-
color: var(--primary-color);
|
|
68
|
-
font-size: var(--fontsize-large);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.header .actions {
|
|
72
|
-
grid-area: actions;
|
|
73
|
-
margin-left: auto;
|
|
74
|
-
|
|
75
|
-
display: flex;
|
|
76
|
-
flex-direction: row-reverse;
|
|
77
|
-
align-items: center;
|
|
78
|
-
gap: var(--gap-inter-action, 6px);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.header .actions * {
|
|
82
|
-
cursor: pointer;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.header .textbtn {
|
|
86
|
-
background-color: var(--button-primary-background-color);
|
|
87
|
-
border: 0;
|
|
88
|
-
border-radius: 2px;
|
|
20
|
+
font: var(--subtitle-font);
|
|
21
|
+
color: var(--primary-text-color);
|
|
22
|
+
text-transform: capitalize;
|
|
23
|
+
}
|
|
89
24
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
25
|
+
.filters {
|
|
26
|
+
grid-area: filters;
|
|
27
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.2);
|
|
28
|
+
border-radius: var(--border-radius);
|
|
29
|
+
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
30
|
+
padding: var(--padding-default);
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: row;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: var(--padding-wide);
|
|
35
|
+
|
|
36
|
+
.filter {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: row;
|
|
39
|
+
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: var(--padding-narrow);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
label {
|
|
45
|
+
font: 600 var(--fontsize-default) var(--theme-font);
|
|
46
|
+
color: var(--label-color);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
93
49
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
50
|
+
.filters:empty {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
97
53
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
54
|
+
.actions {
|
|
55
|
+
grid-area: actions;
|
|
56
|
+
margin-left: auto;
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: row-reverse;
|
|
59
|
+
align-items: center;
|
|
60
|
+
gap: var(--padding-narrow);
|
|
61
|
+
|
|
62
|
+
* {
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.textbtn,
|
|
67
|
+
.iconbtn {
|
|
68
|
+
background-color: var(--button-background-color);
|
|
69
|
+
border: var(--button-border);
|
|
70
|
+
border-radius: var(--button-border-radius);
|
|
71
|
+
padding: var(--button-padding);
|
|
72
|
+
|
|
73
|
+
color: var(--button-color);
|
|
74
|
+
font: var(--button-font);
|
|
75
|
+
|
|
76
|
+
&:hover {
|
|
77
|
+
border: var(--button-activ-border);
|
|
78
|
+
background-color: var(--button-activ-background-color);
|
|
79
|
+
box-shadow: var(--button-active-box-shadow);
|
|
80
|
+
|
|
81
|
+
color: var(--button-activ-color);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
.iconbtn {
|
|
85
|
+
padding: var(--iconbtn-padding);
|
|
86
|
+
line-height: 0.9;
|
|
87
|
+
|
|
88
|
+
md-icon {
|
|
89
|
+
--md-icon-size: var(--iconbtn-size);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
105
93
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
94
|
+
:empty {
|
|
95
|
+
padding: 0;
|
|
96
|
+
}
|
|
109
97
|
}
|
|
110
98
|
|
|
111
99
|
@media only screen and (max-width: 460px) {
|
|
112
100
|
.header {
|
|
101
|
+
padding: 0;
|
|
102
|
+
gap: 0;
|
|
103
|
+
|
|
113
104
|
grid-template-areas:
|
|
114
|
-
'
|
|
105
|
+
'actions'
|
|
115
106
|
'filters';
|
|
116
|
-
}
|
|
117
107
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
108
|
+
.title {
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.filters {
|
|
113
|
+
flex-wrap: wrap;
|
|
114
|
+
gap: var(--padding-default);
|
|
115
|
+
border: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.actions {
|
|
119
|
+
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
120
|
+
margin: 0;
|
|
121
|
+
}
|
|
121
122
|
}
|
|
122
123
|
}
|
|
123
124
|
`;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HpC,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(--padding-narrow) var(--padding-default);\n padding: calc(var(--padding-default) / 2) var(--padding-default);\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(--padding-narrow);\n\n font: var(--subtitle-font);\n color: var(--primary-text-color);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border: 1px solid rgba(var(--primary-color-rgb), 0.2);\n border-radius: var(--border-radius);\n background-color: rgba(var(--primary-color-rgb), 0.1);\n padding: var(--padding-default);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--padding-wide);\n\n .filter {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--padding-narrow);\n }\n\n label {\n font: 600 var(--fontsize-default) var(--theme-font);\n color: var(--label-color);\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(--padding-narrow);\n\n * {\n cursor: pointer;\n }\n\n .textbtn,\n .iconbtn {\n background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n\n color: var(--button-color);\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(--button-activ-color);\n }\n }\n .iconbtn {\n padding: var(--iconbtn-padding);\n line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--iconbtn-size);\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(--padding-default);\n border: none;\n }\n\n .actions {\n background-color: rgba(var(--primary-color-rgb), 0.1);\n margin: 0;\n }\n }\n }\n`\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
interface Story<T> {
|
|
10
|
+
(args: T): TemplateResult;
|
|
11
|
+
args?: Partial<T>;
|
|
12
|
+
argTypes?: Record<string, unknown>;
|
|
13
|
+
}
|
|
14
|
+
interface ArgTypes {
|
|
15
|
+
label?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const Regular: Story<ArgTypes>;
|