assets/css/scss/components/_gutenberg-blocks.scss
.gutenberg-compatible-template.using-gutenberg {
//Media & Content Block
@media (min-width: 1024px) {
&.has-block-media-text,
&.has-block-cover {
.breadcrumbs-container {
position: absolute;
margin-bottom: -50px;
z-index: 99;
}
}
}
.wp-block-media-text {
.wp-block-media-text__media {
@media (max-width: 767px) {
width: 100%;
}
}
}
//Categories
.wp-block-categories {
text-align: left;
}
//Embeds
.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before,
.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
padding-top: 2.4rem;
}
//Gradients
.has-primary-to-secondary-gradient-background {
background: -webkit-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(247, 174, 0, 1) 100%
);
background: -o-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(247, 174, 0, 1) 100%
);
background: linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(247, 174, 0, 1) 100%
);
}
.has-primary-to-tertiary-gradient-background {
background: -webkit-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
background: -o-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
background: linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
}
.has-primary-to-background-gradient-background {
background: -webkit-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(249, 249, 249, 1) 100%
);
background: -o-linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(249, 249, 249, 1) 100%
);
background: linear-gradient(
135deg,
rgba(39, 99, 158, 1) 0%,
rgba(249, 249, 249, 1) 100%
);
}
.has-secondary-to-tertiary-gradient-background {
background: -webkit-linear-gradient(
135deg,
rgba(247, 174, 0, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
background: -o-linear-gradient(
135deg,
rgba(247, 174, 0, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
background: linear-gradient(
135deg,
rgba(247, 174, 0, 1) 0%,
rgba(107, 169, 19, 1) 100%
);
}
//Font sizes presets
.has-small-font-size {
font-size: 13px;
}
.has-normal-font-size {
font-size: 15px;
}
.has-medium-font-size {
font-size: 22px;
}
.has-large-font-size {
font-size: 30px;
}
.has-huge-font-size {
font-size: 40px;
}
//Images and Videos with Caption
figcaption {
background-color: white;
padding: 1.8rem;
margin: 0;
font-style: italic;
font-size: 15px;
}
video,
.wp-block-embed__wrapper,
audio {
+ figcaption {
position: relative;
top: -5px;
}
}
.wp-block-embed__wrapper {
.entry-content-asset {
margin-bottom: 0;
}
}
.wp-block-embed-twitter,
.wp-block-embed-instagram,
.wp-block-embed-facebook {
figcaption {
background-color: transparent;
}
}
#main {
.entry-content {
.wp-block-embed {
&.alignwide {
max-width: 75%;
}
&.alignfull {
max-width: 100%;
}
&.alignleft {
max-width: 585px;
margin-left: 20%;
}
&.alignright {
max-width: 585px;
margin-right: 20%;
}
&.wp-block-embed-twitter,
&.wp-block-embed-facebook,
&.wp-block-embed-instagram {
.wp-block-embed__wrapper {
> * {
margin-left: auto !important;
margin-right: auto !important;
}
}
}
}
.wp-block-embed-wordpress .entry-content-asset {
padding-bottom: 80%;
}
}
}
//Buttons
.button {
@include lsx-button-scaffolding();
@include lsx-button-colour();
text-align: center;
}
.wp-block-buttons {
.wp-block-button {
padding-right: $lsx-gap / 2;
@include media("<=custom") {
width: 100%;
padding-right: 0;
}
&:last-child {
padding-right: 0;
}
}
}
.wp-block-button {
&.alignleft,
&.alignright {
float: initial;
}
}
// Separator
.wp-block-separator {
margin-top: 24px;
margin-bottom: 24px;
border: 0;
&:not(.is-style-dots) {
border-top: 1px solid nth($gray, 2);
}
}
// Download File Block
.wp-block-file {
padding: 0 $lsx-gap;
.wp-block-file__button {
@include lsx-button-scaffolding();
@include lsx-button-colour();
}
}
// Text Columns
.wp-block-text-columns {
&.alignfull {
@include media(">tablet") {
padding: 0 $lsx-gap;
}
}
}
// Columns
.wp-block-text-columns {
&.columns-2 {
.wp-block-column {
@media (min-width: $lsx-large-gap) {
p {
&:first-child {
margin-right: 0;
}
}
p {
&:last-child {
margin-left: 0;
}
}
}
}
}
}
.wp-block-columns {
margin-bottom: 0px;
@media screen and (max-width: 600px) {
display: block;
}
&.alignwide {
@include media(">custom") {
// max-width: 90%;
// width: 90%;
max-width: 80rem;
width: 80rem;
}
@include media(">tablet") {
// max-width: 90%;
// width: 90%;
max-width: 80rem;
width: 80rem;
}
@include media(">desktop-wide") {
max-width: 120rem;
width: 120rem;
}
}
&.has-2-columns {
.wp-block-column {
@media (min-width: 782px) {
&:first-child {
margin-right: 15px;
}
&:last-child {
margin-left: 15px;
}
}
}
}
&.has-3-columns,
&.has-4-columns,
&.has-5-columns,
&.has-6-columns {
.wp-block-column {
@media (min-width: 782px) {
margin-left: 15px;
margin-right: 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
}
.wp-block-column {
margin: 0;
}
}
//Post List
.wp-block-latest-posts {
&.wp-block-latest-posts__list {
&:not(.is-grid) {
list-style: initial;
}
}
}
// Testimonial Widget
#lsx-testimonials-slider {
margin-left: auto;
margin-right: auto;
}
.lsx-button {
transition: all 100ms ease;
&:active {
left: 2px;
top: 2px;
position: relative;
box-shadow: 0 0 0 0 !important;
}
}
}
// Greyed Background on Widget Cards for class grey-cards
.grey-cards {
.lsx-block-post-grid-image {
background: #f1f1f1 !important;
}
.lsx-block-post-grid-text {
background: #f1f1f1 !important;
}
}
//Wp Default Blocks
.gutenberg-compatible-template.using-gutenberg {
.wp-block-audio {
padding: 0 $lsx-gap;
}
}