fix(radio): Center align radio box (#538)

material-components · Apr 21, 2017 · 83d1815 · 83d1815
1 parent 891dc60
commit 83d1815
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -50,9 +50,9 @@
   display: inline-block;
   position: relative;
   box-sizing: content-box;
+  flex: 0 0 $mdc-checkbox-size;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
-  flex: 0 0 $mdc-checkbox-size;
   padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
   line-height: 0;
   white-space: nowrap;

diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
@@ -40,9 +40,9 @@ $mdc-radio-transition-duration: 120ms;
   display: inline-block;
   position: relative;
   box-sizing: border-box;
+  flex: 0 0 $mdc-radio-touch-area;
   width: $mdc-radio-touch-area;
   height: $mdc-radio-touch-area;
-  flex: 0 0 $mdc-radio-touch-area;
   padding: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
   cursor: pointer;
   will-change: opacity, transform, border-color, background-color, color;
@@ -67,6 +67,7 @@ $mdc-radio-transition-duration: 120ms;
   &__background {
     display: inline-block;
     position: absolute;
+    left: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
     width: $mdc-radio-ui-pct;
     height: $mdc-radio-ui-pct;
     box-sizing: border-box;

diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -58,8 +58,8 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     flex: 1;
     align-items: flex-start;
     justify-content: center;
-    z-index: 1;
     overflow: hidden;
+    z-index: 1;
 
     &--align-start {
       justify-content: flex-start;
@@ -75,11 +75,11 @@ $mdc-toolbar-mobile-breakpoint: 599px;
   &__title {
     @include mdc-typography(title);
 
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     margin: 0;
     line-height: 1.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 }