Слегка подрефакторен scss

This commit is contained in:
ErickSkrauch 2016-01-04 15:58:23 +03:00
parent 2bd0e14a00
commit 73a7246afb
6 changed files with 75 additions and 16 deletions

View File

@ -24,7 +24,7 @@
}
.logo {
font-family: $robotoCondensed;
font-family: $font-family-title;
color: #fff;
font-size: 22px;
}
@ -34,7 +34,7 @@
}
.description {
font-family: $roboto;
font-family: $font-family-base;
color: #cccccc;
font-size: 13px;
line-height: 1.7;

View File

@ -1,24 +1,48 @@
@import './colors.scss';
@import './fonts.scss';
@mixin button-color($colorName, $backgroundColor, $textColor : $defaultButtonTextColor) {
.#{$colorName} {
composes: button;
@if ($textColor != $defaultButtonTextColor) {
color: $textColor;
}
background-color: $backgroundColor;
&:hover {
background-color: lighter($backgroundColor);
}
&:active {
background-color: darker($backgroundColor);
}
}
}
.button {
display: inline-block;
height: 50px;
padding: 0 15px;
font-family: $robotoCondensed;
color: #fff;
font-family: $font-family-title;
color: $defaultButtonTextColor;
font-size: 18px;
line-height: 50px;
text-decoration: none;
}
.blue {
composes: button;
transition: background-color 0.25s;
background: $blue;
background-color: $black;
&:hover {
background: lighter($blue);
background-color: $black-button-light;
}
&:active {
background-color: $black-button-dark;
}
}
@include button-color('blue', $blue);

View File

@ -9,10 +9,44 @@ $light: #ebe8e1;
$black: #232323;
$defaultButtonTextColor : #fff;
$black-button-light: #392f2c;
$black-button-dark: #1e0b11;
@function darker($color) {
@return darken($color, 4%);
$elyColorsMap : (
$green : #1a6449,
$blue : #568297,
$red : #e15457,
$violet : #66437a,
$dark_blue : #233d49,
$light_violet : #864567,
$orange : #d86e3e,
$black : #1c1c1c,
);
@if(map_has_key($elyColorsMap, $color)) {
@return map-get($elyColorsMap, $color);
} @else {
@return darken($color, 4%);
}
}
@function lighter($color) {
@return lighten($color, 3%);
$elyColorsMap : (
$green : #379070,
$blue : #71a6b2,
$red : #fc7872,
$violet : #816795,
$dark_blue : #3e6164,
$light_violet : #a16982,
$orange : #f39259,
$black : #2e2e2e,
);
@if(map_has_key($elyColorsMap, $color)) {
@return map-get($elyColorsMap, $color);
} @else {
@return lighten($color, 3%);
}
}

View File

@ -1,4 +1,3 @@
// TODO: need more abstract names
// TODO: should we host fonts from our side?
$robotoCondensed: 'Roboto Condensed', Arial, sans-serif;
$roboto: 'Roboto', Arial, sans-serif;
$font-family-title: 'Roboto Condensed', Arial, sans-serif;
$font-family-base: 'Roboto', Arial, sans-serif;

View File

@ -1,3 +1,5 @@
@import "~components/ui/colors.scss";
.sidebar {
position: absolute;
top: 0;
@ -5,7 +7,7 @@
left: 0;
width: 300px;
background: #232323;
background: $black;
}
.content {

View File

@ -26,7 +26,7 @@
display: inline-block;
background: darker($green);
font-family: $robotoCondensed;
font-family: $font-family-title;
font-size: 33px;
color: #fff;
}