diff options
Diffstat (limited to 'app/assets/stylesheets/themes/theme_helper.scss')
| -rw-r--r-- | app/assets/stylesheets/themes/theme_helper.scss | 345 |
1 files changed, 19 insertions, 326 deletions
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index db20034419a..c94a32891f6 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -2,342 +2,35 @@ /** * Styles the GitLab application with a specific color theme */ -@mixin gitlab-theme( - $search-and-nav-links, - $accent, - $border-and-box-shadow, - $navbar-theme-color, - $navbar-theme-contrast-color -) { - // Set custom properties - - --gl-theme-accent: #{$accent}; - - $search-and-nav-links-a20: rgba($search-and-nav-links, 0.2); - $search-and-nav-links-a30: rgba($search-and-nav-links, 0.3); - $search-and-nav-links-a40: rgba($search-and-nav-links, 0.4); - $search-and-nav-links-a80: rgba($search-and-nav-links, 0.8); - - // Header - - .navbar-gitlab:not(.super-sidebar-logged-out) { - background-color: $navbar-theme-color; - - .navbar-collapse { - color: $search-and-nav-links; - } - - .container-fluid { - .navbar-toggler { - border-left: 1px solid lighten($border-and-box-shadow, 10%); - color: $search-and-nav-links; - } - } - - .navbar-sub-nav, - .navbar-nav { - > li { - > a, - > button { - &:hover, - &:focus { - background-color: $search-and-nav-links-a20; - } - } - - &.active, - &.dropdown.show { - > a, - > button { - color: $navbar-theme-color; - background-color: $navbar-theme-contrast-color; - } - } - - &.line-separator { - border-left: 1px solid $search-and-nav-links-a20; - } - } - } - - .navbar-sub-nav { - color: $search-and-nav-links; - } - - .nav { - > li { - color: $search-and-nav-links; - - &.header-search { - color: $gray-900; - } - - > a { - .notification-dot { - border: 2px solid $navbar-theme-color; - } - - &.header-help-dropdown-toggle { - .notification-dot { - background-color: $search-and-nav-links; - } - } - - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $search-and-nav-links; - } - } - - &:hover, - &:focus { - @include media-breakpoint-up(sm) { - background-color: $search-and-nav-links-a20; - } - - svg { - fill: currentColor; - } - - .notification-dot { - will-change: border-color, background-color; - border-color: adjust-color($navbar-theme-color, $red: 33, $green: 33, $blue: 33); - } - - &.header-help-dropdown-toggle .notification-dot { - background-color: $white; - } - } - } - - &.active > a, - &.dropdown.show > a { - color: $navbar-theme-color; - background-color: $navbar-theme-contrast-color; - - &:hover { - svg { - fill: $navbar-theme-color; - } - } - - .notification-dot { - border-color: $white; - } - - &.header-help-dropdown-toggle { - .notification-dot { - background-color: $navbar-theme-color; - } - } - } - - .impersonated-user, - .impersonated-user:hover { - svg { - fill: $navbar-theme-color; - } - } - } - } - } - - .navbar .title { - > a { - &:hover, - &:focus { - background-color: $search-and-nav-links-a20; - } - } - } - - .header-search-form { - background-color: $search-and-nav-links-a20 !important; - border-radius: $border-radius-default; - - &:hover { - background-color: $search-and-nav-links-a30 !important; - } - - &.is-focused { - input { - background-color: $white; - color: $gl-text-color !important; - box-shadow: inset 0 0 0 1px $gray-900; - - &:focus { - box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 1px $white, 0 0 0 3px $blue-400; - } - - &::placeholder { - color: $gray-400; - } - } - } - - svg.gl-search-box-by-type-search-icon { - color: $search-and-nav-links-a80; - } - - input { - background-color: transparent; - color: $search-and-nav-links-a80; - box-shadow: inset 0 0 0 1px $search-and-nav-links-a40; - - &::placeholder { - color: $search-and-nav-links-a80; - } - - &:focus, - &:active { - &::placeholder { - color: $gray-400; - } - } - } - - .keyboard-shortcut-helper { - color: $search-and-nav-links; - background-color: $search-and-nav-links-a20; - } - } - - .search { - form { - background-color: $search-and-nav-links-a20; - - &:hover { - background-color: $search-and-nav-links-a30; - } - } - - .search-input::placeholder { - color: $search-and-nav-links-a80; - } - - .search-input-wrap { - .search-icon, - .clear-icon { - fill: $search-and-nav-links-a80; - } - } - - &.search-active { - form { - background-color: $white; - } - - .search-input-wrap { - .search-icon { - fill: $search-and-nav-links-a80; - } - } - } - } - - .search-sidebar { - .nav-link { - &.active, - &:hover { - background-color: rgba($gray-50, 0.8); - color: $gray-900; - } - } - } - - // Sidebar - .nav-sidebar li.active > a { - color: $gray-900; - } - - .nav-sidebar { - .fly-out-top-item { - a, - a:hover, - &.active a, - .fly-out-top-item-container { - background-color: var(--gray-100, $gray-50); - color: var(--gray-900, $gray-900); - } - } - } - - .branch-header-title { - color: $border-and-box-shadow; - } - - .ide-sidebar-link { - &.active { - color: $border-and-box-shadow; - - &.is-right { - box-shadow: inset -3px 0 $border-and-box-shadow; - } - } - } -} - @mixin gitlab-theme-super-sidebar( $theme-color-lightest, $theme-color-light, $theme-color, $theme-color-darkest, ) { - --sidebar-background: #{mix(white, $theme-color-lightest, 50%)}; - --transparent-white-16: rgba(255, 255, 255, 0.16); - --transparent-white-24: rgba(255, 255, 255, 0.24); - .super-sidebar { - background-color: var(--sidebar-background); - } - - .super-sidebar .user-bar { - background-color: $theme-color; - - .counter { - background-color: var(--transparent-white-16) !important; - } - - .brand-logo, - .btn-default-tertiary, - .counter { - color: $theme-color-lightest; - mix-blend-mode: normal; - - &:hover, - &:focus { - background-color: var(--transparent-white-24) !important; - color: $white; - } - - .gl-icon { - color: $theme-color-light; - } - } - } - - .super-sidebar hr { - mix-blend-mode: multiply; - } - - .btn-with-notification { - &:hover, - &:focus { + --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)}; + --super-sidebar-user-bar-bg: #{$theme-color}; + --super-sidebar-primary: #{$theme-color}; + --super-sidebar-notification-dot: #{$theme-color-darkest}; + + --super-sidebar-user-bar-button-bg: #{$t-white-a-16}; + --super-sidebar-user-bar-button-color: #{$theme-color-lightest}; + --super-sidebar-user-bar-button-border-color: #{$t-white-a-16}; + --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24}; + --super-sidebar-user-bar-button-hover-color: #{$white}; + --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36}; + + --super-sidebar-user-bar-button-icon-color: #{$theme-color-light}; + --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light}; + --super-sidebar-user-bar-button-icon-mix-blend-mode: screen; + + hr { mix-blend-mode: multiply; } - .notification-dot-info { - background-color: $theme-color-darkest; - border-color: $theme-color-lightest; - + .super-sidebar-context-header { + color: var(--super-sidebar-primary); } } - - .active-indicator { - background-color: $theme-color; - } - - .super-sidebar-context-header { - color: $theme-color; - } } |