@operato/styles 2.0.0-alpha.142 → 2.0.0-alpha.149
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 +25 -0
- package/dist/src/button-container-styles.js +15 -14
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-grist-styles.js +18 -17
- package/dist/src/common-grist-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +22 -20
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/scrollbar-styles.js +4 -4
- package/dist/src/scrollbar-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 +15 -14
- package/src/common-grist-styles.ts +18 -17
- package/src/common-header-styles.ts +22 -20
- package/src/scrollbar-styles.ts +4 -4
- 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,31 @@
|
|
|
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.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :rocket: New Features
|
|
19
|
+
|
|
20
|
+
* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
|
|
21
|
+
* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### :sparkles: Styling
|
|
25
|
+
|
|
26
|
+
* form ([4a71d2b](https://github.com/hatiolab/operato/commit/4a71d2be48d7c95a6611a5cf0e1ff46d50c63cb3))
|
|
27
|
+
* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
|
|
7
32
|
|
|
8
33
|
|
|
@@ -3,35 +3,36 @@ 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(--
|
|
24
|
+
--md-icon-size: var(--icon-size-small);
|
|
25
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&:hover {
|
|
29
|
-
background-color: var(--
|
|
29
|
+
background-color: var(--md-sys-color-secondary);
|
|
30
|
+
border: 1px solid var(--md-sys-color-secondary);
|
|
30
31
|
|
|
31
|
-
color: var(--
|
|
32
|
+
color: var(--md-sys-color-on-secondary);
|
|
32
33
|
|
|
33
34
|
md-icon {
|
|
34
|
-
color: var(--
|
|
35
|
+
color: var(--md-sys-color-on-secondary);
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
}
|
|
@@ -60,13 +61,13 @@ export const ButtonContainerStyles = css `
|
|
|
60
61
|
|
|
61
62
|
select,
|
|
62
63
|
input[type='text'] {
|
|
63
|
-
background-color: var(--button-background-color,
|
|
64
|
-
border: 1px solid
|
|
64
|
+
background-color: var(--button-background-color, var(--md-sys-color-secondary-container));
|
|
65
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
65
66
|
border-radius: var(--button-border-radius);
|
|
66
|
-
padding: 0 var(--
|
|
67
|
+
padding: 0 var(--spacing-tiny);
|
|
67
68
|
|
|
68
69
|
font-size: var(--fontsize-default);
|
|
69
|
-
color: var(--secondary-
|
|
70
|
+
color: var(--button-color, var(--md-sys-color-on-secondary-container));
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
[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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FvC,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 color: var(--md-sys-color-on-secondary-container);\n }\n\n &:hover {\n background-color: var(--md-sys-color-secondary);\n border: 1px solid var(--md-sys-color-secondary);\n\n color: var(--md-sys-color-on-secondary);\n\n md-icon {\n color: var(--md-sys-color-on-secondary);\n }\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 border-color: var(--md-sys-color-error);\n background-color: var(--md-sys-color-error);\n\n md-icon {\n color: var(--md-sys-color-on-error);\n }\n\n &:hover {\n background-color: var(--md-sys-color-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,7 +27,7 @@ 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'] {
|
|
@@ -41,38 +41,38 @@ export const CommonGristStyles = css `
|
|
|
41
41
|
flex-wrap: nowrap;
|
|
42
42
|
align-items: center;
|
|
43
43
|
margin-left: auto;
|
|
44
|
-
margin-right: var(--
|
|
45
|
-
padding-left: var(--
|
|
46
|
-
border-bottom: var(--
|
|
44
|
+
margin-right: var(--spacing-small);
|
|
45
|
+
padding-left: var(--spacing-tiny);
|
|
46
|
+
border-bottom: var(--md-sys-color-outline);
|
|
47
47
|
position: relative;
|
|
48
|
-
color: var(--secondary-
|
|
48
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
49
49
|
font-size: var(--fontsize-default);
|
|
50
50
|
user-select: none;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
#sorters > * {
|
|
54
|
-
padding: var(--
|
|
54
|
+
padding: var(--spacing-tiny);
|
|
55
55
|
vertical-align: middle;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
#modes > * {
|
|
59
|
-
padding: var(--
|
|
59
|
+
padding: var(--spacing-tiny);
|
|
60
60
|
opacity: 0.5;
|
|
61
|
-
color: var(--
|
|
61
|
+
color: var(--md-sys-color-on-primary-container);
|
|
62
62
|
cursor: pointer;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
#modes > md-icon[active] {
|
|
66
66
|
border-radius: 9px;
|
|
67
|
-
background-color:
|
|
67
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
68
68
|
opacity: 1;
|
|
69
|
-
color: var(--
|
|
69
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
70
70
|
cursor: default;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
#modes > md-icon:hover {
|
|
74
74
|
opacity: 1;
|
|
75
|
-
color: var(--
|
|
75
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
#add {
|
|
@@ -85,7 +85,8 @@ export const CommonGristStyles = css `
|
|
|
85
85
|
justify-content: center;
|
|
86
86
|
gap: 0px 10px;
|
|
87
87
|
|
|
88
|
-
background-color: var(--primary-
|
|
88
|
+
background-color: var(--md-sys-color-primary-container);
|
|
89
|
+
color: var(--md-sys-color-on-primary-container);
|
|
89
90
|
border: 0;
|
|
90
91
|
border-radius: 50%;
|
|
91
92
|
padding: 5px;
|
|
@@ -95,13 +96,13 @@ export const CommonGristStyles = css `
|
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
#add button:hover {
|
|
98
|
-
background-color: var(--
|
|
99
|
+
background-color: var(--md-sys-color-on-primary-container);
|
|
100
|
+
color: var(--md-sys-color-primary-container);
|
|
99
101
|
box-shadow: var(--box-shadow);
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
#add button md-icon {
|
|
103
105
|
font-size: 1.5em;
|
|
104
|
-
color: var(--theme-white-color);
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
#filters {
|
|
@@ -112,7 +113,7 @@ export const CommonGristStyles = css `
|
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
#filters > * {
|
|
115
|
-
margin-right: var(--
|
|
116
|
+
margin-right: var(--spacing-small);
|
|
116
117
|
}
|
|
117
118
|
|
|
118
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-small) 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
|
}
|
|
@@ -111,12 +113,12 @@ export const CommonHeaderStyles = css `
|
|
|
111
113
|
|
|
112
114
|
.filters {
|
|
113
115
|
flex-wrap: wrap;
|
|
114
|
-
gap: var(--
|
|
116
|
+
gap: var(--spacing-medium);
|
|
115
117
|
border: none;
|
|
116
118
|
}
|
|
117
119
|
|
|
118
120
|
.actions {
|
|
119
|
-
background-color:
|
|
121
|
+
background-color: var(--md-sys-color-on-secondary-container);
|
|
120
122
|
margin: 0;
|
|
121
123
|
}
|
|
122
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
|
|
@@ -8,11 +8,11 @@ export const ScrollbarStyles = css `
|
|
|
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
12
|
border-radius: var(--scrollbar-thumb-border-radius, 0);
|
|
13
13
|
}
|
|
14
14
|
::-webkit-scrollbar-thumb:hover {
|
|
15
|
-
background-color: var(--scrollbar-thumb-hover-color,
|
|
15
|
+
background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
:host::-webkit-scrollbar {
|
|
@@ -23,10 +23,10 @@ export const ScrollbarStyles = css `
|
|
|
23
23
|
background-color: transparent;
|
|
24
24
|
}
|
|
25
25
|
:host::-webkit-scrollbar-thumb {
|
|
26
|
-
background-color: var(--scrollbar-thumb-color,
|
|
26
|
+
background-color: var(--scrollbar-thumb-color, var(--md-sys-color-outline));
|
|
27
27
|
}
|
|
28
28
|
:host::-webkit-scrollbar-thumb:hover {
|
|
29
|
-
background-color: var(--scrollbar-thumb-hover-color,
|
|
29
|
+
background-color: var(--scrollbar-thumb-hover-color, var(--md-sys-color-outline-variant));
|
|
30
30
|
}
|
|
31
31
|
`;
|
|
32
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,
|
|
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"]}
|
|
@@ -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>;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import { ButtonContainerStyles } from '../src/button-container-styles.js';
|
|
3
3
|
import { html } from 'lit';
|
|
4
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'button-container-styles-pure',
|
|
6
7
|
component: 'div',
|
|
7
|
-
argTypes: {
|
|
8
|
+
argTypes: {
|
|
9
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
10
|
+
}
|
|
8
11
|
};
|
|
9
|
-
const Template = ({
|
|
10
|
-
<link href="/
|
|
11
|
-
|
|
12
|
+
const Template = ({ theme = 'light' }) => html `
|
|
13
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
14
|
+
|
|
15
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
16
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
17
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
18
|
+
|
|
12
19
|
<link
|
|
13
20
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
14
21
|
rel="stylesheet"
|
|
@@ -22,14 +29,36 @@ const Template = ({ label = '' }) => html `
|
|
|
22
29
|
rel="stylesheet"
|
|
23
30
|
/>
|
|
24
31
|
|
|
32
|
+
<script>
|
|
33
|
+
document.body.classList.add('${theme}')
|
|
34
|
+
</script>
|
|
35
|
+
|
|
25
36
|
<style>
|
|
26
37
|
body {
|
|
27
|
-
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 500px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
background-color: var(--md-sys-color-background);
|
|
44
|
+
color: var(--md-sys-color-on-background);
|
|
28
45
|
}
|
|
29
46
|
|
|
47
|
+
.container {
|
|
48
|
+
padding: var(--spacing-medium);
|
|
49
|
+
background-color: var(--md-sys-color-primary-container);
|
|
50
|
+
color: var(--md-sys-color-on-primary-container);
|
|
51
|
+
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 10px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
${MDTypeScaleStyles.cssText}
|
|
30
58
|
${ButtonContainerStyles.cssText}
|
|
31
59
|
</style>
|
|
32
|
-
|
|
60
|
+
|
|
61
|
+
<div class="container md-typescale-body-medium">
|
|
33
62
|
<div class="button-container" style="background-color: white;">
|
|
34
63
|
<button raised><md-icon>save</md-icon>save</button>
|
|
35
64
|
<button outlined><md-icon>launch</md-icon>remove</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-container-styles.stories.js","sourceRoot":"","sources":["../../stories/button-container-styles.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"button-container-styles.stories.js","sourceRoot":"","sources":["../../stories/button-container-styles.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;mCAqBtC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;MAwBlC,iBAAiB,CAAC,OAAO;MACzB,qBAAqB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBlC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport { ButtonContainerStyles } from '../src/button-container-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'button-container-styles-pure',\n component: 'div',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n theme?: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <style>\n body {\n width: 100%;\n height: 500px;\n text-align: center;\n\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n .container {\n padding: var(--spacing-medium);\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n ${MDTypeScaleStyles.cssText}\n ${ButtonContainerStyles.cssText}\n </style>\n\n <div class=\"container md-typescale-body-medium\">\n <div class=\"button-container\" style=\"background-color: white;\">\n <button raised><md-icon>save</md-icon>save</button>\n <button outlined><md-icon>launch</md-icon>remove</button>\n <button danger><md-icon>delete</md-icon>delete</button>\n </div>\n\n <div class=\"button-container\" style=\"background-color: white;\">\n <button danger><md-icon>cancel</md-icon>cancel</button>\n <button><md-icon>done</md-icon>confirm</button>\n </div>\n\n <div class=\"button-container\" style=\"background-color: white;margin-left: unset;\">\n <button danger><md-icon>restart_alt</md-icon>reset</button>\n <div filler></div>\n <button danger><md-icon>cancel</md-icon>cancel</button>\n <button><md-icon>done</md-icon>confirm</button>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|
|
@@ -8,6 +8,10 @@ declare const _default: {
|
|
|
8
8
|
label: {
|
|
9
9
|
control: string;
|
|
10
10
|
};
|
|
11
|
+
theme: {
|
|
12
|
+
control: string;
|
|
13
|
+
options: string[];
|
|
14
|
+
};
|
|
11
15
|
};
|
|
12
16
|
};
|
|
13
17
|
export default _default;
|
|
@@ -18,5 +22,6 @@ interface Story<T> {
|
|
|
18
22
|
}
|
|
19
23
|
interface ArgTypes {
|
|
20
24
|
label?: string;
|
|
25
|
+
theme?: 'light' | 'dark';
|
|
21
26
|
}
|
|
22
27
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -2,17 +2,23 @@ import '@material/web/icon/icon.js';
|
|
|
2
2
|
import '@operato/context/ox-context-page-toolbar.js';
|
|
3
3
|
import { CommonHeaderStyles } from '../src/common-header-styles.js';
|
|
4
4
|
import { html } from 'lit';
|
|
5
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
5
6
|
export default {
|
|
6
7
|
title: 'common-header-styles-actions',
|
|
7
8
|
component: 'div',
|
|
8
9
|
argTypes: {
|
|
9
|
-
label: { control: 'string' }
|
|
10
|
+
label: { control: 'string' },
|
|
11
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
10
12
|
}
|
|
11
13
|
};
|
|
12
|
-
const Template = ({ label = '' }) => html `
|
|
13
|
-
<link href="/
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const Template = ({ label = '', theme = 'light' }) => html `
|
|
15
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
16
|
+
|
|
17
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
18
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
19
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
20
|
+
|
|
21
|
+
<link
|
|
16
22
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
17
23
|
rel="stylesheet"
|
|
18
24
|
/>
|
|
@@ -25,26 +31,43 @@ const Template = ({ label = '' }) => html `
|
|
|
25
31
|
rel="stylesheet"
|
|
26
32
|
/>
|
|
27
33
|
|
|
34
|
+
<script>
|
|
35
|
+
document.body.classList.add('${theme}')
|
|
36
|
+
</script>
|
|
28
37
|
|
|
29
38
|
<style>
|
|
30
39
|
body {
|
|
31
|
-
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 500px;
|
|
42
|
+
text-align: center;
|
|
43
|
+
|
|
44
|
+
background-color: var(--md-sys-color-background);
|
|
45
|
+
color: var(--md-sys-color-on-background);
|
|
32
46
|
}
|
|
33
47
|
|
|
48
|
+
.container {
|
|
49
|
+
padding: var(--spacing-medium);
|
|
50
|
+
background-color: var(--md-sys-color-primary-container);
|
|
51
|
+
color: var(--md-sys-color-on-primary-container);
|
|
52
|
+
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: var(--spacing-medium);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
${MDTypeScaleStyles.cssText}
|
|
34
59
|
${CommonHeaderStyles.cssText}
|
|
35
60
|
</style>
|
|
36
61
|
|
|
37
|
-
<div
|
|
62
|
+
<div class="container md-typescale-body-medium">
|
|
38
63
|
<div class="header">
|
|
39
|
-
<div class="title">
|
|
40
|
-
${label}
|
|
41
|
-
</div>
|
|
64
|
+
<div class="title">${label}</div>
|
|
42
65
|
|
|
43
|
-
<div class="filters">
|
|
44
|
-
<label>Filter</label><input type="text"></input>
|
|
45
|
-
</div>
|
|
66
|
+
<div class="filters"><label>Filter</label><input type="text" /></div>
|
|
46
67
|
|
|
47
|
-
<ox-context-page-toolbar
|
|
68
|
+
<ox-context-page-toolbar
|
|
69
|
+
class="actions"
|
|
70
|
+
.context=${{
|
|
48
71
|
exportable: {
|
|
49
72
|
// name: i18next.t('title.data-set list'),
|
|
50
73
|
// data: this.exportHandler.bind(this)
|
|
@@ -71,8 +94,9 @@ const Template = ({ label = '' }) => html `
|
|
|
71
94
|
],
|
|
72
95
|
toolbar: false
|
|
73
96
|
}}
|
|
74
|
-
|
|
75
|
-
|
|
97
|
+
}
|
|
98
|
+
>
|
|
99
|
+
</ox-context-page-toolbar>
|
|
76
100
|
</div>
|
|
77
101
|
</div>
|
|
78
102
|
`;
|