781 lines
24 KiB
SCSS
781 lines
24 KiB
SCSS
// SCSS-Variablen
|
|
$background: #FCFCF8;
|
|
$dominant-color: #DDE5B6;
|
|
$primary-color: #A98467;
|
|
$secondary-color: #6C584C;
|
|
$success-color: #23BA74;
|
|
$danger-color: #BC2130;
|
|
$warning-color: #DDA600;
|
|
$info-color: #0BB0D2;
|
|
$background-text: #000000;
|
|
$dominant-text: #000000;
|
|
$primary-text: #000000;
|
|
$secondary-text: #FFFFFF;
|
|
$success-text: #FFFFFF;
|
|
$danger-text: #FFFFFF;
|
|
$warning-text: #000000;
|
|
$info-text: #FFFFFF;
|
|
|
|
.btn {
|
|
border-width: 2px;
|
|
}
|
|
img,
|
|
.card-wrap,
|
|
.card-wrapper,
|
|
.video-wrapper,
|
|
.mbr-figure iframe,
|
|
.google-map iframe,
|
|
.slide-content,
|
|
.plan,
|
|
.card,
|
|
.item-wrapper {
|
|
border-radius: 2rem !important;
|
|
}
|
|
.video-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
body, #app {
|
|
font-family: 'Inter Tight';
|
|
/* background: color-mix(in srgb, $dominant-color 10%, transparent); */
|
|
}
|
|
|
|
.display-1 {
|
|
font-family: var(--display1-font);
|
|
font-size: calc(var(--display1-size, 5) * 1rem);
|
|
line-height: 1;
|
|
}
|
|
.display-2 {
|
|
font-family: var(--display2-font);
|
|
font-size: calc(var(--display2-size, 4) * 1rem);
|
|
line-height: 1.1;
|
|
}
|
|
.display-4 {
|
|
font-family: var(--display4-font);
|
|
font-size: calc(var(--display4-size, 1.4) * 1rem);
|
|
line-height: 1.5;
|
|
}
|
|
.display-5 {
|
|
font-family: var(--display5-font);
|
|
font-size: calc(var(--display5-size, 2) * 1rem);
|
|
line-height: 1.5;
|
|
}
|
|
.display-7 {
|
|
font-family: var(--display7-font);
|
|
font-size: calc(var(--display7-size, 1.4) * 1rem);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.display-1 > .mbr-iconfont {
|
|
font-size: calc(var(--display1-size, 5) * 1.25rem);
|
|
}
|
|
.display-2 > .mbr-iconfont {
|
|
font-size: calc(var(--display2-size, 4) * 1.25rem);
|
|
}
|
|
.display-4 > .mbr-iconfont {
|
|
font-size: calc(var(--display4-size, 1.4) * 1.25rem);
|
|
}
|
|
.display-5 > .mbr-iconfont {
|
|
font-size: calc(var(--display5-size, 2) * 1.25rem);
|
|
}
|
|
.display-7 > .mbr-iconfont {
|
|
font-size: calc(var(--display7-size, 1.4) * 1.25rem);
|
|
}
|
|
/* ---- Fluid typography for mobile devices ---- */
|
|
/* 1.4 - font scale ratio ( bootstrap == 1.42857 ) */
|
|
/* 100vw - current viewport width */
|
|
/* (48 - 20) 48 == 48rem == 768px, 20 == 20rem == 320px(minimal supported viewport) */
|
|
/* 0.65 - min scale variable, may vary */
|
|
@media (max-width: 992px) {
|
|
.display-1 {
|
|
font-size: calc(var(--display1-size, 5) * 0.8rem);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.display-1 {
|
|
--display1-size_min: calc(var(--display1-size, 5) - (var(--display1-size, 5) - 1) * 0.65);
|
|
font-size: calc(var(--display1-size, 5) * 0.7rem);
|
|
font-size: calc(var(--display1-size_min) * 1rem + (var(--display1-size, 5) - var(--display1-size_min)) * ((100vw - 20rem) / (48 - 20)));
|
|
line-height: calc(1.1 * (var(--display1-size_min) * 1rem + (var(--display1-size, 5) - var(--display1-size_min)) * ((100vw - 20rem) / (48 - 20))));
|
|
}
|
|
.display-2 {
|
|
--display2-size_min: calc(var(--display2-size, 4) - (var(--display2-size, 4) - 1) * 0.65);
|
|
font-size: calc(var(--display2-size, 4) * 0.8rem);
|
|
font-size: calc(var(--display2-size_min) * 1rem + (var(--display2-size, 4) - var(--display2-size_min)) * ((100vw - 20rem) / (48 - 20)));
|
|
line-height: calc(1.3 * (var(--display2-size_min) * 1rem + (var(--display2-size, 4) - var(--display2-size_min)) * ((100vw - 20rem) / (48 - 20))));
|
|
}
|
|
.display-4 {
|
|
--display4-size_min: calc(var(--display4-size, 1.4) - (var(--display4-size, 1.4) - 1) * 0.65);
|
|
font-size: calc(var(--display4-size, 1.4) * 0.8rem);
|
|
font-size: calc(var(--display4-size_min) * 1rem + (var(--display4-size, 1.4) - var(--display4-size_min)) * ((100vw - 20rem) / (48 - 20)));
|
|
line-height: calc(1.4 * (var(--display4-size_min) * 1rem + (var(--display4-size, 1.4) - var(--display4-size_min)) * ((100vw - 20rem) / (48 - 20))));
|
|
}
|
|
.display-5 {
|
|
--display5-size_min: calc(var(--display5-size, 2) - (var(--display5-size, 2) - 1) * 0.65);
|
|
font-size: calc(var(--display5-size, 2) * 0.8rem);
|
|
font-size: calc(var(--display5-size_min) * 1rem + (var(--display5-size, 2) - var(--display5-size_min)) * ((100vw - 20rem) / (48 - 20)));
|
|
line-height: calc(1.4 * (var(--display5-size_min) * 1rem + (var(--display5-size, 2) - var(--display5-size_min)) * ((100vw - 20rem) / (48 - 20))));
|
|
}
|
|
.display-7 {
|
|
--display7-size_min: calc(var(--display7-size, 1.4) - (var(--display7-size, 1.4) - 1) * 0.65);
|
|
font-size: calc(var(--display7-size, 1.4) * 0.8rem);
|
|
font-size: calc(var(--display7-size_min) * 1rem + (var(--display7-size, 1.4) - var(--display7-size_min)) * ((100vw - 20rem) / (48 - 20)));
|
|
line-height: calc(1.4 * (var(--display7-size_min) * 1rem + (var(--display7-size, 1.4) - var(--display7-size_min)) * ((100vw - 20rem) / (48 - 20))));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) and (max-width: 1400px) {
|
|
.display-1 {
|
|
--display1-size_min: calc(var(--display1-size, 5) - (var(--display1-size, 5) - 1) * 0.65);
|
|
font-size: calc(var(--display1-size, 5) * 0.7rem);
|
|
font-size: calc(var(--display1-size_min) * 1rem + (var(--display1-size, 5) - var(--display1-size_min)) * ((100vw - 62rem) / (87 - 62)));
|
|
line-height: calc( 1.1 * (var(--display1-size_min) * 1rem + (var(--display1-size, 5) - var(--display1-size_min)) * ((100vw - 62rem) / (87 - 62))));
|
|
}
|
|
|
|
.display-2 {
|
|
--display2-size_min: calc(var(--display2-size, 4) - (var(--display2-size, 4) - 1) * 0.65);
|
|
font-size: calc(var(--display2-size, 4) * 0.8rem);
|
|
font-size: calc(var(--display2-size_min) * 1rem + (var(--display2-size, 4) - var(--display2-size_min)) * ((100vw - 62rem) / (87 - 62)));
|
|
line-height: calc(1.3 * (var(--display2-size_min) * 1rem + (var(--display2-size, 4) - var(--display2-size_min)) * ((100vw - 62rem) / (87 - 62))));
|
|
}
|
|
|
|
.display-4 {
|
|
--display4-size_min: calc(var(--display4-size, 1.4) - (var(--display4-size, 1.4) - 1) * 0.65);
|
|
font-size: calc(var(--display4-size, 1.4) * 0.8rem);
|
|
font-size: calc(var(--display4-size_min) * 1rem + (var(--display4-size, 1.4) - var(--display4-size_min)) * ((100vw - 62rem) / (87 - 62)));
|
|
line-height: calc(1.4 * (var(--display4-size_min) * 1rem + (var(--display4-size, 1.4) - var(--display4-size_min)) * ((100vw - 62rem) / (87 - 62))));
|
|
}
|
|
|
|
.display-5 {
|
|
--display5-size_min: calc(var(--display5-size, 2) - (var(--display5-size, 2) - 1) * 0.65);
|
|
font-size: calc(var(--display5-size, 2) * 0.8rem);
|
|
font-size: calc(var(--display5-size_min) * 1rem + (var(--display5-size, 2) - var(--display5-size_min)) * ((100vw - 62rem) / (87 - 62)));
|
|
line-height: calc(1.4 * (var(--display5-size_min) * 1rem + (var(--display5-size, 2) - var(--display5-size_min)) * ((100vw - 62rem) / (87 - 62))));
|
|
}
|
|
|
|
.display-7 {
|
|
--display7-size_min: calc(var(--display7-size, 1.4) - (var(--display7-size, 1.4) - 1) * 0.65);
|
|
font-size: calc(var(--display7-size, 1.4) * 0.8rem);
|
|
font-size: calc(var(--display7-size_min) * 1rem + (var(--display7-size, 1.4) - var(--display7-size_min)) * ((100vw - 62rem) / (87 - 62)));
|
|
line-height: calc(1.4 * (var(--display7-size_min) * 1rem + (var(--display7-size, 1.4) - var(--display7-size_min)) * ((100vw - 62rem) / (87 - 62))));
|
|
}
|
|
}
|
|
/* Buttons */
|
|
.btn {
|
|
padding: 1.25rem 2rem;
|
|
border-radius: 4px;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
}
|
|
.btn-sm {
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 4px;
|
|
}
|
|
.btn-md {
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 4px;
|
|
}
|
|
.btn-lg {
|
|
padding: 1.25rem 2rem;
|
|
border-radius: 4px;
|
|
}
|
|
.bg-primary {
|
|
background-color: $primary-color !important;
|
|
}
|
|
.btn-secondary {
|
|
background-color: $secondary-color !important;
|
|
}
|
|
.bg-success {
|
|
background-color: $success-color !important;
|
|
}
|
|
.bg-info {
|
|
background-color: $info-color !important;
|
|
}
|
|
.bg-warning {
|
|
background-color: $warning-color !important;
|
|
}
|
|
.bg-danger {
|
|
background-color: $danger-color !important;
|
|
}
|
|
.btn-primary,
|
|
.btn-primary:active {
|
|
background-color: $primary-color !important;
|
|
border-color: $primary-color !important;
|
|
color: $primary-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-primary:hover,
|
|
.btn-primary:focus,
|
|
.btn-primary.focus,
|
|
.btn-primary.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$primary-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$primary-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-primary.disabled,
|
|
.btn-primary:disabled {
|
|
color: $primary-text !important;
|
|
background-color: color-mix(in srgb,$primary-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$primary-color,#000 40%) !important;
|
|
}
|
|
.btn-secondary,
|
|
.btn-secondary:active {
|
|
background-color: $secondary-color !important;
|
|
border-color: $secondary-color !important;
|
|
color: $secondary-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-secondary:hover,
|
|
.btn-secondary:focus,
|
|
.btn-secondary.focus,
|
|
.btn-secondary.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$secondary-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$secondary-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-secondary.disabled,
|
|
.btn-secondary:disabled {
|
|
color: $secondary-text !important;
|
|
background-color: color-mix(in srgb,$secondary-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$secondary-color,#000 40%) !important;
|
|
}
|
|
.btn-info,
|
|
.btn-info:active {
|
|
background-color: $info-color !important;
|
|
border-color: $info-color !important;
|
|
color: $info-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-info:hover,
|
|
.btn-info:focus,
|
|
.btn-info.focus,
|
|
.btn-info.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$info-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$info-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-info.disabled,
|
|
.btn-info:disabled {
|
|
color: $info-text !important;
|
|
background-color: color-mix(in srgb,$info-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$info-color,#000 40%) !important;
|
|
}
|
|
.btn-success,
|
|
.btn-success:active {
|
|
background-color: $success-color !important;
|
|
border-color: $success-color !important;
|
|
color: $success-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-success:hover,
|
|
.btn-success:focus,
|
|
.btn-success.focus,
|
|
.btn-success.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$success-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$success-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-success.disabled,
|
|
.btn-success:disabled {
|
|
color: $success-text !important;
|
|
background-color: color-mix(in srgb,$success-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$success-color,#000 40%) !important;
|
|
}
|
|
.btn-warning,
|
|
.btn-warning:active {
|
|
background-color: $warning-color !important;
|
|
border-color: $warning-color !important;
|
|
color: $warning-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-warning:hover,
|
|
.btn-warning:focus,
|
|
.btn-warning.focus,
|
|
.btn-warning.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$warning-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$warning-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-warning.disabled,
|
|
.btn-warning:disabled {
|
|
color: $warning-text !important;
|
|
background-color: color-mix(in srgb,$warning-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$warning-color,#000 40%) !important;
|
|
}
|
|
.btn-danger,
|
|
.btn-danger:active {
|
|
background-color: $danger-color !important;
|
|
border-color: $danger-color !important;
|
|
color: $danger-text !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-danger:hover,
|
|
.btn-danger:focus,
|
|
.btn-danger.focus,
|
|
.btn-danger.active {
|
|
color: inherit;
|
|
background-color: color-mix(in srgb,$danger-color,#000 20%) !important;
|
|
border-color: color-mix(in srgb,$danger-color,#000 20%) !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-danger.disabled,
|
|
.btn-danger:disabled {
|
|
color: $danger-text !important;
|
|
background-color: color-mix(in srgb,$danger-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$danger-color,#000 40%) !important;
|
|
}
|
|
.btn-white,
|
|
.btn-white:active {
|
|
background-color: #fafafa !important;
|
|
border-color: #fafafa !important;
|
|
color: #7a7a7a !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-white:hover,
|
|
.btn-white:focus,
|
|
.btn-white.focus,
|
|
.btn-white.active {
|
|
color: #4f4f4f !important;
|
|
background-color: #cfcfcf !important;
|
|
border-color: #cfcfcf !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-white.disabled,
|
|
.btn-white:disabled {
|
|
color: #7a7a7a !important;
|
|
background-color: #cfcfcf !important;
|
|
border-color: #cfcfcf !important;
|
|
}
|
|
.btn-black,
|
|
.btn-black:active {
|
|
background-color: #232323 !important;
|
|
border-color: #232323 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-black:hover,
|
|
.btn-black:focus,
|
|
.btn-black.focus,
|
|
.btn-black.active {
|
|
color: #ffffff !important;
|
|
background-color: #000000 !important;
|
|
border-color: #000000 !important;
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-black.disabled,
|
|
.btn-black:disabled {
|
|
color: #ffffff !important;
|
|
background-color: #000000 !important;
|
|
border-color: #000000 !important;
|
|
}
|
|
.btn-primary-outline,
|
|
.btn-primary-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
}
|
|
.btn-primary-outline:hover,
|
|
.btn-primary-outline:focus,
|
|
.btn-primary-outline.focus,
|
|
.btn-primary-outline.active {
|
|
color: color-mix(in srgb,$primary-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$primary-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-primary-outline.disabled,
|
|
.btn-primary-outline:disabled {
|
|
color: $primary-text !important;
|
|
background-color: color-mix(in srgb,$primary-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$primary-color,#000 40%) !important;
|
|
}
|
|
.btn-secondary-outline,
|
|
.btn-secondary-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $secondary-color;
|
|
color: $secondary-color;
|
|
}
|
|
.btn-secondary-outline:hover,
|
|
.btn-secondary-outline:focus,
|
|
.btn-secondary-outline.focus,
|
|
.btn-secondary-outline.active {
|
|
color: color-mix(in srgb,$secondary-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$secondary-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-secondary-outline.disabled,
|
|
.btn-secondary-outline:disabled {
|
|
color: $secondary-text !important;
|
|
background-color: color-mix(in srgb,$secondary-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$secondary-color,#000 40%) !important;
|
|
}
|
|
.btn-info-outline,
|
|
.btn-info-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $info-color;
|
|
color: $info-color;
|
|
}
|
|
.btn-info-outline:hover,
|
|
.btn-info-outline:focus,
|
|
.btn-info-outline.focus,
|
|
.btn-info-outline.active {
|
|
color: color-mix(in srgb,$info-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$info-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-info-outline.disabled,
|
|
.btn-info-outline:disabled {
|
|
color: $info-text !important;
|
|
background-color: color-mix(in srgb,$info-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$info-color,#000 40%) !important;
|
|
}
|
|
.btn-success-outline,
|
|
.btn-success-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $success-color;
|
|
color: $success-color;
|
|
}
|
|
.btn-success-outline:hover,
|
|
.btn-success-outline:focus,
|
|
.btn-success-outline.focus,
|
|
.btn-success-outline.active {
|
|
color: color-mix(in srgb,$success-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$success-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-success-outline.disabled,
|
|
.btn-success-outline:disabled {
|
|
color: $success-text !important;
|
|
background-color: color-mix(in srgb,$success-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$success-color,#000 40%) !important;
|
|
}
|
|
.btn-warning-outline,
|
|
.btn-warning-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $warning-color;
|
|
color: $warning-color;
|
|
}
|
|
.btn-warning-outline:hover,
|
|
.btn-warning-outline:focus,
|
|
.btn-warning-outline.focus,
|
|
.btn-warning-outline.active {
|
|
color: color-mix(in srgb,$warning-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$warning-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-warning-outline.disabled,
|
|
.btn-warning-outline:disabled {
|
|
color: $warning-text !important;
|
|
background-color: color-mix(in srgb,$warning-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$warning-color,#000 40%) !important;
|
|
}
|
|
.btn-danger-outline,
|
|
.btn-danger-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: $danger-color;
|
|
color: $danger-color;
|
|
}
|
|
.btn-danger-outline:hover,
|
|
.btn-danger-outline:focus,
|
|
.btn-danger-outline.focus,
|
|
.btn-danger-outline.active {
|
|
color: color-mix(in srgb,$danger-color,#000 20%) !important;
|
|
background-color: transparent!important;
|
|
border-color: color-mix(in srgb,$danger-color,#000 20%) !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-danger-outline.disabled,
|
|
.btn-danger-outline:disabled {
|
|
color: $danger-text !important;
|
|
background-color: color-mix(in srgb,$danger-color,#000 40%) !important;
|
|
border-color: color-mix(in srgb,$danger-color,#000 40%) !important;
|
|
}
|
|
.btn-black-outline,
|
|
.btn-black-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: #232323;
|
|
color: #232323;
|
|
}
|
|
.btn-black-outline:hover,
|
|
.btn-black-outline:focus,
|
|
.btn-black-outline.focus,
|
|
.btn-black-outline.active {
|
|
color: #000000 !important;
|
|
background-color: transparent!important;
|
|
border-color: #000000 !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-black-outline.disabled,
|
|
.btn-black-outline:disabled {
|
|
color: #ffffff !important;
|
|
background-color: #232323 !important;
|
|
border-color: #232323 !important;
|
|
}
|
|
.btn-white-outline,
|
|
.btn-white-outline:active {
|
|
background-color: transparent !important;
|
|
border-color: #fafafa;
|
|
color: #fafafa;
|
|
}
|
|
.btn-white-outline:hover,
|
|
.btn-white-outline:focus,
|
|
.btn-white-outline.focus,
|
|
.btn-white-outline.active {
|
|
color: #cfcfcf !important;
|
|
background-color: transparent!important;
|
|
border-color: #cfcfcf !important;
|
|
box-shadow: none!important;
|
|
}
|
|
.btn-white-outline.disabled,
|
|
.btn-white-outline:disabled {
|
|
color: #7a7a7a !important;
|
|
background-color: #fafafa !important;
|
|
border-color: #fafafa !important;
|
|
}
|
|
.text-primary {
|
|
color: $primary-text !important;
|
|
}
|
|
.text-secondary {
|
|
color: $secondary-text !important;
|
|
}
|
|
.text-success {
|
|
color: $success-text !important;
|
|
}
|
|
.text-info {
|
|
color: $info-text !important;
|
|
}
|
|
.text-warning {
|
|
color: $warning-text !important;
|
|
}
|
|
.text-danger {
|
|
color: $danger-text !important;
|
|
}
|
|
.text-white {
|
|
color: #fafafa !important;
|
|
}
|
|
.text-black {
|
|
color: #232323 !important;
|
|
}
|
|
a.text-primary:hover,
|
|
a.text-primary:focus,
|
|
a.text-primary.active {
|
|
color: color-mix(in srgb,$primary-color,#000 20%);
|
|
}
|
|
a.text-secondary:hover,
|
|
a.text-secondary:focus,
|
|
a.text-secondary.active {
|
|
color: color-mix(in srgb,$secondary-color,#000 20%);
|
|
}
|
|
a.text-success:hover,
|
|
a.text-success:focus,
|
|
a.text-success.active {
|
|
color: color-mix(in srgb,$success-color,#000 20%);
|
|
}
|
|
a.text-info:hover,
|
|
a.text-info:focus,
|
|
a.text-info.active {
|
|
color: color-mix(in srgb,$info-color,#000 20%);
|
|
}
|
|
a.text-warning:hover,
|
|
a.text-warning:focus,
|
|
a.text-warning.active {
|
|
color: color-mix(in srgb,$warning-color,#000 20%);
|
|
}
|
|
a.text-danger:hover,
|
|
a.text-danger:focus,
|
|
a.text-danger.active {
|
|
color: color-mix(in srgb,$danger-color,#000 20%);
|
|
}
|
|
a.text-white:hover,
|
|
a.text-white:focus,
|
|
a.text-white.active {
|
|
color: color-mix(in srgb,#fafafa,#000 20%);
|
|
}
|
|
a.text-black:hover,
|
|
a.text-black:focus,
|
|
a.text-black.active {
|
|
color: color-mix(in srgb,#232323,#000 20%);
|
|
}
|
|
body[data-underlined-links="true"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
|
|
transition: 0.2s;
|
|
position: relative;
|
|
background-image: linear-gradient(currentColor 50%, currentColor 50%);
|
|
background-size: 10000px 2px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 1.2em;
|
|
}
|
|
body[data-underlined-links="false"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption){
|
|
position: relative;
|
|
background-image: transparent;
|
|
background-size: 10000px 2px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0px 1.2em;
|
|
background-position: -10000px 1.2em;
|
|
}
|
|
body[data-underlined-links="false"] #app a[class*="text-"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption):hover{
|
|
transition: background-position 2s ease-in-out;
|
|
background-image: linear-gradient(currentColor 50%, currentColor 50%);
|
|
background-position: 0px 1.2em;
|
|
}
|
|
body[data-is-rounded-buttons="true"] #app .nav-tabs .nav-link {
|
|
border-radius: 100px !important;
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
color: $primary-color;
|
|
}
|
|
.nav-tabs .nav-link:not(.active) {
|
|
color: #232323;
|
|
}
|
|
.alert-success {
|
|
background-color: $success-color;
|
|
}
|
|
.alert-info {
|
|
background-color: $info-color;
|
|
}
|
|
.alert-warning {
|
|
background-color: $warning-color;
|
|
}
|
|
.alert-danger {
|
|
background-color: $danger-color;
|
|
}
|
|
|
|
.mbr-section-btn .btn:not(.btn-form) {
|
|
border-radius: 100px;
|
|
}
|
|
.mbr-gallery-filter li a {
|
|
border-radius: 100px !important;
|
|
}
|
|
|
|
.mbr-gallery-filter li.active .btn {
|
|
background-color: $primary-color;
|
|
border-color: $primary-color;
|
|
color: #ffffff;
|
|
}
|
|
.mbr-gallery-filter li.active .btn:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
a,
|
|
a:hover {
|
|
color: $primary-color;
|
|
}
|
|
|
|
:root[data-is-scroll-to-top-buttons="true"][data-is-rounded-buttons="true"] #scrollToTop a{
|
|
border-radius: 100px;
|
|
}
|
|
:root[data-is-scroll-to-top-buttons="false"] .scrollToTop_wraper{
|
|
display: none;
|
|
}
|
|
|
|
.form-control {
|
|
font-family: var(--display1-font);
|
|
font-size: 1.4rem;
|
|
line-height: 1.3;
|
|
font-weight: 400;
|
|
border-radius: 40px !important;
|
|
}
|
|
.form-control > .mbr-iconfont {
|
|
font-size: 1.375rem;
|
|
}
|
|
.form-control:hover,
|
|
.form-control:focus {
|
|
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 3px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;
|
|
border-color: $primary-color !important;
|
|
}
|
|
.form-control:-webkit-input-placeholder {
|
|
font-family: var(--display1-font);
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
}
|
|
.form-control:-webkit-input-placeholder > .mbr-iconfont {
|
|
font-size: 1.375rem;
|
|
}
|
|
blockquote {
|
|
border-color: $primary-color;
|
|
}
|
|
/* Forms */
|
|
.jq-selectbox li:hover,
|
|
.jq-selectbox li.selected {
|
|
background-color: $primary-color;
|
|
color: #ffffff;
|
|
}
|
|
.jq-number__spin {
|
|
transition: 0.25s ease;
|
|
}
|
|
.jq-number__spin:hover {
|
|
border-color: $primary-color;
|
|
}
|
|
.jq-selectbox .jq-selectbox__trigger-arrow,
|
|
.jq-number__spin.minus:after,
|
|
.jq-number__spin.plus:after {
|
|
transition: 0.4s;
|
|
border-top-color: #353535;
|
|
border-bottom-color: #353535;
|
|
}
|
|
.jq-selectbox:hover .jq-selectbox__trigger-arrow,
|
|
.jq-number__spin.minus:hover:after,
|
|
.jq-number__spin.plus:hover:after {
|
|
border-top-color: $primary-color;
|
|
border-bottom-color: $primary-color;
|
|
}
|
|
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
|
|
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
|
|
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
|
|
color: #ffffff !important;
|
|
background-color: $primary-color !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
|
|
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
|
|
color: #000000 !important;
|
|
background: $secondary-color !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.lazy-bg {
|
|
background-image: none !important;
|
|
}
|
|
.lazy-placeholder:not(section),
|
|
.lazy-none {
|
|
display: block;
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
iframe.lazy-placeholder,
|
|
.lazy-placeholder:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: transparent no-repeat center;
|
|
background-size: contain;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' stroke='%236592e6' %3e%3cg fill='none' fill-rule='evenodd'%3e%3cg transform='translate(16 16)' stroke-width='2'%3e%3ccircle stroke-opacity='.5' cx='16' cy='16' r='16'/%3e%3cpath d='M32 16c0-9.94-8.06-16-16-16'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='1s' repeatCount='indefinite'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
section.lazy-placeholder:after {
|
|
opacity: 0.5;
|
|
}
|
|
body, html, #app {
|
|
overflow-x: hidden;
|
|
}
|
|
a {
|
|
transition: color 0.6s;
|
|
}
|
|
.mbr-fullscreen{
|
|
overflow: hidden;
|
|
} |