moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-22 17:02:17 -05:00
Code Issues Releases Wiki Activity

second lighter error color for buttons and labels

Browse Source
This commit is contained in:
Mario Volke 2014-11-10 14:46:18 +01:00 committed by Tankred Hase
parent 7229923d70
commit 68bcf9ebc7
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/sass/base/_config.scss
View File

@ -18,6 +18,7 @@ $color-black: #000;
$color-white: #fff;
$color-blue: #00c6ff;
$color-red: #ff3f49;
$color-red-light: #ff878d;
$color-grey: #666;
$color-grey-input: #949494;
$color-grey-dark: #333;
@ -37,6 +38,7 @@ $color-text-light: $color-grey-medium;
$color-main: $color-blue;
$color-main-text: $color-white;
$color-error: $color-red;
$color-error-area: $color-red-light;
$color-error-text: $color-white;
$color-border-light: $color-grey-lighter;
$color-touch-active: rgba(0, 0, 0, 0.1);

4
src/sass/blocks/basics/_buttons.scss
View File

@ -68,7 +68,7 @@
// Invalid button state
&--invalid {
background-color: $color-error;
background-color: $color-error-area;
color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
@ -82,7 +82,7 @@
&:hover,
&:focus {
background-color: lighten($color-error, 5%);
background-color: lighten($color-error-area, 5%);
}
}

22
src/sass/blocks/basics/_labels.scss
View File

@ -12,19 +12,20 @@
& > svg {
display: inline-block;
fill: $color-main;
fill: $color-main-text;
width: 1.5em;
height: 1em;
vertical-align: baseline;
height: 1.3em;
vertical-align: middle;
margin-top: -0.1em; // move upwards to optimize vertical alignment with label text
}
&--invalid {
background-color: $color-error;
background-color: $color-error-area;
color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
& > svg {
fill: $color-error;
fill: $color-error-text;
}
@include scut-hd-bp {
@ -33,18 +34,15 @@
}
&--invalid-clickable {
position: relative;
cursor: pointer;
&:hover,
&:focus {
transition: none;
background-color: lighten($color-main, 5%);
background-color: lighten($color-error-area, 5%);
}
&:active,
&.active {
top: 1px;
left: 1px;
&:active {
transform: translateX(1px) translateY(1px);
}
}