Theme: Updates gf-form & form-field to better match new form styles (#23345)

* Theme: Updates old gf-form-styles

* Removed margin buttom

* updated

* updated

* This will take some time

* More style tweaks to both light and dark theme

* Minor change

* Tweaked table styles
This commit is contained in:
Torkel Ödegaard
2020-04-05 20:02:52 +02:00
committed by GitHub
parent 09bcdc1020
commit 2106f0afc6
21 changed files with 74 additions and 64 deletions

View File

@@ -102,13 +102,14 @@ $input-border: 1px solid $input-border-color;
}
.gf-form-label {
display: flex;
align-items: center;
padding: $input-padding;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
display: block;
height: $input-height;
border: $border-width solid $input-label-border-color;
@@ -130,6 +131,13 @@ $input-border: 1px solid $input-border-color;
padding-left: 0px;
}
&--variable {
color: $variable;
background: $panel-bg;
border: $panel-border;
border-right: none;
}
&--btn {
border-right: $border-width solid $input-label-border-color;
border-radius: $border-radius;

View File

@@ -30,6 +30,15 @@
margin-right: 2px;
}
.gf-form-label {
border-right: 1px solid $input-border-color;
border-radius: $border-radius;
}
.gf-form-input {
border-radius: $border-radius;
}
.gf-form + .gf-form {
margin-left: 0;
}
@@ -137,7 +146,7 @@ input[type='text'].tight-form-func-param {
padding: 4px 0px 4px 8px;
position: relative;
height: 35px;
background: $page-bg;
background: $input-label-bg;
flex-wrap: nowrap;
align-items: center;
}

View File

@@ -8,7 +8,7 @@
.slate-query-field__wrapper {
position: relative;
display: inline-block;
padding: $input-padding;
padding: 6px 8px;
min-height: $input-height;
width: 100%;
cursor: text;

View File

@@ -28,19 +28,18 @@
.fa-caret-down {
font-size: 75%;
position: relative;
top: -1px;
left: 1px;
padding-left: 8px;
}
}
.variable-value-link {
padding-right: 10px;
padding: $space-sm;
padding: 0 $space-sm;
background-color: $input-bg;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
display: inline-block;
display: flex;
align-items: center;
color: $text-color;
height: $input-height;