WIP Debootstrapify
This commit is contained in:
Björn Fromme
BIN
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
@@ -22,11 +22,17 @@ const presets = {
|
||||
...defaultOptions,
|
||||
rewind: true,
|
||||
pagination: true,
|
||||
arrows: true,
|
||||
gap: 0,
|
||||
classes: {
|
||||
pagination: 'slider-pagination',
|
||||
page: 'slider-pagination__dot',
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
pagination: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
teasers: {
|
||||
...defaultOptions,
|
||||
@@ -37,27 +43,15 @@ const presets = {
|
||||
breakpoints: {
|
||||
1200: {
|
||||
perPage: 4,
|
||||
padding: {
|
||||
right: '2rem',
|
||||
},
|
||||
},
|
||||
1024: {
|
||||
perPage: 3,
|
||||
padding: {
|
||||
right: '2rem',
|
||||
},
|
||||
},
|
||||
960: {
|
||||
perPage: 2,
|
||||
padding: {
|
||||
right: '2rem',
|
||||
},
|
||||
},
|
||||
640: {
|
||||
perPage: 1,
|
||||
padding: {
|
||||
right: '2rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
-3
@@ -14,9 +14,6 @@ export default uid => ({
|
||||
onList() {
|
||||
return -1 !== this.$store.watchlist.indexOf(this.uid)
|
||||
},
|
||||
icon() {
|
||||
return this.onList() ? 'fa-minus-circle' : 'fa-plus-circle'
|
||||
},
|
||||
label() {
|
||||
return this.onList() ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
|
||||
},
|
||||
|
||||
Binary file not shown.
@@ -1,18 +0,0 @@
|
||||
.meets_bootshaus {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 8px;
|
||||
@include size(100px 33px);
|
||||
|
||||
@include mq($from: desktop) {
|
||||
left: 80px;
|
||||
top: 180px;
|
||||
@include size(150px 50px);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
//core-hacks
|
||||
.nopadding {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.container{
|
||||
padding:0;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
width:auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Google-iframe-fucking-up-layout-fix
|
||||
iframe[name="google_conversion_frame"] {
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
//inline element
|
||||
.inline-element{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.social-media{
|
||||
i{
|
||||
color:$bg;
|
||||
background-color:$typoWhite;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 100px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
p, ul{
|
||||
margin: 0 0 34px;
|
||||
}
|
||||
|
||||
.ep-box {
|
||||
padding:20px;
|
||||
margin-bottom: 34px;
|
||||
background-color:$lighertGrey;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
color: $link;
|
||||
|
||||
&:before {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ep-text-block{
|
||||
margin-top:30px;
|
||||
margin-bottom:60px;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
.row{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teasertext {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
|
||||
.ep-text-box{
|
||||
background-color:$lighertGrey;
|
||||
margin-bottom:30px;
|
||||
h1,h2,h3,h4,h5,h6,div{
|
||||
padding:15px 15px 10px 15px;
|
||||
margin:0;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
background-color:$link;
|
||||
color:$typoWhite;
|
||||
}
|
||||
p{
|
||||
margin:0;
|
||||
padding:20px 15px 25px 15px;
|
||||
color:$colorBlack;
|
||||
&:nth-of-type(1n+2){
|
||||
padding-top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 'scroll to' fix for fixed header
|
||||
a.anchor:target {
|
||||
display: block;
|
||||
height: 140px;
|
||||
margin-top: -140px;
|
||||
}
|
||||
|
||||
// booking iframe
|
||||
.bookingframe {
|
||||
margin: 160px 0 0;
|
||||
border: none;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.embeddediframe {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Vuejs related
|
||||
[v-cloak] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Image lazy loading placeholder
|
||||
img.lazyloading {
|
||||
background: url(../images/lazy.png) no-repeat top center;
|
||||
}
|
||||
|
||||
// Cookie consent
|
||||
.cc-window.cc-floating {
|
||||
padding: 1em;
|
||||
}
|
||||
.cc-message, .cc-btn {
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
font-size: 75% !important;
|
||||
}
|
||||
}
|
||||
.cc-link {
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
font-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid non legible links in striped tables
|
||||
.table-striped a:not(.button) {
|
||||
color: $bg_second;
|
||||
&.btn {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
// vendor styles
|
||||
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
|
||||
|
||||
// Core variables and mixins
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
|
||||
|
||||
// Reset and dependencies
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
|
||||
|
||||
// Core CSS
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
|
||||
@import "bootstrap-overrides/grid";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
|
||||
|
||||
// Components
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
|
||||
|
||||
// Utility classes
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
|
||||
@import "bootstrap-overrides/utilities";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
|
||||
@@ -1,18 +0,0 @@
|
||||
.ep-breadcrumb{
|
||||
margin-bottom:30px;
|
||||
a{
|
||||
color: $color-grey;
|
||||
&:after{
|
||||
content:'/';
|
||||
display:inline-block;
|
||||
color: $color-grey;
|
||||
margin-left:5px;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color:$link;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
.btn{
|
||||
color: white;
|
||||
text-transform:uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius:1px;
|
||||
transition:all 0.2s;
|
||||
outline: none;
|
||||
&:focus,
|
||||
&:visited {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
&:not(.btn-sm) {
|
||||
padding:10px 40px;
|
||||
font-size:16px;
|
||||
}
|
||||
&.btn-info{
|
||||
background-color:$bg;
|
||||
border:none;
|
||||
&:hover,&:active{
|
||||
background-color:$buttonInfoHover;
|
||||
}
|
||||
}
|
||||
&.btn-warning{
|
||||
background-color:$button;
|
||||
border:none;
|
||||
&:hover,&:active{
|
||||
background-color:$buttonActiveHover;
|
||||
}
|
||||
}
|
||||
&.btn-shadow{
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3)
|
||||
}
|
||||
&.btn-full{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
&.active {
|
||||
background-color:$buttonInfoHover;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
@media (max-width: $tabletWidth) {
|
||||
padding: 10px 24px;
|
||||
}
|
||||
}
|
||||
//.arrowtop {
|
||||
// position: fixed;
|
||||
// bottom: 44px;
|
||||
// right: 10px;
|
||||
// z-index: 10;
|
||||
// color: white;
|
||||
// background: rgba($button, 0.75);
|
||||
// font-size: 24px;
|
||||
// padding: 5px 10px;
|
||||
// border-radius: 5px;
|
||||
//
|
||||
// @include mq($from: desktop) {
|
||||
// font-size: 48px;
|
||||
// }
|
||||
//}
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
// Colors
|
||||
|
||||
/* ==========================================================================
|
||||
Colors for EP base page
|
||||
========================================================================== */
|
||||
|
||||
//hover/active/link
|
||||
$link:#f0bc44;
|
||||
$bg:#f0bc44;
|
||||
$bg:#dca21c;
|
||||
$bg_second: #3995DF;
|
||||
$overlay:0.25;
|
||||
$overlayMid: 0.8;
|
||||
$hover_low:0.15;
|
||||
$color-overlay:rgba($bg, $overlayMid);;
|
||||
$darkButton: #C7A20C;
|
||||
$darkButtonLine: rgba($darkButton, 0.8);
|
||||
$color-bg-second:rgba($darkButton, 0.5);
|
||||
|
||||
|
||||
$button: #ee525a;
|
||||
$bgAlpha: rgba($button, 0.5);
|
||||
$buttonActiveHover: #d8424a;
|
||||
$buttonInfoHover:$darkButton;
|
||||
$colorBlack: #404040;
|
||||
$typoWhite: #ffffff;
|
||||
$icon:$typoWhite;
|
||||
$weicheHover: rgba(#c20000, 0.55);
|
||||
$linkEvent: $link;
|
||||
$stoererColor: $link;
|
||||
|
||||
$contactWhatsapp: $button;
|
||||
$contactBlog: #44c758;
|
||||
$contactFacebook: $link;
|
||||
|
||||
$inputLightBlue: #a6c9e4;
|
||||
$lighertGrey: #F9F9F9;
|
||||
$lightGrey: #EEEDEE;
|
||||
$grey: #C7C7C7;
|
||||
$flag: rgba($bg ,0.9);
|
||||
|
||||
$alert-info-bg: $bg;
|
||||
$alert-info-border: $bg;
|
||||
$alert-info-text: white;
|
||||
@@ -1,43 +0,0 @@
|
||||
// Colors
|
||||
|
||||
/* ==========================================================================
|
||||
Colors for EP base page
|
||||
========================================================================== */
|
||||
|
||||
//hover/active/link
|
||||
$link:#82C3C6;
|
||||
$bg:#82C3C6;
|
||||
$bg_second: #3995DF;
|
||||
$overlay:0.25;
|
||||
$overlayMid: 0.8;
|
||||
$hover_low:0.15;
|
||||
$color-overlay:rgba($bg, $overlayMid);
|
||||
$darkButton: #82C3C6;
|
||||
$darkButtonLine: rgba($darkButton, 0.8);
|
||||
$color-bg-second:rgba($darkButton, 0.5);
|
||||
|
||||
|
||||
$button: #f9c33d;
|
||||
$bgAlpha: rgba($link, 0.5);
|
||||
$buttonActiveHover: #f9c33d;
|
||||
$buttonInfoHover:#04578e;
|
||||
$colorBlack: #404040;
|
||||
$typoWhite: #ffffff;
|
||||
$icon:$typoWhite;
|
||||
$weicheHover: rgba($link, 0.55);
|
||||
$linkEvent: $button;
|
||||
$stoererColor: $link;
|
||||
|
||||
$contactWhatsapp: $button;
|
||||
$contactBlog: #44c758;
|
||||
$contactFacebook: $link;
|
||||
|
||||
$inputLightBlue: #a6c9e4;
|
||||
$lighertGrey: #F9F9F9;
|
||||
$lightGrey: #EEEDEE;
|
||||
$grey: #C7C7C7;
|
||||
$flag: rgba($bg ,0.9);
|
||||
|
||||
$alert-info-bg: $bg;
|
||||
$alert-info-border: $bg;
|
||||
$alert-info-text: white;
|
||||
@@ -1,43 +0,0 @@
|
||||
// Colors
|
||||
|
||||
/* ==========================================================================
|
||||
Colors for EP base page
|
||||
========================================================================== */
|
||||
|
||||
//hover/active/link
|
||||
$link:#b5e400;
|
||||
$bg:#b5e400;
|
||||
$bg_second: #3995DF;
|
||||
$overlay:0.25;
|
||||
$overlayMid: 0.8;
|
||||
$hover_low:0.15;
|
||||
$color-overlay:rgba($bg, $overlayMid);
|
||||
$darkButton: #337ab7;
|
||||
$darkButtonLine: rgba($darkButton, 0.8);
|
||||
$color-bg-second:rgba($darkButton, 0.5);
|
||||
|
||||
|
||||
$button: #19a3dc;
|
||||
$bgAlpha: rgba($button, 0.5);
|
||||
$buttonActiveHover: #1493c7;
|
||||
$buttonInfoHover:#99c100;
|
||||
$colorBlack: #404040;
|
||||
$typoWhite: #ffffff;
|
||||
$icon:$typoWhite;
|
||||
$weicheHover: rgba($link, 0.55);
|
||||
$linkEvent: $link;
|
||||
$stoererColor: $link;
|
||||
|
||||
$contactWhatsapp: $button;
|
||||
$contactBlog: #44c758;
|
||||
$contactFacebook: $link;
|
||||
|
||||
$inputLightBlue: #a6c9e4;
|
||||
$lighertGrey: #F9F9F9;
|
||||
$lightGrey: #EEEDEE;
|
||||
$grey: #C7C7C7;
|
||||
$flag: rgba($bg ,0.9);
|
||||
|
||||
$alert-info-bg: $bg;
|
||||
$alert-info-border: $bg;
|
||||
$alert-info-text: white;
|
||||
@@ -1,37 +0,0 @@
|
||||
// Colors
|
||||
|
||||
/* ==========================================================================
|
||||
Colors for EP base page
|
||||
========================================================================== */
|
||||
|
||||
//hover/active/link
|
||||
$link:#009fe3;
|
||||
$bg:#006db6;
|
||||
$bgNavi:$bg;
|
||||
$hoverNavi:$link;
|
||||
$bg_second: #3995DF;
|
||||
$overlay:0.25;
|
||||
$hover_low:0.15;
|
||||
$color-overlay:#3c8dcf;
|
||||
$color-bg-second:$bg;
|
||||
$darkButton: $bg;
|
||||
$darkButtonLine: rgba($darkButton, 0.8);
|
||||
$color-bg-second:rgba($darkButton, 0.5);
|
||||
|
||||
$button: #f9cb0d;
|
||||
$buttonActiveHover: #dcb516;
|
||||
$buttonInfoHover:#04578e;
|
||||
$colorBlack: #404040;
|
||||
$typoWhite: #ffffff;
|
||||
$icon: $link;
|
||||
$weicheHover: rgba($link, 0.55);
|
||||
|
||||
$contactWhatsapp: #f65562;
|
||||
$contactBlog: #44c758;
|
||||
$contactFacebook: $button;
|
||||
|
||||
$inputLightBlue: #a6c9e4;
|
||||
$lighertGrey: #F0F0F0;
|
||||
$lightGrey: #EEEDEE;
|
||||
$grey: #C7C7C7;
|
||||
$flag: rgba($bg ,0.9);
|
||||
@@ -1,775 +0,0 @@
|
||||
.ep-disturber{
|
||||
padding:0;
|
||||
color:$typoWhite;
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url("../images/corner/corner_top_1.svg");
|
||||
height: 114px;
|
||||
width: 100%;
|
||||
background-size: 102%;
|
||||
background-position-x: center;
|
||||
background-position-y: bottom;
|
||||
background-position: bottom;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
margin: -2px 0;
|
||||
}
|
||||
&:after{
|
||||
content:'';
|
||||
display:block;
|
||||
background-image:url('../images/corner/corner_bottom_1.svg');
|
||||
height: 114px;
|
||||
width: 100%;
|
||||
background-size: 102%;
|
||||
background-position-x: center;
|
||||
background-position-y: top;
|
||||
background-position: top;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color:$typoWhite;
|
||||
margin-left:10px;
|
||||
&.btn{
|
||||
width:100%;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
}
|
||||
.panel-group .panel + .panel{
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
> div{
|
||||
@include bergwelt($color-overlay);
|
||||
> div{
|
||||
box-shadow: inset 0 0 90px 50px $color-overlay;
|
||||
min-height: inherit;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
.panel{
|
||||
border:none;
|
||||
background-color:initial;
|
||||
a.headline {
|
||||
|
||||
background-color:$color-bg-second;
|
||||
padding:20px 20px 0 20px;
|
||||
width:100%;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-left:0;
|
||||
margin-bottom:0;
|
||||
transition-delay: 0s;
|
||||
&:hover{
|
||||
color:$typoWhite;
|
||||
}
|
||||
&:before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -10px;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f106";
|
||||
}
|
||||
&.collapsed{
|
||||
transition:all 0.5s;
|
||||
transition-delay: .4s;
|
||||
background-color:initial;
|
||||
&:before{
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-expanded="1"] a.headline:before {
|
||||
content: "\f107";
|
||||
}
|
||||
div{
|
||||
background-color:$color-bg-second;
|
||||
padding:0px 20px 20px 20px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
transition:all 0.5s;
|
||||
&.collapsed{
|
||||
background-color:initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
min-height:inherit;
|
||||
}
|
||||
|
||||
|
||||
&.ep-expert{
|
||||
&:before{
|
||||
background-image: url("../images/corner/corner_top_4.svg");
|
||||
height: 180px;
|
||||
}
|
||||
&:after{
|
||||
background-image:url('../images/corner/corner_bottom_4.svg');
|
||||
height: 151px;
|
||||
}
|
||||
position:relative;
|
||||
|
||||
div[class^='col']{
|
||||
&:first-of-type{
|
||||
text-align:center;
|
||||
img{
|
||||
border-radius: 100%;
|
||||
height: auto;
|
||||
width:80%;
|
||||
}
|
||||
> div{
|
||||
&:first-of-type{
|
||||
background-color:$typoWhite;
|
||||
color:$colorBlack;
|
||||
border-radius: 100px;
|
||||
padding: 10px 40px 20px 40px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: -70px;
|
||||
margin-bottom: 70px;
|
||||
a{
|
||||
color:$link;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin: 0 -15px;
|
||||
bottom: 22px;
|
||||
}
|
||||
}
|
||||
.call-btn{
|
||||
background-color:$button;
|
||||
display:inline-block;
|
||||
border-radius:100%;
|
||||
padding:10px;
|
||||
position:relative;
|
||||
transition: all .2s;
|
||||
margin: 0;
|
||||
i{
|
||||
padding: 12px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
border: 2px solid #ffffff;
|
||||
transition: all .2s;
|
||||
font-size:18px;
|
||||
}
|
||||
&:hover{
|
||||
padding:10px;
|
||||
transform: translateY(4px);
|
||||
box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
|
||||
i{
|
||||
padding: 14px;
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headline-2{
|
||||
margin-bottom:40px;
|
||||
}
|
||||
div[class^='col']{
|
||||
|
||||
&:first-of-type{
|
||||
padding-left:0;
|
||||
}
|
||||
&:last-of-type{
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ep-expert-small{
|
||||
&:before{
|
||||
background-image: url("../images/corner/corner_top_hilfe.svg");
|
||||
height: 150px;
|
||||
}
|
||||
.container{
|
||||
padding-top:30px;
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
border-radius: 100%;
|
||||
height:auto;
|
||||
@include mq($until: tablet) {
|
||||
max-width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ep-newsletter{
|
||||
&:before{
|
||||
background-image: url("../images/corner/corner_top_3.svg");
|
||||
height: 300px;
|
||||
}
|
||||
&:after{
|
||||
background-image:url('../images/corner/corner_bottom_3.svg');
|
||||
height:300px;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 100px 0 80px 0;
|
||||
}
|
||||
form{
|
||||
margin-top: 20px;
|
||||
.form-control{
|
||||
width:100%;
|
||||
border-radius: 0;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
@include inputPlaceholderColor($colorBlack);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.ep-weekly-deal{
|
||||
margin-top: 32px;
|
||||
overflow: hidden;
|
||||
&:before{
|
||||
background-image: url("../images/corner/corner_top_deal.svg");
|
||||
height: 114px;
|
||||
background-position: center;
|
||||
z-index: 20;
|
||||
}
|
||||
&:after{
|
||||
background-image:url('../images/corner/corner_bottom_deal.svg');
|
||||
height: 160px;
|
||||
background-position: bottom;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
a{
|
||||
margin-left:0;
|
||||
&.btn{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
img.ep-weekly-background{
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
width: 100%;
|
||||
}
|
||||
position:relative;
|
||||
div[class^='col']{
|
||||
height:auto;
|
||||
}
|
||||
div.left-content{
|
||||
z-index: 40;
|
||||
@include mq($from: desktop) {
|
||||
> div {
|
||||
//max-width: 150px;
|
||||
line-height: 45px;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right:0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
div.right-content {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
.row{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.back{
|
||||
margin-left: 50px;
|
||||
width:300px;
|
||||
z-index: 20;
|
||||
-webkit-transform: rotateX(0deg) rotateY(0deg);
|
||||
-moz-transform: rotateX(0deg) rotateY(0deg);
|
||||
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
|
||||
padding:0;
|
||||
div, .btn{
|
||||
position:relative;
|
||||
}
|
||||
> div{
|
||||
background: initial;
|
||||
padding:0;
|
||||
|
||||
.teaser-title{
|
||||
text-transform: uppercase;
|
||||
padding:6px 20px;
|
||||
&:after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $contactBlog;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
}
|
||||
.content{
|
||||
padding:16px 20px;
|
||||
border:none;
|
||||
overflow: hidden;
|
||||
&:after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.8;
|
||||
background-color: $link;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
div{
|
||||
text-transform:initial;
|
||||
margin:0;
|
||||
font-size:22px;
|
||||
}
|
||||
span{
|
||||
font-size:19px;
|
||||
font-weight:300;
|
||||
color: white;
|
||||
}
|
||||
hr{
|
||||
margin:10px 0;
|
||||
}
|
||||
p{
|
||||
margin:0;
|
||||
&:last-of-type{
|
||||
font-size:20px;
|
||||
font-weight:300;
|
||||
s{
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div{
|
||||
overflow:visible;
|
||||
&:before{
|
||||
background-image:none;
|
||||
}
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color:$color-overlay;
|
||||
opacity: 0.9;
|
||||
height: 1000%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: -67.666666666%;
|
||||
}
|
||||
> div{
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image:url('../images/header-winter.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 100%;
|
||||
top: -50%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
|
||||
width:100%;
|
||||
left:0;
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin:20px 0;
|
||||
a{
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
&:before,&:after{
|
||||
background-image:none !important;
|
||||
height:0 !important;
|
||||
}
|
||||
div[class^='col']{
|
||||
padding:0;
|
||||
|
||||
div[class^='col']{
|
||||
padding: 0 15px;
|
||||
margin-left:0;
|
||||
&:first-of-type,
|
||||
&:last-of-type{
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div > div{
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding:20px 0;
|
||||
.panel a{
|
||||
padding: 20px 5px 10px 20px;
|
||||
}
|
||||
}
|
||||
.text-right{
|
||||
text-align:center;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
&.ep-expert{
|
||||
a.btn{
|
||||
margin-left:0;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
div[class^='col']{
|
||||
|
||||
div[class^='col']{
|
||||
&:first-of-type{
|
||||
padding:0 15px;
|
||||
}
|
||||
&:last-of-type{
|
||||
padding:0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ep-expert,
|
||||
&.ep-expert-small{
|
||||
a.btn{
|
||||
margin-left:0;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
}
|
||||
&.ep-newsletter{
|
||||
.container{
|
||||
padding:0;
|
||||
}
|
||||
div[class^='headline']{
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin:0;
|
||||
}
|
||||
form{
|
||||
.form-control, input{
|
||||
width:80%;
|
||||
margin:0 auto;
|
||||
margin-bottom:15px;
|
||||
display:block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ep-weekly-deal{
|
||||
> div{
|
||||
&:after{
|
||||
display:none;
|
||||
}
|
||||
|
||||
> div{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.left-content{
|
||||
> div{
|
||||
position:relative;
|
||||
top:0;
|
||||
transform: initial;
|
||||
text-align: center;
|
||||
word-spacing:10px;
|
||||
margin:0 auto;
|
||||
line-height:40px;
|
||||
margin-bottom:20px;
|
||||
div{
|
||||
display:inline-block;
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.back{
|
||||
width:auto;
|
||||
margin:0 20px;
|
||||
|
||||
.content{
|
||||
div{
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ep-disturber-price{
|
||||
|
||||
margin-bottom:35px;
|
||||
padding: 30px 85px;
|
||||
max-width: $max-width;
|
||||
@include lowPolyEvent($link, 0.1);
|
||||
ul{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
> div{
|
||||
div[class^='col']{
|
||||
&:nth-of-type(1){
|
||||
color: $typoWhite;
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&:nth-of-type(2){
|
||||
margin-top:-5px;
|
||||
line-height:32px;
|
||||
color:$typoWhite;
|
||||
}
|
||||
button{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.vcenter {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
float: none;
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin-bottom: 30px;
|
||||
padding:0;
|
||||
background-color:transparent;
|
||||
&:after{
|
||||
background-image:none;
|
||||
}
|
||||
.vcenter {
|
||||
display:block;
|
||||
}
|
||||
> div{
|
||||
@include lowPolyEvent($link, 0.1);
|
||||
margin:0 15px;
|
||||
div[class^='col']{
|
||||
|
||||
&:nth-of-type(1){
|
||||
text-align: center;
|
||||
padding: 4vh 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 9vw;
|
||||
line-height: 10vw;
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
padding:4vh;
|
||||
font-size:4vw;
|
||||
line-height:5vw;
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
padding:0;
|
||||
button{
|
||||
font-size:4vw;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-disturber-last-chance{
|
||||
padding: 50px 85px;
|
||||
max-width: $max-width;
|
||||
@include lowPolyEvent($buttonActiveHover, 0.1);
|
||||
div{
|
||||
text-align:center;
|
||||
color:$typoWhite;
|
||||
&:first-child{
|
||||
font-size:2.5em;
|
||||
font-weight:700;
|
||||
}
|
||||
&:nth-child(2){
|
||||
max-width:50%;
|
||||
margin:20px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding: 50px 0;
|
||||
div{
|
||||
text-align:center;
|
||||
color:$typoWhite;
|
||||
&:first-child{
|
||||
line-height: 1em;
|
||||
}
|
||||
&:nth-child(2){
|
||||
max-width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-disturber-reminder{
|
||||
margin-bottom:35px;
|
||||
padding: 60px 85px;
|
||||
max-width: $max-width;
|
||||
@include lowPolyEvent($bg, 0.1);
|
||||
> div{
|
||||
color:$typoWhite;
|
||||
&:first-child{
|
||||
text-align:center;
|
||||
font-size:2.5em;
|
||||
font-weight:400;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
}
|
||||
div[class^="col"]{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
&:first-of-type{
|
||||
padding:0;
|
||||
img{
|
||||
max-height: 378px;
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
>div{
|
||||
max-width:70%;
|
||||
line-height:24px;
|
||||
padding-left:30px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
}
|
||||
.btn{
|
||||
margin-left:30px;
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding: 0;
|
||||
padding-top: 30px;
|
||||
div{
|
||||
&:first-child{
|
||||
line-height:1em;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
.container{
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
div[class^="col"]{
|
||||
|
||||
padding:0;
|
||||
margin: 0 15px;
|
||||
&:first-of-type{
|
||||
img{
|
||||
max-height: initial;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
> div{
|
||||
max-width:100%;
|
||||
padding-left: 0;
|
||||
padding-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
width: 100%;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-lineup{
|
||||
max-width: 1366px;
|
||||
margin:0 auto;
|
||||
div[class^="headline"]{
|
||||
margin-top:0;
|
||||
}
|
||||
div[class^="col"]{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
&:first-child{
|
||||
padding:0;
|
||||
}
|
||||
&:last-child{
|
||||
padding-left:0;
|
||||
>div{
|
||||
padding:80px 60px 75px 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
div[class^="col"]{
|
||||
&:first-child{
|
||||
padding-left:0;
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.social{
|
||||
|
||||
a{
|
||||
margin-right: 50px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
img{
|
||||
max-height: 470px;
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
div[class^="col"]{
|
||||
|
||||
&:first-child{
|
||||
float:none;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&:last-child{
|
||||
|
||||
> div{
|
||||
padding:30px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
div[class^="col"]:first-child {
|
||||
padding: 0 15px;
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
img{
|
||||
max-height:100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
.ep-employee{
|
||||
text-align:center;
|
||||
color:$colorBlack;
|
||||
margin-bottom:40px;
|
||||
&:hover{
|
||||
color:inherit;
|
||||
}
|
||||
img{
|
||||
margin:0 auto;
|
||||
border-radius: 100%;
|
||||
height: auto;
|
||||
width: 70%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
div{
|
||||
font-size:25px;
|
||||
font-weight:700;
|
||||
span{
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-medium;
|
||||
letter-spacing: 2px;
|
||||
line-height: 30px;
|
||||
@media only screen and (max-width : $smartphoneWidth) {
|
||||
line-height: 32px;
|
||||
display: block;
|
||||
margin-bottom: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.employee{
|
||||
.ep-subpage{
|
||||
margin:0;
|
||||
}
|
||||
.ep-subpage-bg{
|
||||
position: relative;
|
||||
height: 440px;
|
||||
max-width: 1366px;
|
||||
width:1366px;
|
||||
margin: 0 auto;
|
||||
top: 40px;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
@media only screen and (max-width : $smartphoneWidth) {
|
||||
width:100%;
|
||||
height:180px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-employee-detail{
|
||||
margin-bottom:60px;
|
||||
p{
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.ep-employee{
|
||||
img{
|
||||
width:80%;
|
||||
}
|
||||
}
|
||||
.social-media{
|
||||
a{
|
||||
margin: 0 10px;
|
||||
i{
|
||||
background-color:$link;
|
||||
color:$typoWhite;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,735 +0,0 @@
|
||||
.ep-core-events{
|
||||
&.boarderweek{
|
||||
.navbar-main-wrapper{
|
||||
.navbar-main .logo{
|
||||
height: 85px;
|
||||
margin-top: 5px;
|
||||
margin-left: 25%;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.snowzone{
|
||||
.navbar-main-wrapper .navbar-main .logo{
|
||||
height: 100px;
|
||||
margin-left: 10%;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
}
|
||||
.ep-has-error-bar,
|
||||
.checkbox label input[type="checkbox"] + .cr > .cr-icon{
|
||||
color: white;
|
||||
}
|
||||
.topnavi .container .row a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ep-disturber-last-chance{
|
||||
@include lowPolyEvent($bg, 0.1);
|
||||
.btn{
|
||||
background-color:$button;
|
||||
color:$bg;
|
||||
&:hover{
|
||||
background-color:$buttonActiveHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-disturber-reminder{
|
||||
@include lowPolyEvent($button, 0.1);
|
||||
> div{
|
||||
color:$bg;
|
||||
}
|
||||
.btn{
|
||||
background-color:$bg;
|
||||
color:$button;
|
||||
&:hover{
|
||||
background-color:#730233;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.unichamp{
|
||||
.navbar-main-wrapper{
|
||||
.navbar-main .logo{
|
||||
height: 80px;
|
||||
margin-top: 5px;
|
||||
margin-left: 50%;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid .navbar-brand{
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// typo
|
||||
div[class^="headline"]{
|
||||
span{
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
line-height: 60px;
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
.underline{
|
||||
&:after{
|
||||
border-bottom: 2px solid #dca21c;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
.btn{
|
||||
|
||||
border-radius:3px;
|
||||
&.ep-sidebar{
|
||||
font-size:18px;
|
||||
}
|
||||
&.active{
|
||||
background-color:$button;
|
||||
color:$typoWhite;
|
||||
}
|
||||
&.sub{
|
||||
background-color:$lighertGrey;
|
||||
border:none;
|
||||
color:$link;
|
||||
&:before{
|
||||
content: "\e250";
|
||||
font-family: 'Glyphicons Halflings';
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.active{
|
||||
color:$button;
|
||||
}
|
||||
}
|
||||
&.btn-shadow{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-main-wrapper{
|
||||
.navbar-main{
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
padding-top: 50px;
|
||||
}
|
||||
@media (max-width: $tabletWidth) {
|
||||
//background-color: rgba(white, 0.5);
|
||||
.navbar-main{
|
||||
left:0;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
.navbar-main {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Extend Carousel
|
||||
#ep-main-carousel{
|
||||
position: relative;
|
||||
height: 740px;
|
||||
.item,.carousel-inner{
|
||||
height:100%;
|
||||
}
|
||||
.stoerer{
|
||||
z-index: 10;
|
||||
position:absolute;
|
||||
left:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
padding:0;
|
||||
> div{
|
||||
top:initial;
|
||||
padding:0;
|
||||
margin:0;
|
||||
bottom:0;
|
||||
|
||||
position:relative;
|
||||
width:100%;
|
||||
background-color:$bgAlpha;
|
||||
|
||||
&:before{
|
||||
background-color:transparent;
|
||||
}
|
||||
div[class^='col']{
|
||||
padding: 30px 20px;
|
||||
&:first-of-type{
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
div{
|
||||
&:before{
|
||||
background-color:initial;
|
||||
}
|
||||
&:first-of-type{
|
||||
@include lowPolyEvent($linkEvent, 0.1);
|
||||
padding: 15px 0;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
background-color:$typoWhite;
|
||||
color:$stoererColor;
|
||||
display:block;
|
||||
text-transform: uppercase;
|
||||
font-size:24px;
|
||||
padding: 8px;
|
||||
min-height: initial;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2){
|
||||
color: #ffffff;
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
margin-top: -13px;
|
||||
height:260px;
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
color: #ffffff;
|
||||
font-size: 25px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
border-left: 7px solid #fff;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
text-transform: none;
|
||||
margin: 30px 50px;
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
> div{
|
||||
|
||||
div[class^='col']{
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3){
|
||||
margin:6vw 0;
|
||||
}
|
||||
&:first-of-type{
|
||||
width:100%;
|
||||
padding:1vw 0;
|
||||
margin:0;
|
||||
@include lowPolyEvent($link, 0.1);
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
br{
|
||||
display:none;
|
||||
}
|
||||
div{
|
||||
font-weight:400;
|
||||
&:first-of-type{
|
||||
font-size:6vw;
|
||||
display:inline-block;
|
||||
padding: 0;
|
||||
line-height: initial;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
background-color:transparent;
|
||||
&:after{
|
||||
background-color:transparent;
|
||||
background-image:none;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
font-size:6vw;
|
||||
display:inline-block;
|
||||
background-color:transparent;
|
||||
color:$typoWhite;
|
||||
min-height:0;
|
||||
&:before{
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
padding-right: 4vw;
|
||||
font-size: 10.5vw;
|
||||
@media (orientation: landscape) {
|
||||
font-size: 9vw;
|
||||
}
|
||||
line-height: initial;
|
||||
height:initial;
|
||||
margin-bottom: 20vw;
|
||||
&:after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border-right: 7px solid #fff;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5%;
|
||||
height: 92%;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
border: none;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vh;
|
||||
font-weight: 400;
|
||||
margin-top: 8vw;
|
||||
line-height: 5.9vw;
|
||||
font-size: 4.5vw;
|
||||
height: 100%;
|
||||
margin-bottom: 20vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $tabletWidth) {
|
||||
height: 630px;
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin-bottom: -35px;
|
||||
position:relative;
|
||||
height:auto;
|
||||
top:-65px;
|
||||
.item{
|
||||
overflow:hidden;
|
||||
> img{
|
||||
display: block;
|
||||
max-width: initial;
|
||||
height: 100vw;
|
||||
width: auto;
|
||||
@media (orientation: landscape) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-control{
|
||||
// z-index: 1;
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// breadcrumps
|
||||
.ep-breadcrumb{
|
||||
background-color:$link;
|
||||
color:$typoWhite;
|
||||
padding:10px 80px;
|
||||
font-weight:700;
|
||||
margin-bottom:35px;
|
||||
a{
|
||||
color:$typoWhite;
|
||||
font-weight:400;
|
||||
&:after{
|
||||
color:$typoWhite;
|
||||
}
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding:10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//Disturber
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
.ep-disturber {
|
||||
margin:0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-disturber{
|
||||
&:before{
|
||||
background-image:none;
|
||||
height: 0;
|
||||
}
|
||||
&:after{
|
||||
background-image:none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
> div{
|
||||
@include bergwelt($link);
|
||||
> div{
|
||||
box-shadow: none;
|
||||
.panel{
|
||||
a, div{
|
||||
background-color:$darkButton;
|
||||
}
|
||||
a{
|
||||
border-bottom: 1px solid $darkButtonLine;
|
||||
&.collapsed{
|
||||
background-color:initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $smartphoneWidth) {
|
||||
margin-bottom:35px;
|
||||
.container{
|
||||
padding:35px 0;
|
||||
}
|
||||
.right-content{
|
||||
padding: 35px 0;
|
||||
}
|
||||
}
|
||||
&.ep-newsletter{
|
||||
.container{
|
||||
padding:90px 0;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding:30px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-weiche-wrapper{
|
||||
max-width: 1366px;
|
||||
margin:0 auto;
|
||||
overflow: hidden;
|
||||
margin-bottom:35px;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-weiche{
|
||||
text-transform: uppercase;
|
||||
color:$typoWhite;
|
||||
font-weight:700;
|
||||
font-size:30px;
|
||||
position:relative;
|
||||
img{
|
||||
width:110%;
|
||||
height:auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div{
|
||||
position:relative;
|
||||
overflow: hidden;
|
||||
display:flex;
|
||||
background-size:cover;
|
||||
background-position: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
> div{
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
height:63vh;
|
||||
|
||||
div{
|
||||
&:first-child,&:last-child{
|
||||
flex:1;
|
||||
flex-direction: row;
|
||||
div{
|
||||
flex:1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
flex:2;
|
||||
> div{
|
||||
|
||||
&:first-of-type{
|
||||
justify-content:initial;
|
||||
align-items:initial;
|
||||
}
|
||||
> div{
|
||||
|
||||
&:first-of-type{
|
||||
flex-direction: column;
|
||||
flex:3;
|
||||
> div{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
flex:5;
|
||||
}
|
||||
*::-ms-backdrop, &:last-of-type{
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-tile{
|
||||
cursor:pointer;
|
||||
z-index:10;
|
||||
position:relative;
|
||||
//height:100%;
|
||||
transition:all 0.2s;
|
||||
&:before{
|
||||
content:"";
|
||||
top:0;
|
||||
left:0;
|
||||
display:Block;
|
||||
width: -moz-calc(100% - 0px);
|
||||
width: -webkit-calc(100% - 0px);
|
||||
width: -o-calc(100% - 0px);
|
||||
width: calc(100% - 0px);
|
||||
height: -moz-calc(100% - 0px);
|
||||
height: -webkit-calc(100% - 0px);
|
||||
height: -o-calc(100% - 0px);
|
||||
height: calc(100% - 0px);
|
||||
border:0px solid #fff;
|
||||
position: absolute;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
&:after{
|
||||
content:"";
|
||||
display:Block;
|
||||
//background-color:#000;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:-1;
|
||||
//background-color:rgba(0,0,0,0.2);
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
&:before{
|
||||
content:"";
|
||||
top:15px;
|
||||
left:15px;
|
||||
display:Block;
|
||||
width: -moz-calc(100% - 30px);
|
||||
width: -webkit-calc(100% - 30px);
|
||||
width: -o-calc(100% - 30px);
|
||||
width: calc(100% - 30px);
|
||||
height: -moz-calc(100% - 30px);
|
||||
height: -webkit-calc(100% - 30px);
|
||||
height: -o-calc(100% - 30px);
|
||||
height: calc(100% - 30px);
|
||||
border:2px solid #fff;
|
||||
position: absolute;
|
||||
}
|
||||
&:after{
|
||||
background-color:$weicheHover;
|
||||
}
|
||||
}
|
||||
a{
|
||||
font-size:30px;
|
||||
color:$typoWhite;
|
||||
z-index: 1000;
|
||||
padding: 100% 0;
|
||||
font-weight: 700;
|
||||
word-break: initial;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
text-shadow: 0 2px 2px grey;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-tile-bottom{
|
||||
margin-bottom:2px;
|
||||
}
|
||||
.ep-tile-right{
|
||||
margin-right:2px;
|
||||
.ep-tile-right{
|
||||
//height:100%;
|
||||
div{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
*::-ms-backdrop, .ep-tile-right {
|
||||
height:100%;
|
||||
}
|
||||
*::-ms-backdrop, .ep-tile-right .ep-tile-bottom a{
|
||||
padding:40% 0;
|
||||
line-height:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
font-size:2vw;
|
||||
> div{
|
||||
height:50vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
font-size:10vw;
|
||||
> div{
|
||||
height:auto;
|
||||
}
|
||||
margin:0 auto;
|
||||
div{
|
||||
display: block !important;
|
||||
flex:1;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.ep-tile-bottom{
|
||||
margin-bottom:0;
|
||||
}
|
||||
.ep-tile-right{
|
||||
margin-right:0;
|
||||
}
|
||||
.ep-tile{
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
a{
|
||||
padding: 15vw 0;
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//input
|
||||
.checkbox{
|
||||
label{
|
||||
input[type="checkbox"]:checked + .cr{
|
||||
background-color: $button;
|
||||
border: 1px solid $button;
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
.ep-has-error-bar{
|
||||
background-color: $button;
|
||||
}
|
||||
.has-error{
|
||||
.form-control{
|
||||
border-color: $button;
|
||||
}
|
||||
.control-label{
|
||||
color:$button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.table-striped{
|
||||
th{
|
||||
padding:12px 8px;
|
||||
border:none;
|
||||
&:first-of-type{
|
||||
padding-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
td{
|
||||
border-top:2px solid $typoWhite;
|
||||
border-left:2px solid $typoWhite;
|
||||
&:first-of-type{
|
||||
padding-left:20px;
|
||||
border-left:none;
|
||||
}
|
||||
//&:last-of-type{
|
||||
// border-left:0;
|
||||
// text-align: right;
|
||||
//}
|
||||
}
|
||||
>tbody>tr:nth-of-type(odd){
|
||||
background-color:$lighertGrey;
|
||||
}
|
||||
>tbody>tr:nth-of-type(even){
|
||||
background-color: $color-grey;
|
||||
}
|
||||
}
|
||||
.table-divider{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-top: 2px solid #eee;
|
||||
}
|
||||
|
||||
.ep-table-el{
|
||||
background-color:$lighertGrey;
|
||||
margin-bottom:20px;
|
||||
div{
|
||||
padding:20px;
|
||||
}
|
||||
p{
|
||||
color:$button;
|
||||
margin:10px 0;
|
||||
}
|
||||
button{
|
||||
width:100%;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-facts ul span:before {
|
||||
color: $link;
|
||||
}
|
||||
|
||||
// footer
|
||||
.footer{
|
||||
&:before{
|
||||
background-image:none;
|
||||
height: 0;
|
||||
}
|
||||
&:after{
|
||||
background-image:none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.footer-lightblue{
|
||||
padding:40px 0;
|
||||
|
||||
@include bergwelt($link);
|
||||
> div{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.footer-darkblue{
|
||||
background-color: $darkButton;
|
||||
i{
|
||||
color:$color-bg-second;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/* lato-300 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local(''),
|
||||
url('../fonts/lato-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/lato-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* lato-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(''),
|
||||
url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/lato-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* lato-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local(''),
|
||||
url('../fonts/lato-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/lato-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* lato-900 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local(''),
|
||||
url('../fonts/lato-v17-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/lato-v17-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
.footer{
|
||||
|
||||
.ep-core-events & {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url("../images/corner/corner_top_5.svg");
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
background-size: 102%;
|
||||
background-position-x: center;
|
||||
background-position-y: bottom;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
> div{
|
||||
|
||||
&:first-of-type{
|
||||
@include bergwelt($link);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
a,.btn{
|
||||
z-index: 10;
|
||||
color: $typoWhite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-lightblue *{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contact-block{
|
||||
margin-left:20px;
|
||||
margin-right:0px;
|
||||
a{
|
||||
margin-top:-10px;
|
||||
font-size: 22px;
|
||||
@media (max-width: $tabletWidth) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.headline-4{
|
||||
margin-top:4px;
|
||||
}
|
||||
}
|
||||
|
||||
hr{
|
||||
margin:50px 0;
|
||||
}
|
||||
|
||||
.footer-lightblue{
|
||||
box-shadow: inset 0 0px 160px 120px $link;// $link;
|
||||
min-height: inherit;
|
||||
width: 200%;
|
||||
position: relative;
|
||||
left: -50%;
|
||||
padding:20px 0;
|
||||
z-index: 10;
|
||||
color:$typoWhite;
|
||||
|
||||
.headline-4{
|
||||
color:$typoWhite;
|
||||
}
|
||||
|
||||
|
||||
.contact-block *{
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
input{
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin-right: 20px;
|
||||
@include inputPlaceholderColor($typoWhite);
|
||||
}
|
||||
|
||||
ul{
|
||||
padding-left:15px;
|
||||
li{
|
||||
a{
|
||||
padding:2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.footer-darkblue{
|
||||
color:$typoWhite;
|
||||
background-color: $bg;
|
||||
padding:30px 0;
|
||||
a{
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.collapse{
|
||||
display:block;
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
.collapse{
|
||||
display:none;
|
||||
}
|
||||
.collapse.in{
|
||||
display:block;
|
||||
}
|
||||
&:before{
|
||||
background-image:none;
|
||||
height:0;
|
||||
}
|
||||
.footer-lightblue{
|
||||
|
||||
}
|
||||
hr{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.nopadding {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
.footer-lightblue{
|
||||
width:100%;
|
||||
left:0;
|
||||
.container > .row{
|
||||
&:last-of-type{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion{
|
||||
border:none;
|
||||
background-color:initial;
|
||||
> div{
|
||||
> a{
|
||||
|
||||
background-color:$color-bg-second;
|
||||
padding:20px 20px 0 20px;
|
||||
width:100%;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-left:0;
|
||||
margin-bottom:0;
|
||||
transition-delay: 0s;
|
||||
&:hover{
|
||||
color:$typoWhite;
|
||||
}
|
||||
&:before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -10px;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f106";
|
||||
}
|
||||
&.collapsed{
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
transition:all 0.5s;
|
||||
transition-delay: .4s;
|
||||
background-color:initial;
|
||||
&:before{
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-collapse-collapsed-value="true"] a:before {
|
||||
content: "\f107";
|
||||
}
|
||||
&:last-child{
|
||||
a.collapsed{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
background-color:$color-bg-second;
|
||||
padding:0px 20px 20px 54px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
transition:all 0.5s;
|
||||
&.collapsed{
|
||||
background-color:initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.container{
|
||||
|
||||
> .row:not(#ep-travel-accordion){
|
||||
margin:0;
|
||||
> div[class^='col']{
|
||||
border-bottom:1px solid $typoWhite;
|
||||
padding:10px 0;
|
||||
margin-bottom:20px;
|
||||
div[class^='col']{
|
||||
&:last-of-type{
|
||||
div{
|
||||
text-align: center;
|
||||
margin:10px 0;
|
||||
br{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-block{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-darkblue{
|
||||
padding: 10px 0;
|
||||
.row{
|
||||
div{
|
||||
text-align:center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
.form-wrapper {
|
||||
.form-group, fieldset {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.checkbox label, .radio label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 11px 24px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border-radius:1px;
|
||||
height:100%;
|
||||
@include inputPlaceholderColor($color-grey);
|
||||
&.btn-warning{
|
||||
background-color:$button;
|
||||
border:none;
|
||||
&:hover,&:active{
|
||||
background-color:$buttonActiveHover;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url(../images/icons/icon_select.png);
|
||||
background-position: calc(100% - 24px) center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label{
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
.form--border {
|
||||
input,
|
||||
textarea,
|
||||
select{
|
||||
border: 1px solid $color-grey;
|
||||
&:focus{
|
||||
border-color: $colorBlack;
|
||||
}
|
||||
&:active{
|
||||
border-color: $colorBlack;
|
||||
}
|
||||
}
|
||||
.disabled{
|
||||
label{
|
||||
color:$lightGrey;
|
||||
}
|
||||
input{
|
||||
background-color:initial;
|
||||
border: 1px solid $lightGrey;
|
||||
@include inputPlaceholderColor($lightGrey);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox,
|
||||
.radio{
|
||||
label{
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
&+ .cr{
|
||||
> .cr-icon {
|
||||
transform: scale(3) rotateZ(-20deg);
|
||||
opacity: 0;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked{
|
||||
&+ .cr{
|
||||
|
||||
background-color:$link;
|
||||
border: 1px solid $link;
|
||||
|
||||
> .cr-icon {
|
||||
transform: scale(1) rotateZ(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
&+ .cr {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cr {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid $colorBlack;
|
||||
border-radius: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
transition: all .2s ease-in;
|
||||
margin-top: 2px;
|
||||
|
||||
.cr-icon {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
line-height: 0;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
color:$typoWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio .cr {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.radio .cr .cr-icon {
|
||||
margin-left: 0.04em;
|
||||
}
|
||||
@@ -1,309 +0,0 @@
|
||||
.navbar-main-wrapper{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
&.searchbar-fixed {
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.navbar-header{
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
height:auto;
|
||||
background: white;
|
||||
}
|
||||
.navbar-main{
|
||||
padding-top: 80px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 25px 70px -30px rgba(black, 0.4);
|
||||
.logo{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
||||
.navbar-collapse{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 13px;
|
||||
width: 100%;
|
||||
z-index:0;
|
||||
ul.navbar-nav{
|
||||
float: right;
|
||||
margin-right: 4%;
|
||||
.caret{
|
||||
|
||||
}
|
||||
> li{
|
||||
> a{
|
||||
color:$colorBlack;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size:18px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: $smartphoneWidth) {
|
||||
&:hover{
|
||||
color:$link;
|
||||
}
|
||||
}
|
||||
|
||||
.glyphicon{
|
||||
font-size: 12px;
|
||||
top: 0px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
> div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding-top: 23px;
|
||||
}
|
||||
|
||||
@media (min-width: $smartphoneWidth) {
|
||||
&:hover{
|
||||
position: initial;
|
||||
@import "navbar-open";
|
||||
}
|
||||
}
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
&.open{
|
||||
position: initial;
|
||||
@import "navbar-open";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin-top:0;
|
||||
padding:0;
|
||||
z-index: 200;
|
||||
position: relative;
|
||||
a{
|
||||
color:$typoWhite;
|
||||
}
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
.navbar-collapse{
|
||||
&.collapse{
|
||||
display:none !important;
|
||||
|
||||
}
|
||||
&.in{
|
||||
display:block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-main{
|
||||
height:auto;
|
||||
right: 0;
|
||||
background-color:initial;
|
||||
position:relative;
|
||||
margin:0;
|
||||
padding:0;
|
||||
.navbar-header{
|
||||
margin:0;
|
||||
padding: 7px 10px 3px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-collapse{
|
||||
background-color: $link;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align:left;
|
||||
margin:0;
|
||||
padding:0;
|
||||
top: 65px;
|
||||
width:80%;
|
||||
overflow:visible;
|
||||
border:none;
|
||||
height: 100% !important;
|
||||
ul.navbar-nav{
|
||||
float: none;
|
||||
margin:0;
|
||||
div[class^='headline']{
|
||||
font-size:14px;
|
||||
color:$typoWhite;
|
||||
}
|
||||
> li,
|
||||
> li.open{
|
||||
width: 100%;
|
||||
a{
|
||||
font-weight: $font-weight-regular;
|
||||
color:$typoWhite;
|
||||
padding:20px 30px;
|
||||
}
|
||||
> div{
|
||||
position:relative;
|
||||
width:initial;
|
||||
padding:0;
|
||||
}
|
||||
.dropdown-menu{
|
||||
position:static;
|
||||
margin-top:0;
|
||||
background-color: transparent;
|
||||
> li{
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:nth-child(1n+5){
|
||||
border:none;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
ul{
|
||||
padding-left: 27px;
|
||||
margin-bottom: 0;
|
||||
a{
|
||||
color:$typoWhite;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
font-size:15px;
|
||||
[class^='headline-']{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
padding-bottom: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown{
|
||||
background-color: $link;
|
||||
border-bottom:1px solid $bg;
|
||||
}
|
||||
.btn{
|
||||
width:100%;
|
||||
margin-bottom:20px;
|
||||
&:first-of-type{
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
> div{
|
||||
color:$typoWhite;
|
||||
padding: 40px;
|
||||
@include bergwelt($bg);
|
||||
div,small{
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
div{
|
||||
font-size:18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom:-5px;
|
||||
&:last-of-type{
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
|
||||
small{
|
||||
font-size:14px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggle{
|
||||
border:none;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
overflow:hidden;
|
||||
.icon-bar{
|
||||
height:4px;
|
||||
background-color:$colorBlack;
|
||||
opacity: 1;
|
||||
position:relative;
|
||||
width:30px;
|
||||
& + .icon-bar {
|
||||
margin-top: 7px;
|
||||
}
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&:not(.collapsed){
|
||||
span{
|
||||
&:nth-of-type(2n+0){
|
||||
transform: rotate(45deg);
|
||||
top: 11px;
|
||||
}
|
||||
&:nth-of-type(3n+0){
|
||||
opacity:0;
|
||||
left:-100px;
|
||||
}
|
||||
&:last-of-type{
|
||||
transform: rotate(-45deg);
|
||||
top: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.glyphicon{
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.search{
|
||||
float:right;
|
||||
color:$colorBlack;
|
||||
padding: 8px;
|
||||
margin: 0 12px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
display:inline-block;
|
||||
padding: 5px 2px;
|
||||
height: 50px;
|
||||
margin:0;
|
||||
.logo{
|
||||
height: 100%;
|
||||
width: initial;
|
||||
margin-top: 0;
|
||||
margin-left:0
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.subpage{
|
||||
.navbar-main {
|
||||
padding-top: 150px;
|
||||
|
||||
&--no-searchbar {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
@mixin bergwelt($bgColor) {
|
||||
background-color:$bgColor;
|
||||
position:relative;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image:url('../images/header-winter.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.15;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left:0px;
|
||||
}
|
||||
a,input,.btn{
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
@mixin lowPoly($bgColor) {
|
||||
background-color:$bgColor;
|
||||
position:relative;
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url("../images/low-poly.jpg");
|
||||
opacity: 0.25;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
a,input,.btn{
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@mixin lowPolyEvent($bgColor, $opacity) {
|
||||
background-color:$bgColor;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url("../images/low-poly.jpg");
|
||||
opacity: $opacity;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left:0px;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
a,input,.btn{
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@mixin inputPlaceholderColor($_inputColor) {
|
||||
&::-webkit-input-placeholder { /* Chrome */
|
||||
color: $_inputColor;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: $_inputColor;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $_inputColor;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
color: $_inputColor;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
.modal-header {
|
||||
background-color:$link;
|
||||
color:$typoWhite;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
||||
.glyphicon {
|
||||
color: $link;
|
||||
|
||||
&:before {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
|
||||
margin:0;
|
||||
border-radius: 3px;
|
||||
|
||||
> li {
|
||||
&:nth-child(1n+5){
|
||||
border-top: 1px solid #efefef;
|
||||
padding-top: 30px;
|
||||
}
|
||||
ul{
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
min-height: 50px;
|
||||
|
||||
li{
|
||||
margin-left:0;
|
||||
&.sectionhead {
|
||||
&:after{
|
||||
content:'';
|
||||
display:block;
|
||||
border-bottom: 4px solid $bg;
|
||||
margin-bottom: 13px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
display:inline-block;
|
||||
margin-right:10px;
|
||||
}
|
||||
a{
|
||||
font-size:18px;
|
||||
font-weight: $font-weight-regular;
|
||||
color:$colorBlack;
|
||||
line-height: 28px;
|
||||
@media (min-width: $smartphoneWidth) {
|
||||
&:hover{
|
||||
color:$link;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> a{
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.glyphicon{
|
||||
&:before{
|
||||
content: "\e113";
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.newsletter{
|
||||
input{
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
@@ -1,156 +0,0 @@
|
||||
.ep-product-detail{
|
||||
max-width: 1366px;
|
||||
min-height: 570px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-top: 150px;
|
||||
|
||||
.ep-product-detail-bg{
|
||||
background-size: 1366px 470px;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
height: 470px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
z-index: -1;
|
||||
&.season-w {
|
||||
background-image:url('../images/header-winter.jpg');
|
||||
}
|
||||
&.season-s {
|
||||
background-image:url('../images/header-sommer.jpg');
|
||||
}
|
||||
}
|
||||
div[class^='col']{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-top: 200px;
|
||||
.head{
|
||||
padding:3px 15px;
|
||||
color:$typoWhite;
|
||||
background-color:$link;
|
||||
position:relative;
|
||||
}
|
||||
.content{
|
||||
padding:17px 15px;
|
||||
background-color:$typoWhite;
|
||||
&.has-badge {
|
||||
padding-right: 75px;
|
||||
@include mq($from: tablet) {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag{
|
||||
margin:15px 15px 0 0;
|
||||
border:2px solid $typoWhite;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ep-property{
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
padding: 4px 25px;
|
||||
color:$typoWhite;
|
||||
display: inline-block;
|
||||
margin:15px 15px 0 0;
|
||||
background-color:$link;
|
||||
&.ep-marker{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar-carousel{
|
||||
margin-top:0;
|
||||
max-height: 380px;
|
||||
|
||||
.fa-angle-left{
|
||||
&:after{
|
||||
left: -25px;
|
||||
}
|
||||
&:before{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.fa-angle-right{
|
||||
right: 39px;
|
||||
&:before{
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-breadcrumb,.ep-backlink{
|
||||
position: absolute;
|
||||
top: 640px;
|
||||
font-size:13px;
|
||||
a{
|
||||
font-size:13px;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-backlink{
|
||||
top: 280px;
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
min-height: auto;
|
||||
margin-top: 0;
|
||||
div[class^='col']{
|
||||
margin:0;
|
||||
width: 100%;
|
||||
&.pull-left{
|
||||
padding:0 40px;
|
||||
margin-top: -85px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ep-property{
|
||||
&:last-of-type{
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
.navbar-carousel .carousel-control{
|
||||
display: block;
|
||||
|
||||
&:hover{
|
||||
[class*='fa-']:after{
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.fa-angle-left{
|
||||
&:before{
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
}
|
||||
}
|
||||
.fa-angle-right{
|
||||
right: 10px;
|
||||
&:before{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.navbar-carousel{
|
||||
max-height: 240px;
|
||||
.carousel-indicators{
|
||||
bottom: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-product-detail-bg{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.ep-backlink, .ep-breadcrumb{
|
||||
display:none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
.searchbar{
|
||||
margin-top:-80px;
|
||||
padding:10px 30px 15px;
|
||||
@include lowPoly(rgba(57,173,255,1));
|
||||
label{
|
||||
color:$typoWhite;
|
||||
text-transform: uppercase;
|
||||
font-size:14px;
|
||||
z-index: 200;
|
||||
position: relative;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchbar__link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
color: $typoWhite;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
padding-left: 4px;
|
||||
font-size: 90%;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f054";
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
|
||||
color:$typoWhite;
|
||||
border-radius: 2px;
|
||||
&::-webkit-input-placeholder { /* Chrome */
|
||||
color: white;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: white;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
color: $typoWhite;
|
||||
opacity: 1;
|
||||
}
|
||||
outline: none;
|
||||
}
|
||||
#destination {
|
||||
&::-webkit-input-placeholder { /* Chrome */
|
||||
color: white;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: white;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
form{
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
.dropdown, .form-control {
|
||||
background-color:#308acd;
|
||||
box-shadow:inset 0 1px 7px 0 rgba(30,92,135,0.3)
|
||||
}
|
||||
.navbar-nav{
|
||||
width: 100%;
|
||||
.dropdown{
|
||||
opacity: 1;
|
||||
z-index:500;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
a{
|
||||
padding: 11px 15px;
|
||||
color: $typoWhite;
|
||||
height: 41px;
|
||||
&:hover,&:focus,&:visited{
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
.open > a{
|
||||
background-color:transparent;
|
||||
}
|
||||
.dropdown-toggle span{
|
||||
margin-top: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
&.pax {
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
min-width: 0;
|
||||
& > li {
|
||||
line-height: 90%;
|
||||
a {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
color:$colorBlack;
|
||||
}
|
||||
.selected a {
|
||||
background-color: $lightGrey;
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
padding-left: 20px;
|
||||
input{
|
||||
background-color:initial;
|
||||
color:$colorBlack;
|
||||
}
|
||||
}
|
||||
.input-group-btn{
|
||||
.btn{
|
||||
border:none;
|
||||
&:hover{
|
||||
background-color:transparent;
|
||||
color:#a94442;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn{
|
||||
padding:10px 20px;
|
||||
display: block;
|
||||
height:41px;
|
||||
}
|
||||
|
||||
.searchbar-detail{
|
||||
a{
|
||||
color:$typoWhite;
|
||||
margin-left:15px;
|
||||
}
|
||||
}
|
||||
&.affix-top{
|
||||
.container{width: auto;}
|
||||
.searchbar-detail-affix{display:none;}
|
||||
}
|
||||
|
||||
&.affix{
|
||||
position:fixed;
|
||||
top: 126px;
|
||||
z-index: 500;
|
||||
width:100%;
|
||||
max-width: none;
|
||||
padding: 15px 30px 0px 30px;
|
||||
.searchbar-detail{
|
||||
display:none;
|
||||
}
|
||||
a{
|
||||
color:$typoWhite;
|
||||
}
|
||||
div[class^="col"]{
|
||||
padding:0 4px;
|
||||
}
|
||||
label{
|
||||
display:none;
|
||||
}
|
||||
.container{
|
||||
padding: 0 13px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
padding:0;
|
||||
padding-top:15px;
|
||||
background-color:#429DE1;
|
||||
margin:0;
|
||||
margin-bottom:40px;
|
||||
&:after{
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
|
||||
.navbar-nav{
|
||||
margin:0;
|
||||
.dropdown{
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
box-shadow:none;
|
||||
background-color:#308ACC;
|
||||
z-index:10;
|
||||
a{
|
||||
height:36px;
|
||||
line-height: 1;
|
||||
}
|
||||
ul{
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
label{
|
||||
max-width:100%;
|
||||
z-index:10;
|
||||
}
|
||||
input{
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
z-index: 10;
|
||||
box-shadow:none;
|
||||
border-radius:1px;
|
||||
background-color:#308ACC;
|
||||
}
|
||||
a, .btn{
|
||||
z-index: 1;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div[class^='col']{
|
||||
|
||||
li span{
|
||||
background-color: $bg;
|
||||
padding: 8px 15px;
|
||||
margin-top: 4px;
|
||||
margin-right: 4px;
|
||||
color:$typoWhite;
|
||||
position:absolute;
|
||||
right:0;
|
||||
}
|
||||
&:nth-of-type(5){
|
||||
padding: 0;
|
||||
.btn{
|
||||
width:100%;
|
||||
}
|
||||
label{
|
||||
display:none;
|
||||
}
|
||||
.form-group{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(6){
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.searchbar-detail{
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.affix{
|
||||
display:block;
|
||||
position:initial;
|
||||
top:0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.destinationselect{
|
||||
.dropdown-header{
|
||||
padding: 3px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
display:none;
|
||||
|
||||
&.affix{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.loading input {
|
||||
background: url(../images/ajax-loader-blue.gif) no-repeat 95% center;
|
||||
}
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
.searchbox{
|
||||
@include lowPoly(rgba(57,173,255,1));
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
top: 65px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
padding:10px 30px 15px;
|
||||
label{
|
||||
color:$typoWhite;
|
||||
text-transform: uppercase;
|
||||
font-size:14px;
|
||||
z-index: 200;
|
||||
position: relative;
|
||||
}
|
||||
input,
|
||||
input.form-control{
|
||||
padding: 12px;
|
||||
color:$typoWhite;
|
||||
border-radius: 2px;
|
||||
&::-webkit-input-placeholder { /* Chrome */
|
||||
color: $typoWhite;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: $typoWhite;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $typoWhite;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
color: $typoWhite;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#destination {
|
||||
&::-webkit-input-placeholder { /* Chrome */
|
||||
color: $color-grey;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: $color-grey;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $color-grey;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
color: $color-grey;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
input[type="date"] {
|
||||
line-height: 100%;
|
||||
color: white;
|
||||
display:block;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
min-height: 48px;
|
||||
}
|
||||
.dropdown, input{
|
||||
background-color:#308acd;
|
||||
box-shadow:inset 0 1px 7px 0 rgba(30,92,135,0.3)
|
||||
}
|
||||
.navbar-nav{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.dropdown{
|
||||
opacity: 1;
|
||||
z-index:500;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
a{
|
||||
padding: 11px 15px;
|
||||
color: $typoWhite;
|
||||
&:hover,&:focus,&:visited{
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
.open > a{
|
||||
background-color:transparent;
|
||||
}
|
||||
.dropdown-toggle span{
|
||||
margin-top: 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
background-color: white;
|
||||
&.pax {
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
& > li {
|
||||
line-height: 90%;
|
||||
}
|
||||
}
|
||||
&.daterange a {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
a{
|
||||
color:$colorBlack;
|
||||
}
|
||||
.selected a {
|
||||
background-color: $lightGrey;
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
padding-left: 20px;
|
||||
input{
|
||||
background-color:initial;
|
||||
color:$colorBlack;
|
||||
}
|
||||
}
|
||||
.input-group-btn{
|
||||
.btn{
|
||||
border:none;
|
||||
&:hover{
|
||||
background-color:transparent;
|
||||
color:#a94442;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
padding:10px 20px;
|
||||
display: block;
|
||||
}
|
||||
.searchbox__link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
padding-left: 4px;
|
||||
font-size: 90%;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f054";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
.searchpage{
|
||||
.form-control{
|
||||
height:auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-nav{
|
||||
float:none;
|
||||
}
|
||||
|
||||
form input, form input.form-control{
|
||||
padding:6px 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
> li{
|
||||
> a{
|
||||
border-radius: 4px;
|
||||
margin:0;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.daterange {
|
||||
.closebtn a {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
&.pax {
|
||||
max-height: 250px;
|
||||
overflow-y: scroll;
|
||||
> li {
|
||||
a {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-subpage .stoerer div[class^='col'] {
|
||||
margin-top: -200px;
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
|
||||
.ep-subpage .stoerer div[class^='col'] {
|
||||
margin-top: -168px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ep-subpage .stoerer div[class^='col'] .content{
|
||||
padding: 14px;
|
||||
[class*=headline-]{
|
||||
font-size: 22px;
|
||||
margin: 0 0 20px;
|
||||
font-weight: 300;
|
||||
line-height: 36px;
|
||||
text-transform: initial;
|
||||
span{
|
||||
font-size: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
br{
|
||||
display:none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ajaxtarget {
|
||||
position: relative;
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(white, 0.75);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#filterpanel {
|
||||
.checkbox label,
|
||||
.radio label {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.panel-group .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"]:after {
|
||||
font-family: 'FontAwesome';
|
||||
float: right;
|
||||
content: "\f078";
|
||||
}
|
||||
a[data-toggle="collapse"].collapsed:after {
|
||||
content: "\f054";
|
||||
}
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
.ep-sidebar{
|
||||
margin-bottom:20px;
|
||||
padding:20px 20px;
|
||||
background-color:$lighertGrey;
|
||||
&.btn{
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background-color:$typoWhite;
|
||||
border:2px solid $link;
|
||||
border-radius:4px;
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
width:100%;
|
||||
color:$link !important;
|
||||
&:hover,&:visited, &:focus{
|
||||
background-color:$typoWhite;
|
||||
outline: none;
|
||||
}
|
||||
&.active,
|
||||
&:active{
|
||||
color:$button;
|
||||
border-color: $button;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.concept-prg {
|
||||
color: $color-concept-prg;
|
||||
border-color: $color-concept-prg;
|
||||
}
|
||||
&.concept-evt {
|
||||
color: $color-concept-evt;
|
||||
border-color: $color-concept-evt;
|
||||
}
|
||||
&.concept-wkd {
|
||||
color: $color-concept-wkd;
|
||||
border-color: $color-concept-wkd;
|
||||
}
|
||||
&.concept-grp {
|
||||
color: $color-concept-grp;
|
||||
border-color: $color-concept-grp;
|
||||
}
|
||||
&.concept-ind {
|
||||
color: $color-concept-ind;
|
||||
border-color: $color-concept-ind;
|
||||
}
|
||||
&.concept-fam {
|
||||
color: $color-concept-fam;
|
||||
border-color: $color-concept-fam;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-snow{
|
||||
ul{
|
||||
list-style: none;
|
||||
padding-left:0;
|
||||
li{
|
||||
span{
|
||||
width:80px;
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-rating{
|
||||
display: block;
|
||||
color: inherit;
|
||||
i{
|
||||
color:$link;
|
||||
&:last-of-type{
|
||||
margin-right:20px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-facts{
|
||||
ul{
|
||||
list-style: none;
|
||||
padding-left:0;
|
||||
span{
|
||||
&:before{
|
||||
color:$icon;
|
||||
margin-right:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-next-travels{
|
||||
div{
|
||||
padding:20px 20px;
|
||||
background-color:$lighertGrey;
|
||||
}
|
||||
.btn{
|
||||
width:100%;
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
|
||||
//.ep-headbar,
|
||||
//div.ep-headbar{
|
||||
// padding:20px 20px;
|
||||
// font-size:17px;
|
||||
// font-weight: $font-weight-bold;
|
||||
// text-transform: uppercase;
|
||||
// padding-top:10px;
|
||||
// padding-bottom:10px;
|
||||
// background-color:$link;
|
||||
// color:$typoWhite;
|
||||
// margin-bottom: 30px;
|
||||
// &.concept-prg {
|
||||
// background-color: $color-concept-prg;
|
||||
// }
|
||||
// &.concept-evt {
|
||||
// background-color: $color-concept-evt;
|
||||
// }
|
||||
// &.concept-wkd {
|
||||
// background-color: $color-concept-wkd;
|
||||
// }
|
||||
// &.concept-grp {
|
||||
// background-color: $color-concept-grp;
|
||||
// }
|
||||
// &.concept-ind {
|
||||
// background-color: $color-concept-ind;
|
||||
// }
|
||||
// &.concept-fam {
|
||||
// background-color: $color-concept-fam;
|
||||
// }
|
||||
//}
|
||||
@@ -1,111 +0,0 @@
|
||||
|
||||
.navbar-carousel{
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
max-width: 1366px;
|
||||
overflow:hidden;
|
||||
|
||||
&.contentslider {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.stoerer{
|
||||
position:relative;
|
||||
> div{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
position:absolute;
|
||||
top: 156px;
|
||||
width: 100%;
|
||||
left:0;
|
||||
&:before{
|
||||
content:'';
|
||||
display:block;
|
||||
width:50%;
|
||||
height:100%;
|
||||
background-color:$bg;
|
||||
opacity: 0.5;
|
||||
position:absolute;
|
||||
}
|
||||
> div{
|
||||
padding:30px 30px;
|
||||
div{
|
||||
min-height: 85px;
|
||||
font-size:50px;
|
||||
line-height: 60px;
|
||||
font-weight: $font-weight-black;
|
||||
color:$typoWhite;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
p{
|
||||
font-size:18px;
|
||||
line-height: 24px;
|
||||
font-weight: $font-weight-medium;
|
||||
color:$typoWhite;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin-top:0;
|
||||
margin-bottom:20px;
|
||||
|
||||
.stoerer{
|
||||
> div{
|
||||
margin:0;
|
||||
padding:0;
|
||||
top:0;
|
||||
&:before{
|
||||
background-color:transparent;
|
||||
}
|
||||
> div{
|
||||
padding: 30px 15px;
|
||||
}
|
||||
div{
|
||||
div{
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
padding: 10px 30px 0px 30px;
|
||||
}
|
||||
p{
|
||||
display: none;
|
||||
}
|
||||
|
||||
div,p{
|
||||
position:relative;
|
||||
z-index:0;
|
||||
margin: 0;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #006db6;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
a{
|
||||
width:100%;
|
||||
margin:10px 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.carousel.slide {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
.ep-subpage{
|
||||
|
||||
position:relative;
|
||||
margin: 40px 0 20px;
|
||||
|
||||
div[class^='col']{
|
||||
margin-top: -200px;
|
||||
.content{
|
||||
[class*='headline-']{
|
||||
color:$typoWhite;
|
||||
}
|
||||
padding:17px 15px;
|
||||
background-color: rgba($link, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.stoerer{
|
||||
div[class^='col']{
|
||||
margin-top: 185px;
|
||||
width: auto;
|
||||
max-width: 50%;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
float: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
margin-top: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.content{
|
||||
color: $typoWhite;
|
||||
padding: 25px 30px 35px 30px;
|
||||
background-color: rgba($link, 0.6);
|
||||
[class*='headline-']{
|
||||
|
||||
font-size: 29px;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
line-height: 36px;
|
||||
text-transform: initial;
|
||||
span{
|
||||
font-size: 52px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1px;
|
||||
line-height: 70px;
|
||||
margin-bottom: -23px;
|
||||
display: block;
|
||||
}
|
||||
a{
|
||||
font-size:inherit;
|
||||
font-weight:900;
|
||||
color:inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ep-subpage-bg{
|
||||
height: 360px;
|
||||
max-width: 1366px;
|
||||
width:100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.container{
|
||||
max-width: 1366px;
|
||||
}
|
||||
|
||||
.picturecredit {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 0;
|
||||
background: rgba(white, 0.3);
|
||||
padding: 0.25em;
|
||||
font-size: 75%;
|
||||
color: $colorBlack;
|
||||
}
|
||||
|
||||
.ep-breadcrumb,.ep-backlink{
|
||||
margin-top: 80px;
|
||||
a{
|
||||
font-size:13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
div[class^='col']{
|
||||
width: 60%;
|
||||
margin-top: -170px;
|
||||
}
|
||||
|
||||
.ep-subpage-bg{
|
||||
height: 375px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $smartphoneWidth) {
|
||||
div[class^='col']{
|
||||
width: 100%;
|
||||
margin-top: -130px;
|
||||
&.pull-left{
|
||||
padding:0 40px;
|
||||
margin-top: -70px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.ep-property{
|
||||
&:last-of-type{
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ep-subpage-bg{
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.ep-backlink, .ep-breadcrumb{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
$font-weight-black: 900;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-medium: 300;
|
||||
|
||||
$max-width: 1366px;
|
||||
$tabletWidth: 1200px;
|
||||
$smartphoneWidth: 991px;
|
||||
-94
@@ -1,94 +0,0 @@
|
||||
//
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
//.container {
|
||||
// @include container-fixed;
|
||||
//
|
||||
// @media (min-width: $screen-sm-min) {
|
||||
// width: $container-sm;
|
||||
// }
|
||||
// @media (min-width: $screen-md-min) {
|
||||
// width: $container-md;
|
||||
// }
|
||||
// @media (min-width: $screen-lg-min) {
|
||||
// width: $container-lg;
|
||||
// }
|
||||
//}
|
||||
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
.container-fluid {
|
||||
@include container-fixed;
|
||||
}
|
||||
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
.row {
|
||||
@include make-row;
|
||||
}
|
||||
|
||||
.row-no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@include make-grid-columns;
|
||||
|
||||
|
||||
// Extra small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for extra small devices like
|
||||
// smartphones.
|
||||
|
||||
@include make-grid(xs);
|
||||
|
||||
|
||||
// Small grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||
// to tablets.
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include make-grid(sm);
|
||||
}
|
||||
|
||||
|
||||
// Medium grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||
|
||||
@media (min-width: $screen-md-min) {
|
||||
@include make-grid(md);
|
||||
}
|
||||
|
||||
|
||||
// Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
@include make-grid(lg);
|
||||
}
|
||||
-55
@@ -1,55 +0,0 @@
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Floats
|
||||
// -------------------------
|
||||
|
||||
.clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
.center-block {
|
||||
@include center-block;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
|
||||
// Toggling content
|
||||
// -------------------------
|
||||
|
||||
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.text-hide {
|
||||
@include text-hide;
|
||||
}
|
||||
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// For Affix plugin
|
||||
// -------------------------
|
||||
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
+12
@@ -2,3 +2,15 @@
|
||||
@apply bg-cover bg-no-repeat bg-center bg-ep-primary;
|
||||
background-image: url(../../images/background/winter.jpg);
|
||||
}
|
||||
|
||||
.bg-header-season-w {
|
||||
@screen md {
|
||||
background-image:url('../../images/background/header-winter.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
.bg-header-season-s {
|
||||
@screen md {
|
||||
background-image: url('../../images/background/header-sommer.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
.concept-badge {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
color: white;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
line-height: 34px;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
background-color: theme('colors.concept.default');
|
||||
|
||||
&--bdg {
|
||||
background-color: theme('colors.concept.bdg');
|
||||
}
|
||||
|
||||
&--skr {
|
||||
background-color: theme('colors.concept.skr');
|
||||
}
|
||||
|
||||
&--evt {
|
||||
background-color: theme('colors.concept.evt');
|
||||
}
|
||||
|
||||
&--fam {
|
||||
background-color: theme('colors.concept.fam');
|
||||
}
|
||||
|
||||
&--grp {
|
||||
background-color: theme('colors.concept.grp');
|
||||
}
|
||||
|
||||
&--prg {
|
||||
background-color: theme('colors.concept.prg');
|
||||
}
|
||||
|
||||
&--ind {
|
||||
background-color: theme('colors.concept.ind');
|
||||
}
|
||||
|
||||
&--wkd {
|
||||
background-color: theme('colors.concept.wkd');
|
||||
}
|
||||
|
||||
&--spz {
|
||||
background-color: theme('colors.concept.spz');
|
||||
}
|
||||
|
||||
&--epe {
|
||||
background-color: theme('colors.concept.epe');
|
||||
}
|
||||
|
||||
&--sfl {
|
||||
background-color: theme('colors.concept.sfl');
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-badge__background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
#bgouter {
|
||||
fill: theme('colors.ep.primary-50');
|
||||
}
|
||||
|
||||
#bginner {
|
||||
fill: theme('colors.ep.primary');
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge__content {
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 2vw;
|
||||
line-height: 1;
|
||||
padding-bottom: 4px;
|
||||
|
||||
@screen md {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
.button {
|
||||
@apply inline-block p-4 md:px-8;
|
||||
@apply uppercase leading-none text-center outline-none focus:outline-none;
|
||||
@apply inline-block px-4 py-2 md:px-8;
|
||||
@apply uppercase text-center outline-none focus:outline-none;
|
||||
@apply transition-colors;
|
||||
@apply bg-ep-secondary text-white;
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
.header-caption {
|
||||
padding: 16px 10px;
|
||||
background-color: theme('colors.ep.primary-80');
|
||||
margin-bottom: 8px;
|
||||
@screen md {
|
||||
max-width: 55%;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__headline {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
max-width: 60%;
|
||||
|
||||
@screen md {
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
min-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
@screen lg {
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__subline {
|
||||
display: none;
|
||||
@screen md {
|
||||
display: block;
|
||||
}
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
min-height: 70px;
|
||||
overflow-y: hidden;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-caption__text {
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
line-height: 22px;
|
||||
margin-bottom: 10px;
|
||||
color: white;
|
||||
@screen md {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
line-height: 50px;
|
||||
|
||||
@screen md {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__button {
|
||||
display: none;
|
||||
@screen md {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@screen md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
.product-teaser {
|
||||
}
|
||||
|
||||
.product-teaser__description {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.product-teaser__footer {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.product-teaser__headline {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.product-teaser__subline {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-teaser__price {
|
||||
display: block;
|
||||
flex: 0 1 110px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
|
||||
.product-teaser--wide & {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-teaser__pseudo-price {
|
||||
font-weight: 400;
|
||||
color: theme('colors.gray.600');
|
||||
}
|
||||
|
||||
.product-teaser__labels {
|
||||
flex: 1;
|
||||
|
||||
&--multiple {
|
||||
font-size: 12px;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-header {
|
||||
}
|
||||
|
||||
.product-header__title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-header__badge {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 0;
|
||||
right: 64px;
|
||||
|
||||
&--custom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 110px;
|
||||
}
|
||||
|
||||
&--skipass {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
top: 32px;
|
||||
right: 45px;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
|
||||
&--custom {
|
||||
bottom: auto;
|
||||
top: 36px;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
right: 5%;
|
||||
|
||||
&--skipass {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
top: 64px;
|
||||
right: -64px;
|
||||
|
||||
&--skipass {
|
||||
top: -110px;
|
||||
right: -150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teaser-label {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&--new {
|
||||
color: theme('colors.red.400');
|
||||
}
|
||||
|
||||
&--earlybird {
|
||||
color: theme('colors.red.400');
|
||||
}
|
||||
|
||||
&--low-contingent {
|
||||
color: theme('colors.red.400');
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
}
|
||||
|
||||
.product-detail__watchlist {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background-color: theme('colors.ep.primary');
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
padding: 4px 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: theme('colors.ep.secondary');
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:visited,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
.searchresult {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.searchresult-section {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.searchresult__info {
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item {
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid theme('colors.gray.200');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__headline {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-item__subline {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.searchresult-item__category {
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.searchresult-item__checklist {
|
||||
font-size: 18px;
|
||||
color: theme('colors.gray.800');
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.searchresult-item__featurelist {
|
||||
color: theme('colors.ep.primary');
|
||||
font-weight: 700;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-item__daterange {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: theme('colors.gray.800');
|
||||
padding-bottom: 8px;
|
||||
|
||||
i {
|
||||
color: theme('colors.ep.secondary');
|
||||
}
|
||||
|
||||
@screen md {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
@screen md {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__price {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 8px;
|
||||
|
||||
@screen md {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__pseudo-price {
|
||||
font-weight: 400;
|
||||
color: theme('colors.gray.600');
|
||||
}
|
||||
|
||||
.searchresult-item__button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-wrapper {
|
||||
|
||||
.form-group {
|
||||
&.loading input {
|
||||
background: url(../../images/ajax-loader-white.gif) no-repeat 95% center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.destinationselect__item {
|
||||
|
||||
&.selected a {
|
||||
background-color: theme('colors.gray.200');
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
@import "~@splidejs/splide/dist/css/splide-core.min.css";
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
|
||||
&--header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--teasers {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__item {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: left center;
|
||||
|
||||
&--product {
|
||||
height: 240px;
|
||||
@screen md {
|
||||
height: 400px;
|
||||
}
|
||||
@screen lg {
|
||||
height: 320px;
|
||||
}
|
||||
@screen xl {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider__zoom-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
@screen md {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.slider__thumbs {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider__thumb {
|
||||
display: block;
|
||||
width: 20%;
|
||||
padding: 0 1%;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination {
|
||||
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
|
||||
@apply list-none p-0;
|
||||
@apply flex items-center space-x-2;
|
||||
|
||||
&--header {
|
||||
bottom: 10px;
|
||||
@screen lg {
|
||||
bottom: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination__dot {
|
||||
@apply hide-text;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px theme('colors.gray.200');
|
||||
padding: 0;
|
||||
@screen md {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: theme('colors.ep.secondary');
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination__arrow {
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: theme('colors.ep.secondary');
|
||||
|
||||
.slider--teasers & {
|
||||
background-color: theme('colors.ep.secondary');
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 4px 2px 0 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&--prev {
|
||||
left: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.slider--teasers & {
|
||||
left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
&--next {
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.slider--teasers & {
|
||||
right: -28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination__zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
display: block;
|
||||
|
||||
&--prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
+397
@@ -0,0 +1,397 @@
|
||||
@keyframes stayvisible {
|
||||
from {
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes donothing {
|
||||
0% {
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: theme('colors.gray.800');
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: theme('colors.gray.800');
|
||||
}
|
||||
|
||||
//.slick-slide &--default {
|
||||
// margin: 20px 0 30px;
|
||||
//
|
||||
// @include mq($from: desktop) {
|
||||
// margin: 30px 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
&--concept {
|
||||
margin-top: 10px;
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
@screen lg {
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 59px -9px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.teaserbox__button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--flippable {
|
||||
perspective: 1000px;
|
||||
|
||||
margin: 20px 0 40px;
|
||||
|
||||
@screen lg {
|
||||
height: 450px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--landscape {
|
||||
|
||||
@screen md {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid theme('colors.gray.400');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__image {
|
||||
position: relative;
|
||||
|
||||
.teaserbox--landscape & {
|
||||
|
||||
@screen md {
|
||||
flex: 0 0 260px;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
flex: 0 0 320px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--social-media {
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
color: white;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.teaserbox__main {
|
||||
height: auto;
|
||||
border-width: 2px;
|
||||
border-color: theme('colors.gray.200');
|
||||
border-style: none solid;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.teaserbox--default & {
|
||||
min-height: 280px;
|
||||
|
||||
@screen md {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox--country &,
|
||||
.teaserbox--region &,
|
||||
.teaserbox--city & {
|
||||
min-height: 170px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.teaserbox--hotel & {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.teaserbox--product & {
|
||||
border-style: none solid solid;
|
||||
min-height: 250px;
|
||||
|
||||
@screen md {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox--concept & {
|
||||
min-height: 130px;
|
||||
border-style: none solid solid;
|
||||
}
|
||||
|
||||
.teaserbox--landscape & {
|
||||
height: auto;
|
||||
border-style: none;
|
||||
|
||||
@screen md {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox--searchresult & {
|
||||
padding: 16px 0;
|
||||
border: none;
|
||||
|
||||
@screen md {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&--fixed-height {
|
||||
height: 100px;
|
||||
border-bottom: 12px solid white;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__aside {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
border-width: 2px;
|
||||
border-color: theme('colors.gray.600');
|
||||
border-style: none solid solid;
|
||||
|
||||
@screen md {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 300px;
|
||||
border-style: solid solid solid none;
|
||||
}
|
||||
|
||||
.teaserbox--searchresult &,
|
||||
.teaserbox--landscape & {
|
||||
border: none;
|
||||
|
||||
@screen md {
|
||||
flex: 0 0 220px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__header {
|
||||
padding-bottom: 8px;
|
||||
|
||||
@screen md {
|
||||
min-height: 100px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.teaserbox--searchresult & {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__flag {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-style: none solid solid none;
|
||||
border-width: 2px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.teaserbox__button {
|
||||
margin: -2px 0 0;
|
||||
|
||||
&--fadein {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.teaserbox--flippable & {
|
||||
|
||||
@screen lg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__flip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: theme('colors.gray.800');
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: theme('colors.gray.800');
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
transition: 0.5s ease-out;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: visible;
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side {
|
||||
|
||||
@screen lg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side--front {
|
||||
|
||||
@screen lg {
|
||||
animation: stayvisible 0.5s both;
|
||||
visibility: visible;
|
||||
transform: rotateY(0deg);
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
animation: stayvisible 0.5s both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side--back {
|
||||
|
||||
@screen lg {
|
||||
animation: stayvisible 0.5s both;
|
||||
visibility: hidden;
|
||||
transform: rotateY(-180deg);
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
animation: stayvisible 0.5s both;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__back {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 15px 20px;
|
||||
background-color: theme('colors.ep.primary');
|
||||
color: white;
|
||||
|
||||
@screen lg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox-watchlist {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: block;
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited,
|
||||
&:active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
padding: 4px 0 0 28px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -16,69 +16,12 @@
|
||||
}
|
||||
|
||||
// LEGACY FROM HERE
|
||||
@import "variables";
|
||||
@import "color";
|
||||
|
||||
@import "remix/variables";
|
||||
@import "remix/colors";
|
||||
@import "bootstrap";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
// remix
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "~bourbon/app/assets/stylesheets/bourbon";
|
||||
@import "remix/breakpoints";
|
||||
@import "remix/mixins";
|
||||
//@import "remix/base";
|
||||
@import "remix/badges";
|
||||
//@import "remix/buttons";
|
||||
//@import "remix/area-nav";
|
||||
//@import "remix/pagehead";
|
||||
@import "remix/slider";
|
||||
@import "remix/header";
|
||||
//@import "remix/herounit";
|
||||
//@import "remix/calendar";
|
||||
//@import "remix/partnerlogos";
|
||||
//@import "remix/osm-map";
|
||||
//@import "remix/video";
|
||||
//@import "remix/newsletterform";
|
||||
//@import "remix/layout";
|
||||
@import "remix/teaserbox";
|
||||
@import "remix/searchresult";
|
||||
//@import "remix/tables";
|
||||
@import "remix/product";
|
||||
//@import "remix/socialmedia";
|
||||
//@import "remix/datepicker";
|
||||
//@import "remix/sidebar";
|
||||
//@import "remix/blog";
|
||||
//@import "remix/forms";
|
||||
//@import "remix/contactnav";
|
||||
//@import "remix/faq";
|
||||
//@import "remix/destination-pulldown";
|
||||
//@import "remix/watchlist";
|
||||
//@import "remix/calculator";
|
||||
|
||||
// core config
|
||||
//@import "fonts";
|
||||
//@import "base";
|
||||
//@import "btn";
|
||||
//@import "input";
|
||||
//@import "breadcrumb";
|
||||
//@import "modal";
|
||||
|
||||
//components
|
||||
//@import "mainnavi";
|
||||
//@import "footer";
|
||||
//@import "searchbar";
|
||||
@import "searchbox";
|
||||
//@import "newsletter";
|
||||
//@import "disturber";
|
||||
//@import "product";
|
||||
@import "sidebar";
|
||||
@import "subpage";
|
||||
@import "searchpage";
|
||||
@import "employee";
|
||||
@import "components/badges";
|
||||
@import "components/header";
|
||||
@import "components/product";
|
||||
@import "components/searchresult";
|
||||
@import "components/slider";
|
||||
@import "components/teaserbox";
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@@ -129,4 +72,11 @@
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 2px theme('colors.gray.400');
|
||||
}
|
||||
.hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@import "variables";
|
||||
@import "color";
|
||||
@import "color-boarderweek";
|
||||
|
||||
@import "remix/variables";
|
||||
@import "remix/colors";
|
||||
@import "remix/colors_boarderweek";
|
||||
|
||||
// vendor styles
|
||||
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
// remix
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "~bourbon/app/assets/stylesheets/bourbon";
|
||||
@import "remix/breakpoints";
|
||||
@import "remix/mixins";
|
||||
@import "remix/base";
|
||||
@import "remix/badges";
|
||||
@import "remix/buttons";
|
||||
@import "remix/area-nav";
|
||||
@import "remix/pagehead";
|
||||
@import "remix/slider";
|
||||
@import "remix/header";
|
||||
@import "remix/herounit";
|
||||
@import "remix/calendar";
|
||||
@import "remix/partnerlogos";
|
||||
@import "remix/osm-map";
|
||||
@import "remix/video";
|
||||
@import "remix/newsletterform";
|
||||
@import "remix/layout";
|
||||
@import "remix/teaserbox";
|
||||
@import "remix/searchresult";
|
||||
@import "remix/tables";
|
||||
@import "remix/product";
|
||||
@import "remix/socialmedia";
|
||||
@import "remix/contactnav";
|
||||
@import "remix/faq";
|
||||
@import "remix/watchlist";
|
||||
|
||||
// core config
|
||||
@import "fonts";
|
||||
@import "base";
|
||||
@import "btn";
|
||||
@import "input";
|
||||
@import "breadcrumb";
|
||||
@import "modal";
|
||||
|
||||
//components
|
||||
@import "mainnavi";
|
||||
@import "footer";
|
||||
@import "searchbar";
|
||||
@import "searchbox";
|
||||
@import "newsletter";
|
||||
@import "disturber";
|
||||
@import "product";
|
||||
@import "sidebar";
|
||||
@import "slider";
|
||||
@import "subpage";
|
||||
@import "searchpage";
|
||||
@import "employee";
|
||||
|
||||
//events
|
||||
@import "events";
|
||||
@@ -1,67 +0,0 @@
|
||||
@import "variables";
|
||||
@import "color";
|
||||
@import "color-snowzone";
|
||||
|
||||
@import "remix/variables";
|
||||
@import "remix/colors";
|
||||
@import "remix/colors_snowzone";
|
||||
|
||||
// vendor styles
|
||||
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
// remix
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "~bourbon/app/assets/stylesheets/bourbon";
|
||||
@import "remix/breakpoints";
|
||||
@import "remix/mixins";
|
||||
@import "remix/base";
|
||||
@import "remix/badges";
|
||||
@import "remix/buttons";
|
||||
@import "remix/area-nav";
|
||||
@import "remix/pagehead";
|
||||
@import "remix/slider";
|
||||
@import "remix/header";
|
||||
@import "remix/herounit";
|
||||
@import "remix/calendar";
|
||||
@import "remix/partnerlogos";
|
||||
@import "remix/osm-map";
|
||||
@import "remix/video";
|
||||
@import "remix/newsletterform";
|
||||
@import "remix/layout";
|
||||
@import "remix/teaserbox";
|
||||
@import "remix/searchresult";
|
||||
@import "remix/tables";
|
||||
@import "remix/product";
|
||||
@import "remix/socialmedia";
|
||||
@import "remix/contactnav";
|
||||
@import "remix/faq";
|
||||
@import "remix/watchlist";
|
||||
|
||||
// core config
|
||||
@import "fonts";
|
||||
@import "base";
|
||||
@import "btn";
|
||||
@import "input";
|
||||
@import "breadcrumb";
|
||||
@import "modal";
|
||||
|
||||
//components
|
||||
@import "mainnavi";
|
||||
@import "footer";
|
||||
@import "searchbar";
|
||||
@import "searchbox";
|
||||
@import "newsletter";
|
||||
@import "disturber";
|
||||
@import "product";
|
||||
@import "sidebar";
|
||||
@import "slider";
|
||||
@import "subpage";
|
||||
@import "searchpage";
|
||||
@import "employee";
|
||||
|
||||
//events
|
||||
@import "events";
|
||||
@import "addons_snowzone";
|
||||
@@ -1,66 +0,0 @@
|
||||
@import "variables";
|
||||
@import "color";
|
||||
@import "color-unichamp";
|
||||
|
||||
@import "remix/variables";
|
||||
@import "remix/colors";
|
||||
@import "remix/colors_unichamp";
|
||||
|
||||
// vendor styles
|
||||
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
|
||||
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
// remix
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "~bourbon/app/assets/stylesheets/bourbon";
|
||||
@import "remix/breakpoints";
|
||||
@import "remix/mixins";
|
||||
@import "remix/base";
|
||||
@import "remix/badges";
|
||||
@import "remix/buttons";
|
||||
@import "remix/area-nav";
|
||||
@import "remix/pagehead";
|
||||
@import "remix/slider";
|
||||
@import "remix/header";
|
||||
@import "remix/herounit";
|
||||
@import "remix/calendar";
|
||||
@import "remix/partnerlogos";
|
||||
@import "remix/osm-map";
|
||||
@import "remix/video";
|
||||
@import "remix/newsletterform";
|
||||
@import "remix/layout";
|
||||
@import "remix/teaserbox";
|
||||
@import "remix/searchresult";
|
||||
@import "remix/tables";
|
||||
@import "remix/product";
|
||||
@import "remix/socialmedia";
|
||||
@import "remix/contactnav";
|
||||
@import "remix/faq";
|
||||
@import "remix/watchlist";
|
||||
|
||||
// core config
|
||||
@import "fonts";
|
||||
@import "base";
|
||||
@import "btn";
|
||||
@import "input";
|
||||
@import "breadcrumb";
|
||||
@import "modal";
|
||||
|
||||
//components
|
||||
@import "mainnavi";
|
||||
@import "footer";
|
||||
@import "searchbar";
|
||||
@import "searchbox";
|
||||
@import "newsletter";
|
||||
@import "disturber";
|
||||
@import "product";
|
||||
@import "sidebar";
|
||||
@import "slider";
|
||||
@import "subpage";
|
||||
@import "searchpage";
|
||||
@import "employee";
|
||||
|
||||
//events
|
||||
@import "events";
|
||||
@@ -1,107 +0,0 @@
|
||||
.area-nav {
|
||||
width: 100%;
|
||||
height: $area-nav-height;
|
||||
background: #006db6 url(../../images/polygon.jpg) no-repeat top center;
|
||||
background-size: cover;
|
||||
@include mq($from: desktop) {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.area-nav__inner {
|
||||
@include container();
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.area-nav__list {
|
||||
position: absolute;
|
||||
top: $area-nav-height;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
@include mq($from: desktop) {
|
||||
display: flex !important; // Required bc. of jquery animation
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
font-size: 0; // Removes gaps when list items rendered inline-block
|
||||
}
|
||||
}
|
||||
|
||||
.area-nav__list-item {
|
||||
font-size: 1rem; // Removes gaps when list items rendered inline-block
|
||||
text-align: center;
|
||||
border-left: none;
|
||||
border-top: 1px solid #404040;
|
||||
background-color: #009fe3;
|
||||
&:last-child {
|
||||
border-bottom: 1px solid #404040;
|
||||
border-right: none;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
flex-grow: 1;
|
||||
background: none;
|
||||
border-top: none;
|
||||
border-left: 1px solid #404040;
|
||||
&:last-child {
|
||||
border-right: 1px solid #404040;
|
||||
border-bottom: none;
|
||||
}
|
||||
font-size: 1rem;
|
||||
width: percentage(1/6);
|
||||
&--icon {
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-nav__link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
&:hover, &:active, &:focus {
|
||||
color: white;
|
||||
}
|
||||
padding: 10px 0;
|
||||
&.active {
|
||||
background-color: $color-brand-secondary;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
font-size: 16px;
|
||||
&:hover {
|
||||
background-color: $color-brand-secondary;
|
||||
}
|
||||
.area-nav__list-item--icon & {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-nav__trigger {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
background-color: #006db6;
|
||||
color: white;
|
||||
&:hover, &:active, &:focus {
|
||||
color: white;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.open .area-nav__trigger-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
.concept-badge {
|
||||
@include size(100% 34px);
|
||||
color: white;
|
||||
padding:0 10px;
|
||||
margin: 0;
|
||||
line-height: 34px;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
background-color: $color-concept-default;
|
||||
|
||||
&--bdg {
|
||||
background-color: $color-concept-bdg;
|
||||
}
|
||||
&--skr {
|
||||
background-color: $color-concept-skr;
|
||||
}
|
||||
&--evt {
|
||||
background-color: $color-concept-evt;
|
||||
}
|
||||
&--fam {
|
||||
background-color: $color-concept-fam;
|
||||
}
|
||||
&--grp {
|
||||
background-color: $color-concept-grp;
|
||||
}
|
||||
&--prg {
|
||||
background-color: $color-concept-prg;
|
||||
}
|
||||
&--ind {
|
||||
background-color: $color-concept-ind;
|
||||
}
|
||||
&--wkd {
|
||||
background-color: $color-concept-wkd;
|
||||
}
|
||||
&--spz {
|
||||
background-color: $color-concept-spz;
|
||||
}
|
||||
&--epe {
|
||||
background-color: $color-concept-epe;
|
||||
}
|
||||
&--sfl {
|
||||
background-color: $color-concept-sfl;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-badge__background {
|
||||
@include size(100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
#bgouter {
|
||||
fill: rgba($color-brand-primary, 0.5);
|
||||
}
|
||||
|
||||
#bginner {
|
||||
fill: $color-brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge__content {
|
||||
position: absolute;
|
||||
@include size(60%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 2vw;
|
||||
line-height: 1;
|
||||
padding-bottom: 4px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -1,245 +0,0 @@
|
||||
// General
|
||||
//html {
|
||||
// box-sizing: border-box;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// font-size: 16px;
|
||||
//}
|
||||
//
|
||||
//*, *::after, *::before {
|
||||
// box-sizing: inherit;
|
||||
//}
|
||||
//
|
||||
//body {
|
||||
// font-family: "Lato", $helvetica;
|
||||
// font-size: 16px;
|
||||
// line-height: 26px;
|
||||
// color: $color-font-base;
|
||||
// margin: 0;
|
||||
// padding: 0 0 40px;
|
||||
// @include mq($from: mobile-landscape) {
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// .wf-loading & {
|
||||
// font-family: $helvetica;
|
||||
// }
|
||||
//}
|
||||
|
||||
//a {
|
||||
// color: $color-brand-primary;
|
||||
//
|
||||
// &:active,
|
||||
// &:hover {
|
||||
// color: $color-brand-primary;
|
||||
// text-decoration:none;
|
||||
// outline: none;
|
||||
// }
|
||||
//
|
||||
// &:focus {
|
||||
// color: $color-font-base;
|
||||
// text-decoration:none;
|
||||
// outline: none;
|
||||
// }
|
||||
//
|
||||
// &:visited {
|
||||
// outline: none;
|
||||
// }
|
||||
//
|
||||
// .alert & {
|
||||
// color: inherit;
|
||||
// font-weight: $font-weight-bold;
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
//}
|
||||
|
||||
//s {
|
||||
// opacity: 0.75;
|
||||
//}
|
||||
|
||||
// Block elements
|
||||
//ul {
|
||||
// padding: 0 0 0 18px;
|
||||
|
||||
//&.plain-list {
|
||||
// list-style: none;
|
||||
// padding: 0;
|
||||
//}
|
||||
//&.check-list {
|
||||
// list-style: none;
|
||||
// padding: 0;
|
||||
//
|
||||
// li {
|
||||
// position: relative;
|
||||
// padding-left: 24px;
|
||||
// }
|
||||
//
|
||||
// li::before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// font-family: 'FontAwesome';
|
||||
// content: "\f00c";
|
||||
// font-size: 18px;
|
||||
// color: $color-brand-primary;
|
||||
// }
|
||||
//
|
||||
// &--inverted {
|
||||
// li::before {
|
||||
// content: "\f058";
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//&.inline-list {
|
||||
// display: flex;
|
||||
// > li {
|
||||
// flex: 1;
|
||||
// }
|
||||
//}
|
||||
//}
|
||||
|
||||
//ol {
|
||||
// padding: 0 0 0 18px;
|
||||
//}
|
||||
|
||||
// Images
|
||||
//.scale {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// display: block;
|
||||
//}
|
||||
|
||||
//// Headlines
|
||||
//h1 {
|
||||
// font-size: 28px;
|
||||
// font-weight: 400;
|
||||
// color: black;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// font-size: 36px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//h2 {
|
||||
// font-size: 24px;
|
||||
// font-weight: 400;
|
||||
// color: black;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// font-size: 32px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//h3 {
|
||||
// font-size: 20px;
|
||||
// font-weight: 400;
|
||||
// color: black;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// font-size: 26px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//h4 {
|
||||
// font-size: 16px;
|
||||
// font-weight: 400;
|
||||
// color: black;
|
||||
// text-transform: uppercase;
|
||||
// margin-bottom: 10px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// font-size: 18px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.headline {
|
||||
// display: block;
|
||||
//
|
||||
// &--primary {
|
||||
// @extend h1;
|
||||
// }
|
||||
//
|
||||
// &--secondary {
|
||||
// @extend h2;
|
||||
// }
|
||||
//
|
||||
// &--3 {
|
||||
// @extend h3;
|
||||
// }
|
||||
//
|
||||
// &--4 {
|
||||
// @extend h4;
|
||||
// }
|
||||
//
|
||||
// &--disturber {
|
||||
// color: white;
|
||||
// text-align: center;
|
||||
// text-transform: none;
|
||||
// margin-bottom: 20px;
|
||||
// font-weight: 700;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// text-transform: uppercase;
|
||||
// text-align: left;
|
||||
// }
|
||||
//
|
||||
// &-large {
|
||||
// @include mq($from: desktop) {
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--underlined:after{
|
||||
// content:'';
|
||||
// display:block;
|
||||
// border-bottom:4px solid $color-brand-primary;
|
||||
// padding-bottom: 30px;
|
||||
// margin-bottom: 35px;
|
||||
// width: 80px;
|
||||
// }
|
||||
//
|
||||
// &--teaser {
|
||||
// min-height: 54px;
|
||||
// }
|
||||
//
|
||||
// &--light {
|
||||
// font-weight: 300;
|
||||
// }
|
||||
//
|
||||
// &--footer {
|
||||
// color: white;
|
||||
// font-weight: 700;
|
||||
// }
|
||||
//
|
||||
// &--nav {
|
||||
// display: inline-block;
|
||||
// color: white;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// color: black;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.headline__subline {
|
||||
// display: block;
|
||||
// font-size: 14px;
|
||||
// text-transform: uppercase;
|
||||
// font-weight: 300;
|
||||
// letter-spacing: 2px;
|
||||
// line-height: 24px;
|
||||
// padding-bottom: 8px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// line-height: 40px;
|
||||
// padding-bottom: 0;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
//}
|
||||
|
||||
//strong {
|
||||
// &.uppercase {
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
//}
|
||||
@@ -1,60 +0,0 @@
|
||||
//.blog-entry {
|
||||
// width: 100%;
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 20px;
|
||||
// }
|
||||
//}
|
||||
|
||||
//.blog-entry__info {
|
||||
// margin: 0 0 20px;
|
||||
//}
|
||||
|
||||
//.blog-entry__inner {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// flex-direction: row;
|
||||
// }
|
||||
//}
|
||||
|
||||
//.blog-entry__image {
|
||||
// width: 100%;
|
||||
// margin-bottom: 8px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// width: percentage(1/2);
|
||||
// }
|
||||
//}
|
||||
|
||||
//.blog-entry__info {
|
||||
// font-style: italic;
|
||||
// font-size: 90%;
|
||||
//}
|
||||
|
||||
//.blog-entry__headline {
|
||||
// margin-top: 0;
|
||||
//}
|
||||
|
||||
//.blog-entry__teaser {
|
||||
// width: 100%;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// padding-left: 16px;
|
||||
// width: percentage(1/2);
|
||||
// }
|
||||
//
|
||||
// p {
|
||||
// margin-bottom: 16px;
|
||||
//
|
||||
// &:last-child {
|
||||
// margin-bottom: 8px;
|
||||
// }
|
||||
//
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.blog-tags {
|
||||
// list-style: none;
|
||||
// padding: 0;
|
||||
//}
|
||||
@@ -1,8 +0,0 @@
|
||||
// Breakpoints
|
||||
$mq-breakpoints: (
|
||||
mobile-landscape: 512px,
|
||||
tablet: 768px,
|
||||
desktop: 992px,
|
||||
wide: 1200px
|
||||
);
|
||||
@import "~sass-mq";
|
||||
@@ -1,94 +0,0 @@
|
||||
.button {
|
||||
background-color: $color-button-background;
|
||||
color: $color-button-foreground;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
line-height: inherit;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
padding: 10px 24px;
|
||||
}
|
||||
|
||||
&--active,
|
||||
&--secondary {
|
||||
background-color: $color-brand-primary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: darken($color-brand-secondary, 20%);
|
||||
}
|
||||
|
||||
&--light {
|
||||
color: $color-brand-primary;
|
||||
font-weight: 700;
|
||||
background-color: white;
|
||||
border: 2px solid $color-brand-primary;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: white;
|
||||
color: $color-brand-primary;
|
||||
}
|
||||
|
||||
&.button--active {
|
||||
color: $color-brand-secondary;
|
||||
border-color: $color-brand-secondary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--full,
|
||||
&--sidebar {
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&--sidebar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 5px 10px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
&--alert {
|
||||
background-color: $color-label-danger;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&--booking {
|
||||
background-color: $color-button-booking;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&--action {
|
||||
background-color: $color-label-success;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&--mute {
|
||||
background-color: $color-grey-dark;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-group &:not(:last-of-type) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonfull {
|
||||
@extend .button;
|
||||
@extend .button--full;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.calculator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calculator__loading {
|
||||
position: absolute;
|
||||
@include size(100%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(white, 0.5);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
.calendar {
|
||||
position: relative;
|
||||
|
||||
&--single {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__range {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.calendar__month {
|
||||
&--single {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__select {
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__loading {
|
||||
position: absolute;
|
||||
@include size(100%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(white, 0.5);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__days {
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.label-success-danger {
|
||||
background: linear-gradient(to bottom right, $color-label-success 50%, $color-label-danger 50%);
|
||||
}
|
||||
|
||||
.label-success-warning {
|
||||
background: linear-gradient(to bottom right, $color-label-success 50%, $color-label-warning 50%);
|
||||
}
|
||||
|
||||
.label-danger-success {
|
||||
background: linear-gradient(to bottom right, $color-label-danger 50%, $color-label-success 50%);
|
||||
}
|
||||
|
||||
.label-warning-success {
|
||||
background: linear-gradient(to bottom right, $color-label-warning 50%, $color-label-success 50%);
|
||||
}
|
||||
|
||||
.label-danger-warning {
|
||||
background: linear-gradient(to bottom right, $color-label-danger 50%, $color-label-warning 50%);
|
||||
}
|
||||
|
||||
.label-warning-danger {
|
||||
background: linear-gradient(to bottom right, $color-label-warning 50%, $color-label-danger 50%);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
$color-brand-primary: #009fe3;
|
||||
$color-brand-secondary: #f9cb0d;
|
||||
|
||||
// Bootstrap label colours
|
||||
$color-label-success: #5cb85c;
|
||||
$color-label-info: #5bc0de;
|
||||
$color-label-warning: #f0ad4e;
|
||||
$color-label-danger: #d9534f;
|
||||
|
||||
$color-grey-lighter: #f0f0f0;
|
||||
$color-grey-light: #eeedee;
|
||||
$color-grey-dark: #999;
|
||||
$color-grey: #c7c7c7;
|
||||
$color-font-base: #404040;
|
||||
$color-font-light: $color-grey-dark;
|
||||
|
||||
// Buttons
|
||||
$color-button-background: $color-brand-secondary;
|
||||
$color-button-foreground: white;
|
||||
$color-button-booking: $color-label-danger;
|
||||
|
||||
// Concepts
|
||||
$color-concept-default: #005ca9;
|
||||
$color-concept-bdg: $color-concept-default;
|
||||
$color-concept-skr: $color-concept-default;
|
||||
$color-concept-evt: #ed5454;
|
||||
$color-concept-fam: #7ca7d5;
|
||||
$color-concept-grp: #ffa300;
|
||||
$color-concept-prg: #005ca9;
|
||||
$color-concept-ind: #009fe3;
|
||||
$color-concept-wkd: #44d04e;
|
||||
$color-concept-spz: #436a8a;
|
||||
$color-concept-epe: #436a8a;
|
||||
$color-concept-sfl: #999;
|
||||
|
||||
// Teaser labels
|
||||
$color-label-earlybird: #ed5454;
|
||||
$color-label-low-contingent: #d9534f;
|
||||
-5
@@ -1,5 +0,0 @@
|
||||
$color-brand-primary: #f0bc44;
|
||||
|
||||
$color-button-background: #ee525a;
|
||||
$color-button-foreground: white;
|
||||
$color-button-booking: $color-label-success;
|
||||
-5
@@ -1,5 +0,0 @@
|
||||
$color-brand-primary: #82C3C6;
|
||||
|
||||
$color-button-background: #f9c33d;
|
||||
$color-button-foreground: white;
|
||||
$color-button-booking: $color-label-success;
|
||||
-5
@@ -1,5 +0,0 @@
|
||||
$color-brand-primary: #b5e400;
|
||||
|
||||
$color-button-background: #19a3dc;
|
||||
$color-button-foreground: white;
|
||||
$color-button-booking: $color-label-success;
|
||||
@@ -1,151 +0,0 @@
|
||||
.ep-contactnav{
|
||||
right: auto;
|
||||
left: 0;
|
||||
z-index: 400;
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
background-color: $color-brand-primary;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
@include mq($from: mobile-landscape) {
|
||||
top: 30vh;
|
||||
bottom: auto;
|
||||
right: 0;
|
||||
left: auto;
|
||||
width: auto;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a{
|
||||
display: block;
|
||||
border: none;
|
||||
transition: all .5s;
|
||||
color: white;
|
||||
@include size(20% 40px);
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid white;
|
||||
}
|
||||
|
||||
@include mq($from: mobile-landscape) {
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
&:not(:first-child) {
|
||||
border: none;
|
||||
}
|
||||
@include size(auto 35px);
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
margin: 8px 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
right:-120px;
|
||||
position:absolute;
|
||||
transition: all .5s;
|
||||
width:160px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
@include mq($from: mobile-landscape) {
|
||||
width: 37px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 7px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
display: none;
|
||||
@include mq($from: mobile-landscape) {
|
||||
display: inline-block;
|
||||
background-color: #606060;
|
||||
padding: 4px;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($from: mobile-landscape) {
|
||||
&.english {
|
||||
top: 0;
|
||||
}
|
||||
&.phone {
|
||||
top: 44px;
|
||||
width: 190px;
|
||||
right: -150px;
|
||||
div {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
&.whatsapp{
|
||||
top: 88px;
|
||||
width: 350px;
|
||||
right: -310px;
|
||||
div{
|
||||
width:310px;
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
&.instagram {
|
||||
top: 176px
|
||||
}
|
||||
|
||||
&.youtube {
|
||||
top: 220px;
|
||||
}
|
||||
&.watchlist {
|
||||
top: 264px;
|
||||
}
|
||||
&:hover{
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-red{
|
||||
background-color: #F75562 ;
|
||||
}
|
||||
.bg-green{
|
||||
background-color: #43C757;
|
||||
}
|
||||
.bg-yellow{
|
||||
background-color: #FECB00;
|
||||
}
|
||||
.bg-blue{
|
||||
background-color: #006db6;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-contactnav__icon {
|
||||
display: block;
|
||||
height: 22px;
|
||||
width: auto;
|
||||
|
||||
@include mq($from: mobile-landscape) {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
@import "~flatpickr/dist/flatpickr.css";
|
||||
|
||||
.flatpickr-calendar {
|
||||
box-shadow: none;
|
||||
&.inline {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.daterange__panel {
|
||||
padding: 8px 0;
|
||||
|
||||
.flatpickr-calendar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange__headline,
|
||||
.daterange__presets {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.daterange__presets {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.daterange__preset {
|
||||
display: block;
|
||||
color: $color-font-base;
|
||||
|
||||
.fa {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.daterange__button {
|
||||
color: $color-font-base;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
width: percentage(1/2);
|
||||
}
|
||||
|
||||
.flatpickr-input:not(.datepicker--visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
//box-shadow: none;
|
||||
|
||||
&.inline {
|
||||
border: 1px solid $color-grey-light;
|
||||
}
|
||||
|
||||
&.centered {
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
border-radius: 4px;
|
||||
margin: 3px 0;
|
||||
|
||||
&.available:not(.inRange) {
|
||||
color: white;
|
||||
background-color: $color-label-success;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day.selected {
|
||||
background: $color-brand-secondary;
|
||||
border-color: $color-brand-secondary;
|
||||
|
||||
&.startRange, &.endRange {
|
||||
background: $color-brand-secondary;
|
||||
border-color: $color-brand-secondary;
|
||||
}
|
||||
}
|
||||
-41
@@ -1,41 +0,0 @@
|
||||
.destination-pulldown {
|
||||
width: 100%;
|
||||
a {
|
||||
padding: 0 !important;
|
||||
&:hover {
|
||||
color: $color-brand-primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.destination-pulldown__section {
|
||||
padding: 12px;
|
||||
@include mq($from: tablet) {
|
||||
display: flex;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.destination-pulldown__column {
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
min-width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.destination-pulldown__flag {
|
||||
width: 20px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
padding-right: 4px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.destination-pulldown__reset {
|
||||
color: $color-font-base;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.faq-filter {
|
||||
|
||||
}
|
||||
|
||||
.faq-filter__field {
|
||||
border-color: rgba(white, 0.5);
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@include inputPlaceholderColor(rgba(white, 0.5));
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form__overlay {
|
||||
@include size(100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(white, 0.95);
|
||||
}
|
||||
|
||||
.form__overlay__text {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
.header-caption {
|
||||
padding: 16px 10px;
|
||||
background-color: rgba($color-brand-primary, 0.75);
|
||||
margin-bottom: 8px;
|
||||
@include mq($from: tablet) {
|
||||
max-width: 55%;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__headline {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
max-width: 60%;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
min-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__subline {
|
||||
display: none;
|
||||
@include mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
min-height: 70px;
|
||||
overflow-y: hidden;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-caption__text {
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
line-height: 22px;
|
||||
margin-bottom: 10px;
|
||||
color: white;
|
||||
@include mq($from: tablet) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
line-height: 50px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-caption__button {
|
||||
display: none;
|
||||
@include mq($from: tablet) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
//.herounit {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// max-width: $header-width-max;
|
||||
// margin: 0 auto;
|
||||
// overflow: hidden;
|
||||
// height: 400px;
|
||||
// @include mq($from: tablet) {
|
||||
// height: 430px;
|
||||
// }
|
||||
// @include mq($from: desktop) {
|
||||
// height: 580px;
|
||||
// }
|
||||
// &--event {
|
||||
// height: auto;
|
||||
// }
|
||||
//}
|
||||
|
||||
//.herounit__image {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
// //background-size: cover;
|
||||
// //background-position: right center;
|
||||
// @include mq($from: tablet) {
|
||||
// height: 100%;
|
||||
// }
|
||||
//}
|
||||
|
||||
.herounit__main {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.herounit__inner {
|
||||
@include mq($from: desktop) {
|
||||
@include container(960px);
|
||||
}
|
||||
@include mq($from: wide) {
|
||||
@include container();
|
||||
}
|
||||
}
|
||||
|
||||
.herounit__badge {
|
||||
position: absolute;
|
||||
|
||||
&--skipass {
|
||||
top: 0;
|
||||
right: 16px;
|
||||
width: 60px;
|
||||
height: auto;
|
||||
@include mq($from: tablet) {
|
||||
width: 100px;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
width: auto;
|
||||
top: 45px;
|
||||
right: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
&--custom {
|
||||
@include size(200px);
|
||||
top: 16px;
|
||||
right: auto;
|
||||
left: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
top: 45px;
|
||||
left: auto;
|
||||
right: 17%;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
top: 75px;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.herounit--event & {
|
||||
@include size(100px);
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
left: auto;
|
||||
z-index: 10;
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
.custom-badge__subtitle {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include size(200px);
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.custom-badge__subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
display: block;
|
||||
top: 180px;
|
||||
right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.column--sidebar {
|
||||
padding-bottom: 20px;
|
||||
.sidebar--desktop & {
|
||||
display: none;
|
||||
@include mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar--mobile {
|
||||
padding-bottom: 20px;
|
||||
display: block;
|
||||
@include mq($from: tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.column--main {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
// Container for horizontal alignment
|
||||
@mixin container($width: $page-width-max) {
|
||||
max-width: $width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include clearfix();
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.newsletterform {
|
||||
border: none;
|
||||
height: 360px;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.osm-map {
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.leaflet-top, .leaflet-bottom {
|
||||
z-index: 490 !important;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
//.pagehead {
|
||||
// position: relative;
|
||||
// @include container($header-width-max);
|
||||
// margin-bottom: 20px;
|
||||
// height: 320px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// height: 360px;
|
||||
// }
|
||||
//
|
||||
// @include mq($from: desktop) {
|
||||
// margin-top: 80px;
|
||||
//
|
||||
// .ep-core-events & {
|
||||
// margin-top: 160px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .frontpage & {
|
||||
// height: 380px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// height: 410px;
|
||||
// }
|
||||
//
|
||||
// @include mq($from: desktop) {
|
||||
// height: 580px;
|
||||
// margin-bottom: 0;
|
||||
// margin-top: 120px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// .subpage & {
|
||||
// @include mq($from: desktop) {
|
||||
// margin-top: 185px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--searchresult {
|
||||
// height: 10px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// height: 160px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
//.pagehead__image {
|
||||
// position: relative;
|
||||
// background-size: cover;
|
||||
// background-position: center center;
|
||||
// background-repeat: no-repeat;
|
||||
// height: 240px;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// height: 100%;
|
||||
// }
|
||||
//
|
||||
// .pagehead--searchresult & {
|
||||
// display: none;
|
||||
// height: 100%;
|
||||
//
|
||||
// @include mq($from: tablet) {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
//.pagehead__main {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// padding: 0 16px;
|
||||
// width: 100%;
|
||||
// @include mq($from: tablet) {
|
||||
// bottom: 50%;
|
||||
// transform: translateY(50%);
|
||||
// }
|
||||
//}
|
||||
|
||||
//.pagehead__inner {
|
||||
// @include mq($from: desktop) {
|
||||
// @include container(960px);
|
||||
// }
|
||||
// @include mq($from: wide) {
|
||||
// @include container();
|
||||
// }
|
||||
//}
|
||||
|
||||
.pagehead__badge {
|
||||
position: absolute;
|
||||
|
||||
&--skipass {
|
||||
top: 0;
|
||||
right: 16px;
|
||||
width: 60px;
|
||||
height: auto;
|
||||
@include mq($from: tablet) {
|
||||
width: 100px;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
width: auto;
|
||||
top: 55px;
|
||||
right: 120px;
|
||||
|
||||
.ep-core-events & {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--custom {
|
||||
@include size(180px);
|
||||
top: 16px;
|
||||
right: auto;
|
||||
left: 16px;
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
top: 45px;
|
||||
left: auto;
|
||||
right: 17%;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
top: 75px;
|
||||
right: 20%;
|
||||
|
||||
.ep-core-events & {
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagehead__picturecredit {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(white, 0.3);
|
||||
padding: 0.25em;
|
||||
font-size: 75%;
|
||||
color: #404040;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.partnerlogos {}
|
||||
|
||||
.partnerlogo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.partnerlogo__image {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
.product-teaser {}
|
||||
|
||||
.product-teaser__description {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.product-teaser__footer {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.product-teaser__headline {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.product-teaser__subline {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-teaser__price {
|
||||
display: block;
|
||||
flex: 0 1 110px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
|
||||
.product-teaser--wide & {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-teaser__pseudo-price {
|
||||
font-weight: 400;
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
.product-teaser__labels {
|
||||
flex: 1;
|
||||
|
||||
&--multiple {
|
||||
font-size: 12px;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-header {}
|
||||
|
||||
.product-header__title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-header__badge {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@include size(80px);
|
||||
top: 0;
|
||||
right: 64px;
|
||||
|
||||
&--custom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 110px;
|
||||
}
|
||||
|
||||
&--skipass {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
top: 32px;
|
||||
right: 45px;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include size(180px);
|
||||
|
||||
&--custom {
|
||||
bottom: auto;
|
||||
top: 36px;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.custom-badge__title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-badge__subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
right: 5%;
|
||||
|
||||
&--skipass {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
top: 64px;
|
||||
right: -64px;
|
||||
|
||||
&--skipass {
|
||||
top: -110px;
|
||||
right: -150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teaser-label {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&--new {
|
||||
color: $color-label-earlybird;
|
||||
}
|
||||
|
||||
&--earlybird {
|
||||
color: $color-label-earlybird;
|
||||
}
|
||||
|
||||
&--low-contingent {
|
||||
color: $color-label-low-contingent;
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail {}
|
||||
|
||||
.product-detail__watchlist {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background-color: $color-brand-primary;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
padding: 4px 12px;
|
||||
&:hover {
|
||||
background-color: $color-brand-secondary;
|
||||
color: white;
|
||||
}
|
||||
&:visited,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
.searchresult {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.searchresult-section {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.searchresult__info {
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item {
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid $color-grey;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__headline {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-item__subline {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.searchresult-item__category {
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.searchresult-item__checklist {
|
||||
font-size: 18px;
|
||||
color: $color-grey-dark;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.searchresult-item__featurelist {
|
||||
color: $color-brand-primary;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-item__daterange {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: $color-grey-dark;
|
||||
padding-bottom: 8px;
|
||||
|
||||
i {
|
||||
color: $color-brand-secondary;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__price {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 8px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.searchresult-item__pseudo-price {
|
||||
font-weight: 400;
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
.searchresult-item__button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.searchresult-wrapper {
|
||||
|
||||
.form-group {
|
||||
&.loading input {
|
||||
background: url(../../images/ajax-loader-white.gif) no-repeat 95% center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.destinationselect__item {
|
||||
|
||||
&.selected a {
|
||||
background-color: $color-grey;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
.region-award {}
|
||||
|
||||
.region-award__image {
|
||||
display: block;
|
||||
max-width: 165px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
@import "~@splidejs/splide/dist/css/splide-core.min.css";
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
|
||||
&--header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--teasers {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__item {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: left center;
|
||||
|
||||
&--product {
|
||||
height: 240px;
|
||||
@include mq($from: tablet) {
|
||||
height: 400px;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
height: 320px;
|
||||
}
|
||||
@include mq($from: wide) {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider__zoom-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
@include mq($from: tablet) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.slider__thumbs {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider__thumb {
|
||||
display: block;
|
||||
width: 20%;
|
||||
padding: 0 1%;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include mq($from: tablet) {
|
||||
bottom: 5px;
|
||||
}
|
||||
& > li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&--header {
|
||||
bottom: 10px;
|
||||
@include mq($from: desktop) {
|
||||
bottom: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination__dot {
|
||||
display: block;
|
||||
margin: 0 5px;
|
||||
@include hide-text();
|
||||
@include size(10px);
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px $color-grey;
|
||||
padding: 0;
|
||||
@include mq($from: tablet) {
|
||||
@include size(14px);
|
||||
border-radius: 7px;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: $color-brand-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
//.splide__arrows {
|
||||
// @include mq($until: desktop) {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
|
||||
.slider-pagination__arrow {
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: $color-brand-secondary;
|
||||
|
||||
.slider--teasers & {
|
||||
background-color: $color-brand-secondary;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 4px 2px 0 2px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&--prev {
|
||||
left: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.slider--teasers & {
|
||||
left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
&--next {
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.slider--teasers & {
|
||||
right: -28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-pagination__zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
display: block;
|
||||
|
||||
&--prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.dates-table, .pricetable {
|
||||
> tbody > tr > th {
|
||||
font-size: 14px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: inline-block;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
|
||||
&.btn-default {
|
||||
font-weight: 400;
|
||||
background-color: white;
|
||||
border: 1px solid $color-brand-primary;
|
||||
color: $color-brand-primary;
|
||||
padding: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
& .pricetable__section td {
|
||||
background-color: $color-brand-primary;
|
||||
color: white;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricetable__room-label {
|
||||
display: block;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.dates-table__links {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.dates-table__pricetoggle {
|
||||
@include mq($from: desktop) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.dates-table__altlink {
|
||||
display: block;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
|
||||
.dates-table__pseudo-price {
|
||||
font-weight: 400;
|
||||
font-size: 85%;
|
||||
color: $color-font-light;
|
||||
text-decoration: line-through;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,392 +0,0 @@
|
||||
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
|
||||
@-ms-keyframes donothing { 0% { } 100% { } }
|
||||
|
||||
.teaserbox {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $color-font-base;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: $color-font-base;
|
||||
}
|
||||
|
||||
.slick-slide &--default {
|
||||
margin: 20px 0 30px;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--concept {
|
||||
margin-top: 10px;
|
||||
transition: all .5s ease-in-out;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 59px -9px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.teaserbox__button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--flippable {
|
||||
perspective: 1000px;
|
||||
-ms-perspective: 1000px;
|
||||
|
||||
margin: 20px 0 40px;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
height: 450px;
|
||||
max-width: 270px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--landscape {
|
||||
|
||||
@include mq($from: tablet) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid $color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
//flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__image {
|
||||
position: relative;
|
||||
|
||||
.teaserbox--landscape & {
|
||||
|
||||
@include mq($from: tablet) {
|
||||
flex: 0 0 260px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
flex: 0 0 320px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--social-media {
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
color: white;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.teaserbox__main {
|
||||
height: auto;
|
||||
border-width: 2px;
|
||||
border-color: $color-grey-light;
|
||||
border-style: none solid;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.teaserbox--default & {
|
||||
min-height: 280px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox--country &,
|
||||
.teaserbox--region &,
|
||||
.teaserbox--city & {
|
||||
min-height: 170px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.teaserbox--hotel & {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.teaserbox--product & {
|
||||
border-style: none solid solid;
|
||||
min-height: 250px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox--concept & {
|
||||
min-height: 130px;
|
||||
border-style: none solid solid;
|
||||
}
|
||||
|
||||
.teaserbox--landscape & {
|
||||
height: auto;
|
||||
border-style: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox--searchresult & {
|
||||
padding: 16px 0;
|
||||
border: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&--fixed-height {
|
||||
height: 100px;
|
||||
border-bottom: 12px solid white;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.teaserbox__aside {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
border-width: 2px;
|
||||
border-color: $color-grey-light;
|
||||
border-style: none solid solid;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 300px;
|
||||
border-style: solid solid solid none;
|
||||
}
|
||||
|
||||
.teaserbox--searchresult &,
|
||||
.teaserbox--landscape & {
|
||||
border: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
flex: 0 0 220px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__header {
|
||||
padding-bottom: 8px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
min-height: 100px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.teaserbox--searchresult & {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__flag {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-style: none solid solid none;
|
||||
border-width: 2px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.teaserbox__button {
|
||||
margin: -2px 0 0;
|
||||
|
||||
&--fadein {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.teaserbox--flippable & {
|
||||
|
||||
@include mq($from: desktop) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__flip {
|
||||
@include size(100%);
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $color-font-base;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $color-font-base;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
transition: 0.5s ease-out;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: visible;
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side {
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
@include size(100%);
|
||||
backface-visibility: hidden;
|
||||
-ms-backface-visibility: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side--front {
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
animation: stayvisible 0.5s both;
|
||||
-ms-animation: donothing 0.5s;
|
||||
-ms-transition: visibility 0s linear 0.17s;
|
||||
visibility: visible;
|
||||
transform: rotateY(0deg);
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
animation: stayvisible 0.5s both;
|
||||
-ms-animation: donothing 0.5s;
|
||||
-ms-transition: visibility 0s linear 0.17s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__side--back {
|
||||
|
||||
@include mq ($from: desktop) {
|
||||
animation: stayvisible 0.5s both;
|
||||
-ms-animation: donothing 0.5s;
|
||||
-ms-transition: visibility 0s linear 0.17s;
|
||||
visibility: hidden;
|
||||
transform: rotateY(-180deg);
|
||||
|
||||
.teaserbox--flippable:hover & {
|
||||
animation: stayvisible 0.5s both;
|
||||
-ms-animation: donothing 0.5s;
|
||||
-ms-transition: visibility 0s linear 0.17s;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox__back {
|
||||
display: none;
|
||||
@include size(100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 15px 20px;
|
||||
background-color: $color-brand-primary;
|
||||
color: white;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.teaserbox-watchlist {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@include size(48px);
|
||||
display: block;
|
||||
color: white;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited,
|
||||
&:active {
|
||||
color: white;
|
||||
}
|
||||
cursor: pointer;
|
||||
padding: 4px 0 0 28px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
@include triangle(48px, $color-brand-secondary, up-right);
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
$header-width-max: 1366px;
|
||||
$page-width-max: 1170px;
|
||||
$area-nav-height: 46px;
|
||||
@@ -1,16 +0,0 @@
|
||||
.video {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom:2em;
|
||||
}
|
||||
|
||||
.video__frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
.watchlist {
|
||||
position: relative;
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(white, 0.75);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,12 +1,7 @@
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "~bourbon/app/assets/stylesheets/bourbon";
|
||||
|
||||
@import "fonts";
|
||||
@import "base/fonts";
|
||||
|
||||
body {
|
||||
font-family: "Lato", $helvetica;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
@apply antialiased text-gray-800 font-sans;
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-winter">
|
||||
<div class="bg-winter my-2">
|
||||
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
|
||||
<div class="container grid grid-cols-2 gap-8" data-rte-content>
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-winter">
|
||||
<div class="bg-winter my-2">
|
||||
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
|
||||
<div class="max-w-screen-lg mx-auto" data-rte-content>
|
||||
<div>{data.headline}</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-winter">
|
||||
<div class="bg-winter my-2">
|
||||
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
|
||||
<div class="max-w-screen-lg mx-auto" data-rte-content>
|
||||
<div class="md:flex md:items-start py-4">
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<f:if condition="{facts -> f:count()} > 0">
|
||||
<div class="ep-sidebar ep-facts">
|
||||
<p><strong>Facts</strong></p>
|
||||
<div>
|
||||
<ul class="ep-facts">
|
||||
<f:for each="{facts}" as="fact">
|
||||
<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>{fact.name}</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Facts
|
||||
</p>
|
||||
<ul class="list-none m-0 p-0">
|
||||
<f:for each="{facts}" as="fact">
|
||||
<li class="flex items-center space-x-2">
|
||||
<svg class="w-6 h-6 text-ep-primary-light">
|
||||
<use href="#icon-check"></use>
|
||||
</svg>
|
||||
<span>{fact.name}</span>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{slides}" as="slide" iteration="iteration">
|
||||
<li class="splide__slide slider__item" data-slider-target="slide">
|
||||
<li class="splide__slide">
|
||||
<div class="herounit">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<f:if condition="{image}">
|
||||
@@ -29,9 +29,6 @@
|
||||
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{slide.button}">
|
||||
<f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<f:if condition="{slide.skipass}">
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
<symbol id="icon-menu" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></symbol>
|
||||
<symbol id="icon-chevron-down" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></symbol>
|
||||
<symbol id="icon-chevron-up" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></symbol>
|
||||
<symbol id="icon-chevron-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol>
|
||||
<symbol id="icon-chevron-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></symbol>
|
||||
<symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
@@ -22,6 +24,7 @@
|
||||
<symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
|
||||
<symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
|
||||
<symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol>
|
||||
<symbol id="icon-location-marker" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></symbol>
|
||||
<!-- Flags -->
|
||||
<symbol id="icon-flag-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
|
||||
<symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
+99
-72
@@ -1,80 +1,107 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||
<div class="container ep-product-detail product-header">
|
||||
<div class="ep-product-detail-bg season-{product.region.season}"></div>
|
||||
<div class="col-sm-6 col-sm-offset-1 pull-right">
|
||||
<div data-slider="content" class="splide slider slider--product">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<li class="splide__slide slider__item slider__item--product">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, width: '400')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
|
||||
<div class="md:container">
|
||||
<div class="md:flex md:flex-row-reverse md:items-stretch">
|
||||
<div class="md:w-5/12 md:py-4 splide" data-slider="content">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<li class="splide__slide h-64 md:h-auto">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, width: '400')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
|
||||
<button class="splide__arrow splide__arrow--prev">
|
||||
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="splide__arrow splide__arrow--next">
|
||||
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
|
||||
<use href="#icon-chevron-right"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<f:comment><!--
|
||||
<div class="splide__arrows slider__pagination">
|
||||
<button class="splide__arrow splide__arrow--prev slider-pagination__arrow slider-pagination__arrow--prev"><i class="fa fa-2x fa-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>
|
||||
<div class="hidden md:block md:w-2/12 relative">
|
||||
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
|
||||
<f:link.typolink parameter="{settings.skipassPageUid}"
|
||||
title="Skipass inklusive">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
|
||||
class="block w-20 xl:w-auto h-auto mx-auto"
|
||||
alt="Skipass inklusive" />
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
<f:if condition="{product.badge}">
|
||||
<f:link.typolink parameter="{product.badge.link}"
|
||||
title="{product.badge.title}"
|
||||
class="absolute top-0 left-0">
|
||||
<div class="custom-badge">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
|
||||
viewBox="0 0 200 200" class="custom-badge__background">
|
||||
<g>
|
||||
<circle id="bgouter" cx="100" cy="100" r="100"></circle>
|
||||
<circle id="bginner" cx="100" cy="100" r="70"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="custom-badge__content">
|
||||
<span class="custom-badge__title">{product.badge.title -> f:format.raw()}</span>
|
||||
<span class="custom-badge__subtitle">{product.badge.subtitle -> f:format.raw()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
--></f:comment>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 pull-left product-header__title">
|
||||
<div class="head">
|
||||
{product.concept.name}
|
||||
</div>
|
||||
<div class="content{f:if(condition: '{settings.showSkipassBadge} && {product.skipassIncluded}', then: ' has-badge')}">
|
||||
<span class="headline headline--3">{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}</span>
|
||||
<span>{product.region.name}</span>
|
||||
</div>
|
||||
<f:image class="flag" src="{ep:flagiconSource(countryCode: product.country.code)}" alt="{product.country.name}"/>
|
||||
<f:if condition="{hotel}">
|
||||
<f:then>
|
||||
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="ep-property ep-marker">
|
||||
<i class="fa fa-map-marker" aria-hidden="true"></i>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="ep-property ep-marker">
|
||||
<i class="fa fa-map-marker" aria-hidden="true"></i>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
|
||||
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
|
||||
alt="Skipass inklusive" class="product-header__badge product-header__badge--skipass" />
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
<f:if condition="{product.badge}">
|
||||
<f:link.typolink parameter="{product.badge.link}" title="{product.badge.title}">
|
||||
<div class="product-header__badge product-header__badge--custom custom-badge">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
|
||||
viewBox="0 0 200 200" class="custom-badge__background">
|
||||
<g>
|
||||
<circle id="bgouter" cx="100" cy="100" r="100"></circle>
|
||||
<circle id="bginner" cx="100" cy="100" r="70"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="custom-badge__content">
|
||||
<span class="custom-badge__title">{product.badge.title -> f:format.raw()}</span>
|
||||
<span class="custom-badge__subtitle">{product.badge.subtitle -> f:format.raw()}</span>
|
||||
<div class="px-4 md:px-0 md:w-5/12 md:self-center">
|
||||
<div class="relative z-10 max-w-md mx-auto shadow-md -mt-16 md:mt-0 mx-0">
|
||||
<div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
|
||||
{product.concept.name}
|
||||
</div>
|
||||
<div class="bg-white p-4">
|
||||
<span class="headline--3">
|
||||
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
|
||||
</span>
|
||||
<span class="block">
|
||||
{product.region.name}
|
||||
</span>
|
||||
<div class="flex space-x-4 mt-4">
|
||||
<svg class="w-8 h-6 md:w-10 md:h-8">
|
||||
<use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
|
||||
</svg>
|
||||
<f:if condition="{hotel}">
|
||||
<f:then>
|
||||
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
|
||||
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
|
||||
<use href="#icon-location-marker"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-location-marker"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{referringUrl}">
|
||||
<div class="ep-backlink">
|
||||
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
|
||||
<f:if condition="{referringUrl}">
|
||||
<div class="ep-backlink">
|
||||
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+7
-5
@@ -115,11 +115,13 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" x-data="watchlistToggle({item.key})" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind="label" role="tooltip">
|
||||
<i class="fa fa-plus-circle" x-bind="icon"></i>
|
||||
</span>
|
||||
</a>
|
||||
<button x-data="watchlistToggle({item.key})" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind="label" role="tooltip">
|
||||
<svg class="w-5 h-5">
|
||||
<use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||
<f:if condition="{product.ratingVotesCount} > 0">
|
||||
<a href="{f:uri.typolink(parameter: targetPageUid)}" class="ep-sidebar ep-rating" title="Reisebewertungen">
|
||||
<p><strong>{label}</strong></p>
|
||||
<div>
|
||||
<ep:rating product="{product}"/>
|
||||
</div>
|
||||
<a href="{f:uri.typolink(parameter: targetPageUid)}"
|
||||
class="block bg-gray-200 p-4 mb-4"
|
||||
title="Reisebewertungen">
|
||||
<p class="font-bold">
|
||||
{label}
|
||||
</p>
|
||||
<ep:rating product="{product}"/>
|
||||
</a>
|
||||
</f:if>
|
||||
<f:if condition="{product.testimonials}">
|
||||
<div class="ep-sidebar ep-rating">
|
||||
<p><strong>Kundenstimmen</strong></p>
|
||||
<div class="bg-gray-200 p-4 mb-8">
|
||||
<p class="font-bold">
|
||||
Kundenstimmen
|
||||
</p>
|
||||
{product.testimonials -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<f:if condition="{region.webcam.available}">
|
||||
<div class="ep-sidebar ep-snow">
|
||||
<p><strong>Webcam</strong></p>
|
||||
<div>
|
||||
<a href="{region.webcam.url}"
|
||||
data-glightbox data-caption="Webcam {region.name}"
|
||||
title="Webcam {region.name}">
|
||||
<img src="{ep:uri.externalImage(url: region.webcam.url)}" width="330" class="img-responsive"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-8">
|
||||
<p class="font-bold">
|
||||
Webcam
|
||||
</p>
|
||||
<a href="{region.webcam.url}"
|
||||
data-glightbox data-caption="Webcam {region.name}"
|
||||
title="Webcam {region.name}">
|
||||
<img src="{ep:uri.externalImage(url: region.webcam.url)}"
|
||||
width="330"
|
||||
class="block w-full h-auto"/>
|
||||
</a>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<f:if condition="{region.regionMaps}">
|
||||
<div class="ep-sidebar ep-snow">
|
||||
<p><strong>Pistenplan</strong></p>
|
||||
<div>
|
||||
<f:for each="{region.regionMaps}" as="regionMap">
|
||||
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
|
||||
data-glightbox data-gallery="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
|
||||
title="Pistenplan {region.name}">
|
||||
<img class="img-responsive lazyload"
|
||||
data-src="{f:uri.image(image: regionMap, width: '330')}"
|
||||
alt="{regionMap.alternative}"
|
||||
title="{regionMap.title}">
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Pistenplan
|
||||
</p>
|
||||
<f:for each="{region.regionMaps}" as="regionMap">
|
||||
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
|
||||
data-glightbox data-gallery="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
|
||||
title="Pistenplan {region.name}">
|
||||
<img class="img-responsive lazyload"
|
||||
data-src="{f:uri.image(image: regionMap, width: '330')}"
|
||||
alt="{regionMap.alternative}"
|
||||
title="{regionMap.title}">
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="ep-sidebar ep-snow">
|
||||
<p><strong>Gebietsinfo</strong></p>
|
||||
<div>
|
||||
<ul>
|
||||
<li><span>Pisten:</span> {region.length}</li>
|
||||
<li><span>Höhe:</span> {region.height}</li>
|
||||
<f:if condition="{region.lifts}">
|
||||
<li><span>Lifte:</span> {region.lifts}</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Gebietsinfo
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>Pisten:</span> {region.length}</li>
|
||||
<li><span>Höhe:</span> {region.height}</li>
|
||||
<f:if condition="{region.lifts}">
|
||||
<li><span>Lifte:</span> {region.lifts}</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<f:if condition="{snowreport.snowLevelMountain}">
|
||||
<div class="ep-sidebar ep-snow">
|
||||
<p><strong>Schneehöhe aktuell</strong></p>
|
||||
<div>
|
||||
<ul>
|
||||
<li><span>Tal:</span> {snowreport.snowLevelValley}cm</li>
|
||||
<li><span>Berg:</span> {snowreport.snowLevelMountain}cm</li>
|
||||
</ul>
|
||||
<p>Letzter Schneefall am {snowreport.lastSnowFall -> f:format.date(format: 'd.m.Y')}</p>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Schneehöhe aktuell
|
||||
</p>
|
||||
<ul>
|
||||
<li><span>Tal:</span> {snowreport.snowLevelValley}cm</li>
|
||||
<li><span>Berg:</span> {snowreport.snowLevelMountain}cm</li>
|
||||
</ul>
|
||||
<p>Letzter Schneefall am {snowreport.lastSnowFall -> f:format.date(format: 'd.m.Y')}</p>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
<f:if condition="{teamer -> f:count()} > 0">
|
||||
{teamer -> v:iterator.first() -> v:variable.set(name: 'teamerInCharge')}
|
||||
<div class="ep-sidebar ep-teamer">
|
||||
<p><strong>Teamer vor Ort</strong></p>
|
||||
<div>
|
||||
<f:if condition="{teamerInCharge.image}">
|
||||
<f:then>
|
||||
<img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
|
||||
class="img-responsive lazyload"
|
||||
alt="{teamerInCharge.name}">
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Teamer vor Ort
|
||||
</p>
|
||||
<f:if condition="{teamerInCharge.image}">
|
||||
<f:then>
|
||||
<img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
|
||||
class="block w-full h-auto mb-4 lazyload"
|
||||
alt="{teamerInCharge.name}">
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
|
||||
</f:else>
|
||||
</f:if>
|
||||
<p>{teamerInCharge.name}</p>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
+5
-3
@@ -159,11 +159,13 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{item.key}')" x-bind="trigger">
|
||||
<button class="teaserbox-watchlist" x-data="watchlistToggle('{item.key}')" x-bind="trigger">
|
||||
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
|
||||
<i class="fa fa-plus-circle" x-bind:class="icon"></i>
|
||||
<svg class="w-5 h-5">
|
||||
<use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user