@simplysm/angular 14.2.4 → 14.2.5
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/controls/button/sd-button.js +2 -2
- package/dist/controls/list/sd-list-item.d.ts +6 -4
- package/dist/controls/list/sd-list-item.d.ts.map +1 -1
- package/dist/controls/list/sd-list-item.js +13 -5
- package/dist/data/kanban/sd-kanban-lane.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-menu.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-menu.js +6 -5
- package/package.json +35 -35
- package/scss/themes/_variables-ide-dark.scss +132 -130
- package/src/controls/button/sd-button.ts +1 -1
- package/src/controls/list/sd-list-item.ts +20 -6
- package/src/data/kanban/sd-kanban-lane.ts +1 -1
- package/src/layout/sidebar/sd-sidebar-menu.ts +1 -0
- package/styles.css +98 -96
|
@@ -28,7 +28,7 @@ export class SdButton {
|
|
|
28
28
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
29
29
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
30
30
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
31
|
-
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-content);\n border-color: var(--sd-bd-
|
|
31
|
+
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-content);\n border-color: var(--sd-bd-strong);\n border-radius: var(--sd-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--sd-animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-button > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background-color: var(--sd-bg-gray-solid);\n border-color: var(--sd-bd-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background-color: var(--sd-bg-gray-solid-hover);\n border-color: var(--sd-bd-gray-solid-hover);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background-color: var(--sd-bg-blue-gray-solid);\n border-color: var(--sd-bd-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background-color: var(--sd-bg-blue-gray-solid-hover);\n border-color: var(--sd-bd-blue-gray-solid-hover);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background-color: var(--sd-bg-primary-solid);\n border-color: var(--sd-bd-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background-color: var(--sd-bg-primary-solid-hover);\n border-color: var(--sd-bd-primary-solid-hover);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background-color: var(--sd-bg-info-solid);\n border-color: var(--sd-bd-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background-color: var(--sd-bg-info-solid-hover);\n border-color: var(--sd-bd-info-solid-hover);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background-color: var(--sd-bg-success-solid);\n border-color: var(--sd-bd-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background-color: var(--sd-bg-success-solid-hover);\n border-color: var(--sd-bd-success-solid-hover);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background-color: var(--sd-bg-warning-solid);\n border-color: var(--sd-bd-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background-color: var(--sd-bg-warning-solid-hover);\n border-color: var(--sd-bd-warning-solid-hover);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background-color: var(--sd-bg-danger-solid);\n border-color: var(--sd-bd-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background-color: var(--sd-bg-danger-solid-hover);\n border-color: var(--sd-bd-danger-solid-hover);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-gray);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-gray-hover);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-blue-gray);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-blue-gray-hover);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-info);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-info-hover);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-success);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-success-hover);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-warning);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-warning-hover);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-danger);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-danger-hover);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-on-inverse);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--sd-tx-on-inverse-muted);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-on-inverse-disabled);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--sd-gap-xxs) var(--sd-gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
32
32
|
}
|
|
33
33
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
34
34
|
type: Component,
|
|
@@ -49,6 +49,6 @@ export class SdButton {
|
|
|
49
49
|
"[attr.data-sd-size]": "size()",
|
|
50
50
|
"[attr.data-sd-inset]": "inset()",
|
|
51
51
|
"[attr.data-sd-disabled]": "disabled()",
|
|
52
|
-
}, styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-content);\n border-color: var(--sd-bd-
|
|
52
|
+
}, styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-content);\n border-color: var(--sd-bd-strong);\n border-radius: var(--sd-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--sd-animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-button > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background-color: var(--sd-bg-gray-solid);\n border-color: var(--sd-bd-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background-color: var(--sd-bg-gray-solid-hover);\n border-color: var(--sd-bd-gray-solid-hover);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background-color: var(--sd-bg-blue-gray-solid);\n border-color: var(--sd-bd-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background-color: var(--sd-bg-blue-gray-solid-hover);\n border-color: var(--sd-bd-blue-gray-solid-hover);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background-color: var(--sd-bg-primary-solid);\n border-color: var(--sd-bd-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background-color: var(--sd-bg-primary-solid-hover);\n border-color: var(--sd-bd-primary-solid-hover);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background-color: var(--sd-bg-info-solid);\n border-color: var(--sd-bd-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background-color: var(--sd-bg-info-solid-hover);\n border-color: var(--sd-bd-info-solid-hover);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background-color: var(--sd-bg-success-solid);\n border-color: var(--sd-bd-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background-color: var(--sd-bg-success-solid-hover);\n border-color: var(--sd-bd-success-solid-hover);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background-color: var(--sd-bg-warning-solid);\n border-color: var(--sd-bd-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background-color: var(--sd-bg-warning-solid-hover);\n border-color: var(--sd-bd-warning-solid-hover);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background-color: var(--sd-bg-danger-solid);\n border-color: var(--sd-bd-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background-color: var(--sd-bg-danger-solid-hover);\n border-color: var(--sd-bd-danger-solid-hover);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-gray);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-gray-hover);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-blue-gray);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-blue-gray-hover);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-info);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-info-hover);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-success);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-success-hover);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-warning);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-warning-hover);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-danger);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-danger-hover);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-on-inverse);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--sd-tx-on-inverse-muted);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-on-inverse-disabled);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--sd-gap-xxs) var(--sd-gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
53
53
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }] }); })();
|
|
54
54
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 183 }); })();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TemplateRef } from "@angular/core";
|
|
1
|
+
import { type Signal, TemplateRef } from "@angular/core";
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class SdListItem {
|
|
4
4
|
layout: import("@angular/core").InputSignal<"flat" | "accordion">;
|
|
@@ -8,10 +8,12 @@ export declare class SdListItem {
|
|
|
8
8
|
readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
9
9
|
contentStyle: import("@angular/core").InputSignal<string | undefined>;
|
|
10
10
|
contentClass: import("@angular/core").InputSignal<string | undefined>;
|
|
11
|
-
toolTpl:
|
|
11
|
+
toolTpl: Signal<TemplateRef<void> | undefined>;
|
|
12
|
+
private readonly _parentItem;
|
|
13
|
+
readonly depth: Signal<number>;
|
|
12
14
|
private readonly _childLists;
|
|
13
|
-
hasChildren:
|
|
14
|
-
childrenOpen:
|
|
15
|
+
hasChildren: Signal<boolean>;
|
|
16
|
+
childrenOpen: Signal<boolean>;
|
|
15
17
|
onContentClick(): void;
|
|
16
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdListItem, never>;
|
|
17
19
|
static ɵcmp: i0.ɵɵComponentDeclaration<SdListItem, "sd-list-item", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectedIcon": { "alias": "selectedIcon"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "contentStyle": { "alias": "contentStyle"; "required": false; "isSignal": true; }; "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["toolTpl", "_childLists"], ["*", "sd-list"], true, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,MAAM,EACX,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAyJa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,wCAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAGtF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAI5B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,kBAAiD;IAE5D,YAAY,kBAET;IAEH,cAAc,IAAI,IAAI;yCA5BX,UAAU;2CAAV,UAAU;CAkCtB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
|
|
1
|
+
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, inject, input, model, TemplateRef, ViewEncapsulation, } from "@angular/core";
|
|
2
2
|
import { NgTemplateOutlet } from "@angular/common";
|
|
3
3
|
import { NgIcon } from "@ng-icons/core";
|
|
4
4
|
import { SdCollapse } from "../collapse/sd-collapse";
|
|
@@ -61,6 +61,12 @@ export class SdListItem {
|
|
|
61
61
|
...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
|
|
62
62
|
toolTpl = contentChild("toolTpl", /* @ts-ignore */
|
|
63
63
|
...(ngDevMode ? [{ debugName: "toolTpl" }] : /* istanbul ignore next */ []));
|
|
64
|
+
_parentItem = inject(SdListItem, { optional: true, skipSelf: true });
|
|
65
|
+
// accordion 조상 수 = 들여쓰기 단계. flat 조상은 단계에 포함하지 않음.
|
|
66
|
+
depth = computed(() => this._parentItem == null
|
|
67
|
+
? 0
|
|
68
|
+
: this._parentItem.depth() + (this._parentItem.layout() === "accordion" ? 1 : 0), /* @ts-ignore */
|
|
69
|
+
...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
|
|
64
70
|
_childLists = contentChildren(SdList, /* @ts-ignore */
|
|
65
71
|
...(ngDevMode ? [{ debugName: "_childLists" }] : /* istanbul ignore next */ []));
|
|
66
72
|
hasChildren = computed(() => this._childLists().length > 0, /* @ts-ignore */
|
|
@@ -81,8 +87,9 @@ export class SdListItem {
|
|
|
81
87
|
i0.ɵɵcontentQuerySignal(dirIndex, ctx.toolTpl, _c0, 5)(dirIndex, ctx._childLists, SdList, 4);
|
|
82
88
|
} if (rf & 2) {
|
|
83
89
|
i0.ɵɵqueryAdvance(2);
|
|
84
|
-
} }, hostVars:
|
|
90
|
+
} }, hostVars: 8, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
|
|
85
91
|
i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-open", ctx.open())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren())("data-sd-has-selected-icon", ctx.selectedIcon() != null);
|
|
92
|
+
i0.ɵɵstyleProp("--sd-list-item-depth", ctx.depth());
|
|
86
93
|
} }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-primary", "tx-faint", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
|
|
87
94
|
i0.ɵɵprojectionDef(_c1);
|
|
88
95
|
i0.ɵɵelementStart(0, "div", 0);
|
|
@@ -107,7 +114,7 @@ export class SdListItem {
|
|
|
107
114
|
i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
|
|
108
115
|
i0.ɵɵadvance();
|
|
109
116
|
i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
|
|
110
|
-
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n gap: var(--sd-gap-xs);\n border-radius: var(--sd-radius-default);\n transition: background var(--sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--sd-animation-duration) ease-out;\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background-color: var(--sd-bg-state-selected);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left:
|
|
117
|
+
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n gap: var(--sd-gap-xs);\n border-radius: var(--sd-radius-default);\n transition: background var(--sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--sd-animation-duration) ease-out;\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background-color: var(--sd-bg-state-selected);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: calc(0.65em + 1.3em * var(--sd-list-item-depth, 0));\n width: 0;\n border-left: 1px solid var(--sd-bd-soft);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--sd-animation-duration) ease-out;\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n padding-left: calc(1.3em * var(--sd-list-item-depth, 1));\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background-color: transparent;\n cursor: default;\n font-size: var(--sd-font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background-color: transparent;\n}"], encapsulation: 2 });
|
|
111
118
|
}
|
|
112
119
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
|
|
113
120
|
type: Component,
|
|
@@ -157,6 +164,7 @@ export class SdListItem {
|
|
|
157
164
|
"[attr.data-sd-readonly]": "readonly()",
|
|
158
165
|
"[attr.data-sd-has-children]": "hasChildren()",
|
|
159
166
|
"[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
|
|
160
|
-
|
|
167
|
+
"[style.--sd-list-item-depth]": "depth()",
|
|
168
|
+
}, styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n gap: var(--sd-gap-xs);\n border-radius: var(--sd-radius-default);\n transition: background var(--sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--sd-animation-duration) ease-out;\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background-color: var(--sd-bg-state-selected);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: calc(0.65em + 1.3em * var(--sd-list-item-depth, 0));\n width: 0;\n border-left: 1px solid var(--sd-bd-soft);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--sd-animation-duration) ease-out;\n background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n padding-left: calc(1.3em * var(--sd-list-item-depth, 1));\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background-color: transparent;\n cursor: default;\n font-size: var(--sd-font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background-color: transparent;\n}"] }]
|
|
161
169
|
}], null, { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
|
|
162
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber:
|
|
170
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 175 }); })();
|
|
@@ -156,7 +156,7 @@ export class SdKanbanLane {
|
|
|
156
156
|
i0.ɵɵlistener("dragover", function SdKanbanLane_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function SdKanbanLane_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function SdKanbanLane_drop_HostBindingHandler($event) { return ctx.onDragDrop($event); });
|
|
157
157
|
} if (rf & 2) {
|
|
158
158
|
i0.ɵɵattribute("data-sd-drag-over", ctx.dragOvered());
|
|
159
|
-
} }, inputs: { busy: [1, "busy"], useCollapse: [1, "useCollapse"], collapse: [1, "collapse"], value: [1, "value"] }, outputs: { collapse: "collapseChange" }, ngContentSelectors: _c2, decls: 6, vars: 9, consts: [[1, "flex-fill"], [2, "min-height", "3em", 3, "busy", "type"], [1, "tx-center", "mb-xl"], [1, "_drop-position"], [3, "theme"], [1, "pl-default", 2, "display", "inline-block"], [3, "click", "theme"], [3, "svg"], [3, "ngTemplateOutlet"], [2, "float", "left", 3, "inline", "theme", "value"], [2, "float", "left", 3, "valueChange", "inline", "theme", "value"]], template: function SdKanbanLane_Template(rf, ctx) { if (rf & 1) {
|
|
159
|
+
} }, inputs: { busy: [1, "busy"], useCollapse: [1, "useCollapse"], collapse: [1, "collapse"], value: [1, "value"] }, outputs: { collapse: "collapseChange" }, ngContentSelectors: _c2, decls: 6, vars: 9, consts: [[1, "flex-fill"], [2, "min-height", "3em", 3, "busy", "type"], [1, "tx-center", "mb-xl", 2, "display", "flow-root"], [1, "_drop-position"], [3, "theme"], [1, "pl-default", 2, "display", "inline-block"], [3, "click", "theme"], [3, "svg"], [3, "ngTemplateOutlet"], [2, "float", "left", 3, "inline", "theme", "value"], [2, "float", "left", 3, "valueChange", "inline", "theme", "value"]], template: function SdKanbanLane_Template(rf, ctx) { if (rf & 1) {
|
|
160
160
|
i0.ɵɵprojectionDef();
|
|
161
161
|
i0.ɵɵconditionalCreate(0, SdKanbanLane_Conditional_0_Template, 3, 2, "div");
|
|
162
162
|
i0.ɵɵelementStart(1, "div", 0)(2, "sd-busy-container", 1);
|
|
@@ -204,7 +204,7 @@ export class SdKanbanLane {
|
|
|
204
204
|
<div class="flex-fill">
|
|
205
205
|
<sd-busy-container [busy]="busy()" style="min-height: 3em" [type]="'bar'">
|
|
206
206
|
@if (selectableKanbanLength() > 0 || toolTplRef()) {
|
|
207
|
-
<div class="tx-center mb-xl">
|
|
207
|
+
<div class="tx-center mb-xl" style="display: flow-root">
|
|
208
208
|
@if (selectableKanbanLength() > 0) {
|
|
209
209
|
<sd-checkbox
|
|
210
210
|
style="float: left"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,
|
|
1
|
+
{"version":3,"file":"sd-sidebar-menu.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,MAAM,EAGZ,MAAM,+BAA+B,CAAC;;AAQvC,qBAkEa,aAAa;IACxB,KAAK,gDAAuB;IAC5B,MAAM,+FAAwD;IAC9D,mBAAmB,8CAAgB,MAAM,KAAK,OAAO,eAAI;IAEzD,YAAY,yCAA8B;IAE1C,UAAU,8EAAsF;IAGhG,eAAe,0CAA8D;IAE7E,uBAAuB,CACrB,IAAI,EAAE,MAAM,GACX;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS;IAIhF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIxC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM/B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAG;QACpC,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;yCA/BS,aAAa;2CAAb,aAAa;CAgCzB"}
|
|
@@ -21,7 +21,7 @@ function SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template(rf, ctx) { if
|
|
|
21
21
|
function SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template(rf, ctx) { }
|
|
22
22
|
function SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
23
23
|
i0.ɵɵelementStart(0, "sd-list", 8);
|
|
24
|
-
i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template",
|
|
24
|
+
i0.ɵɵtemplate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 9);
|
|
25
25
|
i0.ɵɵelementEnd();
|
|
26
26
|
} if (rf & 2) {
|
|
27
27
|
const menu_r2 = i0.ɵɵnextContext().$implicit;
|
|
@@ -30,7 +30,7 @@ function SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template(rf, ctx) { if
|
|
|
30
30
|
const itemTpl_r5 = i0.ɵɵreference(6);
|
|
31
31
|
i0.ɵɵproperty("inset", true);
|
|
32
32
|
i0.ɵɵadvance();
|
|
33
|
-
i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction2(
|
|
33
|
+
i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletInjector", "outlet")("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c1, menu_r2.children, depth_r4 + 1));
|
|
34
34
|
} }
|
|
35
35
|
function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
36
36
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
@@ -38,7 +38,7 @@ function SdSidebarMenu_ng_template_5_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
38
38
|
i0.ɵɵlistener("click", function SdSidebarMenu_ng_template_5_For_1_Template_sd_list_item_click_0_listener() { const menu_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onMenuClick(menu_r2)); });
|
|
39
39
|
i0.ɵɵconditionalCreate(1, SdSidebarMenu_ng_template_5_For_1_Conditional_1_Template, 1, 1, "ng-icon", 7);
|
|
40
40
|
i0.ɵɵtext(2);
|
|
41
|
-
i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2,
|
|
41
|
+
i0.ɵɵconditionalCreate(3, SdSidebarMenu_ng_template_5_For_1_Conditional_3_Template, 2, 7, "sd-list", 8);
|
|
42
42
|
i0.ɵɵelementEnd();
|
|
43
43
|
} if (rf & 2) {
|
|
44
44
|
const menu_r2 = ctx.$implicit;
|
|
@@ -86,7 +86,7 @@ export class SdSidebarMenu {
|
|
|
86
86
|
static ɵfac = function SdSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarMenu)(); };
|
|
87
87
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarMenu, selectors: [["sd-sidebar-menu"]], hostAttrs: [1, "flex-column", "fill"], hostVars: 1, hostBindings: function SdSidebarMenu_HostBindings(rf, ctx) { if (rf & 2) {
|
|
88
88
|
i0.ɵɵattribute("data-sd-root-layout", ctx.rootLayout());
|
|
89
|
-
} }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout", "open"], [3, "click", "sdRouterLink", "selected", "layout", "open"], [3, "svg"], [3, "inset"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
|
|
89
|
+
} }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 7, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "sdRouterLink", "selected", "layout", "open"], [3, "click", "sdRouterLink", "selected", "layout", "open"], [3, "svg"], [3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletInjector", "ngTemplateOutletContext"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
|
|
90
90
|
i0.ɵɵelementStart(0, "div", 1)(1, "b");
|
|
91
91
|
i0.ɵɵtext(2, "MENU");
|
|
92
92
|
i0.ɵɵelementEnd()();
|
|
@@ -136,6 +136,7 @@ export class SdSidebarMenu {
|
|
|
136
136
|
<sd-list [inset]="true">
|
|
137
137
|
<ng-template
|
|
138
138
|
[ngTemplateOutlet]="itemTpl"
|
|
139
|
+
[ngTemplateOutletInjector]="'outlet'"
|
|
139
140
|
[ngTemplateOutletContext]="{
|
|
140
141
|
menus: menu.children,
|
|
141
142
|
depth: depth + 1,
|
|
@@ -148,4 +149,4 @@ export class SdSidebarMenu {
|
|
|
148
149
|
</ng-template>
|
|
149
150
|
`, styles: ["sd-sidebar-menu[data-sd-root-layout=flat] > sd-list[data-sd-inset=true] > sd-list-item > sd-collapse > ._content > ._children > sd-list {\n background-color: transparent;\n}"] }]
|
|
150
151
|
}], null, { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], getMenuIsSelectedFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getMenuIsSelectedFn", required: false }] }] }); })();
|
|
151
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber:
|
|
152
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarMenu, { className: "SdSidebarMenu", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-menu.ts", lineNumber: 87 }); })();
|
package/package.json
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/angular",
|
|
3
|
-
"version": "14.2.
|
|
3
|
+
"version": "14.2.5",
|
|
4
4
|
"description": "심플리즘 패키지 - Angular",
|
|
5
|
-
"author": "심플리즘",
|
|
6
5
|
"license": "Apache-2.0",
|
|
6
|
+
"author": "심플리즘",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
9
|
"url": "https://github.com/kslhunter/simplysm.git",
|
|
10
10
|
"directory": "packages/angular"
|
|
11
11
|
},
|
|
12
|
-
"type": "module",
|
|
13
|
-
"main": "./dist/index.js",
|
|
14
|
-
"types": "./dist/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
"*": {
|
|
17
|
-
"client": [
|
|
18
|
-
"./src/client.d.ts"
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
12
|
"style": "./styles.css",
|
|
23
13
|
"files": [
|
|
24
14
|
"dist",
|
|
@@ -26,45 +16,55 @@
|
|
|
26
16
|
"src",
|
|
27
17
|
"scss"
|
|
28
18
|
],
|
|
19
|
+
"type": "module",
|
|
29
20
|
"sideEffects": [
|
|
30
21
|
"./src/index.ts",
|
|
31
22
|
"./dist/index.js",
|
|
32
23
|
"./styles.css"
|
|
33
24
|
],
|
|
25
|
+
"main": "./dist/index.js",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"typesVersions": {
|
|
28
|
+
"*": {
|
|
29
|
+
"client": [
|
|
30
|
+
"./src/client.d.ts"
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@angular/common": "^22.0.
|
|
36
|
-
"@angular/core": "^22.0.
|
|
37
|
-
"@angular/platform-browser": "^22.0.
|
|
38
|
-
"@angular/router": "^22.0.
|
|
39
|
-
"@angular/service-worker": "^22.0.
|
|
35
|
+
"@angular/common": "^22.0.8",
|
|
36
|
+
"@angular/core": "^22.0.8",
|
|
37
|
+
"@angular/platform-browser": "^22.0.8",
|
|
38
|
+
"@angular/router": "^22.0.8",
|
|
39
|
+
"@angular/service-worker": "^22.0.8",
|
|
40
40
|
"@ng-icons/core": "^34.0.0",
|
|
41
41
|
"@ng-icons/tabler-icons": "^34.0.0",
|
|
42
|
-
"@tiptap/core": "^3.
|
|
43
|
-
"@tiptap/extension-color": "^3.
|
|
44
|
-
"@tiptap/extension-document": "^3.
|
|
45
|
-
"@tiptap/extension-highlight": "^3.
|
|
46
|
-
"@tiptap/extension-image": "^3.
|
|
47
|
-
"@tiptap/extension-paragraph": "^3.
|
|
48
|
-
"@tiptap/extension-placeholder": "^3.
|
|
49
|
-
"@tiptap/extension-text": "^3.
|
|
50
|
-
"@tiptap/extension-text-align": "^3.
|
|
51
|
-
"@tiptap/extension-text-style": "^3.
|
|
52
|
-
"@tiptap/extension-underline": "^3.
|
|
53
|
-
"@tiptap/markdown": "^3.
|
|
54
|
-
"@tiptap/starter-kit": "^3.
|
|
42
|
+
"@tiptap/core": "^3.29.0",
|
|
43
|
+
"@tiptap/extension-color": "^3.29.0",
|
|
44
|
+
"@tiptap/extension-document": "^3.29.0",
|
|
45
|
+
"@tiptap/extension-highlight": "^3.29.0",
|
|
46
|
+
"@tiptap/extension-image": "^3.29.0",
|
|
47
|
+
"@tiptap/extension-paragraph": "^3.29.0",
|
|
48
|
+
"@tiptap/extension-placeholder": "^3.29.0",
|
|
49
|
+
"@tiptap/extension-text": "^3.29.0",
|
|
50
|
+
"@tiptap/extension-text-align": "^3.29.0",
|
|
51
|
+
"@tiptap/extension-text-style": "^3.29.0",
|
|
52
|
+
"@tiptap/extension-underline": "^3.29.0",
|
|
53
|
+
"@tiptap/markdown": "^3.29.0",
|
|
54
|
+
"@tiptap/starter-kit": "^3.29.0",
|
|
55
55
|
"bwip-js": "^4.11.2",
|
|
56
56
|
"echarts": "^6.1.0",
|
|
57
57
|
"html-to-image": "^1.11.13",
|
|
58
58
|
"jspdf": "^4.2.1",
|
|
59
59
|
"rxjs": "^7.8.2",
|
|
60
60
|
"tabbable": "^6.5.0",
|
|
61
|
-
"@simplysm/core-
|
|
62
|
-
"@simplysm/
|
|
63
|
-
"@simplysm/service-common": "14.2.
|
|
64
|
-
"@simplysm/
|
|
61
|
+
"@simplysm/core-common": "14.2.5",
|
|
62
|
+
"@simplysm/service-client": "14.2.5",
|
|
63
|
+
"@simplysm/service-common": "14.2.5",
|
|
64
|
+
"@simplysm/core-browser": "14.2.5"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
-
"@angular/compiler": "^22.0.
|
|
67
|
+
"@angular/compiler": "^22.0.8"
|
|
68
68
|
},
|
|
69
69
|
"scripts": {}
|
|
70
70
|
}
|
|
@@ -1,205 +1,207 @@
|
|
|
1
|
-
// IDE 다크 테마 — VSCode "Dark
|
|
2
|
-
// 색 원천: 리터럴 rgb
|
|
3
|
-
//
|
|
4
|
-
// surface 3단: content #121314(editor) < canvas #191A1B(chrome/input) < elevated/overlay #202122(widget/menu).
|
|
1
|
+
// IDE 다크 테마 — VSCode "Dark+"(theme-defaults dark_plus/dark_vs + workbench 기본값)를 --sd-* 역할 토큰 값 맵으로 구성.
|
|
2
|
+
// 색 원천: 리터럴 rgb. Dark+ 는 surface 3값(editor #1E1E1E < sideBar/widget #252526 < input/titleBar #3C3C3C) +
|
|
3
|
+
// 무채 상태(hover/선택은 흰알파 오버레이로 Dark+ 명도 재현) + 파랑 액센트(button #0E639C, focus #007FD4)가 핵심 의도.
|
|
5
4
|
// 치수(gap, radius, sheet pv/ph, topbar), 폰트(Sarasa Fixed K), 그림자(off)는 IDE 컨셉 — 색 외 항목 불변.
|
|
6
5
|
$dark: (
|
|
7
6
|
bg: (
|
|
8
|
-
// 계층: content #
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
sheet: rgb(18, 19, 20),
|
|
7
|
+
// 계층: content #1E1E1E(editor — 제일 어두움) < canvas/elevated/overlay #252526(sideBar/widget/menu)
|
|
8
|
+
canvas: rgb(37, 37, 38),
|
|
9
|
+
// 콘텐츠 면 = editor.background #1E1E1E (메인/에디터/시트셀/리스트)
|
|
10
|
+
content: rgb(30, 30, 30),
|
|
11
|
+
elevated: rgb(37, 37, 38),
|
|
12
|
+
overlay: rgb(37, 37, 38),
|
|
13
|
+
sheet: rgb(30, 30, 30),
|
|
16
14
|
inverse: white,
|
|
17
|
-
// 필드 배경 — input.background #
|
|
18
|
-
field: rgb(
|
|
19
|
-
// 트랙 —
|
|
20
|
-
track: rgb(
|
|
21
|
-
// 노브 —
|
|
22
|
-
knob: rgb(
|
|
23
|
-
// 체크박스 박스 면 = checkbox.background #
|
|
24
|
-
checkbox: rgb(
|
|
25
|
-
// 시맨틱 solid
|
|
15
|
+
// 필드 배경 — input.background #3C3C3C
|
|
16
|
+
field: rgb(60, 60, 60),
|
|
17
|
+
// 트랙 — button.secondaryBackground #3A3D41
|
|
18
|
+
track: rgb(58, 61, 65),
|
|
19
|
+
// 노브 — foreground #CCCCCC 와 통일한 밝은 손잡이(트랙, success-solid 위 대비)
|
|
20
|
+
knob: rgb(204, 204, 204),
|
|
21
|
+
// 체크박스 박스 면 = checkbox.background #3C3C3C (input 과 동일 면)
|
|
22
|
+
checkbox: rgb(60, 60, 60),
|
|
23
|
+
// 시맨틱 solid, hover 는 +10% 밝힘 파생
|
|
24
|
+
// gray solid = badge.background #4D4D4D
|
|
26
25
|
"gray": (
|
|
27
|
-
solid: rgb(
|
|
28
|
-
solid-hover: rgb(
|
|
29
|
-
subtle: rgb(
|
|
30
|
-
subtle-hover: rgb(
|
|
26
|
+
solid: rgb(77, 77, 77),
|
|
27
|
+
solid-hover: rgb(95, 95, 95),
|
|
28
|
+
subtle: rgb(42, 45, 46),
|
|
29
|
+
subtle-hover: rgb(51, 55, 56),
|
|
31
30
|
),
|
|
31
|
+
// blue-gray solid = button.secondaryBackground #3A3D41
|
|
32
32
|
blue-gray: (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
// 액센트 =
|
|
33
|
+
solid: rgb(58, 61, 65),
|
|
34
|
+
solid-hover: rgb(69, 73, 78),
|
|
35
|
+
subtle: rgb(42, 45, 46),
|
|
36
|
+
subtle-hover: rgb(51, 55, 56),
|
|
37
|
+
),
|
|
38
|
+
// 액센트 = button.background #0E639C / hover #1177BB
|
|
39
39
|
primary: (
|
|
40
|
-
solid: rgb(
|
|
41
|
-
solid-hover: rgb(
|
|
42
|
-
subtle: rgb(
|
|
43
|
-
subtle-hover: rgb(
|
|
40
|
+
solid: rgb(14, 99, 156),
|
|
41
|
+
solid-hover: rgb(17, 119, 187),
|
|
42
|
+
subtle: rgb(6, 47, 74),
|
|
43
|
+
subtle-hover: rgb(9, 60, 94),
|
|
44
44
|
),
|
|
45
|
+
// info = statusBar/inputValidation.infoBorder #007ACC, subtle = infoBackground #063B49
|
|
45
46
|
info: (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
// success solid =
|
|
47
|
+
solid: rgb(0, 122, 204),
|
|
48
|
+
solid-hover: rgb(14, 138, 224),
|
|
49
|
+
subtle: rgb(6, 59, 73),
|
|
50
|
+
subtle-hover: rgb(9, 74, 92),
|
|
51
|
+
),
|
|
52
|
+
// success solid = statusBarItem.remoteBackground #16825D (Dark+ 실존 초록 채움), tx 는 charts.green #89D185
|
|
52
53
|
success: (
|
|
53
|
-
solid: rgb(
|
|
54
|
-
solid-hover: rgb(
|
|
55
|
-
subtle: rgb(
|
|
56
|
-
subtle-hover: rgb(22,
|
|
54
|
+
solid: rgb(22, 130, 93),
|
|
55
|
+
solid-hover: rgb(26, 145, 105),
|
|
56
|
+
subtle: rgb(17, 59, 43),
|
|
57
|
+
subtle-hover: rgb(22, 74, 54),
|
|
57
58
|
),
|
|
58
|
-
// warning = inputValidation.warningBorder #B89500
|
|
59
|
+
// warning = inputValidation.warningBorder #B89500, subtle = warningBackground #352A05
|
|
59
60
|
warning: (
|
|
60
61
|
solid: rgb(184, 149, 0),
|
|
61
62
|
solid-hover: rgb(200, 163, 10),
|
|
62
|
-
subtle: rgb(
|
|
63
|
-
subtle-hover: rgb(
|
|
63
|
+
subtle: rgb(53, 42, 5),
|
|
64
|
+
subtle-hover: rgb(66, 53, 8),
|
|
64
65
|
),
|
|
65
|
-
// danger solid = inputValidation.errorBorder #BE1100, tx 는 errorForeground #
|
|
66
|
+
// danger solid = inputValidation.errorBorder #BE1100, subtle = errorBackground #5A1D1D, tx 는 errorForeground #F48771
|
|
66
67
|
danger: (
|
|
67
68
|
solid: rgb(190, 17, 0),
|
|
68
69
|
solid-hover: rgb(215, 25, 5),
|
|
69
|
-
subtle: rgb(
|
|
70
|
-
subtle-hover: rgb(
|
|
70
|
+
subtle: rgb(90, 29, 29),
|
|
71
|
+
subtle-hover: rgb(108, 36, 36),
|
|
71
72
|
),
|
|
72
|
-
// 상태
|
|
73
|
+
// 상태 = 흰알파 오버레이(글자 위에 겹침) — 합성 결과가 Dark+ 명도와 일치하도록 조정
|
|
74
|
+
// hover 0.06 ≈ list.hover #2A2D2E, selected 0.11 ≈ list.inactiveSelection #37373D (#1E1E1E 기준)
|
|
73
75
|
state: (
|
|
74
|
-
hover: rgba(255, 255, 255, 0.
|
|
75
|
-
active: rgba(255, 255, 255, 0.
|
|
76
|
-
selected: rgba(255, 255, 255, 0.
|
|
77
|
-
// 포커스 없는 선택행 solid (list.inactiveSelection #
|
|
78
|
-
selected-inactive: rgb(
|
|
76
|
+
hover: rgba(255, 255, 255, 0.06),
|
|
77
|
+
active: rgba(255, 255, 255, 0.12),
|
|
78
|
+
selected: rgba(255, 255, 255, 0.11),
|
|
79
|
+
// 포커스 없는 선택행 solid (list.inactiveSelection #37373D)
|
|
80
|
+
selected-inactive: rgb(55, 55, 61),
|
|
79
81
|
),
|
|
80
|
-
// 드롭
|
|
81
|
-
drop-target: rgba(
|
|
82
|
-
selection: rgba(
|
|
83
|
-
// 비활성 =
|
|
84
|
-
disabled: rgb(
|
|
82
|
+
// 드롭 자리(무채 오버레이), 텍스트 선택 (editor.selection #264F78 + 알파)
|
|
83
|
+
drop-target: rgba(255, 255, 255, 0.08),
|
|
84
|
+
selection: rgba(38, 79, 120, 0.87),
|
|
85
|
+
// 비활성 필드 = field 가라앉힘 파생
|
|
86
|
+
disabled: rgb(45, 45, 48),
|
|
85
87
|
busy-overlay: rgba(0, 0, 0, 0.6),
|
|
86
|
-
// 진행/로딩
|
|
87
|
-
busy-indicator: rgb(
|
|
88
|
+
// 진행/로딩 (progressBar.background #0E70C0)
|
|
89
|
+
busy-indicator: rgb(14, 112, 192)
|
|
88
90
|
),
|
|
89
|
-
// 텍스트 =
|
|
91
|
+
// 텍스트 = foreground #CCCCCC, description #CCCCCCB3(합성 #9D9D9D), disabled #757575, 선택행 #FFFFFF
|
|
90
92
|
tx: (
|
|
91
|
-
strong: rgb(
|
|
92
|
-
default: rgb(
|
|
93
|
-
muted: rgb(
|
|
94
|
-
faint: rgb(
|
|
93
|
+
strong: rgb(255, 255, 255),
|
|
94
|
+
default: rgb(204, 204, 204),
|
|
95
|
+
muted: rgb(157, 157, 157),
|
|
96
|
+
faint: rgb(117, 117, 117),
|
|
95
97
|
on-inverse: white,
|
|
96
98
|
on-inverse-muted: rgba(255, 255, 255, 0.75),
|
|
97
99
|
on-inverse-disabled: rgba(255, 255, 255, 0.55),
|
|
98
|
-
disabled: rgb(
|
|
99
|
-
// 시맨틱 텍스트 =
|
|
100
|
-
"gray": rgb(
|
|
101
|
-
gray-hover: rgb(
|
|
102
|
-
gray-subtle: rgb(
|
|
100
|
+
disabled: rgb(117, 117, 117),
|
|
101
|
+
// 시맨틱 텍스트 = textLink #3794FF, charts.green #89D185, editorWarning #CCA700, errorForeground #F48771
|
|
102
|
+
"gray": rgb(157, 157, 157),
|
|
103
|
+
gray-hover: rgb(204, 204, 204),
|
|
104
|
+
gray-subtle: rgb(204, 204, 204),
|
|
103
105
|
blue-gray: rgb(148, 163, 184),
|
|
104
106
|
blue-gray-hover: rgb(170, 183, 200),
|
|
105
107
|
blue-gray-subtle: rgb(170, 183, 200),
|
|
106
|
-
primary: rgb(
|
|
107
|
-
primary-hover: rgb(
|
|
108
|
-
primary-subtle: rgb(
|
|
109
|
-
info: rgb(
|
|
110
|
-
info-hover: rgb(
|
|
111
|
-
info-subtle: rgb(
|
|
112
|
-
success: rgb(
|
|
113
|
-
success-hover: rgb(160, 220,
|
|
114
|
-
success-subtle: rgb(
|
|
115
|
-
warning: rgb(
|
|
116
|
-
warning-hover: rgb(
|
|
117
|
-
warning-subtle: rgb(
|
|
108
|
+
primary: rgb(55, 148, 255),
|
|
109
|
+
primary-hover: rgb(85, 165, 255),
|
|
110
|
+
primary-subtle: rgb(120, 185, 255),
|
|
111
|
+
info: rgb(55, 148, 255),
|
|
112
|
+
info-hover: rgb(85, 165, 255),
|
|
113
|
+
info-subtle: rgb(120, 185, 255),
|
|
114
|
+
success: rgb(137, 209, 133),
|
|
115
|
+
success-hover: rgb(160, 220, 158),
|
|
116
|
+
success-subtle: rgb(160, 220, 158),
|
|
117
|
+
warning: rgb(204, 167, 0),
|
|
118
|
+
warning-hover: rgb(220, 183, 20),
|
|
119
|
+
warning-subtle: rgb(224, 192, 60),
|
|
118
120
|
danger: rgb(244, 135, 113),
|
|
119
121
|
danger-hover: rgb(248, 160, 140),
|
|
120
122
|
danger-subtle: rgb(248, 170, 152),
|
|
121
123
|
),
|
|
122
|
-
// 보더 =
|
|
124
|
+
// 보더 = menu.border #454545, checkbox.border #6B6B6B, input 면 #3C3C3C
|
|
123
125
|
bd: (
|
|
124
|
-
hairline: rgb(
|
|
125
|
-
soft: rgb(
|
|
126
|
-
default: rgb(
|
|
127
|
-
strong: rgb(
|
|
128
|
-
emphasis: rgb(
|
|
129
|
-
field: rgb(
|
|
130
|
-
disabled: rgb(
|
|
126
|
+
hairline: rgb(51, 51, 51),
|
|
127
|
+
soft: rgb(69, 69, 69),
|
|
128
|
+
default: rgb(69, 69, 69),
|
|
129
|
+
strong: rgb(69, 69, 69),
|
|
130
|
+
emphasis: rgb(107, 107, 107),
|
|
131
|
+
field: rgb(60, 60, 60),
|
|
132
|
+
disabled: rgb(51, 51, 51),
|
|
131
133
|
"gray": (
|
|
132
|
-
solid: rgb(
|
|
133
|
-
solid-hover: rgb(
|
|
134
|
-
subtle: rgb(
|
|
134
|
+
solid: rgb(77, 77, 77),
|
|
135
|
+
solid-hover: rgb(95, 95, 95),
|
|
136
|
+
subtle: rgb(69, 69, 69),
|
|
135
137
|
),
|
|
136
138
|
blue-gray: (
|
|
137
|
-
solid: rgb(
|
|
138
|
-
solid-hover: rgb(
|
|
139
|
-
subtle: rgb(
|
|
139
|
+
solid: rgb(58, 61, 65),
|
|
140
|
+
solid-hover: rgb(69, 73, 78),
|
|
141
|
+
subtle: rgb(69, 69, 69),
|
|
140
142
|
),
|
|
141
143
|
primary: (
|
|
142
|
-
solid: rgb(
|
|
143
|
-
solid-hover: rgb(
|
|
144
|
-
subtle: rgb(
|
|
144
|
+
solid: rgb(14, 99, 156),
|
|
145
|
+
solid-hover: rgb(17, 119, 187),
|
|
146
|
+
subtle: rgb(12, 74, 116),
|
|
145
147
|
),
|
|
146
148
|
info: (
|
|
147
|
-
solid: rgb(
|
|
148
|
-
solid-hover: rgb(
|
|
149
|
-
subtle: rgb(
|
|
149
|
+
solid: rgb(0, 122, 204),
|
|
150
|
+
solid-hover: rgb(14, 138, 224),
|
|
151
|
+
subtle: rgb(10, 82, 128),
|
|
150
152
|
),
|
|
151
153
|
success: (
|
|
152
|
-
solid: rgb(
|
|
153
|
-
solid-hover: rgb(
|
|
154
|
-
subtle: rgb(
|
|
154
|
+
solid: rgb(22, 130, 93),
|
|
155
|
+
solid-hover: rgb(26, 145, 105),
|
|
156
|
+
subtle: rgb(20, 88, 64),
|
|
155
157
|
),
|
|
156
158
|
warning: (
|
|
157
159
|
solid: rgb(184, 149, 0),
|
|
158
160
|
solid-hover: rgb(200, 163, 10),
|
|
159
|
-
subtle: rgb(
|
|
161
|
+
subtle: rgb(110, 90, 12),
|
|
160
162
|
),
|
|
161
163
|
danger: (
|
|
162
164
|
solid: rgb(190, 17, 0),
|
|
163
165
|
solid-hover: rgb(215, 25, 5),
|
|
164
|
-
subtle: rgb(
|
|
166
|
+
subtle: rgb(120, 36, 30),
|
|
165
167
|
),
|
|
166
168
|
),
|
|
167
|
-
// focusBorder #
|
|
169
|
+
// focusBorder #007FD4
|
|
168
170
|
focus-ring: (
|
|
169
|
-
color:
|
|
171
|
+
color: rgb(0, 127, 212),
|
|
170
172
|
),
|
|
171
|
-
// scrollbarSlider #
|
|
173
|
+
// scrollbarSlider #79797933 / hover #646464B3
|
|
172
174
|
scrollbar: (
|
|
173
|
-
thumb: rgba(
|
|
174
|
-
thumb-hover: rgba(
|
|
175
|
+
thumb: rgba(121, 121, 121, 0.2),
|
|
176
|
+
thumb-hover: rgba(100, 100, 100, 0.7),
|
|
175
177
|
track: rgba(255, 255, 255, 0.03),
|
|
176
178
|
),
|
|
177
|
-
// 그림자 전면 제거 —
|
|
179
|
+
// 그림자 전면 제거 — 계층을 휘도 3단으로 표현 (색 외 항목 불변)
|
|
178
180
|
shadow: (
|
|
179
181
|
size: 0,
|
|
180
182
|
blur-mult: 0,
|
|
181
183
|
),
|
|
182
|
-
// 카드 경계 =
|
|
184
|
+
// 카드 경계 = menu.border #454545. focus 는 전체 outline(focus-ring)으로 — 상단 액센트 라인 제거
|
|
183
185
|
card: (
|
|
184
|
-
bd: rgb(
|
|
186
|
+
bd: rgb(69, 69, 69),
|
|
185
187
|
bd-active: transparent,
|
|
186
188
|
shadow: none,
|
|
187
189
|
shadow-hover: none,
|
|
188
190
|
),
|
|
189
|
-
// 오버레이
|
|
191
|
+
// 오버레이 — widget/menu 배경(#252526) + 헤더는 titleBar #3C3C3C
|
|
190
192
|
modal: (
|
|
191
|
-
bd: rgb(
|
|
192
|
-
header-bg: rgb(
|
|
193
|
-
header-tx: rgb(
|
|
194
|
-
header-tx-muted: rgb(
|
|
193
|
+
bd: rgb(69, 69, 69),
|
|
194
|
+
header-bg: rgb(60, 60, 60),
|
|
195
|
+
header-tx: rgb(204, 204, 204),
|
|
196
|
+
header-tx-muted: rgb(157, 157, 157),
|
|
195
197
|
),
|
|
196
198
|
dropdown: (
|
|
197
|
-
bd: rgb(
|
|
199
|
+
bd: rgb(69, 69, 69),
|
|
198
200
|
),
|
|
199
|
-
// 권한표 그룹 행 — 원색 solid 를 무채 어두운 행으로
|
|
201
|
+
// 권한표 그룹 행 — 원색 solid 를 무채 어두운 행으로 (inactiveSelection #37373D)
|
|
200
202
|
permission-group: (
|
|
201
|
-
bg: rgb(
|
|
202
|
-
tx:
|
|
203
|
+
bg: rgb(55, 55, 61),
|
|
204
|
+
tx: rgb(204, 204, 204),
|
|
203
205
|
),
|
|
204
206
|
// VSCode 수준 소형 라운드 — 버튼, 인풋 2px, 위젯, 메뉴 4px 급(12px 기준)
|
|
205
207
|
radius: (
|
|
@@ -220,8 +222,8 @@ $dark: (
|
|
|
220
222
|
xl: 0.6667rem,
|
|
221
223
|
xxl: 1rem,
|
|
222
224
|
),
|
|
223
|
-
|
|
224
|
-
|
|
225
|
+
line-height: 1.35em,
|
|
226
|
+
line-height-strip-unit: 1.35,
|
|
225
227
|
sheet: (
|
|
226
228
|
pv: 0.0833rem,
|
|
227
229
|
ph: 0.1667rem,
|
|
@@ -38,7 +38,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
38
38
|
width: 100%;
|
|
39
39
|
|
|
40
40
|
background-color: var(--sd-bg-content);
|
|
41
|
-
border-color: var(--sd-bd-
|
|
41
|
+
border-color: var(--sd-bd-strong);
|
|
42
42
|
border-radius: var(--sd-radius-default);
|
|
43
43
|
|
|
44
44
|
font-weight: bold;
|
|
@@ -5,8 +5,10 @@ import {
|
|
|
5
5
|
computed,
|
|
6
6
|
contentChild,
|
|
7
7
|
contentChildren,
|
|
8
|
+
inject,
|
|
8
9
|
input,
|
|
9
10
|
model,
|
|
11
|
+
type Signal,
|
|
10
12
|
TemplateRef,
|
|
11
13
|
ViewEncapsulation,
|
|
12
14
|
} from "@angular/core";
|
|
@@ -108,8 +110,9 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
108
110
|
}
|
|
109
111
|
|
|
110
112
|
// 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너.
|
|
111
|
-
//
|
|
112
|
-
//
|
|
113
|
+
// 가이드선 좌측은 현재 항목의 accordion 깊이(--sd-list-item-depth)에
|
|
114
|
+
// 비례해 누적됨. 깊이는 각 항목이 DI 로 자기산출해 host 변수로 상속됨.
|
|
115
|
+
// 오프셋 0.65em 은 부모 아이콘(1.3em)의 정중앙이라 세로선이 아이콘을 관통함.
|
|
113
116
|
> sd-collapse > ._content > ._children {
|
|
114
117
|
position: relative;
|
|
115
118
|
|
|
@@ -117,7 +120,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
117
120
|
position: absolute;
|
|
118
121
|
top: 0;
|
|
119
122
|
bottom: 0;
|
|
120
|
-
left:
|
|
123
|
+
left: calc(0.65em + 1.3em * var(--sd-list-item-depth, 0));
|
|
121
124
|
width: 0;
|
|
122
125
|
border-left: 1px solid var(--sd-bd-soft);
|
|
123
126
|
pointer-events: none;
|
|
@@ -132,10 +135,11 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
132
135
|
}
|
|
133
136
|
}
|
|
134
137
|
|
|
135
|
-
// 깊이별 들여쓰기:
|
|
136
|
-
//
|
|
138
|
+
// 깊이별 들여쓰기: 자식 항목의 accordion 깊이(--sd-list-item-depth)에
|
|
139
|
+
// 비례해 누적. 한 단계 1.3em(아이콘 한 칸): depth1=1.3em, depth2=2.6em.
|
|
140
|
+
// (flat 항목의 자식 리스트는 깊이를 증가시키지 않아 들여쓰지 않음)
|
|
137
141
|
> sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {
|
|
138
|
-
padding-left: 1.
|
|
142
|
+
padding-left: calc(1.3em * var(--sd-list-item-depth, 1));
|
|
139
143
|
}
|
|
140
144
|
}
|
|
141
145
|
|
|
@@ -165,6 +169,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
165
169
|
"[attr.data-sd-readonly]": "readonly()",
|
|
166
170
|
"[attr.data-sd-has-children]": "hasChildren()",
|
|
167
171
|
"[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
|
|
172
|
+
"[style.--sd-list-item-depth]": "depth()",
|
|
168
173
|
},
|
|
169
174
|
})
|
|
170
175
|
export class SdListItem {
|
|
@@ -178,6 +183,15 @@ export class SdListItem {
|
|
|
178
183
|
|
|
179
184
|
toolTpl = contentChild<TemplateRef<void>>("toolTpl");
|
|
180
185
|
|
|
186
|
+
private readonly _parentItem = inject(SdListItem, { optional: true, skipSelf: true });
|
|
187
|
+
|
|
188
|
+
// accordion 조상 수 = 들여쓰기 단계. flat 조상은 단계에 포함하지 않음.
|
|
189
|
+
readonly depth: Signal<number> = computed(() =>
|
|
190
|
+
this._parentItem == null
|
|
191
|
+
? 0
|
|
192
|
+
: this._parentItem.depth() + (this._parentItem.layout() === "accordion" ? 1 : 0),
|
|
193
|
+
);
|
|
194
|
+
|
|
181
195
|
private readonly _childLists = contentChildren(SdList);
|
|
182
196
|
|
|
183
197
|
hasChildren = computed(() => this._childLists().length > 0);
|
|
@@ -55,7 +55,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
|
|
|
55
55
|
<div class="flex-fill">
|
|
56
56
|
<sd-busy-container [busy]="busy()" style="min-height: 3em" [type]="'bar'">
|
|
57
57
|
@if (selectableKanbanLength() > 0 || toolTplRef()) {
|
|
58
|
-
<div class="tx-center mb-xl">
|
|
58
|
+
<div class="tx-center mb-xl" style="display: flow-root">
|
|
59
59
|
@if (selectableKanbanLength() > 0) {
|
|
60
60
|
<sd-checkbox
|
|
61
61
|
style="float: left"
|
package/styles.css
CHANGED
|
@@ -254,127 +254,127 @@
|
|
|
254
254
|
--sd-radius-xxl: 0;
|
|
255
255
|
}
|
|
256
256
|
.sd-theme-ide-dark {
|
|
257
|
-
--sd-bg-canvas: rgb(
|
|
258
|
-
--sd-bg-content: rgb(
|
|
259
|
-
--sd-bg-elevated: rgb(
|
|
260
|
-
--sd-bg-overlay: rgb(
|
|
261
|
-
--sd-bg-sheet: rgb(
|
|
257
|
+
--sd-bg-canvas: rgb(37, 37, 38);
|
|
258
|
+
--sd-bg-content: rgb(30, 30, 30);
|
|
259
|
+
--sd-bg-elevated: rgb(37, 37, 38);
|
|
260
|
+
--sd-bg-overlay: rgb(37, 37, 38);
|
|
261
|
+
--sd-bg-sheet: rgb(30, 30, 30);
|
|
262
262
|
--sd-bg-inverse: white;
|
|
263
|
-
--sd-bg-field: rgb(
|
|
264
|
-
--sd-bg-track: rgb(
|
|
265
|
-
--sd-bg-knob: rgb(
|
|
266
|
-
--sd-bg-checkbox: rgb(
|
|
267
|
-
--sd-bg-gray-solid: rgb(
|
|
268
|
-
--sd-bg-gray-solid-hover: rgb(
|
|
269
|
-
--sd-bg-gray-subtle: rgb(
|
|
270
|
-
--sd-bg-gray-subtle-hover: rgb(
|
|
271
|
-
--sd-bg-blue-gray-solid: rgb(
|
|
272
|
-
--sd-bg-blue-gray-solid-hover: rgb(
|
|
273
|
-
--sd-bg-blue-gray-subtle: rgb(
|
|
274
|
-
--sd-bg-blue-gray-subtle-hover: rgb(
|
|
275
|
-
--sd-bg-primary-solid: rgb(
|
|
276
|
-
--sd-bg-primary-solid-hover: rgb(
|
|
277
|
-
--sd-bg-primary-subtle: rgb(
|
|
278
|
-
--sd-bg-primary-subtle-hover: rgb(
|
|
279
|
-
--sd-bg-info-solid: rgb(
|
|
280
|
-
--sd-bg-info-solid-hover: rgb(
|
|
281
|
-
--sd-bg-info-subtle: rgb(
|
|
282
|
-
--sd-bg-info-subtle-hover: rgb(
|
|
283
|
-
--sd-bg-success-solid: rgb(
|
|
284
|
-
--sd-bg-success-solid-hover: rgb(
|
|
285
|
-
--sd-bg-success-subtle: rgb(
|
|
286
|
-
--sd-bg-success-subtle-hover: rgb(22,
|
|
263
|
+
--sd-bg-field: rgb(60, 60, 60);
|
|
264
|
+
--sd-bg-track: rgb(58, 61, 65);
|
|
265
|
+
--sd-bg-knob: rgb(204, 204, 204);
|
|
266
|
+
--sd-bg-checkbox: rgb(60, 60, 60);
|
|
267
|
+
--sd-bg-gray-solid: rgb(77, 77, 77);
|
|
268
|
+
--sd-bg-gray-solid-hover: rgb(95, 95, 95);
|
|
269
|
+
--sd-bg-gray-subtle: rgb(42, 45, 46);
|
|
270
|
+
--sd-bg-gray-subtle-hover: rgb(51, 55, 56);
|
|
271
|
+
--sd-bg-blue-gray-solid: rgb(58, 61, 65);
|
|
272
|
+
--sd-bg-blue-gray-solid-hover: rgb(69, 73, 78);
|
|
273
|
+
--sd-bg-blue-gray-subtle: rgb(42, 45, 46);
|
|
274
|
+
--sd-bg-blue-gray-subtle-hover: rgb(51, 55, 56);
|
|
275
|
+
--sd-bg-primary-solid: rgb(14, 99, 156);
|
|
276
|
+
--sd-bg-primary-solid-hover: rgb(17, 119, 187);
|
|
277
|
+
--sd-bg-primary-subtle: rgb(6, 47, 74);
|
|
278
|
+
--sd-bg-primary-subtle-hover: rgb(9, 60, 94);
|
|
279
|
+
--sd-bg-info-solid: rgb(0, 122, 204);
|
|
280
|
+
--sd-bg-info-solid-hover: rgb(14, 138, 224);
|
|
281
|
+
--sd-bg-info-subtle: rgb(6, 59, 73);
|
|
282
|
+
--sd-bg-info-subtle-hover: rgb(9, 74, 92);
|
|
283
|
+
--sd-bg-success-solid: rgb(22, 130, 93);
|
|
284
|
+
--sd-bg-success-solid-hover: rgb(26, 145, 105);
|
|
285
|
+
--sd-bg-success-subtle: rgb(17, 59, 43);
|
|
286
|
+
--sd-bg-success-subtle-hover: rgb(22, 74, 54);
|
|
287
287
|
--sd-bg-warning-solid: rgb(184, 149, 0);
|
|
288
288
|
--sd-bg-warning-solid-hover: rgb(200, 163, 10);
|
|
289
|
-
--sd-bg-warning-subtle: rgb(
|
|
290
|
-
--sd-bg-warning-subtle-hover: rgb(
|
|
289
|
+
--sd-bg-warning-subtle: rgb(53, 42, 5);
|
|
290
|
+
--sd-bg-warning-subtle-hover: rgb(66, 53, 8);
|
|
291
291
|
--sd-bg-danger-solid: rgb(190, 17, 0);
|
|
292
292
|
--sd-bg-danger-solid-hover: rgb(215, 25, 5);
|
|
293
|
-
--sd-bg-danger-subtle: rgb(
|
|
294
|
-
--sd-bg-danger-subtle-hover: rgb(
|
|
295
|
-
--sd-bg-state-hover: rgba(255, 255, 255, 0.
|
|
296
|
-
--sd-bg-state-active: rgba(255, 255, 255, 0.
|
|
297
|
-
--sd-bg-state-selected: rgba(255, 255, 255, 0.
|
|
298
|
-
--sd-bg-state-selected-inactive: rgb(
|
|
299
|
-
--sd-bg-drop-target: rgba(
|
|
300
|
-
--sd-bg-selection: rgba(
|
|
301
|
-
--sd-bg-disabled: rgb(
|
|
293
|
+
--sd-bg-danger-subtle: rgb(90, 29, 29);
|
|
294
|
+
--sd-bg-danger-subtle-hover: rgb(108, 36, 36);
|
|
295
|
+
--sd-bg-state-hover: rgba(255, 255, 255, 0.06);
|
|
296
|
+
--sd-bg-state-active: rgba(255, 255, 255, 0.12);
|
|
297
|
+
--sd-bg-state-selected: rgba(255, 255, 255, 0.11);
|
|
298
|
+
--sd-bg-state-selected-inactive: rgb(55, 55, 61);
|
|
299
|
+
--sd-bg-drop-target: rgba(255, 255, 255, 0.08);
|
|
300
|
+
--sd-bg-selection: rgba(38, 79, 120, 0.87);
|
|
301
|
+
--sd-bg-disabled: rgb(45, 45, 48);
|
|
302
302
|
--sd-bg-busy-overlay: rgba(0, 0, 0, 0.6);
|
|
303
|
-
--sd-bg-busy-indicator: rgb(
|
|
304
|
-
--sd-tx-strong: rgb(
|
|
305
|
-
--sd-tx-default: rgb(
|
|
306
|
-
--sd-tx-muted: rgb(
|
|
307
|
-
--sd-tx-faint: rgb(
|
|
303
|
+
--sd-bg-busy-indicator: rgb(14, 112, 192);
|
|
304
|
+
--sd-tx-strong: rgb(255, 255, 255);
|
|
305
|
+
--sd-tx-default: rgb(204, 204, 204);
|
|
306
|
+
--sd-tx-muted: rgb(157, 157, 157);
|
|
307
|
+
--sd-tx-faint: rgb(117, 117, 117);
|
|
308
308
|
--sd-tx-on-inverse: white;
|
|
309
309
|
--sd-tx-on-inverse-muted: rgba(255, 255, 255, 0.75);
|
|
310
310
|
--sd-tx-on-inverse-disabled: rgba(255, 255, 255, 0.55);
|
|
311
|
-
--sd-tx-disabled: rgb(
|
|
312
|
-
--sd-tx-gray: rgb(
|
|
313
|
-
--sd-tx-gray-hover: rgb(
|
|
314
|
-
--sd-tx-gray-subtle: rgb(
|
|
311
|
+
--sd-tx-disabled: rgb(117, 117, 117);
|
|
312
|
+
--sd-tx-gray: rgb(157, 157, 157);
|
|
313
|
+
--sd-tx-gray-hover: rgb(204, 204, 204);
|
|
314
|
+
--sd-tx-gray-subtle: rgb(204, 204, 204);
|
|
315
315
|
--sd-tx-blue-gray: rgb(148, 163, 184);
|
|
316
316
|
--sd-tx-blue-gray-hover: rgb(170, 183, 200);
|
|
317
317
|
--sd-tx-blue-gray-subtle: rgb(170, 183, 200);
|
|
318
|
-
--sd-tx-primary: rgb(
|
|
319
|
-
--sd-tx-primary-hover: rgb(
|
|
320
|
-
--sd-tx-primary-subtle: rgb(
|
|
321
|
-
--sd-tx-info: rgb(
|
|
322
|
-
--sd-tx-info-hover: rgb(
|
|
323
|
-
--sd-tx-info-subtle: rgb(
|
|
324
|
-
--sd-tx-success: rgb(
|
|
325
|
-
--sd-tx-success-hover: rgb(160, 220,
|
|
326
|
-
--sd-tx-success-subtle: rgb(
|
|
327
|
-
--sd-tx-warning: rgb(
|
|
328
|
-
--sd-tx-warning-hover: rgb(
|
|
329
|
-
--sd-tx-warning-subtle: rgb(
|
|
318
|
+
--sd-tx-primary: rgb(55, 148, 255);
|
|
319
|
+
--sd-tx-primary-hover: rgb(85, 165, 255);
|
|
320
|
+
--sd-tx-primary-subtle: rgb(120, 185, 255);
|
|
321
|
+
--sd-tx-info: rgb(55, 148, 255);
|
|
322
|
+
--sd-tx-info-hover: rgb(85, 165, 255);
|
|
323
|
+
--sd-tx-info-subtle: rgb(120, 185, 255);
|
|
324
|
+
--sd-tx-success: rgb(137, 209, 133);
|
|
325
|
+
--sd-tx-success-hover: rgb(160, 220, 158);
|
|
326
|
+
--sd-tx-success-subtle: rgb(160, 220, 158);
|
|
327
|
+
--sd-tx-warning: rgb(204, 167, 0);
|
|
328
|
+
--sd-tx-warning-hover: rgb(220, 183, 20);
|
|
329
|
+
--sd-tx-warning-subtle: rgb(224, 192, 60);
|
|
330
330
|
--sd-tx-danger: rgb(244, 135, 113);
|
|
331
331
|
--sd-tx-danger-hover: rgb(248, 160, 140);
|
|
332
332
|
--sd-tx-danger-subtle: rgb(248, 170, 152);
|
|
333
|
-
--sd-bd-hairline: rgb(
|
|
334
|
-
--sd-bd-soft: rgb(
|
|
335
|
-
--sd-bd-default: rgb(
|
|
336
|
-
--sd-bd-strong: rgb(
|
|
337
|
-
--sd-bd-emphasis: rgb(
|
|
338
|
-
--sd-bd-field: rgb(
|
|
339
|
-
--sd-bd-disabled: rgb(
|
|
340
|
-
--sd-bd-gray-solid: rgb(
|
|
341
|
-
--sd-bd-gray-solid-hover: rgb(
|
|
342
|
-
--sd-bd-gray-subtle: rgb(
|
|
343
|
-
--sd-bd-blue-gray-solid: rgb(
|
|
344
|
-
--sd-bd-blue-gray-solid-hover: rgb(
|
|
345
|
-
--sd-bd-blue-gray-subtle: rgb(
|
|
346
|
-
--sd-bd-primary-solid: rgb(
|
|
347
|
-
--sd-bd-primary-solid-hover: rgb(
|
|
348
|
-
--sd-bd-primary-subtle: rgb(
|
|
349
|
-
--sd-bd-info-solid: rgb(
|
|
350
|
-
--sd-bd-info-solid-hover: rgb(
|
|
351
|
-
--sd-bd-info-subtle: rgb(
|
|
352
|
-
--sd-bd-success-solid: rgb(
|
|
353
|
-
--sd-bd-success-solid-hover: rgb(
|
|
354
|
-
--sd-bd-success-subtle: rgb(
|
|
333
|
+
--sd-bd-hairline: rgb(51, 51, 51);
|
|
334
|
+
--sd-bd-soft: rgb(69, 69, 69);
|
|
335
|
+
--sd-bd-default: rgb(69, 69, 69);
|
|
336
|
+
--sd-bd-strong: rgb(69, 69, 69);
|
|
337
|
+
--sd-bd-emphasis: rgb(107, 107, 107);
|
|
338
|
+
--sd-bd-field: rgb(60, 60, 60);
|
|
339
|
+
--sd-bd-disabled: rgb(51, 51, 51);
|
|
340
|
+
--sd-bd-gray-solid: rgb(77, 77, 77);
|
|
341
|
+
--sd-bd-gray-solid-hover: rgb(95, 95, 95);
|
|
342
|
+
--sd-bd-gray-subtle: rgb(69, 69, 69);
|
|
343
|
+
--sd-bd-blue-gray-solid: rgb(58, 61, 65);
|
|
344
|
+
--sd-bd-blue-gray-solid-hover: rgb(69, 73, 78);
|
|
345
|
+
--sd-bd-blue-gray-subtle: rgb(69, 69, 69);
|
|
346
|
+
--sd-bd-primary-solid: rgb(14, 99, 156);
|
|
347
|
+
--sd-bd-primary-solid-hover: rgb(17, 119, 187);
|
|
348
|
+
--sd-bd-primary-subtle: rgb(12, 74, 116);
|
|
349
|
+
--sd-bd-info-solid: rgb(0, 122, 204);
|
|
350
|
+
--sd-bd-info-solid-hover: rgb(14, 138, 224);
|
|
351
|
+
--sd-bd-info-subtle: rgb(10, 82, 128);
|
|
352
|
+
--sd-bd-success-solid: rgb(22, 130, 93);
|
|
353
|
+
--sd-bd-success-solid-hover: rgb(26, 145, 105);
|
|
354
|
+
--sd-bd-success-subtle: rgb(20, 88, 64);
|
|
355
355
|
--sd-bd-warning-solid: rgb(184, 149, 0);
|
|
356
356
|
--sd-bd-warning-solid-hover: rgb(200, 163, 10);
|
|
357
|
-
--sd-bd-warning-subtle: rgb(
|
|
357
|
+
--sd-bd-warning-subtle: rgb(110, 90, 12);
|
|
358
358
|
--sd-bd-danger-solid: rgb(190, 17, 0);
|
|
359
359
|
--sd-bd-danger-solid-hover: rgb(215, 25, 5);
|
|
360
|
-
--sd-bd-danger-subtle: rgb(
|
|
361
|
-
--sd-focus-ring-color:
|
|
362
|
-
--sd-scrollbar-thumb: rgba(
|
|
363
|
-
--sd-scrollbar-thumb-hover: rgba(
|
|
360
|
+
--sd-bd-danger-subtle: rgb(120, 36, 30);
|
|
361
|
+
--sd-focus-ring-color: rgb(0, 127, 212);
|
|
362
|
+
--sd-scrollbar-thumb: rgba(121, 121, 121, 0.2);
|
|
363
|
+
--sd-scrollbar-thumb-hover: rgba(100, 100, 100, 0.7);
|
|
364
364
|
--sd-scrollbar-track: rgba(255, 255, 255, 0.03);
|
|
365
365
|
--sd-shadow-size: 0;
|
|
366
366
|
--sd-shadow-blur-mult: 0;
|
|
367
|
-
--sd-card-bd: rgb(
|
|
367
|
+
--sd-card-bd: rgb(69, 69, 69);
|
|
368
368
|
--sd-card-bd-active: transparent;
|
|
369
369
|
--sd-card-shadow: none;
|
|
370
370
|
--sd-card-shadow-hover: none;
|
|
371
|
-
--sd-modal-bd: rgb(
|
|
372
|
-
--sd-modal-header-bg: rgb(
|
|
373
|
-
--sd-modal-header-tx: rgb(
|
|
374
|
-
--sd-modal-header-tx-muted: rgb(
|
|
375
|
-
--sd-dropdown-bd: rgb(
|
|
376
|
-
--sd-permission-group-bg: rgb(
|
|
377
|
-
--sd-permission-group-tx:
|
|
371
|
+
--sd-modal-bd: rgb(69, 69, 69);
|
|
372
|
+
--sd-modal-header-bg: rgb(60, 60, 60);
|
|
373
|
+
--sd-modal-header-tx: rgb(204, 204, 204);
|
|
374
|
+
--sd-modal-header-tx-muted: rgb(157, 157, 157);
|
|
375
|
+
--sd-dropdown-bd: rgb(69, 69, 69);
|
|
376
|
+
--sd-permission-group-bg: rgb(55, 55, 61);
|
|
377
|
+
--sd-permission-group-tx: rgb(204, 204, 204);
|
|
378
378
|
--sd-radius-xs: 0.0833rem;
|
|
379
379
|
--sd-radius-sm: 0.0833rem;
|
|
380
380
|
--sd-radius-default: 0.1667rem;
|
|
@@ -388,6 +388,8 @@
|
|
|
388
388
|
--sd-gap-lg: 0.4167rem;
|
|
389
389
|
--sd-gap-xl: 0.6667rem;
|
|
390
390
|
--sd-gap-xxl: 1rem;
|
|
391
|
+
--sd-line-height: 1.35em;
|
|
392
|
+
--sd-line-height-strip-unit: 1.35;
|
|
391
393
|
--sd-sheet-pv: 0.0833rem;
|
|
392
394
|
--sd-sheet-ph: 0.1667rem;
|
|
393
395
|
--sd-topbar-height: 2rem;
|