@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.11

package/src/digitv2/components/radiobtnV2.scss

@@ -1,114 +1,116 @@
-@import url("../index.scss");
-
-.digit-radio-options-wrap {
-  @apply leading-10 flex justify-between flex-wrap;
-  margin-bottom: theme(digitv2.spacers.spacer2);
-
-  @media (max-aspect-ratio: 9/16) {
-    @apply flex-col;
-  }
-
-  div {
-    @apply block mb-md;
-  }
-
-  .digit-radio-btn-wrap {
-    @apply block float-left relative;
-
-    &:hover {
-      .digit-radio-btn-checkmark {
-        border-color: theme(digitv2.lightTheme.primary-1);
-      }
-    }
-
-    &:active {
-      .digit-radio-btn-checkmark {
-        outline: 0.188rem solid #FFFAF7;
-        border-color: theme(digitv2.lightTheme.primary-1);
-      }
-    }
-
-  }
-
-  .radio-option-container {
-    @apply inline-flex;
-    gap: theme(digitv2.spacers.spacer2);
-    align-items: self-start;
-
-    &.disabled {
-      .digit-radio-btn-checkmark {
-        border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
-        background-color: theme(digitv2.lightTheme.paper-secondary);
-      }
-    }
-
-
-    &.preselected {
-      .digit-radio-btn-checkmark {
-        border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
-      }
-
-      pointer-events: none !important;
-    }
-
-    &.disabled,
-    &.preselected {
-      label {
-        color: theme(digitv2.lightTheme.text-disabled);
-      }
-    }
-
-  }
-
-  .radio-option-container label:only-child {
-    align-items: flex-start;
-  }
-
-  .digit-radio-btn {
-    @apply opacity-0 absolute cursor-pointer h-6 w-6;
-    margin: theme(digitv2.spacers.spacer0);
-  }
-
-  .digit-radio-btn-checkmark {
-    @extend .light-input-border;
-    @apply h-6 w-6 border border-input-border border-solid rounded-full block;
-  }
-
-  label {
-    @extend .typography.body-s;
-    color: theme(digitv2.lightTheme.text-primary);
-    overflow-wrap: anywhere;
-  }
-
-  .digit-radio-btn-checkmark:after {
-    content: "";
-  }
-
-  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
-    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
-  }
-
-  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
-    top: 25%;
-    left: 25%;
-    background-color: theme(digitv2.lightTheme.primary-1);
-  }
-
-  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
-    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
-  }
-
-  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
-    top: 25%;
-    left: 25%;
-    background-color: theme(digitv2.lightTheme.text-disabled);
-  }
-}
-
-.digit-reverse-radio-selection-wrapper {
-  div {
-    @apply flex flex-row-reverse place-content-between items-center;
-  }
+@import url("../index.scss");
+
+.digit-radio-options-wrap {
+  @apply leading-10 flex justify-between flex-wrap;
+  margin-bottom: theme(digitv2.spacers.spacer2);
+
+  @media (max-aspect-ratio: 9/16) {
+    @apply flex-col;
+  }
+
+  div {
+    @apply block mb-md;
+  }
+
+  .digit-radio-btn-wrap {
+    @apply block float-left relative;
+
+    &:hover {
+      .digit-radio-btn-checkmark {
+        border-color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+
+    &:active {
+      .digit-radio-btn-checkmark {
+        outline: 0.188rem solid #FFFAF7;
+        border-color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+
+  }
+
+  .radio-option-container {
+    @apply inline-flex;
+    gap: theme(digitv2.spacers.spacer2);
+    align-items: self-start;
+
+    &.disabled {
+      .digit-radio-btn-checkmark {
+        border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+      }
+    }
+
+
+    &.preselected {
+      .digit-radio-btn-checkmark {
+        border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+      }
+
+      pointer-events: none !important;
+    }
+
+    &.disabled,
+    &.preselected {
+      label {
+        color: theme(digitv2.lightTheme.text-disabled);
+      }
+    }
+
+  }
+
+  .radio-option-container label:only-child {
+    align-items: flex-start;
+  }
+
+  .digit-radio-btn {
+    @apply opacity-0 absolute cursor-pointer h-6 w-6;
+    margin: theme(digitv2.spacers.spacer0);
+  }
+
+  .digit-radio-btn-checkmark {
+    @extend .light-input-border;
+    @apply h-6 w-6 border border-input-border border-solid rounded-full block;
+  }
+
+  label {
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    overflow-wrap: anywhere;
+  }
+
+  .digit-radio-btn-checkmark:after {
+    content: "";
+  }
+
+  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
+    top: 25%;
+    background-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
+    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
+  }
+
+  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
+    top: 25%;
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
+}
+
+.digit-reverse-radio-selection-wrapper {
+  div {
+    @apply flex flex-row-reverse place-content-between items-center;
+  }
 }