primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-26 07:35:04 +03:00
Code Issues Projects Releases Wiki Activity

Using color variables for flash messages and applying to form errors

Browse Source
This commit is contained in:
Jon Rohan 2016-03-14 11:08:15 -04:00
parent c780f046fb
commit 8b3483fda1
3 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scss/_alerts.scss
View File

@ -4,9 +4,9 @@
padding: 15px;
font-size: 14px;
line-height: 1.5;
color: #246;
background-color: #e2eef9;
border: 1px solid #bac6d3;
color: $flash-text-blue;
background-color: $flash-bg-blue;
border: 1px solid $flash-border-blue;
border-radius: 3px;
p:last-child {
@ -53,15 +53,15 @@
//
.flash-warn {
color: #4c4a42;
background-color: #fff9ea;
border-color: #dfd8c2;
color: $flash-text-yellow;
background-color: $flash-bg-yellow;
border-color: $flash-border-yellow;
}
.flash-error {
color: #911;
background-color: #fcdede;
border-color: #d2b2b2;
color: $flash-text-red;
background-color: $flash-bg-red;
border-color: $flash-border-red;
}
.flash-full {

20
scss/_form-group.scss
View File

@ -177,16 +177,16 @@ dl.form {
&.warn {
dd.warning {
color: #4e401e;
background-color: #ffe5a7;
border: 1px solid #e7ce94;
color: $flash-text-yellow;
background-color: $flash-bg-yellow;
border-color: $flash-border-yellow;
&:after {
border-bottom-color: #ffe5a7;
border-bottom-color: $flash-bg-yellow;
}
&:before {
border-bottom-color: #cdb683;
border-bottom-color: $flash-border-yellow;
}
}
}
@ -197,17 +197,17 @@ dl.form {
}
dd.error {
color: #fff;
background-color: #bf1515;
border-color: #911;
font-size: 13px;
color: $flash-text-red;
background-color: $flash-bg-red;
border-color: $flash-border-red;
&:after {
border-bottom-color: #bf1515;
border-bottom-color: $flash-bg-red;
}
&:before {
border-bottom-color: #911;
border-bottom-color: $flash-border-red;
}
}
}

13
scss/_variables.scss
View File

@ -48,6 +48,19 @@ $repo-private-text: #a1882b !default;
$repo-private-bg: #fff9ea !default;
$repo-private-icon: #e9dba5 !default;
// Alerts
$flash-border-blue: #bac6d3 !default;
$flash-bg-blue: #e2eef9 !default;
$flash-text-blue: #246 !default;
$flash-border-yellow: #dfd8c2 !default;
$flash-bg-yellow: #fff9ea !default;
$flash-text-yellow: #4c4a42 !default;
$flash-border-red: #d2b2b2 !default;
$flash-bg-red: #fcdede !default;
$flash-text-red: #911 !default;
// Border colors
$border-blue: #c5d5dd !default;
$border-gray-dark: #ddd !default;