refactor(Radio Group): use CSS logical properties instead of physical…

… values (#1126)
Endava · Jun 24, 2024 · ae3d4d2 · ae3d4d2
1 parent 2162668
commit ae3d4d2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss b/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss
@@ -7,10 +7,10 @@
 }
 
 .bq-radio-group {
-  @apply m-0;
+  @apply m-b-0 m-i-0;
 
   &:not(.has-fieldset) {
-    @apply m-0 border-0 p-0;
+    @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;
   }
 
   &--horizontal {

diff --git a/packages/beeq/src/components/radio/scss/bq-radio.scss b/packages/beeq/src/components/radio/scss/bq-radio.scss
@@ -10,7 +10,7 @@
 
 .bq-radio {
   @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
-  @apply rounded-s p-xs;
+  @apply rounded-s p-b-xs p-i-xs;
 
   &.is-disabled {
     .bq-radio__circle {
@@ -53,7 +53,7 @@
 }
 
 .bq-radio__input {
-  @apply pointer-events-none absolute m-0 p-0 opacity-0;
+  @apply pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0;
 
   &:focus-visible {
     ~ .bq-radio__circle {
@@ -63,15 +63,15 @@
 }
 
 .bq-radio__control {
-  @apply box-border flex h-[var(--bq-radio--size)] w-[var(--bq-radio--size)] items-center justify-center rounded-full p-[2px];
+  @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];
 }
 
 .bq-radio__circle {
-  @apply relative box-border flex h-full w-full items-center justify-center rounded-full border-[length:var(--bq-radio--border-width)] border-solid p-[3px] border-hover-icon-primary;
+  @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];
 }
 
 .bq-radio__checked {
-  @apply h-full w-full rounded-full;
+  @apply rounded-full bs-full is-full;
 }
 
 .bq-radio__label {