// ----- FONTS ------------ $standardFont: Lato; $headerFont: Lato; // ----- LAYOUT ------------ $inputHeight: 50px; $headerSize: 40px; $header2Size: 30px; $header3Size: 26px; $retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)"; @mixin retina-background-image($file, $type, $hover, $width, $height) { $hovername: ''; @if $hover { $hovername: '-hover'; } $filename :$file + $hovername; background-image: url($filename + '.' + $type); @media #{$retina} { background-image: url($filename + '@2x.' + $type); background-size: $width $height; } } // ----- DARK-THEME -------- $backgroundColor: #282828; $fontColor: #BBBBC8; $primaryColor: #3574C6; $primaryColorHover: lighten($primaryColor, 10%); $labelColor: #898989; $inputBorderColor: #999999; $inputBackgroundColor: #252525; $buttonBackgroundColorHover: $inputBackgroundColor; $profileImgDark: "../../../images/icon-user-dark"; $otherUserImgDark: "../../../images/icon-newuser-dark"; $idpGoogleImg: "../../../images/idp/google"; $idpGoogleFontColor: #FFFFFF; $idpGoogleBackgroundColor: #4285F4; $nokColor: #F20D6B; $okColor: #0DF279; $errorColor: red; // ----- LIGHT-THEME -------- $backgroundColorLight: #f5f5f5; $fontColorLight: $backgroundColor; $primaryColorLight: $primaryColor; $primaryColorHoverLight: lighten($primaryColorLight, 10%); $inputBackgroundColorLight: #FFFFFF; $buttonBackgroundColorHoverLight: $inputBackgroundColorLight; $profileImgLight: "../../../images/icon-user-light"; $otherUserImgLight: "../../../images/icon-newuser-light"; $idpGoogleImgLight: "../../../images/idp/google"; $idpGoogleFontColorLight: #8b8d8d; $idpGoogleBackgroundColorLight: #FFFFFF; $nokColorLight: #F20D6B; $okColorLight: #50CA3D;