From e68cbcd28c5181538ee0ae11057af756d51704fd Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Fri, 27 Sep 2019 14:57:07 +0200 Subject: [PATCH] add header icon color variable and add !default to all themeable variables --- src/app/header/header.component.scss | 11 ++++++ src/styles/_bootstrap_variables.scss | 18 +++++----- src/styles/_custom_variables.scss | 53 ++++++++++++++-------------- 3 files changed, 47 insertions(+), 35 deletions(-) diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 4d25bd0d43..70c66f119d 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -8,3 +8,14 @@ background-image: none !important; line-height: 1.5; } + +.navbar ::ng-deep { + a { + color: $header-icon-color; + + &:hover, &focus { + color: darken($header-icon-color, 15%); + } + } +} + diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss index 5258365cfd..6af8f1d170 100644 --- a/src/styles/_bootstrap_variables.scss +++ b/src/styles/_bootstrap_variables.scss @@ -1,16 +1,16 @@ @import '_themed_bootstrap_variables.scss'; /** Help Variables **/ -$fa-fixed-width: 1.25rem; -$icon-padding: 1rem; -$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding)); -$sidebar-items-width: 250px; -$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width; +$fa-fixed-width: 1.25rem !default; +$icon-padding: 1rem !default; +$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding)) !default; +$sidebar-items-width: 250px !default; +$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width !default; /* Fonts */ -$fa-font-path: "../assets/fonts"; +$fa-font-path: "../assets/fonts" !default; /* Images */ -$image-path: "../assets/images"; +$image-path: "../assets/images" !default; /** Bootstrap Variables **/ /* Colors */ @@ -44,8 +44,8 @@ $link-color: map-get($theme-colors, info) !default; $navbar-dark-color: rgba(white, .5) !default; $navbar-light-color: rgba(black, .5) !default; -$navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E"); -$navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E"); +$navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E") !default; +$navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E") !default; $enable-shadows: true !default; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index df193be91b..c1f155fa39 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -1,38 +1,39 @@ @import '_themed_custom_variables.scss'; -$content-spacing: $spacer * 1.5; +$content-spacing: $spacer * 1.5 !default; -$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2); +$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2) !default; -$card-height-percentage:98%; -$card-thumbnail-height:240px; -$dropdown-menu-max-height: 200px; -$drop-zone-area-height: 44px; -$drop-zone-area-z-index: 1025; -$drop-zone-area-inner-z-index: 1021; -$login-logo-height:72px; -$login-logo-width:72px; -$submission-header-z-index: 1001; -$submission-footer-z-index: 999; +$card-height-percentage:98% !default; +$card-thumbnail-height:240px !default; +$dropdown-menu-max-height: 200px !default; +$drop-zone-area-height: 44px !default; +$drop-zone-area-z-index: 1025 !default; +$drop-zone-area-inner-z-index: 1021 !default; +$login-logo-height:72px !default; +$login-logo-width:72px !default; +$submission-header-z-index: 1001 !default; +$submission-footer-z-index: 999 !default; -$main-z-index: 0; -$nav-z-index: 10; -$sidebar-z-index: 20; +$main-z-index: 0 !default; +$nav-z-index: 10 !default; +$sidebar-z-index: 20 !default; -$header-logo-height: 80px; -$header-logo-height-xs: 50px; +$header-logo-height: 80px !default; +$header-logo-height-xs: 50px !default; +$header-icon-color: $link-color !default; -$admin-sidebar-bg: darken(#2B4E72, 17%); -$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%); -$admin-sidebar-header-bg: darken($admin-sidebar-bg, 7%); +$admin-sidebar-bg: darken(#2B4E72, 17%) !default; +$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%) !default; +$admin-sidebar-header-bg: darken($admin-sidebar-bg, 7%) !default; -$dark-scrollbar-background: $admin-sidebar-active-bg; -$dark-scrollbar-foreground: #47495d; +$dark-scrollbar-background: $admin-sidebar-active-bg !default; +$dark-scrollbar-foreground: #47495d !default; $submission-sections-margin-bottom: .5rem !default; -$edit-item-button-min-width: 100px; -$edit-item-metadata-field-width: 190px; -$edit-item-language-field-width: 43px; +$edit-item-button-min-width: 100px !default; +$edit-item-metadata-field-width: 190px !default; +$edit-item-language-field-width: 43px !default; -$thumbnail-max-width: 175px; +$thumbnail-max-width: 175px !default;