fix inline alignment

palantir · Jun 5, 2018 · 77e2383 · 77e2383 · blueprint-bot · Jun 5, 2018
1 parent afa0836
commit 77e2383
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/core/src/components/forms/_common.scss b/packages/core/src/components/forms/_common.scss
@@ -23,6 +23,9 @@ $dark-input-background-color: rgba($black, 0.3) !default;
 $dark-input-background-color-disabled: rgba($dark-gray5, 0.5) !default;
 $dark-input-shadow-color-focus: $pt-intent-primary !default;
 
+$control-indicator-size: $pt-icon-size-standard !default;
+$control-indicator-size-large: $pt-icon-size-large !default;
+
 // avoids edge blurriness for light theme focused default input
 // second box-shadow of $pt-input-box-shadow
 $input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;

diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss
@@ -5,9 +5,6 @@
 @import "../../common/variables";
 @import "../button/common";
 
-$control-indicator-size: $pt-icon-size-standard !default;
-$control-indicator-size-large: $pt-icon-size-large !default;
-
 $control-background-color: $button-background-color !default;
 $control-background-color-hover: $button-background-color-hover !default;
 $control-background-color-active: $button-background-color-active !default;

diff --git a/packages/core/src/components/forms/_form-group.scss b/packages/core/src/components/forms/_form-group.scss
@@ -3,6 +3,7 @@
 
 @import "../../common/variables";
 @import "../../common/mixins";
+@import "common";
 
 /*
 Form groups
@@ -11,17 +12,17 @@ Markup:
 <div class="#{$ns}-form-group {{.modifier}}">
   <label class="#{$ns}-label" for="form-group-input">
     Label
-      <span class="#{$ns}-text-muted">(required)</span>
-    </label>
-    <div class="#{$ns}-form-content">
+    <span class="#{$ns}-text-muted">(required)</span>
+  </label>
+  <div class="#{$ns}-form-content">
     <div class="#{$ns}-input-group {{.modifier}}">
-        <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
       <input id="form-group-input" type="text" {{:modifier}} class="#{$ns}-input"
              style="width: 200px;" placeholder="Placeholder text" dir="auto" />
-      </div>
-      <div class="#{$ns}-form-helper-text">Please enter a value</div>
     </div>
+    <div class="#{$ns}-form-helper-text">Please enter a value</div>
   </div>
+</div>
 
 :disabled - Disable the input.
 .#{$ns}-disabled - Disabled styles. Input must be disabled separately via attribute.
@@ -41,7 +42,7 @@ Styleguide form-group
   }
 
   .#{$ns}-control {
-    margin-top: $pt-grid-size / 2;
+    margin-top: ($pt-input-height - $control-indicator-size) / 2;
   }
 
   .#{$ns}-form-helper-text {
@@ -61,7 +62,7 @@ Styleguide form-group
 
   &.#{$ns}-inline {
     flex-direction: row;
-    align-items: baseline;
+    align-items: flex-start;
 
     &.#{$ns}-large label.#{$ns}-label {
       margin: 0 $pt-grid-size 0 0;