Commit 50920b14 by Torkel Ödegaard

ux(forms): minor upgrade to new form design

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