@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("settings") { @import "settings"; }
@if not-imported("functions") { @import "functions"; }
/**
* Layout
*/
@mixin centered($max-width: $breakpoint-desktop, $resp-padding: 15px) {
max-width: $max-width;
margin: 0 auto;
position: relative;
@media screen and (max-width: $max-width + 2 * $resp-padding) {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: $resp-padding;
padding-right: $resp-padding;
}
}
@mixin centered-1200 {
@include centered();
}
/**
* Responsive
*/
@mixin for-max-size($size) {
@media screen and (max-width: $size) { @content; }
}
@mixin for-min-size($size) {
@media screen and (min-width: $size) { @content; }
}
@mixin for-tablet {
@include for-max-size($breakpoint-tablet) { @content; }
}
@mixin for-mobile {
@include for-max-size($breakpoint-mobile) { @content; }
}
@mixin for-tablet-up {
@include for-min-size($breakpoint-mobile+1) { @content; }
}
@mixin for-desktop-up {
@include for-min-size($breakpoint-tablet+1) { @content; }
}
/**
* Shorthand
*/
@mixin transform($transform...) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
@mixin transition($transition...) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin box-sizing($boxval) {
-webkit-box-sizing: $boxval;
-moz-box-sizing: $boxval;
box-sizing: $boxval;
}
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin filter($filter) {
-webkit-filter: $filter;
-ms-filter: $filter;
filter: $filter;
}
@mixin placeholder {
&::-webkit-placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
&::-ms-input-placeholder {
@content;
}
&:-ms-placeholder {
@content;
}
&:-o-placeholder {
@content;
}
&::placeholder {
@content;
}
}
@mixin aspect-ratio($width, $height, $float: false) {
position: relative;
@if $float {
overflow: hidden;
&:before {
display: table;
content: "";
padding-top: ($height / $width) * 100%;
float: left;
}
} @else {
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
/// Mixin printing a linear-gradient
/// as well as a plain color fallback
/// and the `-webkit-` prefixed declaration
/// @access public
/// @param {String | List | Angle} $direction - Linear gradient direction
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
@mixin linear-gradient($direction, $color-stops...) {
@if is-direction($direction) == false {
$color-stops: ($direction, $color-stops);
$direction: 180deg;
}
background: nth(nth($color-stops, 1), 1);
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
background: linear-gradient($direction, $color-stops);
}
@mixin column-classes($gutter-width, $max-columns, $class-name) {
@for $cols from 1 through $max-columns {
@for $span from 1 through $cols {
&.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
flex-basis: 100% / $cols * $span - ($gutter-width * 100%);
max-width: 100% / $cols * $span - ($gutter-width * 100%);
order: 6;
}
}
}
@for $cols from 1 through $max-columns {
&.-#{unquote($class-name)}-order-#{$cols} {
order: $cols;
}
}
}
/**
* Object Fit
*/
@mixin object-fit($mode: cover) {
object-fit: $mode;
font-family: 'object-fit: #{$mode};';
display: block;
width: 100%;
height: 100%;
}
/**
* Fonts
*/
@mixin small-caps {
font-weight: 400;
text-transform: lowercase;
font-family: $font-family-alternate-sc;
}
@mixin iconfont {
display: inline-block;
font-family: $font-family-icon !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: -0.1em;
}
@mixin icon($content: "", $font-size: 100%, $line-height: 1) {
@include iconfont;
font-size: $font-size;
line-height: $line-height;
@if $content != "" {
content: $content;
}
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
}
/**
* Clearfix
*/
@mixin cf {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
& {
*zoom: 1;
}
}
/**
* Text-Styling
*/
@mixin headline($font-size: 100%, $font-weight: 700, $color: $color-headline, $font-family: $font-family) {
font-family: $font-family-alternate;
color: $color;
font-weight: $font-weight;
font-size: $font-size;
}
@mixin text-overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**
* Boxes
*/
@mixin box {
&:not(.rs-columns) {
background-color: $color-bg-primary;
padding: 20px 35px;
@include box-sizing(border-box);
.-has-buttons&,
&.-has-button {
position: relative;
padding-bottom: 65px;
}
.cta-button:last-child {
position: absolute;
bottom: 20px;
left: 35px;
right: 35px;
}
}
&.rs-columns {
margin-left: -10px;
margin-top: 0;
> * {
flex-shrink: 1;
flex-grow: 1;
background-color: $color-bg-primary;
margin-left: 10px;
margin-top: 20px;
padding: 20px 35px;
@include box-sizing(border-box);
position: relative;
.-has-buttons&,
&.-has-button {
padding-bottom: 65px;
}
.cta-button:last-child {
position: absolute;
bottom: 20px;
left: 35px;
right: 35px;
}
}
}
}
@mixin box-black{
@include box;
&:not(.rs-columns) {
background-color: $color-bg-secondary;
color: $color-text-invert;
}
&.rs-columns {
> * {
background-color: $color-bg-secondary;
color: $color-text-invert;
}
}
}
@mixin box-white{
@include box;
border: 1px $color-stroke-grey solid;
}
@mixin box-yellow {
@include box;
background-color: $color-bg-primary;
border: 1px $color-stroke-light solid;
padding: 10px;
}
@mixin box-grey {
@include box;
background-color: $color-bg-footer;
padding: 10px;
}
/**
* Buttons
*/
@mixin button($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-button, $color-hover: $button-color-hl, $border-color-hover: $button-border-color-hl, $background-color-hover: $button-background-color-hl, $button-height: $button-height, $button-padding-vertical: $button-padding-vertical, $button-padding-horizontal: $button-padding-horizontal) {
$button-padding: $button-padding-vertical $button-padding-horizontal;
position: relative;
font-family: $font-family-form;
background: $background-color;
color: $color;
font-size: $font-size;
font-weight: 400;
display: inline-block;
padding: $button-padding;
height: $button-height;
line-height: #{$button-height - (2*$button-border-width) - (2*$button-padding-vertical)};
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: $button-border-width $border-color solid;
cursor: pointer;
text-align: center;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
text-transform: uppercase;
&[data-icon]:not([data-icon=""]) {
&:after {
@include icon(attr(data-icon),font-size(20px),inherit);
vertical-align: bottom;
margin-left: 1ex;
}
}
&:hover {
color: $color-hover;
border-color: $border-color-hover;
background: $background-color-hover;
}
}
@mixin button-text {
@include button($color: $color-text, $color-hover: $color-text, $background-color-hover: none);
background: none;
border: none;
height: auto;
padding: 0;
margin-right: auto;
color: $color-text;
text-transform: uppercase;
font-size: font-size(14px);
font-weight: 600;
letter-spacing: 0.1em;
}
@mixin button-icon-only($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-default, $color-hover: $color, $border-color-hover: $border-color, $border-background-hover: mix($background-color,#000,70%)) {
@include button($color,$border-color,$background-color,$font-size,$color-hover,$border-color-hover,$border-background-hover);
min-width: $button-height;
text-indent: -9999px;
overflow: hidden;
font-size: 100%;
&:after {
text-indent: 0;
float: left;
margin: 0;
width: #{$button-height - (2*$button-padding-horizontal) - (2*$button-border-width)};
}
}
@mixin button-no-icon {
&:after {
display: none;
}
}
@mixin button-block {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@mixin button-outline($color: $button-o-color, $border-color: $button-o-border-color, $font-size: $font-size-default, $color-hover: $button-o-color-hl, $border-color-hover: $button-o-border-color-hl, $border-background-hover: $button-o-background-color-hl) {
@include button($color,$border-color,transparent,$font-size,$color-hover,$border-color-hover,$border-background-hover);
}
/**
* Avatar + Profiles
*/
@mixin avatar($size: 50px, $stroke-width: 3px) {
position: relative;
width: $size+2*$stroke-width;
height: $size+2*$stroke-width;
margin-right: 1em;
margin-bottom: 0.5em;
display: inline-block;
vertical-align: middle;
&:before {
position: absolute;
left: 0;
right: 0;
content: "";
display: inline-block;
width: $size;
height: $size;
border-radius: $size;
vertical-align: middle;
/*-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);*/
}
&[data-letters]:before {
content: attr(data-letters);
font-size: font-size($size*0.4);
font-weight: 400;
line-height: $size;
text-align: center;
color: white;
background: $color-bg-tertiary;
border: $stroke-width $color-stroke-grey solid;
}
&[data-staff] {
margin-right: #{$size*0.56-(($size+2*$stroke-width)*0.14*2)};
&:after {
@include icon("\ec66",font-size($size*0.14),4em);
position: absolute;
left: 100%;
bottom: -0.5em;
margin-left: -#{($size+2*$stroke-width)*0.14*2};
padding: 0;
width: 4em;
height: 4em;
-webkit-border-radius: 4em;
-moz-border-radius: 4em;
border-radius: 4em;
color: $color-bg-tertiary;
background-color: $color-bg-secondary;
border: $size*0.02 $color-stroke-grey solid;
text-align: center;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
> * {
position: relative;
-webkit-border-radius: $size;
-moz-border-radius: $size;
border-radius: $size;
max-width: $size;
max-height: $size;
border: $stroke-width $color-stroke-grey solid;
}
}