g_it/theming
g_it/theming
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update: Widgets and menu styling

Browse source
This commit is contained in:
Ronan 2020-01-17 17:25:07 +01:00
commit 94444594ab
20 changed files with 230 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

12
stylesheets/_colors.less Normal file
View file

@ -0,0 +1,12 @@
@theme-color-brand: #1a73e8;
@theme-color-background-base: #f8f9fa;
@theme-color-header-background: #ffffff;
@theme-color-header-text: #5f6368;
@theme-color-widget-title-background: #f8f9fa;
@theme-color-widget-title-text: #4a4a4a;
@theme-color-menu-contrast-text: rgba(0,0,0,0.54);
@theme-color-menu-contrast-textActive: #3c4043;
@theme-color-menu-contrast-textSelected: #1a73e8;
@theme-color-menu-contrast-background: transprent;

10
stylesheets/_variables.less
View file

@ -1,9 +1 @@
//Main
@theme-color-background-base: #f8f9fa;
@theme-color-brand: #4285f4;
//Menu
@theme-color-menu-contrast-text: #727273;
@theme-color-menu-contrast-textSelected: #1a73e8;
@theme-color-menu-contrast-textActive: #3c4043;
@theme-color-menu-contrast-background: transparent;
@theme-fontFamily-base: Arial, Verdana, sans-serif;

11
stylesheets/components/_card.less Normal file
View file

@ -0,0 +1,11 @@
.card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
.card-content {
.card-title {
}
}
}

7
stylesheets/components/_header.less Normal file
View file

@ -0,0 +1,7 @@
nav {
box-shadow: none !important;
.nav-wrapper {
border-bottom: 1px solid #dadce0;
}
}

32
stylesheets/components/_menu.less Normal file
View file

@ -0,0 +1,32 @@
#secondNavBar {
ul {
& > li > ul > li.active > .item {
background-color: #e8f0fe !important;
}
li {
&.active > a {
background-color: #e8eaed !important;
}
a {
border-radius: 0 50em 50em 0;
font-weight: 500;
font-size: 14px;
//letter-spacing: .25px;
color: rgba(0,0,0,0.54);
&:focus {
outline: none !important;
}
&:hover {
background-color: #dadce1 !important;
transition: .2s ease all;
}
}
}
}
}

4
stylesheets/components/_search.less Normal file
View file

@ -0,0 +1,4 @@
.quick-access {
background-color: transparent;
box-shadow: none !important;
}

24
stylesheets/components/_sparkline.less Normal file
View file

@ -0,0 +1,24 @@
// sparkline colors
.sparkline-colors[data-name=backgroundColor] {
color: white;
}
.sparkline-colors[data-name=lineColor] {
color: #058DC7;
}
.sparkline-colors[data-name=minPointColor] {
color: #058DC7 //darken(#058DC7, 10);
}
.sparkline-colors[data-name=maxPointColor] {
color: #058DC7 //darken(#058DC7, 10);
}
.sparkline-colors[data-name=lastPointColor] {
color: white; //hidden
}
.sparkline-colors[data-name=fillColor] {
color: lighten(#058DC7, 55);
}

44
stylesheets/components/_widget.less Normal file
View file

@ -0,0 +1,44 @@
.widget {
background-color: transparent;
box-shadow: none;
border: none !important;
&:hover {
box-shadow: none;
}
.widgetTop {
border: none;
background-color: transparent;
padding: 0 !important;
.buttons {
background: @theme-color-background-base;
top: 4px;
right: 0;
padding-left: 0;
.button {
margin-top: 0px;
&:first-child {
margin-right: 0;
}
}
}
.widgetName {
padding: 0 0 15px 0 !important;
font-weight: 300;
color: #4a4a4a;
}
}
.widgetContent {
border-radius: 2px;
border: none;
padding: 14px;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}
}

2
stylesheets/layout/_header.less
View file

@ -1,2 +0,0 @@
@theme-color-header-background: #ffffff;
@theme-color-header-text: #5f6368;

28
stylesheets/layout/_menu.less
View file

@ -1,28 +0,0 @@
#root #secondNavBar .navbar {
border-top: 1px solid rgba(0, 0, 0, 0.08);;
}
#root .borderedControl {
box-shadow: none;
background-color: transparent;
transition: .2s ease all;
&:hover {
background-color: rgba(158, 158, 158, 0.2);
transition: .2s ease all;
}
}
#root #secondNavBar .navbar > li .item {
padding: 10px 21px 10px 19px;
border-radius: 0 50em 50em 0;
background-color: transparent;
transition: .2s ease all;
&:hover {
background-color: #dadce0;
transition: .2s ease all;
}
}

23
stylesheets/theme.less
View file

@ -1,3 +1,22 @@
@import "_colors";
@import "_variables";
@import "layout/_header";
@import "layout/_menu";
@import "components/_card";
@import "components/_header";
@import "components/_menu";
@import "components/_search";
@import "components/_sparkline";
@import "components/_widget";
@theme-color-brand: #1a73e8;
@theme-color-background-base: #f8f9fa;
@theme-color-header-background: #ffffff;
@theme-color-header-text: #5f6368;
@theme-color-widget-title-background: #f8f9fa;
@theme-color-widget-title-text: #4a4a4a;
@theme-color-menu-contrast-text: rgba(0,0,0,0.54);
@theme-color-menu-contrast-textActive: #3c4043;
@theme-color-menu-contrast-textSelected: #1a73e8;
@theme-color-menu-contrast-background: transprent;