mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-08 17:12:25 +05:30
Слегка подрефакторен scss
This commit is contained in:
parent
2bd0e14a00
commit
73a7246afb
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -26,7 +26,7 @@
|
||||
display: inline-block;
|
||||
background: darker($green);
|
||||
|
||||
font-family: $robotoCondensed;
|
||||
font-family: $font-family-title;
|
||||
font-size: 33px;
|
||||
color: #fff;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user