Added Example for Camera FX

2017-02-20 08:37:43 +01:00
parent 8859405eef
commit 6d9ce3dacc
11 changed files with 233 additions and 142 deletions
@@ -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="/" />
@@ -0,0 +1,3 @@
+<component name="DependencyValidationManager">
+  <scope name="css.tmp" pattern="file:*.css.tmp" />
+</component>
@@ -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 />
@@ -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%;
-  }
-}
+@import "mixins/fx/camera";
@@ -1 +0,0 @@
-@import "../framework";
@@ -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>
@@ -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);
+      }
+    }
+  }
+}
@@ -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 */
@@ -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"}
@@ -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 (){}
+/// 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);
+}
@@ -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;
  }
				`@@ -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"}