fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added themes and experimental theme-switcher

Browse Source
This commit is contained in:
Felix Hamann 2018-06-09 11:59:15 +02:00
parent 64af1b155e
commit 694ce90551
13 changed files with 158 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Foundation.hs
View File

@ -478,6 +478,7 @@ instance Yesod UniWorX where
$(widgetFile "standalone/modal")
$(widgetFile "standalone/showHide")
$(widgetFile "standalone/inputs")
$(widgetFile "standalone/tabber")
withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
-- The page to be redirected to when authentication is required.

124
templates/default-layout.lucius
View File

@ -1,47 +1,18 @@
:root {
/* THEME 1 */
--base00: #72a85b;
--base-bg-color: #1d1c1d;
--base-font-color: #fff;
--sec-font-color: #fff;
--box-bg-color: #3c3c3c;
/* THEME 2 */
--base00: #38428a;
--base-bg-color: #ffffff;
--base-font-color: rgb(53, 53, 53);
--sec-font-color: #eaf2ff;
--box-bg-color: #dddddd;
/* THEME 3 */
--darkbase: #364B60;
--lightbase: #2490E8;
--lighterbase: #60C2FF;
--whitebase: #FCFFFA;
--greybase: #B1B5C0;
--fontbase: #34303a;
--fontsec: #5b5861;
/* THEME 4 */
--darkerbase: #274a65;
--darkbase: #425d79;
--lightbase: #598EB5;
--lighterbase: #5F98C2;
--whitebase: #FCFFFA;
--greybase: #B1B5C0;
--lightgreybase: #D9DEDB;
--blackbase: #1A2A36;
--fontbase: #34303a;
--fontsec: #5b5861;
--primarybase: #4C7A9C;
/* THEME INDEPENDENT COLORS */
--errorbase: red;
--warningbase: #fe7700;
--validbase: #2dcc35;
--infobase: var(--darkbase);
--color-error: red;
--color-warning: #fe7700;
--color-success: #2dcc35;
--color-info: #c4c4c4;
--color-lightblack: #1A2A36;
--color-lightwhite: #FCFFFA;
--color-grey: #B1B5C0;
--color-font: #34303a;
--color-fontsec: #5b5861;
/* FONTS */
--fontfamilybase: "Source Sans Pro", Helvetica, sans-serif;
--font-base: "Source Sans Pro", Helvetica, sans-serif;
/* DIMENSIONS */
--header-height: 80px;
@ -56,13 +27,64 @@
body {
background-color: white;
color: var(--fontbase);
font-family: var(--fontfamilybase);
color: var(--color-font);
font-family: var(--font-base);
font-weight: 400;
font-size: 16px;
overflow-y: scroll;
}
/* THEMES */
body {
/* DEFAULT THEME */
--color-primary: #4C7A9C;
--color-light: #598EB5;
--color-lighter: #5F98C2;
--color-dark: #425d79;
--color-darker: #274a65;
--color-link: var(--color-dark);
--color-link-hover: var(--color-darker);
&.theme--neutral-blue {
--color-primary: #3E606F;
--color-light: rgb(189, 201, 219);
--color-lighter: rgb(145, 159, 170);
--color-dark: #3E606F;
--color-darker: #193441;
}
&.theme--aberdeen-reds {
--color-primary: #820333;
--color-light: #C9283E;
--color-lighter: #F0433A;
--color-dark: #540032;
--color-darker: #2E112D;
}
&.theme--mint-green {
--color-primary: #5C996B;
--color-light: #7ACC8F;
--color-lighter: #99FFB2;
--color-dark: #3D6647;
--color-darker: #1F3324;
}
&.theme--sky-love {
--color-primary: #87ABE5;
--color-light: #A0C6F2;
--color-lighter: #BAE2FF;
--color-dark: #7A95DE;
--color-darker: #6B7BC9;
--color-link: var(--color-lightblack);
--color-link-hover: var(--color-darker);
}
}
/* END THEMES */
a,
a:visited {
text-decoration: none;
@ -134,7 +156,7 @@ td:first-child {
border-left: 0;
}
th {
border-left: 2px solid var(--greybase);
border-left: 2px solid var(--color-grey);
}
/* LAYOUT */
.main {
@ -160,16 +182,16 @@ th {
}
a {
color: var(--darkbase);
color: var(--color-link);
}
a:hover {
color: var(--lightbase);
color: var(--color-link-hover);
}
}
.pseudo-focus {
outline: 5px auto var(--lightbase);
outline: 5px auto var(--color-light);
outline: 5px auto -webkit-focus-ring-color;
}
@ -181,7 +203,7 @@ button,
outline: 0;
border: 0;
box-shadow: 0;
background-color: var(--lightbase);
background-color: var(--color-dark);
color: white;
padding: 10px 17px;
min-width: 100px;
@ -205,7 +227,7 @@ button[disabled],
a.btn[disabled],
.btn[disabled] {
opacity: 0.3;
background-color: var(--greybase);
background-color: var(--color-grey);
cursor: default;
}
@ -214,7 +236,7 @@ input[type="button"]:not([disabled]):hover,
button:not([disabled]):hover,
a.btn:not([disabled]):hover,
.btn:not([disabled]):hover {
background-color: var(--lighterbase);
background-color: var(--color-lighter);
text-decoration: underline;
color: white;
}
@ -223,14 +245,14 @@ input.btn-primary,
button.btn-primary,
a.btn.btn-primary,
.btn.btn-primary {
background-color: var(--primarybase);
background-color: var(--color-primary);
}
input.btn-info,
button.btn-info,
a.btn.btn-info,
.btn.btn-info {
background-color: var(--infobase)
background-color: var(--color-info)
}
input[type="submit"].btn-info:hover,
@ -238,7 +260,7 @@ input[type="button"].btn-info:hover,
button.btn-info:hover,
a.btn.btn-info:hover,
.btn.btn-info:hover {
background-color: var(--greybase)
background-color: var(--color-grey)
}
.alert-debug {

38
templates/standalone/inputs.lucius
View File

@ -76,21 +76,21 @@ input[type="email"] {
}
input, textarea {
border-bottom-color: var(--lighterbase);
border-bottom-color: var(--color-lighter);
}
}
.form-group--valid {
input, textarea {
border-bottom-color: var(--validbase);
border-bottom-color: var(--color-success);
}
}
.form-group--has-error {
input, textarea {
border-bottom-color: var(--errorbase);
border-bottom-color: var(--color-error);
}
}
@ -99,9 +99,9 @@ input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus {
/* border-bottom-color: var(--lightbase);
/* border-bottom-color: var(--color-light);
background-color: transparent;
box-shadow: 0 0 13px var(--lighterbase); */
box-shadow: 0 0 13px var(--color-lighter); */
border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
outline: 0;
@ -150,14 +150,14 @@ input[type="checkbox"]::before {
position: absolute;
width: 20px;
height: 20px;
background-color: var(--lighterbase);
background-color: var(--color-lighter);
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
input[type="checkbox"]:checked::before {
background-color: var(--lightbase);
background-color: var(--color-light);
}
input[type="checkbox"]:checked::after {
content: '✓';
@ -186,7 +186,7 @@ input[type="checkbox"]:checked::after {
display: block;
height: 30px;
width: 30px;
background-color: var(--greybase);
background-color: var(--color-grey);
border-radius: 4px;
color: white;
cursor: pointer;
@ -218,12 +218,12 @@ input[type="checkbox"]:checked::after {
}
> :checked + label {
background-color: var(--lightbase);
background-color: var(--color-light);
text-decoration: underline;
}
&:hover > label {
background-color: var(--lighterbase);
background-color: var(--color-lighter);
}
&:hover > label::before {
@ -269,13 +269,13 @@ input[type="checkbox"]:checked::after {
/* REACTIVE LABELS */
.reactive-label {
cursor: text;
color: var(--fontsec);
color: var(--color-fontsec);
transform: translate(0, 0);
transition: all .1s;
}
.reactive-label--small {
cursor: default;
color: var(--fontbase);
color: var(--color-font);
}
@media (max-width: 999px) {
.reactive-label {
@ -284,7 +284,7 @@ input[type="checkbox"]:checked::after {
}
.reactive-label--small {
transform: translate(2px, 0px);
color: var(--fontsec);
color: var(--color-fontsec);
/*font-size: 14px;*/
}
}
@ -319,7 +319,7 @@ input[type="file"].js-file-input {
display: block;
border-radius: 2px;
padding: 5px 13px;
color: var(--whitebase);
color: var(--color-lightwhite);
cursor: pointer;
}
.file-input__label,
@ -329,7 +329,7 @@ input[type="file"].js-file-input {
height: 30px;
}
.file-checkbox__label {
background-color: var(--greybase);
background-color: var(--color-grey);
text-decoration: line-through;
}
.file-input__label.btn,
@ -363,7 +363,7 @@ input[type="file"].js-file-input {
width: 40px;
height: 30px;
text-align: center;
background-color: var(--warningbase);
background-color: var(--color-warning);
position: relative;
margin-left: 10px;
}
@ -377,14 +377,14 @@ input[type="file"].js-file-input {
background-color: white;
}
.file-input__container--valid > .file-input__label {
background-color: var(--lightbase);
background-color: var(--color-light);
}
.file-checkbox__container--checked > .file-checkbox__label {
text-decoration: none;
background-color: var(--lighterbase);
background-color: var(--color-lighter);
&.btn:hover {
background-color: var(--lighterbase);
background-color: var(--color-lighter);
text-decoration: line-through;
}
}

4
templates/standalone/modal.lucius
View File

@ -10,7 +10,7 @@
max-height: calc(100vh - 30px);
border-radius: 7px;
z-index: -1;
color: var(--fontbase);
color: var(--color-font);
padding: 20px;
overflow: auto;
opacity: 0;
@ -70,7 +70,7 @@
justify-content: center;
width: 30px;
height: 30px;
background-color: var(--darkerbase);
background-color: var(--color-darker);
border-radius: 2px;
cursor: pointer;
z-index: 20;

4
templates/standalone/showHide.lucius
View File

@ -24,12 +24,12 @@
left: -28px;
top: 10px;
border-left: 8px solid transparent;
border-top: 8px solid var(--lightbase);
border-top: 8px solid var(--color-light);
}
.js-show-hide__toggle:hover::before,
.js-show-hide--collapsed .js-show-hide__toggle::before {
border-left: 8px solid var(--lightbase);
border-left: 8px solid var(--color-light);
border-top: 8px solid transparent;
top: 5px;
left: -22px;

1
templates/standalone/tabber.hamlet Normal file
View File

@ -0,0 +1 @@
<!-- only here to be able to include tabber using `toWidget` -->

7
templates/standalone/tabber.lucius Normal file
View File

@ -0,0 +1,7 @@
.tab-opener {
background-color: var(--color-dark);
&.tab-visible {
border-bottom-color: var(--color-primary);
}
}

6
templates/table/colonnade.lucius
View File

@ -13,7 +13,7 @@ table th {
table th.sorted-asc,
table th.sorted-desc {
color: var(--lightbase);
color: var(--color-light);
}
table th.sortable::after,
@ -37,9 +37,9 @@ table th.sortable::after {
border-bottom: 8px solid rgba(0, 0, 0, 0.1);
}
table th.sorted-asc::before {
border-top: 8px solid var(--lightbase);
border-top: 8px solid var(--color-light);
}
table th.sorted-desc::after {
border-bottom: 8px solid var(--lightbase);
border-bottom: 8px solid var(--color-light);
}

10
templates/table/layout.lucius
View File

@ -5,25 +5,25 @@
.pagination-link {
margin: 0 7px;
display: inline-block;
background-color: var(--greybase);
background-color: var(--color-grey);
a {
color: var(--whitebase);
color: var(--color-lightwhite);
padding: 7px 13px;
display: inline-block;
}
&:not(.current):hover {
background-color: var(--lighterbase);
background-color: var(--color-lighter);
a {
color: var(--whitebase);
color: var(--color-lightwhite);
}
}
&.current {
pointer-events: none;
background-color: var(--lightbase);
background-color: var(--color-light);
a {
text-decoration: underline;

11
templates/widgets/asidenav.hamlet
View File

@ -29,4 +29,15 @@ $newline never
<a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
$of _
<div .asidenav__box>
<h3 .asidenav__box-title>
Themes (dev)
<select #theme-selector>
<option value="default">Default Blue
<option value="neutral-blue">Neutral Blue
<option value="aberdeen-reds">Aberdeen Reds
<option value="mint-green">Mint Green
<option value="sky-love">Sky Love
<div .asidenav__toggler>

4
templates/widgets/asidenav.julius
View File

@ -82,4 +82,8 @@ document.addEventListener('DOMContentLoaded', function() {
utils.aside(document.querySelector('.main__aside'));
document.querySelector('#theme-selector').addEventListener('change', function(event) {
document.body.className = 'theme--' + event.target.value;
});
});

34
templates/widgets/asidenav.lucius
View File

@ -1,6 +1,6 @@
.main__aside {
position: relative;
background-color: #425d79;
background-color: var(--color-dark);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1;
flex: 0 0 300px;
@ -26,15 +26,15 @@
font-size: 18px;
text-align: center;
margin-bottom: 0;
background-color: var(--fontsec);
background-color: var(--color-fontsec);
}
.asidenav__link-wrapper {
.asidenav__link-shorthand {
display: flex;
position: static;
background-color: var(--darkbase);
color: var(--whitebase);
background-color: var(--color-dark);
color: var(--color-lightwhite);
height: 50px;
width: 50px;
text-align: center;
@ -97,7 +97,7 @@
position: absolute;
top: 0;
right: 0;
color: var(--fontbase);
color: var(--color-font);
transform: translateX(0);
opacity: 0;
transition: all .2s ease-out;
@ -106,7 +106,7 @@
z-index: -1;
.asidenav__list-item {
background-color: var(--darkbase);
background-color: var(--color-dark);
color: white;
&:first-child {
@ -122,8 +122,8 @@
&:hover {
background-color: white;
color: var(--darkbase) !important;
border-left: 20px solid var(--darkbase);
color: var(--color-dark) !important;
border-left: 20px solid var(--color-dark);
}
}
}
@ -131,12 +131,12 @@
.asidenav__list-item {
position: relative;
background-color: white;
color: var(--darkbase);
color: var(--color-dark);
margin: 4px 0;
&:not(.asidenav__list-item--active):hover {
color: white;
background-color: var(--darkbase);
background-color: var(--color-dark);
.asidenav__nested-list {
transform: translateX(100%);
@ -156,7 +156,7 @@
}
}
.asidenav__list-item--active {
background-color: var(--darkbase);
background-color: var(--color-dark);
color: white;
.asidenav__link-wrapper {
@ -176,7 +176,7 @@
height: 50px;
align-items: center;
justify-content: flex-start;
color: var(--darkbase);
color: var(--color-link);
z-index: 1;
.glyphicon {
@ -186,7 +186,7 @@
.asidenav__link-shorthand {
display: block;
position: absolute;
color: var(--greybase);
color: var(--color-grey);
line-height: 50px;
opacity: 0.2;
right: 10px;
@ -214,19 +214,19 @@
align-items: center;
justify-content: center;
transition: background-color .2s ease;
border-top: 1px solid var(--whitebase);
border-bottom: 1px solid var(--whitebase);
border-top: 1px solid var(--color-lightwhite);
border-bottom: 1px solid var(--color-lightwhite);
cursor: pointer;
&::before {
content: '\e079';
display: block;
font-family: 'Glyphicons Halflings';
color: var(--whitebase);
color: var(--color-lightwhite);
}
&:hover {
background-color: var(--lightbase);
background-color: var(--color-light);
}
}

27
templates/widgets/navbar.lucius
View File

@ -8,12 +8,11 @@
height: var(--header-height);
padding-right: 5vw;
padding-left: 90px;
background: var(--darkerbase); /* Old browsers */
background: -moz-linear-gradient(bottom, var(--darkerbase) 0%, #425d79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, var(--darkerbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, var(--darkerbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: var(--color-darker); /* Old browsers */
background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
top: 0;
left: 0;
@ -50,7 +49,7 @@
justify-content: center;
align-items: center;
height: 80px;
color: var(--whitebase);
color: var(--color-lightwhite);
transition: height .2s ease;
}
@ -63,7 +62,7 @@
.navbar__list-item--secondary {
margin-left: 20px;
color: var(--greybase);
color: var(--color-grey);
}
.navbar__list-item--secondary + .navbar__list-item--secondary {
margin-left: 0;
@ -72,31 +71,31 @@
.navbar__list-item--active {
background-color: white;
color: var(--darkbase);
color: var(--color-dark);
.navbar__link-wrapper {
color: var(--darkbase);
color: var(--color-dark);
}
}
.navbar__list-item--active .navbar__link-wrapper {
pointer-events: none;
}
.navbar__list-item--active .navbar__link-label {
color: var(--darkbase);
color: var(--color-dark);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
background-color: var(--darkerbase);
background-color: var(--color-darker);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
color: var(--whitebase);
color: var(--color-lightwhite);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
color: var(--whitebase);
color: var(--color-lightwhite);
}
.navbar__list-item--secondary .navbar__link-wrapper,
.navbar__list-item--secondary .navbar__link-label {
color: var(--greybase);
color: var(--color-grey);
}
.navbar--sticky {