diff --git a/src/sass/theme-bootstrap4.scss b/src/sass/theme-bootstrap4.scss index 7cc8e02a..5db2b0c3 100644 --- a/src/sass/theme-bootstrap4.scss +++ b/src/sass/theme-bootstrap4.scss @@ -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! diff --git a/src/sass/theme.scss b/src/sass/theme.scss index f1df411f..ff0d980a 100644 --- a/src/sass/theme.scss +++ b/src/sass/theme.scss @@ -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! diff --git a/src/sass/theme/_blocks-bootstrap4.scss b/src/sass/theme/_blocks-bootstrap4.scss deleted file mode 100644 index ceed8432..00000000 --- a/src/sass/theme/_blocks-bootstrap4.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/sass/theme/_blocks.scss b/src/sass/theme/_blocks.scss index 518b8cf4..244b4c68 100644 --- a/src/sass/theme/_blocks.scss +++ b/src/sass/theme/_blocks.scss @@ -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; diff --git a/src/sass/theme/_understrap-bootstrap4.scss b/src/sass/theme/_understrap-bootstrap4.scss deleted file mode 100644 index 6ed925f1..00000000 --- a/src/sass/theme/_understrap-bootstrap4.scss +++ /dev/null @@ -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 `