diff --git a/packages/configuration/src/lib/tags.ts b/packages/configuration/src/lib/tags.ts index 41e5898a4a..e10f86c556 100644 --- a/packages/configuration/src/lib/tags.ts +++ b/packages/configuration/src/lib/tags.ts @@ -69,4 +69,9 @@ export const tags = { "title": "Experimental", "color": 6 }, + "uxc": { + "name": "UXC", + "title": "uxc", + "color": 5 + }, } diff --git a/packages/styles/src/shellbar.scss b/packages/styles/src/shellbar.scss index 67461c408c..8b2278ba57 100644 --- a/packages/styles/src/shellbar.scss +++ b/packages/styles/src/shellbar.scss @@ -6,37 +6,10 @@ $block: #{$fd-namespace}-shellbar; -@mixin fd-logo-outline() { - &:focus, - &.is-focus { - outline: none; - pointer-events: all; - - &::before { - content: ''; - position: absolute; - display: block; - border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdShellbar_Button_Outline_Color); - inset: -0.25rem; - pointer-events: none; - border-radius: calc(var(--sapButton_BorderCornerRadius) - 0.125rem); - - @content; - } - } -} - .#{$block} { // Brand $fd-shellbar-logo-background-image-url: "data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTIuMzggMjA0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsLXJ1bGU6ZXZlbm9kZH0uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCl9LmNscy0ye2ZpbGw6I2ZmZn08L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMjA2LjE5IiB4Mj0iMjA2LjE5IiB5Mj0iMjA0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDBiOGYxIi8+PHN0b3Agb2Zmc2V0PSIuMDIiIHN0b3AtY29sb3I9IiMwMWI2ZjAiLz48c3RvcCBvZmZzZXQ9Ii4zMSIgc3RvcC1jb2xvcj0iIzBkOTBkOSIvPjxzdG9wIG9mZnNldD0iLjU4IiBzdG9wLWNvbG9yPSIjMTc3NWM4Ii8+PHN0b3Agb2Zmc2V0PSIuODIiIHN0b3AtY29sb3I9IiMxYzY1YmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZTVmYmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+U0FQX2dyYWRfUl9zY3JuX1plaWNoZW5mbMOkY2hlIDE8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMjA0aDIwOC40MUw0MTIuMzggMEgwdjIwNCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI0NC43MyAzOC4zNmgtNDAuNnY5Ni41MmwtMzUuNDYtOTYuNTVoLTM1LjE2bC0zMC4yNyA4MC43MkMxMDAgOTguNyA3OSA5MS42NyA2Mi40IDg2LjQgNTEuNDYgODIuODkgMzkuODUgNzcuNzIgNDAgNzJjLjA5LTQuNjggNi4yMy05IDE4LjM4LTguMzggOC4xNy40MyAxNS4zNyAxLjA5IDI5LjcxIDhsMTQuMS0yNC41NUM4OS4wNiA0MC40MiA3MSAzNi4yMSA1Ni4xNyAzNi4xOWgtLjA5Yy0xNy4yOCAwLTMxLjY4IDUuNi00MC42IDE0LjgzQTM0LjIzIDM0LjIzIDAgMCAwIDUuNzcgNzQuN0M1LjU0IDg3LjE1IDEwLjExIDk2IDE5LjcxIDEwM2M4LjEgNS45NCAxOC40NiA5Ljc5IDI3LjYgMTIuNjIgMTEuMjcgMy40OSAyMC40NyA2LjUzIDIwLjM2IDEzQTkuNTcgOS41NyAwIDAgMSA2NSAxMzVjLTIuODEgMi45LTcuMTMgNC0xMy4wOSA0LjEtMTEuNDkuMjQtMjAtMS41Ni0zMy42MS05LjU5TDUuNzcgMTU0LjQyYTkzLjc3IDkzLjc3IDAgMCAwIDQ2IDEyLjIyaDIuMTFjMTQuMjQtLjI1IDI1Ljc0LTQuMzEgMzQuOTItMTEuNzEuNTMtLjQxIDEtLjg0IDEuNDktMS4yOGwtNC4xMiAxMC44NUgxMjNsNi4xOS0xOC44MmE2Ny40NiA2Ny40NiAwIDAgMCAyMS42OCAzLjQzIDY4LjMzIDY4LjMzIDAgMCAwIDIxLjE2LTMuMjVsNiAxOC42NGg2MC4xNHYtMzloMTMuMTFjMzEuNzEgMCA1MC40Ni0xNi4xNSA1MC40Ni00My4yIDAtMzAuMTEtMTguMjItNDMuOTQtNTcuMDEtNDMuOTR6TTE1MC45MSAxMjFhMzYuOTMgMzYuOTMgMCAwIDEtMTMtMi4yOGwxMi44Ny00MC41OWguMjJsMTIuNjUgNDAuNzFhMzguNSAzOC41IDAgMCAxLTEyLjc0IDIuMTZ6bTk2LjItMjMuMzNoLTguOTRWNjQuOTFoOC45NGMxMS45MyAwIDIxLjQ0IDQgMjEuNDQgMTYuMTQgMCAxMi42LTkuNTEgMTYuNTctMjEuNDQgMTYuNTciLz48L3N2Zz4=" !default; - // Colors - $fd-shellbar-color: var(--sapShell_TextColor) !default; - - // Backgrounds - $fd-shellbar-background: transparent !default; - $fd-shellbar-hover-background: var(--sapShell_Hover_Background) !default; - @mixin fd-shellbar-sm-screen() { --fdSelect_Text_Content_Display: none; --fdSelect_Min_Width: 1rem; @@ -59,6 +32,10 @@ $block: #{$fd-namespace}-shellbar; &--desktop { display: none; } + + &:has(.#{$block}__search-field) { + width: 100%; + } } .#{$block}__action-combobox { @@ -84,6 +61,10 @@ $block: #{$fd-namespace}-shellbar; margin-block: 0 !important; } } + + .#{$block}__search-field { + width: 100%; + } } @mixin fd-shellbar-md-lg-xl-screens() { @@ -106,98 +87,101 @@ $block: #{$fd-namespace}-shellbar; @include fd-reset(); @include fd-flex-vertical-center () { + gap: 1rem; justify-content: space-between; } - background-color: var(--sapShellColor); - box-shadow: var(--fdShellbar_Shadow); - height: var(--fdShellbar_Height); - color: $fd-shellbar-color; - position: relative; + height: 3.25rem; padding-block: 0; - padding-inline: 1rem; + background: var(--sapShellColor); + box-shadow: var(--sapShell_Shadow); + padding-inline: var(--fdShellbar_Inline_Padding, 1rem); + border: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); - &__group { + &__branding { @include fd-reset(); - @include fd-flex-vertical-center() { - flex: 1 1 0; - gap: 0.5rem; + @include fd-flex-vertical-center () { + gap: 0.25rem; + } - &--shrink { - flex-grow: 0; - } + cursor: var(--fdShellBar_Branding_Cursor, pointer); + padding-inline: 0.25rem 0.5rem; + padding-block: 0.125rem; + height: 2.25rem; + border-radius: var(--sapButton_BorderCornerRadius); + background: var(--fdShellBar_Branding_Background, var(--sapButton_Lite_Background)); + border: var(--sapButton_BorderWidth) solid var(--fdShellBar_Branding_Border_Color, var(--sapButton_Lite_BorderColor)); + + @include fd-hover() { + --fdShellBar_Branding_Background: var(--fdShellbar_Branding_Hover_Background); + --fdShellBar_Branding_Border_Color: var(--fdShellbar_Branding_Hover_Border_Color); + } - &--basis-auto { - flex-basis: auto; - } + @include fd-active() { + --fdShellBar_Branding_Background: var(--fdShellbar_Branding_Active_Background); + --fdShellBar_Branding_Border_Color: var(--fdShellbar_Branding_Active_Border_Color); } - &--product { - justify-content: flex-start; - order: 1; + @include fd-focus() { + outline-offset: -0.1875rem; + outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdShellbar_Button_Outline_Color); } - &--copilot, - &--center { - order: 2; - display: none; - justify-content: center; - margin-block: 0; - margin-inline: 0.5rem; + &--non-interactive { + --fdShellBar_Branding_Cursor: auto; - .#{$block}__action { - width: 100%; + @include fd-hover() { + --fdShellBar_Branding_Background: var(--sapButton_Lite_Background); + --fdShellBar_Branding_Border_Color: var(--sapButton_Lite_BorderColor); } - @include fd-media-xl() { - display: inline-block; + @include fd-active() { + --fdShellBar_Branding_Background: var(--sapButton_Lite_Background); + --fdShellBar_Branding_Border_Color: var(--sapButton_Lite_BorderColor); } - } - &--actions { - justify-content: flex-end; - order: 3; + @include fd-focus() { + outline: none; + + --fdShellBar_Branding_Background: var(--sapButton_Lite_Background); + --fdShellBar_Branding_Border_Color: var(--sapButton_Lite_BorderColor); + } } } - &__title, - &__subtitle { + &__title { @include fd-reset(); @include fd-ellipsis(); - color: var(--sapShell_TextColor); + font-size: var(--sapFontHeader5Size); + color: var(--fdShellbar_Title_Color); + font-family: var(--sapFontSemiboldFamily); } - &__logo, - &__product, &__subtitle { - display: inline-block; - vertical-align: middle; - } - - &__logo, - &__title { - @include fd-logo-outline(); - - position: relative; - } + @include fd-reset(); + @include fd-ellipsis(); - &__title { - font-weight: bold; - vertical-align: middle; + font-size: var(--sapFontSmallSize); + color: var(--fdShellbar_Subtitle_Color) } - &__subtitle { - font-size: var(--sapFontSmallSize); + &__product { + @include fd-reset(); + @include fd-flex(column); } &__logo { @include fd-reset(); + position: relative; + display: inline-block; + vertical-align: middle; max-height: 2rem; background-repeat: no-repeat; background-size: contain; + margin-inline: 0.25rem 0; > * { line-height: 0; @@ -213,368 +197,476 @@ $block: #{$fd-namespace}-shellbar; } } - // Elements inside shellbar groups - .#{$block}__group { - --fdShellbar_Button_Active_Background: var(--sapShell_Active_Background); - --fdShellbar_Button_Active_Color: var(--sapShell_Active_TextColor); - .#{$block}__action { - @include fd-reset(); + &__context-area { + @include fd-reset(); - > * { - vertical-align: middle; + @include fd-flex-vertical-center () { + gap: 1rem; + } + + width: 100%; + } + + &__separator { + @include fd-reset(); + + width: 0.0625rem; + height: 1rem; + margin-inline: 0; + margin-block: 0; + background-color: var(--sapToolbar_SeparatorColor); + } + + &__spacer { + @include fd-reset(); + + height: 100%; + flex: 1 auto; + } + + .#{$fd-namespace}-popover__control:focus-visible { + outline: none; + } + + .#{$block}__button { + --fdButtonBackgroundColor: var(--sapButton_Lite_Background); + --fdButtonBorderColor: var(--sapButton_Lite_BorderColor); + --fdButtonColor: var(--sapShell_TextColor); + + & > [class*="sap-icon"] { + color: var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor)); + } + + &.#{$fd-namespace}-user-menu__control { + padding-inline: 0; + } + + @include fd-hover() { + --fdButtonBackgroundColor: var(--sapShell_Hover_Background); + --fdButtonBorderColor: var(--fdShellbar_Button_Hover_Border_Color); + --fdButtonColor: var(--sapShell_TextColor;); + + & > [class*="sap-icon"] { + color: var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor)); } + } + + @include fd-active() { + --fdButtonBackgroundColor: var(--sapShell_Active_Background); + --fdButtonBorderColor: var(--fdShellbar_Button_Active_Border_Color); + --fdButtonColor: var(--sapShell_Active_TextColor;); - &--grow { - flex: 1; + & > [class*="sap-icon"] { + color: var(--fdButtonIconColor, var(--sapShell_Active_TextColor)); } + } - &--shrink { - flex: 0; + @include fd-toggled() { + --fdButtonBackgroundColor: var(--sapShell_Selected_Background); + --fdButtonBorderColor: var(--fdShellbar_Button_Active_Border_Color); + --fdButtonColor: var(--sapShell_Selected_TextColor;); + + & > [class*="sap-icon"] { + color: var(--fdButtonIconColor, var(--sapShell_Selected_TextColor)); } } - .#{$block}__search-field { - --fdSelect_Text_Content_Color: var(--fdShellbar_Select_Content_Color); - --fdInputGroup_Input_Border: var(--fdShellbar_Input_Border); - --fdInputGroup_Input_Color: var(--fdShellbar_Input_Color); - --fdInputGroup_Input_Placeholder_Color: var(--fdShellbar_Input_Placeholder_Color); - --fdInputGroup_Input_Placeholder_Style: var(--fdShellbar_Input_Placeholder_Style); - --fdInputGroup_Background: none; - --fdInputGroup_Background_Color: var(--fdShellbar_Input_Background); - --fdInputGroup_Hover_Background: none; - --fdInput_Group_Button_Box_Shadow: none; - --fdInput_Box_Shadow_Hover: none; - - box-shadow: none; - border: var(--fdShellbar_Search_Border); - border-radius: var(--fdShellbar_Input_Border_Radius); - position: relative; - cursor: text; + @include fd-focus() { + &::after { + border-color: var(--fdShellbar_Button_Outline_Color); + } + } - &-helper { - display: var(--fdShellbar_Helper_Display); + &.#{$block}__button--menu { + --fdButtonColor: var(--sapShell_TextColor); + } - &::before, - &::after { - position: absolute; - content: ""; - z-index: 20; - pointer-events: none; - box-shadow: var(--sapField_Shadow); - border-radius: var(--fdShellbar_Input_Border_Radius); + &:has(.#{$block}__avatar--circle) { + border-radius: 20rem; - @include fd-set-equal-positions(0); - } + --fdButton_Height: fit-content; + --fdButton_Clickable_Height: fit-content; + --fdButton_Min_Width: fit-content; + --fdButton_Focus_Border_Radius: 20rem; + } - &::after { - box-shadow: var(--fdShellbar_Helper_Bottom_Shadow); - border-radius: 0; - } + &--menu { + + .#{$block}__title { + margin-inline: 0; + margin-block: 0; } + } + } - &-input { - position: relative; + .#{$block}__action { + @include fd-reset(); + + > * { + vertical-align: middle; + } + + &--grow { + flex: 1; + } + + &--shrink { + flex: 0; + } + + &:has(.#{$fd-namespace}-product-switch) { + margin-inline-start: 0.5rem; + } + } + + .#{$block}__search-field { + --fdSelect_Text_Content_Color: var(--fdShellbar_Select_Content_Color); + --fdInputGroup_Input_Border: var(--fdShellbar_Input_Border); + --fdInputGroup_Input_Color: var(--fdShellbar_Input_Color); + --fdInputGroup_Input_Placeholder_Color: var(--fdShellbar_Input_Placeholder_Color); + --fdInputGroup_Input_Placeholder_Style: var(--fdShellbar_Input_Placeholder_Style); + --fdInputGroup_Background: none; + --fdInputGroup_Background_Color: var(--fdShellbar_Input_Background); + --fdInputGroup_Hover_Background: none; + --fdInput_Group_Button_Box_Shadow: none; + --fdInput_Box_Shadow_Hover: none; + + box-shadow: none; + width: 25rem; + border: var(--fdShellbar_Search_Border); + border-radius: var(--fdShellbar_Input_Border_Radius); + position: relative; + cursor: text; - @include fd-set-paddings-x-equal(var(--fdShellbar_Search_Input_X_Padding)); + &-helper { + display: var(--fdShellbar_Helper_Display); - @include fd-hover() { - --fdInputGroup_Hover_Input_Background: var(--fdShellbar_Input_Hover_Background); + &::before, + &::after { + position: absolute; + content: ""; + z-index: 20; + pointer-events: none; + box-shadow: var(--sapField_Shadow); + border-radius: var(--fdShellbar_Input_Border_Radius); + + @include fd-set-equal-positions(0); + } + + &::after { + box-shadow: var(--fdShellbar_Helper_Bottom_Shadow); + border-radius: 0; + } + } + + &-input { + position: relative; + + @include fd-set-paddings-x-equal(var(--fdShellbar_Search_Input_X_Padding)); + + @include fd-hover() { + --fdInputGroup_Hover_Input_Background: var(--fdShellbar_Input_Hover_Background); + --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background); + & ~ .#{$block}__search-field-addon { --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background); - & ~ .#{$block}__search-field-addon { - --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background); - } + } - & ~ .#{$block}__search-field-helper { - &::after { - box-shadow: inset 0 -0.0625rem 0 var(--sapField_Hover_BorderColor); - } + & ~ .#{$block}__search-field-helper { + &::after { + box-shadow: inset 0 -0.0625rem 0 var(--sapField_Hover_BorderColor); } } + } - @include fd-focus() { - --fdInputGroup_Input_Color: var(--fdShellbar_Input_Focus_Color); - --fdInputGroup_Input_Background: var(--fdShellbar_Input_Focus_Background); - } + @include fd-focus() { + --fdInputGroup_Input_Color: var(--fdShellbar_Input_Focus_Color); + --fdInputGroup_Input_Background: var(--fdShellbar_Input_Focus_Background); + } - &:placeholder-shown { - & ~ .#{$block}__search-cancel { - display: none; - } + &:placeholder-shown { + & ~ .#{$block}__search-cancel { + display: none; } + } - &:not(:placeholder-shown) { - & ~ .#{$block}__search-submit { - > * { - --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Background); - --fdButtonColor: var(--fdShellbar_Search_Active_Button_Color); - --fdButtonIconColor: var(--fdShellbar_Search_Active_Button_Color); - --fdShellbar_Button_Active_Background: var(--fdButtonBackgroundColor); - --fdShellbar_Button_Active_Color: var(--fdShellbar_Search_Active_Button_Color); - - &:hover { - --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Hover_Background); - } + &:not(:placeholder-shown) { + & ~ .#{$block}__search-submit { + > * { + --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Background); + --fdButtonColor: var(--fdShellbar_Search_Active_Button_Color); + --fdButtonIconColor: var(--fdShellbar_Search_Active_Button_Color); + --fdShellbar_Button_Active_Background: var(--fdButtonBackgroundColor); + --fdShellbar_Button_Active_Color: var(--fdShellbar_Search_Active_Button_Color); + + &:hover { + --fdButtonBackgroundColor: var(--fdShellbar_Search_Active_Button_Hover_Background); } } } + } - &--select { - @include fd-flex-vertical-center(); + &--select { + @include fd-flex-vertical-center(); - font-style: normal; - height: 100%; - flex: 0 1; - } + font-style: normal; + height: 100%; + flex: 0 1; } + } - &-addon { - @include fd-flex-vertical-center() { - height: 100%; - flex: 0 1; - } + &-addon { + @include fd-flex-vertical-center() { + height: 100%; + flex: 0 1; + } - .#{$block}__button { - --fdButton_Outline_Offset: 0; - --fdButton_Focus_Border_Radius: var(--fdShellbar_Input_Border_Radius); + .#{$block}__button { + --fdButton_Outline_Offset: 0; + --fdButton_Focus_Border_Radius: var(--fdShellbar_Input_Border_Radius); - height: var(--fdShellbar_Input_Addon_Dimension); - min-width: var(--fdShellbar_Input_Addon_Dimension); - border-radius: var(--fdShellbar_Input_Border_Radius); - border-width: var(--fdShellbar_Input_Addon_Border_Width); + padding-inline: 0; + height: var(--fdShellbar_Input_Addon_Dimension); + min-width: var(--fdShellbar_Input_Addon_Dimension); + border-radius: var(--fdShellbar_Input_Border_Radius); + border-width: var(--fdShellbar_Input_Addon_Border_Width); - @include fd-hover () { - @include fd-set-border-left(var(--fdShellbar_Button_Left_Border)); + @include fd-hover () { + @include fd-set-border-left(var(--fdShellbar_Button_Left_Border)); - --fdButtonBackgroundColor: var(--fdShellbar_Search_Button_Hover_Background); - } + --fdButtonBackgroundColor: var(--fdShellbar_Search_Button_Hover_Background); + } - @include fd-active() { - border-color: var(--fdShellbar_Button_Active_Border_Color); - } + @include fd-active() { + border-color: var(--fdShellbar_Button_Active_Border_Color); } } + } - .#{$block}__search-field-category { - flex-shrink: 0; + .#{$block}__search-field-category { + flex-shrink: 0; - @include fd-hover() { + @include fd-hover() { + --fdInputGroup_Addon_Background: var(--fdShellbar_Input_Background); + & ~ .#{$block}__search-field-input, + & ~ .#{$block}__search-field-addon { --fdInputGroup_Addon_Background: var(--fdShellbar_Input_Background); - & ~ .#{$block}__search-field-input, - & ~ .#{$block}__search-field-addon { - --fdInputGroup_Addon_Background: var(--fdShellbar_Input_Background); - --fdInputGroup_Input_Background: var(--fdShellbar_Input_Background); - } - - .#{$block}__search-category { - box-shadow: var(--sapContent_Interaction_Shadow); - background-color: var(--fdShellbar_Search_Category_Button_Hover_Background); - } - - .#{$block}__search-dropdown { - background-color: transparent; - } + --fdInputGroup_Input_Background: var(--fdShellbar_Input_Background); } - > * { - @include fd-set-margin-right(var(--fdShellbar_Search_Category_Offset_Right)); - @include fd-set-margins-y-equal(); + .#{$block}__search-category { + box-shadow: var(--sapContent_Interaction_Shadow); + background-color: var(--fdShellbar_Search_Category_Button_Hover_Background); } + .#{$block}__search-dropdown { - background-color: var(--fdShellbar_Input_Background); - outline: none; - position: static; + background-color: transparent; + } + } - --fdInput_Group_Button_Background: transparent; - --fdInput_Group_Button_Text_Color: var(--sapShell_InteractiveTextColor); + > * { + @include fd-set-margin-right(var(--fdShellbar_Search_Category_Offset_Right)); + @include fd-set-margins-y-equal(); + } + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Input_Background); + outline: none; + position: static; - @include fd-focus() { - &::after { - display: none; - } - } - } - .#{$block}__search-category { - --fdSelect_Background: transparent; - --fdSelect_Hover_Background: transparent; - --fdSelect_Focus_Background: transparent; - --fdSelect_Background_Color: var(--fdShellbar_Input_Background); - --fdSelect_Hover_Background_Color: var(--fdShellbar_Input_Background); - - border: var(--fdShellbar_Search_Category_Border); - border-width: var(--fdShellbar_Search_Category_Border_width); - border-radius: 0; - min-height: var(--fdShellbar_Input_Addon_Dimension); - height: var(--fdShellbar_Input_Addon_Dimension); - margin-inline: 0; - margin-block: 0; - position: relative; - margin-inline-start: var(--fdShellbar_Search_Category_Offset_Left); + --fdInput_Group_Button_Background: transparent; + --fdInput_Group_Button_Text_Color: var(--sapShell_InteractiveTextColor); + @include fd-focus() { &::after { - box-shadow: none; + display: none; } + } + } + .#{$block}__search-category { + --fdSelect_Background: transparent; + --fdSelect_Hover_Background: transparent; + --fdSelect_Focus_Background: transparent; + --fdSelect_Background_Color: var(--fdShellbar_Input_Background); + --fdSelect_Hover_Background_Color: var(--fdShellbar_Input_Background); + + border: var(--fdShellbar_Search_Category_Border); + border-width: var(--fdShellbar_Search_Category_Border_width); + border-radius: 0; + min-height: var(--fdShellbar_Input_Addon_Dimension); + height: var(--fdShellbar_Input_Addon_Dimension); + margin-inline: 0; + margin-block: 0; + position: relative; + margin-inline-start: var(--fdShellbar_Search_Category_Offset_Left); - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - background: var(--sapShell_InteractiveBorderColor); - width: 0.0625rem; - display: var(--fdShellbar_Search_Separator_Display); - } + &::after { + box-shadow: none; + } - @include fd-rtl() { - &::before { - left: 0; - right: auto; - } + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + background: var(--sapShell_InteractiveBorderColor); + width: 0.0625rem; + display: var(--fdShellbar_Search_Separator_Display); + } + + @include fd-rtl() { + &::before { + left: 0; + right: auto; } + } - @include fd-focus() { - --fdSelect_Text_Content_Color: var(--sapButton_Active_TextColor); - --fdShellbar_Input_Background: var(--fdShellbar_Search_Category_Button_Hover_Background); - --fdSelect_Focus_Background: var(--fdShellbar_Search_Container_Hover_Background); + @include fd-focus() { + --fdSelect_Text_Content_Color: var(--sapButton_Active_TextColor); + --fdShellbar_Input_Background: var(--fdShellbar_Search_Category_Button_Hover_Background); + --fdSelect_Focus_Background: var(--fdShellbar_Search_Container_Hover_Background); - border-radius: var(--fdShellbar_Input_Border_Radius); - outline-color: var(--sapButton_Lite_Active_BorderColor); - outline-width: 0.0625rem; - outline-offset: -0.0625rem; + border-radius: var(--fdShellbar_Input_Border_Radius); + outline-color: var(--sapButton_Lite_Active_BorderColor); + outline-width: 0.0625rem; + outline-offset: -0.0625rem; - .#{$block}__search-dropdown { - --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor); - } + .#{$block}__search-dropdown { + --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor); + } - &::before { - display: none; - } + &::before { + display: none; } } } + } - @include fd-hover() { - --fdInputGroup_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + @include fd-hover() { + --fdInputGroup_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); - .#{$block}__search-field-helper { - &::before { - box-shadow: var(--sapField_Hover_Shadow); - } + .#{$block}__search-field-helper { + &::before { + box-shadow: var(--sapField_Hover_Shadow); + } - &::after { - box-shadow: var(--fdShellbar_Hover_Helper_Bottom_Shadow); - } + &::after { + box-shadow: var(--fdShellbar_Hover_Helper_Bottom_Shadow); } + } - .#{$block}__search-field { - &-category .#{$block}__search-category { - --fdSelect_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); - --fdSelect_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + .#{$block}__search-field { + &-category .#{$block}__search-category { + --fdSelect_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); + --fdSelect_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background); - @include fd-hover() { - border-radius: var(--fdShellbar_Input_Border_Radius); + @include fd-hover() { + border-radius: var(--fdShellbar_Input_Border_Radius); - &::before { - display: none; - } + &::before { + display: none; } } } + } - .#{$block}__search-field-category:not(:hover) { - .#{$block}__search-dropdown { - background-color: var(--fdShellbar_Search_Container_Hover_Background); - } + .#{$block}__search-field-category:not(:hover) { + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Search_Container_Hover_Background); } } + } - @include fd-focus() { - outline: none; - box-shadow: var(--fdShellbar_Active_Shadow); - background-color: var(--fdShellbar_Active_Background); - - .#{$block}__search-field-helper { - &::before { - outline: var(--fdShellbar_Search_Active_Outline); - outline-offset: -0.125rem; - } + @include fd-focus() { + outline: none; + box-shadow: var(--fdShellbar_Active_Shadow); + background-color: var(--fdShellbar_Active_Background); - &::after, - &::before { - box-shadow: none; - } + .#{$block}__search-field-helper { + &::before { + outline: var(--fdShellbar_Search_Active_Outline); + outline-offset: -0.125rem; } - .#{$block}__search-field-addon { - --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Hover_Background); + &::after, + &::before { + box-shadow: none; } + } - .#{$block}__search-category { - background-color: var(--fdShellbar_Search_Hover_Background); - } + .#{$block}__search-field-addon { + --fdInputGroup_Addon_Background: var(--fdShellbar_Search_Hover_Background); + } - .#{$block}__search-field-category { - .#{$block}__search-dropdown { - background-color: var(--fdShellbar_Search_Hover_Category_Button_Background); - } + .#{$block}__search-category { + background-color: var(--fdShellbar_Search_Hover_Background); + } + + .#{$block}__search-field-category { + .#{$block}__search-dropdown { + background-color: var(--fdShellbar_Search_Hover_Category_Button_Background); } } } + } - .#{$block}__button { - border: solid var(--sapButton_BorderWidth) var(--fdButtonBorderColor); - outline-color: var(--fdShellbar_Button_Outline_Color); + .#{$block}__group { + --fdShellbar_Button_Active_Background: var(--sapShell_Active_Background); + --fdShellbar_Button_Active_Color: var(--sapShell_Active_TextColor); - --fdButtonBackgroundColor: var(--sapButton_Lite_Background); - --fdButtonBorderColor: var(--sapButton_Lite_BorderColor); - --fdButtonColor: var(--fdShellbar_Button_Color); + @include fd-reset(); - & > [class*="sap-icon"] { - color: var(--fdButtonIconColor, var(--sapShell_InteractiveTextColor)); - } + @include fd-flex-vertical-center() { + gap: 0.5rem; - .#{$block}__title { - color: inherit; + &--shrink { + flex-grow: 0; } - &:not(&--menu) { - padding-inline: 0; - padding-block: 0; + &--basis-auto { + flex-basis: auto; } + } - &.#{$block}__button--menu { - --fdButtonColor: var(--sapShell_TextColor); - } + &--product { + order: 1; + justify-content: flex-start; + } - @include fd-hover() { - --fdButtonBorderColor: var(--fdShellbar_Button_Hover_Border_Color); - --fdButtonBackgroundColor: var(--fdShellbar_Input_Hover_Background); - --fdButtonIconColor: var(--sapShell_InteractiveTextColor); + &--copilot, + &--center { + order: 2; + display: none; + justify-content: center; + margin-block: 0; + margin-inline: 0.5rem; - @include fd-disabled() { - --fdButtonBackgroundColor: $fd-shellbar-background; - } + .#{$block}__action { + width: 100%; } - @include fd-active() { - --fdButtonBorderColor: var(--fdShellbar_Button_Active_Border_Color); - --fdButtonBackgroundColor: var(--fdShellbar_Button_Active_Background); - --fdButtonColor: var(--fdShellbar_Button_Active_Color); - --fdButtonIconColor: var(--fdShellbar_Button_Active_Color); - - &::after { - display: none; - } + @include fd-media-xl() { + display: inline-block; } + } - &--menu { + &--actions { + justify-content: flex-end; + order: 3; + gap: 0.5rem; + } - .#{$block}__title { - margin-inline: 0; - margin-block: 0; - } - } + &--full-width { + width: 100%; } + + & + .#{$block}__group { + gap: 0.5rem; + justify-content: flex-end; + } + } + + .#{$block}__toolbar { + padding-inline: 0; } &--s, @@ -611,8 +703,7 @@ $block: #{$fd-namespace}-shellbar; &.#{$block}--md, &.#{$block}--lg, &.#{$block}--xl { - padding-inline: 0; - padding-block: 0; + padding-inline: 1rem; } } diff --git a/packages/styles/src/theming/common/shellbar/_sap_fiori.scss b/packages/styles/src/theming/common/shellbar/_sap_fiori.scss index 4fba8b0904..8f675466a4 100644 --- a/packages/styles/src/theming/common/shellbar/_sap_fiori.scss +++ b/packages/styles/src/theming/common/shellbar/_sap_fiori.scss @@ -5,7 +5,6 @@ --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); --fdShellbar_Button_Hover_Border_Color: transparent; --fdShellbar_Button_Active_Border_Color: transparent; - --fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor); --fdShellbar_Search_Border: none; --fdShellbar_Search_Category_Border: var(--fdShellbar_Input_Border); --fdShellbar_Search_Category_Border_width: 0.0625rem; @@ -42,6 +41,12 @@ --fdShellbar_Helper_Display: none; --fdShellbar_Helper_Bottom_Shadow: none; --fdShellbar_Hover_Helper_Bottom_Shadow: none; - --fdShellbar_Button_Color: var(--sapShell_InteractiveTextColor); --fdShellbar_Search_Input_X_Padding: 0.625rem; + --fdShellbar_Title_Color: var(--sapShell_TextColor); + --fdShellbar_Subtitle_Color: var(--sapShell_TextColor); + --fdShellbar_Branding_Hover_Background: var(--sapShell_Hover_Background); + --fdShellbar_Branding_Active_Background: transparent; + --fdShellbar_Branding_Hover_Border_Color: transparent; + --fdShellbar_Branding_Active_Border_Color: transparent; + --fdShellbar_Button_Outline_Color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/styles/src/theming/common/shellbar/_sap_horizon.scss b/packages/styles/src/theming/common/shellbar/_sap_horizon.scss index aad8f46492..8e711453a1 100644 --- a/packages/styles/src/theming/common/shellbar/_sap_horizon.scss +++ b/packages/styles/src/theming/common/shellbar/_sap_horizon.scss @@ -5,7 +5,6 @@ --fdShellbar_Shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor); --fdShellbar_Button_Hover_Border_Color: var(--sapButton_Lite_Hover_BorderColor); --fdShellbar_Button_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); - --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); --fdShellbar_Search_Border: none; --fdShellbar_Search_Category_Border: none; --fdShellbar_Search_Category_Border_width: 0; @@ -44,6 +43,12 @@ --fdShellbar_Helper_Bottom_Shadow: inset 0 -0.0625rem 0 var(--sapField_BorderColor); --fdShellbar_Hover_Helper_Bottom_Shadow: inset 0 -0.0625rem 0 var(--sapField_Hover_BorderColor); --fdShellbar_Helper_Display: block; - --fdShellbar_Button_Color: var(--sapShell_TextColor); --fdShellbar_Search_Input_X_Padding: 0.9rem; + --fdShellbar_Title_Color: var(--sapLegendColor16); + --fdShellbar_Subtitle_Color: var(--sapObjectHeader_Subtitle_TextColor); + --fdShellbar_Branding_Hover_Background: var(--sapButton_Lite_Hover_Background); + --fdShellbar_Branding_Active_Background: var(--sapButton_Lite_Active_Background); + --fdShellbar_Branding_Hover_Border_Color: var(--sapButton_Lite_Hover_BorderColor); + --fdShellbar_Branding_Active_Border_Color: var(--sapButton_Lite_Active_BorderColor); + --fdShellbar_Button_Outline_Color: var(--sapContent_FocusColor); } diff --git a/packages/styles/stories/Components/product-switch/product-switch.stories.js b/packages/styles/stories/Components/product-switch/product-switch.stories.js index 39b4d7f8f1..29e3b1f1e3 100644 --- a/packages/styles/stories/Components/product-switch/product-switch.stories.js +++ b/packages/styles/stories/Components/product-switch/product-switch.stories.js @@ -36,7 +36,7 @@ const localStyles = ` `; export const Shellbar = () => `${localStyles}
-
+
diff --git a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-msize.example.html b/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-msize.example.html deleted file mode 100644 index b90d76f953..0000000000 --- a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-msize.example.html +++ /dev/null @@ -1,97 +0,0 @@ -
-
-
- - Corporate Portal -
-
-
- -
-
- -
-
- -
-
-
-
-
- -
- -
-
-
-
-
-
- -
- -
-
-
-
-
diff --git a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-ssize.example.html b/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-ssize.example.html deleted file mode 100644 index 216ff5e2c7..0000000000 --- a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-ssize.example.html +++ /dev/null @@ -1,197 +0,0 @@ -
-
-
- - Corporate Portal -
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
- -
- -
-
-
-
-
-
- -
- -
-
-
-
-
- -
-
-
- -
-
- -
- -
-
Subtitle
-
-
-
-
- -
-
-
- -
-
-
-
- -
-
- -
-
-
-
-
-
diff --git a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-xl-size.example.html b/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-xl-size.example.html deleted file mode 100644 index 95de7ad96f..0000000000 --- a/packages/styles/stories/Components/shellbar/links-with-collapsible-menu-xl-size.example.html +++ /dev/null @@ -1,201 +0,0 @@ - -
-
-
- - Corporate Portal -
-
-
-
-
-
- -
-
- -
- -
-
- -
-
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
-
- -
- -
-
-
-
-
-
- -
- -
-
-
-
-
diff --git a/packages/styles/stories/Components/shellbar/optional-items.example.html b/packages/styles/stories/Components/shellbar/optional-items.example.html new file mode 100644 index 0000000000..7e013232fc --- /dev/null +++ b/packages/styles/stories/Components/shellbar/optional-items.example.html @@ -0,0 +1,334 @@ +
+ +
+ +

+
+ +
diff --git a/packages/styles/stories/Components/shellbar/overflow-toolbar.example.html b/packages/styles/stories/Components/shellbar/overflow-toolbar.example.html new file mode 100644 index 0000000000..951e11735a --- /dev/null +++ b/packages/styles/stories/Components/shellbar/overflow-toolbar.example.html @@ -0,0 +1,207 @@ +
+ +
\ No newline at end of file diff --git a/packages/styles/stories/Components/shellbar/primary.example.html b/packages/styles/stories/Components/shellbar/primary.example.html index 60edbeb4d6..7f11f88e6d 100644 --- a/packages/styles/stories/Components/shellbar/primary.example.html +++ b/packages/styles/stories/Components/shellbar/primary.example.html @@ -1,15 +1,65 @@
-
+ +
+ +

+ +
+
+
+
+ + +
+ Corporate Portal + Solution name +
+
-
+
\ No newline at end of file diff --git a/packages/styles/stories/Components/shellbar/product-menu-and-search.example.html b/packages/styles/stories/Components/shellbar/product-menu-and-search.example.html deleted file mode 100644 index 0e27d77faa..0000000000 --- a/packages/styles/stories/Components/shellbar/product-menu-and-search.example.html +++ /dev/null @@ -1,157 +0,0 @@ - - -
-
-
- -
-
- -
- -
-
Subtitle
-
-
-
-
- -
- -
-
- -
-
-
-
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
diff --git a/packages/styles/stories/Components/shellbar/product-switch.example.html b/packages/styles/stories/Components/shellbar/product-switch.example.html deleted file mode 100644 index 95e8a31db5..0000000000 --- a/packages/styles/stories/Components/shellbar/product-switch.example.html +++ /dev/null @@ -1,174 +0,0 @@ -
-
-
- - Corporate Portal -
-
-
- -
-
-
-
- -
- -
-
-
-
-
- -
-
-
    -
  • -
    -
    -
    Home
    -
    Central Home
    -
    -
    • -
  • -
    -
    -
    Analytics Cloud
    -
    Analytics Cloud
    -
    -
    • -
  • -
    -
    -
    Catalog
    -
    Ariba
    -
    -
    • -
  • -
    -
    -
    Guided Buying
    -
    -
    • -
  • -
    -
    -
    Strategic Procurement
    -
    -
    • -
  • -
    -
    -
    Travel & Expense
    -
    Concur
    -
    -
    • -
  • -
    -
    -
    Vendor Management
    -
    Fieldglass
    -
    -
    • -
  • -
    -
    -
    Human Capital Management
    -
    -
    • -
  • -
    -
    -
    Sales Cloud
    -
    Sales Cloud
    -
    -
    • -
  • -
    -
    -
    Commerce Cloud
    -
    Commerce Cloud
    -
    -
    • -
  • -
    -
    -
    Marketing Cloud
    -
    Marketing Cloud
    -
    -
    • -
  • -
    -
    -
    Service Cloud
    -
    -
    • -
  • -
    -
    -
    Customer Data Cloud
    -
    -
    • -
  • -
    -
    -
    S/4HANA
    -
    -
    • -
-
-
-
-
-
-
-
-
diff --git a/packages/styles/stories/Components/shellbar/responsive-paddings.example.html b/packages/styles/stories/Components/shellbar/responsive-paddings.example.html index 76964d2101..a92931709a 100644 --- a/packages/styles/stories/Components/shellbar/responsive-paddings.example.html +++ b/packages/styles/stories/Components/shellbar/responsive-paddings.example.html @@ -1,122 +1,125 @@ -
-
+
+