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
Show Stats 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-6: #f4f5f8;
$gray-7: #fbfbfb;
$gray-blue: #292a2d;
// $gray-blue: #292a2d;
$gray-blue: #212327;
$input-black: #09090B;
$white: #fff;
@ -175,7 +178,7 @@ $btn-drag-image: '../img/grab_dark.svg';
// Forms
// -------------------------
$input-bg: $black;
$input-bg: $input-black;
$input-bg-disabled: $dark-3;
$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-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue;
$input-label-border-color: $gray-blue;
$input-label-border-color: $dark-3;
$input-invalid-border-color: lighten($red, 5%);
// Search

18
public/sass/_variables.scss
View File

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

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 {