Skip to content
Snippets Groups Projects
Verified Commit 268ed715 authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Refactor style.scss and remove non-core specific parts, add secondary color 

Additionally change icon of admin menu entry
parent 5a6ff308
No related branches found
No related tags found
1 merge request!85Resolve "Migrate to materialize-css"
Pipeline #447 failed
Stage: test
Stage: build
Hide whitespace changes
Inline Side-by-side
biscuit/core/menus.py
+ 1
− 1
View file @ 268ed715
......@@ -45,7 +45,7 @@ MENUS = {
{
"name": _("Admin"),
"url": "#",
"icon": "settings",
"icon": "security",
"validators": [
"menu_generator.validators.is_authenticated",
"menu_generator.validators.is_superuser",
......
biscuit/core/models.py
+ 1
− 0
View file @ 268ed715
......@@ -13,6 +13,7 @@ from .mixins import ExtensibleModel
class ThemeSettings(dbsettings.Group):
colour_primary = dbsettings.StringValue(default="#007bff")
colour_secondary = dbsettings.StringValue(default="#007bff")
theme_settings = ThemeSettings("Global theme settings")
......
biscuit/core/static/style.scss
+ 223
− 444
View file @ 268ed715
@import "materialize";
.primary-color {
background-color: $primary-color !important;
background-color: $primary-color !important;
}
.primary-color-text, .primary-color-text a {
color: $primary-color !important;
color: $primary-color !important;
}
li.active > a > .sidenav-badge {
background-color: whitesmoke !important;
color: #DA3D56 !important;
.waves-effect.waves-primary .waves-ripple {
background-color: lighten($primary-color, 5%);
}
// used in sidenav
/**********/
/* COMMON */
/**********/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
display: flex;
min-height: 100vh;
flex-direction: column;
}
header, main, footer {
margin-left: 300px;
}
@media only screen and (max-width: 992px) {
header, main, footer {
margin-left: 0;
}
}
/**********/
......@@ -28,16 +39,23 @@ body {
/**********/
.brand-logo {
margin-left: 10px;
margin-left: 10px;
}
@media only screen and (max-width: 993px) {
header div.nav-wrapper {
z-index: -5;
}
}
/********/
/* MAIN */
/********/
main {
padding: 10px 20px;
flex: 1 0 auto;
padding: 10px 20px;
flex: 1 0 auto;
}
/***********/
......@@ -45,633 +63,394 @@ main {
/***********/
ul.sidenav.sidenav-fixed li.logo {
margin-top: 32px;
margin-bottom: 50px;
margin-top: 32px;
margin-bottom: 50px;
}
ul.sidenav.sidenav-fixed .brand-logo {
margin: 0;
margin: 0;
}
.logo img {
width: 250px;
width: 250px;
}
header a.sidenav-trigger {
position: absolute;
left: 7.5%;
top: 0;
.sidenav a:not(.collapsible-header) {
padding: 0 16px;
}
height: 64px;
font-size: 38px;
ul.sidenav li.logo > a:hover {
background: none !important;
}
float: none;
.sidenav .collapsible-body > ul:not(.collapsible) > li.active a > i, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a > i {
color: #fff;
}
text-align: center;
color: white;
.sidenav .collapsible-body > ul:not(.collapsible) > li.active, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
background-color: lighten($primary-color, 5%);
}
z-index: 2;
li.active > a > .sidenav-badge {
background-color: whitesmoke !important;
color: $primary-color !important;
}
@media only screen and (max-width: 993px) {
header div.nav-wrapper {
z-index: -5;
}
}
// Sidenav trigger
header, main, footer {
margin-left: 300px;
header a.sidenav-trigger {
position: absolute;
left: 7.5%;
top: 0;
height: 64px;
font-size: 38px;
float: none;
text-align: center;
color: white;
z-index: 2;
}
// Footer
.footer-icon {
font-size: 22px !important;
vertical-align: middle;
font-size: 22px !important;
vertical-align: middle;
}
@media only screen and (min-width: 1384px) {
.footer-row-large {
display: flex;
align-items: center;
}
.footer-row-large {
display: flex;
align-items: center;
}
.footer-row-small {
display: none;
}
.footer-row-small {
display: none;
}
}
@media only screen and (max-width: 1383px) {
.footer-row-large {
display: none;
}
.footer-row-large {
display: none;
}
.footer-row-small {
display: block;
}
.footer-row-small {
display: block;
}
}
ul.footer-ul {
display: inline-block;
text-align: right;
float: right;
display: inline-block;
text-align: right;
float: right;
}
.make-it-higher {
vertical-align: middle;
line-height: 36px;
vertical-align: middle;
line-height: 36px;
}
@media only screen and (max-width: 992px) {
header, main, footer {
margin-left: 0;
}
}
/* Collections */
ul.collection .collection-item .title {
font-weight: bold;
font-weight: bold;
}
.section {
padding: 0;
}
// Forms
form .row {
margin-top: 0;
margin-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
/* Badges */
// Badges
span.badge.new::after {
content: "";
content: "";
}
span.badge.new {
font-size: 1rem;
line-height: 26px;
height: 26px;
font-size: 1rem;
line-height: 26px;
height: 26px;
}
span.badge.new.no-float {
float: none;
padding: 3px 6px;
float: none;
padding: 3px 6px;
}
span.badge .material-icons {
font-size: 0.9rem;
}
/*+++++++++++*/
/* Timetable */
/*+++++++++++*/
.smart-plan-badge {
margin: 5px 20px 5px 0;
font-size: 0.9rem;
}
.timetable-plan .row, .timetable-plan .col {
display: flex;
padding: 0 .25rem;
}
.timetable-plan .row {
margin-bottom: .25rem;
}
.lesson-card, .timetable-title-card {
margin: 0;
display: flex;
flex-grow: 1;
min-height: 65px;
}
.lesson-card .card-content {
padding: 0;
text-align: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.lesson-card .card-content div {
padding: 3px;
flex: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.timetable-title-card .card-content {
padding: 10px;
text-align: center;
width: 100%;
}
.timetable-mobile-title-card {
margin-top: 50px;
margin-bottom: .60rem;
}
.timetable-mobile-title-card:first-child {
margin-top: -10px;
margin-bottom: .60rem;
}
.timetable-mobile-title-card .card-content {
padding: 10px;
text-align: center;
width: 100%;
}
.timetable-mobile-title-card .card-content .card-title {
font-weight: bold;
}
table.substitutions td, table.substitutions th {
padding: 10px 5px;
}
.lesson-with-sub {
border: 3px solid red;
border-radius: 3px;
}
.lesson-with-sub .badge {
margin: 0;
}
.lesson-with-event {
border: 3px solid #9c27b0;
border-radius: 3px;
}
.lesson-card a, .substitutions a {
color: black;
}
/*.timetable-time {*/
/*margin-right: 20px;*/
/*}*/
/*+++++++++*/
/* Buttons */
/*+++++++++*/
.btn-flat-large {
line-height: 60px;
height: 60px;
line-height: 60px;
height: 60px;
}
.btn-flat-large i {
font-size: 4rem;
font-size: 4rem;
}
.btn-flat-medium {
line-height: 40px;
height: 40px;
line-height: 40px;
height: 40px;
}
.btn-flat-medium i {
font-size: 2rem;
font-size: 2rem;
}
.btn-timetable-quicklaunch {
margin: 1%;
width: 30%;
background-color: rgba(0, 0, 0, 0.05) !important;
color: black;
}
.btn-timetable-quicklaunch:hover {
background-color: #da1f3d !important;
color: whitesmoke;
}
.no-margin {
margin: 0 !important;
}
.valign-middle {
vertical-align: middle;
}
.valign-top {
vertical-align: top;
.btn.primary, .btn-large.primary, .btn-small.primary {
background-color: rgba(0, 0, 0, 0.05) !important;
color: black !important;
}
.valign-bot {
vertical-align: bottom;
.btn.primary:hover, .btn-large.primary:hover, .btn-small.primary {
background-color: $primary-color !important;
color: whitesmoke !important;
}
.height-inherit {
height: 100%;
}
/* Table*/
table.striped > tbody > tr:nth-child(odd) {
background-color: rgba(208, 208, 208, 0.5);
background-color: rgba(208, 208, 208, 0.5);
}
/*+++++++*/
/* Print */
/*+++++++*/
#print-header {
display: none;
display: none;
}
.print-icon {
margin-top: 1.52rem;
margin-top: 1.52rem;
}
@media print {
body {
font-size: 15px;
}
body {
font-size: 15px;
}
header, main, footer {
margin-left: 0;
}
header, main, footer {
margin-left: 0;
}
ul.sidenav {
display: none !important;
transform: translateX(-105%) !important;
}
ul.sidenav {
display: none !important;
transform: translateX(-105%) !important;
}
nav {
display: none;
}
nav {
display: none;
}
.sidenav-trigger {
display: none;
}
.sidenav-trigger {
display: none;
}
#print-header {
display: block;
border-bottom: 1px solid;
margin-bottom: 0;
}
#print-header {
display: block;
border-bottom: 1px solid;
margin-bottom: 0;
}
#print-header .col.right-align {
padding: 15px;
}
#print-header .col.right-align {
padding: 15px;
}
main, header {
padding: 0;
}
main, header {
padding: 0;
}
footer, footer .footer-copyright, footer .container {
background-color: white !important;
color: black !important;
}
footer, footer .footer-copyright, footer .container {
background-color: white !important;
color: black !important;
}
footer a {
display: none;
}
footer a {
display: none;
}
.footer-copyright, .footer-copyright .container {
padding: 0 !important;
margin: 0 !important;
}
.footer-copyright, .footer-copyright .container {
padding: 0 !important;
margin: 0 !important;
}
.no-print {
display: none;
}
.no-print {
display: none;
}
}
// Alerts
.alert ul, .alert p {
margin: 0;
margin: 0;
}
.alert > p, .alert > div {
margin: 10px;
padding: 10px;
border-left: 5px solid;
margin: 10px;
padding: 10px;
border-left: 5px solid;
}
.alert.success > p, .alert.success > div {
background-color: #c5e1a5;
border-color: #4caf50;
background-color: #c5e1a5;
border-color: #4caf50;
}
.alert.error > p, .alert.error > div {
background-color: #ef9a9a;
border-color: #b71c1c;
background-color: #ef9a9a;
border-color: #b71c1c;
}
.alert.primary > p, .alert.primary > div, .alert.info > p, .alert.info > div {
background-color: #ececec;
border-color: #da1f3d;
background-color: #ececec;
border-color: $primary-color;
}
.alert.warning p, .alert.warning div {
background-color: #ffb74d;
border-color: #e65100;
background-color: #ffb74d;
border-color: #e65100;
}
main .alert p:first-child, main .alert div:first-child {
margin-left: -10px;
margin-right: -10px;
}
.btn.primary, .btn-large.primary, .btn-small.primary {
background-color: rgba(0, 0, 0, 0.05) !important;
color: black !important;
}
.btn.primary:hover, .btn-large.primary:hover, .btn-small.primary {
background-color: #da1f3d !important;
color: whitesmoke !important;
}
/*++++++++++++++++
FEEDBACK
++++++++++++++++*/
.rating {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
width: 100%;
min-width: 150px;
max-width: 600px;
justify-content: flex-end;
}
@media only screen and (max-width: 992px) {
.rating {
margin-top: 12px;
min-height: 40px;
justify-content: space-around;
}
}
.rating label {
display: flex;
flex: 1;
position: relative;
cursor: pointer;
}
.rating label:after {
font-family: 'Material Icons';
-webkit-font-feature-settings: 'liga';
position: absolute;
color: #777;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 40px;
content: 'star_border';
}
.rating input {
display: none !important;
}
.rating > input:checked + label:after,
.rating > input:checked ~ label:after {
content: "star";
color: #FFD700;
margin-left: -10px;
margin-right: -10px;
}
.rating > input:hover + label:after,
.rating > input:hover ~ label:after {
content: "star";
color: #FFD700;
}
.support-input-mobile label {
line-height: 1rem;
}
.span-info {
width: 24px;
vertical-align: middle;
}
i.collapsible-trigger {
margin-right: -10px;
}
.collapsible .collapsible-trigger::before {
content: 'arrow_downward';
}
.collapsible .collapsible-trigger.v2::before {
content: 'more_vert';
}
.collapsible .active .collapsible-trigger::before {
content: 'arrow_upward';
}
.scroll-fix {
max-height: 300px;
overflow: scroll;
}
.waves-effect.waves-katharineum .waves-ripple {
background-color: rgba(218, 31, 61, 0.65);
}
// Helpers
.no-margin {
margin: 0 !important;
margin: 0 !important;
}
.no-padding {
padding: 0 !important;
padding: 0 !important;
}
.no-pad-left {
padding-left: 0 !important;
padding-left: 0 !important;
}
.no-pad-right {
padding-right: 0 !important;
}
.sidenav a:not(.collapsible-header) {
padding: 0 16px;
}
ul.sidenav li.logo > a:hover {
background: none !important;
padding-right: 0 !important;
}
.waves-effect.waves-primary .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: #da1f3d;
}
.sidenav .collapsible-body > ul:not(.collapsible) > li.active a > i, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a > i {
color: #fff;
.valign-middle {
vertical-align: middle;
}
.sidenav .collapsible-body > ul:not(.collapsible) > li.active, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
background-color: #DA3D56;
.valign-top {
vertical-align: top;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
color: #da1f3d;
.valign-bot {
vertical-align: bottom;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover {
color: #ea4661;
.height-inherit {
height: 100%;
}
/*section:not(:last-of-type) {*/
/* border-bottom: solid #bdbdbd 2px;*/
/*}*/
/*++++++++
+HOLIDAYS+
++++++++++ */
.holiday-badge {
float: left !important;
position: relative;
margin-left: 0% !important;
left: 50%;
transform: translate(-50%);
width: auto;
height: auto !important;
min-height: 26px;
}
/* Dashboard */
.card-action-badge {
float: left !important;
margin-left: 0 !important;
margin-top: -3px;
margin-right: 10px;
float: left !important;
margin-left: 0 !important;
margin-top: -3px;
margin-right: 10px;
}
.event-card {
padding: 10px;
padding: 10px;
}
.event-card .title {
font-size: 18px;
font-weight: 500;
font-size: 18px;
font-weight: 500;
}
.flex-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.hundred-percent {
width: 100%;
width: 100%;
}
.badge-image {
position: absolute;
left: 0;
top: 10px;
z-index: 1;
background-color: #da1f3d;
color: white;
padding: 2px 10px;
border-radius: 0 3px 3px 0;
text-transform: uppercase;
font-weight: 300;
position: absolute;
left: 0;
top: 10px;
z-index: 1;
background-color: $primary-color;
color: white;
padding: 2px 10px;
border-radius: 0 3px 3px 0;
text-transform: uppercase;
font-weight: 300;
}
.center-via-flex {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.center2-via-flex {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.spinner-primary {
border-color: #da1f3d;
border-color: $primary-color;
}
.dashboard-cards {
-webkit-column-break-inside: avoid;
column-count: 3;
-webkit-column-break-inside: avoid;
column-count: 3;
}
@media (min-width: 800px) and (max-width: 1460px) {
.dashboard-cards {
column-count: 2;
}
.dashboard-cards {
column-count: 2;
}
}
@media (max-width: 800px) {
.dashboard-cards {
column-count: 1;
}
.dashboard-cards {
column-count: 1;
}
}
.dashboard-cards .card {
display: inline-block;
overflow: visible;
width: 100%;
display: inline-block;
overflow: visible;
width: 100%;
}
biscuit/core/static/theme.scss
+ 1
− 1
View file @ 268ed715
......@@ -38,7 +38,7 @@ $primary-color: adjust-color(get-colour(get-theme-setting(colour_primary)), $alp
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: $primary-color;
$secondary-color: adjust-color(get-colour(get-theme-setting(colour_secondary)), $alpha: 1);
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment