diff --git a/projects/dashboards-demo/src/app/widgets/contact-widget/contact-widget.component.scss b/projects/dashboards-demo/src/app/widgets/contact-widget/contact-widget.component.scss index 7830dd734f..04bffae198 100644 --- a/projects/dashboards-demo/src/app/widgets/contact-widget/contact-widget.component.scss +++ b/projects/dashboards-demo/src/app/widgets/contact-widget/contact-widget.component.scss @@ -2,10 +2,10 @@ @use '@siemens/element-theme/src/styles/variables'; dt { - margin-block-start: map.get(variables.$spacers, 5); + margin-block-start: map.get(variables.$spacers-block, 5); } dd { - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); margin-block-end: 0; } diff --git a/projects/dashboards-demo/webcomponents/src/app/contact-widget/contact-widget.component.scss b/projects/dashboards-demo/webcomponents/src/app/contact-widget/contact-widget.component.scss index 7830dd734f..04bffae198 100644 --- a/projects/dashboards-demo/webcomponents/src/app/contact-widget/contact-widget.component.scss +++ b/projects/dashboards-demo/webcomponents/src/app/contact-widget/contact-widget.component.scss @@ -2,10 +2,10 @@ @use '@siemens/element-theme/src/styles/variables'; dt { - margin-block-start: map.get(variables.$spacers, 5); + margin-block-start: map.get(variables.$spacers-block, 5); } dd { - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); margin-block-end: 0; } diff --git a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss index d1251d185b..5697f43c9c 100644 --- a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss +++ b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss @@ -5,8 +5,8 @@ display: flex; flex: 1 1 0; flex-direction: column; - margin-inline: -1 * map.get(variables.$spacers, 2); - margin-block-start: -1 * map.get(variables.$spacers, 2); + margin-inline: map.get(variables.$negative-spacers-inline, 2); + margin-block-start: map.get(variables.$negative-spacers-block, 2); } .list-group-item { @@ -25,6 +25,6 @@ justify-content: flex-end; > * { - margin-inline-start: map.get(variables.$spacers, 6); + margin-inline-start: map.get(variables.$spacers-inline, 6); } } diff --git a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss index 2e03a524cd..6fb0511dfe 100644 --- a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss +++ b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.scss @@ -47,24 +47,24 @@ // Overwrite to hide the gridstack.js icon background-image: none !important; transform: none !important; - inset-block-end: map.get(variables.$spacers, 3) !important; - inset-inline-end: map.get(variables.$spacers, 3) !important; + inset-block-end: map.get(variables.$spacers-block, 3) !important; + inset-inline-end: map.get(variables.$spacers-inline, 3) !important; } /* stylelint-enable declaration-no-important */ } .resize-handle { - inset-block-end: map.get(variables.$spacers, 3); + inset-block-end: map.get(variables.$spacers-block, 3); color: variables.$element-ui-2; pointer-events: none; position: absolute; - inset-inline-end: map.get(variables.$spacers, 3); + inset-inline-end: map.get(variables.$spacers-inline, 3); text-align: center; z-index: 10; } .draggable-overlay { - inset: map.get(variables.$spacers, 4); + inset: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); position: absolute; z-index: 100; } diff --git a/projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.scss b/projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.scss index 24c9416101..13ac53f256 100644 --- a/projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.scss +++ b/projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.scss @@ -5,8 +5,8 @@ display: flex; flex: 1 1 0; flex-direction: column; - margin-inline: -1 * map.get(variables.$spacers, 2); - margin-block-start: -1 * map.get(variables.$spacers, 2); + margin-inline: map.get(variables.$negative-spacers-inline, 2); + margin-block-start: map.get(variables.$negative-spacers-block, 2); } .editor-footer { @@ -17,6 +17,6 @@ justify-content: flex-end; > * { - margin-inline-start: map.get(variables.$spacers, 6); + margin-inline-start: map.get(variables.$spacers-inline, 6); } } diff --git a/projects/element-ng/about/si-about.component.scss b/projects/element-ng/about/si-about.component.scss index 6b0cc28098..62bdb20db0 100644 --- a/projects/element-ng/about/si-about.component.scss +++ b/projects/element-ng/about/si-about.component.scss @@ -4,7 +4,7 @@ .list-group-item { border-width: 0 0 1px; - padding-inline: map.get(variables.$spacers, 6); + padding-inline: map.get(variables.$spacers-inline, 6); &.with-border:first-child { border-block-start-width: 1px; diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.scss b/projects/element-ng/accordion/si-collapsible-panel.component.scss index c5a62df9e3..c702ba9086 100644 --- a/projects/element-ng/accordion/si-collapsible-panel.component.scss +++ b/projects/element-ng/accordion/si-collapsible-panel.component.scss @@ -25,7 +25,7 @@ } .collapsible-header { - padding-block: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 4); &:hover { background: variables.$element-base-1-hover; @@ -52,7 +52,7 @@ align-items: center; background: variables.$element-base-1; color: variables.$element-text-primary; - padding-block: map.get(variables.$spacers, 5); + padding-block: map.get(variables.$spacers-block, 5); border-radius: var(--__radius); &.disabled { diff --git a/projects/element-ng/application-header/launchpad/si-launchpad-app.component.scss b/projects/element-ng/application-header/launchpad/si-launchpad-app.component.scss index c6dbc5f250..bf4a750aa3 100644 --- a/projects/element-ng/application-header/launchpad/si-launchpad-app.component.scss +++ b/projects/element-ng/application-header/launchpad/si-launchpad-app.component.scss @@ -7,10 +7,10 @@ align-items: center; flex-flow: column nowrap; position: relative; - padding-block: map.get(variables.$spacers, 8); - inline-size: calc(7rem + 2 * map.get(variables.$spacers, 7)); - max-inline-size: calc(7rem + 2 * map.get(variables.$spacers, 7)); - padding-inline: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 8); + inline-size: calc(7rem + 2 * map.get(variables.$spacers-inline, 7)); + max-inline-size: calc(7rem + 2 * map.get(variables.$spacers-inline, 7)); + padding-inline: map.get(variables.$spacers-inline, 4); color: variables.$element-text-primary; border-radius: variables.$element-radius-2; @@ -47,21 +47,21 @@ justify-content: center; inline-size: 3rem; block-size: 3rem; - margin-block-end: map.get(variables.$spacers, 4); + margin-block-end: map.get(variables.$spacers-block, 4); border-radius: variables.$element-radius-2; &:is(si-icon) { background: variables.$element-launchpad-app-background; font-size: 2.5rem; - padding: map.get(variables.$spacers, 2); + padding: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); color: variables.$element-launchpad-app-color; } } .favorite-icon { position: absolute; - inset-inline-end: map.get(variables.$spacers, 6); - inset-block-start: map.get(variables.$spacers, 6); + inset-inline-end: map.get(variables.$spacers-inline, 6); + inset-block-start: map.get(variables.$spacers-block, 6); color: variables.$element-text-primary; } @@ -74,16 +74,16 @@ flex-flow: row nowrap; inline-size: 100%; max-inline-size: 100%; - padding: map.get(variables.$spacers, 4); + padding: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); &:has(.favorite-icon) { - padding-inline-end: map.get(variables.$spacers, 9); + padding-inline-end: map.get(variables.$spacers-inline, 9); } } .app-icon { margin-block-end: 0; - margin-inline-end: map.get(variables.$spacers, 4); + margin-inline-end: map.get(variables.$spacers-inline, 4); } .app-text { @@ -91,7 +91,7 @@ } .favorite-icon { - inset-inline-end: map.get(variables.$spacers, 4); - inset-block-start: map.get(variables.$spacers, 4); + inset-inline-end: map.get(variables.$spacers-inline, 4); + inset-block-start: map.get(variables.$spacers-block, 4); } } diff --git a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss index a5a6f20632..5475781463 100644 --- a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss +++ b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss @@ -14,15 +14,15 @@ 100vb - variables.$si-application-header-height - variables.$si-titlebar-spacing - variables.$si-system-banner-spacing ); - padding: map.get(variables.$spacers, 6); + padding: map.get(variables.$spacers-block, 6) map.get(variables.$spacers-inline, 6); display: flex; flex-direction: column; z-index: variables.$zindex-launchpad; background-color: variables.$element-base-1; @include all-variables.media-breakpoint-up(lg) { - padding-block: map.get(variables.$spacers, 6); - padding-inline: map.get(variables.$spacers, 8); + padding-block: map.get(variables.$spacers-block, 6); + padding-inline: map.get(variables.$spacers-inline, 8); } } @@ -35,16 +35,16 @@ .apps-scroll { overflow-y: auto; // Prevent scrollbar from overlapping items on mobile - padding-inline-end: map.get(variables.$spacers, 6); - margin-inline-end: map.get(variables.$spacers, 6) * -1; + padding-inline-end: map.get(variables.$spacers-inline, 6); + margin-inline-end: map.get(variables.$negative-spacers-inline, 6); } .btn-show-all { - margin-block-start: map.get(variables.$spacers, 6); - margin-block-end: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 6); + margin-block-end: map.get(variables.$spacers-block, 4); &.show { - margin-block-end: map.get(variables.$spacers, 8); + margin-block-end: map.get(variables.$spacers-block, 8); } &.show:has(+ si-launchpad-category.has-title) { diff --git a/projects/element-ng/application-header/si-header-account-item.component.scss b/projects/element-ng/application-header/si-header-account-item.component.scss index 08e4c9b89c..8d1caffc63 100644 --- a/projects/element-ng/application-header/si-header-account-item.component.scss +++ b/projects/element-ng/application-header/si-header-account-item.component.scss @@ -3,5 +3,5 @@ si-avatar.small { // makes the avatar slightly larger with increased font size, aligning with the icons - --avatar-size: calc(1.5rem + #{2 * map.get(spacers.$spacers, 2)}); + --avatar-size: calc(1.5rem + 2 * #{map.get(spacers.$spacers-block, 2)}); } diff --git a/projects/element-ng/avatar/si-avatar.component.scss b/projects/element-ng/avatar/si-avatar.component.scss index be91859123..61b382044b 100644 --- a/projects/element-ng/avatar/si-avatar.component.scss +++ b/projects/element-ng/avatar/si-avatar.component.scss @@ -30,28 +30,34 @@ } &.tiny { - --avatar-size: calc(#{variables.$si-icon-font-size} + #{2 * map.get(variables.$spacers, 1)}); + --avatar-size: calc( + #{variables.$si-icon-font-size} + 2 * #{map.get(variables.$spacers-block, 1)} + ); } &.xsmall { - --avatar-size: calc(#{variables.$si-icon-font-size} + #{2 * map.get(variables.$spacers, 2)}); + --avatar-size: calc( + #{variables.$si-icon-font-size} + 2 * #{map.get(variables.$spacers-block, 2)} + ); } &.small { - --avatar-size: calc(#{variables.$si-icon-font-size} + #{2 * map.get(variables.$spacers, 3)}); + --avatar-size: calc( + #{variables.$si-icon-font-size} + 2 * #{map.get(variables.$spacers-block, 3)} + ); } &.large { --avatar-size: calc( - #{variables.$si-icon-font-size} + #{2 * - (map.get(variables.$spacers, 6) + map.get(variables.$spacers, 1))} + #{variables.$si-icon-font-size} + 2 * + (#{map.get(variables.$spacers-block, 6)} + #{map.get(variables.$spacers-block, 1)}) ); } &.xlarge { --avatar-size: calc( - #{variables.$si-icon-font-size} + #{2 * - (map.get(variables.$spacers, 8) + map.get(variables.$spacers, 3))} + #{variables.$si-icon-font-size} + 2 * + (#{map.get(variables.$spacers-block, 8)} + #{map.get(variables.$spacers-block, 3)}) ); } } diff --git a/projects/element-ng/card/si-card-header.component.scss b/projects/element-ng/card/si-card-header.component.scss index 8cfab5a8d0..6aad8fcbda 100644 --- a/projects/element-ng/card/si-card-header.component.scss +++ b/projects/element-ng/card/si-card-header.component.scss @@ -19,5 +19,5 @@ ::ng-deep .icon[headerIcon] { // The icon would be 8px too high without this. - margin-block: - map.get(spacers.$spacers, 2); + margin-block: map.get(spacers.$negative-spacers-block, 2); } diff --git a/projects/element-ng/carousel/si-carousel.component.scss b/projects/element-ng/carousel/si-carousel.component.scss index 6c8b54c251..42db724bd8 100644 --- a/projects/element-ng/carousel/si-carousel.component.scss +++ b/projects/element-ng/carousel/si-carousel.component.scss @@ -3,7 +3,7 @@ @use '@siemens/element-theme/src/styles/variables/spacers'; :host { - --si-carousel-gap: #{map.get(spacers.$spacers, 6)}; + --si-carousel-gap: #{map.get(spacers.$spacers-block, 6)}; display: flex; flex-direction: column; diff --git a/projects/element-ng/chat-messages/si-ai-message.component.scss b/projects/element-ng/chat-messages/si-ai-message.component.scss index f457b9dbbc..3dc1bc85e1 100644 --- a/projects/element-ng/chat-messages/si-ai-message.component.scss +++ b/projects/element-ng/chat-messages/si-ai-message.component.scss @@ -11,11 +11,13 @@ si-chat-message { // Because of the transparent background we need to remove the padding --chat-message-bubble-padding: 0; - margin-block-end: -1 * map.get(variables.$spacers, 2); + margin-block-end: map.get(variables.$negative-spacers-block, 2); } .ai-message-actions { - margin-block-start: map.get(variables.$spacers, 5) - map.get(variables.$spacers, 2); + margin-block-start: calc( + map.get(variables.$spacers-block, 5) - map.get(variables.$spacers-block, 2) + ); } // Loading spinner size adjustment (inherited from generic component) diff --git a/projects/element-ng/chat-messages/si-chat-container.component.scss b/projects/element-ng/chat-messages/si-chat-container.component.scss index 9c082f5150..3258e7366d 100644 --- a/projects/element-ng/chat-messages/si-chat-container.component.scss +++ b/projects/element-ng/chat-messages/si-chat-container.component.scss @@ -29,8 +29,8 @@ .chat-input-area, si-ai-welcome-screen { - padding-inline-start: map.get(variables.$spacers, 6); - padding-inline-end: map.get(variables.$spacers, 6); + padding-inline-start: map.get(variables.$spacers-inline, 6); + padding-inline-end: map.get(variables.$spacers-inline, 6); } } @@ -44,14 +44,17 @@ .messages-container { overflow-y: auto; overflow-x: visible; - padding-inline: map.get(variables.$spacers, 4); + padding-inline: map.get(variables.$spacers-inline, 4); // Ensure the messages can still be seen on very short screens min-block-size: 5rem; - gap: map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4); + gap: calc(map.get(variables.$spacers-block, 9) + map.get(variables.$spacers-block, 4)) + calc(map.get(variables.$spacers-inline, 9) + map.get(variables.$spacers-inline, 4)); // Padding is included here, cancel out the gap on the messages container ::ng-deep si-user-message:not(.last) { - margin-block-end: -1 * (map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4)); + margin-block-end: calc( + map.get(variables.$negative-spacers-block, 9) + map.get(variables.$negative-spacers-block, 4) + ); } ::ng-deep &:not(:has(si-ai-welcome-screen)) { diff --git a/projects/element-ng/chat-messages/si-chat-input.component.scss b/projects/element-ng/chat-messages/si-chat-input.component.scss index c5fb40f5c9..0cc089c252 100644 --- a/projects/element-ng/chat-messages/si-chat-input.component.scss +++ b/projects/element-ng/chat-messages/si-chat-input.component.scss @@ -8,11 +8,11 @@ .input-wrapper { border-color: variables.$element-ui-4; background-color: variables.$element-base-1; - padding-block: map.get(variables.$spacers, 5) map.get(variables.$spacers, 4); - padding-inline: map.get(variables.$spacers, 5); + padding-block: map.get(variables.$spacers-block, 5) map.get(variables.$spacers-block, 4); + padding-inline: map.get(variables.$spacers-inline, 5); display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 5); + gap: map.get(variables.$spacers-block, 5) map.get(variables.$spacers-inline, 5); &:hover, &:active, diff --git a/projects/element-ng/chat-messages/si-chat-message.component.scss b/projects/element-ng/chat-messages/si-chat-message.component.scss index 5d78ed2d54..bf42fa4068 100644 --- a/projects/element-ng/chat-messages/si-chat-message.component.scss +++ b/projects/element-ng/chat-messages/si-chat-message.component.scss @@ -4,7 +4,7 @@ :host { display: block; --chat-message-bubble-bg: #{variables.$element-base-1}; - --chat-message-bubble-padding: #{map.get(variables.$spacers, 5)}; + --chat-message-bubble-padding: #{map.get(variables.$spacers-block, 5)}; } :host ::ng-deep si-loading-spinner { @@ -55,12 +55,12 @@ } &:not(:empty) ~ .message-wrapper:not(:has(.message-bubble:empty)) { - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); } &:not(:empty) ~ .message-wrapper:has(.message-bubble:empty) .actions-wrapper.actions-horizontal { // Since it will be on the bottom of the attachment (but is not in bottom mode), we need some spacing - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); } } @@ -73,11 +73,11 @@ align-self: flex-start; &:not(.end) { - margin-inline-end: map.get(variables.$spacers, 3); + margin-inline-end: map.get(variables.$spacers-inline, 3); } &.end { - margin-inline-start: map.get(variables.$spacers, 3); + margin-inline-start: map.get(variables.$spacers-inline, 3); } &:empty { @@ -128,7 +128,7 @@ } .avatar-wrapper { - margin-block-end: map.get(variables.$spacers, 3); + margin-block-end: map.get(variables.$spacers-block, 3); &.end { align-self: flex-end; @@ -138,12 +138,12 @@ .avatar-wrapper::ng-deep:has(si-icon) { &.end { // stylelint-disable-next-line declaration-no-important - margin-inline-end: map.get(variables.$spacers, 2) !important; + margin-inline-end: map.get(variables.$spacers-inline, 2) !important; } &:not(.end) { // stylelint-disable-next-line declaration-no-important - margin-inline-start: map.get(variables.$spacers, 2) !important; + margin-inline-start: map.get(variables.$spacers-inline, 2) !important; } } } diff --git a/projects/element-ng/chat-messages/si-user-message.component.scss b/projects/element-ng/chat-messages/si-user-message.component.scss index 16f4ddd3d7..5f50beabbe 100644 --- a/projects/element-ng/chat-messages/si-user-message.component.scss +++ b/projects/element-ng/chat-messages/si-user-message.component.scss @@ -8,7 +8,7 @@ &:not(:has([siChatMessageAction])) si-chat-message { // Keep in sync with button size and actions wrapper padding // stylelint-disable-next-line declaration-no-important - padding-block-end: calc(32px + #{map.get(variables.$spacers, 2)}) !important; + padding-block-end: calc(32px + #{map.get(variables.$spacers-block, 2)}) !important; } } diff --git a/projects/element-ng/circle-status/si-circle-status.component.scss b/projects/element-ng/circle-status/si-circle-status.component.scss index 13fcf9f262..65da1a81a4 100644 --- a/projects/element-ng/circle-status/si-circle-status.component.scss +++ b/projects/element-ng/circle-status/si-circle-status.component.scss @@ -5,7 +5,7 @@ $si-circle-status-size-regular: calc(variables.$si-icon-font-size + 20px); $si-circle-status-indicator-size-regular: variables.$si-icon-font-size; $si-circle-status-bullet-size-regular: 0.625rem; $si-circle-status-size-small: calc( - variables.$si-icon-font-size + 2 * map.get(variables.$spacers, 3) + variables.$si-icon-font-size + 2 * map.get(variables.$spacers-block, 3) ); $si-circle-status-indicator-size-small: 1rem; $si-circle-status-bullet-size-small: 0.5rem; diff --git a/projects/element-ng/color-picker/si-color-picker.component.scss b/projects/element-ng/color-picker/si-color-picker.component.scss index 97be0824bb..50c34b89b8 100644 --- a/projects/element-ng/color-picker/si-color-picker.component.scss +++ b/projects/element-ng/color-picker/si-color-picker.component.scss @@ -24,7 +24,8 @@ $color-size: 1.5rem; .input-color-box { cursor: pointer; position: relative; - padding: (map.get(variables.$spacers, 4) - 1px); + padding: calc(map.get(variables.$spacers-block, 4) - 1px) + calc(map.get(variables.$spacers-inline, 4) - 1px); border-radius: variables.$element-radius-1; border-width: 1px; border-style: solid; diff --git a/projects/element-ng/content-action-bar/si-content-action-bar.component.scss b/projects/element-ng/content-action-bar/si-content-action-bar.component.scss index 8c11fb3751..83eebe0af3 100644 --- a/projects/element-ng/content-action-bar/si-content-action-bar.component.scss +++ b/projects/element-ng/content-action-bar/si-content-action-bar.component.scss @@ -11,7 +11,7 @@ div > [si-content-action-bar-toggle] { // items and preventing resize-triggered expand/collapse from reaching a stable state. // The fixed inline-size guarantees a deterministic clientWidth at all times so the reserved // space matches the toggle's actual footprint the moment it becomes visible. - inline-size: calc(1.25rem + 2 * map.get(spacers.$spacers, 4)); + inline-size: calc(1.25rem + 2 * map.get(spacers.$spacers-inline, 4)); justify-content: center; border-radius: bootstrap-variables.$btn-border-radius; } diff --git a/projects/element-ng/dashboard/si-dashboard.component.scss b/projects/element-ng/dashboard/si-dashboard.component.scss index efc7ceedcb..bacf8264a6 100644 --- a/projects/element-ng/dashboard/si-dashboard.component.scss +++ b/projects/element-ng/dashboard/si-dashboard.component.scss @@ -10,10 +10,10 @@ .si-dashboard-header { &.sticky { - padding-inline-end: map.get(all-variables.$spacers, 6); + padding-inline-end: map.get(all-variables.$spacers-inline, 6); @include all-variables.media-breakpoint-up(md) { - padding-inline-end: map.get(all-variables.$spacers, 9); + padding-inline-end: map.get(all-variables.$spacers-inline, 9); } } } diff --git a/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.scss b/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.scss index 073339ccab..3a3b2d044a 100644 --- a/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.scss +++ b/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.scss @@ -10,7 +10,7 @@ overflow: hidden; &:has(si-search-bar) { - padding-block-start: map.get(variables.$spacers, 4); + padding-block-start: map.get(variables.$spacers-block, 4); } } diff --git a/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-body.component.scss b/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-body.component.scss index 0e67f4fc27..bbd56d2d54 100644 --- a/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-body.component.scss +++ b/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-body.component.scss @@ -9,7 +9,7 @@ div { block-size: 100%; - padding-inline: map.get(variables.$spacers, 6) map.get(variables.$spacers, 4); + padding-inline: map.get(variables.$spacers-inline, 6) map.get(variables.$spacers-inline, 4); overflow-y: auto; overflow-x: hidden; } diff --git a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-body.component.scss b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-body.component.scss index 3b9fe24ea9..6c5e4372d5 100644 --- a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-body.component.scss +++ b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-body.component.scss @@ -8,7 +8,7 @@ :host { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 9); + gap: map.get(variables.$spacers-block, 9) map.get(variables.$spacers-inline, 9); block-size: 100%; } @@ -28,7 +28,7 @@ .si-weather-widget-today { display: flex; align-items: start; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } // vertical & horizontal: temperature at the inline-start, @@ -47,7 +47,7 @@ .si-weather-widget-today-info { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); min-inline-size: 0; } @@ -71,7 +71,7 @@ .si-weather-widget-range { display: flex; - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); } .si-weather-widget-range-min { @@ -88,7 +88,7 @@ padding: 0; display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); margin-block: 0; inline-size: 100%; } @@ -97,7 +97,7 @@ display: flex; align-items: baseline; justify-content: space-between; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } .si-weather-widget-metric-label { diff --git a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-forecast.component.scss b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-forecast.component.scss index 8fc27c56df..7490d1d0aa 100644 --- a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-forecast.component.scss +++ b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-forecast.component.scss @@ -18,7 +18,7 @@ // equivalent rules from reaching inside the forecast template. .si-weather-widget-forecast-day-range { display: flex; - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); } .si-weather-widget-forecast-range-min { @@ -64,7 +64,7 @@ repeat(min(var(--si-weather-forecast-extras), var(--si-weather-forecast-extras-cap)), 1fr auto) 1fr auto; - row-gap: map.get(variables.$spacers, 4); + row-gap: map.get(variables.$spacers-block, 4); align-items: center; inline-size: 100%; // Enable inline-size container queries so the cap can be lowered as the @@ -133,7 +133,7 @@ .si-weather-widget-forecast-day-label { color: variables.$element-text-secondary; - margin-block: map.get(variables.$spacers, 4); + margin-block: map.get(variables.$spacers-block, 4); // The label track is `max-content`; prevent wrapping if the container // ever constrains the row below `max-content` (e.g. very large root font // sizes combined with the smallest breakpoint). @@ -144,7 +144,7 @@ // with a fixed gap to the illustration. .si-weather-widget-forecast.si-weather-widget-vertical .si-weather-widget-forecast-day-label { // Fixed gap between the day label and the illustration (Figma spacing-6). - padding-inline-end: map.get(variables.$spacers, 6); + padding-inline-end: map.get(variables.$spacers-inline, 6); grid-column-start: 1; } @@ -157,14 +157,14 @@ display: inline-flex; align-items: center; justify-content: center; - margin-block: map.get(variables.$spacers, 3); + margin-block: map.get(variables.$spacers-block, 3); grid-column-start: 2; } .si-weather-widget-forecast-extra { display: inline-flex; align-items: center; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); white-space: nowrap; } @@ -203,8 +203,8 @@ display: inline-flex; align-items: baseline; justify-content: flex-end; - gap: map.get(variables.$spacers, 2); - margin-block: map.get(variables.$spacers, 3); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); + margin-block: map.get(variables.$spacers-block, 3); } :host { @@ -215,7 +215,7 @@ // horizontal strip layout display: flex; flex-wrap: wrap; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } .si-weather-widget-forecast.si-weather-widget-vertical { @@ -271,24 +271,24 @@ display: flex; flex-direction: column; align-items: center; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); text-align: center; } // Horizontal-layout variant: add block padding to each forecast column so the // items don't sit flush against the top/bottom of the strip. .si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day { - padding-block: map.get(variables.$spacers, 1); + padding-block: map.get(variables.$spacers-block, 1); } .si-weather-widget-forecast.si-weather-widget-horizontal .si-weather-widget-forecast-day-label { - margin-block: map.get(variables.$spacers, 0); + margin-block: map.get(variables.$spacers-block, 0); } .si-weather-widget-forecast-extra-icon { display: inline-flex; vertical-align: middle; - margin-inline-end: map.get(variables.$spacers, 1); + margin-inline-end: map.get(variables.$spacers-inline, 1); color: variables.$element-text-secondary; - margin-block: map.get(variables.$spacers, 3); + margin-block: map.get(variables.$spacers-block, 3); } diff --git a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-skeleton.component.scss b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-skeleton.component.scss index 5859d8cc0d..bd7ece714b 100644 --- a/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-skeleton.component.scss +++ b/projects/element-ng/dashboard/widgets/si-weather-widget/si-weather-widget-skeleton.component.scss @@ -6,14 +6,14 @@ $si-weather-illustration-size: 40px; :host { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 3); + gap: map.get(variables.$spacers-block, 3) map.get(variables.$spacers-inline, 3); } .si-weather-widget-skeleton-row { display: flex; align-items: stretch; justify-content: space-between; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } .si-weather-widget-skeleton-col { @@ -21,7 +21,7 @@ $si-weather-illustration-size: 40px; flex: 0 0 auto; flex-direction: column; align-items: flex-end; - gap: map.get(variables.$spacers, 3); + gap: map.get(variables.$spacers-block, 3) map.get(variables.$spacers-inline, 3); } .si-weather-widget-skeleton-illustration { diff --git a/projects/element-ng/date-range-filter/si-date-range-filter.component.scss b/projects/element-ng/date-range-filter/si-date-range-filter.component.scss index 62dfefdf4f..d86db30ca1 100644 --- a/projects/element-ng/date-range-filter/si-date-range-filter.component.scss +++ b/projects/element-ng/date-range-filter/si-date-range-filter.component.scss @@ -2,14 +2,14 @@ @use '@siemens/element-theme/src/styles/variables'; // width of the date-picker: 8 cells + px-9 -$datepicker-width: calc(#{8 * 2rem} + #{2 * map.get(variables.$spacers, 9)}); +$datepicker-width: calc(#{8 * 2rem} + 2 * map.get(variables.$spacers-inline, 9)); // calendar: 7 rows × 2rem + 8 border-spacing gaps × 3px (6 between rows + 1 before + 1 after). // header: 1rem + py-5 + py-5 + 1px border // today: 1rem + py-5 + mt-2 // gap: 2 * gap-6 $datepicker-height: calc( - 16rem + #{8 * 3px + 6 * map.get(variables.$spacers, 5) + 2 * map.get(variables.$spacers, 6) + - 1px + map.get(variables.$spacers, 2)} + 16rem + 8 * 3px + 6 * map.get(variables.$spacers-block, 5) + 2 * + map.get(variables.$spacers-block, 6) + 1px + map.get(variables.$spacers-block, 2) ); :host { @@ -38,7 +38,7 @@ $datepicker-height: calc( .preset-select { display: flex; - inline-size: calc(9.5rem + #{2 * map.get(variables.$spacers, 8)}); + inline-size: calc(9.5rem + 2 * map.get(variables.$spacers-inline, 8)); flex-direction: column; grid-area: preset; background: variables.$element-base-1; diff --git a/projects/element-ng/datepicker/si-calendar-button.component.scss b/projects/element-ng/datepicker/si-calendar-button.component.scss index 684e903d0f..3ea3815664 100644 --- a/projects/element-ng/datepicker/si-calendar-button.component.scss +++ b/projects/element-ng/datepicker/si-calendar-button.component.scss @@ -4,6 +4,6 @@ :host { --si-action-icon-offset: calc( - #{si-vars.$si-icon-font-size} + #{map.get(all-variables.$spacers, 1) * 3} + #{si-vars.$si-icon-font-size} + #{map.get(all-variables.$spacers-block, 1)} * 3 ); } diff --git a/projects/element-ng/datepicker/si-datepicker.component.scss b/projects/element-ng/datepicker/si-datepicker.component.scss index c292647b4a..2c774b5d37 100644 --- a/projects/element-ng/datepicker/si-datepicker.component.scss +++ b/projects/element-ng/datepicker/si-datepicker.component.scss @@ -48,8 +48,8 @@ } .header { - padding-block: map.get(variables.$spacers, 5); - padding-inline: map.get(variables.$spacers, 9); + padding-block: map.get(variables.$spacers-block, 5); + padding-inline: map.get(variables.$spacers-inline, 9); border-block-end: 1px solid variables.$element-ui-4; a { @@ -59,7 +59,7 @@ } .footer { - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); } .calendar-table { diff --git a/projects/element-ng/datepicker/si-timepicker.component.scss b/projects/element-ng/datepicker/si-timepicker.component.scss index d7769f36ce..c43cbd2435 100644 --- a/projects/element-ng/datepicker/si-timepicker.component.scss +++ b/projects/element-ng/datepicker/si-timepicker.component.scss @@ -1,8 +1,6 @@ @use 'sass:map'; @use '@siemens/element-theme/src/styles/bootstrap/variables'; -$padding: 2 * (variables.$input-padding-x + variables.$input-border-width); - :host { display: block; @@ -18,6 +16,6 @@ $padding: 2 * (variables.$input-padding-x + variables.$input-border-width); } input { - inline-size: calc(3ch + $padding); + inline-size: calc(3ch + 2 * variables.$input-padding-x-full); } } diff --git a/projects/element-ng/empty-state/si-empty-state.component.scss b/projects/element-ng/empty-state/si-empty-state.component.scss index a6dc456255..2ba5269c25 100644 --- a/projects/element-ng/empty-state/si-empty-state.component.scss +++ b/projects/element-ng/empty-state/si-empty-state.component.scss @@ -8,8 +8,8 @@ flex-direction: column; justify-content: center; align-items: center; - padding-inline: map.get(variables.$spacers, 8); - padding-block: map.get(variables.$spacers, 9); + padding-inline: map.get(variables.$spacers-inline, 8); + padding-block: map.get(variables.$spacers-block, 9); } .state-icon { diff --git a/projects/element-ng/file-uploader/si-file-uploader.component.scss b/projects/element-ng/file-uploader/si-file-uploader.component.scss index 6bc3b10ed6..06de45a4d3 100644 --- a/projects/element-ng/file-uploader/si-file-uploader.component.scss +++ b/projects/element-ng/file-uploader/si-file-uploader.component.scss @@ -33,8 +33,10 @@ .file { display: flex; position: relative; - margin-block-end: map.get(variables.$spacers, 4); - min-block-size: map.get(variables.$spacers, 4) + map.get(variables.$spacers, 10); + margin-block-end: map.get(variables.$spacers-block, 4); + min-block-size: calc( + map.get(variables.$spacers-block, 4) + map.get(variables.$spacers-block, 10) + ); transition: opacity variables.$element-default-transition-duration; } diff --git a/projects/element-ng/filter-bar/si-filter-bar.component.scss b/projects/element-ng/filter-bar/si-filter-bar.component.scss index ff2446f434..e336961b6c 100644 --- a/projects/element-ng/filter-bar/si-filter-bar.component.scss +++ b/projects/element-ng/filter-bar/si-filter-bar.component.scss @@ -2,12 +2,12 @@ @use '@siemens/element-theme/src/styles/all-variables'; -$list-header-filter-padding-horizontal: map.get(all-variables.$spacers, 5); -$list-header-filter-padding-vertical: map.get(all-variables.$spacers, 3); +$list-header-filter-padding-horizontal: map.get(all-variables.$spacers-inline, 5); +$list-header-filter-padding-vertical: map.get(all-variables.$spacers-block, 3); $filter-bar-background-color: all-variables.$element-base-0; :host { - --filter-pill-gap: #{map.get(all-variables.$spacers, 4)}; + --filter-pill-gap: #{map.get(all-variables.$spacers-block, 4)}; } :host.reset .responsive .list-text { diff --git a/projects/element-ng/filter-bar/si-filter-pill.component.scss b/projects/element-ng/filter-bar/si-filter-pill.component.scss index 331480652b..ed105eb36c 100644 --- a/projects/element-ng/filter-bar/si-filter-pill.component.scss +++ b/projects/element-ng/filter-bar/si-filter-pill.component.scss @@ -2,7 +2,7 @@ @use '@siemens/element-theme/src/styles/variables'; -$filter-pill-height: map.get(variables.$spacers, 9); +$filter-pill-height: map.get(variables.$spacers-block, 9); :host { --filter-pill-background-color: #{variables.$element-base-1}; @@ -13,7 +13,7 @@ $filter-pill-height: map.get(variables.$spacers, 9); } .pill { - margin-inline-start: var(--filter-pill-gap, #{map.get(variables.$spacers, 4)}); + margin-inline-start: var(--filter-pill-gap, #{map.get(variables.$spacers-inline, 4)}); } .wrapper { @@ -34,12 +34,12 @@ $filter-pill-height: map.get(variables.$spacers, 9); .value { color: variables.$element-text-primary; white-space: nowrap; - margin-inline-end: map.get(variables.$spacers, 2); + margin-inline-end: map.get(variables.$spacers-inline, 2); } &.disabled, &.disabled .value { - padding-inline-end: map.get(variables.$spacers, 1); + padding-inline-end: map.get(variables.$spacers-inline, 1); color: variables.$element-text-disabled; } } diff --git a/projects/element-ng/filtered-search/si-filtered-search-value.component.scss b/projects/element-ng/filtered-search/si-filtered-search-value.component.scss index f2ee994235..ea448fcabb 100644 --- a/projects/element-ng/filtered-search/si-filtered-search-value.component.scss +++ b/projects/element-ng/filtered-search/si-filtered-search-value.component.scss @@ -21,8 +21,8 @@ } .operator-input { - padding-inline: map.get(variables.$spacers, 2); - inline-size: calc(1ch + #{2 * map.get(variables.$spacers, 2)}); + padding-inline: map.get(variables.$spacers-inline, 2); + inline-size: calc(1ch + 2 * map.get(variables.$spacers-inline, 2)); } input { diff --git a/projects/element-ng/filtered-search/si-filtered-search.component.scss b/projects/element-ng/filtered-search/si-filtered-search.component.scss index beef3f5848..3c438bb22a 100644 --- a/projects/element-ng/filtered-search/si-filtered-search.component.scss +++ b/projects/element-ng/filtered-search/si-filtered-search.component.scss @@ -2,8 +2,8 @@ @use '@siemens/element-theme/src/styles/variables'; -$filtered-search-line-height: map.get(variables.$spacers, 8); -$filtered-search-criteria-margin: map.get(variables.$spacers, 2); +$filtered-search-line-height: map.get(variables.$spacers-block, 8); +$filtered-search-criteria-margin: map.get(variables.$spacers-block, 2); :host { --search-bar-icon-color: #{variables.$element-text-primary}; @@ -34,14 +34,14 @@ $filtered-search-criteria-margin: map.get(variables.$spacers, 2); border-start-start-radius: 4px; border-end-start-radius: 4px; background-color: var(--filter-search-background-color); - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); } .clear-button-container { display: flex; align-items: flex-start; align-self: stretch; - padding-block: map.get(variables.$spacers, 2); + padding-block: map.get(variables.$spacers-block, 2); background-color: var(--filter-search-background-color); } @@ -58,7 +58,7 @@ $filtered-search-criteria-margin: map.get(variables.$spacers, 2); block-size: auto; inline-size: auto; padding-inline: map.get( - variables.$spacers, + variables.$spacers-block, 2 ) !important; // stylelint-disable-line declaration-no-important } diff --git a/projects/element-ng/footer/si-footer.component.scss b/projects/element-ng/footer/si-footer.component.scss index e3eb9690bc..03498a0f58 100644 --- a/projects/element-ng/footer/si-footer.component.scss +++ b/projects/element-ng/footer/si-footer.component.scss @@ -2,9 +2,9 @@ @use '@siemens/element-theme/src/styles/variables'; -$page-footer-padding: map.get(variables.$spacers, 5); +$page-footer-padding: map.get(variables.$spacers-block, 5); $footer-separator-content: '|' !default; -$footer-separator-padding: map.get(variables.$spacers, 4); +$footer-separator-padding: map.get(variables.$spacers-inline, 4); footer { margin-block-end: 0; diff --git a/projects/element-ng/form/si-form-field/si-form-field.component.scss b/projects/element-ng/form/si-form-field/si-form-field.component.scss index 5a12c13318..1fadf617e2 100644 --- a/projects/element-ng/form/si-form-field/si-form-field.component.scss +++ b/projects/element-ng/form/si-form-field/si-form-field.component.scss @@ -2,7 +2,7 @@ @use '@siemens/element-theme/src/styles/all-variables'; :host { - margin-block-end: map.get(all-variables.$spacers, 5); + margin-block-end: map.get(all-variables.$spacers-block, 5); } :host-context(si-form-fieldset) { diff --git a/projects/element-ng/form/si-form.shared.scss b/projects/element-ng/form/si-form.shared.scss index 2d035dff8b..0e0b747b2d 100644 --- a/projects/element-ng/form/si-form.shared.scss +++ b/projects/element-ng/form/si-form.shared.scss @@ -6,7 +6,7 @@ :host.si-form-input { display: flex; flex-direction: column; - margin-block-end: map.get(all-variables.$spacers, 5); + margin-block-end: map.get(all-variables.$spacers-block, 5); .form-item-content { flex-grow: 1; @@ -46,7 +46,7 @@ all-variables.$input-padding-y, all-variables.$input-border-width ); - padding-inline: map.get(all-variables.$spacers, 6); + padding-inline: map.get(all-variables.$spacers-inline, 6); inline-size: var(--si-form-label-width, math.percentage(math.div(2, 12))); line-height: all-variables.$input-line-height; @@ -56,7 +56,7 @@ } :host-context(si-form-fieldset) .form-label { - padding-block: map.get(all-variables.$spacers, 1) 0; + padding-block: map.get(all-variables.$spacers-block, 1) 0; } :host(.form-check) { diff --git a/projects/element-ng/info-page/si-info-page.component.scss b/projects/element-ng/info-page/si-info-page.component.scss index 16b970c62c..725cacb1aa 100644 --- a/projects/element-ng/info-page/si-info-page.component.scss +++ b/projects/element-ng/info-page/si-info-page.component.scss @@ -18,7 +18,7 @@ .si-info-page-link, .si-info-action-container:not(:empty) { - margin-block-start: map.get(all-variables.$spacers, 9); + margin-block-start: map.get(all-variables.$spacers-block, 9); } @include all-variables.media-breakpoint-down(sm) { diff --git a/projects/element-ng/landing-page/login-basic/si-login-basic.component.scss b/projects/element-ng/landing-page/login-basic/si-login-basic.component.scss index 4a242c0437..5b97189646 100644 --- a/projects/element-ng/landing-page/login-basic/si-login-basic.component.scss +++ b/projects/element-ng/landing-page/login-basic/si-login-basic.component.scss @@ -29,7 +29,7 @@ } .login-basic-next-button { - margin-block-start: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 4); } } } @@ -45,12 +45,12 @@ .login-basic-second-step--content { @extend .toggle-content-transition; - transform: translateY(map.get(variables.$spacers, 3) * -1); + transform: translateY(map.get(variables.$negative-spacers-block, 3)); } .login-basic-next-button { @extend .toggle-content-transition; margin-block-start: 0; - transform: translateY(map.get(variables.$spacers, 3)); + transform: translateY(map.get(variables.$spacers-block, 3)); transition: margin var(--animation-duration) ease; } diff --git a/projects/element-ng/landing-page/si-landing-page.component.scss b/projects/element-ng/landing-page/si-landing-page.component.scss index 1617a47092..469f758b91 100644 --- a/projects/element-ng/landing-page/si-landing-page.component.scss +++ b/projects/element-ng/landing-page/si-landing-page.component.scss @@ -2,13 +2,13 @@ @use '@siemens/element-theme/src/styles/all-variables'; -$margin-content: map.get(all-variables.$spacers, 11); -$margin-content-large-tablet: map.get(all-variables.$spacers, 10); -$margin-content-tablet: map.get(all-variables.$spacers, 9); -$margin-content-mobile: map.get(all-variables.$spacers, 9); +$margin-content: map.get(all-variables.$spacers-block, 11); +$margin-content-large-tablet: map.get(all-variables.$spacers-block, 10); +$margin-content-tablet: map.get(all-variables.$spacers-block, 9); +$margin-content-mobile: map.get(all-variables.$spacers-block, 9); -$margin-bottom-header: map.get(all-variables.$spacers, 9); -$margin-bottom-footer: map.get(all-variables.$spacers, 9); +$margin-bottom-header: map.get(all-variables.$spacers-block, 9); +$margin-bottom-footer: map.get(all-variables.$spacers-block, 9); :host { display: flex; diff --git a/projects/element-ng/language-switcher/si-language-switcher.component.scss b/projects/element-ng/language-switcher/si-language-switcher.component.scss index c7185cfd66..26a41cda61 100644 --- a/projects/element-ng/language-switcher/si-language-switcher.component.scss +++ b/projects/element-ng/language-switcher/si-language-switcher.component.scss @@ -11,7 +11,7 @@ background-color: transparent; border: 0; border-block-end: 1px solid var(--input-border-color); - padding: map.get(all-variables.$spacers, 3); + padding: map.get(all-variables.$spacers-block, 3) map.get(all-variables.$spacers-inline, 3); cursor: pointer; color: var(--language-switcher-color); diff --git a/projects/element-ng/list-details/si-details-pane-footer/si-details-pane-footer.component.scss b/projects/element-ng/list-details/si-details-pane-footer/si-details-pane-footer.component.scss index 99d555ed3f..ff80f3a6f8 100644 --- a/projects/element-ng/list-details/si-details-pane-footer/si-details-pane-footer.component.scss +++ b/projects/element-ng/list-details/si-details-pane-footer/si-details-pane-footer.component.scss @@ -6,6 +6,6 @@ flex-direction: row; flex: none; border-block-start: 1px solid variables.$element-ui-4; - gap: map.get(variables.$spacers, 6); - padding: map.get(variables.$spacers, 6); + gap: map.get(variables.$spacers-block, 6) map.get(variables.$spacers-inline, 6); + padding: map.get(variables.$spacers-block, 6) map.get(variables.$spacers-inline, 6); } diff --git a/projects/element-ng/list-details/si-list-details.component.scss b/projects/element-ng/list-details/si-list-details.component.scss index ae31c00615..c75b46ab5d 100644 --- a/projects/element-ng/list-details/si-list-details.component.scss +++ b/projects/element-ng/list-details/si-list-details.component.scss @@ -4,7 +4,7 @@ :host { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 6); + gap: map.get(variables.$spacers-block, 6) map.get(variables.$spacers-inline, 6); contain: layout; ::ng-deep { diff --git a/projects/element-ng/list-details/si-list-pane-header/si-list-pane-header.component.scss b/projects/element-ng/list-details/si-list-pane-header/si-list-pane-header.component.scss index 995d34f710..e26bb06feb 100644 --- a/projects/element-ng/list-details/si-list-pane-header/si-list-pane-header.component.scss +++ b/projects/element-ng/list-details/si-list-pane-header/si-list-pane-header.component.scss @@ -7,9 +7,9 @@ justify-content: space-between; inline-size: 100%; flex: none; - gap: map.get(variables.$spacers, 3); - padding-block: map.get(variables.$spacers, 5); - padding-inline: map.get(variables.$spacers, 6); + gap: map.get(variables.$spacers-block, 3) map.get(variables.$spacers-inline, 3); + padding-block: map.get(variables.$spacers-block, 5); + padding-inline: map.get(variables.$spacers-inline, 6); ::ng-deep si-menu-bar si-menu-item { block-size: auto; diff --git a/projects/element-ng/main-detail-container/si-main-detail-container.component.scss b/projects/element-ng/main-detail-container/si-main-detail-container.component.scss index 34df206047..ec3262bb35 100644 --- a/projects/element-ng/main-detail-container/si-main-detail-container.component.scss +++ b/projects/element-ng/main-detail-container/si-main-detail-container.component.scss @@ -15,7 +15,7 @@ + { [slot='mainActions'] { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } } } @@ -36,7 +36,7 @@ .detail-heading { + [slot='detailActions'] { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } } @@ -130,6 +130,6 @@ .main-search-actions:not(:empty), .detail-heading-actions:not(:empty) { - min-block-size: calc(1lh + 2 * map.get(variables.$spacers, 4)); - margin-block-end: map.get(variables.$spacers, 6); + min-block-size: calc(1lh + 2 * map.get(variables.$spacers-block, 4)); + margin-block-end: map.get(variables.$spacers-block, 6); } diff --git a/projects/element-ng/maplibre/styles/maplibre-gl.scss b/projects/element-ng/maplibre/styles/maplibre-gl.scss index 7a0eae316f..154914e1fd 100644 --- a/projects/element-ng/maplibre/styles/maplibre-gl.scss +++ b/projects/element-ng/maplibre/styles/maplibre-gl.scss @@ -2,10 +2,15 @@ @use '@siemens/element-theme/src/styles/variables'; @use '@siemens/element-theme/src/styles/variables/semantic-tokens'; -$button-block-size: calc(1rem + 2 * map.get(variables.$spacers, 4)); -$outer-ctrl-margin: map.get(variables.$spacers, 3); -$attrib-icon-size: map.get(variables.$spacers, 8); -$attrib-compact-padding: map.get(variables.$spacers, 8) + map.get(variables.$spacers, 2); +$button-block-size: calc(1rem + 2 * map.get(variables.$spacers-block, 4)); +$button-inline-size: calc(1rem + 2 * map.get(variables.$spacers-inline, 4)); +$outer-ctrl-margin-block: map.get(variables.$spacers-block, 3); +$outer-ctrl-margin-inline: map.get(variables.$spacers-inline, 3); +$attrib-icon-block-size: map.get(variables.$spacers-block, 8); +$attrib-icon-inline-size: map.get(variables.$spacers-inline, 8); +$attrib-compact-padding: calc( + map.get(variables.$spacers-inline, 8) + map.get(variables.$spacers-inline, 2) +); // Element icon assets are resolved and emitted by the consumer's Sass build. $icon-attribution: url('@siemens/element-icons/icons/element-state-info.svg'); @@ -113,15 +118,15 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); inset-inline-start: 0; .maplibregl-ctrl { - margin-block: $outer-ctrl-margin 0; - margin-inline: $outer-ctrl-margin 0; + margin-block: $outer-ctrl-margin-block 0; + margin-inline: $outer-ctrl-margin-inline 0; float: inline-start; } > .maplibregl-ctrl-attrib.maplibregl-compact-show { - padding-block: map.get(variables.$spacers, 1); - padding-inline: $attrib-compact-padding map.get(variables.$spacers, 4); - border-radius: map.get(variables.$spacers, 5); + padding-block: map.get(variables.$spacers-block, 1); + padding-inline: $attrib-compact-padding map.get(variables.$spacers-inline, 4); + border-radius: map.get(variables.$spacers-block, 5); } .maplibregl-ctrl-attrib-button { @@ -139,8 +144,8 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); inset-inline-end: 0; .maplibregl-ctrl { - margin-block: $outer-ctrl-margin 0; - margin-inline: 0 $outer-ctrl-margin; + margin-block: $outer-ctrl-margin-block 0; + margin-inline: 0 $outer-ctrl-margin-inline; float: inline-end; } @@ -155,15 +160,15 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); inset-inline-start: 0; .maplibregl-ctrl { - margin-block: 0 $outer-ctrl-margin; - margin-inline: $outer-ctrl-margin 0; + margin-block: 0 $outer-ctrl-margin-block; + margin-inline: $outer-ctrl-margin-inline 0; float: inline-start; } > .maplibregl-ctrl-attrib.maplibregl-compact-show { - padding-block: map.get(variables.$spacers, 1); - padding-inline: $attrib-compact-padding map.get(variables.$spacers, 4); - border-radius: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 1); + padding-inline: $attrib-compact-padding map.get(variables.$spacers-inline, 4); + border-radius: map.get(variables.$spacers-block, 4); } .maplibregl-ctrl-attrib-button { @@ -181,8 +186,8 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); inset-block-end: 0; .maplibregl-ctrl { - margin-block: 0 $outer-ctrl-margin; - margin-inline: 0 $outer-ctrl-margin; + margin-block: 0 $outer-ctrl-margin-block; + margin-inline: 0 $outer-ctrl-margin-inline; float: inline-end; } @@ -202,10 +207,10 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); .maplibregl-ctrl-group { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); button { - inline-size: $button-block-size; + inline-size: $button-inline-size; block-size: $button-block-size; display: flex; justify-content: center; @@ -319,7 +324,7 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); .maplibregl-ctrl.maplibregl-ctrl-attrib { @extend %base-control; padding-block: 0; - padding-inline: map.get(variables.$spacers, 3); + padding-inline: map.get(variables.$spacers-inline, 3); color: variables.$element-action-secondary-text; margin: 0; } @@ -341,11 +346,11 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); background: variables.$element-base-3; min-block-size: 20px; - padding-block: map.get(variables.$spacers, 1); - padding-inline: 0 map.get(variables.$spacers, 8); - margin: $outer-ctrl-margin; + padding-block: map.get(variables.$spacers-block, 1); + padding-inline: 0 map.get(variables.$spacers-inline, 8); + margin: $outer-ctrl-margin-block $outer-ctrl-margin-inline; position: relative; - border-radius: map.get(variables.$spacers, 5); + border-radius: map.get(variables.$spacers-block, 5); box-sizing: content-box; .maplibregl-ctrl-attrib-inner { @@ -368,8 +373,8 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); } &.maplibregl-compact-show { - padding-block: map.get(variables.$spacers, 1); - padding-inline: map.get(variables.$spacers, 4) $attrib-compact-padding; + padding-block: map.get(variables.$spacers-block, 1); + padding-inline: map.get(variables.$spacers-inline, 4) $attrib-compact-padding; visibility: visible; .maplibregl-ctrl-attrib-inner { @@ -381,10 +386,10 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); display: none; cursor: pointer; position: absolute; - inline-size: $attrib-icon-size; - block-size: $attrib-icon-size; + inline-size: $attrib-icon-inline-size; + block-size: $attrib-icon-block-size; box-sizing: border-box; - border-radius: map.get(variables.$spacers, 5); + border-radius: map.get(variables.$spacers-block, 5); outline: none; inset-block-start: 0; inset-inline-end: 0; @@ -427,11 +432,11 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); font-size: 10px; white-space: nowrap; - border-width: medium map.get(variables.$spacers, 1) map.get(variables.$spacers, 1); + border-width: medium map.get(variables.$spacers-block, 1) map.get(variables.$spacers-block, 1); border-style: none solid solid; border-color: variables.$element-action-secondary-text; padding-block: 0; - padding-inline: map.get(variables.$spacers, 2); + padding-inline: map.get(variables.$spacers-inline, 2); color: variables.$element-action-secondary-text; box-sizing: border-box; } @@ -543,7 +548,7 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); position: relative; border-radius: 3px; - box-shadow: 0 1px map.get(variables.$spacers, 1) rgb(0 0 0 / 0.1); + box-shadow: 0 1px map.get(variables.$spacers-block, 1) rgb(0 0 0 / 0.1); padding-block: 15px; padding-inline: 10px; pointer-events: auto; @@ -663,7 +668,7 @@ $icon-terrain: url('@siemens/element-icons/icons/element-waters.svg'); inline-size: 0; block-size: 0; background: rgb(255 255 255); - border: map.get(variables.$spacers, 1) dotted rgb(32 32 32); + border: map.get(variables.$spacers-block, 1) dotted rgb(32 32 32); opacity: 0.5; } diff --git a/projects/element-ng/menu/si-menu-item.component.scss b/projects/element-ng/menu/si-menu-item.component.scss index 57e926df0e..cb80a93f2c 100644 --- a/projects/element-ng/menu/si-menu-item.component.scss +++ b/projects/element-ng/menu/si-menu-item.component.scss @@ -20,7 +20,7 @@ :host-context(si-menu-bar, si-content-action-bar) { color: system-tokens.$si-sys-text-accent; background: system-tokens.$si-sys-background-1; - padding-inline: map.get(variables.$spacers, 4); + padding-inline: map.get(variables.$spacers-inline, 4); .item-wrapper { justify-content: center; @@ -46,7 +46,7 @@ } .icon + .item-title { - padding-inline-start: map.get(variables.$spacers, 2); + padding-inline-start: map.get(variables.$spacers-inline, 2); } .item-end .submenu { @@ -66,7 +66,7 @@ .item-title { padding-inline-start: map.get( - variables.$spacers, + variables.$spacers-block, 2 ) !important; // stylelint-disable-line declaration-no-important } diff --git a/projects/element-ng/navbar-vertical-next/_si-navbar-vertical-next-layout.scss b/projects/element-ng/navbar-vertical-next/_si-navbar-vertical-next-layout.scss index 8648eb21f0..f80c1bbdbb 100644 --- a/projects/element-ng/navbar-vertical-next/_si-navbar-vertical-next-layout.scss +++ b/projects/element-ng/navbar-vertical-next/_si-navbar-vertical-next-layout.scss @@ -17,13 +17,13 @@ $vertical-nav-top-offset: calc( ); // Height of the toggle button; the chip must match this to fuse cleanly. -$toggle-size: calc(1lh + (2 * map.get(all-variables.$spacers, 4))); +$toggle-size: calc(1lh + (2 * map.get(all-variables.$spacers-block, 4))); // Position of the parked toggle/chip when the nav is collapsed (in-page slot). // Inline-start uses a CSS custom property so it can track `.si-layout-main-padding` // across breakpoints (16px below md, 32px from md up). $toggle-parked-block-start: calc( - #{$vertical-nav-top-offset} + #{map.get(all-variables.$spacers, 6)} + #{$vertical-nav-top-offset} + #{map.get(all-variables.$spacers-block, 6)} ); $toggle-parked-inline-start: var(--si-navbar-parked-inline-start); diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.scss index d375928496..719c59a0c0 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-divider.component.scss @@ -5,6 +5,6 @@ display: block; block-size: 1px; background-color: variables.$element-ui-4; - margin-block: map.get(variables.$spacers, 3); - margin-inline: map.get(variables.$spacers, 5); + margin-block: map.get(variables.$spacers-block, 3); + margin-inline: map.get(variables.$spacers-inline, 5); } diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-footer-items.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-footer-items.component.scss index 19810db970..c35c4da3f2 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-footer-items.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-footer-items.component.scss @@ -5,7 +5,7 @@ display: block; overflow-x: hidden; margin-block-start: auto; - padding-block-end: map.get(all-variables.$spacers, 4); + padding-block-end: map.get(all-variables.$spacers-block, 4); } :host-context(.nav-collapsed) { diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.scss index df4a26fbc9..5895739026 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-header.component.scss @@ -15,7 +15,7 @@ $transition-duration: variables.element-transition-duration(0.25s); :host { display: flex; align-items: center; - block-size: calc(1lh + (2 * map.get(variables.$spacers, 5))); + block-size: calc(1lh + (2 * map.get(variables.$spacers-block, 5))); transition: block-size variables.$element-default-transition-duration ease-out; &.collapsed { diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.scss index f47ff0105a..4f3f72dda0 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-item.component.scss @@ -11,23 +11,23 @@ background: none; border: 0; font-size: variables.$si-font-size-body; - padding-block: map.get(variables.$spacers, 4); - padding-inline: 0 map.get(variables.$spacers, 5); + padding-block: map.get(variables.$spacers-block, 4); + padding-inline: 0 map.get(variables.$spacers-inline, 5); min-inline-size: 0; - min-block-size: calc(1lh + (2 * map.get(variables.$spacers, 5))); + min-block-size: calc(1lh + (2 * map.get(variables.$spacers-block, 5))); inline-size: 100%; border-radius: 0; .item-title { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } .icon-lg { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } .icon-lg + .item-title { - margin-inline-start: map.get(variables.$spacers, 4); + margin-inline-start: map.get(variables.$spacers-inline, 4); } &.show .badge:not(.badge-collapsed) { @@ -71,7 +71,7 @@ + :host(.navbar-vertical-item), :host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor) + :host(.navbar-vertical-item) { - margin-block-start: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 4); } :host-context(.nav-text-only si-navbar-vertical-next-group) .item-title { @@ -79,7 +79,7 @@ } :host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) { - padding-inline-start: map.get(variables.$spacers, 9); + padding-inline-start: map.get(variables.$spacers-inline, 9); .item-title { font-weight: normal; @@ -97,8 +97,8 @@ :host-context(.nav-collapsed) { .badge { position: absolute; - inset-block-start: map.get(variables.$spacers, 2); - inset-inline-end: map.get(variables.$spacers, 3); + inset-block-start: map.get(variables.$spacers-block, 2); + inset-inline-end: map.get(variables.$spacers-inline, 3); @include badge-text.badge-text(); &.badge-text-only { diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-items.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-items.component.scss index 3fc3b3ca93..99bcc6b31d 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-items.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-items.component.scss @@ -7,7 +7,7 @@ min-block-size: 0; flex: 1 0 0; overflow-y: auto; - margin-block-start: map.get(all-variables.$spacers, 4); + margin-block-start: map.get(all-variables.$spacers-block, 4); } :host-context(.nav-collapsed) { diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-search.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-search.component.scss index 022edb6dba..b1700d81db 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-search.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next-search.component.scss @@ -4,8 +4,8 @@ :host { display: flex; align-items: center; - margin-block-start: map.get(all-variables.$spacers, 4); - padding-block: map.get(all-variables.$spacers, 2); + margin-block-start: map.get(all-variables.$spacers-block, 4); + padding-block: map.get(all-variables.$spacers-block, 2); overflow-x: hidden; } @@ -26,7 +26,7 @@ si-search-bar { border: 0; border-radius: all-variables.$element-radius-2; block-size: all-variables.$input-height; - inline-size: calc(1.5rem + 2 * map.get(all-variables.$spacers, 2)); + inline-size: calc(1.5rem + 2 * map.get(all-variables.$spacers-inline, 2)); text-align: start; } diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss index 11a9deeee5..83d7d012e8 100644 --- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss +++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss @@ -7,10 +7,10 @@ @use './si-navbar-vertical-next-layout' as layout; $vertical-nav-width: 240px; -$vertical-nav-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers, 5)); -$mobile-drawer-padding-block: map.get(all-variables.$spacers, 2); -$mobile-drawer-padding-inline: map.get(all-variables.$spacers, 4); -$mobile-drawer-margin-block-start: map.get(all-variables.$spacers, 4); +$vertical-nav-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers-inline, 5)); +$mobile-drawer-padding-block: map.get(all-variables.$spacers-block, 2); +$mobile-drawer-padding-inline: map.get(all-variables.$spacers-inline, 4); +$mobile-drawer-margin-block-start: map.get(all-variables.$spacers-block, 4); // Position of the toggle in the nav's expanded layout (top-right of nav). $toggle-expanded-block-start: calc( @@ -148,10 +148,10 @@ nav { --si-layout-header-first-element-offset: 0; // Match `.si-layout-main-padding` so the parked toggle/chip align with page content. - --si-navbar-parked-inline-start: #{map.get(all-variables.$spacers, 6)}; + --si-navbar-parked-inline-start: #{map.get(all-variables.$spacers-inline, 6)}; @include all-variables.media-breakpoint-up(md) { - --si-navbar-parked-inline-start: #{map.get(all-variables.$spacers, 9)}; + --si-navbar-parked-inline-start: #{map.get(all-variables.$spacers-inline, 9)}; } nav { @@ -203,7 +203,7 @@ nav { &.nav-collapsed { .toggle-placeholder { block-size: layout.$toggle-size; - margin-block-start: map.get(all-variables.$spacers, 6); + margin-block-start: map.get(all-variables.$spacers-block, 6); } .toggle-button { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.scss index d375928496..719c59a0c0 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.scss +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-divider.component.scss @@ -5,6 +5,6 @@ display: block; block-size: 1px; background-color: variables.$element-ui-4; - margin-block: map.get(variables.$spacers, 3); - margin-inline: map.get(variables.$spacers, 5); + margin-block: map.get(variables.$spacers-block, 3); + margin-inline: map.get(variables.$spacers-inline, 5); } diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss index 537ed1cc77..a9444514f9 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss @@ -15,7 +15,7 @@ $transition-duration: variables.element-transition-duration(0.25s); :host { display: flex; align-items: center; - block-size: calc(1lh + (2 * map.get(variables.$spacers, 5))); + block-size: calc(1lh + (2 * map.get(variables.$spacers-block, 5))); transition: block-size variables.$element-default-transition-duration ease-out; &.collapsed { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss index 460c6ee9eb..e698863af7 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss @@ -11,23 +11,23 @@ background: none; border: 0; font-size: variables.$si-font-size-body; - padding-block: map.get(variables.$spacers, 4); - padding-inline: 0 map.get(variables.$spacers, 5); + padding-block: map.get(variables.$spacers-block, 4); + padding-inline: 0 map.get(variables.$spacers-inline, 5); min-inline-size: 0; - min-block-size: calc(1lh + (2 * map.get(variables.$spacers, 5))); + min-block-size: calc(1lh + (2 * map.get(variables.$spacers-block, 5))); inline-size: 100%; border-radius: 0; .item-title { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } .icon-lg { - margin-inline-start: map.get(variables.$spacers, 5); + margin-inline-start: map.get(variables.$spacers-inline, 5); } .icon-lg + .item-title { - margin-inline-start: map.get(variables.$spacers, 4); + margin-inline-start: map.get(variables.$spacers-inline, 4); } &.show .badge:not(.badge-collapsed) { @@ -63,7 +63,7 @@ :host-context(.nav-scroll > .navbar-vertical-item) + :host(.navbar-vertical-item), :host-context(.nav-scroll > si-navbar-vertical-group) + :host(.navbar-vertical-item), :host-context(.nav-scroll > si-navbar-flyout-anchor) + :host(.navbar-vertical-item) { - margin-block-start: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 4); } :host-context(.nav-text-only si-navbar-vertical-group) .item-title { @@ -71,7 +71,7 @@ } :host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) { - padding-inline-start: map.get(variables.$spacers, 9); + padding-inline-start: map.get(variables.$spacers-inline, 9); .item-title { font-weight: normal; @@ -89,8 +89,8 @@ @include badge-text.badge-text(); position: absolute; - inset-block-start: map.get(variables.$spacers, 2); - inset-inline-end: map.get(variables.$spacers, 3); + inset-block-start: map.get(variables.$spacers-block, 2); + inset-inline-end: map.get(variables.$spacers-inline, 3); &.badge-text-only { color: transparent; @@ -108,7 +108,7 @@ } :host-context(.link-with-items) > :host(button) { - padding-inline: map.get(variables.$spacers, 5); + padding-inline: map.get(variables.$spacers-inline, 5); .item-title, .icon-lg { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss index bf55f22694..e4e7ccab3c 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss @@ -2,7 +2,7 @@ @use '@siemens/element-theme/src/styles/all-variables'; $vertical-nav-width: 240px; -$vertical-nav-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers, 5)); +$vertical-nav-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers-inline, 5)); $vertical-nav-transition-duration: all-variables.$element-default-transition-duration; :host { @@ -48,7 +48,7 @@ nav { min-block-size: 0; flex: 1 0 0; overflow-y: auto; - margin-block-start: map.get(all-variables.$spacers, 4); + margin-block-start: map.get(all-variables.$spacers-block, 4); :host(.nav-collapsed) & { display: none; @@ -80,8 +80,8 @@ nav { .nav-search { display: flex; align-items: center; - margin-block-start: map.get(all-variables.$spacers, 4); - padding-block: map.get(all-variables.$spacers, 2); + margin-block-start: map.get(all-variables.$spacers-block, 4); + padding-block: map.get(all-variables.$spacers-block, 2); overflow-x: hidden; :host(.nav-collapsed) & { @@ -98,7 +98,7 @@ si-search-bar { border: 0; border-radius: all-variables.$element-radius-2; block-size: all-variables.$input-height; - inline-size: calc(1.5rem + 2 * map.get(all-variables.$spacers, 2)); + inline-size: calc(1.5rem + 2 * map.get(all-variables.$spacers-inline, 2)); text-align: start; } diff --git a/projects/element-ng/notification-item/si-notification-item.component.scss b/projects/element-ng/notification-item/si-notification-item.component.scss index 947ded4f75..95ec98e523 100644 --- a/projects/element-ng/notification-item/si-notification-item.component.scss +++ b/projects/element-ng/notification-item/si-notification-item.component.scss @@ -36,24 +36,24 @@ div:has(.notification-item-content a):hover { } &:has(si-avatar) { - margin-inline-end: map.get(variables.$spacers, 6); + margin-inline-end: map.get(variables.$spacers-inline, 6); } &:has(si-circle-status) { - margin-inline-end: map.get(variables.$spacers, 2); + margin-inline-end: map.get(variables.$spacers-inline, 2); } // If si-icon is used for the indicator &:not(:has(si-avatar, si-circle-status)):has(si-icon) { - margin-inline-end: map.get(variables.$spacers, 4); + margin-inline-end: map.get(variables.$spacers-inline, 4); // timestamp plus center alignment to heading - margin-block-start: calc(1lh + map.get(variables.$spacers, 2)); + margin-block-start: calc(1lh + map.get(variables.$spacers-block, 2)); } &:not(:has(si-avatar, si-circle-status, si-icon)) { inline-size: 0; // timestamp plus spacer - margin-block-start: calc(1lh + map.get(variables.$spacers, 3)); + margin-block-start: calc(1lh + map.get(variables.$spacers-block, 3)); div { // Unread heading block-size @@ -73,23 +73,25 @@ div:has(.notification-item-content a):hover { grid-row: 1 / span 2; display: flex; align-items: center; - margin-inline-start: map.get(variables.$spacers, 4); + margin-inline-start: map.get(variables.$spacers-inline, 4); } .notification-item-quick-actions { grid-column: 2; grid-row: 2; display: flex; - gap: map.get(variables.$spacers, 4); - margin-block-start: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); + margin-block-start: map.get(variables.$spacers-block, 4); } .dot { display: block; position: absolute; - block-size: map.get(variables.$spacers, 3); - inline-size: map.get(variables.$spacers, 3); + block-size: map.get(variables.$spacers-block, 3); + inline-size: map.get(variables.$spacers-inline, 3); border-radius: 50%; background-color: variables.$element-ui-1; - inset-inline-start: -1 * (map.get(variables.$spacers, 2) + map.get(variables.$spacers, 3)); + inset-inline-start: calc( + map.get(variables.$negative-spacers-inline, 2) + map.get(variables.$negative-spacers-inline, 3) + ); } diff --git a/projects/element-ng/password-toggle/si-password-toggle.component.scss b/projects/element-ng/password-toggle/si-password-toggle.component.scss index 57d1e2c65c..8dd4d23ddc 100644 --- a/projects/element-ng/password-toggle/si-password-toggle.component.scss +++ b/projects/element-ng/password-toggle/si-password-toggle.component.scss @@ -7,7 +7,7 @@ inline-size: 100%; &.show-visibility-icon { - --si-action-icon-offset: #{24px + map.get(variables.$spacers, 2)}; + --si-action-icon-offset: calc(24px + #{map.get(variables.$spacers-block, 2)}); } // this disables the built-in reveal button in MS Edge diff --git a/projects/element-ng/phone-number/si-phone-number-input.component.scss b/projects/element-ng/phone-number/si-phone-number-input.component.scss index 02e867f15f..47b9dd49db 100644 --- a/projects/element-ng/phone-number/si-phone-number-input.component.scss +++ b/projects/element-ng/phone-number/si-phone-number-input.component.scss @@ -8,10 +8,10 @@ .search-country { display: inline-block; - margin-block-start: map.get(all-variables.$spacers, 4); - margin-block-end: map.get(all-variables.$spacers, 4); - margin-inline: map.get(all-variables.$spacers, 4); - inline-size: calc(100% - #{map.get(all-variables.$spacers, 6)}); + margin-block-start: map.get(all-variables.$spacers-block, 4); + margin-block-end: map.get(all-variables.$spacers-block, 4); + margin-inline: map.get(all-variables.$spacers-inline, 4); + inline-size: calc(100% - #{map.get(all-variables.$spacers-inline, 6)}); } .disabled { diff --git a/projects/element-ng/pills-input/si-pills-input.component.scss b/projects/element-ng/pills-input/si-pills-input.component.scss index 75e71c0221..679f7f549e 100644 --- a/projects/element-ng/pills-input/si-pills-input.component.scss +++ b/projects/element-ng/pills-input/si-pills-input.component.scss @@ -4,10 +4,12 @@ :host { display: flex; flex-wrap: wrap; - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); padding-block: 3px; block-size: auto !important; // stylelint-disable-line declaration-no-important - min-block-size: calc(#{variables.$si-line-height-body}em + #{2 * map.get(variables.$spacers, 4)}); + min-block-size: calc( + #{variables.$si-line-height-body}em + 2 * map.get(variables.$spacers-block, 4) + ); &:focus-within { @include variables.make-outline-focus(); @@ -17,8 +19,8 @@ input { padding-inline: 0; // needs explicit height because of Firefox, see .form-control - block-size: calc(1lh + 2 * map.get(variables.$spacers, 2)); - margin-inline: map.get(variables.$spacers, 2); + block-size: calc(1lh + 2 * map.get(variables.$spacers-block, 2)); + margin-inline: map.get(variables.$spacers-inline, 2); border: 0; flex: 1; background: transparent; diff --git a/projects/element-ng/search-bar/si-search-bar.component.scss b/projects/element-ng/search-bar/si-search-bar.component.scss index e7a7f089b0..511c5fa202 100644 --- a/projects/element-ng/search-bar/si-search-bar.component.scss +++ b/projects/element-ng/search-bar/si-search-bar.component.scss @@ -35,7 +35,7 @@ input { .cancel-button { position: absolute; inset-block: 0; - inset-inline-end: map.get(variables.$spacers, 2); + inset-inline-end: map.get(variables.$spacers-inline, 2); margin-block: auto; } @@ -46,13 +46,15 @@ input { .search-bar-icon { position: absolute; inset-block: 0; - inset-inline-start: map.get(variables.$spacers, 3); + inset-inline-start: map.get(variables.$spacers-inline, 3); align-items: center; color: var(--search-bar-icon-color); } .icon-start { - padding-inline-start: calc(#{variables.$si-icon-font-size} + #{map.get(variables.$spacers, 5)}); + padding-inline-start: calc( + #{variables.$si-icon-font-size} + #{map.get(variables.$spacers-inline, 5)} + ); } .icon-end { @@ -61,7 +63,7 @@ input { ::placeholder { color: variables.$element-text-secondary; - padding-inline-start: map.get(variables.$spacers, 1); + padding-inline-start: map.get(variables.$spacers-inline, 1); } .disabled { diff --git a/projects/element-ng/select/select-input/si-select-input.component.scss b/projects/element-ng/select/select-input/si-select-input.component.scss index 4700f5e99b..b8231a94d8 100644 --- a/projects/element-ng/select/select-input/si-select-input.component.scss +++ b/projects/element-ng/select/select-input/si-select-input.component.scss @@ -7,7 +7,7 @@ block-size: 100%; color: all-variables.$element-text-primary; padding-inline-end: calc( - #{map.get(all-variables.$spacers, 2) - all-variables.$input-border-width} + + map.get(all-variables.$spacers-block, 2) - all-variables.$input-border-width + var(--si-feedback-icon-size, 0px) ); @@ -18,7 +18,7 @@ :host-context(.form-control) { :host { - padding-block: map.get(all-variables.$spacers, 2) - 1px; + padding-block: calc(map.get(all-variables.$spacers-block, 2) - 1px); padding-inline-end: var(--si-input-padding-inline-end); } } diff --git a/projects/element-ng/select/select-list/si-select-list-has-filter.component.scss b/projects/element-ng/select/select-list/si-select-list-has-filter.component.scss index 576000c837..11e5391912 100644 --- a/projects/element-ng/select/select-list/si-select-list-has-filter.component.scss +++ b/projects/element-ng/select/select-list/si-select-list-has-filter.component.scss @@ -13,5 +13,7 @@ si-loading-spinner { } .icon-start { - padding-inline-start: calc(#{variables.$si-icon-font-size} + #{map.get(variables.$spacers, 5)}); + padding-inline-start: calc( + #{variables.$si-icon-font-size} + #{map.get(variables.$spacers-inline, 5)} + ); } diff --git a/projects/element-ng/side-panel/si-side-panel-action.component.scss b/projects/element-ng/side-panel/si-side-panel-action.component.scss index ec3bff5487..3e3da8ff89 100644 --- a/projects/element-ng/side-panel/si-side-panel-action.component.scss +++ b/projects/element-ng/side-panel/si-side-panel-action.component.scss @@ -25,8 +25,8 @@ } :host-context(.collapsible .collapsed) { - padding-block: map.get(all-variables.$spacers, 4); - padding-inline: map.get(all-variables.$spacers, 5); + padding-block: map.get(all-variables.$spacers-block, 4); + padding-inline: map.get(all-variables.$spacers-inline, 5); &:not(:disabled):hover { background: all-variables.$element-base-1-hover; @@ -34,7 +34,7 @@ .dot, .icon { - margin: map.get(all-variables.$spacers, 1); + margin: map.get(all-variables.$spacers-block, 1) map.get(all-variables.$spacers-inline, 1); } } diff --git a/projects/element-ng/side-panel/si-side-panel-actions.component.scss b/projects/element-ng/side-panel/si-side-panel-actions.component.scss index faa3fe3052..14be69425e 100644 --- a/projects/element-ng/side-panel/si-side-panel-actions.component.scss +++ b/projects/element-ng/side-panel/si-side-panel-actions.component.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; justify-content: space-between; - padding-inline: map.get(variables.$spacers, 6); + padding-inline: map.get(variables.$spacers-inline, 6); } :host-context(.collapsible .collapsed) { diff --git a/projects/element-ng/side-panel/si-side-panel-content.component.scss b/projects/element-ng/side-panel/si-side-panel-content.component.scss index 2c66230096..7cbbfdaf8e 100644 --- a/projects/element-ng/side-panel/si-side-panel-content.component.scss +++ b/projects/element-ng/side-panel/si-side-panel-content.component.scss @@ -19,7 +19,7 @@ } .rpanel-wrapper { - gap: map.get(all-variables.$spacers, 5); + gap: map.get(all-variables.$spacers-block, 5) map.get(all-variables.$spacers-inline, 5); } :host.collapsed { @@ -35,7 +35,7 @@ .rpanel-content { flex: 0 0 auto; - margin-block-start: map.get(all-variables.$spacers, 4); + margin-block-start: map.get(all-variables.$spacers-block, 4); } .rpanel-statusactions { @@ -46,8 +46,8 @@ } .rpanel-statusaction { - padding-block: map.get(all-variables.$spacers, 4); - padding-inline: map.get(all-variables.$spacers, 5); + padding-block: map.get(all-variables.$spacers-block, 4); + padding-inline: map.get(all-variables.$spacers-inline, 5); &:not(.dot-outer):hover { background: all-variables.$element-base-1-hover; @@ -59,7 +59,7 @@ } .icon { - padding: map.get(all-variables.$spacers, 1); + padding: map.get(all-variables.$spacers-block, 1) map.get(all-variables.$spacers-inline, 1); } } } @@ -91,7 +91,7 @@ } .rpanel-wrapper { - padding-block-start: map.get(all-variables.$spacers, 5); + padding-block-start: map.get(all-variables.$spacers-block, 5); } .rpanel-wrapper, @@ -127,7 +127,7 @@ // height of the expand button (== width since square) + padding of expand button margin-inline-end: calc( (all-variables.$btn-font-size * all-variables.$btn-line-height) + - (2 * all-variables.$btn-padding-y) + (2 * map.get(all-variables.$spacers, 4)) + (2 * all-variables.$btn-padding-y) + (2 * map.get(all-variables.$spacers-block, 4)) ); } diff --git a/projects/element-ng/side-panel/si-side-panel.component.scss b/projects/element-ng/side-panel/si-side-panel.component.scss index 4834692900..798f6401de 100644 --- a/projects/element-ng/side-panel/si-side-panel.component.scss +++ b/projects/element-ng/side-panel/si-side-panel.component.scss @@ -8,7 +8,7 @@ $rpanel-width-extended-xl: 640px; $rpanel-width-extended-xxl: 720px; $rpanel-width-extended-xxxl: 912px; $rpanel-transition-duration: all-variables.$element-default-transition-duration; -$rpanel-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers, 5)); +$rpanel-collapsed-width: calc(1.5rem + 2 * map.get(all-variables.$spacers-inline, 5)); $transition: opacity 0.15s linear; :host { diff --git a/projects/element-ng/skip-links/si-skip-links.component.scss b/projects/element-ng/skip-links/si-skip-links.component.scss index 2c5e8dfc6c..8c5d0584c6 100644 --- a/projects/element-ng/skip-links/si-skip-links.component.scss +++ b/projects/element-ng/skip-links/si-skip-links.component.scss @@ -5,7 +5,7 @@ &:focus-within { position: absolute; z-index: variables.$zindex-modal; - inset-block-start: map.get(variables.$spacers, 4); + inset-block-start: map.get(variables.$spacers-block, 4); inset-inline-start: 50%; transform: translateX(-50%); } diff --git a/projects/element-ng/slider/si-slider.component.scss b/projects/element-ng/slider/si-slider.component.scss index 399fcbf80f..bd8fb626b7 100644 --- a/projects/element-ng/slider/si-slider.component.scss +++ b/projects/element-ng/slider/si-slider.component.scss @@ -1,12 +1,12 @@ @use 'sass:map'; @use '@siemens/element-theme/src/styles/variables'; -$button-size: calc(1lh + 2 * map.get(variables.$spacers, 4)); +$button-size: calc(1lh + 2 * map.get(variables.$spacers-block, 4)); $button-gap: 4px; $track-height: 4px; $thumb-size: 1.5rem; -$thumb-handle-size: calc($thumb-size + 2 * #{map.get(variables.$spacers, 4)}); +$thumb-handle-size: calc($thumb-size + 2 * #{map.get(variables.$spacers-block, 4)}); :host { display: flex; diff --git a/projects/element-ng/split/si-split-part.component.scss b/projects/element-ng/split/si-split-part.component.scss index 03df603a39..6820152a5d 100644 --- a/projects/element-ng/split/si-split-part.component.scss +++ b/projects/element-ng/split/si-split-part.component.scss @@ -21,7 +21,7 @@ $header-height: 40px; flex-direction: row; flex: none; align-items: center; - padding: map.get(all-variables.$spacers, 3); + padding: map.get(all-variables.$spacers-block, 3) map.get(all-variables.$spacers-inline, 3); background: all-variables.$element-base-0; block-size: $header-height; } @@ -32,7 +32,7 @@ $header-height: 40px; flex: auto; flex-direction: column; max-block-size: 100%; - padding: map.get(all-variables.$spacers, 3); + padding: map.get(all-variables.$spacers-block, 3) map.get(all-variables.$spacers-inline, 3); .si-split-part-title { inline-size: 100%; @@ -51,13 +51,13 @@ $header-height: 40px; } .si-split-part-actions { - padding-inline: map.get(all-variables.$spacers, 4); + padding-inline: map.get(all-variables.$spacers-inline, 4); flex: 0 0 auto; } .si-split-button { display: inline-block; - padding: map.get(all-variables.$spacers, 2); + padding: map.get(all-variables.$spacers-block, 2) map.get(all-variables.$spacers-inline, 2); color: all-variables.$element-text-primary; overflow: hidden; white-space: nowrap; diff --git a/projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.scss b/projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.scss index 97a0b20778..4d9e53f18e 100644 --- a/projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.scss +++ b/projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.scss @@ -4,11 +4,12 @@ @use '@siemens/element-theme/src/styles/variables'; $item-min-width: 7.1429em; -$item-padding: map.get(variables.$spacers, 4); -$item-padding-inline-small: map.get(variables.$spacers, 2); -$item-padding-block-small: map.get(variables.$spacers, 1); -$item-spacing: map.get(variables.$spacers, 2); -$colorbar-width: map.get(variables.$spacers, 2); +$item-padding-block: map.get(variables.$spacers-block, 4); +$item-padding-inline: map.get(variables.$spacers-inline, 4); +$item-padding-inline-small: map.get(variables.$spacers-inline, 2); +$item-padding-block-small: map.get(variables.$spacers-block, 1); +$item-spacing: map.get(variables.$spacers-block, 2); +$colorbar-width: map.get(variables.$spacers-inline, 2); :host { position: relative; @@ -38,8 +39,8 @@ $colorbar-width: map.get(variables.$spacers, 2); .status-item { position: relative; isolation: isolate; - padding-block: $item-padding; - padding-inline: $item-padding-inline-small $item-padding; + padding-block: $item-padding-block; + padding-inline: $item-padding-inline-small $item-padding-inline; min-inline-size: var(--__si-status-bar-item-min-width, $item-min-width); color: variables.$element-text-primary; white-space: nowrap; @@ -84,6 +85,6 @@ $colorbar-width: map.get(variables.$spacers, 2); .color-bar { align-self: stretch; min-inline-size: $colorbar-width; - border-radius: math.div($colorbar-width, 2); + border-radius: calc($colorbar-width / 2); background: variables.$element-ui-4; } diff --git a/projects/element-ng/status-bar/si-status-bar.component.scss b/projects/element-ng/status-bar/si-status-bar.component.scss index 10e1b49812..7987f2c53a 100644 --- a/projects/element-ng/status-bar/si-status-bar.component.scss +++ b/projects/element-ng/status-bar/si-status-bar.component.scss @@ -2,8 +2,9 @@ @use '@siemens/element-theme/src/styles/variables'; -$status-bar-padding: map.get(variables.$spacers, 4); -$status-bar-padding-small: map.get(variables.$spacers, 1); +$status-bar-padding-block: map.get(variables.$spacers-block, 4); +$status-bar-padding-inline: map.get(variables.$spacers-inline, 4); +$status-bar-padding-block-small: map.get(variables.$spacers-block, 1); $blink-transition-duration: variables.$element-default-transition-duration; @@ -27,7 +28,7 @@ $blink-transition-duration: variables.$element-default-transition-duration; } .status-bar-wrapper { - padding-inline: $status-bar-padding; + padding-inline: $status-bar-padding-inline; background-color: variables.$element-base-1; > * { @@ -36,14 +37,14 @@ $blink-transition-duration: variables.$element-default-transition-duration; } .mobile-spacer { - margin-block: map.get(variables.$spacers, 2); + margin-block: map.get(variables.$spacers-block, 2); margin-inline: 0; background: variables.$element-base-0; block-size: 1px; } .bar-item { - margin-block: $status-bar-padding; + margin-block: $status-bar-padding-block; } .custom-content { @@ -56,17 +57,17 @@ $blink-transition-duration: variables.$element-default-transition-duration; .mute-padding { padding-inline-end: calc( - 1lh + 2 * map.get(variables.$spacers, 5) + map.get(variables.$spacers, 3) + 1lh + 2 * map.get(variables.$spacers-inline, 5) + map.get(variables.$spacers-inline, 3) ); } .mobile-mute { position: absolute; - inset-inline-end: $status-bar-padding; + inset-inline-end: $status-bar-padding-inline; } .main-content .mute-button { - margin-inline-end: map.get(variables.$spacers, 2); + margin-inline-end: map.get(variables.$spacers-inline, 2); } .collapse-expand { @@ -74,7 +75,7 @@ $blink-transition-duration: variables.$element-default-transition-duration; border: 0; border-end-start-radius: 2rem; border-end-end-radius: 2rem; - inline-size: calc(1.5rem + 2 * map.get(variables.$spacers, 4)); + inline-size: calc(1.5rem + 2 * map.get(variables.$spacers-inline, 4)); color: variables.$element-ui-0; cursor: pointer; @@ -94,7 +95,7 @@ $blink-transition-duration: variables.$element-default-transition-duration; .compact { .bar-item { - margin-block: $status-bar-padding-small; + margin-block: $status-bar-padding-block-small; } } diff --git a/projects/element-ng/status-counter/si-status-counter.component.scss b/projects/element-ng/status-counter/si-status-counter.component.scss index 793287a9be..8eb960e61a 100644 --- a/projects/element-ng/status-counter/si-status-counter.component.scss +++ b/projects/element-ng/status-counter/si-status-counter.component.scss @@ -6,7 +6,7 @@ align-items: center; flex-direction: column; text-align: center; - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); } .inactive { diff --git a/projects/element-ng/status-toggle/si-status-toggle.component.scss b/projects/element-ng/status-toggle/si-status-toggle.component.scss index 3cf4325fc1..34eba318a9 100644 --- a/projects/element-ng/status-toggle/si-status-toggle.component.scss +++ b/projects/element-ng/status-toggle/si-status-toggle.component.scss @@ -7,13 +7,14 @@ border: 1px solid variables.$element-ui-4; border-radius: variables.$element-radius-2; background: variables.$element-base-2; - padding: (map.get(variables.$spacers, 2) - 1px); + padding: calc(map.get(variables.$spacers-block, 2) - 1px) + calc(map.get(variables.$spacers-inline, 2) - 1px); } .status-toggle-container { position: relative; display: flex; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); inline-size: 100%; block-size: 100%; border-radius: variables.$element-radius-1; @@ -41,7 +42,7 @@ color: variables.$element-text-secondary; border-radius: 1px; cursor: pointer; - padding-block: map.get(variables.$spacers, 1); + padding-block: map.get(variables.$spacers-block, 1); &.active { color: variables.$element-text-primary !important; // stylelint-disable-line declaration-no-important diff --git a/projects/element-ng/summary-chip/si-summary-chip.component.scss b/projects/element-ng/summary-chip/si-summary-chip.component.scss index ceb21addb4..fd27778ad4 100644 --- a/projects/element-ng/summary-chip/si-summary-chip.component.scss +++ b/projects/element-ng/summary-chip/si-summary-chip.component.scss @@ -5,12 +5,12 @@ display: inline-flex; align-items: center; justify-content: center; - min-inline-size: calc(1lh + 2 * map.get(variables.$spacers, 4)); + min-inline-size: calc(1lh + 2 * map.get(variables.$spacers-inline, 4)); border: 1px solid variables.$element-ui-3; border-radius: 1lh; - padding-block: (map.get(variables.$spacers, 4) - 1px); - padding-inline: map.get(variables.$spacers, 4); - gap: map.get(variables.$spacers, 2); + padding-block: calc(map.get(variables.$spacers-block, 4) - 1px); + padding-inline: map.get(variables.$spacers-inline, 4); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); &:not(.disabled) { cursor: pointer; diff --git a/projects/element-ng/system-banner/system-banner.component.scss b/projects/element-ng/system-banner/system-banner.component.scss index f46bab1330..d1b1072881 100644 --- a/projects/element-ng/system-banner/system-banner.component.scss +++ b/projects/element-ng/system-banner/system-banner.component.scss @@ -8,7 +8,7 @@ .banner { padding-block: variables.$si-system-banner-padding-y; - padding-inline: map.get(variables.$spacers, 5); + padding-inline: map.get(variables.$spacers-inline, 5); } &.banner-info { diff --git a/projects/element-ng/tabs/si-tab-badge.component.scss b/projects/element-ng/tabs/si-tab-badge.component.scss index 794a0f367a..8b811f1a1f 100644 --- a/projects/element-ng/tabs/si-tab-badge.component.scss +++ b/projects/element-ng/tabs/si-tab-badge.component.scss @@ -9,7 +9,7 @@ } .badge-text { - inset-block-start: variables.$nav-link-padding-y * -1 - 1px; + inset-block-start: calc(variables.$nav-link-padding-y * -1 - 1px); inset-inline-start: 2px; } @@ -25,6 +25,6 @@ } .badge { - margin-inline: 0 - map.get(spacers.$spacers, 3); + margin-inline-end: map.get(spacers.$negative-spacers-inline, 3); } } diff --git a/projects/element-ng/tabs/si-tabset.component.scss b/projects/element-ng/tabs/si-tabset.component.scss index 1b008393df..ddbed9d8b8 100644 --- a/projects/element-ng/tabs/si-tabset.component.scss +++ b/projects/element-ng/tabs/si-tabset.component.scss @@ -23,7 +23,7 @@ color: variables.$element-text-primary; min-inline-size: 0; border-block-end: 2px solid variables.$element-ui-4; - padding-inline: map.get(variables.$spacers, 5); + padding-inline: map.get(variables.$spacers-inline, 5); flex-shrink: 0; &:hover { diff --git a/projects/element-ng/threshold/si-threshold.component.scss b/projects/element-ng/threshold/si-threshold.component.scss index 6f62a5a079..b555120180 100644 --- a/projects/element-ng/threshold/si-threshold.component.scss +++ b/projects/element-ng/threshold/si-threshold.component.scss @@ -14,7 +14,7 @@ $ths-dot-size: 6px; --direction-main: row; --direction-option: column; --direction-value: column-reverse; - --value-margin: #{map.get(variables.$spacers, 8) * -1}; + --value-margin: #{map.get(variables.$negative-spacers-block, 8)}; padding-inline: calc(var(--value-margin) * -1); } @@ -48,7 +48,7 @@ si-select { inline-size: var(--input-width); // This is a weird one. When zooming, it seems like `border-width` and relative `line-height` are scaled differently on inputs // Since the threshold needs correct size to keep the lines aligned, setting it to a fixed value here. - block-size: calc(1rem + (map.get(variables.$spacers, 4) * 2)); + block-size: calc(1rem + (map.get(variables.$spacers-block, 4) * 2)); // Ensure the number input and its buttons are above other elements position: relative; z-index: 1; @@ -56,12 +56,12 @@ si-select { .line { align-self: stretch; - flex-basis: map.get(variables.$spacers, 6); + flex-basis: map.get(variables.$spacers-block, 6); display: flex; flex-direction: var(--direction-main); align-items: center; color: variables.$element-ui-2; - gap: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); } .segment { diff --git a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.scss b/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.scss index bc6e67e6b2..5d05822e07 100644 --- a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.scss +++ b/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.scss @@ -6,8 +6,10 @@ $toast-min-width: 250px; $toast-max-width: 400px; $toast-line-height: 1.125rem; -$toast-padding: map.get(all-variables.$spacers, 4); -$toast-window-margin: map.get(all-variables.$spacers, 7); +$toast-padding-block: map.get(all-variables.$spacers-block, 4); +$toast-padding-inline: map.get(all-variables.$spacers-inline, 4); +$toast-window-margin-block: map.get(all-variables.$spacers-block, 7); +$toast-window-margin-inline: map.get(all-variables.$spacers-inline, 7); $toast-timer-height: 2px; %si-toast-bottom-bar { @@ -29,21 +31,21 @@ $toast-timer-height: 2px; color: all-variables.$element-text-primary; background: all-variables.$element-base-3; border-radius: all-variables.$element-radius-2; - padding-inline: map.get(all-variables.$spacers, 5) $toast-padding; - padding-block: $toast-padding; - margin-block-end: $toast-window-margin; + padding-inline: map.get(all-variables.$spacers-inline, 5) $toast-padding-inline; + padding-block: $toast-padding-block; + margin-block-end: $toast-window-margin-block; font-size: all-variables.$si-font-size-body-lg; pointer-events: all; overflow: hidden; min-inline-size: $toast-min-width; - max-inline-size: calc(100vi - #{$toast-window-margin} * 2); + max-inline-size: calc(100vi - #{$toast-window-margin-inline} * 2); @include all-variables.media-breakpoint-up(md) { max-inline-size: $toast-max-width; } &.si-toast-auto-close { - padding-block-end: $toast-padding + $toast-timer-height; + padding-block-end: calc($toast-padding-block + $toast-timer-height); &::before { @extend %si-toast-bottom-bar; diff --git a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss index cbfa2272c3..c413bccc30 100644 --- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss +++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss @@ -149,15 +149,15 @@ } .si-tree-view-item-toggle.disabled .si-tree-view-item-icon { - inline-size: map.get(variables.$spacers, 8); + inline-size: map.get(variables.$spacers-inline, 8); } .si-tree-stretch-center + .si-tree-view-item-toggle-end .si-tree-view-item-icon { - margin-inline-start: -1 * map.get(variables.$spacers, 2); + margin-inline-start: map.get(variables.$negative-spacers-inline, 2); } .si-tree-view-item-icon { - padding-inline-end: map.get(variables.$spacers, 2); + padding-inline-end: map.get(variables.$spacers-inline, 2); &.si-tree-view-item-icon-spacer { box-sizing: content-box; @@ -269,7 +269,7 @@ } .input-box { - margin-inline: map.get(variables.$spacers, 1) map.get(variables.$spacers, 5); + margin-inline: map.get(variables.$spacers-inline, 1) map.get(variables.$spacers-inline, 5); } .form-check-input { diff --git a/projects/element-ng/tree-view/si-tree-view.component.scss b/projects/element-ng/tree-view/si-tree-view.component.scss index 1aad53f65a..0835e6ce49 100644 --- a/projects/element-ng/tree-view/si-tree-view.component.scss +++ b/projects/element-ng/tree-view/si-tree-view.component.scss @@ -50,7 +50,7 @@ ::ng-deep { .si-tree-view-top-level-item { - margin-block-start: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 4); .si-tree-expand-collapse &:first-child { margin-block-start: 0; diff --git a/projects/element-ng/wizard/si-wizard.component.scss b/projects/element-ng/wizard/si-wizard.component.scss index 19d886460c..dfc61bbed4 100644 --- a/projects/element-ng/wizard/si-wizard.component.scss +++ b/projects/element-ng/wizard/si-wizard.component.scss @@ -44,7 +44,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; } .title { - margin-block-start: map.get(variables.$spacers, 5); + margin-block-start: map.get(variables.$spacers-block, 5); } } } @@ -52,7 +52,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; &.vertical { flex-direction: column; block-size: 100%; - padding-block-start: map.get(variables.$spacers, 9); + padding-block-start: map.get(variables.$spacers-block, 9); min-inline-size: $wizard-vertical-min-inline-size; max-inline-size: $wizard-vertical-max-inline-size; @@ -73,7 +73,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; .title { grid-row: 2 / 3; grid-column: 2 / 3; - padding-inline-start: map.get(variables.$spacers, 4); + padding-inline-start: map.get(variables.$spacers-inline, 4); } } } @@ -94,14 +94,14 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; border-inline-start-color: $wizard-default-border-color; border-inline-start-width: 2px; border-inline-start-style: solid; - min-block-size: map.get(variables.$spacers, 5); + min-block-size: map.get(variables.$spacers-block, 5); &.dashed { border-inline-start-style: dashed; } &.spacer { - block-size: map.get(variables.$spacers, 5); + block-size: map.get(variables.$spacers-block, 5); border: 0; } @@ -122,7 +122,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; } &.dashed { - inline-size: map.get(variables.$spacers, 9); + inline-size: map.get(variables.$spacers-inline, 9); border-block-start-style: dashed; } @@ -142,7 +142,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; &.dashed { &.vertical { - min-block-size: map.get(variables.$spacers, 5); + min-block-size: map.get(variables.$spacers-block, 5); inline-size: auto; } } @@ -244,7 +244,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; &:not(.vertical) { justify-content: center; - padding-block-end: map.get(variables.$spacers, 6); + padding-block-end: map.get(variables.$spacers-block, 6); } &.vertical { @@ -253,7 +253,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; .steps-content { flex: 100%; - padding-inline-start: map.get(variables.$spacers, 6); + padding-inline-start: map.get(variables.$spacers-inline, 6); } } @@ -266,7 +266,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; .center-save { display: flex; justify-content: center; - padding-block-start: map.get(variables.$spacers, 6); + padding-block-start: map.get(variables.$spacers-block, 6); } .wizard-btn-container { @@ -313,7 +313,7 @@ $wizard-vertical-divider-border-color: variables.$element-ui-4; flex-wrap: wrap; align-items: center; justify-content: start; - gap: map.get(variables.$spacers, 6); + gap: map.get(variables.$spacers-block, 6) map.get(variables.$spacers-inline, 6); > .end { margin-inline-start: auto; diff --git a/projects/element-theme/src/styles/bootstrap/_badges.scss b/projects/element-theme/src/styles/bootstrap/_badges.scss index ada7227e62..ceb55f5676 100644 --- a/projects/element-theme/src/styles/bootstrap/_badges.scss +++ b/projects/element-theme/src/styles/bootstrap/_badges.scss @@ -19,7 +19,7 @@ padding-block: variables.$badge-padding-y; padding-inline: variables.$badge-padding-x; margin-block: 0; - margin-inline: map.get(spacers.$spacers, 4); + margin-inline: map.get(spacers.$spacers-inline, 4); line-height: variables.$badge-line-height; flex-shrink: 0; font-size: typography.$si-font-size-body; @@ -130,8 +130,8 @@ &:has(> .icon) { display: inline-flex; align-items: center; - gap: map.get(spacers.$spacers, 1); - padding-inline: map.get(spacers.$spacers, 2) variables.$badge-padding-x; + gap: map.get(spacers.$spacers-block, 1) map.get(spacers.$spacers-inline, 1); + padding-inline: map.get(spacers.$spacers-inline, 2) variables.$badge-padding-x; } } diff --git a/projects/element-theme/src/styles/bootstrap/_button-group.scss b/projects/element-theme/src/styles/bootstrap/_button-group.scss index ede5521011..52e950e527 100644 --- a/projects/element-theme/src/styles/bootstrap/_button-group.scss +++ b/projects/element-theme/src/styles/bootstrap/_button-group.scss @@ -69,7 +69,7 @@ .btn.dropdown-toggle { aspect-ratio: 0; padding-block: 0; - padding-inline: calc(map.get(spacers.$spacers, 1) - var(--btn-border-width, 0px)); + padding-inline: calc(map.get(spacers.$spacers-inline, 1) - var(--btn-border-width, 0px)); border-start-start-radius: 0; border-end-start-radius: 0; @@ -97,14 +97,14 @@ &.btn-icon { inline-size: auto; - padding-inline: map.get(spacers.$spacers, 5) - 1px; + padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px); } // @deprecated Will be removed in a future major version, use .btn-icon instead. &.icon-only { inline-size: auto; min-inline-size: unset; - padding-inline: map.get(spacers.$spacers, 5) - 1px; + padding-inline: calc(map.get(spacers.$spacers-inline, 5) - 1px); .icon { margin-inline: 0; diff --git a/projects/element-theme/src/styles/bootstrap/_buttons.scss b/projects/element-theme/src/styles/bootstrap/_buttons.scss index 37969c61bf..209773d168 100644 --- a/projects/element-theme/src/styles/bootstrap/_buttons.scss +++ b/projects/element-theme/src/styles/bootstrap/_buttons.scss @@ -65,7 +65,7 @@ button { .icon { font-size: var(--btn-icon-size); margin-block: calc((var(--btn-icon-size) - var(--btn-font-size)) / -2); - margin-inline-end: #{map.get(spacers.$spacers, 2)}; + margin-inline-end: #{map.get(spacers.$spacers-inline, 2)}; } } @@ -270,7 +270,6 @@ button { ); padding-block: bootstrap-variables.$input-padding-y; padding-inline: bootstrap-variables.$input-padding-x; - border-radius: bootstrap-variables.$input-border-radius; justify-content: flex-start; diff --git a/projects/element-theme/src/styles/bootstrap/_card.scss b/projects/element-theme/src/styles/bootstrap/_card.scss index 5488e2188c..72f3b822b1 100644 --- a/projects/element-theme/src/styles/bootstrap/_card.scss +++ b/projects/element-theme/src/styles/bootstrap/_card.scss @@ -43,35 +43,42 @@ } &.accent-primary { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-accent; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-accent; } &.accent-inactive { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-4; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid system-tokens.$si-sys-border-4; } &.accent-info { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-information; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-information; } &.accent-success { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-success; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-success; } &.accent-warning { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-warning; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-warning; } &.accent-caution { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-caution; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-caution; } &.accent-danger { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-danger; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-danger; } &.accent-critical { - border-inline-start: map.get(spacers.$spacers, 4) solid system-tokens.$si-sys-border-critical; + border-inline-start: map.get(spacers.$spacers-inline, 4) solid + system-tokens.$si-sys-border-critical; } &.action-card:not(:disabled) { @@ -133,8 +140,8 @@ button.card { + * .card-body, // for action cards, where we wrap the content + .card-body { - margin-block-start: map.get(spacers.$spacers, 2) * -1; - padding-block-start: map.get(spacers.$spacers, 2); + margin-block-start: map.get(spacers.$negative-spacers-block, 2); + padding-block-start: map.get(spacers.$spacers-block, 2); } + .list-group { @@ -167,7 +174,7 @@ button.card { } .card-subtitle { - margin-block: (-(variables.$card-title-spacer-y) * 0.5) 0; + margin-block: calc(variables.$card-title-spacer-y * -0.5) 0; } .card-text:last-child { diff --git a/projects/element-theme/src/styles/bootstrap/_dropdowns.scss b/projects/element-theme/src/styles/bootstrap/_dropdowns.scss index 0e8778d689..da53053251 100644 --- a/projects/element-theme/src/styles/bootstrap/_dropdowns.scss +++ b/projects/element-theme/src/styles/bootstrap/_dropdowns.scss @@ -20,7 +20,7 @@ z-index: zindex.$zindex-dropdown; display: none; // none by default, but block on "open" of the menu min-inline-size: bootstrap-variables.$dropdown-min-width; - max-block-size: calc(100vb - #{map.get(spacers.$spacers, 1) * 2}); + max-block-size: calc(100vb - map.get(spacers.$spacers-block, 1) * 2); overflow-y: auto; padding-block: bootstrap-variables.$dropdown-padding-y; padding-inline: bootstrap-variables.$dropdown-padding-x; @@ -30,7 +30,7 @@ background-clip: padding-box; border-radius: bootstrap-variables.$dropdown-border-radius; box-shadow: bootstrap-variables.$dropdown-box-shadow; - margin-block: map.get(spacers.$spacers, 1); + margin-block: map.get(spacers.$spacers-block, 1); margin-inline: 0; text-align: start; @@ -46,8 +46,8 @@ 100vb, calc( ( - bootstrap-variables.$dropdown-line-height + #{2 * - bootstrap-variables.$dropdown-item-padding-y} + bootstrap-variables.$dropdown-line-height + 2 * + bootstrap-variables.$dropdown-item-padding-y ) * 8.3125 ) @@ -56,7 +56,7 @@ :is(.dropdown-menu, .dropdown-item) { .icon + .item-title { - padding-inline-start: map.get(spacers.$spacers, 4); + padding-inline-start: map.get(spacers.$spacers-inline, 4); } } @@ -65,13 +65,13 @@ text-align: start; .dropdown-caret { - padding-inline-start: map.get(spacers.$spacers, 2); - margin-block: -#{map.get(spacers.$spacers, 2)}; - margin-inline: auto -#{map.get(spacers.$spacers, 2)}; + padding-inline-start: map.get(spacers.$spacers-inline, 2); + margin-block: map.get(spacers.$negative-spacers-block, 2); + margin-inline: auto map.get(spacers.$negative-spacers-inline, 2); font-size: variables.$si-icon-font-size !important; // stylelint-disable-line declaration-no-important transform: rotate(var(--caret-rotate)); // adjust the origin to account for the negative margin. Otherwise the element would visually not rotate around the center. - transform-origin: calc(50% + #{map.get(spacers.$spacers, 1)}) 50%; + transform-origin: calc(50% + map.get(spacers.$spacers-inline, 1)) 50%; transition: transform variables.$si-caret-transition-duration; } @@ -146,11 +146,11 @@ } .menu-end-icon { - margin-inline-end: -1 * map.get(spacers.$spacers, 3); + margin-inline-end: map.get(spacers.$negative-spacers-inline, 3); &.element-record-filled { font-size: 1rem; - margin-inline-end: -1 * map.get(spacers.$spacers, 1); + margin-inline-end: map.get(spacers.$negative-spacers-inline, 1); } } } @@ -182,7 +182,7 @@ .dropdown-divider { block-size: 0; margin-block: bootstrap-variables.$dropdown-divider-margin-y; - margin-inline: map.get(spacers.$spacers, 5); + margin-inline: map.get(spacers.$spacers-inline, 5); overflow: hidden; border-block-start: 1px solid bootstrap-variables.$dropdown-divider-bg; } diff --git a/projects/element-theme/src/styles/bootstrap/_modals.scss b/projects/element-theme/src/styles/bootstrap/_modals.scss index 62372696b4..63d966092a 100644 --- a/projects/element-theme/src/styles/bootstrap/_modals.scss +++ b/projects/element-theme/src/styles/bootstrap/_modals.scss @@ -67,7 +67,7 @@ } .modal-dialog-scrollable { - block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2); + block-size: calc(100% - (variables.$modal-dialog-margin * 2)); .modal-content { max-block-size: 100%; @@ -82,7 +82,7 @@ .modal-dialog-centered { display: flex; align-items: center; - min-block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2); + min-block-size: calc(100% - (variables.$modal-dialog-margin * 2)); } .modal-header { @@ -97,7 +97,7 @@ .icon { font-size: si-vars.$si-icon-font-size-lg; - margin-inline-end: map.get(spacers.$spacers, 4); + margin-inline-end: map.get(spacers.$spacers-inline, 4); } .modal-title { @@ -141,7 +141,7 @@ // Enable `flex-grow: 1` so that the body take up as much space as possible // when there should be a fixed height on `.modal-dialog`. flex: 1 1 auto; - padding-block: map.get(spacers.$spacers, 5) variables.$modal-inner-padding; + padding-block: map.get(spacers.$spacers-block, 5) variables.$modal-inner-padding; // use margin instead of padding so that the scrollbar isn't on the edge of the dialog margin-inline: variables.$modal-inner-padding; padding-inline: 0; @@ -157,7 +157,7 @@ flex-shrink: 0; align-items: center; // vertically center justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items - padding: (variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5); + padding: calc(variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5); border-end-start-radius: variables.$modal-content-inner-border-radius; border-end-end-radius: variables.$modal-content-inner-border-radius; @@ -165,7 +165,7 @@ // This solution is far from ideal because of the universal selector usage, // but is needed to fix https://github.com/twbs/bootstrap/issues/24800 > * { - margin: (variables.$modal-footer-margin-between * 0.5); + margin: calc(variables.$modal-footer-margin-between * 0.5); } } @@ -186,11 +186,11 @@ } .modal-dialog-scrollable { - block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2); + block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2)); } .modal-dialog-centered { - min-block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2); + min-block-size: calc(100% - (variables.$modal-dialog-margin-y-sm-up * 2)); } .modal-content { diff --git a/projects/element-theme/src/styles/bootstrap/_pagination.scss b/projects/element-theme/src/styles/bootstrap/_pagination.scss index 7ff26712e8..9742a2bbd5 100644 --- a/projects/element-theme/src/styles/bootstrap/_pagination.scss +++ b/projects/element-theme/src/styles/bootstrap/_pagination.scss @@ -10,7 +10,7 @@ $page-button-size: 1.5rem; .pagination { display: flex; margin: 0; - padding-block: map.get(spacers.$spacers, 4); + padding-block: map.get(spacers.$spacers-block, 4); @include lists.list-unstyled(); } @@ -22,8 +22,8 @@ $page-button-size: 1.5rem; min-inline-size: $page-button-size; block-size: $page-button-size; padding-block: 0; - padding-inline: map.get(spacers.$spacers, 2); - margin-inline: map.get(spacers.$spacers, 1); + padding-inline: map.get(spacers.$spacers-inline, 2); + margin-inline: map.get(spacers.$spacers-inline, 1); background: transparent; font-size: typography.$si-font-size-h5; font-weight: typography.$si-font-weight-h5; diff --git a/projects/element-theme/src/styles/bootstrap/_popovers.scss b/projects/element-theme/src/styles/bootstrap/_popovers.scss index 632f5d0240..0f5c85fa19 100644 --- a/projects/element-theme/src/styles/bootstrap/_popovers.scss +++ b/projects/element-theme/src/styles/bootstrap/_popovers.scss @@ -74,7 +74,7 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg); } + .popover-body { - padding-block-start: map.get(spacers.$spacers, 4); + padding-block-start: map.get(spacers.$spacers-block, 4); } &:has(> .icon) { diff --git a/projects/element-theme/src/styles/bootstrap/_tables.scss b/projects/element-theme/src/styles/bootstrap/_tables.scss index 56354cf1e4..8b407a6d35 100644 --- a/projects/element-theme/src/styles/bootstrap/_tables.scss +++ b/projects/element-theme/src/styles/bootstrap/_tables.scss @@ -55,17 +55,17 @@ vertical-align: middle; &:first-child { - padding-inline-start: map.get(spacers.$spacers, 6); + padding-inline-start: map.get(spacers.$spacers-inline, 6); } &:last-child { - padding-inline-end: map.get(spacers.$spacers, 6); + padding-inline-end: map.get(spacers.$spacers-inline, 6); } } thead { border-width: 0; - border-block-end: map.get(spacers.$spacers, 2) solid variables.$table-border-color; + border-block-end: map.get(spacers.$spacers-block, 2) solid variables.$table-border-color; th { vertical-align: baseline; diff --git a/projects/element-theme/src/styles/bootstrap/_variables.scss b/projects/element-theme/src/styles/bootstrap/_variables.scss index d6822aaeae..3f750174c1 100644 --- a/projects/element-theme/src/styles/bootstrap/_variables.scss +++ b/projects/element-theme/src/styles/bootstrap/_variables.scss @@ -106,7 +106,9 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: spacers.$spacer !default; $grid-row-columns: 6 !default; -$gutters: spacers.$spacers !default; +$gutters-inline: spacers.$spacers-inline !default; +$gutters-block: spacers.$spacers-block !default; +$gutters: $gutters-block !default; // Container padding @@ -244,10 +246,10 @@ $mark-color: semantic-tokens.$element-status-caution-contrast; // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding-y: map.get(spacers.$spacers, 4) !default; -$table-cell-padding-x: map.get(spacers.$spacers, 4) !default; -$table-cell-padding-y-sm: map.get(spacers.$spacers, 2) !default; -$table-cell-padding-x-sm: map.get(spacers.$spacers, 4) !default; +$table-cell-padding-y: map.get(spacers.$spacers-block, 4) !default; +$table-cell-padding-x: map.get(spacers.$spacers-inline, 4) !default; +$table-cell-padding-y-sm: map.get(spacers.$spacers-block, 2) !default; +$table-cell-padding-x-sm: map.get(spacers.$spacers-inline, 4) !default; $table-cell-vertical-align: top !default; @@ -286,14 +288,14 @@ $table-variants: ( // // For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-y: map.get(spacers.$spacers, 4); -$btn-padding-x: map.get(spacers.$spacers, 4); +$btn-padding-y: map.get(spacers.$spacers-block, 4); +$btn-padding-x: map.get(spacers.$spacers-inline, 4); $btn-font-size: $font-size-base; $btn-line-height: $line-height-base; $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping -$btn-padding-y-sm: map.get(spacers.$spacers, 2); -$btn-padding-y-lg: map.get(spacers.$spacers, 5); +$btn-padding-y-sm: map.get(spacers.$spacers-block, 2); +$btn-padding-y-lg: map.get(spacers.$spacers-block, 5); $btn-link-color: $link-color !default; $btn-link-hover-color: $link-hover-color !default; @@ -313,7 +315,7 @@ $btn-transition: // Forms // According to figma it should be 2px + line-height: 16px // As overriding line-height is not planned by bootstrap, we use 4px + line-height of 14px -$form-text-margin-top: map.get(spacers.$spacers, 2); +$form-text-margin-top: map.get(spacers.$spacers-block, 2); $form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-font-weight: null !default; @@ -325,8 +327,10 @@ $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: semantic-tokens.$element-text-secondary !default; -$input-padding-y: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border -$input-padding-x: (map.get(spacers.$spacers, 4) - 1px); // 8px including 1px border +$input-padding-y-full: map.get(spacers.$spacers-block, 4); +$input-padding-y: calc(map.get(spacers.$spacers-block, 4) - 1px); // 8px including 1px border +$input-padding-x-full: map.get(spacers.$spacers-inline, 4); +$input-padding-x: calc(map.get(spacers.$spacers-inline, 4) - 1px); // 8px including 1px border $input-font-family: null !default; $input-font-size: $font-size-base; $input-font-weight: $font-weight-base; @@ -356,10 +360,10 @@ $input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; -$input-height: functions.add(1lh, ($input-padding-y + $input-border-width) * 2) !default; +$input-height: calc(1lh + ($input-padding-y-full * 2)); // don't derive from $input-height as it generates a nested calc() expression -$input-height-inner: functions.add($input-line-height, $input-padding-y * 2) !default; +$input-height-inner: calc($input-line-height + ($input-padding-y-full - 1px) * 2) !default; // Wrap in parenthesis: `*` binds tighter than `-`, so without them only the border term gets multiplied. // DEPRECATED: Calculate it yourself using $input-height-inner $input-height-inner-half: calc((#{$input-height-inner}) * 0.5) !default; @@ -419,7 +423,7 @@ $form-validation-states: ( // Navs $nav-link-padding-y: 10px; -$nav-link-padding-x: map.get(spacers.$spacers, 8); +$nav-link-padding-x: map.get(spacers.$spacers-inline, 8); $nav-link-font-size: typography.$si-font-size-h4; $nav-link-font-weight: typography.$si-font-weight-h4; $nav-link-line-height: typography.$si-line-height-h4; @@ -439,8 +443,8 @@ $nav-tabs-link-active-bg: transparent !default; $badge-font-size: typography.$si-font-size-body; $badge-font-weight: typography.$si-font-weight-body; $badge-color: semantic-tokens.$element-text-inverse !default; -$badge-padding-y: map.get(spacers.$spacers, 1); -$badge-padding-x: map.get(spacers.$spacers, 4); +$badge-padding-y: map.get(spacers.$spacers-block, 1); +$badge-padding-x: map.get(spacers.$spacers-inline, 4); $badge-border-radius: 0.75rem; $badge-dot-size: 0.625rem; $badge-line-height: 1.25rem; @@ -451,7 +455,7 @@ $badge-height: calc($badge-line-height + 2 * $badge-padding-y); // Dropdown menu container and contents. $dropdown-min-width: 10rem !default; $dropdown-padding-x: 0 !default; -$dropdown-padding-y: map.get(spacers.$spacers, 4) !default; +$dropdown-padding-y: map.get(spacers.$spacers-block, 4) !default; $dropdown-spacer: 0.125rem !default; $dropdown-font-size: $font-size-base !default; // this is to have room for icon and badges @@ -464,18 +468,18 @@ $dropdown-divider-margin-y: 4px !default; $dropdown-box-shadow: elevation.$element-elevation-2 !default; $dropdown-link-color: system-tokens.$si-sys-text-primary !default; $dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default; -$dropdown-item-padding-y: map.get(spacers.$spacers, 2); -$dropdown-item-padding-x: map.get(spacers.$spacers, 5); +$dropdown-item-padding-y: map.get(spacers.$spacers-block, 2); +$dropdown-item-padding-x: map.get(spacers.$spacers-inline, 5); $dropdown-header-color: system-tokens.$si-sys-text-primary !default; // Cards -$card-spacer-y: map.get(spacers.$spacers, 6) !default; -$card-spacer-x: map.get(spacers.$spacers, 6) !default; -$card-title-spacer-y: map.get(spacers.$spacers, 5) !default; +$card-spacer-y: map.get(spacers.$spacers-block, 6) !default; +$card-spacer-x: map.get(spacers.$spacers-inline, 6) !default; +$card-title-spacer-y: map.get(spacers.$spacers-block, 5) !default; $card-border-radius: $border-radius !default; $card-inner-border-radius: $card-border-radius; -$card-cap-padding-y: map.get(spacers.$spacers, 5) !default; +$card-cap-padding-y: map.get(spacers.$spacers-block, 5) !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: semantic-tokens.$element-base-1 !default; $card-cap-color: null !default; @@ -493,8 +497,8 @@ $tooltip-color: semantic-tokens.$element-ui-5 !default; $tooltip-bg: semantic-tokens.$element-ui-1 !default; $tooltip-border-radius: semantic-tokens.$element-radius-2 !default; $tooltip-opacity: 0.9 !default; -$tooltip-padding-y: map.get(spacers.$spacers, 4) !default; -$tooltip-padding-x: map.get(spacers.$spacers, 6) !default; +$tooltip-padding-y: map.get(spacers.$spacers-block, 4) !default; +$tooltip-padding-x: map.get(spacers.$spacers-inline, 6) !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: 12px !default; @@ -517,8 +521,8 @@ $popover-box-shadow: $box-shadow !default; $popover-header-bg: semantic-tokens.$element-base-3 !default; $popover-header-color: semantic-tokens.$element-text-active; -$popover-header-padding-y: map.get(spacers.$spacers, 5) !default; -$popover-header-padding-x: map.get(spacers.$spacers, 5) !default; +$popover-header-padding-y: map.get(spacers.$spacers-block, 5) !default; +$popover-header-padding-x: map.get(spacers.$spacers-inline, 5) !default; $popover-body-color: semantic-tokens.$element-text-primary !default; $popover-body-padding-y: $popover-header-padding-y !default; @@ -533,13 +537,13 @@ $popover-arrow-outer-color: $popover-border-color !default; // Modals // Padding applied to the modal body -$modal-inner-padding: map.get(spacers.$spacers, 8); +$modal-inner-padding: map.get(spacers.$spacers-block, 8); // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding -$modal-footer-margin-between: map.get(spacers.$spacers, 6); +$modal-footer-margin-between: map.get(spacers.$spacers-block, 6); -$modal-dialog-margin: map.get(spacers.$spacers, 4); -$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers, 9); +$modal-dialog-margin: map.get(spacers.$spacers-block, 4); +$modal-dialog-margin-y-sm-up: map.get(spacers.$spacers-block, 9); $modal-title-line-height: typography.$si-line-height-h4 !default; @@ -560,8 +564,8 @@ $modal-header-border-color: $border-color !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: 0 !default; $modal-footer-border-width: 0 !default; -$modal-header-padding-y: map.get(spacers.$spacers, 5); -$modal-header-padding-x: map.get(spacers.$spacers, 8); +$modal-header-padding-y: map.get(spacers.$spacers-block, 5); +$modal-header-padding-x: map.get(spacers.$spacers-inline, 8); $modal-sm: 300px !default; $modal-md: 500px !default; @@ -578,12 +582,14 @@ $modal-scale-transform: scale(1.02) !default; // Define alert colors, border radius, and padding. $alert-padding-y: 10px !default; -$alert-padding-x: map.get(spacers.$spacers, 5) !default; +$alert-padding-x: map.get(spacers.$spacers-inline, 5) !default; $alert-margin-bottom: 0 !default; $alert-border-radius: 0 !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: 0 !default; -$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +$alert-dismissible-padding-r: calc( + $alert-padding-x * 3 +) !default; // 3x covers width of x plus default padding on either side // Progress bars @@ -605,8 +611,8 @@ $list-group-border-color: $border-color !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-y: map.get(spacers.$spacers, 4) !default; -$list-group-item-padding-x: map.get(spacers.$spacers, 6) !default; // 1.25rem !default; +$list-group-item-padding-y: map.get(spacers.$spacers-block, 4) !default; +$list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.25rem !default; $list-group-hover-bg: semantic-tokens.$element-base-1-hover !default; $list-group-active-color: $body-color !default; @@ -641,7 +647,7 @@ $figure-caption-color: semantic-tokens.$element-text-secondary !default; $breadcrumb-font-size: null !default; $breadcrumb-padding-y: 0; $breadcrumb-padding-x: 0; -$breadcrumb-item-padding-x: map.get(spacers.$spacers, 5); +$breadcrumb-item-padding-x: map.get(spacers.$spacers-inline, 5); $breadcrumb-margin-bottom: 0; $breadcrumb-bg: inherit !default; $breadcrumb-divider-color: semantic-tokens.$element-ui-2 !default; @@ -656,8 +662,8 @@ $code-font-size: typography.$si-font-size-body !default; $code-line-height: typography.$si-line-height-body !default; $code-color: semantic-tokens.$element-text-primary !default; $code-background: semantic-tokens.$element-ui-4 !default; -$code-padding-y: map.get(spacers.$spacers, 1) !default; -$code-padding-x: map.get(spacers.$spacers, 2) !default; +$code-padding-y: map.get(spacers.$spacers-block, 1) !default; +$code-padding-x: map.get(spacers.$spacers-inline, 2) !default; $code-border-radius: semantic-tokens.$element-radius-1 !default; $kbd-padding-y: 0.2rem !default; @@ -668,8 +674,8 @@ $kbd-bg: semantic-tokens.$element-ui-1 !default; $kbd-font-size: $code-font-size !default; $pre-color: semantic-tokens.$element-text-primary !default; -$pre-padding-y: map.get(spacers.$spacers, 4) !default; -$pre-padding-x: map.get(spacers.$spacers, 4) !default; +$pre-padding-y: map.get(spacers.$spacers-block, 4) !default; +$pre-padding-x: map.get(spacers.$spacers-inline, 4) !default; $pre-border-color: semantic-tokens.$element-ui-4 !default; $pre-border-width: $border-width !default; $pre-border-radius: semantic-tokens.$element-radius-1 !default; diff --git a/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss b/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss index e727018c12..d538afb941 100644 --- a/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss +++ b/projects/element-theme/src/styles/bootstrap/forms/_form-check.scss @@ -12,9 +12,9 @@ $form-check-size: 1rem; $form-radio-size: 1rem; $form-radio-inner-size: 0.375rem; $form-radio-offset: calc((#{$form-radio-size} - #{$form-radio-inner-size}) * 0.5 - 1px); -$form-check-padding-x: map.get(spacers.$spacers, 2); +$form-check-padding-x: map.get(spacers.$spacers-inline, 2); -$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4)); +$form-check-label-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4)); %form-check-spacing { .form-check-input { @@ -23,8 +23,8 @@ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4)); } .form-check { - padding-block: map.get(spacers.$spacers, 1); - padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4)); + padding-block: map.get(spacers.$spacers-block, 1); + padding-inline-start: calc($form-check-size + map.get(spacers.$spacers-inline, 4)); @extend %form-check-spacing; diff --git a/projects/element-theme/src/styles/bootstrap/forms/_form-control.scss b/projects/element-theme/src/styles/bootstrap/forms/_form-control.scss index a9865af453..e17044a429 100644 --- a/projects/element-theme/src/styles/bootstrap/forms/_form-control.scss +++ b/projects/element-theme/src/styles/bootstrap/forms/_form-control.scss @@ -16,7 +16,7 @@ // + 3px (min padding between input and first action or validation icon) --si-input-padding-inline-end: calc( var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset, 0px) + - #{map.get(spacers.$spacers, 2) - variables.$input-border-width} + #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width} ); display: block; inline-size: 100%; @@ -40,14 +40,15 @@ calc((#{variables.$input-height-inner} - #{variables.$form-feedback-icon-size}) * 0.5); background-position-x: right calc( - #{map.get(spacers.$spacers, 2) - variables.$input-border-width} + + map.get(spacers.$spacers-block, 2) - variables.$input-border-width + var(--si-action-icon-offset, 0px) ); @include utilities.rtl { background-position-x: left calc( - map.get(spacers.$spacers, 1) + var(--si-action-icon-offset, variables.$input-border-width) + map.get(spacers.$spacers-block, 1) + + var(--si-action-icon-offset, variables.$input-border-width) ); } @@ -61,7 +62,9 @@ // form-control must not add extra `padding-inline-end` for it. &:has(.form-control-actions) { background-image: none; - --si-input-padding-inline-end: #{map.get(spacers.$spacers, 2) - variables.$input-border-width}; + --si-input-padding-inline-end: calc( + #{map.get(spacers.$spacers-block, 2)} - #{variables.$input-border-width} + ); } &:autofill { @@ -120,7 +123,7 @@ } .addon-second-icon { - --input-addon-inset-end: #{map.get(spacers.$spacers, 9)}; + --input-addon-inset-end: #{map.get(spacers.$spacers-block, 9)}; } // Wrapper for trailing actions (buttons, icons, unit labels) inside @@ -135,7 +138,7 @@ display: inline-flex; align-items: center; block-size: variables.$input-height-inner; - padding-inline-start: map.get(spacers.$spacers, 1); + padding-inline-start: map.get(spacers.$spacers-inline, 1); } .form-control .form-control-actions::before { @@ -143,13 +146,13 @@ margin-block: auto; inline-size: variables.$form-feedback-icon-size; block-size: variables.$form-feedback-icon-size; - padding-inline-end: map.get(spacers.$spacers, 1); + padding-inline-end: map.get(spacers.$spacers-inline, 1); content: var(--si-feedback-icon, none); } .form-control + .form-control-actions { position: absolute; - inset-inline-end: map.get(spacers.$spacers, 2); + inset-inline-end: map.get(spacers.$spacers-inline, 2); inset-block-start: variables.$input-border-width; z-index: 2; } @@ -187,15 +190,16 @@ select:is(.form-control, .form-select):not([multiple]) { // + spacer-1(between arrow and validation) right calc( - #{map.get(spacers.$spacers, 2) - variables.$input-border-width + - map.get(spacers.$spacers, 1)} + #{si-vars.$si-icon-font-size} + map.get(spacers.$spacers-block, 2) - variables.$input-border-width + + map.get(spacers.$spacers-block, 1) + si-vars.$si-icon-font-size ) center, - right map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%; + right calc(map.get(spacers.$spacers-block, 2) - variables.$input-border-width) top 50%; background-size: si-vars.$si-icon-font-size, variables.$form-feedback-icon-size; @include utilities.rtl { - background-position: left map.get(spacers.$spacers, 2) - variables.$input-border-width top 50%; + background-position: left + calc(map.get(spacers.$spacers-inline, 2) - variables.$input-border-width) top 50%; } .app--dark & { @@ -211,7 +215,7 @@ select:is(.form-control, .form-select)[multiple] { padding: 0; option { - padding: map.get(spacers.$spacers, 4); + padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4); } option:checked, diff --git a/projects/element-theme/src/styles/bootstrap/forms/_form-file.scss b/projects/element-theme/src/styles/bootstrap/forms/_form-file.scss index 3dead42c40..f0387c31d1 100644 --- a/projects/element-theme/src/styles/bootstrap/forms/_form-file.scss +++ b/projects/element-theme/src/styles/bootstrap/forms/_form-file.scss @@ -16,8 +16,8 @@ border-color: inherit; border-block-width: 0; border-inline-width: 0 1px; - margin-block: -(variables.$input-padding-y); - margin-inline: -(variables.$input-padding-x) variables.$input-padding-x; + margin-block: calc(variables.$input-padding-y * -1); + margin-inline: calc(variables.$input-padding-x * -1) variables.$input-padding-x; block-size: inherit; padding-inline: variables.$btn-padding-x; } diff --git a/projects/element-theme/src/styles/bootstrap/forms/_form-label.scss b/projects/element-theme/src/styles/bootstrap/forms/_form-label.scss index f204130bf3..80728daf6f 100644 --- a/projects/element-theme/src/styles/bootstrap/forms/_form-label.scss +++ b/projects/element-theme/src/styles/bootstrap/forms/_form-label.scss @@ -14,7 +14,7 @@ .form-label { display: inline-block; - padding-block: map.get(spacers.$spacers, 2); + padding-block: map.get(spacers.$spacers-block, 2); .text-end & { padding-inline-end: variables.$input-padding-x; diff --git a/projects/element-theme/src/styles/bootstrap/forms/_validation.scss b/projects/element-theme/src/styles/bootstrap/forms/_validation.scss index eae59e6fe1..ae957bdcc1 100644 --- a/projects/element-theme/src/styles/bootstrap/forms/_validation.scss +++ b/projects/element-theme/src/styles/bootstrap/forms/_validation.scss @@ -63,8 +63,8 @@ display: none; inline-size: 100%; line-height: typography.$si-line-height-caption; - margin-block: map.get(spacers.$spacers, 1); - margin-inline: map.get(spacers.$spacers, 1); + margin-block: map.get(spacers.$spacers-block, 1); + margin-inline: map.get(spacers.$spacers-inline, 1); } @mixin form-validation-state-enh($state, $color, $icon, $text-color) { diff --git a/projects/element-theme/src/styles/bootstrap/mixins/_badge-text.scss b/projects/element-theme/src/styles/bootstrap/mixins/_badge-text.scss index 130010d3d6..bf7a94a058 100644 --- a/projects/element-theme/src/styles/bootstrap/mixins/_badge-text.scss +++ b/projects/element-theme/src/styles/bootstrap/mixins/_badge-text.scss @@ -10,7 +10,7 @@ font-size: typography.$si-font-size-caption; line-height: 0.875rem; padding-block: 0; - padding-inline: map.get(spacers.$spacers, 2); + padding-inline: map.get(spacers.$spacers-inline, 2); font-family: variables.$font-family-sans-serif; font-weight: typography.$si-font-weight-semibold; text-align: center; diff --git a/projects/element-theme/src/styles/bootstrap/mixins/_form-layout.scss b/projects/element-theme/src/styles/bootstrap/mixins/_form-layout.scss index 9412cdfe16..390ff11470 100644 --- a/projects/element-theme/src/styles/bootstrap/mixins/_form-layout.scss +++ b/projects/element-theme/src/styles/bootstrap/mixins/_form-layout.scss @@ -11,13 +11,13 @@ $form-col-layout-label-width: 16ch !default; display: flex; flex-direction: row; align-items: start; - column-gap: map.get(spacers.$spacers, 6); + column-gap: map.get(spacers.$spacers-inline, 6); > .form-label { flex: 0 0 var(--si-form-label-width, #{$form-col-layout-label-width}); max-inline-size: var(--si-form-label-width, #{$form-col-layout-label-width}); align-self: start; - padding-block: variables.$input-padding-y + variables.$input-border-width; + padding-block: variables.$input-padding-y-full; line-height: variables.$input-line-height; &:empty { @@ -36,7 +36,7 @@ $form-col-layout-label-width: 16ch !default; .form-check-input { margin-inline-start: 0; - margin-inline-end: map.get(spacers.$spacers, 4); + margin-inline-end: map.get(spacers.$spacers-inline, 4); } } @@ -45,7 +45,7 @@ $form-col-layout-label-width: 16ch !default; > .form-label { align-self: start; - padding-block: map.get(spacers.$spacers, 1) 0 !important; // stylelint-disable-line declaration-no-important + padding-block: map.get(spacers.$spacers-block, 1) 0 !important; // stylelint-disable-line declaration-no-important } } } diff --git a/projects/element-theme/src/styles/bootstrap/mixins/_grid.scss b/projects/element-theme/src/styles/bootstrap/mixins/_grid.scss index eaaf9c70c0..5b5a64d505 100644 --- a/projects/element-theme/src/styles/bootstrap/mixins/_grid.scss +++ b/projects/element-theme/src/styles/bootstrap/mixins/_grid.scss @@ -133,15 +133,15 @@ // Gutters // // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. - @each $key, $value in variables.$gutters { + @each $key, $block-value in variables.$gutters-block { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { - --#{variables.$variable-prefix}gutter-x: #{$value}; + --#{variables.$variable-prefix}gutter-x: #{map.get(variables.$gutters-inline, $key)}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { - --#{variables.$variable-prefix}gutter-y: #{$value}; + --#{variables.$variable-prefix}gutter-y: #{$block-value}; } } } diff --git a/projects/element-theme/src/styles/bootstrap/mixins/_utilities.scss b/projects/element-theme/src/styles/bootstrap/mixins/_utilities.scss index d7fa7e7356..7c3c50f79d 100644 --- a/projects/element-theme/src/styles/bootstrap/mixins/_utilities.scss +++ b/projects/element-theme/src/styles/bootstrap/mixins/_utilities.scss @@ -17,6 +17,7 @@ @each $key, $value in $values { $properties: map.get($utility, property); + $property-values: map.get($utility, property-values); // Multiple properties are possible, for example with vertical or horizontal margins or paddings @if meta.type-of($properties) == 'string' { @@ -45,7 +46,9 @@ // Don't prefix if value key is null (eg. with shadow class) $property-class-modifier: ''; @if ($key) { - @if ($property-class == '' and $infix == '') { + @if map.get($utility, negative) { + $property-class-modifier: '-n' + $key; + } @else if ($property-class == '' and $infix == '') { $property-class-modifier: $key; } @else { $property-class-modifier: '-' + $key; @@ -79,14 +82,22 @@ --#{variables.$variable-prefix}#{$local-var}: #{$value}; } } - #{$property}: $value $important; + @if $property-values { + #{$property}: map.get(map.get($property-values, $property), $key) $important; + } @else { + #{$property}: $value $important; + } } } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { @each $property in $properties { - #{$property}: $value $important; + @if $property-values { + #{$property}: map.get(map.get($property-values, $property), $key) $important; + } @else { + #{$property}: $value $important; + } } } } diff --git a/projects/element-theme/src/styles/components/_application-header.scss b/projects/element-theme/src/styles/components/_application-header.scss index 906ca80a73..a9a3fa99c5 100644 --- a/projects/element-theme/src/styles/components/_application-header.scss +++ b/projects/element-theme/src/styles/components/_application-header.scss @@ -80,7 +80,7 @@ .application-name { font-size: typography.$si-font-size-body-lg; font-weight: typography.$si-font-weight-body-lg; - padding: map.get(spacers.$spacers, 5); + padding: map.get(spacers.$spacers-block, 5) map.get(spacers.$spacers-inline, 5); margin: 0; line-height: normal; white-space: nowrap; @@ -93,7 +93,7 @@ flex-basis: 100%; display: flex; flex-flow: column; - padding-block: map.get(spacers.$spacers, 4); + padding-block: map.get(spacers.$spacers-block, 4); border-block-start: 1px solid semantic-tokens.$element-ui-4; } @@ -132,7 +132,7 @@ .header-toggle { color: semantic-tokens.$element-text-primary; border: 0; - padding: map.get(spacers.$spacers, 5); + padding: map.get(spacers.$spacers-block, 5) map.get(spacers.$spacers-inline, 5); background-color: transparent; // remove default button style &:is(:hover, .show, :active) { @@ -152,8 +152,8 @@ font-size: typography.$si-font-size-h4; line-height: typography.$si-line-height-h4; font-weight: typography.$si-font-weight-h4; - padding-block: map.get(spacers.$spacers, 5); - padding-inline: map.get(spacers.$spacers, 5); + padding-block: map.get(spacers.$spacers-block, 5); + padding-inline: map.get(spacers.$spacers-inline, 5); background: none; box-shadow: none; border: 0; @@ -163,7 +163,7 @@ margin-block: -0.125rem; ~ .item-title { - padding-inline-start: map.get(spacers.$spacers, 5); + padding-inline-start: map.get(spacers.$spacers-inline, 5); } } @@ -189,7 +189,7 @@ background: var(--si-header-item-border); block-size: 100%; - inline-size: map.get(spacers.$spacers, 2); + inline-size: map.get(spacers.$spacers-inline, 2); } &.header-selection-item { @@ -248,7 +248,7 @@ &::after { inline-size: 100%; - block-size: map.get(spacers.$spacers, 2); + block-size: map.get(spacers.$spacers-block, 2); } } } diff --git a/projects/element-theme/src/styles/components/_datatable.scss b/projects/element-theme/src/styles/components/_datatable.scss index b5a1908dae..9dbe330a5e 100644 --- a/projects/element-theme/src/styles/components/_datatable.scss +++ b/projects/element-theme/src/styles/components/_datatable.scss @@ -111,7 +111,7 @@ $datatable-ghost-cell-strip-radius: 0 !default; inline-size: 13px; block-size: 13px; margin-block: 0; - margin-inline: 0 map.get(spacers.$spacers, 6); + margin-inline: 0 map.get(spacers.$spacers-inline, 6); position: relative; > input { @@ -165,11 +165,11 @@ $datatable-ghost-cell-strip-radius: 0 !default; } &:first-child { - padding-inline-start: map.get(spacers.$spacers, 5); + padding-inline-start: map.get(spacers.$spacers-inline, 5); } &:last-child { - padding-inline-end: map.get(spacers.$spacers, 5); + padding-inline-end: map.get(spacers.$spacers-inline, 5); } } @@ -218,7 +218,7 @@ $datatable-ghost-cell-strip-radius: 0 !default; .sort-btn { color: $datatable-header-color !important; // stylelint-disable-line declaration-no-important - margin-inline-start: map.get(spacers.$spacers, 1); + margin-inline-start: map.get(spacers.$spacers-inline, 1); } // Resizable handle @@ -295,7 +295,7 @@ $datatable-ghost-cell-strip-radius: 0 !default; .datatable-group-cell { display: flex; align-items: center; - padding-inline-start: map.get(spacers.$spacers, 6); + padding-inline-start: map.get(spacers.$spacers-inline, 6); } } @@ -330,8 +330,8 @@ $datatable-ghost-cell-strip-radius: 0 !default; .datatable-footer-inner { background-color: variables.$table-bg; - padding-inline-start: map.get(spacers.$spacers, 6); - padding-inline-end: map.get(spacers.$spacers, 4); + padding-inline-start: map.get(spacers.$spacers-inline, 6); + padding-inline-end: map.get(spacers.$spacers-inline, 4); position: relative; &::before { @@ -357,7 +357,7 @@ $datatable-ghost-cell-strip-radius: 0 !default; .datatable-tree-button { border: 0; background: none; - margin-inline: map.get(spacers.$spacers, 2); + margin-inline: map.get(spacers.$spacers-inline, 2); padding: 0; &[disabled] { diff --git a/projects/element-theme/src/styles/components/_layout.scss b/projects/element-theme/src/styles/components/_layout.scss index f9538fffce..476b72c294 100644 --- a/projects/element-theme/src/styles/components/_layout.scss +++ b/projects/element-theme/src/styles/components/_layout.scss @@ -10,11 +10,11 @@ } .si-layout-main-padding { - padding-block: map.get(variables.$spacers, 6) 0; - padding-inline: map.get(variables.$spacers, 6); + padding-block: map.get(variables.$spacers-block, 6) 0; + padding-inline: map.get(variables.$spacers-inline, 6); @include breakpoints.media-breakpoint-up(md) { - padding-inline: map.get(variables.$spacers, 9); + padding-inline: map.get(variables.$spacers-inline, 9); } } @@ -25,16 +25,16 @@ } .si-layout-status { - margin-block-end: map.get(variables.$spacers, 4); - margin-block-start: -#{map.get(variables.$spacers, 4)}; + margin-block-end: map.get(variables.$spacers-block, 4); + margin-block-start: map.get(variables.$negative-spacers-block, 4); } .si-layout-breadcrumb { display: block; - margin-block-end: map.get(variables.$spacers, 4); + margin-block-end: map.get(variables.$spacers-block, 4); &.si-layout-top-element { - margin-block-end: map.get(variables.$spacers, 6); + margin-block-end: map.get(variables.$spacers-block, 6); } } @@ -45,7 +45,7 @@ 'title title' 'subtitle subtitle' 'actions actions'; - margin-block-end: map.get(variables.$spacers, 8); + margin-block-end: map.get(variables.$spacers-block, 8); } .si-layout-title { @@ -60,7 +60,7 @@ .si-layout-subtitle { grid-area: subtitle; - margin-block-start: map.get(variables.$spacers, 4); + margin-block-start: map.get(variables.$spacers-block, 4); margin-block-end: 0; color: variables.$element-text-secondary; @include variables.si-font( @@ -72,13 +72,13 @@ .si-layout-actions { grid-area: actions; - margin-block-start: map.get(variables.$spacers, 6); + margin-block-start: map.get(variables.$spacers-block, 6); } @include breakpoints.media-breakpoint-up(sm) { .si-layout-breadcrumb { margin-block-end: map.get( - variables.$spacers, + variables.$spacers-block, 4 ) !important; // stylelint-disable-line declaration-no-important } @@ -98,7 +98,7 @@ .si-layout-status { margin-block-start: 0; margin-block-end: map.get( - variables.$spacers, + variables.$spacers-block, 6 ) !important; // stylelint-disable-line declaration-no-important } diff --git a/projects/element-theme/src/styles/components/_list-item.scss b/projects/element-theme/src/styles/components/_list-item.scss index 8047cbb600..50368a6087 100644 --- a/projects/element-theme/src/styles/components/_list-item.scss +++ b/projects/element-theme/src/styles/components/_list-item.scss @@ -20,8 +20,8 @@ ol:has(.list-item) { '. description description' '. metadata metadata' '. quick-actions quick-actions'; - padding-block: map.get(variables.$spacers, 4); - padding-inline: map.get(variables.$spacers, 6); + padding-block: map.get(variables.$spacers-block, 4); + padding-inline: map.get(variables.$spacers-inline, 6); @include typography.si-font( typography.$si-font-size-body, @@ -42,9 +42,9 @@ ol:has(.list-item) { // Content taller than the title remains centered and overflows on both sides. max-block-size: calc( #{typography.$si-line-height-h5 * typography.$si-font-size-h5} + - #{map.get(variables.$spacers, 4) * 2} + #{map.get(variables.$spacers-block, 4)} * 2 ); - margin-inline-end: map.get(variables.$spacers, 4); + margin-inline-end: map.get(variables.$spacers-inline, 4); } .list-item-timestamp { @@ -55,7 +55,7 @@ ol:has(.list-item) { .list-item-title { grid-area: title; - padding-block: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 4); margin-block-end: 0; @include typography.si-font( @@ -94,7 +94,7 @@ ol:has(.list-item) { .list-item-description { grid-area: description; - margin-block-end: map.get(variables.$spacers, 4); + margin-block-end: map.get(variables.$spacers-block, 4); } .list-item-metadata { @@ -103,7 +103,7 @@ ol:has(.list-item) { flex-direction: row; align-items: center; color: variables.$element-text-secondary; - margin-block-end: map.get(variables.$spacers, 4); + margin-block-end: map.get(variables.$spacers-block, 4); a:not(:hover) { color: variables.$element-text-secondary; @@ -118,14 +118,14 @@ ol:has(.list-item) { block-size: 0.125rem; border-radius: 50%; background-color: variables.$element-text-secondary; - margin-inline: map.get(variables.$spacers, 2); + margin-inline: map.get(variables.$spacers-inline, 2); } } .list-item-quick-actions { grid-area: quick-actions; display: flex; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } &.list-item-action { diff --git a/projects/element-theme/src/styles/components/_markdown.scss b/projects/element-theme/src/styles/components/_markdown.scss index fa957f8c14..792f1ce9c9 100644 --- a/projects/element-theme/src/styles/components/_markdown.scss +++ b/projects/element-theme/src/styles/components/_markdown.scss @@ -28,7 +28,7 @@ } li { - margin-block: map.get(variables.$spacers, 2); + margin-block: map.get(variables.$spacers-block, 2); max-inline-size: 100%; overflow-wrap: break-word; } @@ -52,7 +52,7 @@ blockquote { border-inline-start: 4px solid variables.$element-ui-3; - padding-inline-start: map.get(variables.$spacers, 4); + padding-inline-start: map.get(variables.$spacers-inline, 4); p { margin-block-end: 0; @@ -73,7 +73,7 @@ inline-size: max-content; max-inline-size: 100%; // stylelint-disable-next-line declaration-no-important - margin-block-start: map.get(variables.$spacers, 6) !important; + margin-block-start: map.get(variables.$spacers-block, 6) !important; // stylelint-disable-next-line declaration-no-important margin-block-end: 0 !important; overflow: auto; @@ -83,7 +83,7 @@ ul, ol { // stylelint-disable-next-line declaration-no-important - padding-inline-start: map.get(variables.$spacers, 6) !important; + padding-inline-start: map.get(variables.$spacers-inline, 6) !important; } } @@ -112,6 +112,6 @@ inline-size: auto; object-fit: contain; display: block; - margin-block: map.get(variables.$spacers, 4); + margin-block: map.get(variables.$spacers-block, 4); } } diff --git a/projects/element-theme/src/styles/components/_pills.scss b/projects/element-theme/src/styles/components/_pills.scss index e942d114c2..136a7d4c04 100644 --- a/projects/element-theme/src/styles/components/_pills.scss +++ b/projects/element-theme/src/styles/components/_pills.scss @@ -7,7 +7,7 @@ align-items: center; border-radius: 0.75rem; background: var(--filter-pill-background-color, variables.$element-base-0); - padding-inline: map.get(variables.$spacers, 4); + padding-inline: map.get(variables.$spacers-inline, 4); max-inline-size: 100%; &.active { @@ -23,13 +23,13 @@ } :is(.name, .value) { - padding-block: map.get(variables.$spacers, 2); + padding-block: map.get(variables.$spacers-block, 2); } } .pill-group { display: flex; - gap: map.get(variables.$spacers, 1); + gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1); .pill { border-radius: 0; diff --git a/projects/element-theme/src/styles/components/_switch.scss b/projects/element-theme/src/styles/components/_switch.scss index 1a8ceca0f3..d0749723cf 100644 --- a/projects/element-theme/src/styles/components/_switch.scss +++ b/projects/element-theme/src/styles/components/_switch.scss @@ -4,7 +4,7 @@ $si-switch-size: 1.25rem !default; $si-switch-inline-size: calc(2 * #{$si-switch-size}); -$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4)); +$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers-inline, 4)); $si-switch-background-off-color: variables.$element-ui-4 !default; $si-switch-background-on-color: variables.$element-ui-0 !default; $si-switch-background-disabled-color: variables.$element-ui-3 !default; @@ -16,7 +16,7 @@ $si-switch-transition-length: variables.element-transition-duration(0.4s) !defau $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin}); .form-switch { - padding-block: map.get(variables.$spacers, 1); + padding-block: map.get(variables.$spacers-block, 1); padding-inline-start: $si-switch-inline-spacing; .form-check-input { diff --git a/projects/element-theme/src/styles/components/_widgets.scss b/projects/element-theme/src/styles/components/_widgets.scss index 6fd2d1c42e..22669ebabc 100644 --- a/projects/element-theme/src/styles/components/_widgets.scss +++ b/projects/element-theme/src/styles/components/_widgets.scss @@ -28,21 +28,21 @@ .si-value-widget-unit { @extend .si-body-lg; display: inline-block; - margin-inline-start: map.get(variables.$spacers, 2); + margin-inline-start: map.get(variables.$spacers-inline, 2); } .si-value-widget-description { display: flex; align-items: center; - gap: map.get(variables.$spacers, 2); - margin-block-start: map.get(variables.$spacers, 2); + gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2); + margin-block-start: map.get(variables.$spacers-block, 2); min-block-size: variables.$si-icon-font-size; } .si-link-widget { display: flex; flex-direction: column; - gap: map.get(variables.$spacers, 4); + gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); } .si-link-widget-skeleton { diff --git a/projects/element-theme/src/styles/variables/_si-vars.scss b/projects/element-theme/src/styles/variables/_si-vars.scss index 744bc16e70..ab35bbecd9 100644 --- a/projects/element-theme/src/styles/variables/_si-vars.scss +++ b/projects/element-theme/src/styles/variables/_si-vars.scss @@ -12,10 +12,10 @@ $btn-width-normal: 80px; // Component styling -$si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers, 5) + 1px)); -$si-titlebar-padding-y: map.get(spacers.$spacers, 3); +$si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers-block, 5) + 1px)); +$si-titlebar-padding-y: map.get(spacers.$spacers-block, 3); $si-titlebar-height: calc(1.5rem + 2 * $si-titlebar-padding-y); -$si-system-banner-padding-y: map.get(spacers.$spacers, 1); +$si-system-banner-padding-y: map.get(spacers.$spacers-block, 1); $si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y); // allows adding a custom titlebar on top diff --git a/projects/element-theme/src/styles/variables/_spacers.scss b/projects/element-theme/src/styles/variables/_spacers.scss index b8bb167db5..72010125d7 100644 --- a/projects/element-theme/src/styles/variables/_spacers.scss +++ b/projects/element-theme/src/styles/variables/_spacers.scss @@ -1,28 +1,110 @@ +@use 'sass:list'; +@use 'sass:map'; + $spacer: 16px; -// stylelint-disable-next-line scss/dollar-variable-default -$spacers: ( - 0: 0, +$var-spacer-inline: var(--element-spacer-inline, $spacer); +$var-spacer-block: var(--element-spacer-block, $spacer); + +$_spacer-factors: ( + 0: ( + 0, + null + ), // 2px - 1: $spacer * 0.125, + 1: ( + 0.125, + 2px + ), // 4px - 2: $spacer * 0.25, + 2: ( + 0.25, + 3px + ), // 6px - 3: $spacer * 0.375, + 3: ( + 0.375, + 4px + ), // 8px - 4: $spacer * 0.5, + 4: ( + 0.5, + null + ), // 12px - 5: $spacer * 0.75, + 5: ( + 0.75, + null + ), // 16px - 6: $spacer, + 6: ( + 1, + null + ), // 20px - 7: $spacer * 1.25, + 7: ( + 1.25, + null + ), // 24px - 8: $spacer * 1.5, + 8: ( + 1.5, + null + ), // 32px - 9: $spacer * 2, + 9: ( + 2, + null + ), // 64px - 10: $spacer * 4, + 10: ( + 4, + null + ), // 96px - 11: $spacer * 6 + 11: ( + 6, + null + ) ); + +// stylelint-disable-next-line scss/at-function-pattern +@function _spacer-map($var-spacer, $negative: false) { + $spacer-map: (); + + @each $key, $values in $_spacer-factors { + $factor: list.nth($values, 1); + $min-value: list.nth($values, 2); + + @if not($negative and $key == 0) { + @if $negative { + $negative-factor: $factor * -1; + @if $min-value { + $negative-min-value: $min-value * -1; + $spacer-map: map.set( + $spacer-map, + $key, + min($negative-min-value, calc($var-spacer * $negative-factor)) + ); + } @else { + $spacer-map: map.set($spacer-map, $key, calc($var-spacer * $negative-factor)); + } + } @else if $key == 0 { + $spacer-map: map.set($spacer-map, $key, 0); + } @else if $min-value { + $spacer-map: map.set($spacer-map, $key, max($min-value, calc($var-spacer * $factor))); + } @else { + $spacer-map: map.set($spacer-map, $key, calc($var-spacer * $factor)); + } + } + } + + @return $spacer-map; +} + +$spacers-inline: _spacer-map($var-spacer-inline); +$spacers-block: _spacer-map($var-spacer-block); +$negative-spacers-inline: _spacer-map($var-spacer-inline, true); +$negative-spacers-block: _spacer-map($var-spacer-block, true); + +$spacers: $spacers-block; diff --git a/projects/element-theme/src/styles/variables/_utilities.scss b/projects/element-theme/src/styles/variables/_utilities.scss index 0a3c19b975..176bc9b520 100644 --- a/projects/element-theme/src/styles/variables/_utilities.scss +++ b/projects/element-theme/src/styles/variables/_utilities.scss @@ -3,33 +3,15 @@ @use '../bootstrap/variables'; @use 'spacers'; -$negative-spacers: ( - // -2px - n1: spacers.$spacer * -0.125, - // -4px - n2: spacers.$spacer * -0.25, - // -6px - n3: spacers.$spacer * -0.375, - // -8px - n4: spacers.$spacer * -0.5, - // -12px - n5: spacers.$spacer * -0.75, - // -16px - n6: spacers.$spacer * -1, - // -20px - n7: spacers.$spacer * -1.25, - // -24px - n8: spacers.$spacer * -1.5, - // -32px - n9: spacers.$spacer * -2, - // -64px - n10: spacers.$spacer * -4, - // -96px - n11: spacers.$spacer * -6 +$_margins-inline: map.merge( + spacers.$spacers-inline, + ( + auto: auto + ) ); -$_margins: map.merge( - spacers.$spacers, +$_margins-block: map.merge( + spacers.$spacers-block, ( auto: auto ) @@ -259,9 +241,13 @@ $utilities: ( ), 'gap': ( responsive: true, - property: gap, + property: row-gap column-gap, class: gap, - values: spacers.$spacers + values: spacers.$spacers-block, + property-values: ( + row-gap: spacers.$spacers-block, + column-gap: spacers.$spacers-inline + ) ), 'justify-content': ( responsive: true, @@ -327,131 +313,150 @@ $utilities: ( // Margin utilities 'margin': ( responsive: true, - property: margin, + property: margin-block margin-inline, class: m, - values: $_margins + values: $_margins-block, + property-values: ( + margin-block: $_margins-block, + margin-inline: $_margins-inline + ) ), 'margin-x': ( responsive: true, property: margin-inline, class: mx, - values: $_margins + values: $_margins-inline ), 'margin-y': ( responsive: true, property: margin-block, class: my, - values: $_margins + values: $_margins-block ), 'margin-top': ( responsive: true, property: margin-block-start, class: mt, - values: $_margins + values: $_margins-block ), 'margin-end': ( responsive: true, property: margin-inline-end, class: me, - values: $_margins + values: $_margins-inline ), 'margin-bottom': ( responsive: true, property: margin-block-end, class: mb, - values: $_margins + values: $_margins-block ), 'margin-start': ( responsive: true, property: margin-inline-start, class: ms, - values: $_margins + values: $_margins-inline ), // Negative margin utilities 'negative-margin': ( responsive: true, - property: margin, + negative: true, + property: margin-block margin-inline, class: m, - values: $negative-spacers + values: spacers.$negative-spacers-block, + property-values: ( + margin-block: spacers.$negative-spacers-block, + margin-inline: spacers.$negative-spacers-inline + ) ), 'negative-margin-x': ( responsive: true, + negative: true, property: margin-inline, class: mx, - values: $negative-spacers + values: spacers.$negative-spacers-inline ), 'negative-margin-y': ( responsive: true, + negative: true, property: margin-block, class: my, - values: $negative-spacers + values: spacers.$negative-spacers-block ), 'negative-margin-top': ( responsive: true, + negative: true, property: margin-block-start, class: mt, - values: $negative-spacers + values: spacers.$negative-spacers-block ), 'negative-margin-end': ( responsive: true, + negative: true, property: margin-inline-end, class: me, - values: $negative-spacers + values: spacers.$negative-spacers-inline ), 'negative-margin-start': ( responsive: true, + negative: true, property: margin-inline-start, class: ms, - values: $negative-spacers + values: spacers.$negative-spacers-inline ), 'negative-margin-bottom': ( responsive: true, + negative: true, property: margin-block-end, class: mb, - values: $negative-spacers + values: spacers.$negative-spacers-block ), // Padding utilities 'padding': ( responsive: true, - property: padding, + property: padding-block padding-inline, class: p, - values: spacers.$spacers + values: spacers.$spacers-block, + property-values: ( + padding-block: spacers.$spacers-block, + padding-inline: spacers.$spacers-inline + ) ), 'padding-x': ( responsive: true, property: padding-inline, class: px, - values: spacers.$spacers + values: spacers.$spacers-inline ), 'padding-y': ( responsive: true, property: padding-block, class: py, - values: spacers.$spacers + values: spacers.$spacers-block ), 'padding-top': ( responsive: true, property: padding-block-start, class: pt, - values: spacers.$spacers + values: spacers.$spacers-block ), 'padding-end': ( responsive: true, property: padding-inline-end, class: pe, - values: spacers.$spacers + values: spacers.$spacers-inline ), 'padding-bottom': ( responsive: true, property: padding-block-end, class: pb, - values: spacers.$spacers + values: spacers.$spacers-block ), 'padding-start': ( responsive: true, property: padding-inline-start, class: ps, - values: spacers.$spacers + values: spacers.$spacers-inline ), // Text 'font-family': ( diff --git a/projects/maps-ng/src/components/si-map/components/si-map-popover/si-map-popover.component.scss b/projects/maps-ng/src/components/si-map/components/si-map-popover/si-map-popover.component.scss index e320eca7ef..c54f928e6f 100644 --- a/projects/maps-ng/src/components/si-map/components/si-map-popover/si-map-popover.component.scss +++ b/projects/maps-ng/src/components/si-map/components/si-map-popover/si-map-popover.component.scss @@ -15,7 +15,7 @@ border-radius: all-variables.$popover-border-radius; box-shadow: all-variables.$popover-box-shadow; margin-block-start: all-variables.$popover-arrow-height - 2px; - inset-inline-start: map.get(all-variables.$spacers, 7) * -1; + inset-inline-start: map.get(spacers.$negative-spacers-inline, 7); &-arrow { position: absolute; @@ -23,7 +23,9 @@ inline-size: all-variables.$popover-arrow-width; block-size: all-variables.$popover-arrow-height; margin-block: 0; - margin-inline: map.get(all-variables.$spacers, 5) + all-variables.$popover-border-width; + margin-inline: calc( + map.get(all-variables.$spacers-inline, 5) + all-variables.$popover-border-width + ); inset-block-start: all-variables.subtract( -(all-variables.$popover-arrow-height), @@ -59,9 +61,9 @@ .si-map-popover-item { display: flex; - margin-block-end: map.get(all-variables.$spacers, 5); + margin-block-end: map.get(all-variables.$spacers-block, 5); flex-direction: column; - gap: map.get(all-variables.$spacers, 2); + gap: map.get(all-variables.$spacers-block, 2) map.get(all-variables.$spacers-inline, 2); } .si-map-popover-item-title { diff --git a/projects/maps-ng/src/components/si-map/components/si-map-tooltip/si-map-tooltip.component.scss b/projects/maps-ng/src/components/si-map/components/si-map-tooltip/si-map-tooltip.component.scss index f00655838c..55e330d1a3 100644 --- a/projects/maps-ng/src/components/si-map/components/si-map-tooltip/si-map-tooltip.component.scss +++ b/projects/maps-ng/src/components/si-map/components/si-map-tooltip/si-map-tooltip.component.scss @@ -3,11 +3,11 @@ .si-map-tooltip { text-align: start; - margin-block-start: map.get(variables.$spacers, 2); + margin-block-start: map.get(variables.$spacers-block, 2); position: relative; max-inline-size: max-content; - padding-block: map.get(variables.$spacers, 2); - padding-inline: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 2); + padding-inline: map.get(variables.$spacers-inline, 4); color: variables.$element-ui-5; background-color: variables.$element-ui-1; border-radius: variables.$element-radius-1; @@ -15,11 +15,11 @@ &::before { content: ''; position: absolute; - inset-block-start: -(map.get(variables.$spacers, 2)); + inset-block-start: map.get(variables.$negative-spacers-block, 2); left: 50%; // stylelint-disable-line property-layout-mappings transform: translate(-50%, 0%) rotate(45deg); - block-size: map.get(variables.$spacers, 4); - inline-size: map.get(variables.$spacers, 4); + block-size: map.get(variables.$spacers-block, 4); + inline-size: map.get(variables.$spacers-inline, 4); background-color: inherit; } } diff --git a/projects/maps-ng/src/components/si-map/si-map.component.scss b/projects/maps-ng/src/components/si-map/si-map.component.scss index b6f156cb41..f2246a2434 100644 --- a/projects/maps-ng/src/components/si-map/si-map.component.scss +++ b/projects/maps-ng/src/components/si-map/si-map.component.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use '@siemens/element-theme/src/styles/variables'; -$main-button-block-size: calc(1rem + 2 * map.get(variables.$spacers, 4)); +$main-button-block-size: calc(1rem + 2 * map.get(variables.$spacers-block, 4)); $main-button-margin: 1px; :host { @@ -63,20 +63,20 @@ $main-button-margin: 1px; .ol-zoom-extent { inset-inline-end: 0; inset-block-end: 0; - padding-inline-end: map.get(variables.$spacers, 4); - padding-block-end: map.get(variables.$spacers, 4); + padding-inline-end: map.get(variables.$spacers-inline, 4); + padding-block-end: map.get(variables.$spacers-block, 4); } .ol-zoom { padding-block-end: calc( - #{map.get(variables.$spacers, 4) + $main-button-margin} + #{$main-button-block-size} + map.get(variables.$spacers-block, 4) + $main-button-margin + $main-button-block-size ); } .ol-attribution { inset-inline-start: 0; inset-block-end: 0; - padding: map.get(variables.$spacers, 4); + padding: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4); button { inline-size: 1.5rem; @@ -88,9 +88,9 @@ $main-button-margin: 1px; .ol-full-screen { inset-block-end: calc( - #{map.get(variables.$spacers, 4) + 3 * $main-button-margin} + 3 * $main-button-block-size + map.get(variables.$spacers-block, 4) + 3 * $main-button-margin + 3 * $main-button-block-size ); - inset-inline-end: map.get(variables.$spacers, 4); + inset-inline-end: map.get(variables.$spacers-inline, 4); } // needed for RTL diff --git a/projects/native-charts-ng/gauge/si-nchart-gauge.component.scss b/projects/native-charts-ng/gauge/si-nchart-gauge.component.scss index f48ad02b72..d9b91ec4b0 100644 --- a/projects/native-charts-ng/gauge/si-nchart-gauge.component.scss +++ b/projects/native-charts-ng/gauge/si-nchart-gauge.component.scss @@ -74,8 +74,8 @@ align-self: center; td { - padding-block: map.get(variables.$spacers, 4); - padding-inline: map.get(variables.$spacers, 4); + padding-block: map.get(variables.$spacers-block, 4); + padding-inline: map.get(variables.$spacers-inline, 4); } .value { @@ -85,7 +85,7 @@ .name { inline-size: 100%; - min-inline-size: map.get(variables.$spacers, 10); + min-inline-size: map.get(variables.$spacers-inline, 10); max-inline-size: 0; } diff --git a/src/app/examples/si-theme/spacer-controls.html b/src/app/examples/si-theme/spacer-controls.html new file mode 100644 index 0000000000..ad7b098a91 --- /dev/null +++ b/src/app/examples/si-theme/spacer-controls.html @@ -0,0 +1,59 @@ +
+
+ + + +
+ +
+ + + +
+
+ +
+
+

Inline spacing

+
Spacing 0
+
Spacing 1
+
Spacing 2
+
Spacing 3
+
Spacing 4
+
Spacing 5
+
Spacing 6
+
Spacing 7
+
Spacing 8
+
Spacing 9
+
Spacing 10
+
Spacing 11
+
+ +
+

Block spacing

+
Spacing 0
+
Spacing 1
+
Spacing 2
+
Spacing 3
+
Spacing 4
+
Spacing 5
+
Spacing 6
+
Spacing 7
+
Spacing 8
+
Spacing 9
+
Spacing 10
+
Spacing 11
+
+
diff --git a/src/app/examples/si-theme/spacer-controls.ts b/src/app/examples/si-theme/spacer-controls.ts new file mode 100644 index 0000000000..4771408402 --- /dev/null +++ b/src/app/examples/si-theme/spacer-controls.ts @@ -0,0 +1,31 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { DOCUMENT } from '@angular/common'; +import { Component, OnInit, inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SiFormItemComponent } from '@siemens/element-ng/form'; +import { SiNumberInputComponent } from '@siemens/element-ng/number-input'; + +@Component({ + selector: 'app-sample', + imports: [FormsModule, SiFormItemComponent, SiNumberInputComponent], + templateUrl: './spacer-controls.html', + host: { class: 'p-5' } +}) +export class SampleComponent implements OnInit { + inlineSpacer = 16; + blockSpacer = 16; + + private document = inject(DOCUMENT); + + ngOnInit(): void { + this.applySpacer('inline', this.inlineSpacer); + this.applySpacer('block', this.blockSpacer); + } + + applySpacer(direction: 'inline' | 'block', value: number): void { + this.document.documentElement.style.setProperty(`--element-spacer-${direction}`, `${value}px`); + } +} diff --git a/src/styles.scss b/src/styles.scss index 5bdf4b5e2f..2d0b9e4024 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -47,11 +47,11 @@ body { .code-preview { border: 1px solid semantic-tokens.$element-ui-4; border-radius: semantic-tokens.$element-radius-2; - padding: map.get(spacers.$spacers, 4); + padding: map.get(spacers.$spacers-block, 4) map.get(spacers.$spacers-inline, 4); } .sortable-item { - margin-block-end: map.get(spacers.$spacers, 2); + margin-block-end: map.get(spacers.$spacers-block, 2); } // Padding around "app-sample", move into examples