Skip to content

GitLab

Commit c8a57d71 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon
Browse files
Options

Bug 1765276: Cleaning up styling 

behatnotneeded

Change-Id: Ia13d6b6d6218da96fa9e325c9a0356449f36f2b5
parent a6f42054
Hide whitespace changes
Inline Side-by-side
Showing with 497 additions and 570 deletions
htdocs/theme/default/sass/components/_btn.scss
View file @ c8a57d71
......@@ -13,16 +13,16 @@
margin-bottom: 0;
&:hover,
&:focus {
background: darken($btn-secondary-bg, 9.7%);
background: scale-color($btn-secondary-bg, $lightness: -9.7%);
color: $theme-text-color;
border-color: darken($btn-secondary-border, 12%);
border-color: scale-color($btn-secondary-border, $lightness: -12%);
}
}
.btn-secondary {
background: darken($btn-secondary-bg, 4.75%);
background: scale-color($btn-secondary-bg, $lightness: -4.75%);
&:hover,
&:focus {
background: darken($btn-secondary-bg, 14.5%);
background: scale-color($btn-secondary-bg, $lightness: -14.5%);
}
}
htdocs/theme/default/sass/components/_toggles.scss deleted 100755 → 0
View file @ a6f42054
.navbar-showchildren {
&:hover,
&:focus {
.icon {
color: $navbar-inverse-link-hover-color;
}
}
}
htdocs/theme/default/sass/layout/card/_card-secondary.scss
View file @ c8a57d71
......@@ -11,10 +11,17 @@
}
&.card {
&.blockinstance.card {
.card-header {
background-color: $card-header-bg;
}
.card-header {
border-color: #9db577;
font-family: $font-family-sans-serif;
padding-left: 0;
padding-right: 0;
}
// removing left/right padding in card body
.block {
> .card-body {
padding: 15px 0;
}
}
}
......@@ -23,26 +30,4 @@
margin: 0;
}
}
// removing left/right padding in card headings
.card-header-nested,
> .card-header {
padding-left: 0;
padding-right: 0;
border-bottom-color: #9db577;
}
> .card-header {
font-family: $font-family-sans-serif;
}
// removing left/right padding in card body
> .card-body {
padding: 15px 0;
}
.block {
> .card-body {
padding: 15px 0;
}
}
}
htdocs/theme/default/sass/layout/card/_card.scss
View file @ c8a57d71
.card {
border-radius: 0;
border: 0;
box-shadow: none;
&.card-quarter {
.card-stack {
border: 1px solid #ddd;
}
}
small {
font-size: 11px;
}
dl {
dd {
font-size: 11px;
}
}
}
.sidebar {
.card {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
border: 0;
}
}
......
htdocs/theme/default/sass/layout/nav/_main-nav.scss deleted 100644 → 0
View file @ a6f42054
.navbar-main {
border: 0;
.navbar-collapse {
border: 0;
}
.navbar-nav {
> li > a {
color: #FFFFFF;
background-color: $theme-primary-color;
border-color: $link-hover-color;
&:hover,
&:focus {
color: #FFFFFF;
background-color: #637e3a;
}
@include media-breakpoint-up(md) {
border-color: $link-hover-color;
}
}
.navbar-toggle {
color: #FFFFFF;
background-color: $link-hover-color;
&:hover,
&:focus {
background-color: $link-hover-color;
color: #FFFFFF;
}
&.collapsed {
background-color: transparent;
&:hover,
&:focus {
background-color: $link-hover-color;
color: #FFFFFF;
}
}
}
.active {
> a {
font-weight: bold;
background-color: #3a4a22;
color: #ffffff;
&:hover,
&:focus {
color: #FFFFFF;
}
}
.navbar-toggle {
.icon {
color: #ffffff;
}
}
}
.child-nav {
li > a {
color: #ffffff;
background-color: #637e3a;
&:hover,
&:focus {
background-color: #709042;
}
}
}
}
}
htdocs/theme/default/sass/layout/nav/_nav-tabs.scss
View file @ c8a57d71
......@@ -11,18 +11,18 @@
&:hover {
border: 0;
border-bottom: 1px solid #bc9f54;
background-color: lighten(#bc9f54, 35%);
background-color: scale-color(#bc9f54, $lightness: 35%);
color: #423017;
}
&.active {
background-color: lighten(#bc9f54, 25%);
background-color: scale-color(#bc9f54, $lightness: 25%);
color: #423017;
border: 0;
border-bottom: 1px solid #bc9f54;
&:focus,
&:hover {
background-color: lighten(#bc9f54, 10%);
background-color: scale-color(#bc9f54, $lightness: 10%);
color: #423017;
border: 0;
border-bottom: 1px solid #bc9f54;
......
htdocs/theme/default/sass/utilities/_bootstrap-variables.scss
View file @ c8a57d71
......@@ -15,7 +15,7 @@
//
//## Settings for some of the most global styles.
$link-hover-color: lighten($link-color, 5%);
$link-hover-color: scale-color($link-color, $lightness: 5%);
//== Typography
//
......@@ -36,7 +36,7 @@ $border-radius-base: 0.1875rem;
//## Dropdown menu container and contents.
//** Hover color for dropdown links.
$dropdown-link-hover-color: darken($gray-700, 5%);
$dropdown-link-hover-color: scale-color($gray-700, $lightness: -5%);
//== Navs
//
......@@ -65,4 +65,4 @@ $progress-bar-bg: #bc9f54;
//##
//** Text color for content within active list items
$list-group-active-color: lighten($list-group-active-bg, 40%);
$list-group-active-color: scale-color($list-group-active-bg, $lightness: 40%);
htdocs/theme/default/sass/utilities/_custom-variables.scss
View file @ c8a57d71
// Custom component variables (non-bootstrap components)
//Arrow compoanent variables
$arrow-color: lighten(#bc9f54, 25%);
$arrow-text-color: #333333;
$arrow-link-color: #423017;
$arrow-link-hover-color: #423017;
$arrow-link-active-color: #333333;
//Arrow component variables
$arrow-color: scale-color(#bc9f54, $lightness: 25%);
$arrow-bar-bg: scale-color($arrow-color, $lightness: 35%);
$arrow-text-color: #333333;
$arrow-link-color: #423017;
$arrow-link-hover-color: #423017;
$arrow-link-active-color: #333333;
$arrow-link-background-color: #fff;
// color for the secondary title in sections (cf. groups)
$section-heading-color: #999;
......@@ -16,35 +19,64 @@ $dashboard-widget-bg: theme-color("primary");
$dashboard-widget-color: #FFFFFF;
$help-icon-color: #5b8fc8;
$rss-icon-color: #FE6500;
// Pages and collections page header
$pageheader-bg: #f0f5ea;
$theme-primary-color-light: #799152;
// LEGACY BOOTSTRAP 3 VARIABLES
// Header navbar
$navbar-default-bg: #fff;
$navbar-default-border: transparent;
// Navbar toggle
$navbar-toggle-color: $link-color;
$navbar-toggle-bg: #fff;
$navbar-toggle-hover-color: $link-color;
$navbar-toggle-hover-bg: #f1f6eb;
$navbar-toggle-active-color: $link-color;
$navbar-toggle-active-bg: #f1f6eb;
// Navbar menu
$navbar-default-link-border: $link-hover-color;
$navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: #FFF;
$navbar-default-link-bg: $theme-primary-color;
$navbar-default-link-hover-bg: #637e3a;
$navbar-default-active-color: #FFF;
$navbar-default-active-bg: #3a4a22;
// Navbar menus children
$navbar-inverse-bg: $link-hover-color;
$navbar-inverse-link-color: #FFFFFF;
$navbar-inverse-link-hover-color: #FFFFFF;
$navbar-inverse-link-hover-bg: scale-color($link-hover-color, $lightness: 5%);
$navbar-inverse-link-active-color: #FFFFFF;
$navbar-inverse-link-active-bg: $link-hover-color;
// Navbar menu children toggles
$navbar-inverse-toggle-color: #FFF;
$navbar-inverse-toggle-bg: transparent;
$navbar-inverse-toggle-hover-color: #FFFFFF;
$navbar-inverse-toggle-hover-bg: $navbar-inverse-bg;
$navbar-inverse-toggle-active-color: $navbar-inverse-link-active-color;
$navbar-inverse-toggle-active-bg: $navbar-inverse-bg;
// Colors
$brand-success: #449D44;
$brand-danger: #F04F50;
// Form states and alerts
$state-success-text: $brand-success;
$state-success-bg: lighten($brand-success, 50%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 10%);
$state-info-text: #31708f;
$state-info-bg: #d9edf7;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
$state-success-text: scale-color($brand-success, $lightness: -40%);
$state-success-bg: scale-color($brand-success, $lightness: 70%);
$state-success-border: scale-color(adjust-hue($state-success-bg, -10), $lightness: -10%);
$state-warning-text: #8a6d3b;
$state-warning-bg: #fcf8e3;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%);
$state-danger-text: darken($brand-danger, 10%);
$state-danger-bg: lighten($brand-danger, 30%);
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%);
$state-danger-text: scale-color($brand-danger, $lightness: -30%);
$state-danger-bg: scale-color($brand-danger, $lightness: 70%);
$state-danger-border: scale-color(adjust-hue($state-danger-bg, -10), $lightness: -5%);
// Buttons
$btn-secondary-bg: $white;
......@@ -54,31 +86,6 @@ $btn-primary-color: #FFFFFF;
$btn-primary-bg: #556d32;
$btn-primary-border: #556d32;
// Navbar
$navbar-default-bg: #FFFFFF;
$navbar-default-border: transparent;
// Navbar links
$navbar-default-link-hover-bg: #f1f6eb;
// Navbar toggle
$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-bg: $link-hover-color;
// Inverted navbar links
$navbar-inverse-link-color: #FFFFFF;
$navbar-inverse-link-hover-color: #FFFFFF;
$navbar-inverse-link-hover-bg: lighten($link-hover-color, 5%);
$navbar-inverse-link-active-color: #FFFFFF;
$navbar-inverse-link-active-bg: $link-hover-color;
$navbar-inverse-toggle-hover-color: $navbar-inverse-link-color;
// Inverted navbar toggle
$navbar-inverse-toggle-icon-bar-bg: $link-hover-color;
// cards
//** Border color for elements within cards
$card-footer-bg: #f0f5ea;
......
htdocs/theme/default/sass/utilities/_index.scss
View file @ c8a57d71
......@@ -16,7 +16,6 @@
@import "../layout/card/card";
// Navigation
@import "../layout/nav/main-nav";
@import "../layout/nav/nav-tabs";
// Components - small reusable design elements
......@@ -24,7 +23,6 @@
@import "../components/btn";
@import "../components/indicator";
@import "../components/list-group";
@import "../components/toggles";
// Feature related sass. We avoid this where we can in favour of reusable components
@import "../features/dashboard-widget";
......
htdocs/theme/default/sass/utilities/_theme-variables.scss
View file @ c8a57d71
......@@ -4,6 +4,7 @@
$theme-primary-color: #556d32;
$theme-primary-color-dark: #2e3a1c;
$theme-primary-color-light: #799152;
$theme-text-color: #333333;
$theme-accent-color: #6e5e31;
......@@ -11,5 +12,5 @@ $theme-text-lighttone-color: #767676;
$theme-text-midtone-color: #666666;
// Navbar message notification count
$navbar-notification-count-bg: #FC9F1A !default;
$navbar-notification-count-text: #000000 !default;
$navbar-notification-count-bg: #FC9F1A;
$navbar-notification-count-text: #000000;
htdocs/theme/modern/sass/layout/nav/_navbar.scss deleted 100644 → 0
View file @ a6f42054
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
.navbar-main {
.navbar-nav {
>li>a {
&:focus,
&:hover {
background-color: $theme-primary-color-dark;
}
}
}
}
htdocs/theme/modern/sass/utilities/_custom-variables.scss
View file @ c8a57d71
......@@ -25,22 +25,54 @@ $rss-icon-color: #FE6500;
// LEGACY BOOTSTRAP 3 VARIABLES
// Header navbar
$navbar-default-bg: $primary;
$navbar-default-border: transparent;
// Navbar toggle
$navbar-toggle-color: #FFF;
$navbar-toggle-bg: transparent;
$navbar-toggle-hover-color: #FFF;
$navbar-toggle-hover-bg: $theme-accent-color;
$navbar-toggle-active-color: #FFF;
$navbar-toggle-active-bg: $theme-accent-color;
// Navbar menu
$navbar-default-link-border: scale-color($navbar-default-bg, $lightness: -6.5%);
$navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: $navbar-default-link-color;
$navbar-default-link-bg: $navbar-default-bg;
$navbar-default-link-hover-bg: $theme-primary-color-dark;
$navbar-default-active-color: $navbar-default-link-color;
$navbar-default-active-bg: darken($primary, 3%);
// Navbar menus children
$navbar-inverse-bg: $theme-accent-color;
$navbar-inverse-link-color: #FFFFFF;
$navbar-inverse-link-hover-color: #FFFFFF;
$navbar-inverse-link-hover-bg: darken($navbar-inverse-bg, 2%);
$navbar-inverse-link-active-color: #FFFFFF;
$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;
// Navbar menu children toggles
$navbar-inverse-toggle-color: #959595;
$navbar-inverse-toggle-bg: transparent;
$navbar-inverse-toggle-hover-color: #FFF;
$navbar-inverse-toggle-hover-bg: $theme-accent-color;
$navbar-inverse-toggle-active-color: #FFF;
$navbar-inverse-toggle-active-bg: $theme-accent-color;
// Form states
$state-success-text: #426600 !default;
$state-success-bg: mix(#426600, #fff, 20%) !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10), 10%) !default;
$state-success-text: #426600;
$state-success-bg: mix(#426600, #fff, 20%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 10%);
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
$state-danger-text: #545B5D;
$state-danger-bg: #f2dede;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%);
$state-danger-text: #545B5D !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
// Buttons + Forms
$btn-secondary-bg: #e8eaec;
......@@ -50,36 +82,6 @@ $btn-primary-color: #fff;
$btn-primary-bg: $primary;
$btn-primary-border: darken($btn-primary-bg, 8%);
// Navs
$navbar-collapse-max-height: none;
$navbar-default-bg: $primary;
$navbar-default-border: transparent;
// Navbar links
$navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: $navbar-default-link-color;
$navbar-default-link-hover-bg: $theme-accent-color;
$navbar-default-active-color: $navbar-default-link-color;
$navbar-default-active-bg: darken($primary, 3%);
// Navbar toggle
$navbar-default-toggle-hover-bg: $theme-accent-color;
$navbar-default-toggle-icon-bar-bg: #fff;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-bg: $theme-accent-color;
// Inverted navbar links
$navbar-inverse-link-color: #FFFFFF;
$navbar-inverse-link-hover-color: #FFFFFF;
$navbar-inverse-link-hover-bg: darken($navbar-inverse-bg, 2%);
$navbar-inverse-link-active-color: #FFFFFF;
$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;
// Inverted navbar toggle
$navbar-inverse-toggle-icon-bar-bg: #959595;
// Popovers
$popover-fallback-border-color: #ccc;
......
htdocs/theme/modern/sass/utilities/_index.scss
View file @ c8a57d71
......@@ -4,8 +4,6 @@
@import "../layout/card/card-header";
@import "../layout/card/card-secondary";
@import "../layout/nav/navbar";
@import "../form/form";
@import "../components/arrow-bar";
......
htdocs/theme/ocean/sass/utilities/_custom-variables.scss
View file @ c8a57d71
......@@ -20,21 +20,26 @@ $pageheader-bg: scale-color($theme-primary-color, $lightness: 95
// Legacy from Bootstrap 3
//== Navbar
// Basics of a navbar
$navbar-collapse-max-height: 340px;
// Navbar toggle and menu
$navbar-default-color: #FFF;
// Header navbar
$navbar-default-bg: $theme-primary-color;
$navbar-default-border: scale-color($navbar-default-bg, $lightness: 5%);
// Navbar toggle
$navbar-toggle-color: #FFF;
$navbar-toggle-bg: transparent;
$navbar-toggle-hover-color: #FFF;
$navbar-toggle-hover-bg: scale-color($navbar-default-bg, $lightness: -5.5%);
$navbar-toggle-active-color: #FFF;
$navbar-toggle-active-bg: scale-color($navbar-default-bg, $lightness: -5.5%);
// Navbar menu
$navbar-default-link-border: scale-color($navbar-default-bg, $lightness: 5%);
$navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: #FFF;
$navbar-default-link-bg: $theme-primary-color;
$navbar-default-link-hover-bg: scale-color($navbar-default-bg, $lightness: -5.5%);
$navbar-default-active-color: #FFF;
$navbar-default-active-bg: scale-color($navbar-default-bg, $lightness: 2%);
$navbar-default-toggle-icon-bar-bg: #FFF;
// Navbar menus children
$navbar-inverse-bg: scale-color($theme-primary-color, $lightness: 90%);
......@@ -44,7 +49,6 @@ $navbar-inverse-link-hover-bg: scale-color($navbar-inverse-bg, $lig
$navbar-inverse-link-active-color: #000;
$navbar-inverse-link-active-bg: scale-color($navbar-inverse-bg, $lightness: -2%);
// Navbar menu children toggles
$navbar-inverse-toggle-color: #FFF;
$navbar-inverse-toggle-bg: transparent;
......@@ -54,6 +58,7 @@ $navbar-inverse-toggle-active-color: #000;
$navbar-inverse-toggle-active-bg: scale-color($theme-primary-color, $lightness: 90%);
//== Tabs
$nav-tabs-border-color: #eee;
......
htdocs/theme/primaryschool/sass/components/_toggles.scss deleted 100755 → 0
View file @ a6f42054
.navbar-toggle {
&.user-toggle {
&:hover,
&:focus {