webseite/assets/sass/parts/_wrapper.scss
2019-02-12 17:45:44 +01:00

116 lines
2.6 KiB
SCSS

/* Wrapper */
.wrapper {
padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
}
@include breakpoint(tablet) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
@include breakpoint(phablet) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
&.style2 {
background: _palette(accent1);
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
&:focus {
border-color: _palette(border2);
}
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
&:hover,
&:active {
background-color: _palette(border-bg) !important;
box-shadow: inset 0 0 0 1px _palette(border2) !important;
color: _palette(fg-bold) !important;
}
&:active {
background-color: _palette(border2-bg) !important;
}
&.special {
background-color: _palette(fg-bold);
color: _palette(accent1) !important;
&:hover,
&:active {
background-color: _palette(border-bg) !important;
box-shadow: inset 0 0 0 1px _palette(border2) !important;
color: _palette(fg-bold) !important;
}
&:active {
background-color: _palette(border2-bg) !important;
}
}
}
}
&.fade-down {
> .container {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
@include vendor('transform', 'translate(0,-1em)');
opacity: 0;
}
}
}
&.fade-up {
> .container {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
@include vendor('transform', 'translate(0,1em)');
opacity: 0;
}
}
}
&.fade {
> .container {
@include vendor('transition', 'opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
opacity: 0;
}
}
}
}