landingpage/themes/app-landingpage/assets/scss/_box.scss

369 lines
11 KiB
SCSS
Raw Normal View History

2022-08-06 20:25:26 +02:00
.box {
border-radius: $border-radius;
background-color: $body-bg;
box-shadow: $box-shadow;
position: relative;
color: $body-color;
padding: $card-spacer-y $card-spacer-x;
&_stretch {
height: 100%;
&.box_flex {
flex-direction: row;
justify-content: flex-start;
align-items: center;
> .image-block {
width: 30%;
padding-right: 0;
padding-left: 0;
img {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
}
> div {
max-width: 70%;
padding-left: $spacer;
}
}
}
&_spaced {
margin-top: $spacer * 3;
}
&-column {
padding-top: $spacer;
min-height: 100px;
}
&_flex {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
height: 100%;
.box-inner {
flex: 1 0 auto;
&_end {
flex: 0 0 auto;
}
}
@media (min-width:$screen-sm) {
flex-direction: row;
align-items: center;
> .box-inner_flex {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 auto;
h3:last-child {
margin-bottom: 0;
}
}
}
}
.image-block {
max-width: 30%;
img {
min-width: 90px;
}
@media (min-width:$screen-sm) {
max-width: none;
&:first-child {
padding-right: $spacer * 1.25;
}
img {
min-width: 100px;
max-width: 160px;
}
}
}
&_slider {
z-index: 0;
.slick-list {
padding-top: $spacer;
padding-bottom: $spacer * 1.5;
}
&-caption {
display: flex;
justify-content: flex-end;
padding: 0 $spacer;
@media (min-width: $screen-lg){
padding: 0 $spacer * 2;
}
@media (min-width: 420px){
transform: translate3d(0, -38px, 0);
}
}
}
}
.image-block {
text-align: center;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.text-center > & {
margin-left: auto;
margin-right: auto;
text-align: inherit;
img {
margin-left: auto;
margin-right: auto;
}
}
.section-feature-listing &,
.box & {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
}
.image-overflow {
position: absolute;
height: 100%;
min-height: 100%;
width: auto;
top: 0;
&-spacer {
position: static;
display: block;
width: 100%;
height: auto;
}
&-container {
position: relative;
margin-top: $spacer;
margin-bottom: $spacer * 1.5;
@media (min-width: $screen-md){
margin-top: 0.5 * $spacer;
margin-bottom: 0.5 * $spacer;
}
}
&_left {
right: 0.5rem;
}
}
.text-block {
.numeration {
color: $primary;
font-size: $h5-font-size;
font-weight: $font-weight-bold;
line-height: $headings-line-height * $h4-font-size;
}
&_indented {
padding-left: $grid-gutter-width;
position: relative;
@media (min-width: $screen-md){
padding-right: $card-spacer-x;
}
.numeration {
position: absolute;
left: 0;
img.icon {
position: absolute;
left: -4px;
width: auto;
height: auto;
max-height: 32px;
top: -2px;
display: inline-block;
}
}
}
&_spaced {
margin-top: $spacer * 2.5;
margin-bottom: $spacer * 2.5;
&-top {
margin-top: $spacer * 3.25;
}
&-bottom {
margin-bottom: $spacer * 3.25;
}
}
}
.col-text {
order: 1;
margin-bottom: $spacer * 2;
}
.col-img {
order: 0;
}
@media(min-width: $screen-md){
.col-img,
.col-text {
order: 0;
}
}
p:not([class]) + .btn {
&.btn-primary,
&.btn-secondary {
margin-top: $spacer * 0.5;
}
}
.container_flex {
display: block;
.side-menu {
transform: translate3d(-100%, 0, 0);
width: 50vw;
max-width: 240px;
position: fixed;
@media (max-width: ($screen-md - 1)){
padding-left: $spacer * 1.25;
padding-top: 0.5* $spacer;
z-index: 1;
transition: transform 0.3s ease-in-out;
height: 100vh;
top: 0;
&:before {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
&.active {
transform: translate3d(0, 0, 0);
z-index: 1;
height: 100vh;
left: 0;
top: 0;
padding-top: 130px;
background-color: $body-bg;
box-shadow: $box-shadow;
&:after,
&:before {
position: fixed;
content: "";
height: 100vh;
width: 300vw;
background-color: $dark;
opacity: 0.2;
display: block;
top: 0;
z-index: -1;
left: 0;
}
&:after {
position: fixed;
background-color: $body-bg;
width: 50vw;
max-width: 240px;
opacity: 1;
}
.menu-close .btn-close {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='matrix(-1 0 0 1 63 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M37.415 40c.473 0 .881-.175 1.222-.525.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343l-2.727-2.92h12.329c.492 0 .909-.185 1.25-.555.341-.37.511-.808.511-1.314s-.171-.944-.511-1.314c-.341-.37-.757-.555-1.25-.555h-12.329l2.784-2.92c.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343-.341-.35-.758-.525-1.25-.525s-.909.175-1.25.525l-5.682 6.131c-.341.35-.511.798-.511 1.343 0 .506.171.934.511 1.285l5.682 6.19c.341.35.748.525 1.222.525z' fill='%23000' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
}
}
.menu-close {
position: absolute;
bottom: 0;
margin-left: 0;
left: 100%;
transform: translate3d(0, 0, 0);
width: 80px;
height: 80px;
cursor: pointer;
z-index: 2;
.btn-close {
width: 80px;
height: 80px;
position: static;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='translate(17 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M42.585 40c-.473 0-.881-.175-1.222-.525-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343l2.727-2.92h-12.329c-.492 0-.909-.185-1.25-.555-.341-.37-.511-.808-.511-1.314s.171-.944.511-1.314c.341-.37.757-.555 1.25-.555h12.329l-2.784-2.92c-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343.341-.35.758-.525 1.25-.525s.909.175 1.25.525l5.682 6.131c.341.35.511.798.511 1.343 0 .506-.171.934-.511 1.285l-5.682 6.19c-.341.35-.748.525-1.222.525z' fill='%23000'/%3e%3c/g%3e%3c/svg%3e");
&,
&:hover,
&:active,
&:focus {
outline: none;
box-shadow: none;
border: none;
}
}
}
}
.nav-link {
cursor: pointer;
position: relative;
font-weight: $font-weight-normal;
color: inherit;
text-decoration: none;
&:before {
top: auto;
left: auto;
position: absolute;
top: $spacer * 0.5;
bottom: $spacer * 0.5;
border-left: 2px solid $primary-light;
left: 0;
}
&:hover,
&:focus,
&:active,
&.active {
color: inherit;
&:before { content: ""}
}
&:focus,
&:active,
&.active {
font-weight: $font-weight-bold;
}
}
}
.main {
width: 100%;
padding-top: $spacer * 2.125;
z-index: 0;
position: relative;
}
@media (min-width: $screen-md){
display: flex;
padding-top: 0;
.side-menu {
transform: translate3d(0, 0, 0);
width: 220px;
position: sticky;
max-height: 100vh;
top: 0;
padding-top: $spacer * 2;
left: auto;
.menu-toggle,
.menu-close {
display: none;
}
}
.main {
padding-top: $spacer * 2;
margin-left: $grid-gutter-width;
}
}
}