@s_and_a/arrow-ui-design-remix 0.1.10 → 0.1.12
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/dist/covers.generated.d.ts +10 -10
- package/dist/covers.generated.js +10 -10
- package/package.json +2 -2
- package/src/parts/ArAffix.css +6 -0
- package/src/parts/ArAlert.css +3 -0
- package/src/parts/ArAnchor.css +1 -1
- package/src/parts/ArAppHeader.css +8 -7
- package/src/parts/ArAuthPanel.css +5 -1
- package/src/parts/ArBadge.css +1 -1
- package/src/parts/ArButton.css +18 -2
- package/src/parts/ArCalendar.css +2 -1
- package/src/parts/ArCard.css +20 -9
- package/src/parts/ArChangedValue.css +7 -0
- package/src/parts/ArChip.css +1 -1
- package/src/parts/ArChoiceCard.css +1 -0
- package/src/parts/ArCollapse.css +3 -0
- package/src/parts/ArDescriptions.css +8 -0
- package/src/parts/ArDropdown.css +12 -2
- package/src/parts/ArField.css +8 -3
- package/src/parts/ArFlagGroup.css +3 -1
- package/src/parts/ArImage.css +4 -1
- package/src/parts/ArInfo.css +1 -1
- package/src/parts/ArItem.css +15 -0
- package/src/parts/ArKanaInput.css +4 -4
- package/src/parts/ArList.css +5 -1
- package/src/parts/ArMenu.css +3 -1
- package/src/parts/ArModal.css +6 -1
- package/src/parts/ArPageHeading.css +1 -1
- package/src/parts/ArProfileCard.css +7 -5
- package/src/parts/ArSaveBar.css +11 -0
- package/src/parts/ArSegmented.css +7 -0
- package/src/parts/ArShiftGrid.css +3 -3
- package/src/parts/ArShiftViewTable.css +4 -4
- package/src/parts/ArTable.css +21 -18
- package/src/parts/ArTableHeader.css +1 -1
- package/src/parts/ArTag.css +1 -1
- package/src/parts/ArUpload.css +2 -4
- package/src/parts/ArWizard.css +1 -1
- package/src/parts/ArZipInput.css +1 -1
- package/src/parts/_choice.css +7 -2
- package/src/parts/_picker.css +2 -0
- package/src/parts/_product.css +107 -1
- package/src/parts/_rule-editor.css +30 -0
- package/src/styles.css +1 -0
|
@@ -6,7 +6,7 @@ export declare const covers: {
|
|
|
6
6
|
readonly ArAppFooter: "1.0.0";
|
|
7
7
|
readonly ArAppHeader: "1.1.0";
|
|
8
8
|
readonly ArApprovalFlow: "1.2.0";
|
|
9
|
-
readonly ArAuthPanel: "1.
|
|
9
|
+
readonly ArAuthPanel: "1.1.0";
|
|
10
10
|
readonly ArAutoComplete: "1.0.0";
|
|
11
11
|
readonly ArAvatar: "1.1.1";
|
|
12
12
|
readonly ArAvatarGroup: "1.0.0";
|
|
@@ -15,7 +15,7 @@ export declare const covers: {
|
|
|
15
15
|
readonly ArBorderBeam: "1.0.0";
|
|
16
16
|
readonly ArBottomNav: "1.1.0";
|
|
17
17
|
readonly ArBreadcrumb: "1.0.0";
|
|
18
|
-
readonly ArButton: "1.
|
|
18
|
+
readonly ArButton: "1.1.0";
|
|
19
19
|
readonly ArCalendar: "1.3.0";
|
|
20
20
|
readonly ArCard: "1.1.0";
|
|
21
21
|
readonly ArCarousel: "1.0.0";
|
|
@@ -39,7 +39,7 @@ export declare const covers: {
|
|
|
39
39
|
readonly ArDivider: "1.0.0";
|
|
40
40
|
readonly ArDocumentBlock: "1.0.0";
|
|
41
41
|
readonly ArDrawer: "1.1.0";
|
|
42
|
-
readonly ArDropdown: "1.
|
|
42
|
+
readonly ArDropdown: "1.2.0";
|
|
43
43
|
readonly ArDurationInput: "1.1.0";
|
|
44
44
|
readonly ArEllipsis: "1.0.0";
|
|
45
45
|
readonly ArEmpty: "1.0.0";
|
|
@@ -58,11 +58,11 @@ export declare const covers: {
|
|
|
58
58
|
readonly ArKanaText: "1.0.0";
|
|
59
59
|
readonly ArLayout: "1.0.0";
|
|
60
60
|
readonly ArLink: "1.0.0";
|
|
61
|
-
readonly ArList: "1.
|
|
61
|
+
readonly ArList: "1.2.0";
|
|
62
62
|
readonly ArLogoSpin: "1.0.0";
|
|
63
63
|
readonly ArMapPreview: "1.0.0";
|
|
64
64
|
readonly ArMentions: "1.0.0";
|
|
65
|
-
readonly ArMenu: "1.
|
|
65
|
+
readonly ArMenu: "1.1.0";
|
|
66
66
|
readonly ArMenuTile: "1.0.0";
|
|
67
67
|
readonly ArMessage: "1.0.0";
|
|
68
68
|
readonly ArMessageHost: "1.0.0";
|
|
@@ -86,7 +86,7 @@ export declare const covers: {
|
|
|
86
86
|
readonly ArPointerBadge: "1.0.0";
|
|
87
87
|
readonly ArPopconfirm: "1.0.0";
|
|
88
88
|
readonly ArPopover: "1.0.0";
|
|
89
|
-
readonly ArProfileCard: "1.
|
|
89
|
+
readonly ArProfileCard: "1.1.0";
|
|
90
90
|
readonly ArProgress: "1.0.0";
|
|
91
91
|
readonly ArPunchButton: "1.0.0";
|
|
92
92
|
readonly ArPunchPanel: "1.1.0";
|
|
@@ -116,10 +116,10 @@ export declare const covers: {
|
|
|
116
116
|
readonly ArStepSelect: "1.0.0";
|
|
117
117
|
readonly ArSubItem: "1.0.0";
|
|
118
118
|
readonly ArSwitch: "1.1.0";
|
|
119
|
-
readonly ArTable: "1.
|
|
119
|
+
readonly ArTable: "1.7.0";
|
|
120
120
|
readonly ArTableHeader: "1.0.0";
|
|
121
121
|
readonly ArTabs: "1.1.0";
|
|
122
|
-
readonly ArTag: "1.
|
|
122
|
+
readonly ArTag: "1.1.0";
|
|
123
123
|
readonly ArText: "1.0.0";
|
|
124
124
|
readonly ArTextarea: "1.1.0";
|
|
125
125
|
readonly ArTextInput: "1.1.0";
|
|
@@ -142,9 +142,9 @@ export declare const covers: {
|
|
|
142
142
|
readonly ArViewOptions: "1.1.0";
|
|
143
143
|
readonly ArWatermark: "1.0.0";
|
|
144
144
|
readonly ArWeekdayPicker: "1.1.0";
|
|
145
|
-
readonly ArWizard: "1.
|
|
145
|
+
readonly ArWizard: "1.3.0";
|
|
146
146
|
readonly ArYearInput: "1.1.0";
|
|
147
147
|
readonly ArYearMonthInput: "1.1.0";
|
|
148
|
-
readonly ArZipInput: "1.
|
|
148
|
+
readonly ArZipInput: "1.3.0";
|
|
149
149
|
readonly ArZoomControl: "1.0.0";
|
|
150
150
|
};
|
package/dist/covers.generated.js
CHANGED
|
@@ -7,7 +7,7 @@ export const covers = {
|
|
|
7
7
|
ArAppFooter: "1.0.0",
|
|
8
8
|
ArAppHeader: "1.1.0",
|
|
9
9
|
ArApprovalFlow: "1.2.0",
|
|
10
|
-
ArAuthPanel: "1.
|
|
10
|
+
ArAuthPanel: "1.1.0",
|
|
11
11
|
ArAutoComplete: "1.0.0",
|
|
12
12
|
ArAvatar: "1.1.1",
|
|
13
13
|
ArAvatarGroup: "1.0.0",
|
|
@@ -16,7 +16,7 @@ export const covers = {
|
|
|
16
16
|
ArBorderBeam: "1.0.0",
|
|
17
17
|
ArBottomNav: "1.1.0",
|
|
18
18
|
ArBreadcrumb: "1.0.0",
|
|
19
|
-
ArButton: "1.
|
|
19
|
+
ArButton: "1.1.0",
|
|
20
20
|
ArCalendar: "1.3.0",
|
|
21
21
|
ArCard: "1.1.0",
|
|
22
22
|
ArCarousel: "1.0.0",
|
|
@@ -40,7 +40,7 @@ export const covers = {
|
|
|
40
40
|
ArDivider: "1.0.0",
|
|
41
41
|
ArDocumentBlock: "1.0.0",
|
|
42
42
|
ArDrawer: "1.1.0",
|
|
43
|
-
ArDropdown: "1.
|
|
43
|
+
ArDropdown: "1.2.0",
|
|
44
44
|
ArDurationInput: "1.1.0",
|
|
45
45
|
ArEllipsis: "1.0.0",
|
|
46
46
|
ArEmpty: "1.0.0",
|
|
@@ -59,11 +59,11 @@ export const covers = {
|
|
|
59
59
|
ArKanaText: "1.0.0",
|
|
60
60
|
ArLayout: "1.0.0",
|
|
61
61
|
ArLink: "1.0.0",
|
|
62
|
-
ArList: "1.
|
|
62
|
+
ArList: "1.2.0",
|
|
63
63
|
ArLogoSpin: "1.0.0",
|
|
64
64
|
ArMapPreview: "1.0.0",
|
|
65
65
|
ArMentions: "1.0.0",
|
|
66
|
-
ArMenu: "1.
|
|
66
|
+
ArMenu: "1.1.0",
|
|
67
67
|
ArMenuTile: "1.0.0",
|
|
68
68
|
ArMessage: "1.0.0",
|
|
69
69
|
ArMessageHost: "1.0.0",
|
|
@@ -87,7 +87,7 @@ export const covers = {
|
|
|
87
87
|
ArPointerBadge: "1.0.0",
|
|
88
88
|
ArPopconfirm: "1.0.0",
|
|
89
89
|
ArPopover: "1.0.0",
|
|
90
|
-
ArProfileCard: "1.
|
|
90
|
+
ArProfileCard: "1.1.0",
|
|
91
91
|
ArProgress: "1.0.0",
|
|
92
92
|
ArPunchButton: "1.0.0",
|
|
93
93
|
ArPunchPanel: "1.1.0",
|
|
@@ -117,10 +117,10 @@ export const covers = {
|
|
|
117
117
|
ArStepSelect: "1.0.0",
|
|
118
118
|
ArSubItem: "1.0.0",
|
|
119
119
|
ArSwitch: "1.1.0",
|
|
120
|
-
ArTable: "1.
|
|
120
|
+
ArTable: "1.7.0",
|
|
121
121
|
ArTableHeader: "1.0.0",
|
|
122
122
|
ArTabs: "1.1.0",
|
|
123
|
-
ArTag: "1.
|
|
123
|
+
ArTag: "1.1.0",
|
|
124
124
|
ArText: "1.0.0",
|
|
125
125
|
ArTextarea: "1.1.0",
|
|
126
126
|
ArTextInput: "1.1.0",
|
|
@@ -143,9 +143,9 @@ export const covers = {
|
|
|
143
143
|
ArViewOptions: "1.1.0",
|
|
144
144
|
ArWatermark: "1.0.0",
|
|
145
145
|
ArWeekdayPicker: "1.1.0",
|
|
146
|
-
ArWizard: "1.
|
|
146
|
+
ArWizard: "1.3.0",
|
|
147
147
|
ArYearInput: "1.1.0",
|
|
148
148
|
ArYearMonthInput: "1.1.0",
|
|
149
|
-
ArZipInput: "1.
|
|
149
|
+
ArZipInput: "1.3.0",
|
|
150
150
|
ArZoomControl: "1.0.0",
|
|
151
151
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@s_and_a/arrow-ui-design-remix",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "ARROW UI の design：remix",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"build": "tsc -p tsconfig.build.json"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@s_and_a/arrow-ui": "^0.1.
|
|
28
|
+
"@s_and_a/arrow-ui": "^0.1.12"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@s_and_a/arrow-ui-tokens": "0.1.2"
|
package/src/parts/ArAffix.css
CHANGED
|
@@ -4,3 +4,9 @@
|
|
|
4
4
|
[data-ar-design="remix"] [data-ar="affix"]:is([data-band="always"],[data-state~="affixed"]){background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="affix"][data-position="top"]:is([data-band="always"],[data-state~="affixed"]){border-bottom:1px solid var(--ar-color-border)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="affix"][data-position="bottom"]:is([data-band="always"],[data-state~="affixed"]){border-top:1px solid var(--ar-color-border)}
|
|
7
|
+
|
|
8
|
+
/* Product shells keep page actions above their fixed navigation and safe-area inset. */
|
|
9
|
+
[data-ar-design="remix"]:is(html) .menu_layout [data-ar="affix"][data-position="bottom"]{--ar-affix-bottom-inset:var(--arrow-floating-bottom,16px)}
|
|
10
|
+
|
|
11
|
+
/* Leave the desktop help dock outside the action hit targets, even at the page end. */
|
|
12
|
+
@media (min-width:960px){[data-ar-design="remix"]:is(html) .menu_layout [data-ar="affix"][data-position="bottom"]{padding-inline-end:76px}}
|
package/src/parts/ArAlert.css
CHANGED
|
@@ -17,3 +17,6 @@
|
|
|
17
17
|
[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="content"]>[data-part="title"]{color:var(--ar-color-text)}
|
|
18
18
|
[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"][data-titled]>[data-part="content"]>[data-part="body"]{font-size:var(--ar-font-size-caption);color:var(--ar-color-text-muted)}
|
|
19
19
|
[data-ar-design="remix"] [data-ar="alert"][data-banner]{border-radius:0}
|
|
20
|
+
|
|
21
|
+
/* Preserve intentional paragraphs in API and translated guidance. */
|
|
22
|
+
[data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="body"]{white-space:pre-line;overflow-wrap:anywhere}
|
package/src/parts/ArAnchor.css
CHANGED
|
@@ -7,6 +7,6 @@
|
|
|
7
7
|
[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"][data-state~="active"]{color:var(--ar-accent-ink);font-weight:700;border-left-color:var(--ar-accent)}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ar-accent-ring);border-radius:4px}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]{border-left:0;border-bottom:2px solid var(--ar-color-border)}
|
|
10
|
-
[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"]{margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
|
|
10
|
+
[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"]{flex:0 0 auto;margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-level="2"]{padding-left:12px}
|
|
12
12
|
[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-state~="active"]{border-bottom-color:var(--ar-accent)}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]{height:38px;gap:8px;padding:0 28px}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="logo"]{width:128px;padding-left:20px}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="logo"]>:is(img,svg){height:18px;width:auto}
|
|
8
|
-
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="pill"]{height:26px;gap:7px;padding:0 4px 0 10px;border:0;border-radius:13px;font-size:12.5px;font-weight:600;line-height:
|
|
8
|
+
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="pill"]{height:26px;gap:7px;padding:0 4px 0 10px;border:0;border-radius:13px;font-size:12.5px;font-weight:600;line-height:1.4}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="pill"][data-state="empty"]{padding-right:10px}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="pill"][data-tone="notice"]{background:#F1F4F7;color:#3B4A5A}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="top"]>[data-part="pill"][data-tone="todo"]{background:#FFF0EE;color:#B4322C}
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
[data-ar-design="remix"] [data-ar="app-account-menu"]{min-width:200px}
|
|
28
28
|
[data-ar-design="remix"] [data-ar="app-account-menu"]>[data-part="menu-item"]>[data-part="menu-arrow"][data-ar="icon"]{margin-left:auto;color:var(--ar-color-text-faint)}
|
|
29
29
|
/* 画面の足（.v-fo：左に文字のリンク、右に白いボタン。下に .v-cp の著作権：11px・左寄せ・下に26px） */
|
|
30
|
-
[data-ar-design="remix"] [data-ar="app-footer"]{padding:30px 32px 0;color:var(--ar-color-text);font-feature-settings:"palt" 1}
|
|
30
|
+
[data-ar-design="remix"] [data-ar="app-footer"]{padding:30px 32px 0;padding-inline-end:max(32px,var(--ar-app-footer-end-inset,0px));color:var(--ar-color-text);font-feature-settings:"palt" 1}
|
|
31
31
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]{align-items:center;gap:6px;padding-bottom:10px}
|
|
32
32
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>:is([data-part="links"],[data-part="supports"]){gap:6px}
|
|
33
|
-
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="links"]>[data-part="link"]{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ar-color-text-secondary);font-size:12.5px;font-weight:600;line-height:
|
|
33
|
+
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="links"]>[data-part="link"]{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ar-color-text-secondary);font-size:12.5px;font-weight:600;line-height:1.4}
|
|
34
34
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="links"]>[data-part="link"]:hover{background:#E4EAF0}
|
|
35
|
-
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="supports"]>[data-part="support"]{height:44px;gap:8px;padding:0 14px;border:0;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(31,41,51,.06);color:var(--ar-color-text-secondary);font-size:12.5px;font-weight:600;line-height:
|
|
35
|
+
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="supports"]>[data-part="support"]{height:44px;gap:8px;padding:0 14px;border:0;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(31,41,51,.06);color:var(--ar-color-text-secondary);font-size:12.5px;font-weight:600;line-height:1.4}
|
|
36
36
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="supports"]>[data-part="support"]:hover{box-shadow:0 1px 2px rgba(31,41,51,.06),0 0 0 1px var(--ar-accent-line)}
|
|
37
37
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>[data-part="supports"]>[data-part="support"]>[data-part="support-icon"]{width:15px;height:15px;color:var(--ar-accent-ink)}
|
|
38
38
|
[data-ar-design="remix"] [data-ar="app-footer"]>[data-part="row"]>:is([data-part="links"],[data-part="supports"])>:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ar-accent-ring)}
|
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
[data-ar-design="remix"] [data-ar="bottom-nav"]>[data-part="item"][data-state~="on"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
|
|
55
55
|
[data-ar-design="remix"] [data-ar="bottom-nav"]>[data-part="item"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ar-accent-ring)}
|
|
56
56
|
/* ピルの一覧・領域のタブ・畳む・子のメニュー（remix）：白い面と淡い線、テーマ色の文字 */
|
|
57
|
-
[data-ar-design="remix"] [data-ar="app-pill-list"]
|
|
57
|
+
[data-ar-design="remix"] [data-ar="app-pill-list"]{min-width:min(260px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
|
|
58
|
+
[data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]{min-width:0;margin-top:6px;padding:6px;border:1px solid var(--ar-color-border);border-radius:12px;background:#fff;box-shadow:var(--ar-shadow-pop)}
|
|
58
59
|
[data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]{max-height:min(360px,calc(100vh - 140px))}
|
|
59
60
|
[data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]>[data-part="pill-row"]{gap:2px;border-radius:8px}
|
|
60
61
|
[data-ar-design="remix"] [data-ar="app-pill-list"]>[data-part="pill-list"]>[data-part="pill-rows"]>[data-part="pill-row"]:hover{background:var(--ar-accent-faint)}
|
|
@@ -79,8 +80,8 @@
|
|
|
79
80
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="domains"]>[data-part="domain-list"]>[data-part="domain"][data-state="on"]{border-bottom-color:var(--ar-accent);color:var(--ar-accent-ink)}
|
|
80
81
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="domains"]>[data-part="domain-list"]>[data-part="domain"] [data-ar="icon"]{width:16px;height:16px}
|
|
81
82
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="domains"]>[data-part="toggle"]{gap:4px;height:28px;padding:0 10px;border:1px solid var(--ar-color-border);border-radius:8px;background:#fff;color:var(--ar-color-text-secondary);font-size:12px}
|
|
82
|
-
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="nav"]>[data-part="submenu"]{gap:2px;margin-top:4px;padding:4px;border:1px solid var(--ar-color-border);border-radius:12px;background:#fff;box-shadow:var(--ar-shadow-pop)}
|
|
83
|
-
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="nav"]>[data-part="submenu"]>[data-part="submenu-item"]{padding:8px
|
|
83
|
+
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="nav"]>[data-part="submenu"]{min-width:max-content;max-width:calc(100vw - 24px);gap:2px;margin-top:4px;padding:4px;border:1px solid var(--ar-color-border);border-radius:12px;background:#fff;box-shadow:var(--ar-shadow-pop)}
|
|
84
|
+
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="nav"]>[data-part="submenu"]>[data-part="submenu-item"]{padding:8px 12px;border:0;border-radius:8px;background:none;color:var(--ar-color-text);font-size:13px}
|
|
84
85
|
[data-ar-design="remix"] [data-ar="app-header"]>[data-part="nav"]>[data-part="submenu"]>[data-part="submenu-item"]:hover{background:var(--ar-accent-faint);color:var(--ar-accent-ink)}
|
|
85
86
|
/* 1.1 下のメニューの子の段（メニューの真上に浮かぶ白い段・角丸14・影、タイルは項目と同じ形）と、メニューの一覧（下から出る板の中の4列のタイル） */
|
|
86
87
|
[data-ar-design="remix"] [data-ar="bottom-nav"]>[data-part="submenu"]{left:8px;right:auto;max-width:calc(100% - 16px);bottom:calc(100% + 6px);gap:2px;padding:6px 4px;border:1px solid var(--ar-color-border);border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(31,41,51,.14)}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
/* @covers ArAuthPanel 1.
|
|
1
|
+
/* @covers ArAuthPanel 1.1.0 */
|
|
2
2
|
[data-ar-design="remix"] [data-ar="auth-panel"]>[data-part="card"]{background:var(--ar-color-surface,#fff);border:1px solid var(--ar-color-border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #182c4110}
|
|
3
3
|
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="heading"]{background:linear-gradient(120deg,var(--ar-accent),var(--ar-accent-strong));color:var(--ar-on-accent,#fff);font-size:17px;font-weight:700}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company"]{border-bottom:1px solid var(--ar-color-border)}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="initial"]{border-radius:8px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-weight:700}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company-name"]{font-weight:700;font-size:14px}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="company-code"]{font-size:12px;color:var(--ar-color-text-muted)}
|
|
8
|
+
/* The authentication band follows the same shape and contrast as page headings. */
|
|
9
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="heading"]{background:radial-gradient(circle at 0 100%,#ffffff12 0 90px,transparent 91px),radial-gradient(circle at 100% 0,#ffffff18 0 115px,transparent 116px),linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent),var(--ar-accent-strong));letter-spacing:.06em}
|
|
10
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] [data-part="initial"]{width:38px;height:38px}
|
|
11
|
+
[data-ar-design="remix"] [data-ar="auth-panel"]>[data-part="footer"]{font-size:11px}
|
package/src/parts/ArBadge.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
件数の丸はライブラリでこれ1つ。赤はデザインシステムの count（#DC2525。--ar-remix-count）。白い縁は data-ring（子に重ねるとき既定）。
|
|
4
4
|
variant="subtle"：淡い地に濃い字（タブ・表示内容・切り替えの中の件数）。 */
|
|
5
5
|
[data-ar-design="remix"] [data-ar="badge"]{font-family:var(--ar-font-family)}
|
|
6
|
-
[data-ar-design="remix"] [data-ar="badge"]>[data-part="count"]{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ar-remix-count);color:#fff;font-size:11px;font-weight:700;line-height:
|
|
6
|
+
[data-ar-design="remix"] [data-ar="badge"]>[data-part="count"]{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ar-remix-count);color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:middle;font-variant-numeric:tabular-nums;box-shadow:none}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="badge"][data-mode="count"]:not([data-standalone])>[data-part="count"]{top:-7px;right:-9px}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="badge"]>[data-part="dot"]{width:8px;height:8px;border-radius:50%;background:var(--ar-remix-count);box-shadow:none}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="badge"][data-ring]>:is([data-part="count"],[data-part="dot"]){box-shadow:0 0 0 2px var(--ar-color-surface)}
|
package/src/parts/ArButton.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/* @covers ArButton 1.
|
|
1
|
+
/* @covers ArButton 1.1.0 */
|
|
2
2
|
/* ArButton：ARROW 共通の .btn（角丸10・13px太字）。大きさの段は入力と同じ sm 30・md 36・lg 42（size.control-*）。デザインシステムの .btn は 34 だが、入力・時刻と横に並べてそろえるため 36 にした。 */
|
|
3
|
-
[data-ar-design="remix"] [data-ar="button"]{height:var(--ar-size-control-md);padding:0 14px;gap:6px;border:0;border-radius:10px;font-size:13px;font-weight:700;line-height:
|
|
3
|
+
[data-ar-design="remix"] [data-ar="button"]{height:var(--ar-size-control-md);padding:0 14px;gap:6px;border:0;border-radius:10px;font-size:13px;font-weight:700;line-height:1;text-decoration:none;background:#fff;color:var(--ar-color-text-secondary);box-shadow:inset 0 0 0 1px var(--ar-color-border);transition:background var(--ar-motion-fast),box-shadow var(--ar-motion-fast),color var(--ar-motion-fast)}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="button"]:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ar-accent-ring)}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="button"][data-tone="primary"]{background:var(--ar-accent);color:var(--ar-on-accent);text-shadow:var(--ar-on-accent-shadow);box-shadow:0 4px 10px -4px var(--ar-accent-ring)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="button"][data-tone="primary"]:hover:not(:disabled),[data-ar-design="remix"] [data-ar="button"][data-tone="primary"]:active:not(:disabled){background:var(--ar-accent-strong)}
|
|
@@ -47,3 +47,19 @@
|
|
|
47
47
|
[data-ar-design="remix"] [data-ar="button"][data-size="xl"]{height:var(--ar-size-control-lg);padding:0 18px;font-size:14px;border-radius:11px}
|
|
48
48
|
[data-ar-design="remix"] [data-ar="button"][data-icon-only][data-size="xl"],[data-ar-design="remix"] [data-ar="button"][data-shape="circle"][data-size="xl"]{width:var(--ar-size-control-lg)}
|
|
49
49
|
[data-ar-design="remix"] [data-ar="button"][data-state~="blink"]>:is([data-part="label"],[data-ar="icon"]){animation:ar-btn-blink 1s ease-in infinite alternate}@keyframes ar-btn-blink{0%{opacity:.35}100%{opacity:1}}@media (prefers-reduced-motion:reduce){[data-ar-design="remix"] [data-ar="button"][data-state~="blink"]>:is([data-part="label"],[data-ar="icon"]){animation:none}}
|
|
50
|
+
|
|
51
|
+
/* 操作の意味はページのアクセントに左右されない。disabled の表現は既存契約を維持。 */
|
|
52
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent="add"]{--ar-action:#3578B9;--ar-action-strong:#28639C;--ar-action-ink:#28639C;--ar-action-subtle:#EDF5FC;--ar-action-line:#ADCBE7;--ar-action-ring:rgba(53,120,185,.24)}
|
|
53
|
+
[data-ar-design="remix"] [data-ar="button"]:is([data-intent="edit"],[data-tone="edit"]){--ar-action:#278359;--ar-action-strong:#206C49;--ar-action-ink:#206C49;--ar-action-subtle:#E9F6EE;--ar-action-line:#A8D5BB;--ar-action-ring:rgba(39,131,89,.24)}
|
|
54
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent="delete"]{--ar-action:var(--ar-color-danger);--ar-action-strong:var(--ar-color-danger-ink);--ar-action-ink:var(--ar-color-danger-ink);--ar-action-subtle:var(--ar-color-danger-subtle);--ar-action-line:#EBC2BF;--ar-action-ring:rgba(192,50,43,.22)}
|
|
55
|
+
[data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):not(:disabled,[aria-disabled="true"]){background:var(--ar-action-subtle);color:var(--ar-action-ink);text-shadow:none;box-shadow:none}
|
|
56
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="primary"]:not(:disabled,[aria-disabled="true"]){background:var(--ar-action);color:#fff}
|
|
57
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="dashed"]:not(:disabled,[aria-disabled="true"]){background:#fff;border-color:var(--ar-action-line)}
|
|
58
|
+
[data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):hover:not(:disabled,[aria-disabled="true"]){background:var(--ar-action-subtle);box-shadow:inset 0 0 0 1px var(--ar-action-line)}
|
|
59
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent][data-tone="primary"]:hover:not(:disabled,[aria-disabled="true"]){background:var(--ar-action-strong)}
|
|
60
|
+
[data-ar-design="remix"] [data-ar="button"]:is([data-intent],[data-tone="edit"]):focus-visible:not(:disabled,[aria-disabled="true"]){outline:0;box-shadow:0 0 0 3px var(--ar-action-ring)}
|
|
61
|
+
|
|
62
|
+
[data-ar-design="remix"] [data-ar="button"][data-intent="delete"][data-tone="danger"]:not(:disabled,[aria-disabled="true"]){background:var(--ar-color-danger);color:#fff}
|
|
63
|
+
|
|
64
|
+
/* Label and icon share the control centre, independent of inherited prose leading. */
|
|
65
|
+
[data-ar-design="remix"] [data-ar="button"]>[data-part="label"]{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.4}
|
package/src/parts/ArCalendar.css
CHANGED
|
@@ -96,9 +96,10 @@
|
|
|
96
96
|
[data-ar-design="remix"] [data-ar="calendar"][data-size="mini"]>[data-part="footer"]{display:flex;flex-wrap:wrap;gap:14px;color:var(--ar-color-text-secondary);font-size:12px;line-height:1.5}
|
|
97
97
|
|
|
98
98
|
[data-ar-design="remix"] [data-ar="calendar"] [data-part="times"]{gap:4px;padding-top:2px}
|
|
99
|
-
[data-ar-design="remix"] [data-ar="calendar"] [data-part="time-range"]{font:600 10.5px/1.3 var(--ar-font-family-numeric);font-variant-numeric:tabular-nums;color:var(--ar-
|
|
99
|
+
[data-ar-design="remix"] [data-ar="calendar"] [data-part="time-range"]{font:600 10.5px/1.3 var(--ar-font-family-numeric);font-variant-numeric:tabular-nums;color:var(--ar-color-text)}
|
|
100
100
|
[data-ar-design="remix"] [data-ar="calendar"] [data-part="time-end"]{color:var(--ar-color-text-secondary)}
|
|
101
101
|
|
|
102
102
|
/* State badges are deliberately compact in a seven-column phone calendar. Long translations wrap. */
|
|
103
103
|
[data-ar-design="remix"] [data-ar="calendar"][data-variant="board"] [data-part="foot"]>[data-ar="tag"]{max-width:100%;height:auto;min-height:16px;padding:1px 2px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:14px}
|
|
104
|
+
[data-ar-design="remix"] [data-ar="calendar"][data-variant="board"][data-density="compact"]:not([data-size="mini"])>[data-part="grid"]>[data-part="row"]>[data-part="cell"]{min-height:72px;gap:2px;padding-block:4px}
|
|
104
105
|
@media(max-width:959px){[data-ar-design="remix"] [data-ar="calendar"][data-variant="board"]>[data-part="grid"]>[data-part="row"]>[data-part="cell"]{padding-inline:2px}}
|
package/src/parts/ArCard.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Sticky navigation in the body must follow the page scroll. */
|
|
7
7
|
/* band：白・角丸18・影。帯は54px・18px太字・字間0.08em、テーマ色の120度のやわらかいグラデーションに淡い白の丸 */
|
|
8
8
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]{border-radius:18px;box-shadow:var(--ar-shadow-card);overflow:clip}
|
|
9
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{position:relative;overflow:
|
|
9
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{position:relative;overflow:clip;flex:none;flex-wrap:nowrap;height:54px;padding:0 18px;justify-content:flex-start;background:linear-gradient(120deg,var(--ar-accent-hi) 0%,var(--ar-accent) 45%,var(--ar-accent-strong) 100%);color:var(--ar-on-accent);text-shadow:var(--ar-on-accent-shadow)}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::before,[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::before{right:-30px;top:-46px;width:150px;height:150px;background:rgba(255,255,255,.10)}
|
|
12
12
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]::after{left:-40px;bottom:-70px;width:140px;height:140px;background:rgba(255,255,255,.07)}
|
|
@@ -34,8 +34,9 @@
|
|
|
34
34
|
[data-ar-design="remix"] [data-ar="card"]:is([data-variant="elevated"],[data-variant="outlined"])[data-size="sm"]>[data-part="body"]{--ar-card-pad-x:14px;padding:12px 14px}
|
|
35
35
|
[data-ar-design="remix"] [data-ar="card"]>[data-part="cover"]{min-height:90px;background:linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent) 45%,var(--ar-accent-strong))}
|
|
36
36
|
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]{display:flex;border-top:1px solid var(--ar-color-border-subtle);color:var(--ar-color-text-muted)}
|
|
37
|
-
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>*{flex:1;
|
|
38
|
-
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]
|
|
37
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>*{flex:1;min-width:0}
|
|
38
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is(button,a,[role="button"],[data-ar="button"]){min-height:40px;border-radius:0}
|
|
39
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is(button,a,[role="button"],[data-ar="button"])+:is(button,a,[role="button"],[data-ar="button"]){border-left:1px solid var(--ar-color-border-subtle)}
|
|
39
40
|
|
|
40
41
|
/* plain：中のさらに小さな線の箱（角丸12・線・10/12の余白） */
|
|
41
42
|
[data-ar-design="remix"] [data-ar="card"][data-variant="plain"]{border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border);padding:10px 12px}
|
|
@@ -51,19 +52,29 @@
|
|
|
51
52
|
actions in the same flow instead of letting absolute actions cover the title. */
|
|
52
53
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]{height:auto;min-height:54px;padding-block:8px}
|
|
53
54
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="sm"]>[data-part="head"]{height:auto;min-height:46px}
|
|
54
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="title"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:
|
|
55
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
|
|
55
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="title"]{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
|
|
56
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
|
|
56
57
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{position:relative;right:auto;top:auto;transform:none;flex-wrap:wrap}
|
|
57
58
|
/* Text actions sit on the coloured band, so use its foreground rather than
|
|
58
59
|
the normal surface link colour. Nested action clusters follow the same rule. */
|
|
59
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):not(
|
|
60
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):hover:not(
|
|
60
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):not([data-intent],:disabled,[aria-disabled="true"]){color:var(--ar-on-accent)}
|
|
61
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"] [data-ar="button"]:is([data-tone="ghost"],[data-tone="muted"],[data-tone="link"]):hover:not([data-intent],:disabled,[aria-disabled="true"]){background:rgba(255,255,255,.16)}
|
|
61
62
|
/* Form action groups need natural height when buttons wrap. Direct footer
|
|
62
63
|
buttons retain the segmented card footer used by compact summaries. */
|
|
63
|
-
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:
|
|
64
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]:has(>:not(button,a,[role="button"],[data-ar="button"])){padding:12px 18px}
|
|
64
65
|
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>:is([data-ar="cluster"],[data-ar="stack"],[data-ar="grid"]){height:auto;min-width:0}
|
|
65
66
|
@media(max-width:640px){
|
|
66
67
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]{min-height:50px;padding-inline:12px}
|
|
67
68
|
[data-ar-design="remix"] [data-ar="card"][data-variant="band"][data-size="md"]>[data-part="head"]>[data-part="title"]{font-size:17px}
|
|
68
|
-
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]){display:flex;flex-wrap:wrap;gap:8px}
|
|
69
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty)){display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
|
|
70
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]:has(>[data-part="actions"]:not(:empty))>[data-part="title"]{flex:1 1 auto;text-align:left}
|
|
71
|
+
[data-ar-design="remix"] [data-ar="card"][data-variant="band"]>[data-part="head"]>[data-part="actions"]{margin-inline-start:auto;justify-content:flex-end}
|
|
69
72
|
}
|
|
73
|
+
|
|
74
|
+
/* A conditional actions slot can remain mounted while its content is empty. */
|
|
75
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="head"]>[data-part="actions"]:empty{display:none}
|
|
76
|
+
|
|
77
|
+
/* Direct footer actions wrap as complete controls in narrow cards. */
|
|
78
|
+
/* Equal-height cards keep their actions aligned even when descriptions wrap. */
|
|
79
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]{flex-wrap:wrap;margin-top:auto}
|
|
80
|
+
[data-ar-design="remix"] [data-ar="card"]>[data-part="footer"]>[data-ar="button"]{flex:1 1 140px;height:auto;min-height:44px;white-space:normal;line-height:1.5}
|
|
@@ -28,3 +28,10 @@
|
|
|
28
28
|
[data-ar-design="remix"] [data-ar="changed-value"][data-layout="list"] [data-part="arrow"]{margin:0}
|
|
29
29
|
/* 1.2 text（今の表記そのままの1つの文）：変わったときは変更後と同じ橙の太字 */
|
|
30
30
|
[data-ar-design="remix"] [data-ar="changed-value"][data-layout="text"][data-state~="changed"]{color:var(--ar-color-warn);font-weight:700}
|
|
31
|
+
|
|
32
|
+
/* Context rows in history are not changes: no strike-through or accent emphasis. */
|
|
33
|
+
[data-ar-design="remix"] [data-ar="changed-value"] [data-part="row"]:not([data-state~="changed"]) :is([data-part="before"],[data-part="after"]){text-decoration:none;color:var(--ar-color-text);font-weight:400}
|
|
34
|
+
|
|
35
|
+
[data-ar-design="remix"] [data-ar="changed-value"][data-rich]>[data-part="before"]{text-decoration:none;padding:8px;border-radius:8px;background:var(--ar-color-bg);color:var(--ar-color-text-secondary)}
|
|
36
|
+
[data-ar-design="remix"] [data-ar="changed-value"][data-rich][data-state~="changed"]>[data-part="after"]{padding:8px;border-radius:8px;font-weight:400}
|
|
37
|
+
[data-ar-design="remix"] [data-ar="changed-value"][data-rich]>:is([data-part="before-label"],[data-part="after-label"]){font-size:12px;font-weight:700;color:var(--ar-color-text-secondary)}
|
package/src/parts/ArChip.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* @covers ArChip 1.0.0 */
|
|
2
2
|
/* .v-chip（11px の太字・角丸6・高さ20）。s1 の見た目ではテーマ色の淡い面 */
|
|
3
|
-
[data-ar-design="remix"] [data-ar="chip"]{padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;line-height:
|
|
3
|
+
[data-ar-design="remix"] [data-ar="chip"]{padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;height:20px;display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle;background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="chip"][data-tone="event"]{background:#EDE7F7;color:#6A4BA3}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="chip"][data-tone="neutral"]{background:#EEF1F5;color:var(--ar-color-text-secondary)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="chip"]{font-feature-settings:"palt" 1}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
大きさ（1.1）：md がキャンバスの値。sm は一回り小さく（設定・一覧の中）、lg は一回り大きく（スマホ・大きな選択）。 */
|
|
8
8
|
[data-ar-design="remix"] [data-ar="choice-card"]{color:var(--ar-color-text);font-family:var(--ar-font-family);background:#FFFFFF;transition:background-color var(--ar-motion-fast),box-shadow var(--ar-motion-fast),border-color var(--ar-motion-fast),color var(--ar-motion-fast)}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="choice-card"]:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px}
|
|
10
|
+
[data-ar-design="remix"] [data-ar="choice-card"]>[data-part="chevron"]{color:var(--ar-color-text-secondary)}
|
|
10
11
|
[data-ar-design="remix"] [data-ar="choice-card"]>[data-part="body"]>[data-part="title"]{gap:8px}
|
|
11
12
|
[data-ar-design="remix"] [data-ar="choice-card"] [data-part="tag"]{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:12px;font-weight:700;letter-spacing:0;white-space:nowrap}
|
|
12
13
|
[data-ar-design="remix"] [data-ar="choice-card"] [data-part="tag"][data-tone="ok"]{background:#E6F3EC;color:#1E7A4C}
|
package/src/parts/ArCollapse.css
CHANGED
|
@@ -17,3 +17,6 @@
|
|
|
17
17
|
[data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="header"]>[data-part="header-extra"]{gap:8px;padding:0 14px 0 4px;background:var(--ar-color-surface-alt);font-size:12px;font-weight:500}
|
|
18
18
|
[data-ar-design="remix"] [data-ar="collapse"][data-ghost]>[data-part="panel"]>[data-part="header"]>[data-part="header-extra"]{background:none}
|
|
19
19
|
[data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="header"]>[data-part="trigger"]>[data-part="title"]{gap:6px}
|
|
20
|
+
@media (max-width: 767px){
|
|
21
|
+
[data-ar-design="remix"] [data-ar="collapse"]>[data-part="panel"]>[data-part="body"]{padding-inline:14px}
|
|
22
|
+
}
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
[data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]{margin-bottom:10px}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="descriptions"]>[data-part="header"]>[data-part="title"]{font-size:14.5px;font-weight:700}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]{border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border);overflow:hidden;background:var(--ar-color-surface)}
|
|
7
|
+
/* Long single-column details reserve space for the value instead of stretching labels to 40%. */
|
|
8
|
+
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]{grid-template-columns:repeat(var(--ar-desc-visible-columns,var(--ar-desc-columns,3)),minmax(0,min(14rem,calc(40% / var(--ar-desc-visible-columns,var(--ar-desc-columns,3))))) minmax(0,1fr))}
|
|
7
9
|
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>:is([data-part="label"],[data-part="value"]){padding:10px 12px;border-bottom:1px solid var(--ar-color-border);border-right:1px solid var(--ar-color-border)}
|
|
8
10
|
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{background:var(--ar-accent-faint);color:var(--ar-color-text-secondary);font-weight:700;white-space:normal}
|
|
9
11
|
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{color:var(--ar-color-text)}
|
|
@@ -18,3 +20,9 @@
|
|
|
18
20
|
[data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="danger"]>[data-part="value"]{color:var(--ar-color-danger-ink)}
|
|
19
21
|
[data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="warn"]>[data-part="value"]{color:var(--ar-color-warn)}
|
|
20
22
|
[data-ar-design="remix"] [data-ar="descriptions"]>[data-part="list"]>[data-part="item"][data-tone="ok"]>[data-part="value"]{color:var(--ar-color-ok)}
|
|
23
|
+
/* Narrow detail panels keep the entire value readable, including long explanations. */
|
|
24
|
+
@container ar-descriptions (max-width:480px){
|
|
25
|
+
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]{grid-template-columns:minmax(0,1fr)}
|
|
26
|
+
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]>[data-part="item"]>[data-part="label"]{padding:8px 12px 4px;border-bottom:0;font-size:12px}
|
|
27
|
+
[data-ar-design="remix"] [data-ar="descriptions"][data-variant="bordered"][data-layout="inline"]>[data-part="list"]>[data-part="item"]>[data-part="value"]{grid-column:auto;padding:8px 12px 12px}
|
|
28
|
+
}
|
package/src/parts/ArDropdown.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/* @covers ArDropdown 1.
|
|
1
|
+
/* @covers ArDropdown 1.2.0 */
|
|
2
2
|
/* ArDropdown：シフトの「操作」メニューと同じ形（.pop .mi）。説明つきの項目は .v-pop .r-mi（アイコンの箱・2行）。 */
|
|
3
|
-
[data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]{gap:7px;height:
|
|
3
|
+
[data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]{gap:7px;height:var(--ar-size-control-md);padding:0 10px 0 14px;border:0;border-radius:11px;background:var(--ar-accent);color:var(--ar-on-accent);font-size:13.5px;font-weight:700;line-height:normal;text-shadow:var(--ar-on-accent-shadow);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ar-accent) 80%,transparent);transition:background var(--ar-motion-fast)}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:hover:not(:disabled),[data-ar-design="remix"] [data-ar="dropdown"][data-state~="open"]>[data-part="trigger"]{background:var(--ar-accent-strong)}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:focus-visible{outline:0;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ar-accent) 80%,transparent),0 0 0 3px var(--ar-accent-ring)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="dropdown"]>[data-part="trigger"]:disabled{background:#EEF1F5;color:var(--ar-color-text-faint);box-shadow:none;text-shadow:none}
|
|
@@ -34,3 +34,13 @@
|
|
|
34
34
|
[data-ar-design="remix"] :is([data-ar="shift-grid-menu"]>[data-part="menu"],[data-ar="app-account-menu"])>[data-part="menu-item"]>[data-ar="icon"]{color:var(--ar-color-text-secondary)}
|
|
35
35
|
[data-ar-design="remix"] [data-ar="shift-grid-menu"]>[data-part="menu"]>[data-part="menu-item"][data-item="delete"]{color:var(--ar-color-danger-ink)}
|
|
36
36
|
[data-ar-design="remix"] [data-ar="shift-grid-menu"]>[data-part="menu"]>[data-part="menu-item"][data-item="delete"]>[data-ar="icon"]{color:inherit}
|
|
37
|
+
|
|
38
|
+
/* Operations keep their purpose visible even when unavailable. */
|
|
39
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][data-tone="edit"]:not([aria-disabled="true"])>[data-part="icon-box"]{background:#E9F6EE;color:#206C49}
|
|
40
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][data-tone="edit"]>[data-part="text"]>[data-part="label"]{color:#206C49}
|
|
41
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"]>[data-part="text"]>[data-part="disabled-reason"]{margin-top:3px;font-size:11px;line-height:1.5;white-space:pre-line;color:var(--ar-color-text-secondary)}
|
|
42
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"][aria-disabled="true"]>[data-part="text"]>[data-part="label"]{color:var(--ar-color-text-muted)}
|
|
43
|
+
@media(max-width:599px){
|
|
44
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"][data-rich]>[data-part="item"]{padding:9px 10px;min-height:48px}
|
|
45
|
+
[data-ar-design="remix"] [data-ar="dropdown-menu"]>[data-part="list"]>[data-part="item"]>[data-part="text"]>:is([data-part="description"],[data-part="disabled-reason"]){font-size:12px;line-height:1.5}
|
|
46
|
+
}
|
package/src/parts/ArField.css
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
必須は .req（11px 700・赤い淡い地・角丸4）、間違いは .derr（12.5px 600・上に6px）、説明は .ad-help（12px・上に4px）。 */
|
|
4
4
|
[data-ar-design="remix"] [data-ar="field"]>[data-part="label"]{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;line-height:18.75px;color:var(--ar-color-text-secondary)}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="field"][data-layout="stacked"]>[data-part="label"]{margin-bottom:6px}
|
|
6
|
-
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{column-gap:14px;align-items:
|
|
7
|
-
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;min-width:0;overflow-wrap:anywhere;gap:4px;font-size:13.5px;font-weight:600;line-height:20.25px;text-align:right}
|
|
6
|
+
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]{column-gap:14px;align-items:start}
|
|
7
|
+
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-end;min-width:0;overflow-wrap:anywhere;gap:4px;font-size:13.5px;font-weight:600;line-height:20.25px;text-align:right;padding-top:8px}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>[data-part="required"]{display:block;flex:none;padding:0 5px;border-radius:4px;background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink);font-size:11px;font-weight:700;line-height:18px}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="field"]>[data-part="control"]>[data-part="help"]{margin-top:4px;font-size:12px;line-height:18px;color:var(--ar-color-text-muted);white-space:pre-line;overflow-wrap:anywhere}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="field"]>[data-part="control"]>[data-part="error"]{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:12.5px;font-weight:600;line-height:18.75px;color:var(--ar-color-danger-ink)}
|
|
@@ -18,5 +18,10 @@
|
|
|
18
18
|
@container ar-field (max-width:480px){
|
|
19
19
|
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"],
|
|
20
20
|
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="control"]{grid-column:1/-1;min-width:0}
|
|
21
|
-
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-start;text-align:left;white-space:normal;overflow:visible;height:auto;margin-bottom:6px;overflow-wrap:anywhere}
|
|
21
|
+
[data-ar-design="remix"] [data-ar="field"][data-layout="inline"]>[data-part="label"]{justify-content:flex-start;text-align:left;white-space:normal;overflow:visible;height:auto;margin-bottom:6px;overflow-wrap:anywhere;padding-top:0}
|
|
22
22
|
}
|
|
23
|
+
|
|
24
|
+
/* Context help belongs beside the field label, independent of control width. */
|
|
25
|
+
[data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>label{display:inline-flex;align-items:center;gap:4px;min-width:0}
|
|
26
|
+
[data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>label>[data-part="required"]{flex:none;padding:0 5px;border-radius:4px;background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink);font-size:11px;font-weight:700;line-height:18px}
|
|
27
|
+
[data-ar-design="remix"] [data-ar="field"]>[data-part="label"]>[data-ar="info"]{flex:none}
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
/* チェックの並びの間は _choice.css（ArCheckboxGroup と同じ段） */
|
|
3
3
|
/* 立っている項目は小さな札で並べる */
|
|
4
4
|
[data-ar-design="remix"] [data-ar="flag-view"]{gap:4px}
|
|
5
|
-
[data-ar-design="remix"] [data-ar="flag-view"]>[data-part="item"]{height:24px;padding:0 9px;border-radius:7px;background:var(--ar-color-surface-alt);box-shadow:inset 0 0 0 1px var(--ar-color-border);color:var(--ar-color-text-secondary);font-size:12px;font-weight:600;line-height:24px}
|
|
5
|
+
[data-ar-design="remix"] [data-ar="flag-view"]>[data-part="item"]{min-height:24px;height:auto;max-width:100%;overflow-wrap:anywhere;padding:0 9px;border-radius:7px;background:var(--ar-color-surface-alt);box-shadow:inset 0 0 0 1px var(--ar-color-border);color:var(--ar-color-text-secondary);font-size:12px;font-weight:600;line-height:24px}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="flag-view"]>[data-part="empty"]{color:var(--ar-color-text-faint);font-size:13px}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="flag-view"]{font-feature-settings:"palt" 1}
|
|
8
|
+
|
|
9
|
+
[data-ar-design="remix"] [data-ar="flag-group"][data-direction="vertical"][data-variant="card"]{align-items:stretch}
|
package/src/parts/ArImage.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[data-ar-design="remix"] [data-ar="image"][data-part="root"]>[data-part="mask"]{gap:6px;background:rgba(31,41,51,.45);color:#fff;font:600 12.5px/1.5 var(--ar-font-family)}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="scrim"]{background:rgba(31,41,51,.82);animation:ar-image-fade .2s ease-out}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="stage"]{padding:64px 32px 96px}
|
|
10
|
-
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="stage"]>[data-part="picture"]{border-radius:12px;box-shadow:0 24px 60px rgba(15,23,32,.4);animation:ar-image-fade .2s ease-out}
|
|
10
|
+
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="stage"]>[data-part="picture"]{background:var(--ar-color-surface);border-radius:12px;box-shadow:0 24px 60px rgba(15,23,32,.4);animation:ar-image-fade .2s ease-out}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="close"]{top:20px;right:20px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:background var(--ar-motion-fast)}
|
|
12
12
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="toolbar"]{bottom:28px;gap:2px;padding:4px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff}
|
|
13
13
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="toolbar"]>:is([data-part="tool"],[data-part="scale"]){height:34px;min-width:34px;border:0;border-radius:9px;background:none;color:#fff;font:600 12.5px/1 var(--ar-font-family);font-variant-numeric:tabular-nums;transition:background var(--ar-motion-fast)}
|
|
@@ -15,3 +15,6 @@
|
|
|
15
15
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>:is([data-part="close"],[data-part="toolbar"]>[data-part="tool"],[data-part="toolbar"]>[data-part="scale"]):hover:not(:disabled){background:rgba(255,255,255,.22)}
|
|
16
16
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>[data-part="toolbar"]>[data-part="tool"]:disabled{opacity:.4}
|
|
17
17
|
[data-ar-design="remix"] [data-ar="image"][data-part="viewer"]>:is([data-part="close"],[data-part="toolbar"]>[data-part="tool"],[data-part="toolbar"]>[data-part="scale"]):focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.5)}@keyframes ar-image-fade{from{opacity:0}to{opacity:1}}
|
|
18
|
+
/* Reserve a footer for document previews so the action never covers a field in the image. */
|
|
19
|
+
[data-ar-design="remix"] [data-ar="image"][data-part="root"][data-fit="contain"][data-state~="previewable"]{padding-bottom:36px}
|
|
20
|
+
[data-ar-design="remix"] [data-ar="image"][data-part="root"][data-fit="contain"]>[data-part="mask"]{inset:auto 0 0;height:36px;box-sizing:border-box;padding:5px 8px;border-top:1px solid var(--ar-color-border);background:var(--ar-accent-subtle);color:var(--ar-accent-ink);opacity:1}
|
package/src/parts/ArInfo.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
[data-ar-design="remix"] [data-ar="info"][data-kind="mark"]{justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--ar-color-text-muted);transition:background var(--ar-motion-fast),color var(--ar-motion-fast)}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="info"][data-kind="mark"]>[data-part="icon"]{width:16px;height:16px}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="info"][data-kind="mark"]:hover{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
|
|
9
|
-
[data-ar-design="remix"] [data-ar="info"][data-kind="detail"]{height:
|
|
9
|
+
[data-ar-design="remix"] [data-ar="info"][data-kind="detail"]{width:fit-content;gap:4px;height:24px;padding:0 6px;border-radius:6px;font-size:11.5px;font-weight:700;color:var(--ar-accent-ink);transition:background var(--ar-motion-fast)}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="info"][data-kind="detail"]:hover{background:var(--ar-accent-subtle)}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="info"]:is([data-kind="mark"],[data-kind="detail"]):focus-visible{outline:0;box-shadow:0 0 0 3px var(--ar-accent-ring)}
|
|
12
12
|
[data-ar-design="remix"] [data-ar="info"]{font-feature-settings:"palt" 1}
|
package/src/parts/ArItem.css
CHANGED
|
@@ -47,3 +47,18 @@
|
|
|
47
47
|
|
|
48
48
|
/* An explicit Stack gap owns spacing between its direct form rows. */
|
|
49
49
|
[data-ar-design="remix"] [data-ar="stack"]:not([data-gap="0"])>[data-ar="item"]{margin-bottom:0}
|
|
50
|
+
|
|
51
|
+
/* Labels follow the first control line, even when the value spans several lines. */
|
|
52
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="title"]{align-self:start;height:fit-content;align-content:flex-start}
|
|
53
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="content"]>[data-part="info"]{display:flex;flex-wrap:wrap;align-items:center;gap:4px;white-space:normal}
|
|
54
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="content"]>[data-part="info"]>[data-part="info-text"]{white-space:pre-wrap}
|
|
55
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="content"]>[data-part="info"]>[data-part="detail"]{display:inline-flex;align-items:center;align-self:center;gap:3px;margin:0;line-height:inherit;white-space:nowrap}
|
|
56
|
+
|
|
57
|
+
/* A 36px first line aligns read values, switches and controls without centring a long form. */
|
|
58
|
+
[data-ar-design="remix"] [data-ar="item"][data-variant="form"]>[data-part="content"]{justify-content:flex-start;min-height:36px}
|
|
59
|
+
[data-ar-design="remix"] [data-ar="item"][data-variant="form"]>[data-part="content"]>:first-child:not([data-part="info"],[data-ar="switch"]){min-height:36px;box-sizing:border-box;align-content:center}
|
|
60
|
+
[data-ar-design="remix"] [data-ar="item"][data-variant="row"]>[data-part="content"]{min-height:36px}
|
|
61
|
+
[data-ar-design="remix"] [data-ar="item"][data-variant="row"]>[data-part="content"]>:first-child:not([data-ar="switch"]){min-height:36px;box-sizing:border-box;align-content:center}
|
|
62
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="title"]>[data-part="label"]{max-width:100%;min-width:0;flex-wrap:wrap}
|
|
63
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="title"]>[data-part="label"]>[data-part="label-text"]{word-break:normal;overflow-wrap:break-word}
|
|
64
|
+
[data-ar-design="remix"] [data-ar="item"]>[data-part="content"]>[data-ar="switch"]:first-child{margin-block:6px}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* @covers ArKanaInput 1.0.0, ArKanaText 1.0.0 */
|
|
2
|
-
/*
|
|
3
|
-
[data-ar-design="remix"] [data-ar="kana-input"]{gap:8px}
|
|
4
|
-
[data-ar-design="remix"] [data-ar="kana-input"]>[data-part="row"]{gap:8px}
|
|
5
|
-
[data-ar-design="remix"] [data-ar="kana-input"]>[data-part="row"]>[data-ar="text-input"]{width:
|
|
2
|
+
/* 氏名とフリガナ：姓・名を8空けて並べ、狭い列では均等に縮める。下にセイ・メイ。フリガナの行は少し低く・小さく */
|
|
3
|
+
[data-ar-design="remix"] [data-ar="kana-input"]{gap:8px;width:308px;max-width:100%;min-width:0}
|
|
4
|
+
[data-ar-design="remix"] [data-ar="kana-input"]>[data-part="row"]{gap:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
5
|
+
[data-ar-design="remix"] [data-ar="kana-input"]>[data-part="row"]>[data-ar="text-input"]{width:100%;min-width:0}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="kana-input"]>[data-part="row"][data-row="kana"]>[data-ar="text-input"]{height:34px;font-size:13px}
|
|
7
7
|
/* フリガナつきの氏名：名前の上に 10.5px の mute */
|
|
8
8
|
[data-ar-design="remix"] [data-ar="kana-text"]>[data-part="stack"]>[data-part="kana"]{font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.04em;color:var(--ar-color-text-muted)}
|