Add loading background

oruga-ui · Nov 24, 2020 · b7714f4 · b7714f4
1 parent e03d3b9
commit b7714f4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 15 deletions.
diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css
@@ -21,7 +21,7 @@
 
 /* Field */
 .field-label {
-  @apply block text-gray-700 text-sm font-bold mb-2 dark:text-white;
+  @apply block text-sm font-bold mb-2 text-main dark:text-main-dark;
 }
 
 .field-danger {
@@ -30,7 +30,7 @@
 
 /* Input */
 .input {
-  @apply shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight dark:bg-black dark:text-white;
+  @apply shadow appearance-none border w-full py-2 px-3 leading-tight text-main dark:text-main-dark dark:bg-black;
 }
 
 .input-danger {
@@ -43,7 +43,7 @@
 }
 
 .o-switch input[type=checkbox]:checked + .o-switch-check {
-  @apply bg-black dark:bg-purple-700;
+  @apply bg-black dark:bg-highlight-dark;
 }
 
 /* Dropdown */
@@ -64,7 +64,7 @@
 
 /* Loading */
 .loading-background {
-  background: rgba(255,255,255,0.6);
+  @apply bg-gray-50 dark:bg-gray-700 opacity-75;
 }
 
 /* Radio */

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
@@ -1,9 +1,26 @@
 <template>
-  <div class="border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 sm:mx-0 sm:px-0">
-    <div class="flex items-center"><img class="w-14" src="https://oruga.io/logo.png" /><o-icon class="text-red-500 dark:text-primary" icon="heart" size="large"></o-icon><img class="w-14" src="https://www.markusantonwolf.com/media/pages/blog/tailwind-css/265298487-1596675041/tailwind-css-logo.svg"></div>
+  <div
+    class="border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 sm:mx-0 sm:px-0"
+  >
+    <div class="flex items-center">
+      <img class="w-14" src="https://oruga.io/logo.png" />
+      <o-icon
+        class="text-red-500 dark:text-primary"
+        icon="heart"
+        size="large"
+      ></o-icon>
+      <img
+        class="w-14"
+        src="https://www.markusantonwolf.com/media/pages/blog/tailwind-css/265298487-1596675041/tailwind-css-logo.svg"
+      />
+    </div>
     <div class="flex">
       <dark-mode-switch />
-      <a target="blank" class="transition duration-500 opacity-40 hover:opacity-100" href="https://github.com/oruga-ui/demo-tailwindcss">
+      <a
+        target="blank"
+        class="transition duration-500 opacity-40 hover:opacity-100"
+        href="https://github.com/oruga-ui/demo-tailwindcss"
+      >
         <o-icon class="ml-4" pack="fab" icon="github" size="large"></o-icon>
       </a>
     </div>

diff --git a/src/components/RecipeUploader.vue b/src/components/RecipeUploader.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:shadow-md rounded sm:px-8 sm:pt-6 pb-8 mb-4"
+    class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:shadow-md rounded sm:px-8 sm:pt-6 pb-8 mb-4 text-main"
   >
     <div class="mb-4 col-start-1 md:col-end-3">
       <o-field
@@ -138,7 +138,7 @@
     </div>
     <p style="position: relative">
       <o-loading full-page :active.sync="isLoading">
-        <o-icon icon="sync-alt" size="large" spin> </o-icon>
+        <o-icon class="text-main dark:text-main-dark" icon="sync-alt" size="large" spin> </o-icon>
       </o-loading>
     </p>
   </form>
@@ -201,7 +201,7 @@ export default Vue.extend({
           this.recipe = {
             title: "",
             author: "",
-            time: 0,
+            time: 5,
             image: null,
             servings: 1,
             difficulty: "easy",

diff --git a/src/components/RecipesFinder.vue b/src/components/RecipesFinder.vue
@@ -18,14 +18,14 @@
         :open="isOpen == index"
         @open="isOpen = index"
       >
-        <article slot="trigger" slot-scope="props" class="card-header p-4 flex space-x-4">
+        <article slot="trigger" slot-scope="props" class="card-header p-4 flex space-x-4 text-main dark:text-main-dark">
           <img
             :src="recipe.image"
             alt=""
             class="flex-none w-20 h-20 rounded-lg object-cover"
           />
           <div class="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">
-            <h2 class="text-lg font-semibold text-black mb-0.5">
+            <h2 class="text-lg font-semibold mb-0.5">
               {{ recipe.title }}
             </h2>
             <dl class="flex flex-wrap text-sm font-medium whitespace-pre">
@@ -52,14 +52,14 @@
               <div
                 class="absolute top-0 right-0 rounded-full px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1"
               >
-                <dt class="text-amber-500">
+                <dt class="">
                   <o-icon :icon="props.open ? 'caret-down' : 'caret-up'" size="large"/>
                 </dt>
               </div>
             </dl>
           </div>
         </article>
-        <div class="">
+        <div class="text-main dark:text-main-dark">
           <div class="p-4">
             {{ recipe.procedure }}
           </div>
@@ -97,6 +97,7 @@ export default Vue.extend({
 
 <style>
 .btn_recipe_filter {
+  @apply text-main dark:text-main-dark;
 }
 
 .btn_recipe_filter--checked {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <p
-      class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11 dark:text-white"
+      class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11 text-main dark:text-main-dark"
     >
       OrugaUI + TailwindCSS 2 demo. A utility-first CSS framework packed with
       classes like flex, pt-4, text-center and rotate-90 that can be composed to

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        main: {
+          DEFAULT: colors.gray[700],
+          dark: '#ffffff',
+        },
         primary: {
           DEFAULT: '#1fb6ff',
           dark: '#ffffff',