From ab3888ad428e4f109c58b596b3f0a9437026afb8 Mon Sep 17 00:00:00 2001 From: Tero Tikkanen Date: Wed, 16 Aug 2017 17:50:06 +0300 Subject: [PATCH] Adjust typography and colors. Fix #14 #15 --- src/sass/_application-variables.scss | 12 +++-- src/sass/_theme-bootstrap-variables.scss | 62 ++++++++++++------------ src/sass/_theme-custom-styles.scss | 45 ++++++++++++++--- 3 files changed, 76 insertions(+), 43 deletions(-) diff --git a/src/sass/_application-variables.scss b/src/sass/_application-variables.scss index 80ce844..ee1da28 100644 --- a/src/sass/_application-variables.scss +++ b/src/sass/_application-variables.scss @@ -19,10 +19,14 @@ $dark-gray: #525a65; $medium-gray: #abb2bd; $black: #000000; -$theme-success: $hel-tram; -$theme-info: $hel-fog; -$theme-warning: $hel-summer; -$theme-danger: $hel-metro; +$theme-success: $hel-tram; +$theme-success-light: $hel-copper; +$theme-info: $hel-coat; +$theme-info-light: $hel-fog; +$theme-warning: $hel-summer; +$theme-warning-light: $hel-engel; +$theme-danger: $hel-metro; +$theme-danger-light: $hel-suomenlinna; $icon-font-path: "../fonts/bootstrap/"; diff --git a/src/sass/_theme-bootstrap-variables.scss b/src/sass/_theme-bootstrap-variables.scss index ea7d148..658fb82 100644 --- a/src/sass/_theme-bootstrap-variables.scss +++ b/src/sass/_theme-bootstrap-variables.scss @@ -53,18 +53,18 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !def $font-family-base: $font-family-sans-serif !default; $font-size-base: 16px; -$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px -$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px -$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px -$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px -$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-h5: $font-size-base !default; -$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-h1: 42px ; // ~42px +$font-size-h2: 36px ; // ~34px +$font-size-h3: 28px ; // ~28px +$font-size-h4: 24px ; // ~24px +$font-size-h5: 20px ; // ~20px +$font-size-h6: 16px ; // ~16px //** Unit-less `line-height` for use in components like buttons. -$line-height-base: 1.428571429 !default; // 20/14 +$line-height-base: 1.5 !default; // 16/24 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px @@ -152,13 +152,13 @@ $table-border-color: #ddd !default; $btn-font-weight: 500; -$btn-default-color: $theme-primary-dark; +$btn-default-color: $black; $btn-default-bg: transparent; -$btn-default-border: $theme-primary-dark; +$btn-default-border: $black; $btn-primary-color: #fff !default; -$btn-primary-bg: $theme-primary-dark; -$btn-primary-border: $theme-primary-dark; +$btn-primary-bg: $black; +$btn-primary-border: $black; $btn-success-color: $brand-success; $btn-success-bg: transparent; @@ -372,39 +372,39 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; $navbar-collapse-max-height: 340px !default; -$navbar-default-color: $theme-primary-dark; +$navbar-default-color: $black; $navbar-default-bg: $white; $navbar-default-border: transparent; // Navbar links -$navbar-default-link-color: $theme-primary-dark; -$navbar-default-link-hover-color: $theme-highlight-dark; +$navbar-default-link-color: $black; +$navbar-default-link-hover-color: $black; $navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: $theme-primary-dark; +$navbar-default-link-active-color: $black; $navbar-default-link-active-bg: transparent; $navbar-default-link-disabled-color: $gray; $navbar-default-link-disabled-bg: transparent !default; // Navbar brand label $navbar-default-brand-color: $navbar-default-link-color !default; -$navbar-default-brand-hover-color: $theme-highlight-dark; +$navbar-default-brand-hover-color: $black; $navbar-default-brand-hover-bg: transparent !default; // Navbar toggle $navbar-default-toggle-hover-bg: transparent; -$navbar-default-toggle-icon-bar-bg: $theme-primary-dark; +$navbar-default-toggle-icon-bar-bg: $black; $navbar-default-toggle-border-color: transparent; //=== Inverted navbar // Reset inverted navbar basics $navbar-inverse-color: $white; -$navbar-inverse-bg: $theme-primary-dark; +$navbar-inverse-bg: $black; $navbar-inverse-border: transparent; // Inverted navbar links $navbar-inverse-link-color: $white; -$navbar-inverse-link-hover-color: $theme-highlight-light; +$navbar-inverse-link-hover-color: $white; $navbar-inverse-link-hover-bg: transparent !default; $navbar-inverse-link-active-color: $white; $navbar-inverse-link-active-bg: transparent; @@ -413,7 +413,7 @@ $navbar-inverse-link-disabled-bg: transparent !default; // Inverted navbar brand label $navbar-inverse-brand-color: $navbar-inverse-link-color !default; -$navbar-inverse-brand-hover-color: $theme-highlight-light; +$navbar-inverse-brand-hover-color: $white; $navbar-inverse-brand-hover-bg: transparent !default; // Inverted navbar toggle @@ -505,19 +505,19 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; //## Define colors for form feedback states and, by default, alerts. $state-success-text: $black; -$state-success-bg: $brand-success; +$state-success-bg: $theme-success-light; $state-success-border: transparent; $state-info-text: $black; -$state-info-bg: $brand-info; +$state-info-bg: $theme-info-light; $state-info-border: transparent; $state-warning-text: $black; -$state-warning-bg: $brand-warning; +$state-warning-bg: $theme-warning-light; $state-warning-border: transparent; -$state-danger-text: $white; -$state-danger-bg: $brand-danger; +$state-danger-text: $black; +$state-danger-bg: $theme-danger-light; $state-danger-border: transparent; @@ -577,13 +577,13 @@ $label-default-bg: $gray-light !default; //** Primary label background color $label-primary-bg: $theme-primary-light; //** Success label background color -$label-success-bg: $brand-success !default; +$label-success-bg: $theme-success-light; //** Info label background color -$label-info-bg: $brand-info !default; +$label-info-bg: $theme-info-light; //** Warning label background color -$label-warning-bg: $brand-warning !default; +$label-warning-bg: $theme-warning-light; //** Danger label background color -$label-danger-bg: $brand-danger !default; +$label-danger-bg: $theme-danger-light; //** Default label text color $label-color: $black; diff --git a/src/sass/_theme-custom-styles.scss b/src/sass/_theme-custom-styles.scss index 4d7d907..733d1d1 100644 --- a/src/sass/_theme-custom-styles.scss +++ b/src/sass/_theme-custom-styles.scss @@ -171,12 +171,34 @@ // Styles when navbar is not collapsed @media (min-width: $screen-md-min) { - .navbar-default .navbar-nav > .active > a { - border-bottom: solid 3px $theme-primary-dark; + .navbar-nav > li > a { + position: relative; + padding-left: 0; + padding-right: 0; + margin-right: 15px; + margin-left: 15px; + font-weight: 500; + font-size: 15px; } - .navbar-inverse .navbar-nav > .active > a { - border-bottom: solid 3px $theme-highlight-light; + .navbar-nav > .active > a, .navbar-nav > li > a:hover { + &:after { + content: ""; + border-bottom: solid 3px $black; + position: absolute; + bottom: 12px; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + } + } + + .navbar-inverse .navbar-nav > .active > a , .navbar-inverse .navbar-nav > li > a:hover { + + &:after { + border-bottom: solid 3px $white; + } } } @@ -193,8 +215,9 @@ .navbar-nav > .active > a { font-weight: bold; - &:after { - content: "\000A0 \02022"; + &:before { + content: "\000A0"; + border-left: 3px solid $black; } } } @@ -213,7 +236,7 @@ } .navbar-default { - border-bottom: 1px solid $theme-primary-dark; + //border-bottom: 1px solid $theme-primary-dark; .navbar-collapse { border-top-color: $gray-lighter; @@ -221,7 +244,7 @@ } .navbar-brand { - font-weight: bold; + font-weight: 700; font-size: $font-size-base; } @@ -326,4 +349,10 @@ input[type="color"]:focus, border-color: $input-border; border-bottom-color: $black; box-shadow: none; +} + +// Panels + +.panel { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } \ No newline at end of file