From dddeed8e8faf0aef4ea774c9ab89190553c80025 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 8 Oct 2016 11:10:40 +0900
Subject: [PATCH] Split up themes into separate files

---
 stylesheets/_android.scss               | 69 +++++++++++++++++++++
 stylesheets/{_themes.scss => _ios.scss} | 79 -------------------------
 stylesheets/_mixins.scss                |  8 +++
 stylesheets/manifest.scss               |  3 +-
 4 files changed, 79 insertions(+), 80 deletions(-)
 create mode 100644 stylesheets/_android.scss
 rename stylesheets/{_themes.scss => _ios.scss} (67%)

diff --git a/stylesheets/_android.scss b/stylesheets/_android.scss
new file mode 100644
index 00000000..20d7b8d4
--- /dev/null
+++ b/stylesheets/_android.scss
@@ -0,0 +1,69 @@
+.android {
+  #header {
+    background-color: $blue;
+    color: white;
+    transition: background-color 0.5s;
+
+    &.inactive {
+      background-color: $grey_l;
+      color: $grey_d;
+    }
+  }
+  .contact-details .name {
+    font-weight: 400;
+  }
+  .conversation.placeholder .conversation-header {
+    display: none;
+  }
+  .conversation-header, .bubble {
+    @include avatar-colors;
+  }
+  .bottom-bar {
+    min-height: 10px;
+  }
+  .bubble {
+    padding: 9px 12px;
+    border-radius: $border-radius;
+    box-shadow: 0 3px 3px -4px black;
+  }
+
+  .outgoing .bubble {
+    background-color: $grey_l;
+  }
+  .outgoing .hourglass {
+    @include hourglass(#999);
+  }
+  .incoming .hourglass {
+    @include hourglass(#fff);
+  }
+
+  .incoming .bubble {
+    .sender, .content, .body, .meta, a {
+      @include invert-text-color;
+    }
+    .attachments, .content {
+      a {
+        color: $grey_l;
+      }
+    }
+  }
+  button.clock {
+    @include header-icon-white('/images/clock.svg');
+  }
+  .inactive button.clock {
+    @include header-icon-black('/images/clock.svg');
+  }
+  button.hamburger {
+    @include header-icon-white('/images/menu.svg');
+  }
+  .inactive button.hamburger {
+    @include header-icon-black('/images/menu.svg');
+  }
+  button.back {
+    @include header-icon-white('/images/back.svg');
+  }
+  .inactive button.back {
+    @include header-icon-black('/images/back.svg');
+  }
+}
+
diff --git a/stylesheets/_themes.scss b/stylesheets/_ios.scss
similarity index 67%
rename from stylesheets/_themes.scss
rename to stylesheets/_ios.scss
index de021615..b6201914 100644
--- a/stylesheets/_themes.scss
+++ b/stylesheets/_ios.scss
@@ -1,12 +1,3 @@
-@mixin invert-text-color {
-  color: white;
-
-  &::selection {
-    background: white;
-    color: $grey_d;
-  }
-}
-
 $ios-header-border-color: rgba(0,0,0,0.05);
 $ios-border-color: rgba(0,0,0,0.1);
 
@@ -168,73 +159,3 @@ $ios-border-color: rgba(0,0,0,0.1);
     @include hourglass(#999);
   }
 }
-
-.android {
-  #header {
-    background-color: $blue;
-    color: white;
-    transition: background-color 0.5s;
-
-    &.inactive {
-      background-color: $grey_l;
-      color: $grey_d;
-    }
-  }
-  .contact-details .name {
-    font-weight: 400;
-  }
-  .conversation.placeholder .conversation-header {
-    display: none;
-  }
-  .conversation-header, .bubble {
-    @include avatar-colors;
-  }
-  .bottom-bar {
-    min-height: 10px;
-  }
-  .bubble {
-    padding: 9px 12px;
-    border-radius: $border-radius;
-    box-shadow: 0 3px 3px -4px black;
-  }
-
-  .outgoing .bubble {
-    background-color: $grey_l;
-  }
-  .outgoing .hourglass {
-    @include hourglass(#999);
-  }
-  .incoming .hourglass {
-    @include hourglass(#fff);
-  }
-
-  .incoming .bubble {
-    .sender, .content, .body, .meta, a {
-      @include invert-text-color;
-    }
-    .attachments, .content {
-      a {
-        color: $grey_l;
-      }
-    }
-  }
-  button.clock {
-    @include header-icon-white('/images/clock.svg');
-  }
-  .inactive button.clock {
-    @include header-icon-black('/images/clock.svg');
-  }
-  button.hamburger {
-    @include header-icon-white('/images/menu.svg');
-  }
-  .inactive button.hamburger {
-    @include header-icon-black('/images/menu.svg');
-  }
-  button.back {
-    @include header-icon-white('/images/back.svg');
-  }
-  .inactive button.back {
-    @include header-icon-black('/images/back.svg');
-  }
-}
-
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 0081442f..364c052d 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -34,3 +34,11 @@
   &.grey        { background-color: #999999               ; }
   &.default     { background-color: $blue                 ; }
 }
+@mixin invert-text-color {
+  color: white;
+
+  &::selection {
+    background: white;
+    color: $grey_d;
+  }
+}
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index f1ffb126..24b36f59 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -16,4 +16,5 @@
 // Build the main view
   @import 'index';
   @import 'conversation';
-  @import 'themes';
+  @import 'ios';
+  @import 'android';