Skip to content

N
nexpie-grafana-theme
Commit 50920b14 by Torkel Ödegaard
Options

ux(forms): minor upgrade to new form design

parent 42b1c8c8
Showing with 20 additions and 60 deletions
public/less/bootswatch.dark.less
...@@ -31,10 +31,7 @@ html { ...@@ -31,10 +31,7 @@ html {
body { body {
height: 100%; height: 100%;
//#gradient > .vertical (@bodyBackground, #252A30); background: @bodyBackground;
//background: @bodyBackground;
background: @nonDashBodyBackground;
// url('../img/cubes.png') repeat right top;
} }
.page-header { .page-header {
......
public/less/filter-table.less
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.filter-table tr { .filter-table tr {
background: @grafanaListBackground; background: @grafanaListBackground;
border-bottom: 2px solid @nonDashBodyBackground; border-bottom: 2px solid @pageBackground;
} }
.filter-table th { .filter-table th {
......
public/less/gfbox.less
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
} }
.page-container { .page-container {
background-color: @pageBackground;
position: relative; position: relative;
padding: 20px 20px 60px 81px; padding: 20px 20px 60px 81px;
} }
......
public/less/normform.less
.norm-form { .norm-form {
border-top: 3px solid @nonDashBodyBackground; border-top: 3px solid @pageBackground;
border-left: 3px solid @nonDashBodyBackground; border-left: 3px solid @pageBackground;
border-right: 3px solid @nonDashBodyBackground; border-right: 3px solid @pageBackground;
background: transparent; background: transparent;
&.last { &.last {
border-bottom: 1px solid @nonDashBodyBackground; border-bottom: 1px solid @pageBackground;
} }
&.borderless { &.borderless {
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.norm-form-container-no-item-borders { .norm-form-container-no-item-borders {
border: 1px solid @nonDashBodyBackground; border: 1px solid @pageBackground;
border-bottom: none; border-bottom: none;
.norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input { .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input {
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.norm-form-container { .norm-form-container {
border-bottom: 1px solid @nonDashBodyBackground; border-bottom: 1px solid @pageBackground;
} }
.norm-form-btn { .norm-form-btn {
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
padding: 8px 7px; padding: 8px 7px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
border-right: 3px solid @nonDashBodyBackground; border-right: 3px solid @pageBackground;
color: @grayLighter; color: @grayLighter;
display: inline-block; display: inline-block;
.small; .small;
...@@ -139,7 +139,7 @@ input[type=text].norm-form-clear-input { ...@@ -139,7 +139,7 @@ input[type=text].norm-form-clear-input {
background: transparent; background: transparent;
color: @grafanaTargetColor; color: @grafanaTargetColor;
border-radius: 0; border-radius: 0;
border-right: 2px solid @nonDashBodyBackground; border-right: 2px solid @pageBackground;
} }
[type=text], [type=text],
...@@ -148,7 +148,7 @@ input[type=text].norm-form-clear-input { ...@@ -148,7 +148,7 @@ input[type=text].norm-form-clear-input {
[type=password] { [type=password] {
&.norm-form-input { &.norm-form-input {
border: none; border: none;
border-right: 2px solid @nonDashBodyBackground; border-right: 3px solid @pageBackground;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 6px; padding: 8px 6px;
...@@ -172,7 +172,7 @@ input[type=checkbox].norm-form-checkbox { ...@@ -172,7 +172,7 @@ input[type=checkbox].norm-form-checkbox {
select.norm-form-input { select.norm-form-input {
border: none; border: none;
border-right: 1px solid @grafanaTargetSegmentBorder; border-right: 3px solid @pageBackground;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
...@@ -182,25 +182,6 @@ select.norm-form-input { ...@@ -182,25 +182,6 @@ select.norm-form-input {
} }
} }
.norm-form-func-controls {
display: none;
text-align: center;
.fa-arrow-left {
float: left;
position: relative;
top: 2px;
}
.fa-arrow-right {
float: right;
position: relative;
top: 2px;
}
.fa-remove {
margin-left: 10px;
}
}
.norm-form-radio { .norm-form-radio {
input[type=radio] { input[type=radio] {
margin: 0; margin: 0;
...@@ -209,21 +190,6 @@ select.norm-form-input { ...@@ -209,21 +190,6 @@ select.norm-form-input {
display: inline; display: inline;
} }
} }
.norm-form-section {
margin-bottom: 20px;
margin-right: 40px;
vertical-align: top;
display: inline-block;
.norm-form {
margin-left: 20px;
}
}
.norm-form-align {
padding-left: 66px;
}
.norm-form-item-large { width: 115px; } .norm-form-item-large { width: 115px; }
.norm-form-item-xlarge { width: 150px; } .norm-form-item-xlarge { width: 150px; }
.norm-form-item-xxlarge { width: 200px; } .norm-form-item-xxlarge { width: 200px; }
......
public/less/variables.dark.less
...@@ -52,9 +52,9 @@ ...@@ -52,9 +52,9 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: rgb(22,22,22); @bodyBackground: rgb(20,20,20);
@nonDashBodyBackground: @grayDarker; @pageBackground: @grayDarker;
@textColor: @grayLighter; @textColor: @grayLighter;
// Links // Links
// ------------------------- // -------------------------
...@@ -105,8 +105,6 @@ ...@@ -105,8 +105,6 @@
@grafanaListHighlight: #333; @grafanaListHighlight: #333;
@grafanaListMainLinkColor: @textColor; @grafanaListMainLinkColor: @textColor;
@pageContainerBorderColor: @grayDark;
// Scrollbars // Scrollbars
@scrollbarBackground: #3a3a3a; @scrollbarBackground: #3a3a3a;
@scrollbarBackground2: #3a3a3a; @scrollbarBackground2: #3a3a3a;
......
public/less/variables.light.less
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
// Grays // Grays
// ------------------------- // -------------------------
@black: #000; @black: #000;
@grayDarker: lighten(#000, 13.5%); // #222 @grayDarker: lighten(#000, 11.5%); // #222
@grayDark: lighten(#000, 20%); // #333 @grayDark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555 @gray: lighten(#000, 33.5%); // #555
@grayLight: lighten(#000, 60%); // #999 @grayLight: lighten(#000, 60%); // #999
...@@ -65,9 +65,9 @@ ...@@ -65,9 +65,9 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: #EFEFEF; @bodyBackground: #EFEFEF;
@nonDashBodyBackground: @grayLighter; @pageBackground: @grayDarker;
@textColor: @gray; @textColor: @gray;
// Links // Links
// ------------------------- // -------------------------
...@@ -117,8 +117,6 @@ ...@@ -117,8 +117,6 @@
@grafanaListHighlightContrast: #ddd; @grafanaListHighlightContrast: #ddd;
@grafanaListMainLinkColor: @textColor; @grafanaListMainLinkColor: @textColor;
@pageContainerBorderColor: darken(@grafanaTargetBackground, 5%);
// Tables // Tables
// ------------------------- // -------------------------
......
Markdown is supported
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