uikit3-rails 0.1.0

data/assets/stylesheets/components/icon.less

@@ -0,0 +1,242 @@
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@icon-image-size:                               20px;
+
+@icon-link-color:                               @global-muted-color;
+@icon-link-hover-color:                         @global-color;
+@icon-link-active-color:                        darken(@global-color, 5%);
+
+@icon-button-size:                              36px;
+@icon-button-border-radius:                     500px;
+@icon-button-background:                        @global-muted-background;
+@icon-button-color:                             @global-muted-color;
+
+@icon-button-hover-background:                  darken(@icon-button-background, 5%);
+@icon-button-hover-color:                       @global-color;
+
+@icon-button-active-background:                 darken(@icon-button-background, 10%);
+@icon-button-active-color:                      @global-color;
+
+@internal-icon-image:                           "../../../dist/images/icons.svg";
+
+
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+
+/*
+ * Pass image path to JS
+ */
+
+.uk-icon::before { background-image: url("@{internal-icon-image}"); }
+
+/*
+ * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 2. Let the container fit the height of the icon
+ */
+
+.uk-icon {
+    display: inline-block;
+    /* 1 */
+    fill: currentcolor;
+    /* 2 */
+    line-height: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+.uk-icon [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-icon > * { transform: translate(0,0); }
+
+
+/* Image modifier
+ ========================================================================== */
+
+/*
+ * Display images in icon dimensions
+ */
+
+.uk-icon-image {
+    width: @icon-image-size;
+    height: @icon-image-size;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Link
+ */
+
+.uk-icon-link {
+    color: @icon-link-color;
+    .hook-icon-link;
+}
+
+.uk-icon-link:hover,
+.uk-icon-link:focus {
+    color: @icon-link-hover-color;
+    outline: none;
+    .hook-icon-link-hover;
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+    color: @icon-link-active-color;
+    .hook-icon-link-active;
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-icon-button {
+    box-sizing: border-box;
+    width: @icon-button-size;
+    height: @icon-button-size;
+    border-radius: @icon-button-border-radius;
+    background: @icon-button-background;
+    color: @icon-button-color;
+    vertical-align: middle;
+    /* 1 */
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    .hook-icon-button;
+}
+
+/* Hover + Focus */
+.uk-icon-button:hover,
+.uk-icon-button:focus {
+    background-color: @icon-button-hover-background;
+    color: @icon-button-hover-color;
+    outline: none;
+    .hook-icon-button-hover;
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+    background-color: @icon-button-active-background;
+    color: @icon-button-active-color;
+    .hook-icon-button-active;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-icon-misc;
+
+.hook-icon-link() {}
+.hook-icon-link-hover() {}
+.hook-icon-link-active() {}
+.hook-icon-button() {}
+.hook-icon-button-hover() {}
+.hook-icon-button-active() {}
+.hook-icon-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-icon-link-color:                      @inverse-global-muted-color;
+@inverse-icon-link-hover-color:                @inverse-global-color;
+@inverse-icon-link-active-color:               @inverse-global-color;
+@inverse-icon-button-background:               @inverse-global-muted-background;
+@inverse-icon-button-color:                    @inverse-global-muted-color;
+@inverse-icon-button-hover-background:         darken(@inverse-icon-button-background, 5%);
+@inverse-icon-button-hover-color:              @inverse-global-color;
+@inverse-icon-button-active-background:        darken(@inverse-icon-button-background, 10%);
+@inverse-icon-button-active-color:             @inverse-global-color;
+
+.hook-inverse() {
+
+    //
+    // Link
+    //
+
+    .uk-icon-link {
+        color: @inverse-icon-link-color;
+        .hook-inverse-icon-link;
+    }
+
+    .uk-icon-link:hover,
+    .uk-icon-link:focus {
+        color: @inverse-icon-link-hover-color;
+        .hook-inverse-icon-link-hover;
+    }
+
+    .uk-icon-link:active,
+    .uk-active > .uk-icon-link {
+        color: @inverse-icon-link-active-color;
+        .hook-inverse-icon-link-active;
+    }
+
+    //
+    // Button
+    //
+
+    .uk-icon-button {
+        background-color: @inverse-icon-button-background;
+        color: @inverse-icon-button-color;
+        .hook-inverse-icon-button;
+    }
+
+    .uk-icon-button:hover,
+    .uk-icon-button:focus {
+        background-color: @inverse-icon-button-hover-background;
+        color: @inverse-icon-button-hover-color;
+        .hook-inverse-icon-button-hover;
+    }
+
+    .uk-icon-button:active {
+        background-color: @inverse-icon-button-active-background;
+        color: @inverse-icon-button-active-color;
+        .hook-inverse-icon-button-active;
+    }
+
+}
+
+.hook-inverse-icon-link() {}
+.hook-inverse-icon-link-hover() {}
+.hook-inverse-icon-link-active() {}
+.hook-inverse-icon-button() {}
+.hook-inverse-icon-button-hover() {}
+.hook-inverse-icon-button-active() {}

data/assets/stylesheets/components/iconnav.less

@@ -0,0 +1,166 @@
+// Name:            Iconnav
+// Description:     Component to create icon navigations
+//
+// Component:       `uk-iconnav`
+//
+// Modifier:        `uk-iconnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@iconnav-margin-horizontal:                      @global-small-margin;
+@iconnav-margin-vertical:                        @iconnav-margin-horizontal;
+
+@iconnav-item-color:                             @global-muted-color;
+
+@iconnav-item-hover-color:                       @global-color;
+
+@iconnav-item-active-color:                      @global-color;
+
+
+/* ========================================================================
+   Component: Iconnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset lists
+ * 3. Gutter
+ */
+
+.uk-iconnav {
+    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: -@iconnav-margin-horizontal;
+    .hook-iconnav;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+
+.uk-iconnav > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: @iconnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+
+.uk-iconnav > * > * {
+    /* 1 */
+    display: block;
+    /* 2 */
+    color: @iconnav-item-color;
+    .hook-iconnav-item;
+}
+
+/* Hover + Focus */
+.uk-iconnav > * > :hover,
+.uk-iconnav > * > :focus {
+    color: @iconnav-item-hover-color;
+    outline: none;
+    .hook-iconnav-item-hover;
+}
+
+/* Active */
+.uk-iconnav > .uk-active > * {
+    color: @iconnav-item-active-color;
+    .hook-iconnav-item-active;
+}
+
+
+/* Modifier: 'uk-iconnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-iconnav-vertical {
+    /* 1 */
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: -@iconnav-margin-vertical;
+}
+
+/* 2 */
+.uk-iconnav-vertical > * {
+    padding-left: 0;
+    padding-top: @iconnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-iconnav-misc;
+
+.hook-iconnav() {}
+.hook-iconnav-item() {}
+.hook-iconnav-item-hover() {}
+.hook-iconnav-item-active() {}
+.hook-iconnav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-iconnav-item-color:               @inverse-global-muted-color;
+@inverse-iconnav-item-hover-color:         @inverse-global-color;
+@inverse-iconnav-item-active-color:        @inverse-global-color;
+
+.hook-inverse() {
+
+    .uk-iconnav > * > * {
+        color: @inverse-iconnav-item-color;
+        .hook-inverse-iconnav-item;
+    }
+
+    .uk-iconnav > * > :hover,
+    .uk-iconnav > * > :focus {
+        color: @inverse-iconnav-item-hover-color;
+        .hook-inverse-iconnav-item-hover;
+    }
+
+    .uk-iconnav > .uk-active > * {
+        color: @inverse-iconnav-item-active-color;
+        .hook-inverse-iconnav-item-active;
+    }
+
+}
+
+.hook-inverse-iconnav-item() {}
+.hook-inverse-iconnav-item-hover() {}
+.hook-inverse-iconnav-item-active() {}

data/assets/stylesheets/components/inverse.less

@@ -0,0 +1,52 @@
+// Name:            Inverse
+// Description:     Inverse component style for light or dark backgrounds
+//
+// Component:       `uk-light`
+//                  `uk-dark`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@inverse-global-color-mode:                     light;
+
+@inverse-global-color:                          fade(@global-inverse-color, 70%);
+@inverse-global-emphasis-color:                 @global-inverse-color;
+@inverse-global-muted-color:                    fade(@global-inverse-color, 50%);
+@inverse-global-inverse-color:                  @global-color;
+
+@inverse-global-primary-background:             @global-inverse-color;
+@inverse-global-muted-background:               fade(@global-inverse-color, 10%);
+
+@inverse-global-border:                         fade(@global-inverse-color, 20%);
+
+
+/* ========================================================================
+   Component: Inverse
+ ========================================================================== */
+
+/*
+ * Implemented class depends on the general theme color
+ * `uk-light` is for light colors on dark backgrounds
+ * `uk-dark` is or dark colors on light backgrounds
+ */
+
+.uk-light when (@inverse-global-color-mode = light) {
+
+    .hook-inverse;
+
+}
+
+.uk-dark when (@inverse-global-color-mode = dark) {
+
+    .hook-inverse;
+
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-inverse() {}