uikit3-rails 0.1.0

data/assets/stylesheets/components/section.less

@@ -0,0 +1,230 @@
+// Name:            Section
+// Description:     Component to create horizontal layout section
+//
+// Component:       `uk-section`
+//
+// Modifiers:       `uk-section-large`
+//                  `uk-section-default`
+//                  `uk-section-muted`
+//                  `uk-section-primary`
+//                  `uk-section-secondary`
+//                  `uk-section-media`
+//                  `uk-section-overlap`
+//                  `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-muted-background:                        @global-muted-background;
+
+@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 {
+    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;
+    }
+
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-section::before,
+.uk-section::after {
+    content: "";
+    display: table;
+}
+
+.uk-section::after { clear: both; }
+
+/*
+ * 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;
+}
+
+/*
+ * Small
+ */
+
+.uk-section-small {
+    padding-top: @section-small-padding-vertical;
+    padding-bottom: @section-small-padding-vertical;
+}
+
+/*
+ * Large
+ */
+
+.uk-section-large {
+    padding-top: @section-large-padding-vertical;
+    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;
+    }
+
+}
+
+
+/*
+ * XLarge
+ */
+
+.uk-section-xlarge {
+    padding-top: @section-xlarge-padding-vertical;
+    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;
+    }
+
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-section-default {
+    background: @section-default-background;
+    .hook-section-default;
+}
+
+/*
+ * Muted
+ */
+
+.uk-section-muted {
+    background: @section-muted-background;
+    .hook-section-muted;
+}
+
+/*
+ * Primary
+ */
+
+.uk-section-primary {
+    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 {
+    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) {}
+
+
+/*
+ * Indicate that an image or video is used as background
+ */
+
+.uk-section-media {
+    .hook-section-media;
+}
+
+/* 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-media() {}
+.hook-section-overlap() {}
+.hook-section-misc() {}

data/assets/stylesheets/components/slidenav.less

@@ -0,0 +1,145 @@
+// 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`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@slidenav-padding:                              5px;
+@slidenav-color:                                fadeout(@global-color, 40%);
+
+@slidenav-hover-color:                          fadeout(@global-color, 20%);
+
+@slidenav-active-color:                         fadeout(@global-color, 10%);
+
+@internal-slidenav-previous-image:              "../../images/components/slidenav-previous.svg";
+@internal-slidenav-next-image:                  "../../images/components/slidenav-next.svg";
+@internal-slidenav-large-previous-image:        "../../images/components/slidenav-large-previous.svg";
+@internal-slidenav-large-next-image:            "../../images/components/slidenav-large-next.svg";
+
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-slidenav {
+    padding: @slidenav-padding;
+    color: @slidenav-color;
+    .hook-slidenav;
+}
+
+/* Hover + Focus */
+.uk-slidenav:hover,
+.uk-slidenav:focus {
+    color: @slidenav-hover-color;
+    outline: none;
+    .hook-slidenav-hover;
+}
+
+/* OnClick */
+.uk-slidenav:active {
+    color: @slidenav-active-color;
+    .hook-slidenav-active;
+}
+
+
+/* Icon modifier
+ ========================================================================== */
+
+/*
+ * Previous
+ */
+
+.uk-slidenav-previous::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-slidenav-previous-image); }
+
+.uk-slidenav-previous {
+    .hook-slidenav-previous;
+}
+
+/*
+ * Next
+ */
+
+.uk-slidenav-next::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-slidenav-next-image); }
+
+.uk-slidenav-next {
+    .hook-slidenav-next;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-slidenav-large.uk-slidenav-previous::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-slidenav-large-previous-image); }
+
+.uk-slidenav-large.uk-slidenav-next::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-slidenav-large-next-image); }
+
+
+/* Container
+ ========================================================================== */
+
+.uk-slidenav-container {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    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-container() {}
+.hook-slidenav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-slidenav-color:                       fadeout(@inverse-global-color, 40%);
+@inverse-slidenav-hover-color:                 fadeout(@inverse-global-color, 20%);
+@inverse-slidenav-active-color:                fadeout(@inverse-global-color, 10%);
+
+.hook-inverse() {
+
+    .uk-slidenav {
+        color: @inverse-slidenav-color;
+        .hook-inverse-slidenav;
+    }
+
+    .uk-slidenav:hover,
+    .uk-slidenav:focus {
+        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() {}

data/assets/stylesheets/components/sortable.less

@@ -0,0 +1,101 @@
+// 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;
+}
+
+/*
+ * Deactivate browser touch actions in IE11
+ */
+
+.uk-sortable > * { touch-action: none; }
+
+/*
+ * Deactivate pointer-events on SVGs in Safari
+ */
+
+.uk-sortable svg { pointer-events: none; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-sortable > :last-child { margin-bottom: 0; }
+
+
+/* Drag
+ ========================================================================== */
+
+.uk-sortable-drag {
+    position: absolute !important;
+    z-index: @sortable-dragged-z-index !important;
+    pointer-events: none;
+    .hook-sortable-drag;
+}
+
+
+/* Placeholder
+ ========================================================================== */
+
+.uk-sortable-placeholder {
+    opacity: @sortable-placeholder-opacity;
+    .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() {}