feat: New Style

Author: ftgibran

packages/@simpli/cli-scaffold/generator/index.js

@@ -63,7 +63,7 @@ module.exports = (api, options) => {
       'normalize-scss': '7.0.1',
       'register-service-worker': '1.1.1',
       'simple-line-icons': '2.4.1',
-      'simpli-ts-vue': '^1.7.1',
+      'simpli-ts-vue': '^1.8.2',
       'vue': '2.5.17',
       'vue-chartjs': '3.2.1',
       'vue-chartkick': '0.2.1',

packages/@simpli/cli-scaffold/generator/injected/src/views/list/ListTemplateView.vue

@@ -10,7 +10,7 @@
 
     <section>
       <adap-table :collection="collection">
-        <div slot="options" slot-scope="props">
+        <div slot="options" slot-scope="props" class="horiz nowrap">
           <a @click="openPersist(props.item)" class="icon icon-pencil"></a>
 <%_ if (model.resource.deletable) { _%>
           <a @click="openRemoveModal(props.item)" class="icon icon-trash"></a>

packages/@simpli/cli-scaffold/generator/injected/src/views/persist/PersistTemplateView.vue

@@ -1,19 +1,19 @@
 <template>
 <%_ var kebabCase = rootOptions.scaffoldSetup.kebabCase _%>
-  <div class="verti">
-    <h1 class="header px-30 py-10 m-0">
+  <div>
+    <h1 class="adap-header px-30 py-10 m-0">
       {{ $t("classes.<%-origin.name%>.title") }}
     </h1>
 
-    <await name="get" class="verti scroll weight-1 items-center-top p-30">
-      <form @submit.prevent="$await.run(persist, 'persist')" class="elevated w-full max-w-650 p-20">
+    <await name="get" class="weight-1 items-center p-20">
+      <form @submit.prevent="$await.run(persist, 'persist')" class="elevated padded w-full max-w-650">
 <%_ for (var i in origin.attrs) { var attr = origin.attrs[i] _%>
 <%-attr.buildPersist(origin.name, model.resp.originAttr)-%>
 <%_ } _%>
         <hr class="mb-20"/>
 
         <await name="persist" class="verti items-center">
-          <button type="submit" class="accent">{{ $t("persist.submit") }}</button>
+          <button type="submit" class="primary">{{ $t("persist.submit") }}</button>
         </await>
       </form>
     </await>

packages/@simpli/cli-scaffold/generator/template/src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <transition name="fade-y" mode="out-in">
+    <transition name="blur" mode="out-in">
       <router-view/>
     </transition>
     <vue-snotify :class="toastStyle"/>
   </div>
 </template>
 
 <style lang="scss">
-  @import './scss/main.scss';
+  @import './scss/app.scss';
 </style>
 
 <script lang="ts">

packages/@simpli/cli-scaffold/generator/template/src/assets/img/bg.jpg

@@ -41,7 +41,7 @@ $.await.defaultSpinnerPadding = '0'
 $.await.defaultSpinnerScale = 1
 
 $.modal.defaultBody = document.body
-$.modal.defaultTransition = 'fade-y'
+$.modal.defaultTransition = 'blur'
 $.modal.defaultBackgroundTransition = 'fade'
 $.modal.defaultClosable = true
 $.modal.defaultCloseOutside = true

packages/@simpli/cli-scaffold/generator/template/src/bootstrap/setting.ts

@@ -1,31 +1,30 @@
 <template>
-  <div class="des-w-200 tab-w-200 w-full des-h-window">
-    <aside class="menu verti des-w-200 tab-w-200 w-full des-h-window tab-h-window des-fixed tab-fixed y-scroll">
+  <div class="sidebar des-w-200 tab-w-200 w-full des-h-window">
+    <aside class="verti des-w-200 tab-w-200 w-full des-h-window tab-h-window des-fixed tab-fixed y-scroll">
+
       <div class="horiz items-center">
-        <a class="mobile icon icon-menu" @click="toggleMenu"></a>
-        <h1 class="horiz weight-1 accent truncate">
-          <img src="@/assets/img/logo.png"
-               class="ml-10"
-               width="32"
-               height="32"
-               alt="Logo"
-               style="vertical-align: middle;">
-          <span class="weight-1 truncate mr-10">
-          <%- rootOptions.scaffoldSetup.appName %>
+        <div class="brand">
+          <img src="@/assets/img/logo.png" alt="Logo">
+          <span>
+            <%- rootOptions.scaffoldSetup.appName %>
           </span>
-        </h1>
+        </div>
+
+        <a class="mobile icon icon-menu" @click="toggleMenu"></a>
       </div>
+
       <!--<div class="horiz items-center">-->
       <!--<h3 class="truncate">-->
       <!--{{user.email}}-->
       <!--</h3>-->
       <!--</div>-->
+
       <div class="weight-1" :class="{ 'desktop-tablet': !menu }">
-        <ul class="verti h-full p-0 py-10">
+        <ul>
 
           <li>
-            <router-link to="/dashboard" @click.native="menuOff">
-              <i class="icon icon-home mr-3"></i>
+            <router-link to="/dashboard" @click.native="menuOff" class="btn fluid flat contrast">
+              <i class="icon icon-home"></i>
               {{ $t('view.dashboard.title') }}
             </router-link>
           </li>
@@ -34,7 +33,7 @@
 <%_ var resources = rootOptions.scaffoldSetup.resourceModels _%>
 <%_ for (var i in resources) { var resource = resources[i] _%>
           <li>
-            <router-link to="/<%-kebabCase(resource.name)%>/list" @click.native="menuOff">
+            <router-link to="/<%-kebabCase(resource.name)%>/list" @click.native="menuOff" class="btn fluid flat contrast">
               {{ $t('classes.<%-resource.name%>.title') }}
             </router-link>
           </li>
@@ -44,8 +43,8 @@
 <%_ if (rootOptions.scaffoldSetup.useAuth) { _%>
 
           <li>
-            <a @click="signOut(false)">
-              <i class="icon icon-logout mr-3"/>
+            <a @click="signOut(false)" class="btn fluid flat contrast">
+              <i class="icon icon-logout"/>
               {{$t('app.logout')}}
             </a>
           </li>
@@ -54,7 +53,7 @@
 
       </div>
 
-      <footer class="p-10 desktop-tablet">
+      <footer class="p-10 desktop-tablet text-light">
         <small>
           <b>Version</b>
           {{version}}

packages/@simpli/cli-scaffold/generator/template/src/components/Sidebar.vue

@@ -1,15 +1,17 @@
 <template>
   <modal :name="name">
-    <div class="verti">
+    <div class="verti text-center">
       <div class="horiz">
         <h4 class="weight-1 mt-0 mr-10">
           {{ $t("system.question.confirmRemove") }}
         </h4>
       </div>
-      <p class="text-center">{{ text }}</p>
+
+      <p>{{ text }}</p>
+
       <div class="horiz items-center">
-        <button type="button" @click="cancelEvent">{{ $t("app.cancel") }}</button>
-        <button type="button" class="danger ml-10" @click="confirmEvent">{{ $t("app.remove") }}</button>
+        <button type="button" class="mr-10" @click="cancelEvent">{{ $t("app.cancel") }}</button>
+        <button type="button" class="danger" @click="confirmEvent">{{ $t("app.remove") }}</button>
       </div>
     </div>
   </modal>