IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: form styles polish, improvement but can be better

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-09 21:42:48 +01:00
parent 55609382f1
commit 7f73fae6ae
4 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/sass/components/_gf-form.scss
View File

@@ -8,7 +8,6 @@ $input-border: 1px solid $input-border-color;
align-items: center;
text-align: left;
position: relative;
font-size: $font-size-sm;
&--offset-1 {
margin-left: $spacer;
@@ -65,7 +64,6 @@ $input-border: 1px solid $input-border-color;
.gf-form-label {
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
@@ -74,8 +72,8 @@ $input-border: 1px solid $input-border-color;
font-size: $font-size-sm;
border: $input-btn-border-width solid $input-label-border-color;
@include border-radius($label-border-radius-sm);
border-right: none;
border-radius: $label-border-radius;
&--grow {
flex-grow: 1;
@@ -94,6 +92,7 @@ $input-border: 1px solid $input-border-color;
margin: 0;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm);
}
@@ -119,14 +118,14 @@ $input-border: 1px solid $input-border-color;
width: 100%;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
font-size: $font-size-base;
font-size: $font-size-md;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-border;
@include border-radius($input-border-radius-sm);
border-radius: $input-border-radius;
@include box-shadow($input-box-shadow);
white-space: nowrap;
overflow: hidden;
@@ -279,6 +278,7 @@ $input-border: 1px solid $input-border-color;
background-color: $input-bg;
padding-right: $input-padding-x;
border: $input-border;
border-radius: $input-border-radius;
&::after {
position: absolute;

11
public/sass/components/_switch.scss
View File

@@ -1,7 +1,3 @@
$switch-border-radius: 1rem;
$switch-width: 3.5rem;
$switch-height: 1.5rem;
/* ============================================================
SWITCH 3 - YES NO
============================================================ */
@@ -27,8 +23,10 @@ $switch-height: 1.5rem;
outline: none;
user-select: none;
width: 100%;
height: 2.65rem;
background-color: $page-bg;
height: 37px;
background: $input-bg;
border: 1px solid $input-border-color;
border-left: none;
}
input + label::before, input + label::after {
@@ -47,6 +45,7 @@ $switch-height: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: $input-border-radius;
}
&:hover {