uikit3-rails 0.1.0

data/assets/stylesheets/components/container.less

@@ -0,0 +1,106 @@
+// Name:            Container
+// Description:     Component to align and center your site and grid content
+//
+// Component:       `uk-container`
+//
+// Modifier:        `uk-container-small`
+//                  `uk-container-large`
+//                  `uk-container-expand`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@container-max-width:                   1200px;
+@container-small-max-width:             900px;
+@container-large-max-width:             1600px;
+
+@container-padding-horizontal:          15px;
+@container-padding-horizontal-s:        @global-gutter;
+@container-padding-horizontal-m:        @global-medium-gutter;
+
+
+/* ========================================================================
+   Component: Container
+ ========================================================================== */
+
+/*
+ * 1. Box sizing has to be `content-box` so the max-width is always the same and
+ *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+ */
+
+.uk-container {
+    box-sizing: content-box; /* 1 */
+    max-width: @container-max-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: @container-padding-horizontal;
+    padding-right: @container-padding-horizontal;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-container {
+        padding-left: @container-padding-horizontal-s;
+        padding-right: @container-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-container {
+        padding-left: @container-padding-horizontal-m;
+        padding-right: @container-padding-horizontal-m;
+    }
+
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-container::before,
+.uk-container::after {
+    content: "";
+    display: table;
+}
+
+.uk-container::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-container > :last-child { margin-bottom: 0; }
+
+/*
+ * Remove padding from nested containers
+ */
+
+.uk-container .uk-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-container-small { max-width: @container-small-max-width; }
+
+.uk-container-large { max-width: @container-large-max-width; }
+
+.uk-container-expand { max-width: none; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-container-misc;
+
+.hook-container-misc() {}

data/assets/stylesheets/components/cover.less

@@ -0,0 +1,56 @@
+// Name:            Cover
+// Description:     Utilities to let embedded content cover their container in a centered position
+//
+// Component:       `uk-cover`
+//
+// Sub-object:      `uk-cover-container`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+
+/*
+ * Works with iframes and embedded content
+ * 1. Reset responsiveness for embedded content
+ * 2. Center object
+ * Note: Percent values on the `top` property only works if this element
+ *       is absolute positioned or if the container has a height
+ */
+
+.uk-cover {
+    /* 1 */
+    max-width: none;
+    /* 2 */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * 1. Parent container which clips resized object
+ * 2. Needed if the child is positioned absolute. See note above
+ */
+
+.uk-cover-container {
+    /* 1 */
+    overflow: hidden;
+    /* 2 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-cover-misc;
+
+.hook-cover-misc() {}

data/assets/stylesheets/components/description-list.less

@@ -0,0 +1,71 @@
+// Name:            Description list
+// Description:     Styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@description-list-term-color:                   @global-emphasis-color;
+@description-list-term-margin-top:              @global-margin;
+
+@description-list-divider-term-margin-top:      @global-margin;
+@description-list-divider-term-border-width:    @global-border-width;
+@description-list-divider-term-border:          @global-border;
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+/*
+ * Term
+ */
+
+.uk-description-list > dt {
+    color: @description-list-term-color;
+    .hook-description-list-term;
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+    margin-top: @description-list-term-margin-top;
+}
+
+/*
+ * Description
+ */
+
+.uk-description-list > dd {
+    .hook-description-list-description;
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Line
+ */
+
+.uk-description-list-divider > dt:nth-child(n+2) {
+    margin-top: @description-list-divider-term-margin-top;
+    padding-top: @description-list-divider-term-margin-top;
+    border-top: @description-list-divider-term-border-width solid @description-list-divider-term-border;
+    .hook-description-list-divider-term;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-description-list-misc;
+
+.hook-description-list-term() {}
+.hook-description-list-description() {}
+.hook-description-list-divider-term() {}
+.hook-description-list-misc() {}

data/assets/stylesheets/components/divider.less

@@ -0,0 +1,147 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@divider-margin-vertical:                       @global-margin;
+
+@divider-icon-width:                            50px;
+@divider-icon-height:                           20px;
+@divider-icon-color:                            @global-border;
+@divider-icon-line-top:                         50%;
+@divider-icon-line-width:                       100%;
+@divider-icon-line-border-width:                @global-border-width;
+@divider-icon-line-border:                      @global-border;
+
+@internal-divider-icon-image:                   "../../images/backgrounds/divider-icon.svg";
+
+@divider-small-width:                           100px;
+@divider-small-border-width:                    @global-border-width;
+@divider-small-border:                          @global-border;
+
+
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+
+[class*='uk-divider'] {
+    /* 1 */
+    border: none;
+    /* 2 */
+    margin-bottom: @divider-margin-vertical;
+}
+
+/* Add margin if adjacent element */
+* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-divider-icon {
+    position: relative;
+    height: @divider-icon-height;
+    .svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    .hook-divider-icon;
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+    content: "";
+    position: absolute;
+    top: @divider-icon-line-top;
+    max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
+    border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
+    .hook-divider-icon-line;
+}
+
+.uk-divider-icon::before {
+    right: ~'calc(50% + (@{divider-icon-width} / 2))';
+    width: @divider-icon-line-width;
+    .hook-divider-icon-line-left;
+}
+
+.uk-divider-icon::after {
+    left: ~'calc(50% + (@{divider-icon-width} / 2))';
+    width: @divider-icon-line-width;
+    .hook-divider-icon-line-right;
+}
+
+
+/* Small
+ ========================================================================== */
+
+/*
+ * Reset child height, caused by `inline-block`
+ */
+
+.uk-divider-small { line-height: 0; }
+
+.uk-divider-small::after {
+    content: "";
+    display: inline-block;
+    width: @divider-small-width;
+    max-width: 100%;
+    border-top: @divider-small-border-width solid @divider-small-border;
+    vertical-align: top;
+    .hook-divider-small;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-divider-misc;
+
+.hook-divider-icon() {}
+.hook-divider-icon-line() {}
+.hook-divider-icon-line-left() {}
+.hook-divider-icon-line-right() {}
+.hook-divider-small() {}
+.hook-divider-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-divider-icon-color:                      @inverse-global-border;
+@inverse-divider-icon-line-border:                @inverse-global-border;
+@inverse-divider-small-border:                    @inverse-global-border;
+
+.hook-inverse() {
+
+    .uk-divider-icon {
+        .svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
+        .hook-inverse-divider-icon;
+    }
+
+    .uk-divider-icon::before,
+    .uk-divider-icon::after {
+        border-bottom-color: @inverse-divider-icon-line-border;
+        .hook-inverse-divider-icon-line;
+    }
+
+    .uk-divider-small::after {
+        border-top-color: @inverse-divider-small-border;
+        .hook-inverse-divider-small;
+    }
+
+}
+
+.hook-inverse-divider-icon() {}
+.hook-inverse-divider-icon-line() {}
+.hook-inverse-divider-small() {}

data/assets/stylesheets/components/dotnav.less

@@ -0,0 +1,190 @@
+// Name:            Dotnav
+// Description:     Component to create dot navigations
+//
+// Component:       `uk-dotnav`
+//
+// Modifier:        `uk-dotnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@dotnav-margin-horizontal:                      15px;
+@dotnav-margin-vertical:                        @dotnav-margin-horizontal;
+
+@dotnav-item-width:                             16px;
+@dotnav-item-height:                            @dotnav-item-width;
+@dotnav-item-border-radius:                     50%;
+@dotnav-item-background:                        fadeout(@global-color, 90%);
+
+@dotnav-item-hover-background:                  fadeout(@global-color, 60%);
+
+@dotnav-item-onclick-background:                fadeout(@global-color, 40%);
+
+@dotnav-item-active-background:                 fadeout(@global-color, 60%);
+
+
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset lists
+ * 3. Gutter
+ */
+
+.uk-dotnav {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /* 1 */
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: -@dotnav-margin-horizontal;
+    .hook-dotnav;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+
+.uk-dotnav > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: @dotnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ * 1. Hide text if present
+ */
+
+.uk-dotnav > * > * {
+    display: block;
+    box-sizing: content-box;
+    width: @dotnav-item-width;
+    height: @dotnav-item-height;
+    border-radius: @dotnav-item-border-radius;
+    background: @dotnav-item-background;
+    /* 1 */
+    text-indent: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    .hook-dotnav-item;
+}
+
+/* Hover + Focus */
+.uk-dotnav > * > :hover,
+.uk-dotnav > * > :focus {
+    background-color: @dotnav-item-hover-background;
+    outline: none;
+    .hook-dotnav-item-hover;
+}
+
+/* OnClick */
+.uk-dotnav > * > :active {
+    background-color: @dotnav-item-onclick-background;
+    .hook-dotnav-item-onclick;
+}
+
+/* Active */
+.uk-dotnav > .uk-active > * {
+    background-color: @dotnav-item-active-background;
+    .hook-dotnav-item-active;
+}
+
+
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-dotnav-vertical {
+    /* 1 */
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: -@dotnav-margin-vertical;
+}
+
+/* 2 */
+.uk-dotnav-vertical > * {
+    padding-left: 0;
+    padding-top: @dotnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-dotnav-misc;
+
+.hook-dotnav() {}
+.hook-dotnav-item() {}
+.hook-dotnav-item-hover() {}
+.hook-dotnav-item-onclick() {}
+.hook-dotnav-item-active() {}
+.hook-dotnav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-dotnav-item-background:               fadeout(@inverse-global-color, 60%);
+@inverse-dotnav-item-hover-background:         fadeout(@inverse-global-color, 30%);
+@inverse-dotnav-item-onclick-background:       fadeout(@inverse-global-color, 10%);
+@inverse-dotnav-item-active-background:        fadeout(@inverse-global-color, 10%);
+
+.hook-inverse() {
+
+    .uk-dotnav > * > * {
+        background-color: @inverse-dotnav-item-background;
+        .hook-inverse-dotnav-item;
+    }
+
+    .uk-dotnav > * > :hover,
+    .uk-dotnav > * > :focus {
+        background-color: @inverse-dotnav-item-hover-background;
+        .hook-inverse-dotnav-item-hover;
+    }
+
+    .uk-dotnav > * > :active {
+        background-color: @inverse-dotnav-item-onclick-background;
+        .hook-inverse-dotnav-item-onclick;
+    }
+
+    .uk-dotnav > .uk-active > * {
+        background-color: @inverse-dotnav-item-active-background;
+        .hook-inverse-dotnav-item-active;
+    }
+
+}
+
+.hook-inverse-dotnav-item() {}
+.hook-inverse-dotnav-item-hover() {}
+.hook-inverse-dotnav-item-onclick() {}
+.hook-inverse-dotnav-item-active() {}