various input styles

vikash52 · Mar 23, 2016 · 17f6ea3 · 17f6ea3
1 parent 5c2f7b3
commit 17f6ea3
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 79 deletions.
diff --git a/src/client/components/dimension-list-tile/dimension-list-tile.scss b/src/client/components/dimension-list-tile/dimension-list-tile.scss
@@ -40,7 +40,7 @@ $icon-width: 37px;
       .icon {
         @include pin-left($icon-width);
         top: 4px;
-        left: -1px;
+        left: 0;
         width: 19px;
 
         svg {
@@ -59,7 +59,7 @@ $icon-width: 37px;
         top: 7px;
         bottom: 0;
         right: 10px;
-        left: $icon-width;
+        left: $icon-width + 1;
       }
     }
   }

diff --git a/src/client/components/dropdown/dropdown.scss b/src/client/components/dropdown/dropdown.scss
@@ -3,6 +3,7 @@
 .dropdown {
   cursor: pointer;
   white-space: nowrap;
+  pointer-events: none;
 
   &:hover {
     .caret-icon {
@@ -13,13 +14,20 @@
   }
 
   .selected-item {
-    display: inline-block;
+    @extend %input-cont;
+    display: block;
+    pointer-events: auto;
+    height: $input-height;
+    padding-left: 6px;
+    padding-top: 8px;
   }
 
   .caret-icon {
     position: absolute;
     width: 11px;
     height: 9px;
+    right: 9px;
+    bottom: 10px;
 
     path {
       fill: $text-lighterish;
@@ -29,6 +37,7 @@
   .dropdown-menu {
     @extend %menu-cont;
     position: absolute;
+    pointer-events: auto;
     z-index: 800;
     padding: 6px;
     width: 100%;

diff --git a/src/client/components/dropdown/dropdown.tsx b/src/client/components/dropdown/dropdown.tsx
@@ -112,8 +112,9 @@ export class Dropdown<T> extends React.Component<DropdownProps<T>, DropdownState
 
     return <div className={'dropdown ' + direction} onClick={this.onClick.bind(this)}>
       {labelElement}
-      <div className="selected-item">{renderItem(selectedItem)}</div>
-      <SvgIcon className="caret-icon" svg={require('../../icons/dropdown-caret.svg')}/>
+      <div className="selected-item">{renderItem(selectedItem)}
+        <SvgIcon className="caret-icon" svg={require('../../icons/dropdown-caret.svg')}/>
+      </div>
       { open ? this.renderMenu() : null }
     </div>;
   }

diff --git a/src/client/components/pinboard-measure-tile/pinboard-measure-tile.scss b/src/client/components/pinboard-measure-tile/pinboard-measure-tile.scss
@@ -16,42 +16,40 @@
   .dropdown {
     display: inline-block;
     position: absolute;
-    padding: 2px 22px 2px 7px;
-    margin-bottom: 1px;
     top: 5px;
     right: 5px;
     font-size: 12px;
-    border: 1px solid transparent;
     border-radius: $corner;
 
-    &:hover {
-      @extend %input-cont;
+    .selected-item {
+      @include ellipsis;
+      line-height: 19px;
+      padding: 2px 22px 2px 7px;
+      border: 1px solid transparent;
+      color: $text-light;
+      max-width: 104px;
+      height: auto;
+      box-shadow: none;
 
       .caret-icon {
+        position: absolute;
+        right: 7px;
+        bottom: 6px;
+
         path {
-          fill: $text-light;
+          fill: $text-lighter;
         }
       }
 
-      .selected-item {
+      &:hover {
+        @extend %input-cont;
         color: $text-standard;
-      }
-    }
 
-    .selected-item {
-      @include ellipsis;
-      line-height: 19px;
-      color: $text-light;
-      max-width: 104px;
-    }
-
-    .caret-icon {
-      position: absolute;
-      top: 8px;
-      right: 7px;
-
-      path {
-        fill: $text-lighter;
+        .caret-icon {
+          path {
+            fill: $text-light;
+          }
+        }
       }
     }
 

diff --git a/src/client/components/side-drawer/side-drawer.scss b/src/client/components/side-drawer/side-drawer.scss
@@ -19,6 +19,10 @@
       }
     }
   }
+
+  .nav-logo {
+    cursor: pointer;
+  }
 }
 
 .side-drawer-enter {

diff --git a/src/client/components/split-menu/split-menu.scss b/src/client/components/split-menu/split-menu.scss
@@ -47,25 +47,6 @@ $title-margin: 6px;
 
     .dropdown-label {
       @extend %input-top-label;
-      margin-bottom: $title-margin;
-    }
-
-    .selected-item {
-      @extend %input-cont;
-      display: block;
-      padding: 7px 6px;
-      pointer-events: auto;
-    }
-
-    .caret-icon {
-      position: absolute;
-      right: 9px;
-      bottom: 10px;
-    }
-
-    .dropdown-menu {
-      width: 100%;
-      pointer-events: auto;
     }
   }
 
@@ -80,7 +61,7 @@ $title-margin: 6px;
       right: 0;
       bottom: 0;
       width: 32px;
-      height: 29px;
+      height: $input-height;
 
       svg {
         position: absolute;

diff --git a/src/client/components/string-filter-menu/string-filter-menu.scss b/src/client/components/string-filter-menu/string-filter-menu.scss
@@ -16,7 +16,7 @@ $checkbox-width: 20px;
       .clearable-input {
         @extend %input-cont-inset;
         width: 100%;
-        height: 31px;
+        height: $input-height;
         padding-left: 6px;
       }
     }
@@ -66,7 +66,7 @@ $checkbox-width: 20px;
   }
 
   .button-bar {
-    padding: 0 0 10px 10px;
+    padding: 10px;
 
     .ok {
       @extend %button-primary;

diff --git a/src/client/components/time-filter-menu/time-filter-menu.scss b/src/client/components/time-filter-menu/time-filter-menu.scss
@@ -29,46 +29,43 @@
 
   .cont {
     padding: 0 10px 10px 10px;
-    margin-top: 14px;
+    margin-top: 18px;
 
     .type {
       @extend %input-top-label;
-      margin-bottom: 6px;
     }
 
     .buttons {
-      margin-bottom: 16px;
+      margin-bottom: $form-spacing-compact;
 
       button {
-        @extend %input-cont;
-        width: 18%;
-        height: 27px;
-        margin-right: 2%;
-        color: $text-light;
-        //border-color: $border-extra-light;
-        box-shadow: 0 1px 1px 0 hsla(0, 0, 0, 0.2);
+        @extend %button-secondary;
+        min-width: 0;
+        padding: 0;
+        width: 17.5%;
+        margin-right: 3%;
 
         &.selected {
-          background: $brand;
-          border: 0;
-          color: $white;
+          @extend %button-primary;
+          min-width: 0;
+          padding: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
         }
       }
     }
 
     .preview {
-      margin-top: 22px;
-      padding-left: 4px;
-      padding-top: 10px;
-      border-top: 1px solid $border-extra-light;
-      color: $text-light;
+      @extend %indicator-field;
     }
 
     .time-input {
       width: 100%;
-      height: 27px;
+      height: $input-height;
       border: 0;
-      margin-bottom: 12px;
+      margin-bottom: $form-spacing-compact;
 
       input {
         @extend %input-cont-inset;

diff --git a/src/client/utils/_style-mixins.scss b/src/client/utils/_style-mixins.scss
@@ -186,6 +186,7 @@
   cursor: pointer;
   border-radius: 2px;
   outline: none;
+  height: $input-height;
 
   //transition-property: all;
   //transition-duration: $duration;
@@ -221,18 +222,16 @@
 
 %button-secondary {
   @extend %button-base;
-  background: $background-medium;
-  color: $text-medium;
+  background: rgba($brand, 0.22);
+  color: $brand;
 
   &:hover {
-    background: darken($background-medium, 4%);
-    color: darken($text-medium, 12%);
+    background: rgba($brand, 0.3);
   }
 
   &.active,
   &:active {
-    background: darken($background-medium, 10%);
-    color: darken($text-medium, 12%);
+    background: rgba($brand, 0.38);
   }
 }
 
@@ -316,10 +315,20 @@
   box-shadow: inset 0 1px 1px 0 hsla(0, 0, 0, 0.1);
 }
 
+%indicator-field {
+  height: $input-height;
+  line-height: $input-height - 2px;
+  border: 1px solid #dfdfdf;
+  border-radius: $corner;
+  color: $text-light;
+  text-align: center;
+}
+
 %input-top-label {
   text-transform: uppercase;
-  font-size: 11px;
-  color: $text-light;
+  font-size: 12px;
+  color: $text-lighterish;
+  margin-bottom: 5px;
 }
 
 %dimension-item {

diff --git a/src/client/utils/_variables.scss b/src/client/utils/_variables.scss
@@ -30,7 +30,7 @@ $background-dark:         hsl(0, 0%, 55%);
 $text-standard:           hsl(0, 0%, 0%);
 $text-medium:             hsl(0, 0%, 40%);
 $text-light:              #999;
-$text-lighterish:         hsl(0, 0%, 65%);
+$text-lighterish:         #a6a6a6;
 $text-lighter:            hsl(0, 0%, 73%);
 $text-lightest:           hsl(0, 0%, 85%);
 $text-link:               $brand;
@@ -41,6 +41,9 @@ $hover:                   hsl(202, 79%, 94%);
 $highlight:               darken($hover, 7%);
 $highlight-border:        darken($brand, 8%);
 
+$input-height:            30px;
+$form-spacing-compact:    14px;
+
 // dimension items
 
 $item-categorical:        hsl(201, 92%, 85%);