feat: create class that is not reactive to hover and apply it instead…

… of hover variant
Rule-34 · Feb 24, 2021 · 6558c83 · 6558c83
1 parent 6f41d2a
commit 6558c83
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 6 deletions.
diff --git a/assets/css/general/general.css b/assets/css/general/general.css
@@ -37,6 +37,10 @@ a:focus,
   @apply overflow-hidden rounded-lg shadow bg-elevation border-util;
 }
 
+.rounded-container {
+  @apply border rounded-lg shadow bg-elevation border-border;
+}
+
 /* ---------------- Component specific ---------------- */
 
 .icon {

diff --git a/components/pages/premium/Login.vue b/components/pages/premium/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 material-container text-default-text">
+  <div class="p-4 rounded-container text-default-text">
     <form @submit.prevent="userLogin">
       <label
         class="block mb-2 text-lg font-medium leading-tight"

diff --git a/components/pages/premium/Subscription.vue b/components/pages/premium/Subscription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col material-container">
+  <div class="flex flex-col rounded-container">
     <!-- Head -->
     <div class="py-10">
       <!-- Title -->

diff --git a/components/utils/ContentContainer.vue b/components/utils/ContentContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Loop for every info container -->
-  <article class="material-container">
+  <article class="rounded-container">
     <!-- If separator -->
     <template v-if="separator">
       <div class="p-3 bg-gradient-blue-lilac">

diff --git a/components/utils/Error.vue b/components/utils/Error.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="p-2 m-6 text-center text-default-text"
-    :class="{ 'material-container': renderBorders }"
+    :class="{ 'rounded-container': renderBorders }"
   >
     <!-- Header -->
     <div>

diff --git a/pages/premium/booru.vue b/pages/premium/booru.vue
@@ -2,7 +2,7 @@
   <main class="flex flex-col justify-around h-screen space-y-4 space-y-4-fixer">
     <div>
       <!-- Booru list -->
-      <div class="px-2 py-1 overflow-x-scroll material-container">
+      <div class="px-2 py-1 overflow-x-scroll rounded-container">
         <table class="w-full text-left text-default-text">
           <thead>
             <tr>
@@ -47,7 +47,7 @@
 
     <!-- Booru editor -->
     <form
-      class="flex flex-col p-4 space-y-2 material-container text-default-text"
+      class="flex flex-col p-4 space-y-2 rounded-container text-default-text"
       action="#"
       @submit.prevent="addCustomBooruToState()"
     >