liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Color Themes - Header + Sidebar + Footer support

Browse Source
This commit is contained in:
NGPixel
2017-06-26 17:47:01 -04:00
committed by Nicolas Giard
parent c863059a53
commit 247d598edb
8 changed files with 107 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/scss/components/footer.scss
View File

@@ -27,4 +27,11 @@
}
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color,'50');
color: mc($color,'500');
}
}
}

42
client/scss/components/nav.scss
View File

@@ -10,25 +10,37 @@
z-index: 2;
color: #FFF;
/* THEME OVERRIDE - START */
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color, '500');
box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2);
.nav-item a, a.nav-item {
color: mc($color, '50');
&:hover {
color: mc($color, '200');
}
}
h1:hover {
color: mc($color, '100');
}
.nav-item {
.button {
border: 1px solid mc($color, '900');
background-color: mc($color, '800');
&.is-outlined {
background-color: mc($color, '600');
border-color: mc($color, '800');
color: mc($color, '100');
}
&:hover {
border-color: mc($color, '900');
background-color: mc($color, '900');
}
@@ -36,9 +48,31 @@
}
.control {
input[type=text] {
background-color: mc($color, '800');
border-color: mc($color, '400');
color: mc($color, '50');
&:focus {
border-color: mc($color, '200');
box-shadow: inset 0 0 5px 0 rgba(mc($color, '900'), 0.5);
}
@include placeholder {
color: mc($color, '200');
}
}
}
}
}
/* THEME OVERRIDE - END */
}
.nav-left {
@@ -117,7 +151,7 @@
}
&:hover {
color: mc('indigo', '100');
color: mc($primary, '100');
}
}

51
client/scss/components/sidebar.scss
View File

@@ -135,3 +135,54 @@
}
}
/* THEME OVERRIDE - START */
@each $color, $colorvalue in $material-colors {
.is-alternate-#{$color} .sidebar {
background-color: mc($color, '900');
color: mc($color, '50');
aside {
.sidebar-label {
color: mc($color, '300');
background-color: mc($color, '800');
}
.sidebar-menu {
li {
a {
color: mc($color, '50');
&.is-active {
border-left-color: mc($color, '500');
color: mc($color, '300');
.is-small {
color: mc($color, '500');
}
}
&:hover {
color: mc($color, '400');
}
i {
color: mc($color, '300');
}
}
> ul {
border-top-color: lighten(mc($color, '900'), 3%);
border-bottom-color: lighten(mc($color, '900'), 2%);
background-color: darken(mc($color, '900'), 2%);
li a {
color: mc($color, '100');
}
}
}
}
}
}
}
/* THEME OVERRIDE - END */