You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
1.7 KiB
101 lines
1.7 KiB
$vars: 'primary', 'background', 'off', 'text', 'menu', 'menu_off';
|
|
$theme_light: #ac0000, #FFF, darken(#FFF, 8), #000, #111, lighten(#111, 12);
|
|
$theme_dark: #f85c22, #2d2d2d, lighten(#2d2d2d, 3), #FFF, #111, lighten(#111, 12);
|
|
|
|
$font_size: 14px;
|
|
$header_height: 80px;
|
|
$header_width: 132px;
|
|
$header_width_mobile: 44px;
|
|
$padding: 20px;
|
|
$border_radius: 3px;
|
|
|
|
@mixin theme($property, $value) {
|
|
#{$property}: nth($theme_light, index($vars, $value));
|
|
|
|
.dark & {
|
|
#{$property}: nth($theme_dark, index($vars, $value));
|
|
}
|
|
}
|
|
|
|
@mixin theme-dark {
|
|
.dark & {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@function get-theme($property){
|
|
@return nth($theme_light, index($vars, $property));
|
|
}
|
|
|
|
@function get-theme-dark($property){
|
|
@return nth($theme_dark, index($vars, $property));
|
|
}
|
|
|
|
$cubic: cubic-bezier(0.9,0,0.1,1);
|
|
|
|
$mq-phone: 320px !default;
|
|
$mq-phablet: 485px !default;
|
|
$mq-tablet: 768px !default;
|
|
$mq-desktop: 1024px !default;
|
|
$mq-desktop-plus: 1382px !default;
|
|
|
|
@mixin media-phone {
|
|
@media (max-width : $mq-phone) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-phablet {
|
|
@media (max-width : $mq-phablet) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-tablet {
|
|
@media (max-width : $mq-tablet) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-desktop {
|
|
@media (max-width : $mq-desktop) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-desktop-plus {
|
|
@media (max-width : $mq-desktop-plus) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin media-phone-and-up {
|
|
@media (min-width : $mq-phone) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-phablet-and-up {
|
|
@media (min-width : $mq-phablet) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-tablet-and-up {
|
|
@media (min-width : $mq-tablet) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-desktop-and-up {
|
|
@media (min-width : $mq-desktop) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-desktop-plus-and-up {
|
|
@media (min-width : $mq-desktop-plus) {
|
|
@content;
|
|
}
|
|
}
|
|
|