Merge pull request #8543 from shashkovdanil/neoradio-tailwindcss

NeoRadio to tailwindcss
kodadot · Dec 13, 2023 · fcfb071 · fcfb071
2 parents 49437fb + e703a13
commit fcfb071
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 26 deletions.
diff --git a/libs/ui/src/components/NeoRadio/NeoRadioButton.vue b/libs/ui/src/components/NeoRadio/NeoRadioButton.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="control neo-radio-button" :class="{ 'is-expanded': expanded }">
+  <div class="neo-radio-button">
     <label
       ref="label"
-      class="button"
       :class="labelClass"
       :disabled="disabledNull"
       @click="focus">
@@ -11,6 +10,7 @@
         ref="input"
         v-model="computedValue"
         type="radio"
+        class="hidden"
         :disabled="disabled"
         :required="required"
         :name="name"
@@ -33,7 +33,6 @@ export default {
       type: String,
       default: 'is-primary',
     },
-    expanded: Boolean,
     rounded: Boolean,
   },
   data() {
@@ -68,36 +67,17 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@import '../../scss/_theme.scss';
-@import '../../scss/variable.scss';
-
+<style lang="scss" scoped>
 .neo-radio-button {
-  input[type='radio'] {
-    display: none;
-  }
-
   label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.button {
-      text-transform: capitalize;
-      @include ktheme() {
-        border-color: theme('background-color-inverse');
-      }
-    }
+    @apply flex items-center justify-center text-base/normal h-10 rounded py-button-y px-button-x bg-background-color cursor-pointer capitalize border-default border-background-color-inverse;
 
     &.is-selected {
-      @include ktheme() {
-        color: theme('text-color-inverse');
-        background-color: theme('background-color-inverse');
-      }
+      @apply text-text-color-inverse bg-background-color-inverse;
     }
 
     &.is-rounded {
-      border-radius: $radius-rounded;
+      @apply rounded-full;
     }
   }
 }

diff --git a/libs/ui/tailwind.config.js b/libs/ui/tailwind.config.js
@@ -88,6 +88,10 @@ module.exports = {
         'icon-spin':
           'icon-spin infinite linear var(--oruga-icon-spin-duration, 1.5s)',
       },
+      padding: {
+        'button-x': 'calc(0.75em - 1px)',
+        'button-y': 'calc(0.5em - 1px)',
+      },
     },
   },
   plugins: [],