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

Issue #3414513 by pivica: Separate footer style and layout SASS rules

parent a7e8c22a
No related branches found
No related tags found
No related merge requests found
.page__footer__content {
.nav-link {
// @todo - no footer
@if $footer-nav-link-hover-border-width {
.page__footer {
@if $footer-nav-link-hover-border-width {
.nav-link {
@include link-hover-active-line-effect(
$height: $footer-nav-link-hover-border-width,
$color-hover: $footer-nav-link-hover-border-color,
$color-active: $footer-nav-link-active-border-color//,
$color-active: $footer-nav-link-active-border-color //,
// We are using y padding here because it looks better (this are not pills).
//$padding-x: $nav-link-padding-y
);
}
&::after {
right: 0;
left: 0;
&__content {
// Footer content nav links are usually vertically oriented and for them
// active line looks better with left and right position set to zero.
.nav-link {
&::after {
right: 0;
left: 0;
}
}
}
}
......
......@@ -5,3 +5,4 @@
@import "partials/header-layout-align";
@import "partials/main";
@import "partials/footer";
@import "partials/footer-layout";
// Layout for footer section and it regions.
.page__footer {
// Compensate for margin definitions for the block and region defined below.
margin-bottom: $block-spacer-y;
p {
margin-bottom: $spacer / 2;
&:last-child {
margin-bottom: 0;
}
}
.region {
// Compensate child blocks bottom margin.
margin-bottom: -$block-spacer-y;
}
.block {
margin-bottom: $block-spacer-y;
}
&__content {
// Relative position needed for scroll-to-top responsive absolute
// positioning.
position: relative;
@if $footer-spacer-y {
padding-top: $footer-spacer-y;
padding-bottom: $footer-spacer-y;
}
.region {
@include media-breakpoint-up('md') {
flex: 1;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
}
.block {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
// Support scroll to top block layout.
&-bs-lib-scroll-to-top-block {
// Reset bottom margin so we are sure height is zero for this block
// on bigger screens where it is hidden.
margin-bottom: 0 !important;
// For the right value use the same value as in
// bs_lib/scroll-to-top.css so there are no movements when we
// transition from fixed to absolute.
padding-right: 1rem !important;
@include media-responsive-breakpoint-down() {
position: absolute;
top: 0;
right: 0;
// Prevent full width of a block for absolute position. Use
// fit-content instead of auto to prevent iOS positioning problem
// and overflowing outside of screen horizontally.
width: fit-content;
.btn {
&:not(.bs-lib-scroll-to-top--fixed) {
border-radius: 0 0 $btn-border-radius $btn-border-radius;
}
}
}
}
@include media-breakpoint-up('sm') {
flex: 1;
width: auto;
&-bs-lib-scroll-to-top-block {
flex: 0;
}
}
&__title {
@if $footer-block-title-margin-bottom {
margin-bottom: $footer-block-title-margin-bottom;
}
}
}
a.nav-link {
// Reset horizontal
padding-right: 0;
padding-left: 0;
}
}
&__copyright {
@if $footer-copyright-spacer-y {
padding-top: $footer-copyright-spacer-y;
}
}
// Remove top margin from footer headings so they don't mess layout too much.
// We have h3 and h4 here for cases when headings are added to body of a
// block.
// For the small screens we will remove top margin just for first block
// because we are in vertical stack layout now and we actually want top
// margin for not first block titles.
.region-footer {
.block:first-child {
.block__title,
.field--name-body > h3:first-child,
.field--name-body > h4:first-child {
margin-top: 0;
}
}
}
// For bigger screens we will remove margin top for all blocks.
@include media-breakpoint-up('md') {
.block__title,
.field--name-body > h3:first-child,
.field--name-body > h4:first-child {
margin-top: 0;
}
}
}
// We have a container so we need to apply row and basic col styles.
.region-footer-copyright {
// Commenting this for now, there is no sense to apply padding because
// blocks have their margins already.
//padding-top: $spacer;
@include make-row();
justify-content: $footer-copyright-justify-content;
// Just apply padding, so child theme have liberty to define grid as they
// like.
.block {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
// Layout and basic styling for footer section and it regions.
// Basic styling for footer section and it regions.
.page__footer {
// Compensate for margin definitions for the block and region defined below.
margin-bottom: $block-spacer-y;
background-color: $footer-bg;
@if $footer-border {
border-top: $footer-border;
......@@ -22,105 +20,17 @@
color: $footer-heading-color;
}
p {
margin-bottom: $spacer / 2;
&:last-child {
margin-bottom: 0;
}
}
.region {
// Compensate child blocks bottom margin.
margin-bottom: -$block-spacer-y;
}
.block {
margin-bottom: $block-spacer-y;
}
&__content {
// Relative position needed for scroll-to-top responsive absolute
// positioning.
position: relative;
@if $footer-spacer-y {
padding-top: $footer-spacer-y;
padding-bottom: $footer-spacer-y;
}
.region {
@include media-breakpoint-up('md') {
flex: 1;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
}
.block {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
// Support scroll to top block layout.
&-bs-lib-scroll-to-top-block {
// Reset bottom margin so we are sure height is zero for this block
// on bigger screens where it is hidden.
margin-bottom: 0 !important;
// For the right value use the same value as in
// bs_lib/scroll-to-top.css so there are no movements when we
// transition from fixed to absolute.
padding-right: 1rem !important;
@include media-responsive-breakpoint-down() {
position: absolute;
top: 0;
right: 0;
// Prevent full width of a block for absolute position. Use
// fit-content instead of auto to prevent iOS positioning problem
// and overflowing outside of screen horizontally.
width: fit-content;
.btn {
&:not(.bs-lib-scroll-to-top--fixed) {
border-radius: 0 0 $btn-border-radius $btn-border-radius;
}
}
}
}
@include media-breakpoint-up('sm') {
flex: 1;
width: auto;
&-bs-lib-scroll-to-top-block {
flex: 0;
}
}
&__title {
@if $footer-block-title-font-size {
font-size: $footer-block-title-font-size;
}
@if $footer-block-title-margin-bottom {
margin-bottom: $footer-block-title-margin-bottom;
}
}
}
a.nav-link {
// Reset horizontal
padding-right: 0;
padding-left: 0;
}
}
&__copyright {
@if $footer-copyright-spacer-y {
padding-top: $footer-copyright-spacer-y;
}
background-color: $footer-copyright-bg;
@if $footer-copyright-border {
border-top: $footer-copyright-border;
......@@ -137,44 +47,4 @@
}
}
}
// Remove top margin from footer headings so they don't mess layout too much.
// We have h3 and h4 here for cases when headings are added to body of a
// block.
// For the small screens we will remove top margin just for first block
// because we are in vertical stack layout now and we actually want top
// margin for not first block titles.
.region-footer {
.block:first-child {
.block__title,
.field--name-body > h3:first-child,
.field--name-body > h4:first-child {
margin-top: 0;
}
}
}
// For bigger screens we will remove margin top for all blocks.
@include media-breakpoint-up('md') {
.block__title,
.field--name-body > h3:first-child,
.field--name-body > h4:first-child {
margin-top: 0;
}
}
}
// We have a container so we need to apply row and basic col styles.
.region-footer-copyright {
// Commenting this for now, there is no sense to apply padding because
// blocks have their margins already.
//padding-top: $spacer;
@include make-row();
justify-content: $footer-copyright-justify-content;
// Just apply padding, so child theme have liberty to define grid as they
// like.
.block {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
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