@frankenstyle/uikit 0.0.1

package/src/less/components/section.less

@@ -0,0 +1,257 @@
+// Name:            Section
+// Description:     Component to create horizontal layout section
+//
+// Component:       `uk-section`
+//
+// Modifiers:       `uk-section-xsmall`
+//                  `uk-section-small`
+//                  `uk-section-large`
+//                  `uk-section-xlarge`
+//                  `uk-section-default`
+//                  `uk-section-muted`
+//                  `uk-section-primary`
+//                  `uk-section-secondary`
+//                  `uk-section-overlap`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@section-padding-vertical:                        @global-medium-margin;
+@section-padding-vertical-m:                      @global-large-margin;
+
+@section-xsmall-padding-vertical:                 @global-margin;
+
+@section-small-padding-vertical:                  @global-medium-margin;
+
+@section-large-padding-vertical:                  @global-large-margin;
+@section-large-padding-vertical-m:                @global-xlarge-margin;
+
+@section-xlarge-padding-vertical:                 @global-xlarge-margin;
+@section-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);
+
+@section-default-background:                      @global-background;
+@section-default-color-mode:                      dark;
+
+@section-muted-background:                        @global-muted-background;
+@section-muted-color-mode:                        dark;
+
+@section-primary-background:                      @global-primary-background;
+@section-primary-color-mode:                      light;
+
+@section-secondary-background:                    @global-secondary-background;
+@section-secondary-color-mode:                    light;
+
+
+/* ========================================================================
+   Component: Section
+ ========================================================================== */
+
+/*
+ * 1. Make it work with `100vh` and height in general
+ */
+
+.uk-section {
+    display: flow-root;
+    box-sizing: border-box; /* 1 */
+    padding-top: @section-padding-vertical;
+    padding-bottom: @section-padding-vertical;
+    .hook-section();
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-section {
+        padding-top: @section-padding-vertical-m;
+        padding-bottom: @section-padding-vertical-m;
+    }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-section > :last-child { margin-bottom: 0; }
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-section-xsmall {
+    padding-top: @section-xsmall-padding-vertical;
+    padding-bottom: @section-xsmall-padding-vertical;
+}
+
+.uk-section-xsmall-top { padding-top: @section-xsmall-padding-vertical; }
+.uk-section-xsmall-bottom { padding-bottom: @section-xsmall-padding-vertical; }
+
+/*
+ * Small
+ */
+
+.uk-section-small {
+    padding-top: @section-small-padding-vertical;
+    padding-bottom: @section-small-padding-vertical;
+}
+
+.uk-section-small-top { padding-top: @section-small-padding-vertical; }
+.uk-section-small-bottom { padding-bottom: @section-small-padding-vertical; }
+
+/*
+ * Medium
+ */
+
+.uk-section-medium-top { padding-top: @section-padding-vertical; }
+.uk-section-medium-bottom { padding-bottom: @section-padding-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-section-medium-top { padding-top: @section-padding-vertical-m; }
+    .uk-section-medium-bottom { padding-bottom: @section-padding-vertical-m; }
+
+}
+
+/*
+ * Large
+ */
+
+.uk-section-large {
+    padding-top: @section-large-padding-vertical;
+    padding-bottom: @section-large-padding-vertical;
+}
+
+.uk-section-large-top { padding-top: @section-large-padding-vertical; }
+.uk-section-large-bottom { padding-bottom: @section-large-padding-vertical; }
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-section-large {
+        padding-top: @section-large-padding-vertical-m;
+        padding-bottom: @section-large-padding-vertical-m;
+    }
+
+    .uk-section-large-top { padding-top: @section-large-padding-vertical-m; }
+    .uk-section-large-bottom { padding-bottom: @section-large-padding-vertical-m; }
+
+}
+
+/*
+ * XLarge
+ */
+
+.uk-section-xlarge {
+    padding-top: @section-xlarge-padding-vertical;
+    padding-bottom: @section-xlarge-padding-vertical;
+}
+
+.uk-section-xlarge-top { padding-top: @section-xlarge-padding-vertical; }
+.uk-section-xlarge-bottom { padding-bottom: @section-xlarge-padding-vertical; }
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-section-xlarge {
+        padding-top: @section-xlarge-padding-vertical-m;
+        padding-bottom: @section-xlarge-padding-vertical-m;
+    }
+
+    .uk-section-xlarge-top { padding-top: @section-xlarge-padding-vertical-m; }
+    .uk-section-xlarge-bottom { padding-bottom: @section-xlarge-padding-vertical-m; }
+
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-section-default {
+    --uk-inverse: @section-default-color-mode;
+    background: @section-default-background;
+    .hook-section-default();
+}
+
+.uk-section-default:not(.uk-preserve-color):extend(.uk-light all) when (@section-default-color-mode = light) {}
+.uk-section-default:not(.uk-preserve-color):extend(.uk-dark all) when (@section-default-color-mode = dark) {}
+
+/*
+ * Muted
+ */
+
+.uk-section-muted {
+    --uk-inverse: @section-muted-color-mode;
+    background: @section-muted-background;
+    .hook-section-muted();
+}
+
+.uk-section-muted:not(.uk-preserve-color):extend(.uk-light all) when (@section-muted-color-mode = light) {}
+.uk-section-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@section-muted-color-mode = dark) {}
+
+
+/*
+ * Primary
+ */
+
+.uk-section-primary {
+    --uk-inverse: @section-primary-color-mode;
+    background: @section-primary-background;
+    .hook-section-primary();
+}
+
+.uk-section-primary:not(.uk-preserve-color):extend(.uk-light all) when (@section-primary-color-mode = light) {}
+.uk-section-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-primary-color-mode = dark) {}
+
+/*
+ * Secondary
+ */
+
+.uk-section-secondary {
+    --uk-inverse: @section-secondary-color-mode;
+    background: @section-secondary-background;
+    .hook-section-secondary();
+}
+
+.uk-section-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@section-secondary-color-mode = light) {}
+.uk-section-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-secondary-color-mode = dark) {}
+
+
+/* Overlap modifier
+ ========================================================================== */
+
+/*
+ * Reserved modifier to make a section overlap another section with an border image
+ * Implemented by the theme
+ */
+
+.uk-section-overlap {
+    .hook-section-overlap();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-section-misc();
+
+.hook-section() {}
+.hook-section-default() {}
+.hook-section-muted() {}
+.hook-section-secondary() {}
+.hook-section-primary() {}
+.hook-section-overlap() {}
+.hook-section-misc() {}

package/src/less/components/slidenav.less

@@ -0,0 +1,137 @@
+// Name:            Slidenav
+// Description:     Component to create previous/next icon navigations
+//
+// Component:       `uk-slidenav`
+//
+// Sub-objects:     `uk-slidenav-container`
+//
+// Modifiers:       `uk-slidenav-previous`
+//                  `uk-slidenav-next`
+//                  `uk-slidenav-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@slidenav-padding-vertical:                     5px;
+@slidenav-padding-horizontal:                   10px;
+
+@slidenav-color:                                fade(@global-color, 50%);
+@slidenav-hover-color:                          fade(@global-color, 90%);
+@slidenav-active-color:                         fade(@global-color, 50%);
+
+@slidenav-large-padding-vertical:               10px;
+@slidenav-large-padding-horizontal:             @slidenav-large-padding-vertical;
+
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-slidenav {
+    padding: @slidenav-padding-vertical @slidenav-padding-horizontal;
+    color: @slidenav-color;
+    .hook-slidenav();
+}
+
+/* Hover */
+.uk-slidenav:hover {
+    color: @slidenav-hover-color;
+    .hook-slidenav-hover();
+}
+
+/* OnClick */
+.uk-slidenav:active {
+    color: @slidenav-active-color;
+    .hook-slidenav-active();
+}
+
+
+/* Icon modifier
+ ========================================================================== */
+
+/*
+ * Previous
+ */
+
+.uk-slidenav-previous {
+    .hook-slidenav-previous();
+}
+
+/*
+ * Next
+ */
+
+.uk-slidenav-next {
+    .hook-slidenav-next();
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-slidenav-large {
+    padding: @slidenav-large-padding-vertical @slidenav-large-padding-horizontal;
+    .hook-slidenav-large();
+}
+
+
+/* Container
+ ========================================================================== */
+
+.uk-slidenav-container {
+    display: flex;
+    .hook-slidenav-container();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-slidenav-misc();
+
+.hook-slidenav() {}
+.hook-slidenav-hover() {}
+.hook-slidenav-active() {}
+.hook-slidenav-previous() {}
+.hook-slidenav-next() {}
+.hook-slidenav-large() {}
+.hook-slidenav-container() {}
+.hook-slidenav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-slidenav-color:                       fade(@inverse-global-color, 70%);
+@inverse-slidenav-hover-color:                 fade(@inverse-global-color, 95%);
+@inverse-slidenav-active-color:                fade(@inverse-global-color, 70%);
+
+.hook-inverse() {
+
+    .uk-slidenav {
+        color: @inverse-slidenav-color;
+        .hook-inverse-slidenav();
+    }
+
+    .uk-slidenav:hover {
+        color: @inverse-slidenav-hover-color;
+        .hook-inverse-slidenav-hover();
+    }
+
+    .uk-slidenav:active {
+        color: @inverse-slidenav-active-color;
+        .hook-inverse-slidenav-active();
+    }
+
+}
+
+.hook-inverse-slidenav() {}
+.hook-inverse-slidenav-hover() {}
+.hook-inverse-slidenav-active() {}

package/src/less/components/slider.less

@@ -0,0 +1,123 @@
+// 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
+ ========================================================================== */
+
+/*
+ * 1. Clip child elements
+ * 2. Prevent accidental scrolling through elements in slide getting focused
+ */
+
+.uk-slider-container {
+    /* 1 */
+    overflow: hidden;
+    /* 2 */
+    overflow: clip;
+}
+
+/*
+ * 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`.
+ * 3. Disable horizontal panning gestures
+ */
+
+.uk-slider-items {
+    /* 1 */
+    will-change: transform;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    touch-action: pan-y;
+}
+
+/*
+ * 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
+ * 2. Create position context
+ */
+
+.uk-slider-items > * {
+    /* 1 */
+    flex: none !important;
+    box-sizing: border-box;
+    max-width: 100%;
+    /* 2 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-slider-misc();
+
+.hook-slider() {}
+.hook-slider-misc() {}

package/src/less/components/slideshow.less

@@ -0,0 +1,93 @@
+// Name:            Slideshow
+// Description:     Component to create slideshows
+//
+// Component:       `uk-slideshow`
+//
+// Sub-objects:     `uk-slideshow-items`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Slideshow
+ ========================================================================== */
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-slideshow {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+    .hook-slideshow();
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Create position and stacking context
+ * 2. Reset list
+ * 3. Clip child elements
+ * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
+ */
+
+.uk-slideshow-items {
+    /* 1 */
+    position: relative;
+    z-index: 0;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    overflow: hidden;
+    /* 4 */
+    -webkit-touch-callout: none;
+    /* 5 */
+    touch-action: pan-y;
+}
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * 1. Position items above each other
+ * 2. Take the full width
+ * 3. Clip child elements, e.g. for `uk-cover`
+ * 4. Optimize animation
+ */
+
+.uk-slideshow-items > * {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* 2 */
+    right: 0;
+    bottom: 0;
+    /* 3 */
+    overflow: hidden;
+    /* 4 */
+    will-change: transform, opacity;
+}
+
+/*
+ * Hide not active items
+ */
+
+.uk-slideshow-items > :not(.uk-active) { display: none; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-slideshow-misc();
+
+.hook-slideshow() {}
+.hook-slideshow-misc() {}

package/src/less/components/sortable.less

@@ -0,0 +1,90 @@
+// Name:            Sortable
+// Description:     Component to create sortable grids and lists
+//
+// Component:       `uk-sortable`
+//
+// Sub-objects:     `uk-sortable-drag`
+//                  `uk-sortable-placeholder`
+//                  `uk-sortable-handle`
+//
+// Modifiers:       `uk-sortable-empty`
+//
+// States:          `uk-drag`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@sortable-dragged-z-index:                      @global-z-index + 50;
+
+@sortable-placeholder-opacity:                  0;
+
+@sortable-empty-height:                         50px;
+
+
+/* ========================================================================
+   Component: Sortable
+ ========================================================================== */
+
+.uk-sortable {
+    position: relative;
+    .hook-sortable();
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-sortable > :last-child { margin-bottom: 0; }
+
+
+/* Drag
+ ========================================================================== */
+
+.uk-sortable-drag {
+    position: fixed !important;
+    z-index: @sortable-dragged-z-index !important;
+    pointer-events: none;
+    .hook-sortable-drag();
+}
+
+
+/* Placeholder
+ ========================================================================== */
+
+.uk-sortable-placeholder {
+    opacity: @sortable-placeholder-opacity;
+    pointer-events: none;
+    .hook-sortable-placeholder();
+}
+
+
+/* Empty modifier
+ ========================================================================== */
+
+.uk-sortable-empty {
+    min-height: @sortable-empty-height;
+    .hook-sortable-empty();
+}
+
+
+/* Handle
+ ========================================================================== */
+
+/* Hover */
+.uk-sortable-handle:hover { cursor: move; }
+
+
+
+// Hooks
+// ========================================================================
+
+.hook-sortable-misc();
+
+.hook-sortable() {}
+.hook-sortable-drag() {}
+.hook-sortable-placeholder() {}
+.hook-sortable-empty() {}
+.hook-sortable-misc() {}