Typesetter/themes/Bootstrap4/_common/common_style.scss
2021-09-08 19:52:21 +02:00

368 lines
No EOL
7.8 KiB
SCSS

// Theme Bootstrap 4
//
// common stylesheet used in all layouts
//
// Instead of Autoprefixer we use vendor-prefix mixins,
// see https://github.com/Typesetter/Typesetter/blob/master/include/thirdparty/Bootstrap4/VP-MIXINS.md
//
// ### Import web fonts ###
// if defined in variables
@if variable-exists(web-font-path) {
@import url($web-font-path);
}
// ### Other Common Imports ###
// Note: Because this file (common_style.scss) is imported itself by the layout's style.scss,
// we must also prefix the following paths with '../_common_style/',
// even though the files to be imported are right here in this directory
@import '../_common/contact_form.scss';
@import '../_common/search.scss';
@import '../_common/mobile_menu.scss';
@import '../_common/more_backgrounds.scss';
@import '../_common/simple_blog_common.scss'; // adds ~40 KB css, comment this line if you're not using the Simple Blog (plugin)
// ### Clearfixes and flex ###
// disable Typesetter's native clearfixes in flexbox context
.row,
.gpRow,
[class$="-flex"] {
> .gpclear {
display: none;
}
&:after {
content: none;
}
}
// ### Unify the Grids ###
// convert Typesetter's grid to behave like Bootstrap 4 (flex) grid
.gpRow { @extend .row; }
.gpCol-1 { @extend .col-md-1; }
.gpCol-2 { @extend .col-md-2; }
.gpCol-3 { @extend .col-md-3; }
.gpCol-4 { @extend .col-md-4; }
.gpCol-5 { @extend .col-md-5; }
.gpCol-6 { @extend .col-md-6; }
.gpCol-7 { @extend .col-md-7; }
.gpCol-8 { @extend .col-md-8; }
.gpCol-9 { @extend .col-md-9; }
.gpCol-10 { @extend .col-md-10; }
.gpCol-11 { @extend .col-md-11; }
.gpCol-12 { @extend .col-12; }
[class *= "gpCol-"] { margin-bottom: unset; }
// ### Navbar ###
.navbar {
.fa {
font-size: 14px; // this is FontAwesome's pixel-perfect size
line-height: inherit;
}
}
// navbar areas and their <a> tags inherit the bootstrap style
.navbar-light {
.GPAREA {
color: $navbar-light-color;
a:not(.dropdown-item) {
color: $navbar-light-color;
text-decoration: none;
@include hover-focus() {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
}
.navbar-brand {
> .GPAREA {
a
a:hover,
a:focus {
color: $navbar-light-brand-color;
text-decoration: none;
}
}
}
}
.navbar-dark {
.GPAREA {
color: $navbar-dark-color;
a:not(.dropdown-item) {
color: $navbar-dark-color;
text-decoration: none;
@include hover-focus() {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
}
.navbar-brand {
> .GPAREA {
a,
a:hover,
a:focus {
color: $navbar-dark-brand-color;
text-decoration: none;
}
}
// create a gap between multiple GPAREAs
.brand-logo + .GPAREA,
.GPAREA:not(:empty) + .GPAREA {
margin-left: 0.75rem;
}
.gpArea_Site-Name .editable_area span:empty:before {
// in case it was emptied - to remain editable
display: inline-block;
content: ' ';
min-width: 24px;
color: rgba(127, 127, 127, 0.75);
}
}
}
// multi-level navbar caret rotation
.dropdown-toggle {
&.dropdown-active {
+ .dropdown-menu {
top: 0;
left: calc(100% - 4px);
min-width: 0;
}
&:after { // = caret
@include vp-transform(rotate(-90deg));
}
}
}
.dropdown-menu-right {
.dropdown-toggle {
&.dropdown-active {
+ .dropdown-menu {
left: auto;
right: calc(100% - 4px);
}
}
}
}
.complementary-nav {
min-height: 46px; // default, will be overruled by customizer
> .no-container {
width: 100%;
}
}
$navbar_expand_breakpoint: lg !default; // customizer overrules
.main-nav {
min-height: 72px; // default, will be overruled by customizer
// search gadget
.gpArea_Search,
.gpArea_Search-Gadget {
@include vp-flex-basis(7rem);
max-width: 10rem;
@include media-breakpoint-up($navbar_expand_breakpoint){
margin-left: $spacer;
}
h3,
input.submit {
display: none;
}
input.text {
height: auto; // overrules bootstrap defaults
padding: 0.15rem 0.5rem; // overrules bootstrap defaults
border-radius: $input-border-radius; // overrules bootstrap input-group defaults
}
}
}
// fix bad container paddings in navbars (as of Bootstrap 4)
// see https://github.com/twbs/bootstrap/issues/24726
@include media-breakpoint-up(sm) {
.navbar > .container,
.navbar > .container-fluid {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
// dropdown-divider in dropdown menus
.main-nav .gpArea_Extra_Bootstrap_Dropdown_Divider {
@extend .dropdown-divider;
}
// margins for additional areas
.main-nav .navbar-collapse > .GPAREA:not(:empty) {
margin-top: 0.75rem;
margin-bottom: 0.25rem;
}
// expanded
@include media-breakpoint-up(sm) {
.main-nav.navbar-expand-sm .navbar-collapse > .GPAREA:not(:empty) {
margin-top: 0;
margin-bottom: 0;
}
}
@include media-breakpoint-up(md) {
.main-nav.navbar-expand-md .navbar-collapse > .GPAREA:not(:empty) {
margin-top: 0;
margin-bottom: 0;
}
}
@include media-breakpoint-up(lg) {
.main-nav.navbar-expand-lg .navbar-collapse > .GPAREA:not(:empty) {
margin-top: 0;
margin-bottom: 0;
}
}
// ### Native smooth scrolling ###
// see https://caniuse.com/#feat=css-scroll-behavior
// https://developer.mozilla.org/docs/Web/CSS/scroll-behavior
// https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion
html {
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
}
// ### Complementary Header ###
header.complementary-header {
&.bg-dark {
// background-color: darken($dark, 7%) !important;
background-color: $gray-900 !important; // Customizer
}
&.bg-light {
// background-color: darken($white, 7%) !important;
background-color: $gray-100 !important;
}
.gpArea_Extra_Header_Contact > span,
.gpArea_Extra_Header_Contact > .GPAREA > span, // when editing
.gpArea_Extra_Header_SocialMedia > a,
.gpArea_Extra_Header_SocialMedia > .GPAREA > a {
display: inline-block;
padding: 0 4px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
// ### Content sections ###
// add some vertical padding and even more padding-top to the
// first content section so it doesn't stick to the navbar
// overrule this e.g. with 'pt-0' utility class
#gpx_content > .GPAREA {
padding-top: ($grid-gutter-width / 4);
padding-bottom: ($grid-gutter-width / 4);
&:first-child {
padding-top: ($grid-gutter-width / 1.5);
}
}
@include media-breakpoint-up(md) {
#gpx_content > .GPAREA {
padding-top: ($grid-gutter-width / 3);
padding-bottom: ($grid-gutter-width / 3);
&:first-child {
padding-top: ($grid-gutter-width);
}
}
}
// ### container ###
// working without containers (see layout settings.php)
.main-nav > .no-container {
width: 100%;
@include vp-flexbox;
@include vp-flex-wrap(wrap);
@include vp-align-items(center);
@include vp-justify-content(space-between);
}
.main-content > .no-container {
> .GPAREA,
> #gpx_content > .GPAREA,
> #gpAfterContent > .GPAREA {
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
> #gpx_content > .row,
> #gpx_content > .gpRow {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
}
.main-footer > .no-container > .row {
margin: 0;
}
// ### Admin Link ###
// no underline
.sitemap_link,
.login_link,
.powered_by_link {
// display: inline-block;
margin-bottom: $spacer;
a {
&:hover,
&:focus {
text-decoration: none;
}
}
}
// adjust the gap
.gpArea_Admin_Link,
.gpArea_Admin-Link-Area {
span + span {
margin-left: ($spacer * 0.75);
}
}
// ### Layout Editor ###
// give empty 'area slots' a min-width so they are accessible in Layout Editor
// even when they are at the very right edge
html.edit_layout .collapse .GPAREA.gp_output_area {
min-width: 124px;
}
// ### General Typography ###
.lead {
font-size: 1.25em; // make relative: rem -> em
}