From 6d9ce3dacc4dade0e576b1263fe21444514e82de Mon Sep 17 00:00:00 2001
From: Simon Gehrig <simongehrig@192.168.100.78>
Date: Mon, 20 Feb 2017 08:37:43 +0100
Subject: [PATCH] Added Example for Camera FX

---
 .idea/deployment.xml              |  16 ++++-
 .idea/scopes/css_tmp.xml          |   3 +
 .idea/watcherTasks.xml            |   6 +-
 framework.scss => _framework.scss |  21 ++-----
 examples/example.scss             |   1 -
 examples/fx/camera/camera.html    |  43 +++++++++++++
 examples/fx/camera/camera.scss    |  79 +++++++++++++++++++++++
 framework.css                     | 100 ------------------------------
 framework.css.map                 |   1 -
 mixins/fx/_camera.scss            |  89 ++++++++++++++++++++++----
 mixins/layout/_layout.scss        |  16 +++--
 11 files changed, 233 insertions(+), 142 deletions(-)
 create mode 100644 .idea/scopes/css_tmp.xml
 rename framework.scss => _framework.scss (54%)
 delete mode 100644 examples/example.scss
 create mode 100644 examples/fx/camera/camera.html
 create mode 100644 examples/fx/camera/camera.scss
 delete mode 100644 framework.css
 delete mode 100644 framework.css.map

diff --git a/.idea/deployment.xml b/.idea/deployment.xml
index a734dd6..464905a 100644
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -2,7 +2,21 @@
 <project version="4">
   <component name="PublishConfigData">
     <serverData>
-      <paths name="lisanahartl.de">
+      <paths name="SELFOMAT Server">
+        <serverdata>
+          <mappings>
+            <mapping local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
+      <paths name="selfom.at (production)">
+        <serverdata>
+          <mappings>
+            <mapping local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
+      <paths name="selfom.at (website)">
         <serverdata>
           <mappings>
             <mapping local="$PROJECT_DIR$" web="/" />
diff --git a/.idea/scopes/css_tmp.xml b/.idea/scopes/css_tmp.xml
new file mode 100644
index 0000000..82ea35f
--- /dev/null
+++ b/.idea/scopes/css_tmp.xml
@@ -0,0 +1,3 @@
+<component name="DependencyValidationManager">
+  <scope name="css.tmp" pattern="file:*.css.tmp" />
+</component>
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index a4a3a26..bc4c548 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -21,8 +21,8 @@
       <envs />
     </TaskOptions>
     <TaskOptions isEnabled="true">
-      <option name="arguments" value="--use autoprefixer $FileName$ -o $FileNameWithoutExtension$" />
-      <option name="checkSyntaxErrors" value="true" />
+      <option name="arguments" value="$FileName$ --use autoprefixer -o $FileNameWithoutExtension$" />
+      <option name="checkSyntaxErrors" value="false" />
       <option name="description" value="" />
       <option name="exitCodeBehavior" value="ERROR" />
       <option name="fileExtension" value="*" />
@@ -34,7 +34,7 @@
       </option>
       <option name="outputFromStdout" value="false" />
       <option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" />
-      <option name="scopeName" value="css.tpm" />
+      <option name="scopeName" value="css.tmp" />
       <option name="trackOnlyRoot" value="false" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
diff --git a/framework.scss b/_framework.scss
similarity index 54%
rename from framework.scss
rename to _framework.scss
index eedec80..90ce5ef 100644
--- a/framework.scss
+++ b/_framework.scss
@@ -1,26 +1,15 @@
 
 /* Simons SCSS Framework */
+
 /* Basic CSS Functions */
 @import "mixins/css/reset";
 @import "mixins/css/filters";
+
 /* Layout */
 @import "mixins/layout/layout";
+
 /* Queries */
 @import "mixins/queries/media-queries";
+
 /* FX / Effects */
-@import "mixins/fx/camera";
-
-
-/* Manual Test Content */
-body {
-  filter: blur(10px);
-  @include blur(10);
-
-  &:fullscreen a {
-    display: flex;
-  }
-  a {
-    transform: scale(1.1);
-    width:99%;
-  }
-}
\ No newline at end of file
+@import "mixins/fx/camera";
\ No newline at end of file
diff --git a/examples/example.scss b/examples/example.scss
deleted file mode 100644
index e782d14..0000000
--- a/examples/example.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../framework";
\ No newline at end of file
diff --git a/examples/fx/camera/camera.html b/examples/fx/camera/camera.html
new file mode 100644
index 0000000..089c127
--- /dev/null
+++ b/examples/fx/camera/camera.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Camera</title>
+    <link type="text/css" rel="stylesheet" href="./camera.css">
+</head>
+<body>
+<div>
+    <div class="content">
+
+        <div class="wrap focus">
+            <div class="inner">
+                <p class="head">Off-Focus</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap zoom">
+            <div class="inner">
+                <p class="head">Zoom</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap shake">
+            <div class="inner">
+                <p class="head">Shake</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+        <div class="wrap all">
+            <div class="inner">
+                <p class="head">None</p>
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/fx/camera/camera.scss b/examples/fx/camera/camera.scss
new file mode 100644
index 0000000..05bc575
--- /dev/null
+++ b/examples/fx/camera/camera.scss
@@ -0,0 +1,79 @@
+@import "../../../_framework";
+
+.content {
+  padding: 10px 0 0 20px;
+  background-color: #6ac88e;
+  border-bottom: solid 40px #c86350;
+
+  .wrap {
+    /*BASIC LAYOUT*/
+    @include cols(4, 20);
+
+    .inner {
+
+      .head {
+        font-family: sans-serif;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
+        padding: 10px 0;
+        color: #c86350;
+      }
+
+      .img-wrapper {
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+        border: solid thick #c86350;
+
+        img {
+          width:100%; // make sure thins dont get wider than the parent cols element
+        }
+      }
+    }
+
+    &.focus {
+      /*FOCUS EFFECT*/
+      .head {
+        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
+      }
+    }
+
+    &.zoom {
+      /*ZOOM EFFECT*/
+      .head {
+        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
+      }
+    }
+
+    &.shake {
+      /*SHAKE EFFECT*/
+      .head {
+        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
+      }
+
+      img {
+        @include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
+      }
+    }
+
+    &.all {
+      /*ALL EFFECTS*/
+      .head {
+        @include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
+      }
+
+      img {
+        @include camera-focus($FOCUS-IN, 0.5, 10, $EASE);
+      }
+    }
+  }
+}
diff --git a/framework.css b/framework.css
deleted file mode 100644
index 255f47b..0000000
--- a/framework.css
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Simons SCSS Framework */
-/* Basic CSS Functions */
-@CHARSET "ISO-8859-1";
-/* RESET
-
-  SOURCE:
-   http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-
-*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline; }
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block; }
-
-ol, ul {
-  list-style: none; }
-
-blockquote, q {
-  quotes: none; }
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none; }
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0 !important; }
-
-/* Layout */
-/* Queries */
-/*
-
-CONSTANTS
-
-*/
-/*
-
-Widths
-
-*/
-/*
-
-Queries
-
-*/
-/*
-
-QUERY-BUILDER
-
-*/
-/* FX / Effects */
-/* CONSTANTS */
-/* MIXINS */
-/* Manual Test Content */
-body {
-  -webkit-filter: blur(10px);
-          filter: blur(10px);
-  -webkit-filter: blur(10);
-          filter: blur(10); }
-  body:-webkit-full-screen a {
-    display: -webkit-box;
-    display: flex; }
-  body:-moz-full-screen a {
-    display: flex; }
-  body:-ms-fullscreen a {
-    display: -ms-flexbox;
-    display: flex; }
-  body:fullscreen a {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex; }
-  body a {
-    -webkit-transform: scale(1.1);
-            transform: scale(1.1);
-    width: 99%; }
-
-/*# sourceMappingURL=framework.css.map */
\ No newline at end of file
diff --git a/framework.css.map b/framework.css.map
deleted file mode 100644
index bbc9b41..0000000
--- a/framework.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["framework.scss","mixins/css/_reset.scss","mixins/queries/_media-queries.scss","mixins/fx/_camera.scss","mixins/css/_filters.scss"],"names":[],"mappings":"AACA,2BAA2B;AAC3B,yBAAyB;ACFzB,sBAAqB;AAErB;;;;;;;EAOE;AAEF;;;;;;;;;;;;;EAaE,UAAS;EACT,WAAU;EACV,UAAS;EACT,gBAAe;EACf,cAAa;EACb,yBAAwB,EAAA;;AAG1B,iDAAiD;AACjD;;EAEE,eAAc,EAAA;;AAGhB;EACE,iBAAgB,EAAA;;AAGlB;EACE,aAAY,EAAA;;AAGd;;EAEE,YAAW;EACX,cAAa,EAAA;;AAGf;EACE,0BAAyB;EACzB,6BAA4B,EAAA;;ADjD9B,YAAY;AAEZ,aAAa;AEPb;;;;EAIE;AAMF;;;;EAIE;AAOF;;;;EAIE;AAsCF;;;;EAIE;AF1DF,kBAAkB;AGTlB,eAAe;AAaf,YAAY;AHAZ,yBAAyB;AACzB;EACE,2BAAkB;UAAlB,mBAAkB;EIdlB,yBAAoB;UAApB,iBAAoB,EAAA;EJiBpB;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,qBAAa;IAAb,cAAa,EAAA;EAEf;IACE,8BAAqB;YAArB,sBAAqB;IACrB,WAAS,EAAA","file":"framework.css"}
\ No newline at end of file
diff --git a/mixins/fx/_camera.scss b/mixins/fx/_camera.scss
index 882dd94..11925ce 100644
--- a/mixins/fx/_camera.scss
+++ b/mixins/fx/_camera.scss
@@ -6,23 +6,90 @@ $ZOOM-OUT: 1;
 $FOCUS-IN: 0;
 $FOCUS-OUT: 1;
 
-$LINEAR:0;
-$EASE:1;
-$EASEINOUT:2;
-$BACKWARD:3;
+$LINEAR: 0;
+$EASE: 1;
+$EASEINOUT: 2;
+$BACKWARD: 3;
 
 /* MIXINS */
 
 /// Gives the Element a focusing Effect
 /// @param {int} $direction
-/// @param {int} $direction
-/// @param {int} $direction
-
-@mixin camera-focus($direction,$seconds:0.5,$pixels:10,$performance:0) {
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-focus(
+  $direction:1,
+  $pixels:10,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
   /* Camera Focus Effect */
-  filter: blur($pixels);
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    filter: blur($pixels+px);
 
+  }
 }
-@mixin camera-shake (){}
 
-@mixin camera-zoom (){}
\ No newline at end of file
+/// Gives the Element a shake Effect
+/// @param {int} $direction
+/// Degrees
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-shake(
+  $rotate:10,
+  $scale:1.1,
+  $x:10,
+  $y:10,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    @include transform($rotate, $scale, $x, $y);
+  }
+}
+
+/// Gives the Element a zoom Effect
+/// @param {int} $direction
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-zoom(
+  $direction:1,
+  $scale:1.2,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    @include transform(0, $scale, 0, 0)
+  }
+}
+
+@mixin performance($perform) {
+  @if ($perform == 0) {
+    transition-timing-function: linear;
+  } @else if ($perform == 1) {
+    transition-timing-function: ease;
+  } @else if ($perform == 2) {
+    transition-timing-function: ease-in-out;
+  } @else if ($perform == 3) {
+    transition-timing-function: cubic-bezier(0.68, - 0.55, 0.27, 1.55);
+  }
+}
+
+@mixin transform($rotation:0,$scale:1,$x:0,$y:0) {
+  transform: rotate($rotation+deg) scale($scale) translate($x+px, $y+px);
+}
\ No newline at end of file
diff --git a/mixins/layout/_layout.scss b/mixins/layout/_layout.scss
index 5d033d8..e55249d 100644
--- a/mixins/layout/_layout.scss
+++ b/mixins/layout/_layout.scss
@@ -5,22 +5,20 @@
   /* Positioning */
   position: relative;
   display: inline-table;
+
   /* Sizing */
   box-sizing: border-box;
-  //width: (100%/$columns) - (0.3 + ($columns * 0.3));
   width: (100%/$columns);
+
+  /* Gutters */
   margin: 0 -4px 0 0 !important;
-  padding: 0 !important;
+  padding: 0 $gutter+px $gutter+px 0 !important;
   border: none !important;
 
+  /* Typography */
   letter-spacing: 0;
-  /* Gutter */
-  padding-right: $gutter !important;
-  padding-bottom: $gutter !important;
-  &:before {
-  }
-  &:after {
-  }
+
+  /* Remove last border */
   &:nth-of-type(#{$columns}) {
     border-right: none;
   }