updates

client/uikit/src/less/components/slider.less

@@ -0,0 +1,116 @@
+// Name:            Slider
+// Description:     Component to create horizontal sliders
+//
+// Component:       `uk-slider`
+//
+// Sub-objects:     `uk-slider-container`
+//                  `uk-slider-items`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@slider-container-margin-top:                       -11px;
+@slider-container-margin-bottom:                    -39px;
+@slider-container-margin-left:                      -25px;
+@slider-container-margin-right:                     -25px;
+
+
+/* ========================================================================
+   Component: Slider
+ ========================================================================== */
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-slider {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+    .hook-slider();
+}
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * Clip child elements
+ */
+
+.uk-slider-container { overflow: hidden; }
+
+/*
+ * Widen container to prevent box-shadows from clipping, `large-box-shadow`
+ */
+
+.uk-slider-container-offset {
+    margin: @slider-container-margin-top @slider-container-margin-right @slider-container-margin-bottom @slider-container-margin-left;
+    padding: (@slider-container-margin-top * -1) (@slider-container-margin-right * -1) (@slider-container-margin-bottom * -1) (@slider-container-margin-left * -1);
+}
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Optimize animation
+ * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ */
+
+.uk-slider-items {
+    /* 1 */
+    will-change: transform;
+    /* 2 */
+    position: relative;
+}
+
+/*
+ * 1. Reset list style without interfering with grid
+ * 2. Prevent displaying the callout information on iOS.
+ */
+
+.uk-slider-items:not(.uk-grid) {
+    display: flex;
+    /* 1 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 2 */
+    -webkit-touch-callout: none;
+}
+
+.uk-slider-items.uk-grid { flex-wrap: nowrap; }
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Let items take content dimensions (0 0 auto)
+ *    `max-width` needed to keep image responsiveness and prevent content overflow
+ * 3. Create position context
+ * 4. Disable horizontal panning gestures in IE11 and Edge
+ */
+
+.uk-slider-items > * {
+    /* 1 */
+    flex: none;
+    max-width: 100%;
+    /* 3 */
+    position: relative;
+    /* 4 */
+    touch-action: pan-y;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-slider-misc();
+
+.hook-slider() {}
+.hook-slider-misc() {}