aira-wordpress/assets/scss/_bootscore-custom.scss

198 lines
3.7 KiB
SCSS

/*!
* Bootscore custom styles
*/
// Add your own code here!
// Because this file is compiled after Bootstrap, you're also able to use Bootstrap mixins for better code.
// Some examples can be found here: https://bootscore.me/documentation/bootstrap-css-sass
/* NAVIGATION */
#nav-main {
height: 70px;
.container {
width: 1320px;
}
.nav-link {
text-transform: uppercase;
font-size: 13px;
}
}
/* Is required to show the svg logo */
.navbar-brand {
width: 150px;
}
/* CUSTOM BLOCK MOBILE SUPPORT */
@include media-breakpoint-up(md) {
body:not(.wp-admin) .wp-block-create-block-featured-image-block {
.call-to-action {
width: 350px;
margin-right: 100px;
}
}
}
/* DEFAULT BLOCK OVERRIDES */
:root :where(p.has-background) {
padding:.5em;
}
.wp-block-cover, .wp-block-cover-image {
min-height: auto;
}
/* COVER control the spacing on the left and right */
.wp-block-cover.is-light {
.has-text-align-left {
margin-left: 0 !important;
}
.has-text-align-right {
margin-right: 0 !important;
}
}
@include media-breakpoint-up(md) {
:root :where(p.has-background) {
padding:1.25em 2.375em;
}
}
/* HOMEPAGE SPECIFIC STYLING PER BLOCK */
/* Crane block */
.homepage-crane {
.wp-block-cover__image-background {
background-position: right 35% top 20% !important;
}
}
.home {
#content {
padding-top: 0 !important;
}
.entry-header {
display: none;
}
}
.footer-crane {
.wp-block-cover__image-background {
background-position: 760% 20% !important;
background-attachment: initial;
background-repeat: no-repeat;
background-size: auto;
}
}
/* Footer */
#footer {
.bootscore-footer-columns {
// background-color: black;
color: white;
a {
color: white;
}
}
}
/* Custom Style for core/cover block */
.is-style-fixed-height-272 {
height: 272px;
}
.is-style-fixed-height-300 {
height: 300px;
}
.is-style-fixed-height-400 {
height: 400px;
}
// /* FIXME: merge buttons to be bootstrap by amending the classes here in core/button. Then update theme.json */
// .wp-block-button__link {
// transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// &:hover {
// color: #fff;
// background-color: #c20512;
// border-color: #b70511;
// }
// }
.is-style-bootstrap-primary > a,
.is-style-bootstrap-primary > div {
@extend .btn;
@extend .btn-primary;
@extend .btn-lg;
}
.is-style-bootstrap-dark > a,
.is-style-bootstrap-dark > div {
@extend .btn;
@extend .btn-dark;
@extend .btn-lg;
}
.is-style-styled-list {
padding-left: 60px;
counter-reset: item;
list-style-position: outside;
li {
margin-bottom: 40px;
padding-left: 50px;
position: relative;
display: block;
line-height: 1.1;
}
li:before {
position: absolute;
// padding-top: 40px;
margin-left: -90px;
padding-left: 30px;
margin-right: 30px;
font-size: 50px;
font-weight: bold;
content: counter(item);
counter-increment: item;
color: red;
}
}
/* Page */
.featured-full-width-img {
height: 400px;
}
#secondary {
height: 100%;
}
#secondary {
display: none;
}
#sidebar {
padding-left: 8rem;
padding-right: 2rem;
font-size: 24px;
position: sticky;
a:not(.active) {
color: black;
}
li {
padding: 0.5rem 0;
}
}
/* CUSTOM BLOCK MOBILE SUPPORT */
@include media-breakpoint-up(lg) {
#secondary {
display: block;
}
}