Style content buttons
This commit is contained in:
parent
3dbf1e1228
commit
96ddacae14
|
@ -1,3 +1,44 @@
|
|||
button {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
background-color: $dark-blue;
|
||||
border: 1px solid $dark-blue;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: lighten($dark-blue, 5%);
|
||||
}
|
||||
|
||||
&.delete {
|
||||
background-color: transparent;
|
||||
border-color: $dark-red;
|
||||
color: $dark-red;
|
||||
svg { path { fill: $dark-red; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-red;
|
||||
color: #fff;
|
||||
svg { path { fill: #fff; } }
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
// main button
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: transparent;
|
||||
color: $dark-blue;
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-blue;
|
||||
color: #fff;
|
||||
svg { path { fill: #fff; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
button, a.button {
|
||||
|
@ -9,14 +50,11 @@ header {
|
|||
background-color: #fff;
|
||||
color: $dark-grey-2;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
path {
|
||||
fill: $dark-grey-2;
|
||||
}
|
||||
path { fill: $dark-grey-2; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -30,28 +68,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
&.delete {
|
||||
border-color: $dark-red;
|
||||
color: $dark-red;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: $dark-red;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-red;
|
||||
color: #fff;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled:not(.active),
|
||||
&:disabled:not(.active):hover {
|
||||
border-color: $dark-grey-3;
|
||||
|
@ -70,11 +86,7 @@ header {
|
|||
background-color: lighten($dark-grey-2, 10%);
|
||||
color: lighten($dark-grey-2, 10%);
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
svg { path { fill: #fff; } }
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -115,7 +127,9 @@ header {
|
|||
|
||||
main section.content {
|
||||
button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.86rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
button + button {
|
||||
|
|
|
@ -4,6 +4,7 @@ $dark-grey-3: #aaa;
|
|||
$light-grey-1: #b5c3d1;
|
||||
$light-grey-2: #ececec;
|
||||
$dark-red: #8b0000;
|
||||
$dark-blue: #0067c7;
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
|
|
|
@ -3,6 +3,11 @@
|
|||
@import "colors";
|
||||
@import "layout";
|
||||
|
||||
html {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
font-size: 15px;
|
||||
|
|
Loading…
Reference in New Issue