Просмотр исходного кода

ux: form styles polish, improvement but can be better

Torkel Ödegaard 8 лет назад
Родитель
Сommit
7f73fae6ae

+ 6 - 3
public/sass/_variables.dark.scss

@@ -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

+ 8 - 10
public/sass/_variables.scss

@@ -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
 //

+ 6 - 6
public/sass/components/_gf-form.scss

@@ -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;

+ 5 - 6
public/sass/components/_switch.scss

@@ -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 {