Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Dark Theme styles have their own sheet 

Trying to clean things up
pull/10616/head
Alex P 2016-11-30 11:51:24 -08:00
parent e37183a1f6
commit 9778c84e0f
3 changed files with 157 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/style/enterprise_style/_enterprise-custom.scss
View File

@ -545,46 +545,4 @@ table .monotype {
margin-bottom: 75px;
}
}
}
/*
Dark Inputs
----------------------------------------------
Using a ton of !important to override styles from
the bootstrap theme. #designdebt
*/
.form-group {
margin-bottom: 9px;
}
.form-group label {
font-size: 12px;
line-height: 12px;
font-weight: 600;
margin-bottom: 4px;
padding: 0 13px;
}
.form-control {
padding: 0 13px;
background-color: $g2-kevlar !important;
border-color: $g5-pepper !important;
color: $g15-platinum !important;
&:hover {
border-color: $g6-smoke !important;
}
&:focus {
border-color: $c-pool !important;
box-shadow: 0 0 6px 0px $c-pool !important;
color: $g20-white !important;
}
}
.form-helper {
margin: 4px 0 !important;
font-weight: 400 !important;
font-style: italic;
line-height: 16px !important;
}
.form-group-submit {
margin-top: 30px;
}

1
ui/src/style/enterprise_style/application.scss
View File

@ -4,6 +4,7 @@
@import 'font-awesome';
@import 'fonts';
@import 'theme';
@import 'theme-dark';
@import 'tasks';
@import 'users';
@import 'sub-page';

156
ui/src/style/enterprise_style/theme-dark.scss Normal file
View File

@ -0,0 +1,156 @@
/*
Dark Theme Styles
----------------------------------------------
This stylesheet has overrides for the theme, so you are
going to see al ot of !important =(
This is design debt. One day the theme will not have to be overrided
*/
/*
Dark Button Styles
----------------------------------------------
*/
.btn {
border: 0;
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease;
}
.btn.btn-sm {
font-size: 13px;
line-height: 28px !important;
height: 28px !important;
padding: 0 9px !important;
}
/*
Dark Inputs
----------------------------------------------
*/
.form-group {
margin-bottom: 9px;
}
.form-group label {
font-size: 12px;
line-height: 12px;
font-weight: 600;
margin-bottom: 4px;
padding: 0 13px;
}
.form-control {
padding: 0 13px;
background-color: $g2-kevlar !important;
border-color: $g5-pepper !important;
color: $g15-platinum !important;
&:hover {
border-color: $g6-smoke !important;
}
&:focus {
border-color: $c-pool !important;
box-shadow: 0 0 6px 0px $c-pool !important;
color: $g20-white !important;
}
}
.form-helper {
margin: 4px 0 !important;
font-weight: 400 !important;
font-style: italic;
line-height: 16px !important;
}
.form-group-submit {
margin-top: 30px;
}
/*
Dark Dropdown Styles
----------------------------------------------
*/
.dropdown-toggle {
position: relative;
text-align: left;
.caret {
position: absolute;
top: calc(50% + 1px);
right: 8px;
transform: translateY(-50%);
}
}
.dropdown-menu {
float: none !important;
width: 100%;
min-width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
min-height: 70px;
max-height: 290px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar($c-pool,$c-laser);
@include gradient-h($c-ocean,$c-pool);
> li {
width: 100%;
font-size: 0px;
}
> li > a {
width: 100%;
border-radius: 0 !important;
display: inline-block;
padding: 7px 9px;
font-size: 13px;
line-height: 15px;
font-weight: 500;
color: $c-yeti !important;
background-color: transparent;
transition:
color 0.25s ease;
&:hover {
cursor: pointer;
@include gradient-h($c-laser,$c-pool);
color: $g20-white !important;
}
}
> li:last-child a {
border-radius: 0 0 3px 3px;
}
> li:first-child a {
border-radius: 3px 3px 0 0;
}
}
.dropdown-menu--kapacitor {
@include custom-scrollbar($c-rainforest,$c-honeydew);
@include gradient-h($c-pool,$c-rainforest);
> li > a {
color: $c-mint !important;
&:hover {
color: $g20-white !important;
@include gradient-h($c-laser,$c-rainforest);
}
}
}
.dropdown-menu--chronograf {
@include custom-scrollbar($c-comet,$c-potassium);
@include gradient-h($c-ocean,$c-comet);
> li > a {
color: $c-cremedeviolette !important;
&:hover {
color: $g20-white !important;
@include gradient-h($c-laser,$c-comet);
}
}
}