fix: set min size for radio button and checkbox icon (#231)

Closes #141
sbb-design-systems · Nov 26, 2019 · 20037b4 · 20037b4
1 parent d5f367b
commit 20037b4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/projects/sbb-esta/angular-core/styles/common/_checkbox.scss b/projects/sbb-esta/angular-core/styles/common/_checkbox.scss
@@ -8,7 +8,9 @@ $checkBoxContainerBorder: if($sbbBusiness, 1, 2);
 
 @mixin checkboxContainer() {
   width: toPx(20);
+  min-width: toPx(20);
   height: toPx(20);
+  min-height: toPx(20);
   background-color: $sbbColorWhite;
   border: toPx($checkBoxContainerBorder) solid $sbbColorGraphite;
   border-radius: toPx(2);
@@ -18,15 +20,19 @@ $checkBoxContainerBorder: if($sbbBusiness, 1, 2);
   @include publicOnly() {
     @include mq($from: desktop4k) {
       width: toPx(20 * $scalingFactor4k);
+      min-width: toPx(20 * $scalingFactor4k);
       height: toPx(20 * $scalingFactor4k);
+      min-height: toPx(20 * $scalingFactor4k);
       border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
       margin-right: toPx(8 * $scalingFactor4k);
       margin-top: toPx(1 * $scalingFactor4k);
     }
 
     @include mq($from: desktop5k) {
       width: toPx(20 * $scalingFactor5k);
+      min-width: toPx(20 * $scalingFactor5k);
       height: toPx(20 * $scalingFactor5k);
+      min-height: toPx(20 * $scalingFactor5k);
       border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
       margin-right: toPx(8 * $scalingFactor5k);
       margin-top: toPx(1 * $scalingFactor5k);

diff --git a/projects/sbb-esta/angular-public/radio-button/src/_radio-button.scss b/projects/sbb-esta/angular-public/radio-button/src/_radio-button.scss
@@ -75,7 +75,9 @@ $radioButtonGreyColor: $sbbColorGrey;
 
 @mixin radioButtonCircle() {
   width: toPx(20);
+  min-width: toPx(20);
   height: toPx(20);
+  min-height: toPx(20);
   background-color: $sbbColorWhite;
 
   @include businessOnly() {
@@ -89,15 +91,19 @@ $radioButtonGreyColor: $sbbColorGrey;
 
     @include mq($from: desktop4k) {
       width: toPx(20 * $scalingFactor4k);
+      min-width: toPx(20 * $scalingFactor4k);
       height: toPx(20 * $scalingFactor4k);
+      min-height: toPx(20 * $scalingFactor4k);
       border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
       margin-right: toPx(8 * $scalingFactor4k);
       margin-top: toPx(1 * $scalingFactor4k);
     }
 
     @include mq($from: desktop5k) {
       width: toPx(20 * $scalingFactor5k);
+      min-width: toPx(20 * $scalingFactor5k);
       height: toPx(20 * $scalingFactor5k);
+      min-height: toPx(20 * $scalingFactor5k);
       border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
       margin-right: toPx(8 * $scalingFactor5k);
       margin-top: toPx(1 * $scalingFactor5k);