From 6f72a70e92c04c1d09e757b115d91842d8040839 Mon Sep 17 00:00:00 2001
From: simongehrig <mail@simongehrig.de>
Date: Thu, 23 Feb 2017 12:30:27 +0100
Subject: [PATCH] Added the css Files to VCS

TODO Selector configuration for easier implementation
---
 examples/fx/camera/camera.css                 | 189 ++++++++++++++
 .../layout/menus/horizontal/horizontal.css    | 232 +++++++++++++++++
 examples/layout/menus/vertical/vertical.css   | 233 ++++++++++++++++++
 3 files changed, 654 insertions(+)
 create mode 100644 examples/fx/camera/camera.css
 create mode 100644 examples/layout/menus/horizontal/horizontal.css
 create mode 100644 examples/layout/menus/vertical/vertical.css

diff --git a/examples/fx/camera/camera.css b/examples/fx/camera/camera.css
new file mode 100644
index 0000000..c09f92d
--- /dev/null
+++ b/examples/fx/camera/camera.css
@@ -0,0 +1,189 @@
+/* Simons SCSS Framework */
+@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; }
+
+.content {
+  padding: 10px 0 0 20px;
+  background-color: #6ac88e;
+  border-bottom: solid 40px #c86350;
+  /* Absolute Positioning */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+  .content .wrap {
+    /*BASIC LAYOUT*/
+    /* Positioning */
+    position: relative;
+    display: inline-table;
+    /* Sizing */
+    box-sizing: border-box;
+    width: 25%;
+    /* Gutters */
+    margin: 0 -4px 0 0 !important;
+    padding: 0 20px 20px 0 !important;
+    border: none !important;
+    /* Typography */
+    letter-spacing: 0;
+    /* Remove last border */ }
+    .content .wrap:nth-of-type(4) {
+      border-right: none; }
+    .content .wrap > * {
+      /* Wrapper inside Element needed
+         because of gutter >* */
+      max-width: 100%;
+      box-sizing: border-box; }
+    .content .wrap .inner {
+      background-color: #ffffff;
+      padding: 20px 20px 40px 20px !important;
+      box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4); }
+      .content .wrap .inner .head {
+        font-family: sans-serif;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
+        padding: 10px 0;
+        color: #c86350; }
+      .content .wrap .inner .img-wrapper {
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden; }
+        .content .wrap .inner .img-wrapper img {
+          width: 100%; }
+    .content .wrap.focus {
+      /*FOCUS EFFECT*/ }
+      .content .wrap.focus .head {
+        /* Camera Focus Effect */
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.focus .head:hover {
+          -webkit-filter: blur(10px);
+                  filter: blur(10px); }
+      .content .wrap.focus img {
+        /* Camera Focus Effect */
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.focus img:hover {
+          -webkit-filter: blur(10px);
+                  filter: blur(10px); }
+    .content .wrap.zoom {
+      /*ZOOM EFFECT*/ }
+      .content .wrap.zoom .head {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.zoom .head:hover {
+          -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px);
+                  transform: rotate(0deg) scale(1.5) translate(0px, 0px); }
+      .content .wrap.zoom img {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.zoom img:hover {
+          -webkit-transform: rotate(0deg) scale(1.5) translate(0px, 0px);
+                  transform: rotate(0deg) scale(1.5) translate(0px, 0px); }
+    .content .wrap.shake {
+      /*SHAKE EFFECT*/ }
+      .content .wrap.shake .head {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.shake .head:hover {
+          -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px);
+                  transform: rotate(5deg) scale(1.5) translate(0px, 0px); }
+      .content .wrap.shake img {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+        -webkit-transition-timing-function: ease;
+                transition-timing-function: ease; }
+        .content .wrap.shake img:hover {
+          -webkit-transform: rotate(5deg) scale(1.5) translate(0px, 0px);
+                  transform: rotate(5deg) scale(1.5) translate(0px, 0px); }
+    .content .wrap.all {
+      /*ALL EFFECTS*/ }
+      .content .wrap.all .head {
+        /* Camera Focus Effect */
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 1s;
+                transition-duration: 1s; }
+        .content .wrap.all .head:hover {
+          -webkit-filter: blur(0.4px);
+                  filter: blur(0.4px); }
+      .content .wrap.all img {
+        /* Camera Focus Effect */
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 1s;
+                transition-duration: 1s; }
+        .content .wrap.all img:hover {
+          -webkit-filter: blur(0.5px);
+                  filter: blur(0.5px); }
+
+/*# sourceMappingURL=camera.css.map */
\ No newline at end of file
diff --git a/examples/layout/menus/horizontal/horizontal.css b/examples/layout/menus/horizontal/horizontal.css
new file mode 100644
index 0000000..028920d
--- /dev/null
+++ b/examples/layout/menus/horizontal/horizontal.css
@@ -0,0 +1,232 @@
+/* Simons SCSS Framework */
+@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; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    background-color: #806c80; }
+    body .header .nav li {
+      position: relative;
+      display: table-cell;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: 100%; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        display: none;
+        position: absolute;
+        width: 100%; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul {
+            position: absolute;
+            display: none;
+            left: 100%;
+            top: 0; }
+            body .header .nav li ul li ul li {
+              position: relative;
+              color: #d9ffd9; }
+              body .header .nav li ul li ul li a {
+                color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul {
+          display: block; }
+          body .header .nav li:hover ul li {
+            display: block;
+            color: #d9ffd9; }
+            body .header .nav li:hover ul li a {
+              color: #d9ffd9; }
+            body .header .nav li:hover ul li ul {
+              display: none; }
+            body .header .nav li:hover ul li:hover {
+              color: #6c8080; }
+              body .header .nav li:hover ul li:hover a {
+                color: #6c8080; }
+              body .header .nav li:hover ul li:hover ul {
+                display: block; }
+                body .header .nav li:hover ul li:hover ul li {
+                  color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li a {
+                    color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li:hover {
+                    color: #6c8080; }
+                    body .header .nav li:hover ul li:hover ul li:hover a {
+                      color: #6c8080; }
+      body .header .nav li:last-of-type ul li ul {
+        right: 100%;
+        left: auto; }
+
+/*# sourceMappingURL=horizontal.css.map */
\ No newline at end of file
diff --git a/examples/layout/menus/vertical/vertical.css b/examples/layout/menus/vertical/vertical.css
new file mode 100644
index 0000000..e839dc6
--- /dev/null
+++ b/examples/layout/menus/vertical/vertical.css
@@ -0,0 +1,233 @@
+/* Simons SCSS Framework */
+@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; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        display: none;
+        position: absolute;
+        width: 100%;
+        left: 100%;
+        top: 0; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul {
+            position: absolute;
+            display: none;
+            left: 100%;
+            top: 0; }
+            body .header .nav li ul li ul li {
+              position: relative;
+              color: #d9ffd9; }
+              body .header .nav li ul li ul li a {
+                color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul {
+          display: block; }
+          body .header .nav li:hover ul li {
+            display: block;
+            color: #d9ffd9; }
+            body .header .nav li:hover ul li a {
+              color: #d9ffd9; }
+            body .header .nav li:hover ul li ul {
+              display: none; }
+            body .header .nav li:hover ul li:hover {
+              color: #6c8080; }
+              body .header .nav li:hover ul li:hover a {
+                color: #6c8080; }
+              body .header .nav li:hover ul li:hover ul {
+                display: block; }
+                body .header .nav li:hover ul li:hover ul li {
+                  color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li a {
+                    color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li:hover {
+                    color: #6c8080; }
+                    body .header .nav li:hover ul li:hover ul li:hover a {
+                      color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.map */
\ No newline at end of file