moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #170 from whiteout-io/dev/WO-729 

second lighter error color for buttons and labels
This commit is contained in:
Tankred Hase 2014-11-12 17:52:49 +01:00
parent 7229923d70 68bcf9ebc7
commit fb3ca46017
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-white: #fff;
$color-blue: #00c6ff; $color-blue: #00c6ff;
$color-red: #ff3f49; $color-red: #ff3f49;
$color-red-light: #ff878d;
$color-grey: #666; $color-grey: #666;
$color-grey-input: #949494; $color-grey-input: #949494;
$color-grey-dark: #333; $color-grey-dark: #333;
@ -37,6 +38,7 @@ $color-text-light: $color-grey-medium;
$color-main: $color-blue; $color-main: $color-blue;
$color-main-text: $color-white; $color-main-text: $color-white;
$color-error: $color-red; $color-error: $color-red;
$color-error-area: $color-red-light;
$color-error-text: $color-white; $color-error-text: $color-white;
$color-border-light: $color-grey-lighter; $color-border-light: $color-grey-lighter;
$color-touch-active: rgba(0, 0, 0, 0.1); $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 button state
&--invalid { &--invalid {
background-color: $color-error; background-color: $color-error-area;
color: $color-error-text; color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
@ -82,7 +82,7 @@
&:hover, &:hover,
&:focus { &: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 { & > svg {
display: inline-block; display: inline-block;
fill: $color-main; fill: $color-main-text;
width: 1.5em; width: 1.5em;
height: 1em; height: 1.3em;
vertical-align: baseline; vertical-align: middle;
margin-top: -0.1em; // move upwards to optimize vertical alignment with label text
} }
&--invalid { &--invalid {
background-color: $color-error; background-color: $color-error-area;
color: $color-error-text; color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
& > svg { & > svg {
fill: $color-error; fill: $color-error-text;
} }
@include scut-hd-bp { @include scut-hd-bp {
@ -33,18 +34,15 @@
} }
&--invalid-clickable { &--invalid-clickable {
position: relative; cursor: pointer;
&:hover, &:hover,
&:focus { &:focus {
transition: none; background-color: lighten($color-error-area, 5%);
background-color: lighten($color-main, 5%);
} }
&:active, &:active {
&.active { transform: translateX(1px) translateY(1px);
top: 1px;
left: 1px;
} }
} }