@operato/styles 10.16.2 โ 10.23.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 +19 -0
- package/dist/src/box-padding-editor-styles.d.ts +5 -0
- package/dist/src/box-padding-editor-styles.js +56 -83
- package/dist/src/box-padding-editor-styles.js.map +1 -1
- package/dist/src/button-container-styles.js +21 -16
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +20 -15
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/line-styles.js +34 -21
- package/dist/src/line-styles.js.map +1 -1
- package/dist/src/property-grid-styles.js +321 -37
- package/dist/src/property-grid-styles.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :sparkles: Styling
|
|
10
|
+
|
|
11
|
+
* **property-panel,input,styles:** quiet inspector, one vocabulary in both schemes ([40e67e9](https://github.com/hatiolab/operato/commit/40e67e9aced202151a4f2f8d7ef96ec840defc18))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### :bug: Bug Fix
|
|
15
|
+
|
|
16
|
+
* **styles:** word choices in a property radio row keep their width and wrap ([8554a3d](https://github.com/hatiolab/operato/commit/8554a3d2151859c3da57250e4520de91a582f2df))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### :rocket: New Features
|
|
20
|
+
|
|
21
|
+
* **font:** specimen cards for the font list; themeable danger buttons ([e3cafc0](https://github.com/hatiolab/operato/commit/e3cafc03eec6e5cb9e76ae640c05dd9129e4893f))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
### [10.16.2](https://github.com/hatiolab/operato/compare/v10.16.1...v10.16.2) (2026-09-18)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @operato/styles
|
|
@@ -1 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The padding editor: four numbers around a small box, laid out as the box they describe.
|
|
3
|
+
* Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that
|
|
4
|
+
* ignored the theme entirely).
|
|
5
|
+
*/
|
|
1
6
|
export declare const BoxPaddingEditorStyles: import("lit").CSSResult;
|
|
@@ -1,99 +1,72 @@
|
|
|
1
|
-
import { css
|
|
2
|
-
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* The padding editor: four numbers around a small box, laid out as the box they describe.
|
|
4
|
+
* Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that
|
|
5
|
+
* ignored the theme entirely).
|
|
6
|
+
*/
|
|
3
7
|
export const BoxPaddingEditorStyles = css `
|
|
4
|
-
:
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
+
/* The editor is the four numbers, not a slab: no fill or frame on the whole block. */
|
|
9
|
+
.property-grid > .box-padding.custom-editor,
|
|
8
10
|
.box-padding {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.box-padding .
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.box-padding .slide3 {
|
|
36
|
-
background-position: 100% -440px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.box-padding .slide4 {
|
|
40
|
-
background-position: 0 -360px;
|
|
41
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.box-padding .slide5 {
|
|
45
|
-
background: none;
|
|
46
|
-
text-align: center;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.box-padding .slide6 {
|
|
50
|
-
background-position: 100% -160px;
|
|
51
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.box-padding .slide7 {
|
|
55
|
-
background-position: 0 100%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.box-padding .slide8 {
|
|
59
|
-
background-position: 50% -320px;
|
|
60
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.box-padding .slide9 {
|
|
64
|
-
background-position: 0 0px;
|
|
11
|
+
background: transparent;
|
|
12
|
+
border: 0;
|
|
13
|
+
box-shadow: none;
|
|
14
|
+
min-height: 0;
|
|
15
|
+
display: grid;
|
|
16
|
+
grid-template-columns: 1fr auto 1fr;
|
|
17
|
+
grid-template-rows: auto auto auto;
|
|
18
|
+
grid-template-areas:
|
|
19
|
+
'. top .'
|
|
20
|
+
'left inner right'
|
|
21
|
+
'. bottom .';
|
|
22
|
+
gap: 2px 4px;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-items: center;
|
|
25
|
+
padding: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.box-padding .inner {
|
|
29
|
+
grid-area: inner;
|
|
30
|
+
width: 34px;
|
|
31
|
+
height: 18px;
|
|
32
|
+
border-radius: 3px;
|
|
33
|
+
border: 1px dashed var(--md-sys-color-outline);
|
|
34
|
+
opacity: 0.7;
|
|
65
35
|
}
|
|
66
36
|
|
|
67
37
|
.box-padding input {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
padding: 0px;
|
|
72
|
-
clear: both;
|
|
73
|
-
float: initial;
|
|
74
|
-
border: 1px solid #fff;
|
|
75
|
-
border-width: 0 0 1px 0;
|
|
38
|
+
width: 38px;
|
|
39
|
+
min-height: 22px;
|
|
40
|
+
padding: 1px 4px;
|
|
76
41
|
text-align: right;
|
|
77
|
-
font-size:
|
|
42
|
+
font-size: 0.76rem;
|
|
43
|
+
font-variant-numeric: tabular-nums;
|
|
44
|
+
color: var(--md-sys-color-on-surface);
|
|
45
|
+
background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
|
|
46
|
+
border: 1px solid transparent;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
outline: none;
|
|
78
49
|
}
|
|
79
50
|
|
|
80
|
-
.
|
|
81
|
-
|
|
82
|
-
display: block;
|
|
83
|
-
margin: auto;
|
|
51
|
+
.box-padding input:hover {
|
|
52
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
84
53
|
}
|
|
85
54
|
|
|
86
|
-
.
|
|
87
|
-
|
|
55
|
+
.box-padding input:focus {
|
|
56
|
+
border-color: var(--md-sys-color-primary);
|
|
88
57
|
}
|
|
89
58
|
|
|
90
|
-
.
|
|
91
|
-
|
|
92
|
-
margin-top: -25px;
|
|
59
|
+
.box-padding input.top {
|
|
60
|
+
grid-area: top;
|
|
93
61
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
62
|
+
.box-padding input.left {
|
|
63
|
+
grid-area: left;
|
|
64
|
+
}
|
|
65
|
+
.box-padding input.right {
|
|
66
|
+
grid-area: right;
|
|
67
|
+
}
|
|
68
|
+
.box-padding input.bottom {
|
|
69
|
+
grid-area: bottom;
|
|
97
70
|
}
|
|
98
71
|
`;
|
|
99
72
|
//# sourceMappingURL=box-padding-editor-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../src/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../src/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The padding editor: four numbers around a small box, laid out as the box they describe.\n * Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that\n * ignored the theme entirely).\n */\nexport const BoxPaddingEditorStyles = css`\n /* The editor is the four numbers, not a slab: no fill or frame on the whole block. */\n .property-grid > .box-padding.custom-editor,\n .box-padding {\n background: transparent;\n border: 0;\n box-shadow: none;\n min-height: 0;\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n '. top .'\n 'left inner right'\n '. bottom .';\n gap: 2px 4px;\n align-items: center;\n justify-items: center;\n padding: 0;\n }\n\n .box-padding .inner {\n grid-area: inner;\n width: 34px;\n height: 18px;\n border-radius: 3px;\n border: 1px dashed var(--md-sys-color-outline);\n opacity: 0.7;\n }\n\n .box-padding input {\n width: 38px;\n min-height: 22px;\n padding: 1px 4px;\n text-align: right;\n font-size: 0.76rem;\n font-variant-numeric: tabular-nums;\n color: var(--md-sys-color-on-surface);\n background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n border: 1px solid transparent;\n border-radius: 6px;\n outline: none;\n }\n\n .box-padding input:hover {\n border-color: var(--md-sys-color-outline-variant);\n }\n\n .box-padding input:focus {\n border-color: var(--md-sys-color-primary);\n }\n\n .box-padding input.top {\n grid-area: top;\n }\n .box-padding input.left {\n grid-area: left;\n }\n .box-padding input.right {\n grid-area: right;\n }\n .box-padding input.bottom {\n grid-area: bottom;\n }\n`\n"]}
|
|
@@ -157,32 +157,37 @@ export const ButtonContainerStyles = css `
|
|
|
157
157
|
[danger],
|
|
158
158
|
button[danger],
|
|
159
159
|
md-assist-chip[danger] {
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
/*
|
|
161
|
+
* The destructive fill. The scheme's error tokens are the default; a theme may hand in its
|
|
162
|
+
* own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red
|
|
163
|
+
* figures reads as a sticker rather than a button.
|
|
164
|
+
*/
|
|
165
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
166
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
162
167
|
|
|
163
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-on-error);
|
|
164
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
|
|
168
|
+
--md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
169
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
165
170
|
|
|
166
|
-
--md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
|
|
167
|
-
--md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
|
|
171
|
+
--md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
172
|
+
--md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
168
173
|
|
|
169
|
-
color: var(--md-sys-color-on-error);
|
|
170
|
-
background-color: var(--md-sys-color-error);
|
|
171
|
-
border-color: var(--md-sys-color-error);
|
|
174
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
175
|
+
background-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
176
|
+
border-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
172
177
|
|
|
173
178
|
md-icon {
|
|
174
|
-
color: var(--md-sys-color-on-error);
|
|
179
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
175
180
|
}
|
|
176
181
|
|
|
177
182
|
&:hover {
|
|
178
|
-
--md-assist-chip-outline-color: var(--md-sys-color-error);
|
|
179
|
-
--md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
|
|
183
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
184
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
180
185
|
|
|
181
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-error);
|
|
182
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-error);
|
|
186
|
+
--md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
187
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
183
188
|
|
|
184
|
-
color: var(--md-sys-color-error);
|
|
185
|
-
background-color: var(--md-sys-color-on-error);
|
|
189
|
+
color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
190
|
+
background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
186
191
|
}
|
|
187
192
|
}
|
|
188
193
|
|
|
@@ -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,OAAO,EAAE,iCAAiC,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAExG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;2CAaG,iBAAiB,CAAC,yBAAyB,CAAC;6CAC1C,iBAAiB,CAAC,yBAAyB,CAAC;yCAChD,iBAAiB,CAAC,yBAAyB,CAAC;6CACxC,iBAAiB,CAAC,yBAAyB,CAAC;iDACxC,iBAAiB,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;cAyB/E,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoDtC,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2C5C,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;UAMlG,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC
|
|
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,OAAO,EAAE,iCAAiC,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAExG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;2CAaG,iBAAiB,CAAC,yBAAyB,CAAC;6CAC1C,iBAAiB,CAAC,yBAAyB,CAAC;yCAChD,iBAAiB,CAAC,yBAAyB,CAAC;6CACxC,iBAAiB,CAAC,yBAAyB,CAAC;iDACxC,iBAAiB,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;cAyB/E,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoDtC,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2C5C,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;UAMlG,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E3G,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { ACTION_HEIGHT_PLATFORM_EXCEPTIONS, actionHeight, suiteActionHeight } from './action-heights.js'\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 text-transform: capitalize;\n\n /*\n * In the operato products a Material button in this bar takes the bar's height. Elsewhere the\n * declaration is empty and Material keeps its own (ADR-0060 decision 6-1).\n */\n --md-filled-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-outlined-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-text-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-elevated-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-filled-tonal-button-container-height: ${suiteActionHeight('--context-action-height')};\n }\n\n /*\n * ๋์ ๋ฒํผ โ ํ์ด์ง์ ๋ฐํยท์ทจ์ยท๋ด๋ณด๋ด๊ธฐ.\n *\n * โโ ์ ์นฉ์ด ์๋๋ผ button ์ธ๊ฐ (2026-08-31) โโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n * ํ๋์ ์ด ์๋ฆฌ๋ฅผ md-assist-chip ์ผ๋ก ๊ทธ๋ ธ๋ค. ๋จธํฐ๋ฆฌ์ผ ๋ฒํผ์ด ๊ธฐ๋ณธ 40px ์ ์ข์ฐ ์ฌ๋ฐฑ 24px ์ด๋ผ\n * ๋ฒํผ์ด ์๋ ๋์ด๋ ํด๋ฐ์ ํฌ๊ธฐ ๋๋ฌธ์ด์๋ค. ๊ทธ๋ฐ๋ฐ ์นฉ์ ๋ ๊ฐ์ง๋ฅผ ์๋๋ค.\n *\n * ๋ป ์นฉ์ ใ๊ณ ๋ฅผ ์ ์๋ ๊ฒใ์ด๊ณ ๋ฒํผ์ ใํ๋ ๊ฒใ์ด๋ค. ํ๋ฉด ๋ญ๋
๊ธฐ๊ฐ ๊ทธ๋๋ก ์ฝ๋๋ค\n * ์๊ณ ์นฉ์๋ ๋จ๊ณ ๊ตฌ๋ถ์ด ์๋ค โ ใ๋ฐํใ๊ณผ ใ์ทจ์ใ๊ฐ ๋๊ฐ์ด ๋ณด์ธ๋ค\n *\n * ๋ ๋ฒ์งธ๊ฐ ํฌ๋ค. ์ด ๋ถํ์ emphasis: { raised, danger } ๋ฅผ ์ด๋ฏธ ๋ฐ๊ณ ์๋๋ฐ, ์นฉ์ผ๋ก๋ ๊ทธ ๋ป์\n * ๊ทธ๋ฆฌ์ง ๋ชปํด raised ๊ฐ ๊ทธ๋ฆผ์ ํ๋๋ก ๋๋ฌ๋ค. ๋ฐ์ ๊ฒ์ ๊ทธ๋ฆฌ์ง ๋ชปํ๋ ๊ฒ์ด ๋ฌธ์ ์๋ค.\n *\n * ํฌ๊ธฐ๋ ํ ํฐ์ผ๋ก ์ ํ๋ค โ ๋จธํฐ๋ฆฌ์ผ ๊ธฐ๋ณธ๊ฐ์ ๋งค์ด์ง ์์ผ๋ฉด ์๊ฒ ๋ง๋ค ์ ์๋ค.\n */\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-small);\n\n box-sizing: border-box;\n height: ${actionHeight('--context-action-height')};\n padding: 0 var(--spacing-large);\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: var(--button-border-radius, var(--md-sys-shape-corner-small));\n\n background-color: var(--button-background-color, var(--md-sys-color-surface-container-lowest));\n color: var(--button-color, var(--md-sys-color-on-surface));\n\n font-family: inherit;\n font-size: var(--fontsize-small);\n /* ๋ณธ๋ฌธ๊ณผ ๊ฐ์ ๊ตต๊ธฐ๋ฉด ๋ฌธ์ฅ์ธ์ง ๋ฒํผ์ธ์ง ๊ตฌ๋ณ๋์ง ์๋๋ค. */\n font-weight: 600;\n line-height: 1;\n text-wrap: nowrap;\n\n cursor: pointer;\n transition:\n background-color 0.12s,\n border-color 0.12s,\n color 0.12s;\n\n md-icon {\n --md-icon-size: var(--icon-size-small);\n\n flex: none;\n /* ์์ด์ฝ๋ง ๊ฐ์กฐ์ โ ๋ฒํผ ์ ์ฒด๋ฅผ ์น ํ๋ฉด ์ฌ๋ฟ ๋๋ํ ๋์์ ๋ ํ๋ฉด์ด ์๋๋ฝ๋ค. */\n color: var(--md-sys-color-primary);\n }\n\n &:hover {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n border-color: var(--md-sys-color-secondary);\n }\n\n /*\n * ํค๋ณด๋๋ก ์์ ๋. :focus ๊ฐ ์๋๋ผ :focus-visible โ ๋ง์ฐ์ค๋ก ๋๋ฌ๋ ํ
๋๋ฆฌ๊ฐ ๋จ์ผ๋ฉด\n * ์ฌ์ฉ์๋ ใ๋๋ฆฐ ์ฑ๋ก ์๋คใ๋ก ์ฝ๋๋ค.\n */\n &:focus-visible {\n outline: 2px solid var(--md-sys-color-primary);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.38;\n cursor: default;\n pointer-events: none;\n }\n\n /* ์์ด์ฝ๋ง ์๋ ๋ฒํผ โ ์ ์ฌ๊ฐ. ๊ธ์๊ฐ ์์ผ๋ฏ๋ก ๋ถ๋ฅด๋ ์ชฝ์ด title ์ ๋ถ์ธ๋ค. */\n &[icon-only] {\n width: ${actionHeight('--context-action-height')};\n padding: 0;\n }\n }\n\n /*\n * ์ฃผ ๋์ โ ํ๋ฉด์์ ํ๋๋ง. emphasis: { raised: true } ๋ก ์ ์ธํ๋ค.\n * ๋ ์ด์์ ์ด๋ ๊ฒ ๋๋ฉด ์ด๋ ๊ฒ๋ ์ฃผ ๋์์ด ์๋๊ฒ ๋๋ค.\n */\n button[raised],\n md-assist-chip[raised] {\n --md-assist-chip-outline-color: var(--md-sys-color-primary);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);\n --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);\n\n background-color: var(--md-sys-color-primary);\n border-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-on-primary);\n\n md-icon {\n color: var(--md-sys-color-on-primary);\n }\n\n /* ์ฑ์ด ๋ฒํผ์ ์์ ๋ฐ๊พธ์ง ์๊ณ ํ ๋จ๊ณ ์ด๋ก๊ฒ โ ํฐ ๊ธ์๊ฐ ๊ณ์ ์ฝํ์ผ ํ๋ค. */\n &:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);\n border-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);\n color: var(--md-sys-color-on-primary);\n\n md-icon {\n color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n /*\n * With a finger. The platform keeps 44px; the operato products use one height for mouse and finger\n * (their suite value). A screen that raises --context-action-height still wins through max().\n */\n @media (pointer: coarse) {\n button {\n height: max(\n ${actionHeight('--context-action-height')},\n ${suiteActionHeight('--context-action-height', ACTION_HEIGHT_PLATFORM_EXCEPTIONS.contextActionTouch)}\n );\n }\n\n button[icon-only] {\n width: max(\n ${actionHeight('--context-action-height')},\n ${suiteActionHeight('--context-action-height', ACTION_HEIGHT_PLATFORM_EXCEPTIONS.contextActionTouch)}\n );\n }\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n /*\n * The destructive fill. The scheme's error tokens are the default; a theme may hand in its\n * own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red\n * figures reads as a sticker rather than a button.\n */\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));\n\n --md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n background-color: var(--danger-button-background, var(--md-sys-color-error));\n border-color: var(--danger-button-background, var(--md-sys-color-error));\n\n md-icon {\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n }\n\n &:hover {\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-hover-color, var(--md-sys-color-error));\n background-color: var(--danger-button-hover-background, 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"]}
|
|
@@ -265,28 +265,33 @@ export const CommonHeaderStyles = css `
|
|
|
265
265
|
[danger],
|
|
266
266
|
button[danger],
|
|
267
267
|
md-assist-chip[danger] {
|
|
268
|
-
|
|
269
|
-
|
|
268
|
+
/*
|
|
269
|
+
* The destructive fill. The scheme's error tokens are the default; a theme may hand in its
|
|
270
|
+
* own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red
|
|
271
|
+
* figures reads as a sticker rather than a button.
|
|
272
|
+
*/
|
|
273
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
274
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
270
275
|
|
|
271
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-on-error);
|
|
272
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
|
|
276
|
+
--md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
277
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
273
278
|
|
|
274
|
-
--md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
|
|
275
|
-
--md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
|
|
279
|
+
--md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
280
|
+
--md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
276
281
|
|
|
277
|
-
color: var(--md-sys-color-on-error);
|
|
278
|
-
background-color: var(--md-sys-color-error);
|
|
279
|
-
border-color: var(--md-sys-color-error);
|
|
282
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
283
|
+
background-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
284
|
+
border-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
280
285
|
|
|
281
286
|
&:hover {
|
|
282
|
-
--md-assist-chip-outline-color: var(--md-sys-color-error);
|
|
283
|
-
--md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
|
|
287
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
288
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
284
289
|
|
|
285
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-error);
|
|
286
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-error);
|
|
290
|
+
--md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
291
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
287
292
|
|
|
288
|
-
color: var(--md-sys-color-error);
|
|
289
|
-
background-color: var(--md-sys-color-on-error);
|
|
293
|
+
color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
294
|
+
background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
290
295
|
}
|
|
291
296
|
}
|
|
292
297
|
|
|
@@ -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,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuIjB,YAAY,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLxD,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { actionHeight } from './action-heights.js'\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\n /*\n * โโ ์ด ์ฌ๋ฐฑ์ด ๋จธ๋ฆฌ ์ค์ ์์๋ ์จ์ด๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n * ๋จธ๋ฆฌ๋ ๊ทธ๋ฆฌ์คํธ ๋งจ ์์ ์นํ๊ณ , ๋ณธ๋ฌธ์ ๋จธ๋ฆฌ๊ฐ ๋๋๋ ์๋ฆฌ์์ ์์ํ๋ค. ๊ทธ๋์ ๋จธ๋ฆฌ ์์\n * ๋ด์ฉ(ํํฐ ์นฉ ยท ํํฐ ํผ) ์์๋ ์ฌ๋ฐฑ์ **์ด padding ํ๋๊ฐ ์ ํ๋ค** โ ํ์ชฝ๋ง ๋์ด์ง๋ ์ผ์ด\n * ์๋ค.\n *\n * 4px(= medium/2)์ด์์ ๋ ์ข์ ๋ณด์๋ค. ๋๊ธ์ ๋ค์ ๊ฐ์ด 8px ์ด๊ณ , ๊ทธ๊ฒ์ด ๋ง์นจ ๊ฐ๋ก์ ๊ฐ์์\n * **๋ค ๋ฉด์ ํ ๊ฐ์ผ๋ก** ์ด๋ค โ ๋๊ธ์ ์๋ ๊ฐ์ ์ํด ํ ํฐ์ ์๋ก ์ง์ด๋ด์ง ์๋๋ค.\n *\n * ๊ฐ๋ก๊ฐ ๊ทธ๋ฆฌ์คํธ์ ์ข์ฐ padding ๊ณผ ๊ฐ์ ๊ฐ์ด์ด์ผ ๋จธ๋ฆฌ ์์ ์ฒซ ์์๊ฐ ํ์ ์ฒซ ์นธ๊ณผ **๊ฐ์ ์ผ์ชฝ\n * ๊ธฐ์ค์ **์ ์ ๋ค. ๊ทธ๊ฑด ์ทจํฅ์ด ์๋๋ผ ๋ง์ถฐ์ผ ํ๋ ๊ฐ์ด๊ณ , ์ธ๋ก๋ ๊ฐ์ ๊ฐ์ด๋ฉด ์ด๊ธ๋ ์ผ์ด ์๋ค.\n */\n padding: 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: none;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-medium) var(--spacing-large);\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\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 line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n\n button {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n text-align: right;\n background-color: var(--md-sys-color-surface-variant);\n padding: 0;\n\n /*\n * The footer is a popup's action row, so it reads the popup token (ADR-0060 decision 6). One use,\n * one token: popups moving to <ox-popup-actions> and popups still on this footer stay the same\n * height while the move is under way.\n */\n button {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n justify-content: center;\n min-height: ${actionHeight('--popup-action-height')};\n padding: var(--spacing-tiny) var(--spacing-medium);\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n line-height: 2;\n border-width: 0;\n border-radius: 0;\n border-left: 1px solid var(--md-sys-color-surface);\n }\n\n button[ok],\n button[done] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n [filler] {\n margin-left: auto;\n }\n\n /*\n * โโ ์๊ฐ๋ฝ๊ณผ ๋ง์ฐ์ค๋ ๋ค๋ฅธ ๋ฐ๋ฅ์ ์ํ๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ์์ ๋ชจ์์ **ํด๋ํฐ์ ํ๋จ ์ก์
๋ฐ**๋ค. ํ์ ๋ ์ ๊ฐ์ง ๋จ์ถ๊ฐ ์นธ๋ง์ด ์ ์ผ๋ก ๋ถ์ด ํ๋ฉด ํญ์\n * ๊ฝ ์ฑ์ด๋ค โ ์์ง๋ก ๋๋ฅด๋ ์๋ฆฌ๋ผ ๊ทธ๊ฒ ๋ง๋ค.\n *\n * ๋ง์ฐ์ค๋ก ์ฐ๋ ํ๋ฉด์์๋ ๊ทธ ๋ฌธ๋ฒ์ด ๋ต๋ตํ๋ค. ์์ ์์ ๋ ํ๋์ ๋ ๊ฐ ๋ค์ด์๊ณ , ๋จ์ถ ๊ธ์๊ฐ\n * ๋ณธ๋ฌธ(14px)๋ณด๋ค ํฐ 16px ์ ์ค๋์ด 2 ๋ผ ๋ ๊ฐ ๋๊บผ์์ง๋ค. ๊ฐ์ง ๋จ์ถ์ ์นธ๋ง์ด ์ ์ ์ด ์ ํ์\n * ๋ค๋ฅธ ์ปจํธ๋กค(์์ฝ ยท ๋ฅ๊ทผ ์นด๋)๊ณผ๋ ์ด๊ธ๋๋ค.\n *\n * ํญ์ด ์๋๋ผ **์
๋ ฅ ์ฅ์น**๋ก ๊ฐ๋ฅธ๋ค โ ์ข์ ์ฐฝ์์ ๋ง์ฐ์ค๋ฅผ ์ฐ๋ ์ฌ๋์๊ฒ ์ก์
๋ฐ๋ฅผ ์ค ์ด์ ๊ฐ\n * ์๊ณ , ํฐ ํ๋ธ๋ฆฟ์์ ์๊ฐ๋ฝ์ผ๋ก ๋๋ฅด๋ ์ฌ๋์๊ฒ๋ ์ค์ผ ํ๋ค. ๋ฉ๋ด ๋ ์ผ์ด ๊ฐ์ ๊ท์น์ ์ด๋ค.\n */\n @media (pointer: fine) {\n & {\n /* ๋ ๋ฅผ ๊ฑท๋๋ค. ๋ฐ๋ฅ์ ํ์
์ ๋ฉด ๊ทธ๋๋ก์ด๊ณ , ์์ชฝ ์ค์ ํ ์ฌ์ด ๊ฒฝ๊ณ๋ฅผ ๋งก๋๋ค. */\n background-color: transparent;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n gap: var(--spacing-small, 4px);\n padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px);\n align-items: center;\n }\n\n button {\n padding: 0 var(--spacing-large, 12px);\n gap: var(--spacing-small, 4px);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n line-height: 1.4;\n /*\n * โโ ๋ชจ์๋ฆฌ๋ **๋ด๋ ๋ฉด**์ ๋ฐ๋ฅธ๋ค (๋์ฌ ๋ชจ์๋ฆฌ) โโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ํ์ด์ง ๋ด๋ ๋ฉด 0 โ ๊ฝ ์ฐฌ ํ๋ฉด, ์ง๊ฐ ๊ฒฉ์ โ ์ปจํธ๋กค 6px (์ ์ฅ)\n * ํ์
๋ด๋ ๋ฉด 16px โ ๋ ์๋ ๋ฅ๊ทผ ์นด๋ โ ์ปจํธ๋กค ์์ฝ\n *\n * ์ด ๋ฐ๋ฅ์ ํ์
์์๋ง ์ ๋ค(๋ง์ฐ์ค ํ๋ฉด). ๊ทธ๋์ ์์ฝ์ด๋ค. ํ์ด์ง์ ์ ์ฅ์ด 6px ์ธ ๊ฒ๊ณผ\n * ๊ฐ๋ฆฌ๋๋ฐ, ๊ทธ๊ฒ์ด ๋ถ์ผ์น๊ฐ ์๋๋ผ **๊ฐ์ ์์น์ ๋ ๋ฒ ์ ์ฉํ ๊ฒฐ๊ณผ**๋ค.\n *\n * โโ ํ๋ 5px ๋ก ๋ฐ๊ฟจ๋ค. ๋๋๋ ธ๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n * ํ
๋ง๊ฐ Material ๋จ์ถ์ ๋ชจ์์ ๋ชป ๋ฐ์ ๋ ๊ฒ์ ๋ณด๊ณ \n *\n * shell/client/themes/material-theme.css:19-22\n * --md-{text,filled,outlined,elevated}-button-container-shape: var(--md-sys-shape-corner-small)\n *\n * ใ์ ํ์ด ์ด๋ฏธ ์ ํ์ผ๋ ์์ฝ์ ์ดํใ์ด๋ผ๊ณ ํ๋จํ๋ค. ๊ทธ ๊ฐ์ **ํ์ด์ง ๋จ์ถ๋ฅผ ์ํ\n * ๊ฒ**์ด๊ณ ํ์
์์ด๋ผ๋ ์กฐ๊ฑด์ ๋ฐ๋ก ๋ณธ ์ ์ด ์๋ค. ์ด์ CommonPopupStyles ๊ฐ ํ์
์์์\n * ๊ทธ ํ ํฐ์ ๋ฎ์ผ๋ฏ๋ก, Material ๋จ์ถ๋ฅผ ์ฐ๋ ํ์
์ด ๊ณณ๋ ํจ๊ป ์์ฝ์ด๋ค.\n *\n * ๊ฐ์ ํ์
์ด ๋ฐ๊ฟ ์ ์๋ค โ --popup-control-radius ๋ฅผ ๋ด๋ฆฌ๋ฉด ์ด ๋ฐ๋ฅ์ด ๋ฐ๋ฅธ๋ค.\n * CommonPopupStyles ๊ฐ ๊ทธ ์ง์ ์ ์ธํ๋ค.\n *\n * [ํ์ธํจ] 2026-09-04 ยท corner-full 999px ยท ํ์ด์ง ์ ์ฅ 6px/32px ยท\n * ํ์
์นด๋ [overlayed] 16px\n */\n border-radius: var(--popup-control-radius, 999em);\n /* ์นธ๋ง์ด ์ ์ ๊ฑท๋๋ค โ ๋จ์ถ๊ฐ ์ ๋ง๋ค ์๊ธฐ ๋ชจ์์ ๊ฐ์ง๋ฏ๋ก ๋๋ ํ์๊ฐ ์๋ค. */\n border-left: none;\n cursor: pointer;\n transition: background-color 0.12s ease-out;\n }\n\n /* ๊ณ ๋์์ ๊ธ์ ๋จ์ถ๋ค. ๋๋ฆด ์ ์๋ค๋ ๊ฒ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆด ๋ ๋ฉด์ผ๋ก ๋งํ๋ค. */\n button:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n /*\n * ๊ฐ์ ์ง์ฐ๋ ๋์์ ์ผ์ชฝ ๋์ ๋ฐ๋ก ์ ๋ค. ํ ๋จ ํ๋ฆฌ๊ฒ ๋๋ค โ ์์ฃผ ์ฐ๋ ์ผ์ด ์๋๊ณ ,\n * ํ์ ๊ณผ ๊ฐ์ ๋ฌด๊ฒ๋ก ๋๋ฉด ์๋ชป ๋๋ฅธ๋ค.\n */\n button[clear] {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n button[clear]:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n button md-icon {\n --md-icon-size: 18px;\n }\n\n /*\n * โโ ํ ์ ์๋ ๋จ์ถ๋ **ํ ์ ์์ด ๋ณด์ธ๋ค** โโโโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ์๋ฌด ์ผ๋ ํ์ง ์๋ ๋จ์ถ๋ฅผ ๊ทธ๋๋ก ๋๋ฉด, ๋๋ฅธ ์ฌ๋์ด ์๊ธฐ๊ฐ ๋ฌด์์ ์๋ชปํ๋์ง ๋ชจ๋ฅธ๋ค.\n * ์ฐธ์กฐ ํ์
์์ ๊ณ ๋ฅธ ๊ฒ์ด ์์ ๋ ํ์ธ์ด ๊ทธ๋ฌ๋ค โ ๋๋ฆฌ๊ธฐ๋ ํ๊ณ ์๋ฌด ์ผ์ด ์์๋ค.\n *\n * ์ฑ์์ ๊ฑท๊ณ ์ํฌ๋ฅผ ํ๋ฆฐ๋ค. ๋ง์ฐ์ค ์ปค์๋ ๋ฐ๊พผ๋ค โ ์ฌ๋ ค ๋ณด๋ฉด ์ ์ ์์ด์ผ ํ๋ค.\n */\n button[disabled],\n button[disabled]:hover {\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n cursor: default;\n box-shadow: none;\n }\n\n /* ์ฃผ ๋์ ํ๋๋ง ์ฑ์ด๋ค. ๋์ ์ฑ์ฐ๋ฉด ์ด๋ ์ชฝ์ด ๊ทธ ์ผ์ธ์ง ํ๋ ค์ง๋ค. */\n button[ok]:hover,\n button[done]:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));\n }\n }\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n --md-assist-chip-outline-color: var(--md-sys-color-error);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-error);\n\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 --md-assist-chip-hover-label-text-color: var(--md-sys-color-error);\n --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-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-outline-color: var(--md-sys-color-error);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);\n\n --md-assist-chip-label-text-color: var(--md-sys-color-error);\n --md-assist-chip-leading-icon-color: 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 @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
|
+
{"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,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuIjB,YAAY,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxD,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { actionHeight } from './action-heights.js'\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\n /*\n * โโ ์ด ์ฌ๋ฐฑ์ด ๋จธ๋ฆฌ ์ค์ ์์๋ ์จ์ด๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n * ๋จธ๋ฆฌ๋ ๊ทธ๋ฆฌ์คํธ ๋งจ ์์ ์นํ๊ณ , ๋ณธ๋ฌธ์ ๋จธ๋ฆฌ๊ฐ ๋๋๋ ์๋ฆฌ์์ ์์ํ๋ค. ๊ทธ๋์ ๋จธ๋ฆฌ ์์\n * ๋ด์ฉ(ํํฐ ์นฉ ยท ํํฐ ํผ) ์์๋ ์ฌ๋ฐฑ์ **์ด padding ํ๋๊ฐ ์ ํ๋ค** โ ํ์ชฝ๋ง ๋์ด์ง๋ ์ผ์ด\n * ์๋ค.\n *\n * 4px(= medium/2)์ด์์ ๋ ์ข์ ๋ณด์๋ค. ๋๊ธ์ ๋ค์ ๊ฐ์ด 8px ์ด๊ณ , ๊ทธ๊ฒ์ด ๋ง์นจ ๊ฐ๋ก์ ๊ฐ์์\n * **๋ค ๋ฉด์ ํ ๊ฐ์ผ๋ก** ์ด๋ค โ ๋๊ธ์ ์๋ ๊ฐ์ ์ํด ํ ํฐ์ ์๋ก ์ง์ด๋ด์ง ์๋๋ค.\n *\n * ๊ฐ๋ก๊ฐ ๊ทธ๋ฆฌ์คํธ์ ์ข์ฐ padding ๊ณผ ๊ฐ์ ๊ฐ์ด์ด์ผ ๋จธ๋ฆฌ ์์ ์ฒซ ์์๊ฐ ํ์ ์ฒซ ์นธ๊ณผ **๊ฐ์ ์ผ์ชฝ\n * ๊ธฐ์ค์ **์ ์ ๋ค. ๊ทธ๊ฑด ์ทจํฅ์ด ์๋๋ผ ๋ง์ถฐ์ผ ํ๋ ๊ฐ์ด๊ณ , ์ธ๋ก๋ ๊ฐ์ ๊ฐ์ด๋ฉด ์ด๊ธ๋ ์ผ์ด ์๋ค.\n */\n padding: 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: none;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-medium) var(--spacing-large);\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\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 line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n\n button {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n text-align: right;\n background-color: var(--md-sys-color-surface-variant);\n padding: 0;\n\n /*\n * The footer is a popup's action row, so it reads the popup token (ADR-0060 decision 6). One use,\n * one token: popups moving to <ox-popup-actions> and popups still on this footer stay the same\n * height while the move is under way.\n */\n button {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n justify-content: center;\n min-height: ${actionHeight('--popup-action-height')};\n padding: var(--spacing-tiny) var(--spacing-medium);\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n line-height: 2;\n border-width: 0;\n border-radius: 0;\n border-left: 1px solid var(--md-sys-color-surface);\n }\n\n button[ok],\n button[done] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n [filler] {\n margin-left: auto;\n }\n\n /*\n * โโ ์๊ฐ๋ฝ๊ณผ ๋ง์ฐ์ค๋ ๋ค๋ฅธ ๋ฐ๋ฅ์ ์ํ๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ์์ ๋ชจ์์ **ํด๋ํฐ์ ํ๋จ ์ก์
๋ฐ**๋ค. ํ์ ๋ ์ ๊ฐ์ง ๋จ์ถ๊ฐ ์นธ๋ง์ด ์ ์ผ๋ก ๋ถ์ด ํ๋ฉด ํญ์\n * ๊ฝ ์ฑ์ด๋ค โ ์์ง๋ก ๋๋ฅด๋ ์๋ฆฌ๋ผ ๊ทธ๊ฒ ๋ง๋ค.\n *\n * ๋ง์ฐ์ค๋ก ์ฐ๋ ํ๋ฉด์์๋ ๊ทธ ๋ฌธ๋ฒ์ด ๋ต๋ตํ๋ค. ์์ ์์ ๋ ํ๋์ ๋ ๊ฐ ๋ค์ด์๊ณ , ๋จ์ถ ๊ธ์๊ฐ\n * ๋ณธ๋ฌธ(14px)๋ณด๋ค ํฐ 16px ์ ์ค๋์ด 2 ๋ผ ๋ ๊ฐ ๋๊บผ์์ง๋ค. ๊ฐ์ง ๋จ์ถ์ ์นธ๋ง์ด ์ ์ ์ด ์ ํ์\n * ๋ค๋ฅธ ์ปจํธ๋กค(์์ฝ ยท ๋ฅ๊ทผ ์นด๋)๊ณผ๋ ์ด๊ธ๋๋ค.\n *\n * ํญ์ด ์๋๋ผ **์
๋ ฅ ์ฅ์น**๋ก ๊ฐ๋ฅธ๋ค โ ์ข์ ์ฐฝ์์ ๋ง์ฐ์ค๋ฅผ ์ฐ๋ ์ฌ๋์๊ฒ ์ก์
๋ฐ๋ฅผ ์ค ์ด์ ๊ฐ\n * ์๊ณ , ํฐ ํ๋ธ๋ฆฟ์์ ์๊ฐ๋ฝ์ผ๋ก ๋๋ฅด๋ ์ฌ๋์๊ฒ๋ ์ค์ผ ํ๋ค. ๋ฉ๋ด ๋ ์ผ์ด ๊ฐ์ ๊ท์น์ ์ด๋ค.\n */\n @media (pointer: fine) {\n & {\n /* ๋ ๋ฅผ ๊ฑท๋๋ค. ๋ฐ๋ฅ์ ํ์
์ ๋ฉด ๊ทธ๋๋ก์ด๊ณ , ์์ชฝ ์ค์ ํ ์ฌ์ด ๊ฒฝ๊ณ๋ฅผ ๋งก๋๋ค. */\n background-color: transparent;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n gap: var(--spacing-small, 4px);\n padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px);\n align-items: center;\n }\n\n button {\n padding: 0 var(--spacing-large, 12px);\n gap: var(--spacing-small, 4px);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n line-height: 1.4;\n /*\n * โโ ๋ชจ์๋ฆฌ๋ **๋ด๋ ๋ฉด**์ ๋ฐ๋ฅธ๋ค (๋์ฌ ๋ชจ์๋ฆฌ) โโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ํ์ด์ง ๋ด๋ ๋ฉด 0 โ ๊ฝ ์ฐฌ ํ๋ฉด, ์ง๊ฐ ๊ฒฉ์ โ ์ปจํธ๋กค 6px (์ ์ฅ)\n * ํ์
๋ด๋ ๋ฉด 16px โ ๋ ์๋ ๋ฅ๊ทผ ์นด๋ โ ์ปจํธ๋กค ์์ฝ\n *\n * ์ด ๋ฐ๋ฅ์ ํ์
์์๋ง ์ ๋ค(๋ง์ฐ์ค ํ๋ฉด). ๊ทธ๋์ ์์ฝ์ด๋ค. ํ์ด์ง์ ์ ์ฅ์ด 6px ์ธ ๊ฒ๊ณผ\n * ๊ฐ๋ฆฌ๋๋ฐ, ๊ทธ๊ฒ์ด ๋ถ์ผ์น๊ฐ ์๋๋ผ **๊ฐ์ ์์น์ ๋ ๋ฒ ์ ์ฉํ ๊ฒฐ๊ณผ**๋ค.\n *\n * โโ ํ๋ 5px ๋ก ๋ฐ๊ฟจ๋ค. ๋๋๋ ธ๋ค โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ\n * ํ
๋ง๊ฐ Material ๋จ์ถ์ ๋ชจ์์ ๋ชป ๋ฐ์ ๋ ๊ฒ์ ๋ณด๊ณ \n *\n * shell/client/themes/material-theme.css:19-22\n * --md-{text,filled,outlined,elevated}-button-container-shape: var(--md-sys-shape-corner-small)\n *\n * ใ์ ํ์ด ์ด๋ฏธ ์ ํ์ผ๋ ์์ฝ์ ์ดํใ์ด๋ผ๊ณ ํ๋จํ๋ค. ๊ทธ ๊ฐ์ **ํ์ด์ง ๋จ์ถ๋ฅผ ์ํ\n * ๊ฒ**์ด๊ณ ํ์
์์ด๋ผ๋ ์กฐ๊ฑด์ ๋ฐ๋ก ๋ณธ ์ ์ด ์๋ค. ์ด์ CommonPopupStyles ๊ฐ ํ์
์์์\n * ๊ทธ ํ ํฐ์ ๋ฎ์ผ๋ฏ๋ก, Material ๋จ์ถ๋ฅผ ์ฐ๋ ํ์
์ด ๊ณณ๋ ํจ๊ป ์์ฝ์ด๋ค.\n *\n * ๊ฐ์ ํ์
์ด ๋ฐ๊ฟ ์ ์๋ค โ --popup-control-radius ๋ฅผ ๋ด๋ฆฌ๋ฉด ์ด ๋ฐ๋ฅ์ด ๋ฐ๋ฅธ๋ค.\n * CommonPopupStyles ๊ฐ ๊ทธ ์ง์ ์ ์ธํ๋ค.\n *\n * [ํ์ธํจ] 2026-09-04 ยท corner-full 999px ยท ํ์ด์ง ์ ์ฅ 6px/32px ยท\n * ํ์
์นด๋ [overlayed] 16px\n */\n border-radius: var(--popup-control-radius, 999em);\n /* ์นธ๋ง์ด ์ ์ ๊ฑท๋๋ค โ ๋จ์ถ๊ฐ ์ ๋ง๋ค ์๊ธฐ ๋ชจ์์ ๊ฐ์ง๋ฏ๋ก ๋๋ ํ์๊ฐ ์๋ค. */\n border-left: none;\n cursor: pointer;\n transition: background-color 0.12s ease-out;\n }\n\n /* ๊ณ ๋์์ ๊ธ์ ๋จ์ถ๋ค. ๋๋ฆด ์ ์๋ค๋ ๊ฒ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆด ๋ ๋ฉด์ผ๋ก ๋งํ๋ค. */\n button:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n /*\n * ๊ฐ์ ์ง์ฐ๋ ๋์์ ์ผ์ชฝ ๋์ ๋ฐ๋ก ์ ๋ค. ํ ๋จ ํ๋ฆฌ๊ฒ ๋๋ค โ ์์ฃผ ์ฐ๋ ์ผ์ด ์๋๊ณ ,\n * ํ์ ๊ณผ ๊ฐ์ ๋ฌด๊ฒ๋ก ๋๋ฉด ์๋ชป ๋๋ฅธ๋ค.\n */\n button[clear] {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n button[clear]:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n button md-icon {\n --md-icon-size: 18px;\n }\n\n /*\n * โโ ํ ์ ์๋ ๋จ์ถ๋ **ํ ์ ์์ด ๋ณด์ธ๋ค** โโโโโโโโโโโโโโโโโโโโโโโโโโ\n *\n * ์๋ฌด ์ผ๋ ํ์ง ์๋ ๋จ์ถ๋ฅผ ๊ทธ๋๋ก ๋๋ฉด, ๋๋ฅธ ์ฌ๋์ด ์๊ธฐ๊ฐ ๋ฌด์์ ์๋ชปํ๋์ง ๋ชจ๋ฅธ๋ค.\n * ์ฐธ์กฐ ํ์
์์ ๊ณ ๋ฅธ ๊ฒ์ด ์์ ๋ ํ์ธ์ด ๊ทธ๋ฌ๋ค โ ๋๋ฆฌ๊ธฐ๋ ํ๊ณ ์๋ฌด ์ผ์ด ์์๋ค.\n *\n * ์ฑ์์ ๊ฑท๊ณ ์ํฌ๋ฅผ ํ๋ฆฐ๋ค. ๋ง์ฐ์ค ์ปค์๋ ๋ฐ๊พผ๋ค โ ์ฌ๋ ค ๋ณด๋ฉด ์ ์ ์์ด์ผ ํ๋ค.\n */\n button[disabled],\n button[disabled]:hover {\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n cursor: default;\n box-shadow: none;\n }\n\n /* ์ฃผ ๋์ ํ๋๋ง ์ฑ์ด๋ค. ๋์ ์ฑ์ฐ๋ฉด ์ด๋ ์ชฝ์ด ๊ทธ ์ผ์ธ์ง ํ๋ ค์ง๋ค. */\n button[ok]:hover,\n button[done]:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));\n }\n }\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n /*\n * The destructive fill. The scheme's error tokens are the default; a theme may hand in its\n * own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red\n * figures reads as a sticker rather than a button.\n */\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));\n\n --md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n background-color: var(--danger-button-background, var(--md-sys-color-error));\n border-color: var(--danger-button-background, var(--md-sys-color-error));\n\n &:hover {\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-hover-color, var(--md-sys-color-error));\n background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\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"]}
|
package/dist/src/line-styles.js
CHANGED
|
@@ -15,40 +15,53 @@ else {
|
|
|
15
15
|
setIconProperties();
|
|
16
16
|
}
|
|
17
17
|
export const LineStyles = css `
|
|
18
|
+
/*
|
|
19
|
+
* Line previews are drawn, not loaded: a 2px stroke in the current ink, dashed by CSS, so they
|
|
20
|
+
* follow the scheme (the PNG sprite they replace was black on white in both).
|
|
21
|
+
*/
|
|
18
22
|
.line-type {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
min-height: 20px;
|
|
26
|
+
padding: 0 6px;
|
|
27
|
+
color: var(--md-sys-color-on-surface);
|
|
22
28
|
}
|
|
23
|
-
|
|
24
|
-
|
|
29
|
+
|
|
30
|
+
.line-type::before {
|
|
31
|
+
content: '';
|
|
32
|
+
display: block;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 2px;
|
|
35
|
+
background: currentColor;
|
|
25
36
|
}
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
|
|
38
|
+
.line-type.round-dot::before {
|
|
39
|
+
height: 3px;
|
|
40
|
+
background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;
|
|
28
41
|
}
|
|
29
|
-
.line-type.square-dot {
|
|
30
|
-
background
|
|
42
|
+
.line-type.square-dot::before {
|
|
43
|
+
background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);
|
|
31
44
|
}
|
|
32
|
-
.line-type.dash {
|
|
33
|
-
background
|
|
45
|
+
.line-type.dash::before {
|
|
46
|
+
background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);
|
|
34
47
|
}
|
|
35
|
-
.line-type.dash-dot {
|
|
36
|
-
background
|
|
48
|
+
.line-type.dash-dot::before {
|
|
49
|
+
background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px, currentColor 11px 13px, transparent 13px 16px);
|
|
37
50
|
}
|
|
38
|
-
.line-type.long-dash {
|
|
39
|
-
background
|
|
51
|
+
.line-type.long-dash::before {
|
|
52
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 19px);
|
|
40
53
|
}
|
|
41
|
-
.line-type.long-dash-dot {
|
|
42
|
-
background
|
|
54
|
+
.line-type.long-dash-dot::before {
|
|
55
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px);
|
|
43
56
|
}
|
|
44
|
-
.line-type.long-dash-dot-dot {
|
|
45
|
-
background
|
|
57
|
+
.line-type.long-dash-dot-dot::before {
|
|
58
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px, currentColor 22px 24px, transparent 24px 27px);
|
|
46
59
|
}
|
|
47
60
|
|
|
48
61
|
.arrow-type {
|
|
49
62
|
background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
|
|
50
|
-
min-height:
|
|
51
|
-
padding:
|
|
63
|
+
min-height: 20px;
|
|
64
|
+
padding: 0 6px;
|
|
52
65
|
}
|
|
53
66
|
.arrow-type.begin-none {
|
|
54
67
|
background-position: 50% 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-styles.js","sourceRoot":"","sources":["../../src/line-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,yBAAyB,GAAG,IAAI,GAAG,CAAC,2CAA2C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,4CAA4C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE9G,SAAS,iBAAiB;IACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,yBAAyB,GAAG,CAAC,CAAA;IACvG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,OAAO,0BAA0B,GAAG,CAAC,CAAA;AAC3G,CAAC;AAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAA;AAClE,CAAC;KAAM,CAAC;IACN,iBAAiB,EAAE,CAAA;AACrB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"line-styles.js","sourceRoot":"","sources":["../../src/line-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,yBAAyB,GAAG,IAAI,GAAG,CAAC,2CAA2C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,4CAA4C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE9G,SAAS,iBAAiB;IACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,yBAAyB,GAAG,CAAC,CAAA;IACvG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,OAAO,0BAA0B,GAAG,CAAC,CAAA;AAC3G,CAAC;AAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAA;AAClE,CAAC;KAAM,CAAC;IACN,iBAAiB,EAAE,CAAA;AACrB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJ5B,CAAA","sourcesContent":["/**\n * @license Copyright ยฉ HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\n\nfunction setIconProperties() {\n document.body.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n document.body.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', setIconProperties)\n} else {\n setIconProperties()\n}\n\nexport const LineStyles = css`\n /*\n * Line previews are drawn, not loaded: a 2px stroke in the current ink, dashed by CSS, so they\n * follow the scheme (the PNG sprite they replace was black on white in both).\n */\n .line-type {\n display: flex;\n align-items: center;\n min-height: 20px;\n padding: 0 6px;\n color: var(--md-sys-color-on-surface);\n }\n\n .line-type::before {\n content: '';\n display: block;\n width: 100%;\n height: 2px;\n background: currentColor;\n }\n\n .line-type.round-dot::before {\n height: 3px;\n background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;\n }\n .line-type.square-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);\n }\n .line-type.dash::before {\n background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);\n }\n .line-type.dash-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px, currentColor 11px 13px, transparent 13px 16px);\n }\n .line-type.long-dash::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 19px);\n }\n .line-type.long-dash-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px);\n }\n .line-type.long-dash-dot-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px, currentColor 22px 24px, transparent 24px 27px);\n }\n\n .arrow-type {\n background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;\n min-height: 20px;\n padding: 0 6px;\n }\n .arrow-type.begin-none {\n background-position: 50% 16px;\n }\n .arrow-type.begin-arrow {\n background-position: 50% -39px;\n }\n .arrow-type.begin-open-arrow {\n background-position: 50% -89px;\n }\n .arrow-type.begin-sharp-arrow {\n background-position: 50% -139px;\n }\n .arrow-type.begin-diamond {\n background-position: 50% -190px;\n }\n .arrow-type.begin-oval {\n background-position: 50% -238px;\n }\n .arrow-type.begin-cross {\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cline x1='38' y1='25' x2='80' y2='25' stroke='%23888' stroke-width='2'/%3E%3Cline x1='24' y1='17' x2='36' y2='33' stroke='%23888' stroke-width='2'/%3E%3Cline x1='36' y1='17' x2='24' y2='33' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E\") 50% center no-repeat;\n background-size: auto 100%;\n }\n .arrow-type.begin-size1 {\n background-position: 50% -286px;\n }\n .arrow-type.begin-size2 {\n background-position: 50% -336px;\n }\n .arrow-type.begin-size3 {\n background-position: 50% -386px;\n }\n .arrow-type.begin-size4 {\n background-position: 50% -436px;\n }\n .arrow-type.begin-size5 {\n background-position: 50% -486px;\n }\n .arrow-type.begin-size6 {\n background-position: 50% -536px;\n }\n .arrow-type.begin-size7 {\n background-position: 50% -589px;\n }\n .arrow-type.begin-size8 {\n background-position: 50% -639px;\n }\n .arrow-type.begin-size9 {\n background-position: 50% -689px;\n }\n .arrow-type.end-none {\n background-position: 50% 16px;\n }\n .arrow-type.end-arrow {\n background-position: 50% -739px;\n }\n .arrow-type.end-open-arrow {\n background-position: 50% -789px;\n }\n .arrow-type.end-sharp-arrow {\n background-position: 50% -839px;\n }\n .arrow-type.end-diamond {\n background-position: 50% -890px;\n }\n .arrow-type.end-oval {\n background-position: 50% -938px;\n }\n .arrow-type.end-cross {\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cline x1='20' y1='25' x2='62' y2='25' stroke='%23888' stroke-width='2'/%3E%3Cline x1='64' y1='17' x2='76' y2='33' stroke='%23888' stroke-width='2'/%3E%3Cline x1='76' y1='17' x2='64' y2='33' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E\") 50% center no-repeat;\n background-size: auto 100%;\n }\n .arrow-type.end-size1 {\n background-position: 50% -986px;\n }\n .arrow-type.end-size2 {\n background-position: 50% -1036px;\n }\n .arrow-type.end-size3 {\n background-position: 50% -1086px;\n }\n .arrow-type.end-size4 {\n background-position: 50% -1136px;\n }\n .arrow-type.end-size5 {\n background-position: 50% -1186px;\n }\n .arrow-type.end-size6 {\n background-position: 50% -1236px;\n }\n .arrow-type.end-size7 {\n background-position: 50% -1289px;\n }\n .arrow-type.end-size8 {\n background-position: 50% -1339px;\n }\n .arrow-type.end-size9 {\n background-position: 50% -1389px;\n }\n`\n"]}
|