refactor assets and switch to VHS assets viewhelpers

ot_templating/Configuration/TypoScript/setup.txt

@@ -128,25 +128,6 @@ page.meta {
      viewport = width=device-width
 }
 
-page.includeCSS {
-    fontAwesome = {$publicRootPath}assets/style/ext/font-awesome/css/all.css
-    slick = {$publicRootPath}assets/style/ext/slick.css
-    slick-theme = {$publicRootPath}assets/style/ext/slick-theme.css
-    datepicker = {$publicRootPath}assets/style/ext/jquery-ui.css
-    leaflet = {$publicRootPath}assets/style/ext/leaflet.css
-}
-
-page.includeJS {
-    jquery = {$publicRootPath}assets/script/jquery-3.4.1.min.js
-    datepicker = {$publicRootPath}assets/script/jquery-ui.js
-    slick = {$publicRootPath}assets/script/slick.min.js
-    leaflet = {$publicRootPath}assets/script/leaflet.js
-    main = {$publicRootPath}assets/script/main.js
-}
-
-page.includeJSFooter {
-}
-
 plugin.tx_ottemplating {
     view {
         templateRootPaths.0 = {$templateRootPath}

ot_templating/Resources/Private/Partials/Assets.html

@@ -1,16 +1,48 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 
-<f:comment><!-- Assets included with the VHS viewhelper --></f:comment>
-
-<f:if condition="{settings.themeColor}">
-    <f:then>
-        <v:asset.style name="theme"
-                       path="EXT:ot_templating/Resources/Public/assets/style/theme-{settings.themeColor}.css"
-                       debug="0"/>
-    </f:then>
-    <f:else>
-        <v:asset.style name="theme"
-                       path="EXT:ot_templating/Resources/Public/assets/style/theme-light-blue.css"
-                       debug="0"/>
-    </f:else>
-</f:if>
+<f:comment><!-- Assets included with the VHS viewhelpers
+
+/!\ Warning: assets'names shall be uniques, even among styles and scripts viewhelpers!
+--></f:comment>
+
+<f:comment><!-- Style assets --></f:comment>
+<v:asset.style name="fontAwesome"
+               path="EXT:ot_templating/Resources/Public/assets/style/ext/font-awesome/css/all.css"/>
+
+<v:asset.style name="slick-css"
+               path="EXT:ot_templating/Resources/Public/assets/style/ext/slick.css"/>
+
+<v:asset.style name="slick-theme"
+               path="EXT:ot_templating/Resources/Public/assets/style/ext/slick-theme.css"/>
+
+<f:comment><!-- Leaflet's path shall not be rewritten since
+                it won't find the images files anymore --></f:comment>
+<v:asset.style name="leaflet-css"
+               path="EXT:ot_templating/Resources/Public/assets/style/ext/leaflet.css"
+               rewrite="0"
+               standalone="1"/>
+
+<v:asset.style name="theme"
+               path="EXT:ot_templating/Resources/Public/assets/style/theme-{f:if(condition: settings.themeColor, then: settings.themeColor, else: 'light-blue')}.css"
+               dependencies="fontAwesome,slick,slick-theme,leaflet"
+               standalone="1"/>
+
+<f:comment><!-- Script assets --></f:comment>
+<v:asset.script name="jquery"
+                path="EXT:ot_templating/Resources/Public/assets/script/jquery-3.4.1.min.js"/>
+
+<v:asset.script name="datepicker"
+                path="EXT:ot_templating/Resources/Public/assets/script/jquery-ui.js"/>
+
+<v:asset.script name="slick"
+                path="EXT:ot_templating/Resources/Public/assets/script/slick.min.js"
+                dependencies="jquery"/>
+
+<v:asset.script name="leaflet"
+                path="EXT:ot_templating/Resources/Public/assets/script/leaflet.js"/>
+
+<v:asset.script name="main"
+                path="EXT:ot_templating/Resources/Public/assets/script/main.js"
+                dependencies="jquery,datepicker,slick,leaflet"
+                standalone="1"/>
+

ot_templating/Resources/Public/assets/script/api.js

@@ -1,23 +0,0 @@
-
-
-$(document).ready(function() {
-
-    // var api_base_url = 'http://api.opentalent.fr/api/';
-    var api_base_url = 'http://local.api.opentalent.fr/api/';
-    var api_public_url = api_base_url + 'public/';
-
-    // next events
-    // var next_events_section = $('div.next-events');
-    // if (next_events_section.length !== 0) {
-    //     var structureId = next_events_section.data('structureId');
-    //     $.ajax({
-    //         method: "GET",
-    //         url: api_public_url + "events",
-    //         data: { organizationId: structureId },
-    //     })
-    //     .done(function( msg ) {
-    //         console.log( msg );
-    //     });
-    // }
-
-});

ot_templating/Resources/Public/assets/style/ext/slick-theme.css

@@ -1,204 +1,154 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 /* Slider */
-.slick-loading .slick-list
-{
-    background: #fff url('./ajax-loader.gif') center center no-repeat;
+.slick-loading .slick-list {
+  background: #fff url("./ajax-loader.gif") center center no-repeat;
 }
 
 /* Icons */
-@font-face
-{
-    font-family: 'slick';
-    font-weight: normal;
-    font-style: normal;
-
-    src: url('./fonts/slick.eot');
-    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+@font-face {
+  font-family: "slick";
+  src: url("./fonts/slick.eot");
+  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
+  font-weight: normal;
+  font-style: normal;
 }
 /* Arrows */
 .slick-prev,
-.slick-next
-{
-    font-size: 0;
-    line-height: 0;
-
-    position: absolute;
-    top: 50%;
-
-    display: block;
-
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    -webkit-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%);
-
-    cursor: pointer;
-
-    color: transparent;
-    border: none;
-    outline: none;
-    background: transparent;
-}
-.slick-prev:hover,
-.slick-prev:focus,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0px;
+  font-size: 0px;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.slick-prev:hover, .slick-prev:focus,
 .slick-next:hover,
-.slick-next:focus
-{
-    color: transparent;
-    outline: none;
-    background: transparent;
-}
-.slick-prev:hover:before,
-.slick-prev:focus:before,
+.slick-next:focus {
+  outline: none;
+  background: transparent;
+  color: transparent;
+}
+.slick-prev:hover:before, .slick-prev:focus:before,
 .slick-next:hover:before,
-.slick-next:focus:before
-{
-    opacity: 1;
+.slick-next:focus:before {
+  opacity: 1;
 }
 .slick-prev.slick-disabled:before,
-.slick-next.slick-disabled:before
-{
-    opacity: .25;
+.slick-next.slick-disabled:before {
+  opacity: 0.25;
 }
-
 .slick-prev:before,
-.slick-next:before
-{
-    font-family: 'slick';
-    font-size: 20px;
-    line-height: 1;
-
-    opacity: .75;
-    color: white;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+.slick-next:before {
+  font-family: "slick";
+  font-size: 20px;
+  line-height: 1;
+  color: white;
+  opacity: 0.75;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.slick-prev
-{
-    left: -25px;
+.slick-prev {
+  left: -25px;
 }
-[dir='rtl'] .slick-prev
-{
-    right: -25px;
-    left: auto;
+[dir=rtl] .slick-prev {
+  left: auto;
+  right: -25px;
 }
-.slick-prev:before
-{
-    content: '←';
+.slick-prev:before {
+  content: "←";
 }
-[dir='rtl'] .slick-prev:before
-{
-    content: '→';
+[dir=rtl] .slick-prev:before {
+  content: "→";
 }
 
-.slick-next
-{
-    right: -25px;
+.slick-next {
+  right: -25px;
 }
-[dir='rtl'] .slick-next
-{
-    right: auto;
-    left: -25px;
+[dir=rtl] .slick-next {
+  left: -25px;
+  right: auto;
 }
-.slick-next:before
-{
-    content: '→';
+.slick-next:before {
+  content: "→";
 }
-[dir='rtl'] .slick-next:before
-{
-    content: '←';
+[dir=rtl] .slick-next:before {
+  content: "←";
 }
 
 /* Dots */
-.slick-dotted.slick-slider
-{
-    margin-bottom: 30px;
-}
-
-.slick-dots
-{
-    position: absolute;
-    bottom: -25px;
-
-    display: block;
-
-    width: 100%;
-    padding: 0;
-    margin: 0;
-
-    list-style: none;
-
-    text-align: center;
-}
-.slick-dots li
-{
-    position: relative;
-
-    display: inline-block;
-
-    width: 20px;
-    height: 20px;
-    margin: 0 5px;
-    padding: 0;
-
-    cursor: pointer;
-}
-.slick-dots li button
-{
-    font-size: 0;
-    line-height: 0;
-
-    display: block;
-
-    width: 20px;
-    height: 20px;
-    padding: 5px;
-
-    cursor: pointer;
-
-    color: transparent;
-    border: 0;
-    outline: none;
-    background: transparent;
-}
-.slick-dots li button:hover,
-.slick-dots li button:focus
-{
-    outline: none;
-}
-.slick-dots li button:hover:before,
-.slick-dots li button:focus:before
-{
-    opacity: 1;
-}
-.slick-dots li button:before
-{
-    font-family: 'slick';
-    font-size: 6px;
-    line-height: 20px;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 20px;
-    height: 20px;
-
-    content: '•';
-    text-align: center;
-
-    opacity: .25;
-    color: black;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-.slick-dots li.slick-active button:before
-{
-    opacity: .75;
-    color: black;
-}
+.slick-dotted.slick-slider {
+  margin-bottom: 30px;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+  list-style: none;
+  display: block;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  margin: 0 5px;
+  padding: 0;
+  cursor: pointer;
+}
+.slick-dots li button {
+  border: 0;
+  background: transparent;
+  display: block;
+  height: 20px;
+  width: 20px;
+  outline: none;
+  line-height: 0px;
+  font-size: 0px;
+  color: transparent;
+  padding: 5px;
+  cursor: pointer;
+}
+.slick-dots li button:hover, .slick-dots li button:focus {
+  outline: none;
+}
+.slick-dots li button:hover:before, .slick-dots li button:focus:before {
+  opacity: 1;
+}
+.slick-dots li button:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "•";
+  width: 20px;
+  height: 20px;
+  font-family: "slick";
+  font-size: 6px;
+  line-height: 20px;
+  text-align: center;
+  color: black;
+  opacity: 0.25;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before {
+  color: black;
+  opacity: 0.75;
+}
+
+/*# sourceMappingURL=slick-theme.css.map */

ot_templating/Resources/Public/assets/style/ext/slick-theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["slick-theme.scss"],"names":[],"mappings":";AAyCA;AAGI;EACI;;;AAIR;AAEI;EACI;EACA;EACA;EACA;EACA;;AAIR;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EACI;EACA;EACA;;AACA;AAAA;AAAA;EACI,SAjEa;;AAoErB;AAAA;EACI,SApEmB;;AAsEvB;AAAA;EACI,aAlFY;EAmFZ;EACA;EACA,OAnFY;EAoFZ,SA7EgB;EA8EhB;EACA;;;AAIR;EACI;;AACA;EACI;EACA;;AAEJ;EACI,SA9Fe;;AA+Ff;EACI,SA/FW;;;AAoGvB;EACI;;AACA;EACI;EACA;;AAEJ;EACI,SA3Ge;;AA4Gf;EACI,SA9GW;;;AAmHvB;AAEA;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI,SApJK;;AAuJb;EACI;EACA;EACA;EACA,SA9JM;EA+JN;EACA;EACA,aAxKI;EAyKJ,WAjKC;EAkKD;EACA;EACA,OAzKE;EA0KF,SAlKW;EAmKX;EACA;;AAGR;EACI,OAhLM;EAiLN,SA3KY","file":"slick-theme.css"}

ot_templating/Resources/Public/assets/style/ext/slick-theme.scss

@@ -0,0 +1,194 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: white !default;
+$slick-dot-color: black !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 6px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+    @if function-exists(image-url) {
+        @return image-url($url);
+    }
+    @else {
+        @return url($slick-loader-path + $url);
+    }
+}
+
+@function slick-font-url($url) {
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else {
+        @return url($slick-font-path + $url);
+    }
+}
+
+/* Slider */
+
+.slick-list {
+    .slick-loading & {
+        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+    }
+}
+
+/* Icons */
+@if $slick-font-family == "slick" {
+    @font-face {
+        font-family: "slick";
+        src: slick-font-url("slick.eot");
+        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: $slick-opacity-not-active;
+    }
+    &:before {
+        font-family: $slick-font-family;
+        font-size: 20px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: $slick-prev-character;
+        [dir="rtl"] & {
+            content: $slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: $slick-next-character;
+        [dir="rtl"] & {
+            content: $slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: $slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: $slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: $slick-font-family;
+                font-size: $slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: $slick-dot-color;
+                opacity: $slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: $slick-dot-color-active;
+            opacity: $slick-opacity-default;
+        }
+    }
+}

ot_templating/Resources/Public/assets/style/ext/slick.css

@@ -1,119 +1,94 @@
 /* Slider */
-.slick-slider
-{
-    position: relative;
-
-    display: block;
-    box-sizing: border-box;
-
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-    -webkit-touch-callout: none;
-    -khtml-user-select: none;
-    -ms-touch-action: pan-y;
-        touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent;
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.slick-list
-{
-    position: relative;
-
-    display: block;
-    overflow: hidden;
-
-    margin: 0;
-    padding: 0;
+.slick-list {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  padding: 0;
 }
-.slick-list:focus
-{
-    outline: none;
+.slick-list:focus {
+  outline: none;
 }
-.slick-list.dragging
-{
-    cursor: pointer;
-    cursor: hand;
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
 }
 
 .slick-slider .slick-track,
-.slick-slider .slick-list
-{
-    -webkit-transform: translate3d(0, 0, 0);
-       -moz-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-         -o-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
-.slick-track
-{
-    position: relative;
-    top: 0;
-    left: 0;
-
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-.slick-track:before,
-.slick-track:after
-{
-    display: table;
-
-    content: '';
+.slick-track {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
-.slick-track:after
-{
-    clear: both;
+.slick-track:before, .slick-track:after {
+  content: "";
+  display: table;
 }
-.slick-loading .slick-track
-{
-    visibility: hidden;
+.slick-track:after {
+  clear: both;
+}
+.slick-loading .slick-track {
+  visibility: hidden;
 }
 
-.slick-slide
-{
-    display: none;
-    float: left;
-
-    height: 100%;
-    min-height: 1px;
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none;
 }
-[dir='rtl'] .slick-slide
-{
-    float: right;
+[dir=rtl] .slick-slide {
+  float: right;
 }
-.slick-slide img
-{
-    display: block;
+.slick-slide img {
+  display: block;
 }
-.slick-slide.slick-loading img
-{
-    display: none;
+.slick-slide.slick-loading img {
+  display: none;
 }
-.slick-slide.dragging img
-{
-    pointer-events: none;
+.slick-slide.dragging img {
+  pointer-events: none;
 }
-.slick-initialized .slick-slide
-{
-    display: block;
+.slick-initialized .slick-slide {
+  display: block;
 }
-.slick-loading .slick-slide
-{
-    visibility: hidden;
+.slick-loading .slick-slide {
+  visibility: hidden;
 }
-.slick-vertical .slick-slide
-{
-    display: block;
-
-    height: auto;
-
-    border: 1px solid transparent;
+.slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
 }
+
 .slick-arrow.slick-hidden {
-    display: none;
+  display: none;
 }
+
+/*# sourceMappingURL=slick.css.map */

ot_templating/Resources/Public/assets/style/ext/slick.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["slick.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAGR;AAAA;EAEI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAGR;EACI;EACA;EACA;EAWA;;AAVA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;;AAGR;EACI","file":"slick.css"}

ot_templating/Resources/Public/assets/style/ext/slick.scss

@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

ot_templating/Resources/Public/assets/style/style.scss

@@ -70,26 +70,26 @@ $warning-font-color: #ffffff !default;
 
 // Import all project files
 @import
-"common/_mixins",
-"common/_base",
-"common/_states",
-"common/_layout",
-"common/module/_dropdown",
-"common/module/_topbar",
-"common/module/_menu",
-"common/module/_content",
-"common/module/_footer",
-"common/module/_user-toolbar",
-"common/module/_breadcrumb",
-"common/module/_carousel",
-"common/module/_ot-box",
-"common/module/_events-box",
-"common/module/_events-index",
-"common/module/_events-show",
-"common/module/_donors-box",
-"common/module/_members",
-"common/module/_sitemap",
-"common/module/_forms",
-"common/module/_contact",
-"common/module/_faq",
-"common/module/_fce-2col";
+"_mixins",
+"_base",
+"_states",
+"_layout",
+"module/_dropdown",
+"module/_topbar",
+"module/_menu",
+"module/_content",
+"module/_footer",
+"module/_user-toolbar",
+"module/_breadcrumb",
+"module/_carousel",
+"module/_ot-box",
+"module/_events-box",
+"module/_events-index",
+"module/_events-show",
+"module/_donors-box",
+"module/_members",
+"module/_sitemap",
+"module/_forms",
+"module/_contact",
+"module/_faq",
+"module/_fce-2col";