117 lines
2.6 KiB
SCSS
117 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|