fix(radio): add css variables to make it customizable

fixes #15729
ionic-team · Sep 25, 2018 · 9ec8e74 · 9ec8e74
1 parent 602f668
commit 9ec8e74
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
@@ -8,6 +8,8 @@
   --color-checked: #{ion-color(primary, base)};
   --width: #{$radio-ios-icon-width};
   --height: #{$radio-ios-icon-height};
+  --inner-width: 5px;
+  --inner-height: 12px;
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -23,10 +25,6 @@
 // -----------------------------------------
 
 :host(.radio-checked) .radio-inner {
-  @include position(4px, null, null, 7px);
-
-  position: absolute;
-
   width: 5px;
   height: 12px;
 
@@ -39,7 +37,6 @@
   border-color: var(--color-checked);
 }
 
-
 // iOS Radio: Disabled
 // -----------------------------------------
 :host(.radio-disabled) {

diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
@@ -9,6 +9,10 @@
   --color-checked: #{ion-color(primary, base)};
   --width: #{$radio-md-icon-width};
   --height: #{$radio-md-icon-height};
+  --border-width: #{$radio-md-icon-border-width};
+  --border-style: #{$radio-md-icon-border-style};
+  --inner-width: calc(var(--width) - var(--border-width) * 4);
+  --inner-height: calc(var(--height) - var(--border-width) * 4);
 }
 
 :host(.ion-color) .radio-inner {
@@ -23,12 +27,11 @@
 // -----------------------------------------
 
 .radio-icon {
-  @include position(0, null, null, 0);
   @include margin(0);
   @include border-radius($radio-md-icon-border-radius);
 
-  border-width: $radio-md-icon-border-width;
-  border-style: $radio-md-icon-border-style;
+  border-width: var(--border-width);
+  border-style: var(--border-style);
   border-color: var(--color);
 }
 
@@ -37,14 +40,8 @@
 // -----------------------------------------
 
 .radio-inner {
-  @include position($radio-md-icon-border-width, null, null, $radio-md-icon-border-width);
   @include border-radius(50%);
 
-  position: absolute;
-
-  width: $radio-md-icon-width - $radio-md-icon-border-width * 4;
-  height: $radio-md-icon-height - $radio-md-icon-border-width * 4;
-
   transform: scale3d(0, 0, 0);
 
   transition: transform $radio-md-transition-duration $radio-md-transition-easing;

diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
@@ -22,15 +22,22 @@
 
 
 .radio-icon {
-  display: block;
-  position: relative;
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
 
   width: var(--width);
   height: var(--height);
 
   contain: layout size style;
 }
 
+.radio-inner {
+  width: var(--inner-width);
+  height: var(--inner-height);
+}
+
 input {
   @include input-cover();
 }