dashboard colors and design changes

This commit is contained in:
Nabeel Shahzad
2017-08-18 12:02:32 -05:00
parent 22503fff6b
commit 0a3ea07549
20 changed files with 254 additions and 203 deletions

View File

@@ -32,7 +32,7 @@
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Muli', "Helvetica", Arial, sans-serif; }
font-family: "Roboto","Helvetica Neue",Arial,sans-serif; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
font-weight: 400;
@@ -47,22 +47,23 @@ h2, .h2 {
h3, .h3 {
font-size: 1.825em;
line-height: 1.4;
font-weight: 300;
margin: 20px 0 10px; }
h4, .h4 {
font-size: 1.5em;
font-weight: 600;
font-weight: 300;
line-height: 1.2em; }
h5, .h5 {
font-size: 1.25em;
font-weight: 400;
font-weight: 300;
line-height: 1.4em;
margin-bottom: 15px; }
h6, .h6 {
font-size: 0.9em;
font-weight: 600;
font-weight: 300;
text-transform: uppercase; }
p {
@@ -288,7 +289,7 @@ hr {
top: 8px; }
.sidebar .nav li.active > a:after,
.off-canvas-sidebar .nav li.active > a:after {
border-right: 17px solid #f4f3ef;
border-right: 17px solid #ebeff2;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
content: "";
@@ -344,7 +345,7 @@ hr {
.sidebar .nav li:not(.active) > a, .sidebar[data-background-color="white"] .nav li:not(.active) > a,
.off-canvas-sidebar .nav li:not(.active) > a,
.off-canvas-sidebar[data-background-color="white"] .nav li:not(.active) > a {
color: #66615B; }
color: #b6c3cc; }
.sidebar .nav .divider, .sidebar[data-background-color="white"] .nav .divider,
.off-canvas-sidebar .nav .divider,
.off-canvas-sidebar[data-background-color="white"] .nav .divider {
@@ -352,7 +353,7 @@ hr {
.sidebar[data-background-color="black"]:after, .sidebar[data-background-color="black"]:before,
.off-canvas-sidebar[data-background-color="black"]:after,
.off-canvas-sidebar[data-background-color="black"]:before {
background-color: #212120; }
background-color: #0c1419; }
.sidebar[data-background-color="black"] .logo,
.off-canvas-sidebar[data-background-color="black"] .logo {
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
@@ -364,7 +365,7 @@ hr {
color: #FFFFFF; }
.sidebar[data-background-color="black"] .nav li:not(.active) > a,
.off-canvas-sidebar[data-background-color="black"] .nav li:not(.active) > a {
color: #FFFFFF; }
color: #b6c3cc; }
.sidebar[data-background-color="black"] .nav .divider,
.off-canvas-sidebar[data-background-color="black"] .nav .divider {
background-color: rgba(255, 255, 255, 0.2); }
@@ -390,7 +391,7 @@ hr {
opacity: 1; }
.main-panel {
background-color: #f4f3ef;
background-color: #ebeff2;
position: relative;
z-index: 2;
float: right;
@@ -417,8 +418,7 @@ hr {
transition-timing-function: linear,linear;
-webkit-overflow-scrolling: touch; }
.btn,
.navbar .navbar-nav > li > a.btn {
.btn, .navbar .navbar-nav > li > a.btn {
border-radius: 20px;
box-sizing: border-box;
border-width: 2px;
@@ -467,60 +467,40 @@ hr {
.navbar .navbar-nav > li > a.btn[disabled]:focus,
.navbar .navbar-nav > li > a.btn[disabled].focus,
.navbar .navbar-nav > li > a.btn[disabled]:active,
.navbar .navbar-nav > li > a.btn[disabled].active, fieldset[disabled]
.navbar .navbar-nav > li > a.btn, fieldset[disabled]
.navbar .navbar-nav > li > a.btn:hover, fieldset[disabled]
.navbar .navbar-nav > li > a.btn:focus, fieldset[disabled]
.navbar .navbar-nav > li > a.btn.focus, fieldset[disabled]
.navbar .navbar-nav > li > a.btn:active, fieldset[disabled]
.navbar .navbar-nav > li > a.btn.active {
.navbar .navbar-nav > li > a.btn[disabled].active,
fieldset[disabled] .navbar .navbar-nav > li > a.btn,
fieldset[disabled] .navbar .navbar-nav > li > a.btn:hover,
fieldset[disabled] .navbar .navbar-nav > li > a.btn:focus,
fieldset[disabled] .navbar .navbar-nav > li > a.btn.focus,
fieldset[disabled] .navbar .navbar-nav > li > a.btn:active,
fieldset[disabled] .navbar .navbar-nav > li > a.btn.active {
background-color: transparent;
border-color: #66615B; }
.btn.btn-fill,
.navbar .navbar-nav > li > a.btn.btn-fill {
.btn.btn-fill, .navbar .navbar-nav > li > a.btn.btn-fill {
color: #FFFFFF;
background-color: #66615B;
opacity: 1;
filter: alpha(opacity=100); }
.btn.btn-fill:hover, .btn.btn-fill:focus, .btn.btn-fill:active, .btn.btn-fill.active, .open > .btn.btn-fill.dropdown-toggle,
.navbar .navbar-nav > li > a.btn.btn-fill:hover,
.navbar .navbar-nav > li > a.btn.btn-fill:focus,
.navbar .navbar-nav > li > a.btn.btn-fill:active,
.navbar .navbar-nav > li > a.btn.btn-fill.active, .open >
.navbar .navbar-nav > li > a.btn.btn-fill.dropdown-toggle {
.btn.btn-fill:hover, .btn.btn-fill:focus, .btn.btn-fill:active, .btn.btn-fill.active, .open > .btn.btn-fill.dropdown-toggle, .navbar .navbar-nav > li > a.btn.btn-fill:hover, .navbar .navbar-nav > li > a.btn.btn-fill:focus, .navbar .navbar-nav > li > a.btn.btn-fill:active, .navbar .navbar-nav > li > a.btn.btn-fill.active, .open > .navbar .navbar-nav > li > a.btn.btn-fill.dropdown-toggle {
background-color: #403D39;
color: #FFFFFF;
border-color: #403D39; }
.btn.btn-fill .caret,
.navbar .navbar-nav > li > a.btn.btn-fill .caret {
.btn.btn-fill .caret, .navbar .navbar-nav > li > a.btn.btn-fill .caret {
border-top-color: #FFFFFF; }
.btn.btn-simple:hover, .btn.btn-simple:focus, .btn.btn-simple:active, .btn.btn-simple.active, .open > .btn.btn-simple.dropdown-toggle,
.navbar .navbar-nav > li > a.btn.btn-simple:hover,
.navbar .navbar-nav > li > a.btn.btn-simple:focus,
.navbar .navbar-nav > li > a.btn.btn-simple:active,
.navbar .navbar-nav > li > a.btn.btn-simple.active, .open >
.navbar .navbar-nav > li > a.btn.btn-simple.dropdown-toggle {
.btn.btn-simple:hover, .btn.btn-simple:focus, .btn.btn-simple:active, .btn.btn-simple.active, .open > .btn.btn-simple.dropdown-toggle, .navbar .navbar-nav > li > a.btn.btn-simple:hover, .navbar .navbar-nav > li > a.btn.btn-simple:focus, .navbar .navbar-nav > li > a.btn.btn-simple:active, .navbar .navbar-nav > li > a.btn.btn-simple.active, .open > .navbar .navbar-nav > li > a.btn.btn-simple.dropdown-toggle {
background-color: transparent;
color: #403D39; }
.btn.btn-simple .caret,
.navbar .navbar-nav > li > a.btn.btn-simple .caret {
.btn.btn-simple .caret, .navbar .navbar-nav > li > a.btn.btn-simple .caret {
border-top-color: #FFFFFF; }
.btn .caret,
.navbar .navbar-nav > li > a.btn .caret {
.btn .caret, .navbar .navbar-nav > li > a.btn .caret {
border-top-color: #66615B; }
.btn:hover, .btn:focus,
.navbar .navbar-nav > li > a.btn:hover,
.navbar .navbar-nav > li > a.btn:focus {
.btn:hover, .btn:focus, .navbar .navbar-nav > li > a.btn:hover, .navbar .navbar-nav > li > a.btn:focus {
outline: 0 !important; }
.btn:active, .btn.active, .open > .btn.dropdown-toggle,
.navbar .navbar-nav > li > a.btn:active,
.navbar .navbar-nav > li > a.btn.active, .open >
.navbar .navbar-nav > li > a.btn.dropdown-toggle {
.btn:active, .btn.active, .open > .btn.dropdown-toggle, .navbar .navbar-nav > li > a.btn:active, .navbar .navbar-nav > li > a.btn.active, .open > .navbar .navbar-nav > li > a.btn.dropdown-toggle {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0 !important; }
.btn.btn-icon,
.navbar .navbar-nav > li > a.btn.btn-icon {
.btn.btn-icon, .navbar .navbar-nav > li > a.btn.btn-icon {
padding: 7px; }
.btn-group .btn + .btn,
@@ -1160,7 +1140,8 @@ textarea.form-control {
font-size: 16px;
z-index: 3; }
.navbar .navbar-brand {
font-weight: 600;
color: #FFFFFF;
font-weight: 300;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px; }
@@ -1189,12 +1170,13 @@ textarea.form-control {
margin-top: -5px; }
.navbar-default {
background-color: #f4f3ef;
color: #FFFFFF;
background-color: #067ec1;
border-bottom: 1px solid #DDDDDD; }
.navbar-default .brand {
color: #66615b !important; }
color: #FFFFFF !important; }
.navbar-default .navbar-nav > li > a:not(.btn) {
color: #9A9A9A; }
color: #FFFFFF; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:not(.btn):hover,
.navbar-default .navbar-nav > .active > a:not(.btn):focus,
@@ -1919,7 +1901,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 88.88889%; }
padding-bottom: 88.8888888889%; }
.ct-major-second:after {
content: "";
display: table;
@@ -1940,7 +1922,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 83.33333%; }
padding-bottom: 83.3333333333%; }
.ct-minor-third:after {
content: "";
display: table;
@@ -2003,7 +1985,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 66.66667%; }
padding-bottom: 66.6666666667%; }
.ct-perfect-fifth:after {
content: "";
display: table;
@@ -2045,7 +2027,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 61.8047%; }
padding-bottom: 61.804697157%; }
.ct-golden-section:after {
content: "";
display: table;
@@ -2108,7 +2090,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 53.33333%; }
padding-bottom: 53.3333333333%; }
.ct-major-seventh:after {
content: "";
display: table;
@@ -2192,7 +2174,7 @@ textarea.form-control {
content: "";
width: 0;
height: 0;
padding-bottom: 33.33333%; }
padding-bottom: 33.3333333333%; }
.ct-major-twelfth:after {
content: "";
display: table;
@@ -2247,8 +2229,8 @@ textarea.form-control {
.navbar-nav > li > .dropdown-menu:before {
border-bottom: 11px solid #F1EAE0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-left: 11px solid rgba(0, 0, 0, 0);
border-right: 11px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
position: absolute;
@@ -2257,8 +2239,8 @@ textarea.form-control {
.navbar-nav > li > .dropdown-menu:after {
border-bottom: 11px solid #FFFCF5;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-left: 11px solid rgba(0, 0, 0, 0);
border-right: 11px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
position: absolute;
@@ -2407,7 +2389,7 @@ textarea.form-control {
top: 10px; }
.off-canvas-sidebar .nav > li.active > a:after {
border-right: none;
border-left: 12px solid #f4f3ef;
border-left: 12px solid #ebeff2;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
right: auto;
@@ -2420,8 +2402,8 @@ textarea.form-control {
height: 100%;
width: 100%;
position: absolute;
background-color: #f4f3ef;
background-image: linear-gradient(to bottom, transparent 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
background-color: #ebeff2;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
display: block;
content: "";
z-index: 1; }
@@ -2762,3 +2744,5 @@ textarea.form-control {
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch; } }
/*# sourceMappingURL=paper-dashboard.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -13,7 +13,8 @@
z-index: 3;
.navbar-brand{
font-weight: $font-weight-bold;
color: $white-color;
font-weight: $font-weight-light;;
margin: $navbar-margin-brand;
padding: $navbar-padding-brand;
font-size: $font-size-large-navbar;
@@ -54,15 +55,16 @@
}
.navbar-default {
background-color: $bg-nude;
color: $white-color;
background-color: $phpvms-blue;
border-bottom: 1px solid $medium-gray;
.brand{
color: $font-color !important;
color: $white-color !important;
}
.navbar-nav{
> li > a:not(.btn){
color: $dark-gray;
color: $white-color;
}
> .active > a,

View File

@@ -1,7 +1,8 @@
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Muli', "Helvetica", Arial, sans-serif;
//font-family: 'Roboto', "Helvetica", Arial, sans-serif;
font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4{
@@ -18,22 +19,23 @@ h2, .h2{
h3, .h3{
font-size: $font-size-h3;
line-height: 1.4;
font-weight: $font-weight-light;
margin: 20px 0 10px;
}
h4, .h4{
font-size: $font-size-h4;
font-weight: $font-weight-bold;
font-weight: $font-weight-light;
line-height: 1.2em;
}
h5, .h5 {
font-size: $font-size-h5;
font-weight: $font-weight-normal;
font-weight: $font-weight-light;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
font-weight: $font-weight-bold;
font-weight: $font-weight-light;
text-transform: uppercase;
}
p{

View File

@@ -1,3 +1,5 @@
$phpvms-blue: #067ec1 !default;
$font-color: #66615b !default;
$fill-font-color: rgba(255, 255, 255, 0.7);
@@ -21,7 +23,10 @@ $black-color: #333333 !default;
$black-hr: #444444 !default;
$white-background-color: #FFFFFF !default;
$black-background-color: #212120 !default;
//$black-background-color: #212120 !default;
//$black-background-color: #1a2932 !default;
$black-background-color: #0c1419 !default;
$light-gray: #E3E3E3 !default;
$medium-gray: #DDDDDD !default;
@@ -195,7 +200,7 @@ $green-navbar: rgba(#4CD964, .98);
$orange-navbar: rgba(#FF9500, .98);
$red-navbar: rgba(#FF4C40, .98);
$bg-nude: #f4f3ef !default;
$bg-nude: #ebeff2 !default;
$bg-primary: #8ECFD5 !default;
$bg-info: #7CE4FE !default;
$bg-success: #8EF3C5 !default;

View File

@@ -19,13 +19,13 @@
.nav{
li:not(.active){
> a{
color: $font-color;
color: #b6c3cc;
}
}
.divider{
background-color: rgba($font-color,.2);
}
}
}