Skip to content
Snippets Groups Projects
Commit 5f3fa3e2 authored by Ivica Puljic's avatar Ivica Puljic
Browse files

Issue #3436198 by pivica: Switch to CSS variables for header and footer

parent 9900e751
No related branches found
No related tags found
1 merge request!7Issue #3436198 by pivica: Switch to CSS variables for header and footer
......@@ -52,6 +52,8 @@
// Underline effect suitable for links in navigation menu or in general.
@mixin link-hover-active-line-effect($height, $color-hover, $color-active, $class-active: '.is-active', $padding-x: $nav-link-padding-x) {
--bsb-nav-link-hover-border-color: #{$color-hover};
--bsb-nav-link-active-border-color: #{$color-active};
position: relative;
// We are using before here and not after because dropdown-toggle from
......@@ -75,7 +77,6 @@
&::after {
height: $height;
opacity: 1;
background-color: $color-hover;
}
}
......@@ -84,7 +85,6 @@
&::after {
height: $height;
opacity: 1;
background-color: $color-active;
}
}
}
......
@mixin heading($font-size) {
margin-top: $headings-margin-top-factor * $font-size;
margin-bottom: $headings-margin-bottom-factor * $font-size;
line-height: $headings-line-height;
color: var(--#{$prefix}heading-color);
font-size: $font-size;
@if $headings-letter-spacing {
letter-spacing: $headings-letter-spacing;
}
line-height: $headings-line-height;
}
......@@ -103,6 +103,7 @@ $headings-line-height: 1.2 !default;
$headings-margin-top-factor: 1.5 !default;
$headings-margin-bottom-factor: 0.6 !default;
$headings-letter-spacing: false !default;
$headings-color: inherit !default;
// Layout
......
......@@ -75,3 +75,9 @@
@return null;
}
}
// Colors, ported from BS5.
// TODO - remove in 2.x version because we can use the one from BS5.
@function to-rgb($value) {
@return red($value), green($value), blue($value);
}
......@@ -24,6 +24,13 @@
// font-size: $font-size-html;
//}
:root {
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-hover-color: #{$link-hover-color};
--bsb-link-active-color: #{$link-hover-color};
}
h1, .h1 {
@include heading($font-size-h1);
}
......@@ -67,6 +74,17 @@ sub {
bottom: -0.25em;
}
// Partial port from BS5 - we do not use alpha part for now.
a {
color: var(--#{$prefix}link-color);
&:hover,
&:focus {
--#{$prefix}link-color: var(--#{$prefix}link-hover-color);
color: var(--#{$prefix}link-color);
}
}
// Element states.
:focus,
......
// Rules for extending standard Bootstrap navbar component.
// Porting parts of BS5 nav component.
.nav {
--#{$prefix}nav-link-color: #{$link-color};
--#{$prefix}nav-link-hover-color: #{$link-hover-color};
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
--bsb-nav-link-hover-border-color: #{if($nav-link-hover-border-width, $nav-link-hover-border-color, transparent)};
--bsb-nav-link-active-color: #{$nav-link-active-color};
--bsb-nav-link-active-border-color: #{if($nav-link-hover-border-width, $nav-link-active-border-color, transparent)};
&-link {
color: var(--#{$prefix}nav-link-color);
&:hover,
&:focus {
color: var(--#{$prefix}nav-link-hover-color);
&::after {
background-color: var(--bsb-nav-link-hover-border-color);
}
}
// We don't have always active class so lets use them both for now unit
// we figure can we fix this with just one class @todo.
&.is-active,
&.active {
color: var(--bsb-nav-link-active-color);
&::after {
background-color: var(--bsb-nav-link-active-border-color);
}
}
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
}
}
}
// Apply Bootstrap fixed z-index position to fixed toolbar.
body.toolbar-fixed .toolbar-oriented .toolbar-bar {
z-index: $zindex-fixed;
......
// Basic styling for footer section and it regions.
.page__footer {
background-color: $footer-bg;
--#{$prefix}heading-color: #{$footer-heading-color};
--#{$prefix}link-color: #{$footer-link-color};
--#{$prefix}link-hover-color: #{$footer-link-hover-color};
--bsb-bg-color: #{$footer-bg};
--bsb-color: #{$footer-color};
--bsb-link-active-color: #{$footer-link-active-color};
--bsb-link-hover-border-color : #{$footer-nav-link-hover-border-color};
--bsb-link-active-border-color: #{$footer-nav-link-active-border-color};
background-color: var(--bsb-bg-color);
@if $footer-border {
border-top: $footer-border;
}
color: $footer-color;
color: var(--bsb-color);
font-size: $footer-font-size;
a:not(.btn):not(.nav-link) {
@include style-link($footer-link-color, $footer-link-hover-color, $footer-link-active-color);
}
a.nav-link {
@include style-nav-link($footer-link-color, $footer-link-hover-color, $footer-link-active-color, $text-hover-decoration: $footer-link-hover-text-decoration, $link-hover-border-width: $footer-nav-link-hover-border-width, $link-hover-border-color: $footer-nav-link-hover-border-color, $link-active-border-color: $footer-nav-link-active-border-color);
}
h1, h2, h3, h4, h5, h6 {
color: $footer-heading-color;
}
&__content {
.block {
&__title {
......@@ -31,11 +31,14 @@
}
&__copyright {
background-color: $footer-copyright-bg;
--bsb-bg-color: #{$footer-copyright-bg};
--bsb-color: #{$footer-copyright-color};
background-color: var(--bsb-bg-color);
@if $footer-copyright-border {
border-top: $footer-copyright-border;
}
color: $footer-copyright-color;
color: var(--bsb-color);
@if $footer-copyright-link-color != $footer-link-color {
a:not(.btn):not(.nav-link) {
......
// Layout and basic styling for header section and it regions.
.page__header {
--#{$prefix}link-color: #{$header-link-color};
--#{$prefix}link-hover-color: #{$header-link-hover-color};
--bsb-link-active-color: #{$header-link-active-color};
--bsb-link-hover-border-color : #{$header-link-hover-border-color};
--bsb-link-active-border-color: #{$header-link-active-border-color};
@if $header-color {
color: $header-color;
--bsb-color: #{$header-color};
}
color: var(--bsb-color);
.block {
// Header blocks usually have horizontal one row layout and
......@@ -24,24 +30,22 @@
}
}
a:not([class]), a.ext:not(.nav-link), a.site-name {
@include style-link($header-link-color, $header-link-hover-color, $header-link-active-color);
}
a.nav-link {
@include style-nav-link($header-link-color, $header-link-hover-color, $header-link-active-color, $link-hover-border-width: $header-link-hover-border-width, $link-hover-border-color: $header-link-hover-border-color, $link-active-border-color: $header-link-active-border-color);
}
&__top {
@if $header-top-bg {
background-color: $header-top-bg;
--bsb-bg-color: #{$header-top-bg};
}
@if $header-top-color {
color: $header-top-color;
--bsb-color: #{$header-top-color};
}
background-color: var(--bsb-bg-color);
@if $header-top-border {
border-bottom: $header-top-border;
}
color: var(--bsb-color);
font-size: $header-top-font-size;
// Region top is vertically centered row with flex-end align.
......
......@@ -25,14 +25,21 @@
}
// Style a link.
// TODO for 2.x version this mixin should probably be removed. Color part should
// go to callers which should just adjust CSS vars. Text decoration was here
// just so support style-nav-link() and now that part is moved there.
@mixin style-link($color, $hover-color, $active-color: $hover-color, $text-decoration: $link-decoration, $text-hover-decoration: $link-hover-decoration, $link-disabled-color: $nav-link-disabled-color) {
color: $color;
--#{$prefix}link-color: #{$color};
--#{$prefix}link-hover-color: #{$hover-color};
--bsb-link-active-color: #{$active-color};
--bsb-link-disabled-color: #{$link-disabled-color};
@if $text-decoration {
text-decoration: $text-decoration;
}
@include hover-focus() {
color: $hover-color;
--#{$prefix}link-color: var(--#{$prefix}link-hover-color);
@if $text-hover-decoration {
text-decoration: $text-hover-decoration;
......@@ -43,7 +50,7 @@
// we figure can we fix this with just one class @todo.
&.is-active,
&.active {
color: $active-color;
--#{$prefix}link-color: var(--bsb-link-active-color);
@if $text-hover-decoration {
text-decoration: $text-hover-decoration;
......@@ -52,7 +59,7 @@
@if $link-disabled-color {
&.disabled {
color: $link-disabled-color;
--#{$prefix}link-color: var(--bsb-link-disabled-color);
}
}
}
......@@ -62,34 +69,33 @@
// If $link-hover-border-width is defined this means we are using border
// bottom hover animation and not simple text-decoration underline.
@include style-link($color, $hover-color, $active-color: $hover-color, $text-decoration: if($link-hover-border-width, false, $text-decoration), $text-hover-decoration: if($link-hover-border-width, false, $text-hover-decoration));
//@include style-link($color, $hover-color, $active-color: $hover-color, $text-decoration: if($link-hover-border-width, false, $text-decoration), $text-hover-decoration: if($link-hover-border-width, false, $text-hover-decoration));
@include hover-focus() {
@if $link-hover-border-width {
&::after {
background-color: $link-hover-border-color;
}
}
--#{$prefix}nav-link-color: #{$color};
--#{$prefix}nav-link-hover-color: #{$hover-color};
--#{$prefix}nav-link-disabled-color: #{$active-color};
@if $link-hover-border-width {
--bsb-nav-link-hover-border-color: #{$link-hover-border-color};
}
--bsb-nav-link-active-color: #{$link-active-border-color};
@if $link-hover-border-width and $link-active-border-color {
--bsb-nav-link-active-border-color: #{$link-active-border-color};
}
// We don't have always active class so lets use them both for now unit
// we figure can we fix this with just one class @todo.
&.is-active,
&.active {
color: $active-color;
@if $text-decoration {
text-decoration: $text-decoration;
}
@if $link-hover-border-width {
@if $link-active-border-color {
&::after {
background-color: $link-active-border-color;
}
}
@include hover-focus() {
@if $text-hover-decoration {
text-decoration: $text-hover-decoration;
}
}
@if $link-disabled-color {
&.disabled {
color: $link-disabled-color;
&.is-active,
&.active {
@if $text-hover-decoration {
text-decoration: $text-hover-decoration;
}
}
}
......
......@@ -15,6 +15,9 @@ $line-height-base: 1.5 !default;
// Components
// BS5 CSS vars prefix.
$prefix: bs- !default;
$btn-link-disabled-color: $disabled-color !default;
$border-width: 1px !default;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment