feat(VBtn): extract btn styles into file

gitsindonesia · Dec 13, 2021 · 48f3d4a · 48f3d4a
1 parent 5dfbd16
commit 48f3d4a
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 179 deletions.
diff --git a/src/components/VBtn/VBtn.styles.css b/src/components/VBtn/VBtn.styles.css
@@ -0,0 +1,174 @@
+.btn {
+  @apply transition duration-300 cursor-pointer inline-flex items-center justify-center
+    focus:outline-none font-semibold px-4 py-2 text-sm;
+}
+.btn--xs {
+  @apply px-1.5 py-0.5;
+}
+
+.btn--sm {
+  @apply px-2 py-1;
+}
+
+.btn--md {
+}
+
+.btn--lg {
+  @apply px-5 py-3;
+}
+
+.btn--xl {
+  @apply px-6 py-4;
+}
+
+.btn--ring {
+  @apply focus:ring focus:ring-offset-2 focus:ring-opacity-50;
+}
+
+/** button icons **/
+.btn--icon {
+  @apply p-0;
+}
+
+.btn--icon.btn--xs {
+  @apply w-[30px] h-[30px];
+}
+
+.btn--icon.btn--sm {
+  @apply w-[36px] h-[36px];
+}
+
+.btn--icon.btn--md {
+  @apply w-[40px] h-[40px];
+}
+
+.btn--icon.btn--lg {
+  @apply w-[50px] h-[50px];
+}
+
+.btn--icon.btn--xl {
+  @apply w-[60px] h-[60px];
+}
+
+/** variants */
+
+.btn--default:not(.btn--outlined):not(.btn--text) {
+  @apply border-gray-800 text-gray-800
+    hover:text-gray-900 hover:border-gray-900 active:text-gray-600 active:border-gray-600;
+}
+
+.btn--dark:not(.btn--outlined):not(.btn--text) {
+  @apply border-gray-800 bg-gray-800 text-white
+    hover:bg-gray-900 hover:border-gray-900 active:text-gray-200 active:border-gray-200;
+}
+
+.btn--primary:not(.btn--outlined):not(.btn--text) {
+  @apply border-primary-500 bg-primary-500 text-white
+    hover:bg-primary-600 hover:border-primary-600
+    active:bg-primary-700 active:border-primary-700;
+}
+
+.btn--secondary:not(.btn--outlined):not(.btn--text) {
+  @apply border-secondary-500 bg-secondary-500 text-white
+    hover:bg-secondary-600 hover:border-secondary-600
+    active:bg-secondary-700 active:border-secondary-700;
+}
+
+.btn--info:not(.btn--outlined):not(.btn--text) {
+  @apply border-info-500 bg-info-500 text-white
+    hover:bg-info-600 hover:border-info-600
+    active:bg-info-700 active:border-info-700;
+}
+
+.btn--success:not(.btn--outlined):not(.btn--text) {
+  @apply border-success-500 bg-success-500 text-white
+    hover:bg-success-600 hover:border-success-600
+    active:bg-success-700 active:border-success-700;
+}
+
+.btn--warning:not(.btn--outlined):not(.btn--text) {
+  @apply border-warning-500 bg-warning-500 text-white
+    hover:bg-warning-600 hover:border-warning-600
+    active:bg-warning-700 active:border-warning-700;
+}
+
+.btn--error:not(.btn--outlined):not(.btn--text) {
+  @apply border-error-500 bg-error-500 text-white
+    hover:bg-error-600 hover:border-error-600
+    active:bg-error-700 active:border-error-700;
+}
+
+/** outlined */
+.btn--outlined {
+  @apply bg-transparent;
+}
+
+.btn--default.btn--outlined {
+  @apply border-gray-800 text-gray-800
+    hover:bg-gray-900 hover:text-white hover:border-gray-900 active:text-gray-300 active:border-gray-300;
+}
+.btn--dark.btn--outlined {
+  @apply border-gray-800 text-gray-800 hover:text-white
+    hover:bg-gray-900 hover:border-gray-900 active:text-gray-200 active:border-gray-200;
+}
+.btn--primary.btn--outlined {
+  @apply border-primary-500 text-primary-500
+    hover:bg-primary-600 hover:text-white hover:border-primary-600
+    active:text-primary-100;
+}
+
+.btn--secondary.btn--outlined {
+  @apply border-secondary-500 text-secondary-500
+    hover:bg-secondary-600 hover:text-white hover:border-secondary-600
+    active:text-secondary-100;
+}
+.btn--info.btn--outlined {
+  @apply border-info-500 text-info-500
+    hover:bg-info-600 hover:text-white hover:border-info-600
+    active:text-info-100;
+}
+.btn--warning.btn--outlined {
+  @apply border-warning-500 text-warning-500
+    hover:bg-warning-600 hover:text-white hover:border-warning-600
+    active:text-warning-100;
+}
+.btn--success.btn--outlined {
+  @apply border-success-500 text-success-500
+    hover:bg-success-600 hover:text-white hover:border-success-600
+    active:text-success-100;
+}
+.btn--error.btn--outlined {
+  @apply border-error-500 text-error-500
+    hover:bg-error-600 hover:text-white hover:border-error-600
+    active:text-error-100;
+}
+
+/** text */
+.btn--text {
+  @apply bg-transparent border-none;
+}
+
+.btn--default.btn--text {
+  @apply text-gray-800 hover:text-gray-900 active:text-gray-700;
+}
+.btn--dark.btn--text {
+  @apply text-gray-800 hover:text-gray-900 active:text-gray-700;
+}
+.btn--primary.btn--text {
+  @apply text-primary-500 hover:text-primary-600 active:text-primary-400;
+}
+.btn--secondary.btn--text {
+  @apply text-secondary-500 hover:text-secondary-600 active:text-secondary-400;
+}
+.btn--info.btn--text {
+  @apply text-info-500 hover:text-info-600 active:text-info-400;
+}
+.btn--warning.btn--text {
+  @apply text-warning-500 hover:text-warning-600 active:text-warning-400;
+}
+.btn--success.btn--text {
+  @apply text-success-500 hover:text-success-600 active:text-success-400;
+}
+.btn--error.btn--text {
+  @apply text-error-500 hover:text-error-600 active:text-error-400;
+}
diff --git a/src/components/VBtn/VBtn.vue b/src/components/VBtn/VBtn.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue';
+import {computed, toRefs} from 'vue';
 import VSpinner from '../VSpinner/VSpinner.vue';
 
 const props = defineProps({
@@ -82,7 +82,7 @@ const props = defineProps({
   },
 });
 
-const { disabled, noRing, loading, loadingText } = toRefs(props);
+const {disabled, noRing, loading, loadingText} = toRefs(props);
 
 const computedComponent = computed(() => {
   if (props.to) {
@@ -180,7 +180,7 @@ const spinnerColor = computed(() => {
     :rel="newTab ? 'noopener' : ''"
     :target="newTab ? '_blank' : ''"
     :disabled="disabled || loading"
-    v-bind="{ ...attrs, ...$attrs }"
+    v-bind="{...attrs, ...$attrs}"
   >
     <template v-if="loading">
       <slot name="loading">
@@ -192,179 +192,4 @@ const spinnerColor = computed(() => {
   </component>
 </template>
 
-<style scoped>
-.btn {
-  @apply transition duration-300 cursor-pointer inline-flex items-center justify-center
-    focus:outline-none font-semibold px-4 py-2 text-sm;
-}
-.btn--xs {
-  @apply px-1.5 py-0.5;
-}
-
-.btn--sm {
-  @apply px-2 py-1;
-}
-
-.btn--md {
-}
-
-.btn--lg {
-  @apply px-5 py-3;
-}
-
-.btn--xl {
-  @apply px-6 py-4;
-}
-
-.btn--ring {
-  @apply focus:ring focus:ring-offset-2 focus:ring-opacity-50;
-}
-
-/** button icons **/
-.btn--icon {
-  @apply p-0;
-}
-
-.btn--icon.btn--xs {
-  @apply w-[30px] h-[30px];
-}
-
-.btn--icon.btn--sm {
-  @apply w-[36px] h-[36px];
-}
-
-.btn--icon.btn--md {
-  @apply w-[40px] h-[40px];
-}
-
-.btn--icon.btn--lg {
-  @apply w-[50px] h-[50px];
-}
-
-.btn--icon.btn--xl {
-  @apply w-[60px] h-[60px];
-}
-
-/** variants */
-
-.btn--default:not(.btn--outlined):not(.btn--text) {
-  @apply border-gray-800 text-gray-800
-    hover:text-gray-900 hover:border-gray-900 active:text-gray-600 active:border-gray-600;
-}
-
-.btn--dark:not(.btn--outlined):not(.btn--text) {
-  @apply border-gray-800 bg-gray-800 text-white
-    hover:bg-gray-900 hover:border-gray-900 active:text-gray-200 active:border-gray-200;
-}
-
-.btn--primary:not(.btn--outlined):not(.btn--text) {
-  @apply border-primary-500 bg-primary-500 text-white
-    hover:bg-primary-600 hover:border-primary-600
-    active:bg-primary-700 active:border-primary-700;
-}
-
-.btn--secondary:not(.btn--outlined):not(.btn--text) {
-  @apply border-secondary-500 bg-secondary-500 text-white
-    hover:bg-secondary-600 hover:border-secondary-600
-    active:bg-secondary-700 active:border-secondary-700;
-}
-
-.btn--info:not(.btn--outlined):not(.btn--text) {
-  @apply border-info-500 bg-info-500 text-white
-    hover:bg-info-600 hover:border-info-600
-    active:bg-info-700 active:border-info-700;
-}
-
-.btn--success:not(.btn--outlined):not(.btn--text) {
-  @apply border-success-500 bg-success-500 text-white
-    hover:bg-success-600 hover:border-success-600
-    active:bg-success-700 active:border-success-700;
-}
-
-.btn--warning:not(.btn--outlined):not(.btn--text) {
-  @apply border-warning-500 bg-warning-500 text-white
-    hover:bg-warning-600 hover:border-warning-600
-    active:bg-warning-700 active:border-warning-700;
-}
-
-.btn--error:not(.btn--outlined):not(.btn--text) {
-  @apply border-error-500 bg-error-500 text-white
-    hover:bg-error-600 hover:border-error-600
-    active:bg-error-700 active:border-error-700;
-}
-
-/** outlined */
-.btn--outlined {
-  @apply bg-transparent;
-}
-
-.btn--default.btn--outlined {
-  @apply border-gray-800 text-gray-800
-    hover:bg-gray-900 hover:text-white hover:border-gray-900 active:text-gray-300 active:border-gray-300;
-}
-.btn--dark.btn--outlined {
-  @apply border-gray-800 text-gray-800 hover:text-white
-    hover:bg-gray-900 hover:border-gray-900 active:text-gray-200 active:border-gray-200;
-}
-.btn--primary.btn--outlined {
-  @apply border-primary-500 text-primary-500
-    hover:bg-primary-600 hover:text-white hover:border-primary-600
-    active:text-primary-100;
-}
-
-.btn--secondary.btn--outlined {
-  @apply border-secondary-500 text-secondary-500
-    hover:bg-secondary-600 hover:text-white hover:border-secondary-600
-    active:text-secondary-100;
-}
-.btn--info.btn--outlined {
-  @apply border-info-500 text-info-500
-    hover:bg-info-600 hover:text-white hover:border-info-600
-    active:text-info-100;
-}
-.btn--warning.btn--outlined {
-  @apply border-warning-500 text-warning-500
-    hover:bg-warning-600 hover:text-white hover:border-warning-600
-    active:text-warning-100;
-}
-.btn--success.btn--outlined {
-  @apply border-success-500 text-success-500
-    hover:bg-success-600 hover:text-white hover:border-success-600
-    active:text-success-100;
-}
-.btn--error.btn--outlined {
-  @apply border-error-500 text-error-500
-    hover:bg-error-600 hover:text-white hover:border-error-600
-    active:text-error-100;
-}
-
-/** text */
-.btn--text {
-  @apply bg-transparent border-none;
-}
-
-.btn--default.btn--text {
-  @apply text-gray-800 hover:text-gray-900 active:text-gray-700;
-}
-.btn--dark.btn--text {
-  @apply text-gray-800 hover:text-gray-900 active:text-gray-700;
-}
-.btn--primary.btn--text {
-  @apply text-primary-500 hover:text-primary-600 active:text-primary-400;
-}
-.btn--secondary.btn--text {
-  @apply text-secondary-500 hover:text-secondary-600 active:text-secondary-400;
-}
-.btn--info.btn--text {
-  @apply text-info-500 hover:text-info-600 active:text-info-400;
-}
-.btn--warning.btn--text {
-  @apply text-warning-500 hover:text-warning-600 active:text-warning-400;
-}
-.btn--success.btn--text {
-  @apply text-success-500 hover:text-success-600 active:text-success-400;
-}
-.btn--error.btn--text {
-  @apply text-error-500 hover:text-error-600 active:text-error-400;
-}
-</style>
+<style src="./VBtn.styles.css"></style>