fix(FormField): align control sizing

GetTerminus · Oct 31, 2019 · 5eb61ba · 5eb61ba
1 parent f818298
commit 5eb61ba
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 199 deletions.
diff --git a/demo/app/components/input/input.component.html b/demo/app/components/input/input.component.html
@@ -58,23 +58,27 @@ <h3 tsCardTitle tsVerticalSpacing>
   </div>
 
 
-  <ts-input
-    [(ngModel)]="myValue"
-    label="Input with ngModel"
-    [maskSanitizeValue]="sanitizeValue"
-    [isRequired]="isRequired"
-    [hideRequiredMarker]="hideRequiredMarker"
-    [isClearable]="isClearable"
-    [isDisabled]="isDisabled"
-    [isFocused]="isFocused"
-    [maskAllowDecimal]="allowDecimal"
-    [readOnly]="isReadonly"
-    [mask]="activeMask"
-    [autocomplete]="'on'"
-    name="static input"
-    theme="accent"
-    tsVerticalSpacing="small--0"
-  ></ts-input>
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="1em">
+    <ts-input
+      [(ngModel)]="myValue"
+      label="Input with ngModel"
+      [maskSanitizeValue]="sanitizeValue"
+      [isRequired]="isRequired"
+      [hideRequiredMarker]="hideRequiredMarker"
+      [isClearable]="isClearable"
+      [isDisabled]="isDisabled"
+      [isFocused]="isFocused"
+      [maskAllowDecimal]="allowDecimal"
+      [readOnly]="isReadonly"
+      [mask]="activeMask"
+      [autocomplete]="'on'"
+      name="static input"
+      theme="accent"
+      tsVerticalSpacing="small--0"
+    ></ts-input>
+
+    <ts-button>Button for Layout Test</ts-button>
+  </div>
 
   <strong>ngModel value: {{ myValue }}</strong>
 </ts-card>

diff --git a/demo/app/components/input/input.module.ts b/demo/app/components/input/input.module.ts
@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
+import { TsButtonModule } from '@terminus/ui/button';
 import { TsCardModule } from '@terminus/ui/card';
 import { TsInputModule } from '@terminus/ui/input';
 import { TsOptionModule } from '@terminus/ui/option';
@@ -20,11 +22,13 @@ import { InputComponent } from './input.component';
     FormsModule,
     InputRoutingModule,
     ReactiveFormsModule,
+    TsButtonModule,
     TsCardModule,
     TsInputModule,
     TsOptionModule,
     TsSelectModule,
     TsSpacingModule,
+    FlexLayoutModule,
   ],
   declarations: [
     InputComponent,

diff --git a/terminus-ui/button/src/button.component.scss b/terminus-ui/button/src/button.component.scss
@@ -58,6 +58,8 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 .ts-button {
   @include reset;
   display: inline-block;
+  $vertical-alignment-adjustment-for-inputs: 4px 0;
+  margin: $vertical-alignment-adjustment-for-inputs;
 
   // Top level styles should be nested here
   .c-button {

diff --git a/terminus-ui/chip/src/chip.component.scss b/terminus-ui/chip/src/chip.component.scss
@@ -5,13 +5,20 @@
 @import './../../scss/helpers/typography';
 
 
-$ts-chip-focus-background-color: color(utility);
-
 .ts-chip {
+  --chip-fontSize: 14px;
+  --chip-height: #{spacing(large)};
+  --chip-padding: #{spacing(small, 2)} #{spacing(small, 1)};
+  --chip-backgroundColor: #{color(utility, light)};
+  --chip-backgroundColor-hover: #{color(utility)};
+  --chip-borderRadius: 16px;
+  --chip-color: #{color(pure, dark)};
+  --chip-remove-size: #{spacing(large)};
+
   &:focus,
   &:hover {
     .c-chip {
-      background-color: $ts-chip-focus-background-color;
+      --chip-backgroundColor: var(--chip-backgroundColor-hover);
       transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
     }
   }
@@ -32,52 +39,51 @@ $ts-chip-focus-background-color: color(utility);
       color: color(pure);
     }
   }
-}
 
 
+  .c-chip {
+    @include typography;
+    align-items: center;
+    background-color: var(--chip-backgroundColor);
+    border-radius: var(--chip-borderRadius);
+    box-sizing: border-box;
+    color: var(--chip-color);
+    display: inline-flex;
+    font-size: var(--chip-fontSize);
+    height: var(--chip-height);
+    margin: 0 spacing(small, 2);
+    overflow: hidden;
+    padding: var(--chip-padding);
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+    transform: translateZ(0);
+    transition: background-color 200ms ease-out;
 
-.c-chip {
-  $chip-height: spacing(large, 1);
-  $chip-padding: spacing(small, 2) spacing(small, 1);
-  @include typography;
-  align-items: center;
-  background-color: color(utility, light);
-  border-radius: 16px;
-  box-sizing: border-box;
-  color: color(pure, dark);
-  display: inline-flex;
-  height: $chip-height;
-  margin: spacing(small, 2);
-  overflow: hidden;
-  padding: $chip-padding;
-  position: relative;
-  -webkit-tap-highlight-color: transparent;
-  transform: translateZ(0);
-  transition: background-color 200ms ease-out;
+    &.c-chip--removable {
+      padding-right: spacing(large);
 
-  &.c-chip--removable {
-    padding-right: spacing(large, 1);
-
-    .c-chip__remove {
-      display: block;
+      .c-chip__remove {
+        display: block;
+      }
     }
-  }
 
-  .c-chip__remove {
-    $size: 24px;
-    cursor: cursor(pointer);
-    display: none;
-    height: $size;
-    opacity: .4;
-    position: absolute;
-    right: spacing(small, 2);
-    top: 50%;
-    transform: translateY(-50%);
-    transition: opacity 200ms ease-out;
-    width: $size;
+    .c-chip__remove {
+      cursor: cursor(pointer);
+      display: none;
+      height: var(--chip-remove-size);
+      opacity: .4;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%) scale(.8);
+      transition: opacity 200ms ease-out;
+      width: var(--chip-remove-size);
 
-    &:hover {
-      opacity: .7;
+      &:hover {
+        opacity: .7;
+      }
     }
   }
 }
+
+