refactor: Clean up unnecessary Stylus variables

Author: rstoenescu

dev/components/screen-modal.vue

@@ -1,55 +1,34 @@
 <template>
-  <screen>
-    <div slot="header" class="row items-center">
-      <button @click="close()"><i>keyboard_arrow_left</i></button>
-      <p>Modal Header</p>
-    </div>
-    <div slot="footer" class="row items-center">
-      <p>Modal Footer</p>
+  <div class="layout">
+    <div class="layout-header">
+      <div class="toolbar">
+        <button @click="close()"><i>arrow_back</i></button>
+        <div class="toolbar-content">
+          <div class="toolbar-title padding-2">
+            <div>Some very very very very long title here</div>
+          </div>
+        </div>
+        <div class="toolbar-buttons">
+          <button><i>search</i></button>
+          <button><i>help</i></button>
+        </div>
+      </div>
+      <div class="toolbar primary">
+        <quasar-searchbar :model.sync="search"></quasar-searchbar>
+      </div>
     </div>
 
-    <div style="padding: 20px">
-      <h1>Modal</h1>
-      <button class="primary" @click="openModal()">Open Another Modal</button>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
-      <h1>Modal</h1>
+    <quasar-tabs class="layout-navbar">
+      <quasar-tab icon="mail">Mails</quasar-tab>
+      <quasar-tab icon="alarm">Alarms</quasar-tab>
+      <quasar-tab icon="help">Help</quasar-tab>
+    </quasar-tabs>
+
+    <div class="layout-content">
+      <div>Search: '{{ search }}'</div>
+      <div v-for="n in 100">text</div>
     </div>
-  </screen>
+  </div>
 </template>
 
 <script>

src/components/action-sheet/action-sheet.ios.styl

@@ -1,4 +1,4 @@
-$action-sheet-background-color ?= $ios-primary
+$action-sheet-background-color ?= $layout-background-color
 $action-sheet-border-radius    ?= 13px
 $action-sheet-max-width        ?= 95%
 $action-sheet-margin-bottom    ?= .6rem

src/components/modal/modal.ios.styl

@@ -1,4 +1,4 @@
-$modal-background-color  ?= $ios-primary
+$modal-background-color  ?= $layout-background-color
 $modal-border-radius     ?= 13px
 
 $modal-width             ?= 80vw

src/css-components/input/input.ios.styl

@@ -7,8 +7,9 @@ input, textarea
     border-bottom 2px solid transparent
     border-radius $generic-border-radius
     box-shadow $shadow-1
+    background-color inherit
     &:focus
-      box-shadow $shadow-2
+      background-color white
 
 input
   &:not(.no-style)

src/themes/quasar.ios.styl

@@ -1,9 +1,5 @@
 $generic-border-radius ?= 4px
 
-$ios-primary   ?= #f8f8f8
-$ios-secondary ?= #8c8c8c
-$ios-tertiary  ?= #b2b2b2
-
 $generic-input-size            ?= 30px
 $generic-input-border-width    ?= 2px