feat(Skins): theme aware classes, also fixes to button styles for and…

…roid closes #112 closes #113 #111
NativeScript · Nov 22, 2016 · 8580319 · 8580319
1 parent 3e7b2b8
commit 8580319
Show file tree

Hide file tree

Showing 22 changed files with 94 additions and 28 deletions.
diff --git a/app/actionBar/actionBar.xml b/app/actionBar/actionBar.xml
@@ -5,8 +5,7 @@
 		<GridLayout rows="auto" columns="50,*,auto">
 			<Button tap="{{ toggleSideDrawer }}" text="{{'fa-bars' | fonticon }}" class="fa action-item text-left" row="0" col="0" />
 			<StackLayout verticalAlignment="center" row="0" col="1">
-
-			<Label id="actionBarTitle" class="action-title"/>
+				<Label id="actionBarTitle" class="action-title"/>
 			</StackLayout>
 			<Button tap="{{ openModal }}" text="Modal" row="0" col="2" class="action-item"></Button>
 		</GridLayout>

diff --git a/app/pages/tabs.xml b/app/pages/tabs.xml
@@ -8,37 +8,38 @@
   </Page.actionBar>
   <drawer:RadSideDrawer id="sideDrawer" drawerLocation="Left">
     <drawer:RadSideDrawer.mainContent android:showOverNavigation="false">
- <TabView class="tab-view" selectedColor="#30bcff" tabsBackgroundColor="#f9f9f9">
+ <TabView class="tab-view">
+ <!-- we want to set this via css: selectedColor="#30bcff" tabsBackgroundColor="#f9f9f9"-->
    <TabView.items>
     <!-- ITEMS -->
-     <TabViewItem title="One">
+     <TabViewItem title="One" class="tab-view-item">
        <TabViewItem.view>
-          <StackLayout class="p-20">
+          <StackLayout class="page p-20">
             <Label text="Tab 1 Content" class="h1" />
             <StackLayout>
-                <Label text="{{ tab1 }}" textWrap="true" />
+                <Label text="{{ tab1 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
 
      <TabViewItem title="Two">
       <TabViewItem.view>
-        <StackLayout class="p-20">
+        <StackLayout class="page p-20">
               <Label text="Tab 2 Content" class="h1" />
               <StackLayout>
-                <Label text="{{ tab2 }}" textWrap="true" />
+                <Label text="{{ tab2 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
         </TabViewItem.view>
      </TabViewItem>
 
       <TabViewItem title="Three">
         <TabViewItem.view>
-          <StackLayout class="p-20">
+          <StackLayout class="page p-20">
             <Label text="Tab 3 Content" class="h1" />
             <StackLayout>
-                <Label text="{{ tab3 }}" textWrap="true" />
+                <Label text="{{ tab3 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
         </TabViewItem.view>

diff --git a/app/scss/_forms.scss b/app/scss/_forms.scss
@@ -28,7 +28,7 @@
 
     .label {
       font-size:12;
-      color:$grey;
+      color:$grey-background;//$grey;
     }
 
     .input {

diff --git a/app/scss/_segmented-bar.scss b/app/scss/_segmented-bar.scss
@@ -1,3 +1,6 @@
 .segmented-bar {
     font-size: 13;
+    background-color: $background;
+    color: $primary;
+    selected-background-color: $accent;
 }
diff --git a/app/scss/_tabs.scss b/app/scss/_tabs.scss
@@ -1,3 +1,13 @@
 .tab-view {
-  color: $secondary;
+  /*color: $secondary;*/
+
+  // not supported but we want this
+  selected-color:$sky;
+  tabs-background-color:$background;
+
+  .tab-view-item {
+    // not supported but we want this
+    background-color: $background;
+    tabs-background-color: $background;
+  }
 }
diff --git a/app/scss/platforms/_buttons.android.scss b/app/scss/platforms/_buttons.android.scss
@@ -4,7 +4,6 @@
 }
 .btn-primary {
   border-color:rgba(255, 0, 0, 0.0);
-  border-width: 1;
 }
 .btn-outline {
   background-color: rgba(255, 0, 0, 0.0);

diff --git a/app/scss/platforms/_segmented-bar.android.scss b/app/scss/platforms/_segmented-bar.android.scss
@@ -1,3 +1,3 @@
 .segmented-bar{
-    color: $charcoal;
+
 }
diff --git a/app/scss/skins/dark/_action-bar.scss b/app/scss/skins/dark/_action-bar.scss
@@ -1,7 +1,9 @@
 .action-bar {
-  background-color:$background;
 
+  .action-title {
+    color: $primary;
+  }
   .action-item {
-    color: $white;
+    color: $primary;
   }
 }
diff --git a/app/scss/skins/dark/_spacing.scss b/app/scss/skins/dark/_spacing.scss
@@ -0,0 +1,3 @@
+.hr-dark {
+  background-color: $charcoal;
+}
diff --git a/app/scss/skins/dark/_variables.scss b/app/scss/skins/dark/_variables.scss
@@ -8,12 +8,13 @@
 // Colors
 $background: #303030;
 $primary: #fff;
-$secondary: lighten(#fff, 30%);
-$disabled: lighten(#fff, 50%);
-$accent: #30bcff;
+$secondary: darken($primary, 30%);
+$disabled: darken($primary, 50%);
+$accent: $sky;
 
 // ActionBar
 $ab-background: $background;
+$ab-color: $primary;
 
 // Headings
 $headings-color: $primary;

diff --git a/app/scss/skins/lemon/_action-bar.scss b/app/scss/skins/lemon/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
diff --git a/app/scss/skins/lemon/_index.scss b/app/scss/skins/lemon/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
diff --git a/app/scss/skins/light/_variables.scss b/app/scss/skins/light/_variables.scss
@@ -10,7 +10,7 @@ $background: #fff;
 $primary: lighten(#000, 13%);
 $secondary: lighten(#000, 46%);
 $disabled: lighten(#000, 62%);
-$accent: #30bcff;
+$accent: $sky;
 
 // SideDrawer
 $item-color-android : #737373;

diff --git a/app/scss/skins/lime/_action-bar.scss b/app/scss/skins/lime/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
diff --git a/app/scss/skins/lime/_index.scss b/app/scss/skins/lime/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
diff --git a/app/scss/skins/orange/_action-bar.scss b/app/scss/skins/orange/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
diff --git a/app/scss/skins/orange/_index.scss b/app/scss/skins/orange/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
diff --git a/app/scss/skins/purple/_action-bar.scss b/app/scss/skins/purple/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
diff --git a/app/scss/skins/purple/_index.scss b/app/scss/skins/purple/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
diff --git a/app/scss/skins/purple/_variables.scss b/app/scss/skins/purple/_variables.scss
@@ -10,7 +10,7 @@ $ab-background: $purple;
 $ab-color: $white;
 
 // Accent
-$accent: #30bcff;
+$accent: $sky;
 $item-active-color: $white;
 $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;

diff --git a/app/scss/skins/ruby/_variables.scss b/app/scss/skins/ruby/_variables.scss
@@ -16,7 +16,7 @@ $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;
 
 // Buttons
-$btn-color-inverse: $white;
+$btn-color-inverse: $charcoal;
 $btn-color: $accent;
 $btn-color-secondary: darken($btn-color, 10%);
 $btn-color-outline-highlighted: lighten($btn-color, 10%);
diff --git a/app/scss/skins/sky/_variables.scss b/app/scss/skins/sky/_variables.scss
@@ -6,7 +6,7 @@
  **/
 
 // ActionBar
-$ab-background: #30bcff;
+$ab-background: $sky;
 $ab-color: $white;
 
 // Accent
@@ -16,7 +16,7 @@ $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;
 
 // Buttons
-$btn-color-inverse: $white;
+$btn-color-inverse: $charcoal;
 $btn-color: $accent;
 $btn-color-secondary: darken($btn-color, 10%);
 $btn-color-outline-highlighted: lighten($btn-color, 10%);