369 lines
11 KiB
SCSS
369 lines
11 KiB
SCSS
.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;
|
|
}
|
|
}
|
|
} |