Demo with all Material colors

framework7io · Jun 27, 2015 · f027cb7 · f027cb7
1 parent 0955f75
commit f027cb7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/kitchen-sink-material/color-themes.html b/kitchen-sink-material/color-themes.html
@@ -9,31 +9,44 @@
   </div>
   <div class="page-content">
     <div class="content-block">
-      <p>Framework7 comes with default 10 iOS color themes set and three layout color themes (default, dark and pure white):</p>
+      <p>Framework7 comes with 20 default Material color themes set and two layout color themes (default and dark):</p>
     </div>
     <div class="content-block-title">Choose Layout Theme</div>
     <div class="content-block">
       <div class="row">
-        <div data-layout="" class="col-33 ks-layout-theme ks-layout-default active"></div>
-        <div data-theme="dark" class="col-33 ks-layout-theme ks-layout-dark"></div>
-        <div data-theme="white" class="col-33 ks-layout-theme ks-layout-white"></div>
+        <div data-layout="" class="col-50 ks-layout-theme ks-layout-default active"></div>
+        <div data-theme="dark" class="col-50 ks-layout-theme ks-layout-dark"></div>
       </div>
     </div>
     <div class="content-block-title">Choose Color Theme</div>
     <div class="content-block">
       <div class="row">
-        <div data-theme="white" class="col-20 ks-color-theme bg-white"></div>
-        <div data-theme="black" class="col-20 ks-color-theme bg-black"></div>
-        <div data-theme="blue" class="col-20 ks-color-theme bg-blue"></div>
-        <div data-theme="orange" class="col-20 ks-color-theme bg-orange"></div>
         <div data-theme="red" class="col-20 ks-color-theme bg-red"></div>
+        <div data-theme="pink" class="col-20 ks-color-theme bg-pink"></div>
+        <div data-theme="purple" class="col-20 ks-color-theme bg-purple"></div>
+        <div data-theme="deeppurple" class="col-20 ks-color-theme bg-deeppurple"></div>
+        <div data-theme="indigo" class="col-20 ks-color-theme bg-indigo"></div>
       </div>
       <div class="row">
-        <div data-theme="pink" class="col-20 ks-color-theme bg-pink"></div>
-        <div data-theme="green" class="col-20 ks-color-theme bg-green"></div>
+        <div data-theme="blue" class="col-20 ks-color-theme bg-blue"></div>
         <div data-theme="lightblue" class="col-20 ks-color-theme bg-lightblue"></div>
+        <div data-theme="cyan" class="col-20 ks-color-theme bg-cyan"></div>
+        <div data-theme="teal" class="col-20 ks-color-theme bg-teal"></div>
+        <div data-theme="green" class="col-20 ks-color-theme bg-green"></div>
+      </div>
+      <div class="row">
+        <div data-theme="lightgreen" class="col-20 ks-color-theme bg-lightgreen"></div>
+        <div data-theme="lime" class="col-20 ks-color-theme bg-lime"></div>
         <div data-theme="yellow" class="col-20 ks-color-theme bg-yellow"></div>
+        <div data-theme="amber" class="col-20 ks-color-theme bg-amber"></div>
+        <div data-theme="orange" class="col-20 ks-color-theme bg-orange"></div>
+      </div>
+      <div class="row">
+        <div data-theme="deeporange" class="col-20 ks-color-theme bg-deeporange"></div>
+        <div data-theme="brown" class="col-20 ks-color-theme bg-brown"></div>
         <div data-theme="gray" class="col-20 ks-color-theme bg-gray"></div>
+        <div data-theme="bluegray" class="col-20 ks-color-theme bg-bluegray"></div>
+        <div data-theme="black" class="col-20 ks-color-theme bg-black"></div>
       </div>
     </div>
   </div>

diff --git a/kitchen-sink-material/jade/color-themes.jade b/kitchen-sink-material/jade/color-themes.jade
@@ -10,26 +10,39 @@
           i.icon.icon-bars
   .page-content
     .content-block
-      p Framework7 comes with default 10 iOS color themes set and three layout color themes (default, dark and pure white):
+      p Framework7 comes with 20 default Material color themes set and two layout color themes (default and dark):
     .content-block-title Choose Layout Theme
     .content-block
       .row
-        .col-33.ks-layout-theme.ks-layout-default.active(data-layout="")
-        .col-33.ks-layout-theme.ks-layout-dark(data-theme="dark")
-        .col-33.ks-layout-theme.ks-layout-white(data-theme="white")
+        .col-50.ks-layout-theme.ks-layout-default.active(data-layout="")
+        .col-50.ks-layout-theme.ks-layout-dark(data-theme="dark")
     .content-block-title Choose Color Theme
     .content-block
       .row
-        .col-20.ks-color-theme.bg-white(data-theme="white")
-        .col-20.ks-color-theme.bg-black(data-theme="black")
-        .col-20.ks-color-theme.bg-blue(data-theme="blue")
-        .col-20.ks-color-theme.bg-orange(data-theme="orange")
         .col-20.ks-color-theme.bg-red(data-theme="red")
-      .row
         .col-20.ks-color-theme.bg-pink(data-theme="pink")
-        .col-20.ks-color-theme.bg-green(data-theme="green")
+        .col-20.ks-color-theme.bg-purple(data-theme="purple")
+        .col-20.ks-color-theme.bg-deeppurple(data-theme="deeppurple")
+        .col-20.ks-color-theme.bg-indigo(data-theme="indigo")
+      .row
+        .col-20.ks-color-theme.bg-blue(data-theme="blue")
         .col-20.ks-color-theme.bg-lightblue(data-theme="lightblue")
+        .col-20.ks-color-theme.bg-cyan(data-theme="cyan")
+        .col-20.ks-color-theme.bg-teal(data-theme="teal")
+        .col-20.ks-color-theme.bg-green(data-theme="green")
+
+      .row
+        .col-20.ks-color-theme.bg-lightgreen(data-theme="lightgreen")
+        .col-20.ks-color-theme.bg-lime(data-theme="lime")
         .col-20.ks-color-theme.bg-yellow(data-theme="yellow")
+        .col-20.ks-color-theme.bg-amber(data-theme="amber")
+        .col-20.ks-color-theme.bg-orange(data-theme="orange")
+      .row
+        .col-20.ks-color-theme.bg-deeporange(data-theme="deeporange")
+        .col-20.ks-color-theme.bg-brown(data-theme="brown")
         .col-20.ks-color-theme.bg-gray(data-theme="gray")
+        .col-20.ks-color-theme.bg-bluegray(data-theme="bluegray")
+        .col-20.ks-color-theme.bg-black(data-theme="black")
+