opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-28 21:54:26 +08: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

9
public/sass/_variables.dark.scss
View File

@ -21,7 +21,10 @@ $gray-4: #D8D9DA;
$gray-5: #ECECEC; $gray-5: #ECECEC;
$gray-6: #f4f5f8; $gray-6: #f4f5f8;
$gray-7: #fbfbfb; $gray-7: #fbfbfb;
$gray-blue: #292a2d;
// $gray-blue: #292a2d;
$gray-blue: #212327;
$input-black: #09090B;
$white: #fff; $white: #fff;
@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg';
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $black; $input-bg: $input-black;
$input-bg-disabled: $dark-3; $input-bg-disabled: $dark-3;
$input-color: $gray-4; $input-color: $gray-4;
@ -185,7 +188,7 @@ $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default; $input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue; $input-label-bg: $gray-blue;
$input-label-border-color: $gray-blue; $input-label-border-color: $dark-3;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
// Search // Search

18
public/sass/_variables.scss
View File

@ -89,9 +89,9 @@ $font-size-root: 14px !default;
$font-size-base: 13px !default; $font-size-base: 13px !default;
$font-size-lg: 18px !default; $font-size-lg: 18px !default;
$font-size-md: 15px !default; $font-size-md: 14px !default;
$font-size-sm: 11px !default; $font-size-sm: 12px !default;
$font-size-xs: 9px !default; $font-size-xs: 10px !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 500; $font-weight-semi-bold: 500;
@ -135,9 +135,9 @@ $list-inline-padding: 5px !default;
$line-height-lg: (4 / 3) !default; $line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default; $line-height-sm: 1.5 !default;
$border-radius: 0.2rem !default; $border-radius: 3px !default;
$border-radius-lg: 0.3rem !default; $border-radius-lg: 5px !default;
$border-radius-sm: 0.1rem !default; $border-radius-sm: 2px!default;
$caret-width: .3em !default; $caret-width: .3em !default;
$caret-width-lg: $caret-width !default; $caret-width-lg: $caret-width !default;
@ -162,7 +162,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms // Forms
$input-padding-x: 10px !default; $input-padding-x: 10px !default;
$input-padding-y: 8px !default; $input-padding-y: 8px !default;
$input-line-height: 19px !default; $input-line-height: 18px !default;
$input-btn-border-width: 1px; $input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
@ -203,9 +203,7 @@ $zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040; $zindex-modal-backdrop: 1040;
$zindex-modal: 1050; $zindex-modal: 1050;
$zindex-typeahead: 1060; $zindex-typeahead: 1060;
$zindex-sidemenu : $zindex-navbar-fixed + 5; $zindex-sidemenu: $zindex-navbar-fixed;
// Buttons // Buttons
// //

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

@ -8,7 +8,6 @@ $input-border: 1px solid $input-border-color;
align-items: center; align-items: center;
text-align: left; text-align: left;
position: relative; position: relative;
font-size: $font-size-sm;
&--offset-1 { &--offset-1 {
margin-left: $spacer; margin-left: $spacer;
@ -65,7 +64,6 @@ $input-border: 1px solid $input-border-color;
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0; flex-shrink: 0;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
@ -74,8 +72,8 @@ $input-border: 1px solid $input-border-color;
font-size: $font-size-sm; font-size: $font-size-sm;
border: $input-btn-border-width solid $input-label-border-color; 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 { &--grow {
flex-grow: 1; flex-grow: 1;
@ -94,6 +92,7 @@ $input-border: 1px solid $input-border-color;
margin: 0; margin: 0;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
} }
@ -119,14 +118,14 @@ $input-border: 1px solid $input-border-color;
width: 100%; width: 100%;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
font-size: $font-size-base; font-size: $font-size-md;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: $input-border; border: $input-border;
@include border-radius($input-border-radius-sm); border-radius: $input-border-radius;
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -279,6 +278,7 @@ $input-border: 1px solid $input-border-color;
background-color: $input-bg; background-color: $input-bg;
padding-right: $input-padding-x; padding-right: $input-padding-x;
border: $input-border; border: $input-border;
border-radius: $input-border-radius;
&::after { &::after {
position: absolute; 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 SWITCH 3 - YES NO
============================================================ */ ============================================================ */
@ -27,8 +23,10 @@ $switch-height: 1.5rem;
outline: none; outline: none;
user-select: none; user-select: none;
width: 100%; width: 100%;
height: 2.65rem; height: 37px;
background-color: $page-bg; background: $input-bg;
border: 1px solid $input-border-color;
border-left: none;
} }
input + label::before, input + label::after { input + label::before, input + label::after {
@ -47,6 +45,7 @@ $switch-height: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
border-radius: $input-border-radius;
} }
&:hover { &:hover {