mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
#48: light -> white
This commit is contained in:
@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react';
|
|||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { FormattedMessage as Message } from 'react-intl';
|
import { FormattedMessage as Message } from 'react-intl';
|
||||||
|
|
||||||
import { skins, SKIN_DARK, COLOR_LIGHT } from 'components/ui';
|
import { skins, SKIN_DARK, COLOR_WHITE } from 'components/ui';
|
||||||
import { Button } from 'components/ui/form';
|
import { Button } from 'components/ui/form';
|
||||||
|
|
||||||
import styles from './accountSwitcher.scss';
|
import styles from './accountSwitcher.scss';
|
||||||
@ -114,7 +114,7 @@ export default class AccountSwitcher extends Component {
|
|||||||
{allowAdd ? (
|
{allowAdd ? (
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
color={COLOR_LIGHT}
|
color={COLOR_WHITE}
|
||||||
block
|
block
|
||||||
small
|
small
|
||||||
className={styles.addAccount}
|
className={styles.addAccount}
|
||||||
|
@ -44,11 +44,11 @@ $lightBorderColor: #EEE;
|
|||||||
transition: .25s;
|
transition: .25s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $lightButtonLight;
|
background-color: $whiteButtonLight;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $lightButtonDark;
|
background-color: $whiteButtonDark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -56,7 +56,7 @@
|
|||||||
transition: .2s;
|
transition: .2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $lightButtonLight;
|
background: $whiteButtonLight;
|
||||||
color: #262626;
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,7 +81,7 @@ $formColumnWidth: 416px;
|
|||||||
.paramEditIcon {
|
.paramEditIcon {
|
||||||
composes: pencil from 'components/ui/icons.scss';
|
composes: pencil from 'components/ui/icons.scss';
|
||||||
|
|
||||||
color: $light;
|
color: $white;
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
|
|
||||||
a:hover & {
|
a:hover & {
|
||||||
|
@ -51,7 +51,7 @@
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light {
|
.white {
|
||||||
composes: button;
|
composes: button;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@ -59,11 +59,11 @@
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #262626;
|
color: #262626;
|
||||||
background-color: $lightButtonLight;
|
background-color: $whiteButtonLight;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: $lightButtonDark;
|
background-color: $whiteButtonDark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,13 +5,13 @@ $violet: #6b5b8c;
|
|||||||
$dark_blue: #28555b;
|
$dark_blue: #28555b;
|
||||||
$light_violet: #8b5d79;
|
$light_violet: #8b5d79;
|
||||||
$orange: #dd8650;
|
$orange: #dd8650;
|
||||||
$light: #ebe8e1;
|
$white: #ebe8e1;
|
||||||
|
|
||||||
$black: #232323;
|
$black: #232323;
|
||||||
|
|
||||||
$defaultButtonTextColor : #fff;
|
$defaultButtonTextColor : #fff;
|
||||||
$lightButtonLight: #f5f5f5;
|
$whiteButtonLight: #f5f5f5;
|
||||||
$lightButtonDark: #f5f5f5; // TODO: найти оптимальный цвет для прожатого состояния
|
$whiteButtonDark: #f5f5f5; // TODO: найти оптимальный цвет для прожатого состояния
|
||||||
|
|
||||||
@function darker($color) {
|
@function darker($color) {
|
||||||
$elyColorsMap : (
|
$elyColorsMap : (
|
||||||
|
@ -9,7 +9,7 @@ export const COLOR_LIGHT_VIOLET = 'lightViolet';
|
|||||||
export const COLOR_ORANGE = 'orange';
|
export const COLOR_ORANGE = 'orange';
|
||||||
export const COLOR_RED = 'red';
|
export const COLOR_RED = 'red';
|
||||||
export const COLOR_BLACK = 'black';
|
export const COLOR_BLACK = 'black';
|
||||||
export const COLOR_LIGHT = 'light';
|
export const COLOR_WHITE = 'white';
|
||||||
|
|
||||||
export const colors = [
|
export const colors = [
|
||||||
COLOR_GREEN,
|
COLOR_GREEN,
|
||||||
@ -20,7 +20,7 @@ export const colors = [
|
|||||||
COLOR_ORANGE,
|
COLOR_ORANGE,
|
||||||
COLOR_RED,
|
COLOR_RED,
|
||||||
COLOR_BLACK,
|
COLOR_BLACK,
|
||||||
COLOR_LIGHT
|
COLOR_WHITE
|
||||||
];
|
];
|
||||||
|
|
||||||
export const skins = [SKIN_DARK, SKIN_LIGHT];
|
export const skins = [SKIN_DARK, SKIN_LIGHT];
|
||||||
|
@ -76,7 +76,7 @@ $popupMargin: 20px; // Отступ попапа от краёв окна
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: $light;
|
background: $white;
|
||||||
padding: 15px $popupPadding;
|
padding: 15px $popupPadding;
|
||||||
border-bottom: 1px solid #dedede;
|
border-bottom: 1px solid #dedede;
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,7 @@ body,
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
background: $light;
|
background: $white;
|
||||||
color: #444;
|
color: #444;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
@ -74,7 +74,7 @@
|
|||||||
left: -40px;
|
left: -40px;
|
||||||
width: calc(100% + 60px);
|
width: calc(100% + 60px);
|
||||||
height: calc(100% + 20px);
|
height: calc(100% + 20px);
|
||||||
background: $light;
|
background: $white;
|
||||||
border-left: $border;
|
border-left: $border;
|
||||||
border-right: $border;
|
border-right: $border;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
Reference in New Issue
Block a user