data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

explain and expand theme colors

Browse source
This commit is contained in:
Nolan Lawson 2018-01-12 18:12:39 -08:00
parent 803c99b121
commit a62bc96d26
3 changed files with 61 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
routes/_components/Nav.html
View file

@ -59,6 +59,11 @@
a {
border-bottom: 1px solid var(--nav-a-border);
text-decoration: none;
padding: 25px 20px;
display: flex;
justify-content: center;
align-items: center;
}
a.selected {
@ -66,12 +71,9 @@
background: var(--nav-a-selected-bg);
}
a {
text-decoration: none;
padding: 25px 20px;
display: flex;
justify-content: center;
align-items: center;
a.selected:hover {
border-bottom: 1px solid var(--nav-a-selected-border-hover);
background: var(--nav-a-selected-bg-hover);
}
a:hover {

14
routes/_components/Status.html
View file

@ -30,7 +30,7 @@
max-width: 600px;
margin: 0 auto;
padding: 10px 0;
border-bottom: 1px solid #ededed;
border-bottom: 1px solid var(--border-color);
display: grid;
width: 100%;
grid-template-areas:
@ -84,11 +84,19 @@
border: none;
}
.footer svg {
.footer button svg {
pointer-events: none;
width: 24px;
height: 24px;
fill: #859ede;
fill: var(--action-button-fill-color);
}
.footer button:hover svg {
fill: var(--action-button-fill-color-hover);
}
.footer button:active svg {
fill: var(--action-button-fill-color-active);
}
</style>
<script>

71
scss/theme-default.scss
View file

@ -1,35 +1,48 @@
:root {
--button-primary-bg: #668cff;
--button-primary-text: white;
--button-primary-border: #1e3066;
--button-primary-bg-active: #99b3ff;
--button-primary-bg-hover: #446add;
$main-theme-color: royalblue;
$main-text-color: #333;
$border-color: #dadada;
$main-bg-color: white;
$secondary-text-color: white;
--button-bg: #ededed;
--button-text: #333;
--button-border: #ededed;
--button-bg-active: #fafafa;
--button-bg-hover: #ddd;
--button-primary-bg: lighten($main-theme-color, 7%);
--button-primary-text: $secondary-text-color;
--button-primary-border: darken($main-theme-color, 30%);
--button-primary-bg-active: lighten($main-theme-color, 1%);
--button-primary-bg-hover: lighten($main-theme-color, 9%);
--input-border: #dadada;
--anchor-text: royalblue;
--main-bg: white;
--body-bg: #ebeffb;
--body-text-color: #333;
--main-border: #ededed;
--button-bg: darken($main-bg-color, 10%);
--button-text: $main-text-color;
--button-border: darken($border-color, 20%);
--button-bg-active: darken($main-bg-color, 25%);
--button-bg-hover: darken($main-bg-color, 5%);
--form-bg: #fafafa;
--form-border: #ccc;
--input-border: $border-color;
--anchor-text: $main-theme-color;
--main-bg: $main-bg-color;
--body-bg: lighten($main-theme-color, 38%);
--body-text-color: $main-text-color;
--main-border: $border-color;
--nav-bg: royalblue;
--nav-border: #3a5eca;
--nav-a-border: royalblue;
--nav-a-selected-border: white;
--nav-a-selected-bg: #7e93e9;
--nav-a-bg-hover: #a3b1f0;
--nav-a-border-hover: #a3b1f0;
--nav-text-color-hover: #f6f7fd;
--nav-svg-fill-hover: #f6f7fd;
--nav-svg-fill: white;
--nav-text-color: white;
--form-bg: darken($main-bg-color, 3%);
--form-border: darken($border-color, 10%);
--nav-bg: $main-theme-color;
--nav-border: darken($main-theme-color, 10%);
--nav-a-border: $main-theme-color;
--nav-a-selected-border: $secondary-text-color;
--nav-a-selected-bg: lighten($main-theme-color, 10%);
--nav-svg-fill: $secondary-text-color;
--nav-text-color: $secondary-text-color;
--nav-a-selected-border-hover: $secondary-text-color;
--nav-a-selected-bg-hover: lighten($main-theme-color, 15%);
--nav-a-bg-hover: lighten($main-theme-color, 5%);
--nav-a-border-hover: $main-theme-color;
--nav-svg-fill-hover: $secondary-text-color;
--nav-text-color-hover: $secondary-text-color;
--action-button-fill-color: lighten($main-theme-color, 15%);
--action-button-fill-color-hover: lighten($main-theme-color, 20%);
--action-button-fill-color-active: lighten($main-theme-color, 5%);
}