Skip to content
Snippets Groups Projects
Commit 51d63291 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357708: Add a base style for the ajax progress throbber style under...

Issue #3357708: Add a base style for the ajax progress throbber style under Bootstrap 5 theme and removed not needed departed components
parent d06e0b53
No related branches found
No related tags found
No related merge requests found
......@@ -29,6 +29,25 @@ em.placeholder {
margin: 0 .3em;
}
.ajax-progress {
background-color: transparent !important;
border: 0 !important;
}
.ajax-progress-throbber .throbber {
background-color: transparent !important;
border: 0 !important;
}
.ajax-progress-throbber .message {
background-color: transparent !important;
border: 0 !important;
}
.ajax-progress-fullscreen {
background-color: transparent !important;
}
.hidden-anonymous,
.visible-admin,
.visible-logged-in {
......
.varbase-heroslider-media {
position: relative;
overflow: hidden;
}
.varbase-heroslider-media .slick-slide .slide__caption {
position: absolute;
top: auto;
bottom: 20%;
transition: transform 0s cubic-bezier(.19, 1, .22, 1) 1.25s, opacity 1.25s cubic-bezier(.19, 1, .22, 1) 0s;
transform: scale(.95);
opacity: 0;
filter: alpha(opacity=0);
}
[dir="ltr"] .varbase-heroslider-media .slick-slide .slide__caption {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .slick-slide .slide__caption {
right: 0;
}
.varbase-heroslider-media .slick-slide .img-responsive {
transition: transform 3s cubic-bezier(.19, 1, .22, 1) 0s;
transform: scale(1.15);
}
.varbase-heroslider-media .slick-slide .unpublished {
height: auto;
padding: 0;
}
.varbase-heroslider-media .slick-active .slide__caption {
transition: transform 1.25s cubic-bezier(.19, 1, .22, 1) .5s, opacity 1.25s cubic-bezier(.19, 1, .22, 1) .5s;
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
.varbase-heroslider-media .slick-active .img-responsive {
transition: transform 3s cubic-bezier(.19, 1, .22, 1) 0s;
transform: scale(1);
}
.varbase-heroslider-media .slide__caption .slide__title a {
color: #fff;
}
.varbase-heroslider-media .slide__caption .slick__text {
color: #fff;
}
.varbase-heroslider-media .slick__arrow {
top: 300px;
transform: translateY(-150px);
}
.varbase-heroslider-media .slick__arrow .slick-arrow::before {
color: #fff;
border-radius: 50%;
background-color: rgba(0, 0, 0, .3);
}
@media screen and (min-width: 768px) {
.varbase-heroslider-media .slick__arrow {
top: 600px;
transform: translateY(-300px);
}
}
[dir="ltr"] .varbase-heroslider-media .slick-prev {
left: .63rem;
right: auto;
}
[dir="rtl"] .varbase-heroslider-media .slick-prev {
right: .63rem;
left: auto;
}
[dir="ltr"] .varbase-heroslider-media .slick-next {
right: .63rem;
left: auto;
}
[dir="rtl"] .varbase-heroslider-media .slick-next {
left: .63rem;
right: auto;
}
.varbase-heroslider-media .slide__link {
margin: .63rem auto;
}
.varbase-heroslider-media .slide__link a {
color: #fff;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
min-height: 300px;
max-height: 300px;
}
@media screen and (min-width: 768px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media {
min-height: 600px;
max-height: 600px;
}
}
@media screen and (max-width: 576px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media {
min-height: 400px;
max-height: 400px;
}
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content-wrapper {
position: absolute;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
padding: calc(1.5rem + 3vw);
}
@media (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
padding: 3.75rem;
}
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
margin: 0;
padding: 0;
color: #fff;
font-size: calc(1.455rem + 2.46vw);
}
@media (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: 3.3rem;
}
}
@media screen and (min-width: 576px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: calc(1.455rem + 2.46vw);
}
}
@media screen and (min-width: 576px) and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: 3.3rem;
}
}
@media screen and (min-width: 768px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: calc(1.48125rem + 2.775vw);
}
}
@media screen and (min-width: 768px) and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: 3.5625rem;
}
}
@media screen and (min-width: 992px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: calc(1.48125rem + 2.775vw);
}
}
@media screen and (min-width: 992px) and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: 3.5625rem;
}
}
@media screen and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: calc(1.48125rem + 2.775vw);
}
}
@media screen and (min-width: 1200px) and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
font-size: 3.5625rem;
}
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-brief {
margin-top: 1rem;
color: #fff;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link {
margin-top: 1rem;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a {
text-decoration: none;
color: #fff;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:hover, .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:focus, .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {
opacity: .7;
}
@media screen and (max-width: 576px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
padding: calc(1.5rem + 3vw) calc(2.0625rem + 9.75vw);
}
}
@media screen and (max-width: 576px) and (min-width: 1200px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
padding: 3.75rem 9.375rem;
}
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {
overflow: hidden;
min-height: 300px;
max-height: 300px;
/* 1. No object-fit support: *//* 2. If supporting object-fit, overriding (1): */
}
@media screen and (min-width: 768px) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {
min-height: 600px;
max-height: 600px;
}
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .contextual-region {
position: unset;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
position: relative;
top: 50%;
width: 100vw;
height: 130vh;
padding-bottom: 0;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
right: 50%;
transform: translateY(-50%) translateX(50%);
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .field--type-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
top: 0;
width: 100%;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
position: absolute;
top: 0;
width: 100%;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
top: 0;
width: 100%;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
top: 0;
width: 100%;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
top: 0;
width: 100%;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
right: 0;
}
@media (max-aspect-ratio: 16/9) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
position: relative;
top: 50%;
width: 240vw;
height: 140vh;
padding-bottom: 0 !important;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
right: 50%;
transform: translateY(-50%) translateX(50%);
}
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
right: 0;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
}
[dir="ltr"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
left: 0;
}
[dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
right: 0;
}
}
@media screen and (min-width: 768px) {
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
position: unset;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
position: unset;
}
}
}
@media (max-aspect-ratio: 16/9) {
[dir=rtl] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
right: 0;
left: 0;
transform: translateY(-50%) translateX(0);
}
}
[dir="ltr"] [dir=rtl] .varbase-heroslider-media .slick-prev {
right: .63rem;
left: auto;
}
[dir="rtl"] [dir=rtl] .varbase-heroslider-media .slick-prev {
left: .63rem;
right: auto;
}
[dir="ltr"] [dir=rtl] .varbase-heroslider-media .slick-next {
left: .63rem;
right: auto;
}
[dir="rtl"] [dir=rtl] .varbase-heroslider-media .slick-next {
right: .63rem;
left: auto;
}
.paragraph.paragraph--color {
display: table;
}
.paragraph.paragraph--color > .paragraph__column {
padding-top: 2rem;
padding-bottom: 2rem;
}
.paragraph.paragraph--color + .paragraph > .paragraph__column {
padding-top: 2rem;
}
.vbp_color_01 {
color: #fff;
background-color: #338ec7;
}
.vbp_color_01 a {
color: #fff;
}
.vbp_color_01 a:hover, .vbp_color_01 a:focus, .vbp_color_01 a:active, .vbp_color_01 a.is-active, .vbp_color_01 a.active {
color: #fff;
}
.vbp_color_02 {
color: #fff;
background-color: #2c3e50;
}
.vbp_color_02 a {
color: #fff;
}
.vbp_color_02 a:hover, .vbp_color_02 a:focus, .vbp_color_02 a:active, .vbp_color_02 a.is-active, .vbp_color_02 a.active {
color: #fff;
}
.vbp_color_03 {
color: #fff;
background-color: #a4a4a4;
}
.vbp_color_03 a {
color: #fff;
}
.vbp_color_03 a:hover, .vbp_color_03 a:focus, .vbp_color_03 a:active, .vbp_color_03 a.is-active, .vbp_color_03 a.active {
color: #fff;
}
.vbp_color_04 {
color: #000;
background-color: #d3d3d3;
}
.vbp_color_04 a {
color: #000;
}
.vbp_color_04 a:hover, .vbp_color_04 a:focus, .vbp_color_04 a:active, .vbp_color_04 a.is-active, .vbp_color_04 a.active {
color: #000;
}
.vbp_color_05 {
color: #fff;
background-color: #cc3c2d;
}
.vbp_color_05 a {
color: #fff;
}
.vbp_color_05 a:hover, .vbp_color_05 a:focus, .vbp_color_05 a:active, .vbp_color_05 a.is-active, .vbp_color_05 a.active {
color: #fff;
}
#drupal-off-canvas .vbp_color_01 {
color: #fff;
background-color: #338ec7;
}
#drupal-off-canvas .vbp_color_01 a {
color: #fff;
}
#drupal-off-canvas .vbp_color_01 a:hover, #drupal-off-canvas .vbp_color_01 a:focus, #drupal-off-canvas .vbp_color_01 a:active, #drupal-off-canvas .vbp_color_01 a.is-active, #drupal-off-canvas .vbp_color_01 a.active {
color: #fff;
}
#drupal-off-canvas .vbp_color_02 {
color: #fff;
background-color: #2c3e50;
}
#drupal-off-canvas .vbp_color_02 a {
color: #fff;
}
#drupal-off-canvas .vbp_color_02 a:hover, #drupal-off-canvas .vbp_color_02 a:focus, #drupal-off-canvas .vbp_color_02 a:active, #drupal-off-canvas .vbp_color_02 a.is-active, #drupal-off-canvas .vbp_color_02 a.active {
color: #fff;
}
#drupal-off-canvas .vbp_color_03 {
color: #fff;
background-color: #a4a4a4;
}
#drupal-off-canvas .vbp_color_03 a {
color: #fff;
}
#drupal-off-canvas .vbp_color_03 a:hover, #drupal-off-canvas .vbp_color_03 a:focus, #drupal-off-canvas .vbp_color_03 a:active, #drupal-off-canvas .vbp_color_03 a.is-active, #drupal-off-canvas .vbp_color_03 a.active {
color: #fff;
}
#drupal-off-canvas .vbp_color_04 {
color: #000;
background-color: #d3d3d3;
}
#drupal-off-canvas .vbp_color_04 a {
color: #000;
}
#drupal-off-canvas .vbp_color_04 a:hover, #drupal-off-canvas .vbp_color_04 a:focus, #drupal-off-canvas .vbp_color_04 a:active, #drupal-off-canvas .vbp_color_04 a.is-active, #drupal-off-canvas .vbp_color_04 a.active {
color: #000;
}
#drupal-off-canvas .vbp_color_05 {
color: #fff;
background-color: #cc3c2d;
}
#drupal-off-canvas .vbp_color_05 a {
color: #fff;
}
#drupal-off-canvas .vbp_color_05 a:hover, #drupal-off-canvas .vbp_color_05 a:focus, #drupal-off-canvas .vbp_color_05 a:active, #drupal-off-canvas .vbp_color_05 a.is-active, #drupal-off-canvas .vbp_color_05 a.active {
color: #fff;
}
......@@ -43,3 +43,24 @@
margin: 0 0.3em;
}
}
.ajax-progress {
background-color: transparent !important;
border: 0 !important;
}
.ajax-progress-throbber {
.throbber {
background-color: transparent !important;
border: 0 !important;
}
.message {
background-color: transparent !important;
border: 0 !important;
}
}
.ajax-progress-fullscreen {
background-color: transparent !important;
}
// Varbase Hero Slider Media style.
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions"; // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/variables"; // Bootstrap variables.
@import "../../node_modules/bootstrap/scss/maps"; // Bootstrap maps.
@import "../../node_modules/bootstrap/scss/mixins"; // Bootstrap mixins.
@import "../base/variables"; // Vartheme variables.
@import "../base/mixins"; // Vartheme mixins.
@import "../../node_modules/bootstrap/scss/utilities"; // Bootstrap utilities.
// -----------------------------------------------------------------------------
.varbase-heroslider-media {
position: relative;
overflow: hidden;
.slick-slide {
.slide__caption {
position: absolute;
top: auto;
bottom: 20%;
left: 0;
-webkit-transition: opacity 1.25s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 0s cubic-bezier(.19,1,.22,1) 1.25s;
transition: opacity 1.25s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 0s cubic-bezier(.19,1,.22,1) 1.25s;
transition: transform 0s cubic-bezier(.19,1,.22,1) 1.25s,opacity 1.25s cubic-bezier(.19,1,.22,1) 0s;
transition: transform 0s cubic-bezier(.19,1,.22,1) 1.25s,opacity 1.25s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 0s cubic-bezier(.19,1,.22,1) 1.25s;
-webkit-transform: scale(.95);
transform: scale(.95);
opacity: 0;
filter: alpha(opacity=0);
}
.img-responsive {
-webkit-transition: -webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: -webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: transform 3s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.unpublished {
height: auto;
padding: 0;
}
}
.slick-active {
.slide__caption {
-webkit-transition: opacity 1.25s cubic-bezier(.19,1,.22,1) .5s,-webkit-transform 1.25s cubic-bezier(.19,1,.22,1) 0.5s;
transition: opacity 1.25s cubic-bezier(.19,1,.22,1) .5s,-webkit-transform 1.25s cubic-bezier(.19,1,.22,1) 0.5s;
transition: transform 1.25s cubic-bezier(.19,1,.22,1) .5s,opacity 1.25s cubic-bezier(.19,1,.22,1) 0.5s;
transition: transform 1.25s cubic-bezier(.19,1,.22,1) .5s,opacity 1.25s cubic-bezier(.19,1,.22,1) .5s,-webkit-transform 1.25s cubic-bezier(.19,1,.22,1) 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
.img-responsive {
-webkit-transition: -webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: -webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: transform 3s cubic-bezier(.19,1,.22,1) 0s;
transition: transform 3s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 3s cubic-bezier(.19,1,.22,1) 0s;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.slide__caption {
.slide__title {
a {
color: $hero-title-text-color;
}
}
.slick__text {
color: $hero-title-text-color;
}
}
.slick__arrow {
.slick-arrow::before {
color: $hero-title-text-color;
border-radius: 50%;
background-color: $hero-content-background-color2;
}
$top_max_value: math.div($hero-max-height, 2);
top: $hero-max-height;
transform: translateY(-$top_max_value);
@media screen and (min-width: map-get($grid-breakpoints, "md")) {
$top_min_value: math.div($hero-min-height-md, 2);
top: $hero-min-height-md;
transform: translateY(-$top_min_value);
}
}
.slick-prev {
@include rfs($hero-arrow-gutter, left);
right: auto;
}
.slick-next {
@include rfs($hero-arrow-gutter, right);
left: auto;
}
.slide__link {
@include margin(0.63rem auto);
a {
color: $hero-title-text-color;
}
}
.node--type-varbase-heroslider-media {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
min-height: $hero-min-height;
max-height: $hero-max-height;
@media screen and (min-width: map-get($grid-breakpoints, "md")) {
min-height: $hero-min-height-md;
max-height: $hero-max-height-md;
}
@media screen and (max-width: map-get($grid-breakpoints, "sm")) {
min-height: $hero-min-height-sm;
max-height: $hero-max-height-sm;
}
.hero-slide-content-wrapper {
position: absolute;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
.hero-slide-content {
@include padding($hero-container-v-padding);
.field--name-node-title {
h2,
h3 {
margin: 0;
padding: 0;
color: $hero-title-text-color;
@include font-size($hero-xlarge-title-font-size-xs);
@media screen and (min-width: map-get($grid-breakpoints, "sm")) {
@include font-size($hero-xlarge-title-font-size-sm);
}
@media screen and (min-width: map-get($grid-breakpoints, "md")) {
@include font-size($hero-xlarge-title-font-size-md);
}
@media screen and (min-width: map-get($grid-breakpoints, "lg")) {
@include font-size($hero-xlarge-title-font-size-lg);
}
@media screen and (min-width: map-get($grid-breakpoints, "xl")) {
@include font-size($hero-xlarge-title-font-size-xl);
}
}
}
.field--name-field-brief {
@include margin-top(1rem);
color: $hero-brief-text-color;
}
.field--name-field-link {
@include margin-top(1rem);
a {
text-decoration: none;
color: $hero-link-text-color;
&:hover,
&:focus,
&:active {
opacity: $hero-content-hover-opacity;
}
}
}
@media screen and (max-width: map-get($grid-breakpoints, "sm")) {
@include padding($hero-container-v-padding $hero-container-h-padding-sm);
}
}
.field--name-field-media-single {
overflow: hidden;
min-height: $hero-min-height;
max-height: $hero-max-height;
@media screen and (min-width: map-get($grid-breakpoints, "md")) {
min-height: $hero-min-height-md;
max-height: $hero-max-height-md;
}
.contextual-region{
position: unset;
}
.varbase-video-player {
&.embed-responsive {
position: relative;
top: 50%;
left: 50%;
width: 100vw;
height: 130vh;
padding-bottom: 0;
transform: translateY(-50%) translateX(-50%);
}
}
.field--type-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
top: 0;
left: 0;
width: 100%;
}
.media {
position: absolute;
top: 0;
left: 0;
width: 100%;
img {
top: 0;
left: 0;
width: 100%;
}
video {
top: 0;
left: 0;
width: 100%;
}
iframe {
top: 0;
left: 0;
width: 100%;
}
}
/* 1. No object-fit support: */
@media (max-aspect-ratio: #{"16/9"}) {
.varbase-video-player {
&.embed-responsive {
position: relative;
top: 50%;
left: 50%;
width: 240vw;
height: 140vh;
padding-bottom: 0 !important;
transform: translateY(-50%) translateX(-50%);
}
}
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
img {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.media {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
img {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
video {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
iframe {
position: absolute;
left: 0;
object-fit: cover;
}
}
}
@media screen and (min-width: map-get($grid-breakpoints, "md")) {
@supports (object-fit: cover) {
img {
position: unset;
}
.media {
img {
position: unset;
}
}
}
}
}
}
}
[dir="rtl"] .varbase-heroslider-media {
.node--type-varbase-heroslider-media {
.field--name-field-media-single {
@media (max-aspect-ratio: #{"16/9"}) {
.varbase-video-player {
&.embed-responsive {
right: 0;
left: 0;
transform: translateY(-50%) translateX(0);
}
}
}
}
}
.slick-prev {
@include rfs($hero-arrow-gutter, right);
left: auto;
}
.slick-next {
@include rfs($hero-arrow-gutter, left);
right: auto;
}
}
// Custom Varbase Bootstrap Paragraphs colors theme for Vartheme.
// -----------------------------------------------------------------------------
@import "../../node_modules/bootstrap/scss/functions"; // Bootstrap functions.
@import "../../node_modules/bootstrap/scss/variables"; // Bootstrap variables.
@import "../../node_modules/bootstrap/scss/maps"; // Bootstrap maps.
@import "../../node_modules/bootstrap/scss/mixins"; // Bootstrap mixins.
@import "../base/variables"; // Vartheme variables.
@import "../base/mixins"; // Vartheme mixins.
@import "../../node_modules/bootstrap/scss/utilities"; // Bootstrap utilities.
// -----------------------------------------------------------------------------
// Add display so color shows.
.paragraph.paragraph--color {
display: table;
}
// Adds padding to fill in color.
.paragraph.paragraph--color > .paragraph__column {
padding-top: 2rem;
padding-bottom: 2rem;
}
// Fills color on colorless .paragraph__column after color .paragraph__column.
.paragraph.paragraph--color + .paragraph > .paragraph__column {
padding-top: 2rem;
}
// Background colours;
// -----------------------------------------------------------------------------
// vbp_color_01: Blue
// vbp_color_02: Madison
// vbp_color_03: Dark Gray
// vbp_color_04: Light Gray
// vbp_color_05: Red
$vbp_color_01: #338ec7; // Blue
$vbp_color_02: #2c3e50; // Madison
$vbp_color_03: #a4a4a4; // Dark Gray
$vbp_color_04: #d3d3d3; // Light Gray
$vbp_color_05: #cc3c2d; // Red
// Foreground colours:
// -----------------------------------------------------------------------------
// vbp_foreground_color_01: White for background vbp_color_01 color.
// vbp_foreground_color_02: White for background vbp_color_02 color.
// vbp_foreground_color_03: White for background vbp_color_03 color.
// vbp_foreground_color_04: Black for background vbp_color_04 color.
// vbp_foreground_color_05: White for background vbp_color_05 color.
$vbp_foreground_color_01: #fff; // White
$vbp_foreground_color_02: #fff; // White
$vbp_foreground_color_03: #fff; // White
$vbp_foreground_color_04: #000; // Black
$vbp_foreground_color_05: #fff; // White
// Varbase Bootstrap Paragraphs color default template for the vbp_color_{NUM}
// we could copy this mixin and change it for other type of styling options.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_color($vbp_color_name, $vbp_background_color, $vbp_foreground_color) {
#{$vbp_color_name} {
color: $vbp_foreground_color;
background-color: $vbp_background_color;
a {
color: $vbp_foreground_color;
&:hover,
&:focus,
&:active,
&.is-active,
&.active {
color: $vbp_foreground_color;
}
}
}
}
// Varbase Bootstrap Paragraphs colors default template.
// This could be changed in your sub-theme, in the way you custom sites.
@mixin vbp_colors {
// Only listing 5 colors, this could work in a loop.
// or by writing the list of css color classes manually.
@include vbp_color(".vbp_color_01", $vbp_color_01, $vbp_foreground_color_01);
@include vbp_color(".vbp_color_02", $vbp_color_02, $vbp_foreground_color_02);
@include vbp_color(".vbp_color_03", $vbp_color_03, $vbp_foreground_color_03);
@include vbp_color(".vbp_color_04", $vbp_color_04, $vbp_foreground_color_04);
@include vbp_color(".vbp_color_05", $vbp_color_05, $vbp_foreground_color_05);
}
// Call the vbp_colors mixin for the front-end use.
@include vbp_colors;
// Add support for drupal off canvas editor and the layout builder settings try.
#drupal-off-canvas {
@include vbp_colors;
}
......@@ -6,13 +6,17 @@ framework:
# Bootstrap 5
bootstrap-styles:
css:
theme:
base:
css/base/bootstrap.base.css: {}
css/base/style.base.css: {}
layout:
css/layout/edge2edge.layout.css: {}
css/layout/equal-height.layout.css: {}
css/layout/print.layout.css: { media: print }
theme:
css/theme/header.theme.css: {}
css/theme/content.theme.css: {}
css/theme/footer.theme.css: {}
bootstrap-scripts:
dependencies:
......
......@@ -28,8 +28,6 @@ module.exports = {
"theme/header.theme": ["./scss/theme/header.theme.scss"],
"theme/maintenance-page.theme": ["./scss/theme/maintenance-page.theme.scss"],
"theme/content-moderation.theme": ["./scss/theme/content-moderation.theme.scss"],
"theme/varbase-heroslider-media.theme": ["./scss/theme/varbase-heroslider-media.theme.scss"],
"theme/vbp-colors.theme": ["./scss/theme/vbp-colors.theme.scss"],
},
output: {
path: path.resolve(__dirname, 'css'),
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment