reduce code duplication
This commit is contained in:
IanDelMar
parent
226e53e256
commit
a2b1eddb05
|
|
@ -1,14 +1,15 @@
|
|||
@import "theme/theme_variables"; // <-------- Add your variables into this file. Also add variables to overwrite Bootstrap or Understrap variables here
|
||||
@import "assets/bootstrap4/bootstrap"; // <-------- Loads Bootstrap4
|
||||
@import "theme/understrap-bootstrap4"; // <-------- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
|
||||
@import "theme/colors"; // <-------- This creates the necessary bootstrap color classes.
|
||||
@import "theme/blocks-bootstrap4"; // <-------- This adds Bootstrap styles to blocks.
|
||||
@import "theme/contact-form7"; // <-------- Contact Form 7 - Bootstrap 4 support
|
||||
@import "theme/woocommerce"; // <-------- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce
|
||||
$bootstrap4: true; // <--- Do not delete this variable. It is used in theme/_blocks.scss and theme/_understrap.scss.
|
||||
|
||||
// Optional files - If you dont use the corresponding scripts/fonts comment em out
|
||||
@import "assets/fontawesome/font-awesome"; // <-------- Font Awesome Icon font
|
||||
@import "theme/theme_variables"; // <--- Add your variables into this file. Also add variables to overwrite Bootstrap or Understrap variables here
|
||||
@import "assets/bootstrap4/bootstrap"; // <--- Loads Bootstrap
|
||||
@import "theme/understrap"; // <--- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
|
||||
@import "theme/colors"; // <--- This creates the necessary bootstrap color classes.
|
||||
@import "theme/blocks"; // <--- This adds Bootstrap styles to blocks.
|
||||
|
||||
// Optional files - If you dont use the corresponding plugins/scripts/fonts comment em out
|
||||
@import "theme/contact-form7"; // <--- Contact Form 7 - Bootstrap support
|
||||
@import "theme/woocommerce"; // <--- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce
|
||||
@import "assets/fontawesome/font-awesome"; // <--- Font Awesome Icon font
|
||||
|
||||
// Any additional imported files //
|
||||
@import "theme/theme"; // <-------- That's where you can add your own design. Thats your part!
|
||||
|
||||
@import "theme/theme"; // <--- That's where you can add your own design. Thats your part!
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@import "theme/theme_variables"; // <-------- Add your variables into this file. Also add variables to overwrite Bootstrap or Understrap variables here
|
||||
@import "assets/bootstrap5/bootstrap"; // <-------- Loads Bootstrap4
|
||||
@import "theme/understrap"; // <-------- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
|
||||
@import "theme/colors"; // <-------- This creates the necessary bootstrap color classes.
|
||||
@import "theme/blocks"; // <-------- This adds Bootstrap styles to blocks.
|
||||
@import "theme/contact-form7"; // <-------- Contact Form 7 - Bootstrap 4 support
|
||||
@import "theme/woocommerce"; // <-------- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce
|
||||
@import "theme/theme_variables"; // <--- Add your variables into this file. Also add variables to overwrite Bootstrap or Understrap variables here
|
||||
@import "assets/bootstrap5/bootstrap"; // <--- Loads Bootstrap
|
||||
@import "theme/understrap"; // <--- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
|
||||
@import "theme/colors"; // <--- This creates the necessary bootstrap color classes.
|
||||
@import "theme/blocks"; // <--- This adds Bootstrap styles to blocks.
|
||||
|
||||
// Optional files - If you dont use the corresponding scripts/fonts comment em out
|
||||
@import "assets/fontawesome/font-awesome"; // <-------- Font Awesome Icon font
|
||||
// Optional files - If you dont use the corresponding plugins/scripts/fonts comment em out
|
||||
@import "theme/contact-form7"; // <--- Contact Form 7 - Bootstrap support
|
||||
@import "theme/woocommerce"; // <--- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce
|
||||
@import "assets/fontawesome/font-awesome"; // <--- Font Awesome Icon font
|
||||
|
||||
// Any additional imported files //
|
||||
@import "theme/theme"; // <-------- That's where you can add your own design. Thats your part!
|
||||
@import "theme/theme"; // <--- That's where you can add your own design. Thats your part!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
// Tables
|
||||
.wp-block-table table {
|
||||
@extend .table;
|
||||
@extend .table-bordered;
|
||||
}
|
||||
|
||||
// Block Quotes
|
||||
.wp-block-quote {
|
||||
@extend .blockquote;
|
||||
cite {
|
||||
@extend .blockquote-footer;
|
||||
}
|
||||
}
|
||||
|
||||
// Image captions
|
||||
figure.wp-block-image {
|
||||
@extend .figure;
|
||||
display: block;
|
||||
img {
|
||||
@extend .figure-img;
|
||||
}
|
||||
figcaption {
|
||||
@extend .figure-caption;
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate/classic editor image captions.
|
||||
.wp-block-image > figure {
|
||||
@extend .figure;
|
||||
display: block;
|
||||
img {
|
||||
@extend .figure-img;
|
||||
}
|
||||
figcaption {
|
||||
@extend .figure-caption;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Wide alignments and covers.
|
||||
body.understrap-no-sidebar {
|
||||
.alignwide,
|
||||
.alignfull,
|
||||
.wp-block-cover.alignwide,
|
||||
.wp-block-cover.alignfull {
|
||||
margin: 0px calc(50% - 50vw);
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
|
||||
.wp-block-cover__inner-container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
.alignwide,
|
||||
.wp-block-cover.alignwide {
|
||||
margin: 0px calc(50% - 45vw);
|
||||
max-width: 90vw;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.alignwide,
|
||||
.wp-block-cover.alignwide {
|
||||
margin: 0px calc(50% - 48vw);
|
||||
max-width: 96vw;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.wp-block-buttons {
|
||||
.wp-block-button {
|
||||
.wp-block-button__link {
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
}
|
||||
&:not(.is-style-outline) .wp-block-button__link {
|
||||
border: $btn-border-width solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// Tables
|
||||
// Tables
|
||||
.wp-block-table table {
|
||||
@extend .table;
|
||||
@extend .table-bordered;
|
||||
|
|
@ -43,7 +43,7 @@ body.understrap-no-sidebar {
|
|||
.alignfull,
|
||||
.wp-block-cover.alignwide,
|
||||
.wp-block-cover.alignfull {
|
||||
margin: 0px calc(50% - 50vw);
|
||||
margin: 0 calc(50% - 50vw);
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ body.understrap-no-sidebar {
|
|||
|
||||
.alignwide,
|
||||
.wp-block-cover.alignwide {
|
||||
margin: 0px calc(50% - 45vw);
|
||||
margin: 0 calc(50% - 45vw);
|
||||
max-width: 90vw;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ body.understrap-no-sidebar {
|
|||
@media (max-width: 920px) {
|
||||
.alignwide,
|
||||
.wp-block-cover.alignwide {
|
||||
margin: 0px calc(50% - 48vw);
|
||||
margin: 0 calc(50% - 48vw);
|
||||
max-width: 96vw;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -78,7 +78,11 @@ body.understrap-no-sidebar {
|
|||
.wp-block-buttons {
|
||||
.wp-block-button {
|
||||
.wp-block-button__link {
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
|
||||
@if variable-exists('bootstrap4') {
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
} @else {
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
|
||||
}
|
||||
}
|
||||
&:not(.is-style-outline) .wp-block-button__link {
|
||||
border: $btn-border-width solid transparent;
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden; // Fix for Windows Chrome horizontal scrollbar.
|
||||
}
|
||||
|
||||
|
||||
// Some basic padding for all wrappers
|
||||
.wrapper {
|
||||
padding: $grid-gutter-width 0;
|
||||
}
|
||||
|
||||
// Reset hero wrapper padding to 0
|
||||
#wrapper-hero {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
// Adding basic WordPress classes to pass the WordPress.org tests
|
||||
.sticky,
|
||||
.gallery-caption,
|
||||
.bypostauthor {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
// Separate sticky wrapper from main content
|
||||
.wrapper#wrapper-sticky {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
// Adding some contrast background color to footer full widget
|
||||
#wrapper-footer-full,
|
||||
#wrapper-static-hero {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
// Necessary WP classes
|
||||
.wp-caption {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.screen-reader-text {
|
||||
@include sr-only();
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
@extend .mx-auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.widget_categories,
|
||||
.widget_archive {
|
||||
select {
|
||||
@extend .form-control;
|
||||
}
|
||||
}
|
||||
|
||||
// Post design
|
||||
.entry-footer span {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
img.wp-post-image,
|
||||
article img,
|
||||
figure,
|
||||
img,
|
||||
#secondary img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Skip to content link
|
||||
a.skip-link {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
// Reset Jumbotron default margin
|
||||
.jumbotron {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
// Dropdown translation
|
||||
.navbar-dark .navbar-nav .dropdown-menu .nav-link {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color !important;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color !important;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color !important;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color !important;
|
||||
background-color: transparent;
|
||||
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light .navbar-brand a {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand a {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar h1 {
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
// Galleries
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
@for $i from 2 through 9 {
|
||||
.gallery-columns-#{$i} & {
|
||||
max-width: floor( percentage( 1 / $i ) * 100 ) / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Accessibility requirement for content links.
|
||||
.entry-content p a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -10,13 +10,15 @@ body {
|
|||
|
||||
// Reset hero wrapper padding to 0
|
||||
#wrapper-hero {
|
||||
padding: 0px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
// Adding basic WordPress classes to pass the WordPress.org tests
|
||||
.sticky,
|
||||
.gallery-caption,
|
||||
.bypostauthor {
|
||||
.bypostauthor,
|
||||
.wp-caption,
|
||||
.wp-caption-text {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -31,17 +33,12 @@ body {
|
|||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
// Necessary WP classes
|
||||
.wp-caption {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.screen-reader-text {
|
||||
@include visually-hidden();
|
||||
@if variable-exists('bootstrap4') {
|
||||
@include sr-only();
|
||||
} @else {
|
||||
@include visually-hidden();
|
||||
}
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
|
|
@ -73,10 +70,10 @@ body {
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
img.wp-post-image,
|
||||
article img,
|
||||
figure,
|
||||
img,
|
||||
img.wp-post-image,
|
||||
article img,
|
||||
#secondary img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -86,8 +83,8 @@ img,
|
|||
a.skip-link {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Dropdown translation
|
||||
|
|
@ -170,3 +167,16 @@ a.skip-link {
|
|||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@if variable-exists('bootstrap4') {
|
||||
|
||||
// Reset Jumbotron default margin
|
||||
.jumbotron {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Accessibility requirement for content links.
|
||||
.entry-content p a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue