diff --git a/client/my-sites/sidebar-unified/style.scss b/client/my-sites/sidebar-unified/style.scss index 7b0613b1de556..8208aadaafabd 100644 --- a/client/my-sites/sidebar-unified/style.scss +++ b/client/my-sites/sidebar-unified/style.scss @@ -19,6 +19,7 @@ --color-sidebar-text: #eee; --color-sidebar-text-alternative: #a2aab2; --color-sidebar-gridicon-fill: #a2aab2; + --color-sidebar-notice-background: #3c434a; .is-sidebar-collapsed:not( .is-section-reader ):not( .is-section-me ) & { --sidebar-width-max: 36px; @@ -196,6 +197,46 @@ $font-size: rem( 14px ); } } } + + .notice { + background-color: var( --color-sidebar-notice-background ); + /* stylelint-disable-next-line scales/font-weight */ + font-weight: 300; + + &.is-compact { + margin: 0; + align-items: center; + } + + .notice__icon-wrapper { + background-color: transparent; + width: 35px; + + .notice__icon-wrapper-drop { + top: calc( 50% - 9px ); + left: calc( 50% - 9px ); + width: 18px; + height: 18px; + border-radius: 50%; + background: var( --color-sidebar-gridicon-fill ); + } + } + + .gridicon { + fill: var( --color-sidebar-notice-background ); + } + + .notice__content { + padding: 10px 10px 10px 4px; + overflow-wrap: anywhere; + } + + .notice__action { + color: #fff; + font-weight: 600; + padding-right: 12px; + } + } } //client/components/site-selector/style.scss @@ -303,6 +344,13 @@ $font-size: rem( 14px ); overflow: hidden; } + .sidebar .notice { + .notice__content, + .notice__action { + display: none; + } + } + // Is toggled open .sidebar__menu { // Is toggled open and selected