uikit3-rails 0.1.0

data/assets/stylesheets/components/spinner.less

@@ -0,0 +1,103 @@
+// Name:            Spinner
+// Description:     Component to create a loading spinner
+//
+// Component:       `uk-spinner`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@spinner-size:                                  30px;
+@spinner-stroke-width:                          1;
+@spinner-radius:                                floor((@spinner-size - @spinner-stroke-width) / 2); // Minus stroke width to prevent overflow clipping
+@spinner-circumference:                         round(2 * 3.141 * @spinner-radius);
+@spinner-duration:                              1.4s;
+
+@internal-spinner-image:                        "../../images/components/spinner.svg";
+
+
+/* ========================================================================
+   Component: Spinner
+ ========================================================================== */
+
+/*
+ * Icon
+ */
+
+.uk-spinner::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-spinner-image); }
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-spinner {
+    .hook-spinner;
+}
+
+
+/* SVG
+ ========================================================================== */
+
+.uk-spinner > * {
+    -webkit-animation: uk-spinner-rotate @spinner-duration linear infinite;
+    animation: uk-spinner-rotate @spinner-duration linear infinite;
+}
+
+@-webkit-keyframes uk-spinner-rotate {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(270deg); }
+}
+
+@keyframes uk-spinner-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(270deg); }
+}
+
+/*
+ * Circle
+ */
+
+.uk-spinner > * > * {
+    stroke-dasharray: @spinner-circumference;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    -webkit-animation: uk-spinner-dash @spinner-duration ease-in-out infinite;
+    animation: uk-spinner-dash @spinner-duration ease-in-out infinite;
+    stroke-width: @spinner-stroke-width;
+    stroke-linecap: round;
+}
+
+@-webkit-keyframes uk-spinner-dash {
+    0% { stroke-dashoffset: @spinner-circumference; }
+    50% {
+        stroke-dashoffset: @spinner-circumference/4;
+        -webkit-transform:rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: @spinner-circumference;
+        -webkit-transform:rotate(450deg);
+    }
+}
+
+@keyframes uk-spinner-dash {
+    0% { stroke-dashoffset: @spinner-circumference; }
+    50% {
+        stroke-dashoffset: @spinner-circumference/4;
+        transform:rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: @spinner-circumference;
+        transform:rotate(450deg);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-spinner-misc;
+
+.hook-spinner() {}
+.hook-spinner-misc() {}

data/assets/stylesheets/components/sticky.less

@@ -0,0 +1,57 @@
+// Name:            Sticky
+// Description:     Component to make elements sticky in the viewport
+//
+// Component:       `uk-sticky`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@sticky-z-index:                                @global-z-index - 20;
+
+@sticky-animation-duration:                     0.2s;
+@sticky-reverse-animation-duration:             0.2s;
+
+
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+
+/*
+ * 1. Resolve frame rate issues on devices with lower frame rates by forcing hardware acceleration
+ */
+
+.uk-sticky.uk-active {
+    z-index: @sticky-z-index;
+    box-sizing: border-box;
+    margin: 0 !important;
+    /* 1 */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+/*
+ * Faster animations
+ */
+
+.uk-sticky[class*='uk-animation-'] {
+    -webkit-animation-duration: @sticky-animation-duration;
+    animation-duration: @sticky-animation-duration;
+}
+
+.uk-sticky.uk-animation-reverse {
+    -webkit-animation-duration: @sticky-reverse-animation-duration;
+    animation-duration: @sticky-reverse-animation-duration;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-sticky-misc;
+
+.hook-sticky-misc() {}

data/assets/stylesheets/components/subnav.less

@@ -0,0 +1,305 @@
+// Name:            Subnav
+// Description:     Component to create a sub navigation
+//
+// Component:       `uk-subnav`
+//
+// Modifiers:       `uk-subnav-divider`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@subnav-margin-horizontal:                      20px;
+
+@subnav-item-color:                             @global-muted-color;
+@subnav-item-hover-color:                       @global-color;
+@subnav-item-hover-text-decoration:             none;
+@subnav-item-active-color:                      @global-emphasis-color;
+
+@subnav-divider-border-height:                  1.5em;
+@subnav-divider-border-width:                   @global-border-width;
+@subnav-divider-border:                         @global-border;
+
+@subnav-pill-item-padding-vertical:             5px;
+@subnav-pill-item-padding-horizontal:           10px;
+@subnav-pill-item-background:                   transparent;
+@subnav-pill-item-color:                        @subnav-item-color;
+@subnav-pill-item-hover-background:             @global-muted-background;
+@subnav-pill-item-hover-color:                  @global-color;
+@subnav-pill-item-onclick-background:           @subnav-pill-item-hover-background;
+@subnav-pill-item-onclick-color:                @subnav-pill-item-hover-color;
+@subnav-pill-item-active-background:            @global-primary-background;
+@subnav-pill-item-active-color:                 @global-inverse-color;
+
+@subnav-item-disabled-color:                    @global-muted-color;
+
+
+/* ========================================================================
+   Component: Subnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset lists
+ */
+
+.uk-subnav {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /* 1 */
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 2 */
+    margin-left: -@subnav-margin-horizontal;
+    /* 3 */
+    padding: 0;
+    list-style: none;
+    .hook-subnav;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-subnav > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: @subnav-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * Using `:first-child` instead of `a` to support `span` elements for text
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+
+.uk-subnav > * > :first-child {
+    /* 1 */
+    display: block;
+    /* 2 */
+    color: @subnav-item-color;
+    .hook-subnav-item;
+}
+
+/* Hover + Focus */
+.uk-subnav > * > a:hover,
+.uk-subnav > * > a:focus {
+    color: @subnav-item-hover-color;
+    text-decoration: @subnav-item-hover-text-decoration;
+    outline: none;
+    .hook-subnav-item-hover;
+}
+
+/* Active */
+.uk-subnav > .uk-active > a {
+    color: @subnav-item-active-color;
+    .hook-subnav-item-active;
+}
+
+
+/* Divider modifier
+ ========================================================================== */
+
+/*
+ * 1. Align items and divider vertically
+ */
+
+.uk-subnav-divider > * {
+    /* 1 */
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+/*
+ * Divider
+ * `nth-child` makes it also work without JS if it's only one row
+ */
+
+.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+    content: "";
+    height: @subnav-divider-border-height;
+    margin-right: @subnav-margin-horizontal;
+    border-left: @subnav-divider-border-width solid @subnav-divider-border;
+    .hook-subnav-divider;
+}
+
+
+/* Pill modifier
+ ========================================================================== */
+
+.uk-subnav-pill > * > :first-child {
+    padding: @subnav-pill-item-padding-vertical @subnav-pill-item-padding-horizontal;
+    background: @subnav-pill-item-background;
+    color: @subnav-pill-item-color;
+    .hook-subnav-pill-item;
+}
+
+/* Hover + Focus */
+.uk-subnav-pill > * > a:hover,
+.uk-subnav-pill > * > a:focus {
+    background-color: @subnav-pill-item-hover-background;
+    color: @subnav-pill-item-hover-color;
+    .hook-subnav-pill-item-hover;
+}
+
+/* OnClick */
+.uk-subnav-pill > * > a:active {
+    background-color: @subnav-pill-item-onclick-background;
+    color: @subnav-pill-item-onclick-color;
+    .hook-subnav-pill-item-onclick;
+}
+
+/* Active */
+.uk-subnav-pill > .uk-active > a {
+    background-color: @subnav-pill-item-active-background;
+    color: @subnav-pill-item-active-color;
+    .hook-subnav-pill-item-active;
+}
+
+
+/* Disabled
+ * The same for all style modifiers
+ ========================================================================== */
+
+.uk-subnav > .uk-disabled > a {
+    color: @subnav-item-disabled-color;
+    .hook-subnav-item-disabled;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-subnav-misc;
+
+.hook-subnav() {}
+.hook-subnav-item() {}
+.hook-subnav-item-hover() {}
+.hook-subnav-item-active() {}
+.hook-subnav-divider() {}
+.hook-subnav-pill-item() {}
+.hook-subnav-pill-item-hover() {}
+.hook-subnav-pill-item-onclick() {}
+.hook-subnav-pill-item-active() {}
+.hook-subnav-item-disabled() {}
+.hook-subnav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-subnav-item-color:                    @inverse-global-muted-color;
+@inverse-subnav-item-hover-color:              @inverse-global-color;
+@inverse-subnav-item-active-color:             @inverse-global-emphasis-color;
+@inverse-subnav-divider-border:                @inverse-global-border;
+@inverse-subnav-pill-item-background:          transparent;
+@inverse-subnav-pill-item-color:               @inverse-global-muted-color;
+@inverse-subnav-pill-item-hover-background:    @inverse-global-muted-background;
+@inverse-subnav-pill-item-hover-color:         @inverse-global-color;
+@inverse-subnav-pill-item-onclick-background:  @inverse-subnav-pill-item-hover-background;
+@inverse-subnav-pill-item-onclick-color:       @inverse-subnav-pill-item-hover-color;
+@inverse-subnav-pill-item-active-background:   @inverse-global-primary-background;
+@inverse-subnav-pill-item-active-color:        @inverse-global-inverse-color;
+@inverse-subnav-item-disabled-color:           @inverse-global-muted-color;
+
+.hook-inverse() {
+
+    .uk-subnav > * > :first-child {
+        color: @inverse-subnav-item-color;
+        .hook-inverse-subnav-item;
+    }
+
+    .uk-subnav > * > a:hover,
+    .uk-subnav > * > a:focus {
+        color: @inverse-subnav-item-hover-color;
+        .hook-inverse-subnav-item-hover;
+    }
+
+    .uk-subnav > .uk-active > a {
+        color: @inverse-subnav-item-active-color;
+        .hook-inverse-subnav-item-active;
+    }
+
+    //
+    // Divider
+    //
+
+    .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+        border-left-color: @inverse-subnav-divider-border;
+        .hook-inverse-subnav-divider;
+    }
+
+    //
+    // Pill
+    //
+
+    .uk-subnav-pill > * > :first-child {
+        background-color: @inverse-subnav-pill-item-background;
+        color: @inverse-subnav-pill-item-color;
+        .hook-inverse-subnav-pill-item;
+    }
+
+    .uk-subnav-pill > * > a:hover,
+    .uk-subnav-pill > * > a:focus {
+        background-color: @inverse-subnav-pill-item-hover-background;
+        color: @inverse-subnav-pill-item-hover-color;
+        .hook-inverse-subnav-pill-item-hover;
+    }
+
+    .uk-subnav-pill > * > a:active {
+        background-color: @inverse-subnav-pill-item-onclick-background;
+        color: @inverse-subnav-pill-item-onclick-color;
+        .hook-inverse-subnav-pill-item-onclick;
+    }
+
+    .uk-subnav-pill > .uk-active > a {
+        background-color: @inverse-subnav-pill-item-active-background;
+        color: @inverse-subnav-pill-item-active-color;
+        .hook-inverse-subnav-pill-item-active;
+    }
+
+    //
+    // Disabled
+    //
+
+    .uk-subnav > .uk-disabled > a {
+        color: @inverse-subnav-item-disabled-color;
+        .hook-inverse-subnav-item-disabled;
+    }
+
+}
+
+.hook-inverse-subnav-item() {}
+.hook-inverse-subnav-item-hover() {}
+.hook-inverse-subnav-item-active() {}
+.hook-inverse-subnav-divider() {}
+.hook-inverse-subnav-pill-item() {}
+.hook-inverse-subnav-pill-item-hover() {}
+.hook-inverse-subnav-pill-item-onclick() {}
+.hook-inverse-subnav-pill-item-active() {}
+.hook-inverse-subnav-item-disabled() {}