@s_and_a/arrow-ui-design-remix 0.1.10 → 0.1.11
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 +6 -6
- package/dist/covers.generated.js +6 -6
- 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 +3 -2
- package/src/parts/ArAuthPanel.css +5 -1
- package/src/parts/ArButton.css +14 -1
- package/src/parts/ArCalendar.css +1 -0
- package/src/parts/ArCard.css +20 -9
- package/src/parts/ArChangedValue.css +7 -0
- 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/ArItem.css +6 -0
- package/src/parts/ArKanaInput.css +4 -4
- package/src/parts/ArMenu.css +3 -1
- package/src/parts/ArModal.css +5 -0
- package/src/parts/ArPageHeading.css +1 -1
- package/src/parts/ArProfileCard.css +4 -4
- package/src/parts/ArSaveBar.css +11 -0
- package/src/parts/ArSegmented.css +7 -0
- package/src/parts/ArTable.css +21 -18
- package/src/parts/ArTableHeader.css +1 -1
- package/src/parts/ArUpload.css +2 -4
- package/src/parts/ArZipInput.css +1 -1
- package/src/parts/_choice.css +2 -2
- package/src/parts/_product.css +97 -1
|
@@ -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";
|
|
@@ -62,7 +62,7 @@ export declare const covers: {
|
|
|
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";
|
|
@@ -116,7 +116,7 @@ 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.6.0";
|
|
120
120
|
readonly ArTableHeader: "1.0.0";
|
|
121
121
|
readonly ArTabs: "1.1.0";
|
|
122
122
|
readonly ArTag: "1.0.0";
|
|
@@ -145,6 +145,6 @@ export declare const covers: {
|
|
|
145
145
|
readonly ArWizard: "1.2.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",
|
|
@@ -63,7 +63,7 @@ export const covers = {
|
|
|
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",
|
|
@@ -117,7 +117,7 @@ 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.6.0",
|
|
121
121
|
ArTableHeader: "1.0.0",
|
|
122
122
|
ArTabs: "1.1.0",
|
|
123
123
|
ArTag: "1.0.0",
|
|
@@ -146,6 +146,6 @@ export const covers = {
|
|
|
146
146
|
ArWizard: "1.2.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.11",
|
|
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.11"
|
|
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
|
+
html[data-ar-design="remix"] .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){html[data-ar-design="remix"] .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)}
|
|
@@ -27,7 +27,7 @@
|
|
|
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
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:normal}
|
|
@@ -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)}
|
|
@@ -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/ArButton.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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
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:normal;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)}
|
|
@@ -47,3 +47,16 @@
|
|
|
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}
|
package/src/parts/ArCalendar.css
CHANGED
|
@@ -101,4 +101,5 @@
|
|
|
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)}
|
|
@@ -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/ArItem.css
CHANGED
|
@@ -47,3 +47,9 @@
|
|
|
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:baseline;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:baseline;gap:3px;margin:0;line-height:inherit;white-space:nowrap}
|
|
@@ -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)}
|
package/src/parts/ArMenu.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @covers ArMenu 1.
|
|
1
|
+
/* @covers ArMenu 1.1.0 */
|
|
2
2
|
/* ArMenu：.ad-menu（inline・vertical）と .ad-hmenu（horizontal）。上の段の選択はテーマ色の塗り、子の選択は淡い面とテーマ色の文字。 */
|
|
3
3
|
[data-ar-design="remix"] [data-ar="menu"]{gap:2px;font-size:13.5px;line-height:1.5;color:var(--ar-color-text);font-feature-settings:"palt" 1}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="menu"][data-bordered]{padding:6px;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ar-color-border)}
|
|
@@ -27,3 +27,5 @@
|
|
|
27
27
|
[data-ar-design="remix"] [data-ar="menu"][data-mode="horizontal"]>[data-part="item"]:is([data-state~="selected"],[data-state~="active"]){color:var(--ar-accent-ink);font-weight:700;border-bottom-color:var(--ar-accent)}
|
|
28
28
|
[data-ar-design="remix"] [data-ar="menu"][data-mode="horizontal"]>[data-part="item"]:is([data-state~="disabled"],[data-state~="locked"]){color:var(--ar-color-text-faint)}
|
|
29
29
|
[data-ar-design="remix"] [data-ar="menu"][data-mode="horizontal"]>[data-part="item"]:focus-visible{box-shadow:inset 0 0 0 2px var(--ar-accent);border-radius:6px 6px 0 0}
|
|
30
|
+
|
|
31
|
+
[data-ar-design="remix"] [data-ar="menu"]>[data-part="item"][data-tone="edit"]{color:#206C49}
|
package/src/parts/ArModal.css
CHANGED
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="nav"]>[data-part="steps"]>[data-part="step"][data-state="done"]>[data-part="step-label"]>[data-part="step-mark"]{background:var(--ar-color-ok);color:#fff}
|
|
29
29
|
/* 中身 .mb・足 .mf */
|
|
30
30
|
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="body"]{display:flex;flex-direction:column;gap:16px;padding:18px 22px}
|
|
31
|
+
/* Preserve the natural height of tabs/forms; the body owns vertical scrolling. */
|
|
32
|
+
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="body"]>*{flex-shrink:0}
|
|
31
33
|
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="footer"]{gap:8px;padding:12px 22px;background:var(--ar-color-surface-alt);border-top:1px solid var(--ar-color-border)}
|
|
32
34
|
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-start"],[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]{gap:8px}
|
|
33
35
|
[data-ar-design="remix"] [data-ar="modal"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ok]{min-width:110px}
|
|
@@ -53,6 +55,9 @@
|
|
|
53
55
|
@media(max-width:640px){
|
|
54
56
|
[data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]{flex:1}
|
|
55
57
|
[data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="button"]{flex:1}
|
|
58
|
+
/* ArClusterで操作をまとめても、直接置いたボタンと同じ押しやすい幅にする。補足や別の入力を含むclusterには適用しない。 */
|
|
59
|
+
[data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="cluster"]:only-child:not(:has(>:not([data-ar="button"]))){flex:1}
|
|
60
|
+
[data-ar-design="remix"] [data-ar="modal"][data-variant="default"]>[data-part="panel"]>[data-part="footer"]>[data-part="footer-end"]>[data-ar="cluster"]:only-child:not(:has(>:not([data-ar="button"])))>[data-ar="button"]{flex:1}
|
|
56
61
|
}
|
|
57
62
|
|
|
58
63
|
/* Supplemental information remains readable on mobile; actions occupy their own row. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* @covers ArPageHeading 1.0.0 */
|
|
2
2
|
[data-ar-design="remix"] [data-ar="page-heading"]{font-family:var(--ar-font-family);font-size:18px;font-weight:700;line-height:1.5;letter-spacing:.08em}
|
|
3
|
-
[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]{min-height:54px;padding:12px 18px;color:var(--ar-on-accent);background:linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent) 45%,var(--ar-accent-strong));border-radius:18px 18px 0 0;overflow:hidden;text-shadow:var(--ar-on-accent-shadow)}
|
|
3
|
+
[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]{min-height:54px;padding:12px 18px;justify-content:flex-start;text-align:left;color:var(--ar-on-accent);background:linear-gradient(120deg,var(--ar-accent-hi),var(--ar-accent) 45%,var(--ar-accent-strong));border-radius:18px 18px 0 0;overflow:hidden;text-shadow:var(--ar-on-accent-shadow)}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::before,[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
|
|
5
5
|
[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::before{right:-30px;top:-46px;width:150px;height:150px;background:rgba(255,255,255,.1)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="page-heading"][data-type="bar"]::after{left:-40px;bottom:-70px;width:140px;height:140px;background:rgba(255,255,255,.07)}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
height: 40px;
|
|
11
11
|
font-size: 16px;
|
|
12
12
|
}
|
|
13
|
-
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"] > [data-part="list"] {
|
|
13
|
+
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"][data-variant][data-layout] > [data-part="list"] {
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-wrap: wrap;
|
|
16
16
|
gap: 6px 8px;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
background: transparent;
|
|
20
20
|
overflow: visible;
|
|
21
21
|
}
|
|
22
|
-
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"] > [data-part="list"] > [data-part="item"] {
|
|
22
|
+
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"][data-variant][data-layout] > [data-part="list"] > [data-part="item"] {
|
|
23
23
|
display: flex;
|
|
24
24
|
align-items: baseline;
|
|
25
25
|
gap: 6px;
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
border-radius: 6px;
|
|
30
30
|
background: var(--ar-color-surface-alt);
|
|
31
31
|
}
|
|
32
|
-
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"] > [data-part="list"] > [data-part="item"] > :is([data-part="label"], [data-part="value"]) {
|
|
32
|
+
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"][data-variant][data-layout] > [data-part="list"] > [data-part="item"] > :is([data-part="label"], [data-part="value"]) {
|
|
33
33
|
padding: 0;
|
|
34
34
|
border: 0;
|
|
35
35
|
background: transparent;
|
|
36
36
|
}
|
|
37
|
-
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"] > [data-part="list"] > [data-part="item"] > [data-part="label"] {
|
|
37
|
+
[data-ar-design="remix"] [data-ar="profile-card"] [data-ar="descriptions"][data-variant][data-layout] > [data-part="list"] > [data-part="item"] > [data-part="label"] {
|
|
38
38
|
flex: none;
|
|
39
39
|
}
|
|
40
40
|
}
|
package/src/parts/ArSaveBar.css
CHANGED
|
@@ -8,3 +8,14 @@
|
|
|
8
8
|
[data-ar-design="remix"] [data-ar="save-bar"]>[data-ar="button"][data-tone="danger-subtle"]{background:var(--ar-color-danger-subtle);box-shadow:inset 0 0 0 1px var(--ar-color-border)}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="save-bar"]>[data-ar="button"][data-tone="danger-subtle"]:hover:not(:disabled){background:#F9DEDC}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="save-bar"][data-size="sm"]{padding:10px 10px 10px 12px}
|
|
11
|
+
|
|
12
|
+
/* ARROW page actions clear the fixed mobile navigation (the product shell supplies the dock offset). */
|
|
13
|
+
html[data-ar-design="remix"] .menu_layout [data-ar="save-bar"][data-sticky]{bottom:var(--arrow-floating-bottom,16px)}
|
|
14
|
+
|
|
15
|
+
/* Leave the desktop help dock outside the action hit targets, even at the page end. */
|
|
16
|
+
@media (min-width:960px){html[data-ar-design="remix"] .menu_layout [data-ar="save-bar"][data-sticky]{padding-inline-end:76px}}
|
|
17
|
+
|
|
18
|
+
/* Keep action words together; a narrow container wraps whole buttons instead. */
|
|
19
|
+
@container ar-save-bar (max-width:480px){
|
|
20
|
+
[data-ar-design="remix"] [data-ar="save-bar"]>[data-ar="button"]{flex:1 0 auto;min-height:40px;padding-inline:10px;font-size:12.5px}
|
|
21
|
+
}
|
|
@@ -19,3 +19,10 @@
|
|
|
19
19
|
/* 件数の丸は ArBadge（テーマ色の塗り。warn・danger・neutral は淡い地。18・角丸9・11px 700）。文字との間 5px、押せないときは灰の塗り */
|
|
20
20
|
[data-ar-design="remix"] [data-ar="segmented"]>[data-part="item"]>[data-part="count"]{margin-left:-1px}
|
|
21
21
|
[data-ar-design="remix"] [data-ar="segmented"]>[data-part="item"]:disabled>[data-part="count"]>[data-part="count"]{background:var(--ar-color-text-faint);color:#fff}
|
|
22
|
+
|
|
23
|
+
/* Match size-rule specificity so wrapped labels can increase the row height.
|
|
24
|
+
Compact full-width filters reserve space for short labels and count badges. */
|
|
25
|
+
[data-ar-design="remix"] [data-ar="segmented"][data-block][data-size]>[data-part="item"]{height:auto;min-height:30px;padding-block:4px;white-space:normal;line-height:1.3}
|
|
26
|
+
[data-ar-design="remix"] [data-ar="segmented"][data-block][data-size="sm"]>[data-part="item"]{min-height:24px;padding-inline:6px;gap:4px}
|
|
27
|
+
[data-ar-design="remix"] [data-ar="segmented"][data-block][data-size="lg"]>[data-part="item"]{min-height:36px}
|
|
28
|
+
[data-ar-design="remix"] [data-ar="segmented"][data-block]>[data-part="item"]>[data-part="label"]{min-width:0;overflow-wrap:anywhere}
|
package/src/parts/ArTable.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/* @covers ArTable 1.
|
|
1
|
+
/* @covers ArTable 1.6.0 */
|
|
2
2
|
/* ArTable（box＝.lst/.lr：外枠 角丸12・線、見出し34・行44。board＝シフト画面の .v-tr：外枠なし、角の丸い見出し・行50・合計の帯） */
|
|
3
3
|
[data-ar-design="remix"] [data-ar="table"]{font-feature-settings:"palt" 1;color:var(--ar-color-text);font-size:13px;line-height:1.5}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="table"]>[data-part="viewport"]:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px}
|
|
5
|
-
[data-ar-design="remix"] [data-ar="table"] [data-part="header-cell"]{padding:0
|
|
5
|
+
[data-ar-design="remix"] [data-ar="table"] [data-part="header-cell"]{padding:0 8px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;white-space:nowrap;border-bottom:1px solid var(--ar-color-border-subtle)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="table"] thead[data-part="head"]>tr{height:34px}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="table"] :is(tbody[data-part="body"]>tr[data-part="row"],tfoot[data-part="foot"]>tr){height:44px}
|
|
8
|
-
[data-ar-design="remix"] [data-ar="table"] [data-part="cell"]{padding:
|
|
8
|
+
[data-ar-design="remix"] [data-ar="table"] [data-part="cell"]{padding:4px 8px;border-bottom:1px solid var(--ar-color-border-subtle);font-variant-numeric:tabular-nums}
|
|
9
9
|
[data-ar-design="remix"] [data-ar="table"] :is([data-part="header-cell"],[data-part="cell"]):first-child{padding-left:12px}
|
|
10
10
|
[data-ar-design="remix"] [data-ar="table"] :is([data-part="header-cell"],[data-part="cell"]):last-child{padding-right:12px}
|
|
11
11
|
[data-ar-design="remix"] [data-ar="table"] :is([data-part="header-cell"],[data-part="cell"])[data-col="select"]{width:18px;box-sizing:content-box}
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
[data-ar-design="remix"] [data-ar="table"] [data-part="row"][data-state~="off"]>td [data-part="name"]>b{color:var(--ar-color-text-faint)}
|
|
29
29
|
|
|
30
30
|
/* 名前の列：頭文字の丸＋名前（＋小さな説明） */
|
|
31
|
-
[data-ar-design="remix"] [data-ar="table"] td
|
|
32
|
-
[data-ar-design="remix"] [data-ar="table"] td
|
|
33
|
-
[data-ar-design="remix"] [data-ar="table"] td
|
|
34
|
-
[data-ar-design="remix"] [data-ar="table"] td
|
|
35
|
-
[data-ar-design="remix"] [data-ar="table"] td
|
|
36
|
-
[data-ar-design="remix"] [data-ar="table"] td>[data-part="actions"]{gap:
|
|
31
|
+
[data-ar-design="remix"] [data-ar="table"] td [data-part="person"]{gap:10px}
|
|
32
|
+
[data-ar-design="remix"] [data-ar="table"] td [data-part="person"]>[data-part="name"]>b{font-weight:600;color:var(--ar-color-text)}
|
|
33
|
+
[data-ar-design="remix"] [data-ar="table"] td [data-part="person"]>[data-part="name"]>[data-part="sub"]{font-size:11px;line-height:1.5;color:var(--ar-color-text-muted)}
|
|
34
|
+
[data-ar-design="remix"] [data-ar="table"] td [data-part="person"]>[data-part="name"]>[data-part="sub"]{gap:4px}
|
|
35
|
+
[data-ar-design="remix"] [data-ar="table"] td [data-part="person"]>[data-part="name"]>[data-part="sub"]>[data-part="sub-mark"]{width:7px;height:7px;border-radius:2px}
|
|
36
|
+
[data-ar-design="remix"] [data-ar="table"] td>[data-part="actions"]{gap:8px}
|
|
37
37
|
|
|
38
38
|
/* 並べ替えの印（上下の山。いま並べている向きだけ濃く） */
|
|
39
39
|
[data-ar-design="remix"] [data-ar="table"] th>[data-part="sort"]{gap:2px;color:inherit;font:inherit;letter-spacing:inherit;border-radius:4px}
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="header-cell"]:first-child{border-radius:10px 0 0 10px}
|
|
82
82
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="header-cell"]:last-child{border-radius:0 10px 10px 0}
|
|
83
83
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tbody[data-part="body"]>tr[data-part="row"]{height:50px}
|
|
84
|
-
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="cell"]{padding:
|
|
84
|
+
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="cell"]{padding:4px 8px}
|
|
85
85
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] :is([data-part="header-cell"],[data-part="cell"]):first-child{padding-left:8px}
|
|
86
86
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] :is([data-part="header-cell"],[data-part="cell"]):last-child{padding-right:8px}
|
|
87
87
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="row"]:hover>td{background:#FAFBFD}
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td>[data-part="lines"]{line-height:1.45}
|
|
91
91
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="cell"][data-emphasis="muted"]{font-size:13.5px}
|
|
92
92
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] [data-part="cell"][data-blank]{color:var(--ar-color-text)}
|
|
93
|
-
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td
|
|
94
|
-
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td
|
|
93
|
+
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td [data-part="person"]{gap:10px}
|
|
94
|
+
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td [data-part="person"]>[data-part="name"]>b{font-weight:700}
|
|
95
95
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tfoot[data-part="foot"]::before{content:"";display:table-row;height:6px}
|
|
96
96
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tfoot[data-part="foot"] [data-part="cell"]{background:#F7F9FB;border-top:0}
|
|
97
97
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tfoot[data-part="foot"]>tr{height:54px}
|
|
@@ -102,8 +102,8 @@
|
|
|
102
102
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td[data-part="empty"]{border-bottom:1px solid var(--ar-color-border-subtle)}
|
|
103
103
|
/* board の名前だけの列（勤務可能な人）：丸は 28px・12px、間8px、名前はさらに太く。見出しは左に 12px。 */
|
|
104
104
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] th[data-person="single"]:first-child{padding-left:12px}
|
|
105
|
-
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td
|
|
106
|
-
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td
|
|
105
|
+
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td [data-part="person"][data-single]{gap:10px}
|
|
106
|
+
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td [data-part="person"][data-single]>[data-part="name"]>b{font-weight:900}
|
|
107
107
|
/* board の行の右端の操作：上にそろえ、文字のボタン（「シフトに入れる」）とアイコンのボタンの間は 4px */
|
|
108
108
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td>[data-part="actions"]{align-items:flex-start}
|
|
109
109
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] td>[data-part="actions"]>[data-ar="button"]:not([data-icon-only])+[data-ar="button"]{margin-left:2px}
|
|
@@ -159,11 +159,11 @@
|
|
|
159
159
|
[data-ar-design="remix"] [data-ar="table"] td>[data-part="delta"][data-tone="danger"]{color:var(--ar-color-danger-ink)}
|
|
160
160
|
[data-ar-design="remix"] [data-ar="table"] td>[data-part="mark"]{width:12px;height:12px;margin-left:3px;color:var(--ar-accent-ink)}
|
|
161
161
|
/* 上の行のセルがまたいでいる行では、行の最初・最後のセルが表の端の列ではない（端の余白を付けない） */
|
|
162
|
-
[data-ar-design="remix"] [data-ar="table"] tbody td[data-part="cell"]:not([data-col]):first-child:not([data-edge="first"]){padding-left:
|
|
163
|
-
[data-ar-design="remix"] [data-ar="table"] tbody td[data-part="cell"]:not([data-col]):last-child:not([data-edge="last"]){padding-right:
|
|
162
|
+
[data-ar-design="remix"] [data-ar="table"] tbody td[data-part="cell"]:not([data-col]):first-child:not([data-edge="first"]){padding-left:8px}
|
|
163
|
+
[data-ar-design="remix"] [data-ar="table"] tbody td[data-part="cell"]:not([data-col]):last-child:not([data-edge="last"]){padding-right:8px}
|
|
164
164
|
[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tbody td[data-part="cell"]:not([data-col]):first-child:not([data-edge="first"]),[data-ar-design="remix"] [data-ar="table"][data-variant="board"] tbody td[data-part="cell"]:not([data-col]):last-child:not([data-edge="last"]){padding-left:8px;padding-right:8px}
|
|
165
|
-
[data-ar-design="remix"] [data-ar="table"] thead tr[data-tier="2"]>th:first-child{padding-left:
|
|
166
|
-
[data-ar-design="remix"] [data-ar="table"] thead tr[data-tier="2"]>th:last-child{padding-right:
|
|
165
|
+
[data-ar-design="remix"] [data-ar="table"] thead tr[data-tier="2"]>th:first-child{padding-left:8px}
|
|
166
|
+
[data-ar-design="remix"] [data-ar="table"] thead tr[data-tier="2"]>th:last-child{padding-right:8px}
|
|
167
167
|
/* 1.2：段に分けた列（lines）。1つの行を段の数の tr に分け、段のない列は段をまたぐ。段の間に線を引かず、段は高さ38（中の時刻・選ぶの入力 32 が収まる。PopRecruitDays の日ごとの段）、最初と最後の段だけ上下に6の余白 */
|
|
168
168
|
[data-ar-design="remix"] [data-ar="table"] tbody[data-part="body"]>tr[data-part="row"][data-line]:not([data-line="0"][data-line-last]){height:38px}
|
|
169
169
|
[data-ar-design="remix"] [data-ar="table"] tr[data-part="row"][data-line]:not([data-line-last])>td[data-line-cell]{border-bottom:0}
|
|
@@ -194,3 +194,6 @@
|
|
|
194
194
|
[data-ar-design="remix"] [data-ar="table"] [data-part="cell"][data-wrap]{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip;line-height:1.6;padding-block:8px}
|
|
195
195
|
|
|
196
196
|
[data-ar-design="remix"] [data-ar="table"] [data-part="header-cell"][data-wrap]{white-space:normal;overflow-wrap:anywhere;padding-block:6px}
|
|
197
|
+
/* Empty messages stay inside the visible viewport of a horizontally scrollable table. */
|
|
198
|
+
[data-ar-design="remix"] [data-ar="table"]{container:ar-table / inline-size}
|
|
199
|
+
[data-ar-design="remix"] [data-ar="table"] td[data-part="empty"]>[data-ar="empty"]{position:sticky;left:12px;width:calc(100cqw - 24px);max-width:100%;box-sizing:border-box}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/* @covers ArTableHeader 1.0.0 */
|
|
2
|
-
[data-ar-design="remix"] [data-ar="table-header"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:12px;font-weight:700;padding:10px 12px;border-bottom:1px solid var(--ar-color-border)}
|
|
2
|
+
[data-ar-design="remix"] [data-ar="table-header"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:12px;font-weight:700;text-align:start;padding:10px 12px;border-bottom:1px solid var(--ar-color-border)}
|
|
3
3
|
[data-ar-design="remix"] [data-ar="table-header"] [data-part="sort"]{color:var(--ar-color-text-muted);opacity:.5}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="table-header"] [data-part="sort"][data-sort]{color:var(--ar-accent-ink);opacity:1}
|
package/src/parts/ArUpload.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* ArUpload：置き場 .ad-up（点線1.5 acc-line・角丸14・acc-25・余白22）、一覧 .ad-file（行34・角丸8・13px、名前は acc-ink）、
|
|
3
3
|
進み具合 .ad-bar（3px・テーマ色）、失敗は赤と理由、写真 .ad-upc（96px・点線 field・角丸12）。 */
|
|
4
4
|
[data-ar-design="remix"] [data-ar="upload"]{gap:12px 22px;font-feature-settings:"palt" 1}
|
|
5
|
-
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]{flex:
|
|
5
|
+
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]{flex:1 1 300px;gap:6px;padding:22px;border:1.5px dashed var(--ar-accent-line);border-radius:14px;background:var(--ar-accent-faint);font-size:13.5px;line-height:1.5;color:var(--ar-color-text-secondary);outline:0;transition:background var(--ar-motion-fast),border-color var(--ar-motion-fast),box-shadow var(--ar-motion-fast)}
|
|
6
6
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]:hover{background:var(--ar-accent-subtle)}
|
|
7
7
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]:focus-visible{box-shadow:0 0 0 3px var(--ar-accent-ring)}
|
|
8
8
|
[data-ar-design="remix"] [data-ar="upload"][data-state~="dragover"]>[data-part="drop"]{border-color:var(--ar-accent);background:var(--ar-accent-subtle)}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
[data-ar-design="remix"] [data-ar="upload"][data-state~="disabled"]>[data-part="drop"]>[data-part="icon"]{color:var(--ar-color-text-faint)}
|
|
12
12
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]>[data-part="title"]{color:var(--ar-color-text);font-weight:700}
|
|
13
13
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="drop"]>[data-part="hint"]>[data-part="pick"]{color:var(--ar-accent-ink);text-decoration:underline;text-underline-offset:2px}
|
|
14
|
-
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]{flex:
|
|
14
|
+
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]{flex:1 1 280px}
|
|
15
15
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]{gap:8px;height:34px;padding:0 8px;border-radius:8px;font-size:13px;color:var(--ar-color-text)}
|
|
16
16
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]:hover{background:var(--ar-color-hover)}
|
|
17
17
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]>[data-part="name"]{color:var(--ar-accent-ink)}
|
|
@@ -21,8 +21,6 @@
|
|
|
21
21
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]>[data-part="remove"]{width:24px;height:24px;margin-right:-4px;border-radius:6px;color:var(--ar-color-text-secondary)}
|
|
22
22
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]>[data-part="remove"]:hover{background:var(--ar-color-danger-subtle);color:var(--ar-color-danger-ink)}
|
|
23
23
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="row"]>[data-part="remove"]:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ar-accent-ring)}
|
|
24
|
-
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"][data-status="done"]>[data-part="row"]>[data-part="remove"]{display:none}
|
|
25
|
-
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"][data-status="done"]>[data-part="row"]:is(:hover,:focus-within)>[data-part="remove"]{display:inline-flex}
|
|
26
24
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"][data-status="done"]>[data-part="row"]:is(:hover,:focus-within)>[data-part="status"]{display:none}
|
|
27
25
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="bar"]{height:3px;margin:-4px 8px 4px 34px;border-radius:2px;background:var(--ar-color-border-subtle)}
|
|
28
26
|
[data-ar-design="remix"] [data-ar="upload"]>[data-part="files"]>[data-part="file"]>[data-part="bar"]>i{background:var(--ar-accent);transition:width .3s}
|
package/src/parts/ArZipInput.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @covers ArZipInput 1.
|
|
1
|
+
/* @covers ArZipInput 1.3.0 */
|
|
2
2
|
[data-ar-design="remix"] [data-ar="zip-input"]{gap:10px}
|
|
3
3
|
[data-ar-design="remix"] [data-ar="zip-input"]>[data-ar="text-input"]{width:132px;font-variant-numeric:tabular-nums}
|
|
4
4
|
[data-ar-design="remix"] [data-ar="zip-input"]>[data-part="status"]{font-size:12px;font-weight:600;color:var(--ar-color-text-muted)}
|
package/src/parts/_choice.css
CHANGED
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"]:has(>[data-part="control"]>[data-part="input"]:focus-visible){box-shadow:inset 0 0 0 1px var(--ar-accent-line),0 0 0 3px var(--ar-accent-ring)}
|
|
39
39
|
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"]:is([data-state~="checked"],[data-state~="indeterminate"]):has(>[data-part="control"]>[data-part="input"]:focus-visible){box-shadow:inset 0 0 0 2px var(--ar-accent),0 0 0 3px var(--ar-accent-ring)}
|
|
40
40
|
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"]>[data-part="control"]>[data-part="input"]:focus-visible+:is([data-part="mark"],[data-part="box"]){box-shadow:none}
|
|
41
|
-
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"][data-state~="disabled"]{background:var(--ar-color-surface-alt);color:var(--ar-color-text-
|
|
42
|
-
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"][data-state~="disabled"]>[data-part="description"]{color:var(--ar-color-text-
|
|
41
|
+
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"][data-state~="disabled"]{background:var(--ar-color-surface-alt);color:var(--ar-color-text-muted);box-shadow:inset 0 0 0 1px var(--ar-color-border)}
|
|
42
|
+
[data-ar-design="remix"] :is([data-ar="radio"],[data-ar="checkbox"])[data-variant="card"][data-state~="disabled"]>[data-part="description"]{color:var(--ar-color-text-muted)}
|
|
43
43
|
/* カードの名前の横の札（ArChoiceCard の tag：推奨・ご利用中） */
|
|
44
44
|
[data-ar-design="remix"] [data-ar="radio"]>[data-part="label"]>[data-part="tag"]{height:20px;margin-left:8px;padding:0 7px;border-radius:10px;background:var(--ar-accent-subtle);color:var(--ar-accent-ink);font-size:11px;font-weight:700;line-height:1;white-space:nowrap}
|
|
45
45
|
[data-ar-design="remix"] [data-ar="radio"]>[data-part="label"]>[data-part="tag"][data-tone="ok"]{background:var(--ar-color-ok-subtle);color:var(--ar-color-ok)}
|
package/src/parts/_product.css
CHANGED
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
[data-ar-design="remix"] table[data-ui-part="table"] :is(th,td):not([data-ui-fixed], [data-ui-fixed] *) { box-sizing:border-box;padding:10px 12px;border:0;border-bottom:1px solid var(--ar-color-border);vertical-align:middle; }
|
|
266
266
|
[data-ar-design="remix"] table[data-ui-part="table"] th:not([data-ui-fixed], [data-ui-fixed] *) { background:var(--ar-color-bg);font-weight:700;color:var(--ar-color-text-secondary); }
|
|
267
267
|
[data-ar-design="remix"] table[data-ui-part="table"] td:not([data-ui-fixed], [data-ui-fixed] *) { background:var(--ar-color-surface); }
|
|
268
|
-
[data-ar-design="remix"] table[data-ui-part="table"] tbody tr:hover>td:not([data-ui-fixed], [data-ui-fixed] *) { background:var(--ar-accent-subtle); }
|
|
268
|
+
[data-ar-design="remix"] table[data-ui-part="table"] tbody tr:hover:not([data-add-row])>td:not([data-ui-fixed], [data-ui-fixed] *) { background:var(--ar-accent-subtle); }
|
|
269
269
|
[data-ar-design="remix"] table[data-ui-part="table"] tbody tr:last-child>td:not([data-ui-fixed], [data-ui-fixed] *) { border-bottom:0; }
|
|
270
270
|
[data-ar-design="remix"] table[data-ui-part="table"] .sticky_row th:not([data-ui-fixed], [data-ui-fixed] *) { position:sticky;top:0;z-index:2; }
|
|
271
271
|
[data-ar-design="remix"] table[data-ui-part="table"] .sticky_col.col1 :is(th,td):first-child:not([data-ui-fixed], [data-ui-fixed] *) { position:sticky;left:0;z-index:1; }
|
|
@@ -322,3 +322,99 @@
|
|
|
322
322
|
@media(max-width:767px) {
|
|
323
323
|
[data-ar-design="remix"] .login_wrapper:has([data-ar="auth-panel"]):not([data-ui-fixed], [data-ui-fixed] *) { min-height:0;justify-content:flex-start;padding:32px 20px; }
|
|
324
324
|
}
|
|
325
|
+
|
|
326
|
+
/* Legacy table composition follows the same geometry as ArTable. */
|
|
327
|
+
[data-ar-design="remix"] table[data-ui-part="table"] thead>tr:first-child>th:first-child{border-top-left-radius:12px}
|
|
328
|
+
[data-ar-design="remix"] table[data-ui-part="table"] thead>tr:first-child>th:last-child{border-top-right-radius:12px;background:var(--ar-accent-subtle);border-bottom:1px solid var(--ar-color-border)}
|
|
329
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td.button [data-ar="button"]+[data-ar="button"],
|
|
330
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td>[data-ar="button"]+[data-ar="button"]{margin-inline-start:8px}
|
|
331
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td [data-ar="button"][data-icon-only]{min-width:30px;min-height:30px}
|
|
332
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td .no_drag{max-width:100%;min-width:0}
|
|
333
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td .branch_selector_component{width:100%;min-width:0;max-width:100%}
|
|
334
|
+
/* Two 30px actions, their gap, and cell padding must fit even in fixed-layout tables. */
|
|
335
|
+
[data-ar-design="remix"] table[data-ui-part="table"] :is(th,td).button{width:100px;min-width:100px;white-space:nowrap;overflow:visible;position:sticky;right:0;z-index:2}
|
|
336
|
+
[data-ar-design="remix"] table[data-ui-part="table"] th.button{z-index:3}
|
|
337
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td.button:has([data-ar="button"]:nth-of-type(3)){width:138px;min-width:138px}
|
|
338
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td.button .no_drag{max-width:none}
|
|
339
|
+
[data-ar-design="remix"] table[data-ui-part="table"] tbody tr[data-add-row]>td{background:var(--ar-color-surface)}
|
|
340
|
+
[data-ar-design="remix"] [data-ui-part="tableViewport"]{box-sizing:border-box;max-width:100%;min-width:0}
|
|
341
|
+
[data-ar-design="remix"] table[data-ui-part="table"] td p[data-ui-part="text"]{margin:0;line-height:1.6}
|
|
342
|
+
/* Keep sorting tables native: legacy layout used block rows and broke colspan. */
|
|
343
|
+
[data-ar-design="remix"] table[data-ui-part="table"]>tbody.smooth-dnd-container{display:table-row-group!important}
|
|
344
|
+
[data-ar-design="remix"] .sortable_table_component table[data-ui-part="table"]>thead{display:table-header-group}
|
|
345
|
+
@layer arrow-product-layout {
|
|
346
|
+
[data-ar-design="remix"] .sortable_table_component table[data-ui-part="table"]> :is(thead,tbody)>tr{display:table-row!important}
|
|
347
|
+
[data-ar-design="remix"] table[data-ui-part="table"]>tbody.smooth-dnd-container>tr{display:table-row!important}
|
|
348
|
+
}
|
|
349
|
+
/* Shared authentication composition, including narrow viewports and text zoom. */
|
|
350
|
+
[data-ar-design="remix"] .login_wrapper:has([data-ar="auth-panel"]):not([data-ui-fixed], [data-ui-fixed] *){position:relative;isolation:isolate;overflow:clip;background:var(--ar-color-bg);min-height:100dvh}
|
|
351
|
+
[data-ar-design="remix"] .login_wrapper:has([data-ar="auth-panel"])::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:50% -25% -50%;border-radius:50% 50% 0 0;background:var(--ar-accent-subtle)}
|
|
352
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .login__languages{border-top:1px solid var(--ar-color-border-subtle);padding-top:12px;margin-top:20px;gap:4px}
|
|
353
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .login__languages [data-ar="button"]{padding-inline:8px;min-width:0;font-size:12px}
|
|
354
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .login__languages [aria-pressed="true"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
|
|
355
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .reset_demo{flex-wrap:wrap;margin-top:12px}
|
|
356
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .reset_demo .form__item__data__import__input{flex:1 1 140px}
|
|
357
|
+
[data-ar-design="remix"] [data-ar="auth-panel"] .login__test_note{flex-basis:100%;font-size:11px;line-height:1.5;margin:0}
|
|
358
|
+
[data-ar-design="remix"] .join-introduction{width:100%;max-width:520px;margin:24px auto}
|
|
359
|
+
[data-ar-design="remix"] .login_wrapper .login__version{position:relative;align-self:flex-start;margin:24px 0 0;font-size:10px;line-height:1.5}
|
|
360
|
+
@media(min-width:768px){[data-ar-design="remix"] .login_wrapper .login__version{position:absolute;left:16px;bottom:12px}}
|
|
361
|
+
/* Login app prompt: keep the icon, wrapped name and actions inside narrow viewports. */
|
|
362
|
+
[data-ar-design="remix"] .app_popup[data-v-uibfa8b11a3438]{height:auto;min-height:50px}
|
|
363
|
+
[data-ar-design="remix"] .app_popup_content[data-v-uibfa8b11a3438]{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px}
|
|
364
|
+
[data-ar-design="remix"] .app_popup_content .mark_wrap[data-v-uibfa8b11a3438]{flex:none;width:28px;margin:0;padding:0}
|
|
365
|
+
[data-ar-design="remix"] .app_popup_text[data-v-uibfa8b11a3438]{flex:1;min-width:0;padding:0}
|
|
366
|
+
[data-ar-design="remix"] .app_popup_text :is(.app_name,.app_caution)[data-v-uibfa8b11a3438]{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
|
|
367
|
+
[data-ar-design="remix"] .app_button_wrap[data-v-uibfa8b11a3438]{display:flex;align-items:center;gap:4px;flex:none}
|
|
368
|
+
[data-ar-design="remix"] .close_app_button[data-v-uibfa8b11a3438]{display:inline-flex;width:30px;height:30px;margin:0;padding:0;line-height:normal}
|
|
369
|
+
|
|
370
|
+
/* Punch review uses the common stack spacing above its scrollable table. */
|
|
371
|
+
[data-ar-design="remix"] .attendance_table_wrap[data-v-uia097494f994a] { margin-top:0;padding-top:0; }
|
|
372
|
+
[data-ar-design="remix"] .attendance_table_wrap th.branch_id[data-v-uia097494f994a] { min-width:170px; }
|
|
373
|
+
[data-ar-design="remix"] .attendance_table_wrap th.shift.separated[data-v-uia097494f994a] { width:240px;min-width:240px; }
|
|
374
|
+
[data-ar-design="remix"] .attendance_table_wrap th.punch.separated[data-v-uia097494f994a] { width:264px;min-width:264px; }
|
|
375
|
+
|
|
376
|
+
/* Keep this in the utility's layer: important declarations reverse layer order. */
|
|
377
|
+
@layer arrow-product-layout {
|
|
378
|
+
[data-ar-design="remix"] table[data-ui-part="table"] th.n2br {
|
|
379
|
+
white-space: pre !important;
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* Opt-in cards preserve field labels and usable inline editors on narrow tables. */
|
|
384
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"]{container:ar-product-responsive-table / inline-size}
|
|
385
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] :is(th,td).name{width:144px;min-width:144px}
|
|
386
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] :is(th,td).is_selection{width:56px;min-width:56px}
|
|
387
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] :is(th,td).init_type{width:200px;min-width:200px}
|
|
388
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.name [data-ar="text-input"]{width:100%;min-width:0}
|
|
389
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.name>:is(.no_drag,.is_drag){max-width:120px}
|
|
390
|
+
@container ar-product-responsive-table (max-width:767px){
|
|
391
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]{display:block;width:100%;min-width:0;table-layout:auto;border:0;background:transparent}
|
|
392
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>thead{display:block;margin-bottom:8px}
|
|
393
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>thead>tr>th{display:none}
|
|
394
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>thead>tr>th:has([data-ar="info"]){display:flex;align-items:center;gap:6px;width:auto;min-width:0;padding:4px 8px;border:0;border-radius:6px;font-size:11px}
|
|
395
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody.smooth-dnd-container{display:grid!important;gap:10px;width:100%;min-width:0}
|
|
396
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--ar-color-border);border-radius:12px;background:var(--ar-color-surface);overflow:hidden}
|
|
397
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td:is([data-label],.button,[colspan]){display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:auto;min-width:0;max-width:none;position:static;padding:8px 12px;border:0;white-space:normal;text-align:left;background:transparent}
|
|
398
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td[data-label]::before{content:attr(data-label);flex:1;min-width:0;color:var(--ar-color-text-secondary);font-size:11px;line-height:1.5}
|
|
399
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td:is(.name,.paymentgroup_id,.init_type,.button,[colspan]:not([colspan="1"])){grid-column:1/-1}
|
|
400
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td:is(.name,.paymentgroup_id,.init_type){flex-direction:column;align-items:stretch;gap:4px}
|
|
401
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td.name{background:var(--ar-accent-subtle);font-weight:600}
|
|
402
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td.blank{display:none}
|
|
403
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"]>tbody>tr>td.button{justify-content:flex-end;border-top:1px solid var(--ar-color-border-subtle);background:var(--ar-color-surface)}
|
|
404
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.button [data-ar="button"][data-icon-only]{min-width:40px;min-height:40px}
|
|
405
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td:is(.name,.paymentgroup_id,.init_type)>:is(.no_drag,.is_drag){display:block;width:100%;min-width:0;max-width:100%}
|
|
406
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td .drag_icon_wrap{position:static;float:left;margin-right:8px}
|
|
407
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td [data-ar="text-input"]{max-width:100%}
|
|
408
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td:not(.name,.paymentgroup_id,.init_type,.button)>.no_drag{width:auto;flex:none}
|
|
409
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.button>.no_drag{display:flex;justify-content:flex-end;width:100%}
|
|
410
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.name:has(.drag_icon_wrap){position:relative;padding-left:32px}
|
|
411
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.name>.drag_icon_wrap{position:absolute;left:10px;top:12px;margin:0}
|
|
412
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td:is(.name,.paymentgroup_id) :is([data-ar="text-input"],[data-ar="select"],.paymentgroup_selector_component){width:100%;max-width:100%}
|
|
413
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.init_type .row{flex-wrap:wrap;max-width:100%}
|
|
414
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] td.init_type .row:first-child>[data-ar="select"]{width:100%}
|
|
415
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"] table[data-ui-part="table"] tbody>tr:hover>td:not(.name){background:transparent}
|
|
416
|
+
@layer arrow-product-layout {
|
|
417
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"].sortable_table_component table[data-ui-part="table"]>thead>tr{display:flex!important;flex-wrap:wrap;gap:6px}
|
|
418
|
+
[data-ar-design="remix"] [data-ui-responsive="cards"].sortable_table_component table[data-ui-part="table"]>tbody>tr{display:grid!important}
|
|
419
|
+
}
|
|
420
|
+
}
|