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

14
routes/_components/Status.html
View file

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

71
scss/theme-default.scss
View file

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