feat: Further work for themes

Author: rstoenescu

dev/app.entry.js

@@ -14,7 +14,7 @@ Vue.use(VueRouter)
 Vue.use(VueTouch)
 Vue.use(Quasar)
 
-import '../src/themes/ios.theme.styl'
+import '../src/themes/quasar.mat.styl'
 
 var router = new VueRouter()
 

dev/themes/app.ios.styl

@@ -0,0 +1,35 @@
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import 'app.variables'
+
+
+// App iOS Design Variables
+// --------------------------------------------------
+// iOS Design only Stylus variables can go here
+
+$generic-border-radius ?= 4px
+
+$ios-primary   ?= #f8f8f8
+$ios-secondary ?= #8c8c8c
+$ios-tertiary  ?= #b2b2b2
+
+$generic-input-size            ?= 30px
+$generic-input-border-width    ?= 2px
+
+$typography-font-family     ?= '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
+$typography-font-size       ?= 1rem
+$typography-p-margin        ?= .5rem 0 1rem 0
+$typography-p-line-height   ?= 1.4rem
+
+
+// Quasar iOS Design Stylus
+// --------------------------------------------------
+// Custom App variables must be declared before importing Quasar.
+// Quasar will use its default values when a custom variable isn't provided.
+@import 'quasar-frameowrk/quasar.ios'
+
+
+// App iOS Design Only Stylus
+// --------------------------------------------------
+// CSS that should only apply to the iOS Design app

dev/themes/app.mat.styl

@@ -0,0 +1,30 @@
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import 'app.variables'
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Stylus variables can go here
+
+$generic-border-radius ?= 2px
+$generic-input-size            ?= 25px
+$generic-input-border-width    ?= 2px
+
+$typography-font-family     ?= 'Roboto'
+$typography-font-size       ?= 1rem
+$typography-p-margin        ?= .5rem 0 1rem 0
+$typography-p-line-height   ?= 1.4rem
+
+
+// Quasar Material Design Stylus
+// --------------------------------------------------
+// Custom App variables must be declared before importing Quasar.
+// Quasar will use its default values when a custom variable isn't provided.
+@import 'quasar-frameowrk/quasar.md'
+
+
+// App Material Design Only Stylus
+// --------------------------------------------------
+// CSS that should only apply to the Material Design app

dev/themes/app.variables.styl

@@ -0,0 +1,33 @@
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Stylus variables found in Quasar's source Stylus files. Setting
+// variables before Quasar's Stylus will use these variables rather than
+// Quasar's default Stylus variable values. Stylus variables specific
+// to the themes belong in either the app.ios.styl or app.md.styl files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding.
+
+$primary   = #027be3
+$secondary = #26A69A
+$tertiary  = #555
+
+$neutral   = #E0E1E2
+$positive  = #21BA45
+$negative  = #DB2828
+$info      = #31CCEC
+$warning   = #F2C037
+
+$light     = #f4f4f4
+$dark      = #333
+$faded     = #777
+
+$text-color          = lighten(black, 17%)
+$background-color    = white
+
+$link-color          = lighten($primary, 25%)
+$link-color-active   = $primary

dev/views/typography.vue

@@ -117,10 +117,10 @@ export default {
     }
   },
   ready () {
-    Events.events.on('app:visibility', this.writeVisibilityState)
+    Events.on('app:visibility', this.writeVisibilityState)
   },
   destroyed () {
-    Events.events.off('app:visibility', this.writeVisibilityState)
+    Events.off('app:visibility', this.writeVisibilityState)
   }
 }
 </script>

src/app-visibility.js

@@ -1,6 +1,6 @@
 
 import $ from 'jquery'
-import { events } from './events'
+import Events from './events'
 
 let
   body = $('body'),
@@ -31,7 +31,7 @@ function onchange (evt) {
   }
 
   appVisibility = state
-  events.trigger('app:visibility', state)
+  Events.trigger('app:visibility', state)
   body.removeClass('app-' + (state === 'visible' ? h : v)).addClass('app-' + state)
 }
 

src/action-sheet/action-sheet-ios.html …nents/action-sheet/action-sheet-ios.htmlsrc/action-sheet/action-sheet-ios.html renamed to src/components/action-sheet/action-sheet-ios.html src/action-sheet/action-sheet-ios.html renamed to src/components/action-sheet/action-sheet-ios.html

@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import Modal from '../modal/modal'
-import theme from '../themes/themes'
+import theme from '../../themes/themes'
 
 import matTemplate from './action-sheet-material.html'
 import iosTemplate from './action-sheet-ios.html'