From e70aeb7ca7968209076eaf97a0f3a5be52e45523 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Thu, 5 Nov 2015 12:48:32 -0600
Subject: [PATCH] docs(demos): refactor slides css

---
 demos/component-docs/app.scss                 | 57 +++++--------------
 demos/component-docs/slides/basic/pages.ts    |  2 +-
 .../component-docs/slides/basic/template.html |  8 +--
 demos/component-docs/slides/slides.scss       | 26 +++++++++
 4 files changed, 44 insertions(+), 49 deletions(-)
 create mode 100644 demos/component-docs/slides/slides.scss

diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index 0f671d9d58..e5c947e25b 100644
--- a/demos/component-docs/app.scss
+++ b/demos/component-docs/app.scss
@@ -7,9 +7,10 @@ $colors: (
   energized:  #ffc527,
   royal:      #7e60ff,
 );
-
 $font-path: '../../dist/fonts';
+
 @import "../../ionic/ionic";
+@import "slides/slides";
 
 
 body, body:hover, body a, body button, body media-switch {
@@ -20,6 +21,15 @@ body ion-app {
   overflow: visible;
 }
 
+ion-page {
+  display: flex;
+}
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
 body.has-scrollbar scroll-content {
   margin-right: -15px;
 }
@@ -27,30 +37,14 @@ body.has-scrollbar ion-menu scroll-content {
   margin-right: 0;
 }
 
-ion-page {
-  display: flex;
+scroll-content {
+  overflow-y: scroll;
 }
 
 section.hidden {
   display: none !important;
 }
 
-#ionitron {
-  width: 100px;
-  height: 100px;
-  position: absolute;
-  top: 25%;
-  margin-top: -50px;
-  left: 50%;
-  margin-left: -50px;
-}
-
-.animation-buttons {
-  position: absolute;
-  bottom: 25%; 
-  left: 60px; 
-  display: inline;
-}
 
 .components-demo h4 {
   text-align: center;
@@ -70,36 +64,11 @@ section.hidden {
   text-align: center;
 }
 
-ion-scroll {
-  width: 100%;
-  height: 100%;
-}
 
-.demo-slide {
-  display: block;
-  height: 100%;
-  padding: 500px 0;
-  width: 100%;
-  font-weight: bold;
-  font-size: 2.5em;
-  color: #fff;
-}
 
-.demo-slide-1 {
-  background-color: #32db64;
-}
 
-.demo-slide-2 {
-  background-color: #387ef5;
-}
 
-.demo-slide-3 {
-  background-color: #f53d3d;
-}
 
-scroll-content {
-  overflow-y: scroll;
-}
 
 .md .ion-md-share {
   color: #ED4248;
diff --git a/demos/component-docs/slides/basic/pages.ts b/demos/component-docs/slides/basic/pages.ts
index a4a3bfb775..276abcac8a 100644
--- a/demos/component-docs/slides/basic/pages.ts
+++ b/demos/component-docs/slides/basic/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-    templateUrl: 'slides/basic/slides.html',
+    templateUrl: 'slides/basic/template.html',
     directives: [forwardRef(() => AndroidAttribute)]
 })
 export class BasicPage {
diff --git a/demos/component-docs/slides/basic/template.html b/demos/component-docs/slides/basic/template.html
index 45b2d45089..c46aaeca1f 100644
--- a/demos/component-docs/slides/basic/template.html
+++ b/demos/component-docs/slides/basic/template.html
@@ -3,20 +3,20 @@
   <ion-title>Slides</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header">
+<ion-content class="has-header preview-slides">
     <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
        <ion-slide>
-         <div class="demo-slide demo-slide-1">
+         <div class="slide-contents" id="slide-1">
            Slide 1
          </div>
        </ion-slide>
        <ion-slide>
-         <div class="demo-slide demo-slide-2">
+         <div class="slide-contents" id="slide-2">
            Slide 2
          </div>
        </ion-slide>
        <ion-slide>
-         <div class="demo-slide demo-slide-3">
+         <div class="slide-contents" id="slide-3">
            Slide 3
          </div>
        </ion-slide>
diff --git a/demos/component-docs/slides/slides.scss b/demos/component-docs/slides/slides.scss
new file mode 100644
index 0000000000..1105e097e0
--- /dev/null
+++ b/demos/component-docs/slides/slides.scss
@@ -0,0 +1,26 @@
+.preview-slides {
+
+    .slide-contents {
+      display: block;
+      height: 100%;
+      padding: 500px 0;
+      width: 100%;
+      font-weight: bold;
+      font-size: 2.5em;
+      color: #fff;
+    }
+
+    #slide-1 {
+      background-color: #32db64;
+    }
+
+    #slide-2 {
+      background-color: #387ef5;
+    }
+
+    #slide-3 {
+      background-color: #f53d3d;
+    }
+
+}
+