1.3.0

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG.md
 
+## [1.3.0] - 2022-07-15
+
+- Replace Sass with CSS files
+- Update dependencies
+
 ## [1.1.0] - 2021-12-13
 
 - Update Tailwind 3

package.json

@@ -1,28 +1,27 @@
 {
-  "name": "mosaic-light-vue",
+  "name": "mosaic-vue",
   "version": "0.0.0",
   "scripts": {
-    "dev": "TAILWIND_MODE=watch vite",
+    "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.2",
-    "chart.js": "^3.5.1",
+    "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.0",
-    "flatpickr": "^4.6.9",
+    "flatpickr": "^4.6.13",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "vue": "^3.2.20",
-    "vue-flatpickr-component": "^9.0.5",
+    "vue-flatpickr-component": "^9.0.6",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.1.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.9.3",
+    "@vitejs/plugin-vue": "^3.0.0",
     "@vue/compiler-sfc": "^3.2.20",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.7",
-    "postcss": "^8.3.9",
+    "postcss": "^8.4.14",
-    "sass": "^1.43.2",
+    "tailwindcss": "^3.1.6",
-    "tailwindcss": "^3.0.2",
+    "vite": "^3.0.0"
-    "vite": "2.5.7"
   }
-}
+}

src/css/additional-styles/flatpickr.css

@@ -1,10 +1,11 @@
-// Import base styles
+@import 'flatpickr/dist/flatpickr.min.css';
-@import '~flatpickr/dist/flatpickr.min.css';
 
-// Customise flatpickr
+/* Customise flatpickr */
-$calendarPadding: 24px;
+* {
-$daySize: 36px;
+    --calendarPadding: 24px;
-$daysWidth: $daySize*7;
+    --daySize: 36px;
+    --daysWidth: calc(var(--daySize)*7);
+}
 
 @keyframes fpFadeInDown {
   from {
@@ -19,10 +20,10 @@ $daysWidth: $daySize*7;
 
 .flatpickr-calendar {
     border: inherit;
-    @apply rounded shadow-lg border border-gray-200 left-1/2;
+    @apply rounded shadow-lg border border-slate-200 left-1/2;
-    margin-left: - ($daysWidth + $calendarPadding*2)*0.5;
+    margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
-    padding: $calendarPadding;
+    padding: var(--calendarPadding);
-    width: $daysWidth + $calendarPadding*2;
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
 }
 
 @screen lg {
@@ -51,20 +52,20 @@ $daysWidth: $daySize*7;
 }
 
 .flatpickr-days {
-    width: $daysWidth;
+    width: var(--daysWidth);
 }
 
 .dayContainer {
-    width: $daysWidth;
+    width: var(--daysWidth);
-    min-width: $daysWidth;
+    min-width: var(--daysWidth);
-    max-width: $daysWidth;
+    max-width: var(--daysWidth);
 }
 
 .flatpickr-day {
-    @apply bg-gray-50 text-sm font-medium text-gray-600;
+    @apply bg-slate-50 text-sm font-medium text-slate-600;
-    max-width: $daySize;
+    max-width: var(--daySize);
-    height: $daySize;
+    height: var(--daySize);
-    line-height: $daySize;
+    line-height: var(--daySize);
 }
 
 .flatpickr-day,
@@ -95,7 +96,7 @@ $daysWidth: $daySize*7;
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-    @apply text-gray-400;
+    @apply text-slate-400;
 }
 
 .rangeMode .flatpickr-day {
@@ -157,7 +158,7 @@ $daysWidth: $daySize*7;
 .flatpickr-months .flatpickr-next-month {
     position: static;
     height: auto;
-    @apply text-gray-600;    
+    @apply text-slate-600;    
 }
 
 .flatpickr-months .flatpickr-prev-month svg,
@@ -171,7 +172,7 @@ $daysWidth: $daySize*7;
 .flatpickr-months .flatpickr-prev-month:hover svg,
 .flatpickr-months .flatpickr-next-month:hover svg {
     fill: inherit;
-    @apply text-gray-400;
+    @apply text-slate-400;
 }
 
 .flatpickr-months .flatpickr-prev-month {
@@ -183,7 +184,7 @@ $daysWidth: $daySize*7;
 }
 
 .flatpickr-months .flatpickr-month {
-    @apply text-gray-800;
+    @apply text-slate-800;
     height: auto;
     line-height: inherit;
 }
@@ -219,10 +220,12 @@ $daysWidth: $daySize*7;
 }
 
 span.flatpickr-weekday {
-    @apply text-gray-400 font-medium text-xs;
+    @apply text-slate-400 font-medium text-xs;
 }
 
 .flatpickr-calendar.arrowTop::before,
-.flatpickr-calendar.arrowTop::after {
+.flatpickr-calendar.arrowTop::after,
+.flatpickr-calendar.arrowBottom::before,
+.flatpickr-calendar.arrowBottom::after {
     display: none;
 }

src/css/additional-styles/range-slider.css

@@ -0,0 +1,57 @@
+/* Range slider */
+:root {
+    --range-thumb-size: 36px;
+}
+
+input[type=range] {
+    appearance: none;
+    background: #ccc;
+    border-radius: 3px;
+    height: 6px;
+    margin-top: (--range-thumb-size - 6px) * 0.5;
+    margin-bottom: (--range-thumb-size - 6px) * 0.5;
+    --thumb-size: #{--range-thumb-size};  
+}
+
+input[type=range]::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;        
+}
+
+input[type=range]::-moz-range-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;    
+}
+
+input[type=range]::-ms-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;
+}
+
+input[type=range]::-moz-focus-outer {
+    border: 0;
+}

src/css/additional-styles/range-slider.scss

@@ -1,55 +0,0 @@
-// Range slider
-$range-thumb-size: 36px;
-
-input[type=range] {
-    appearance: none;
-    background: #ccc;
-    border-radius: 3px;
-    height: 6px;
-    margin-top: ($range-thumb-size - 6px) * 0.5;
-    margin-bottom: ($range-thumb-size - 6px) * 0.5;
-    --thumb-size: #{$range-thumb-size};  
-
-    &::-webkit-slider-thumb {
-        appearance: none;
-        -webkit-appearance: none;
-        background-color: #000;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-        background-position: center;
-        background-repeat: no-repeat;
-        border: 0;
-        border-radius: 50%;
-        cursor: pointer;
-        height: $range-thumb-size;
-        width: $range-thumb-size;            
-    }
-
-    &::-moz-range-thumb {
-        background-color: #000;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-        background-position: center;
-        background-repeat: no-repeat;
-        border: 0;
-        border: none;
-        border-radius: 50%;
-        cursor: pointer;
-        height: $range-thumb-size;
-        width: $range-thumb-size;
-    }
-    
-    &::-ms-thumb {
-        background-color: #000;
-        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
-        background-position: center;
-        background-repeat: no-repeat;
-        border: 0;
-        border-radius: 50%;
-        cursor: pointer;
-        height: $range-thumb-size;
-        width: $range-thumb-size;
-    }
-    
-    &::-moz-focus-outer {
-        border: 0;
-    }
-}

src/css/additional-styles/theme.css

@@ -0,0 +1,8 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+    @apply ring-0;
+}

src/css/additional-styles/theme.scss

@@ -1,12 +0,0 @@
-.form-input,
-.form-textarea,
-.form-multiselect,
-.form-select,
-.form-checkbox,
-.form-radio {
-
-    &:focus {
-        @apply ring-0;
-    }
-}
-

src/css/additional-styles/toggle-switch.css

@@ -0,0 +1,35 @@
+/* Switch element */
+.form-switch {
+    @apply relative select-none;
+    width: 44px;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+}
+
+.form-switch label > span:first-child {
+    @apply absolute block rounded-full;
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+    right: 50%;
+    transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked + label {
+    @apply bg-indigo-500;
+}
+
+.form-switch input[type="checkbox"]:checked + label > span:first-child {
+    left: 22px;
+}
+
+.form-switch input[type="checkbox"]:disabled + label {
+    @apply cursor-not-allowed bg-slate-100 border border-slate-200;
+}
+
+.form-switch input[type="checkbox"]:disabled + label > span:first-child {
+    @apply bg-slate-400;
+}

src/css/additional-styles/toggle-switch.scss

@@ -1,44 +0,0 @@
-// Switch element
-.form-switch {
-    @apply relative select-none;
-    width: 44px;
-
-    label {
-        @apply block overflow-hidden cursor-pointer h-6 rounded-full;
-
-        > span:first-child {
-            @apply absolute block rounded-full;
-            width: 20px;
-            height: 20px;
-            top: 2px;
-            left: 2px;
-            right: 50%;
-            transition: all .15s ease-out;
-        }
-    }
-
-    input[type="checkbox"] {
-    
-        &:checked {
-
-            + label {
-                @apply bg-indigo-500;
-
-                > span:first-child {
-                    left: 22px;
-                }
-            }
-        }
-
-        &:disabled {
-
-            + label {
-                @apply cursor-not-allowed bg-gray-100 border border-gray-200;
-
-                > span:first-child {
-                    @apply bg-gray-400;
-                }
-            }            
-        }
-    }
-}

src/css/additional-styles/utility-patterns.css

@@ -1,4 +1,4 @@
-// Typography
+/* Typography */
 .h1 {
     @apply text-4xl font-extrabold tracking-tighter;
 }
@@ -25,7 +25,7 @@
     }
 }
 
-// Buttons
+/* Buttons */
 .btn,
 .btn-lg,
 .btn-sm,
@@ -49,7 +49,7 @@
     @apply px-2 py-0.5;
 }
 
-// Forms
+/* Forms */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
@@ -63,7 +63,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .form-select,
 .form-checkbox,
 .form-radio {
-    @apply text-sm text-gray-800 bg-white border;
+    @apply text-sm text-slate-800 bg-white border;
 }
 
 .form-input,
@@ -78,12 +78,12 @@ input[type="search"]::-webkit-search-results-decoration {
 .form-textarea,
 .form-multiselect,
 .form-select {
-    @apply leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-indigo-300 shadow-sm;
+    @apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-indigo-300 shadow-sm;
 }
 
 .form-input,
 .form-textarea {
-    @apply placeholder-gray-400;
+    @apply placeholder-slate-400;
 }
 
 .form-select {
@@ -92,7 +92,7 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .form-checkbox,
 .form-radio {
-    @apply text-indigo-500 border border-gray-300;
+    @apply text-indigo-500 border border-slate-300;
 }
 
 /* Chrome, Safari and Opera */

src/css/style.css

@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+/* Additional styles */
+@import 'additional-styles/utility-patterns.css';
+@import 'additional-styles/range-slider.css';
+@import 'additional-styles/toggle-switch.css';
+@import 'additional-styles/flatpickr.css';
+@import 'additional-styles/theme.css';
+
+@import 'tailwindcss/utilities';

src/css/style.scss

@@ -1,13 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
-
-@tailwind base;
-@tailwind components;
-
-// Additional styles
-@import 'additional-styles/utility-patterns.scss';
-@import 'additional-styles/range-slider.scss';
-@import 'additional-styles/toggle-switch.scss';
-@import 'additional-styles/flatpickr.scss';
-@import 'additional-styles/theme.scss';
-
-@tailwind utilities;

src/css/tailwind.config.js

@@ -1,8 +1,10 @@
-const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {
       boxShadow: {
@@ -11,11 +13,6 @@ module.exports = {
         lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
         xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
       },
-      colors: {
-        gray: colors.slate,
-        'light-blue': colors.sky,
-        red: colors.rose,
-      },
       outline: {
         blue: '2px solid rgba(0, 112, 244, 0.5)',
       },

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
 
-import './css/style.scss'
+import './css/style.css'
 
 const app = createApp(App)
 app.use(router)

src/partials/dashboard/DashboardCard07.vue

@@ -51,7 +51,7 @@
                 <div class="text-center">267</div>
               </td>
               <td class="p-2">
-                <div class="text-center text-light-blue-500">4.7%</div>
+                <div class="text-center text-sky-500">4.7%</div>
               </td>
             </tr>
             <!-- Row -->
@@ -75,7 +75,7 @@
                 <div class="text-center">249</div>
               </td>
               <td class="p-2">
-                <div class="text-center text-light-blue-500">4.4%</div>
+                <div class="text-center text-sky-500">4.4%</div>
               </td>
             </tr>
             <!-- Row -->
@@ -99,7 +99,7 @@
                 <div class="text-center">224</div>
               </td>
               <td class="p-2">
-                <div class="text-center text-light-blue-500">4.2%</div>
+                <div class="text-center text-sky-500">4.2%</div>
               </td>
             </tr>
             <!-- Row -->
@@ -123,7 +123,7 @@
                 <div class="text-center">220</div>
               </td>
               <td class="p-2">
-                <div class="text-center text-light-blue-500">4.2%</div>
+                <div class="text-center text-sky-500">4.2%</div>
               </td>
             </tr>
             <!-- Row -->
@@ -147,7 +147,7 @@
                 <div class="text-center">204</div>
               </td>
               <td class="p-2">
-                <div class="text-center text-light-blue-500">3.9%</div>
+                <div class="text-center text-sky-500">3.9%</div>
               </td>
             </tr>
           </tbody>

src/partials/dashboard/DashboardCard11.vue

@@ -52,8 +52,8 @@ export default {
         {
           label: 'Not satisfied about the quality of the product',
           data: [81],
-          backgroundColor: tailwindConfig().theme.colors['light-blue'][400],
+          backgroundColor: tailwindConfig().theme.colors['sky'][400],
-          hoverBackgroundColor: tailwindConfig().theme.colors['light-blue'][500],
+          hoverBackgroundColor: tailwindConfig().theme.colors['sky'][500],
           barPercentage: 1,
           categoryPercentage: 1,
         },

src/partials/dashboard/DashboardCard12.vue

@@ -66,8 +66,8 @@
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full shrink-0 bg-light-blue-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-sky-500 my-2 mr-3">
-              <svg class="w-9 h-9 fill-current text-light-blue-50" viewBox="0 0 36 36">
+              <svg class="w-9 h-9 fill-current text-sky-50" viewBox="0 0 36 36">
                 <path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
               </svg>
             </div>