fraport/fradrive-old
Archived
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/modal")
$(widgetFile "standalone/showHide") $(widgetFile "standalone/showHide")
$(widgetFile "standalone/inputs") $(widgetFile "standalone/inputs")
$(widgetFile "standalone/tabber")
withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet") withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
-- The page to be redirected to when authentication is required. -- The page to be redirected to when authentication is required.

124
templates/default-layout.lucius
View File

@ -1,47 +1,18 @@
:root { :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 */ /* THEME INDEPENDENT COLORS */
--errorbase: red; --color-error: red;
--warningbase: #fe7700; --color-warning: #fe7700;
--validbase: #2dcc35; --color-success: #2dcc35;
--infobase: var(--darkbase); --color-info: #c4c4c4;
--color-lightblack: #1A2A36;
--color-lightwhite: #FCFFFA;
--color-grey: #B1B5C0;
--color-font: #34303a;
--color-fontsec: #5b5861;
/* FONTS */ /* FONTS */
--fontfamilybase: "Source Sans Pro", Helvetica, sans-serif; --font-base: "Source Sans Pro", Helvetica, sans-serif;
/* DIMENSIONS */ /* DIMENSIONS */
--header-height: 80px; --header-height: 80px;
@ -56,13 +27,64 @@
body { body {
background-color: white; background-color: white;
color: var(--fontbase); color: var(--color-font);
font-family: var(--fontfamilybase); font-family: var(--font-base);
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
overflow-y: scroll; 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,
a:visited { a:visited {
text-decoration: none; text-decoration: none;
@ -134,7 +156,7 @@ td:first-child {
border-left: 0; border-left: 0;
} }
th { th {
border-left: 2px solid var(--greybase); border-left: 2px solid var(--color-grey);
} }
/* LAYOUT */ /* LAYOUT */
.main { .main {
@ -160,16 +182,16 @@ th {
} }
a { a {
color: var(--darkbase); color: var(--color-link);
} }
a:hover { a:hover {
color: var(--lightbase); color: var(--color-link-hover);
} }
} }
.pseudo-focus { .pseudo-focus {
outline: 5px auto var(--lightbase); outline: 5px auto var(--color-light);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
} }
@ -181,7 +203,7 @@ button,
outline: 0; outline: 0;
border: 0; border: 0;
box-shadow: 0; box-shadow: 0;
background-color: var(--lightbase); background-color: var(--color-dark);
color: white; color: white;
padding: 10px 17px; padding: 10px 17px;
min-width: 100px; min-width: 100px;
@ -205,7 +227,7 @@ button[disabled],
a.btn[disabled], a.btn[disabled],
.btn[disabled] { .btn[disabled] {
opacity: 0.3; opacity: 0.3;
background-color: var(--greybase); background-color: var(--color-grey);
cursor: default; cursor: default;
} }
@ -214,7 +236,7 @@ input[type="button"]:not([disabled]):hover,
button:not([disabled]):hover, button:not([disabled]):hover,
a.btn:not([disabled]):hover, a.btn:not([disabled]):hover,
.btn:not([disabled]):hover { .btn:not([disabled]):hover {
background-color: var(--lighterbase); background-color: var(--color-lighter);
text-decoration: underline; text-decoration: underline;
color: white; color: white;
} }
@ -223,14 +245,14 @@ input.btn-primary,
button.btn-primary, button.btn-primary,
a.btn.btn-primary, a.btn.btn-primary,
.btn.btn-primary { .btn.btn-primary {
background-color: var(--primarybase); background-color: var(--color-primary);
} }
input.btn-info, input.btn-info,
button.btn-info, button.btn-info,
a.btn.btn-info, a.btn.btn-info,
.btn.btn-info { .btn.btn-info {
background-color: var(--infobase) background-color: var(--color-info)
} }
input[type="submit"].btn-info:hover, input[type="submit"].btn-info:hover,
@ -238,7 +260,7 @@ input[type="button"].btn-info:hover,
button.btn-info:hover, button.btn-info:hover,
a.btn.btn-info:hover, a.btn.btn-info:hover,
.btn.btn-info:hover { .btn.btn-info:hover {
background-color: var(--greybase) background-color: var(--color-grey)
} }
.alert-debug { .alert-debug {

38
templates/standalone/inputs.lucius
View File

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

4
templates/standalone/modal.lucius
View File

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

4
templates/standalone/showHide.lucius
View File

@ -24,12 +24,12 @@
left: -28px; left: -28px;
top: 10px; top: 10px;
border-left: 8px solid transparent; 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__toggle:hover::before,
.js-show-hide--collapsed .js-show-hide__toggle::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; border-top: 8px solid transparent;
top: 5px; top: 5px;
left: -22px; 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-asc,
table th.sorted-desc { table th.sorted-desc {
color: var(--lightbase); color: var(--color-light);
} }
table th.sortable::after, table th.sortable::after,
@ -37,9 +37,9 @@ table th.sortable::after {
border-bottom: 8px solid rgba(0, 0, 0, 0.1); border-bottom: 8px solid rgba(0, 0, 0, 0.1);
} }
table th.sorted-asc::before { table th.sorted-asc::before {
border-top: 8px solid var(--lightbase); border-top: 8px solid var(--color-light);
} }
table th.sorted-desc::after { 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 { .pagination-link {
margin: 0 7px; margin: 0 7px;
display: inline-block; display: inline-block;
background-color: var(--greybase); background-color: var(--color-grey);
a { a {
color: var(--whitebase); color: var(--color-lightwhite);
padding: 7px 13px; padding: 7px 13px;
display: inline-block; display: inline-block;
} }
&:not(.current):hover { &:not(.current):hover {
background-color: var(--lighterbase); background-color: var(--color-lighter);
a { a {
color: var(--whitebase); color: var(--color-lightwhite);
} }
} }
&.current { &.current {
pointer-events: none; pointer-events: none;
background-color: var(--lightbase); background-color: var(--color-light);
a { a {
text-decoration: underline; text-decoration: underline;

11
templates/widgets/asidenav.hamlet
View File

@ -29,4 +29,15 @@ $newline never
<a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel} <a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
$of _ $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> <div .asidenav__toggler>

4
templates/widgets/asidenav.julius
View File

@ -82,4 +82,8 @@ document.addEventListener('DOMContentLoaded', function() {
utils.aside(document.querySelector('.main__aside')); 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 { .main__aside {
position: relative; position: relative;
background-color: #425d79; background-color: var(--color-dark);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
flex: 0 0 300px; flex: 0 0 300px;
@ -26,15 +26,15 @@
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
background-color: var(--fontsec); background-color: var(--color-fontsec);
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {
.asidenav__link-shorthand { .asidenav__link-shorthand {
display: flex; display: flex;
position: static; position: static;
background-color: var(--darkbase); background-color: var(--color-dark);
color: var(--whitebase); color: var(--color-lightwhite);
height: 50px; height: 50px;
width: 50px; width: 50px;
text-align: center; text-align: center;
@ -97,7 +97,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
color: var(--fontbase); color: var(--color-font);
transform: translateX(0); transform: translateX(0);
opacity: 0; opacity: 0;
transition: all .2s ease-out; transition: all .2s ease-out;
@ -106,7 +106,7 @@
z-index: -1; z-index: -1;
.asidenav__list-item { .asidenav__list-item {
background-color: var(--darkbase); background-color: var(--color-dark);
color: white; color: white;
&:first-child { &:first-child {
@ -122,8 +122,8 @@
&:hover { &:hover {
background-color: white; background-color: white;
color: var(--darkbase) !important; color: var(--color-dark) !important;
border-left: 20px solid var(--darkbase); border-left: 20px solid var(--color-dark);
} }
} }
} }
@ -131,12 +131,12 @@
.asidenav__list-item { .asidenav__list-item {
position: relative; position: relative;
background-color: white; background-color: white;
color: var(--darkbase); color: var(--color-dark);
margin: 4px 0; margin: 4px 0;
&:not(.asidenav__list-item--active):hover { &:not(.asidenav__list-item--active):hover {
color: white; color: white;
background-color: var(--darkbase); background-color: var(--color-dark);
.asidenav__nested-list { .asidenav__nested-list {
transform: translateX(100%); transform: translateX(100%);
@ -156,7 +156,7 @@
} }
} }
.asidenav__list-item--active { .asidenav__list-item--active {
background-color: var(--darkbase); background-color: var(--color-dark);
color: white; color: white;
.asidenav__link-wrapper { .asidenav__link-wrapper {
@ -176,7 +176,7 @@
height: 50px; height: 50px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
color: var(--darkbase); color: var(--color-link);
z-index: 1; z-index: 1;
.glyphicon { .glyphicon {
@ -186,7 +186,7 @@
.asidenav__link-shorthand { .asidenav__link-shorthand {
display: block; display: block;
position: absolute; position: absolute;
color: var(--greybase); color: var(--color-grey);
line-height: 50px; line-height: 50px;
opacity: 0.2; opacity: 0.2;
right: 10px; right: 10px;
@ -214,19 +214,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color .2s ease; transition: background-color .2s ease;
border-top: 1px solid var(--whitebase); border-top: 1px solid var(--color-lightwhite);
border-bottom: 1px solid var(--whitebase); border-bottom: 1px solid var(--color-lightwhite);
cursor: pointer; cursor: pointer;
&::before { &::before {
content: '\e079'; content: '\e079';
display: block; display: block;
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
color: var(--whitebase); color: var(--color-lightwhite);
} }
&:hover { &: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); height: var(--header-height);
padding-right: 5vw; padding-right: 5vw;
padding-left: 90px; padding-left: 90px;
background: var(--darkerbase); /* Old browsers */ background: var(--color-darker); /* Old browsers */
background: -moz-linear-gradient(bottom, var(--darkerbase) 0%, #425d79 100%); /* FF3.6-15 */ background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, var(--darkerbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, var(--darkerbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white; color: white;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
top: 0; top: 0;
left: 0; left: 0;
@ -50,7 +49,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 80px; height: 80px;
color: var(--whitebase); color: var(--color-lightwhite);
transition: height .2s ease; transition: height .2s ease;
} }
@ -63,7 +62,7 @@
.navbar__list-item--secondary { .navbar__list-item--secondary {
margin-left: 20px; margin-left: 20px;
color: var(--greybase); color: var(--color-grey);
} }
.navbar__list-item--secondary + .navbar__list-item--secondary { .navbar__list-item--secondary + .navbar__list-item--secondary {
margin-left: 0; margin-left: 0;
@ -72,31 +71,31 @@
.navbar__list-item--active { .navbar__list-item--active {
background-color: white; background-color: white;
color: var(--darkbase); color: var(--color-dark);
.navbar__link-wrapper { .navbar__link-wrapper {
color: var(--darkbase); color: var(--color-dark);
} }
} }
.navbar__list-item--active .navbar__link-wrapper { .navbar__list-item--active .navbar__link-wrapper {
pointer-events: none; pointer-events: none;
} }
.navbar__list-item--active .navbar__link-label { .navbar__list-item--active .navbar__link-label {
color: var(--darkbase); color: var(--color-dark);
} }
.navbar .navbar__list-item:not(.navbar__list-item--active):hover { .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 { .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 { .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-wrapper,
.navbar__list-item--secondary .navbar__link-label { .navbar__list-item--secondary .navbar__link-label {
color: var(--greybase); color: var(--color-grey);
} }
.navbar--sticky { .navbar--sticky {