uikit3-rails 0.1.0

data/assets/stylesheets/components/label.less

@@ -0,0 +1,110 @@
+// Name:            Label
+// Description:     Component to indicate important notes
+//
+// Component:       `uk-label`
+//
+// Modifiers:       `uk-label-success`
+//                  `uk-label-warning`
+//                  `uk-label-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@label-padding-vertical:                        0;
+@label-padding-horizontal:                      @global-small-margin;
+@label-background:                              @global-primary-background;
+@label-line-height:                             @global-line-height;
+@label-font-size:                               @global-small-font-size;
+@label-color:                                   @global-inverse-color;
+
+@label-success-background:                      @global-success-background;
+@label-success-color:                           @global-inverse-color;
+@label-warning-background:                      @global-warning-background;
+@label-warning-color:                           @global-inverse-color;
+@label-danger-background:                       @global-danger-background;
+@label-danger-color:                            @global-inverse-color;
+
+
+/* ========================================================================
+   Component: Label
+ ========================================================================== */
+
+.uk-label {
+    display: inline-block;
+    padding: @label-padding-vertical @label-padding-horizontal;
+    background: @label-background;
+    line-height: @label-line-height;
+    font-size: @label-font-size;
+    color: @label-color;
+    vertical-align: middle;
+    white-space: nowrap;
+    .hook-label;
+}
+
+
+/* Color modifiers
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-label-success {
+    background-color: @label-success-background;
+    color: @label-success-color;
+    .hook-label-success;
+}
+
+/*
+ * Warning
+ */
+
+.uk-label-warning {
+    background-color: @label-warning-background;
+    color: @label-warning-color;
+    .hook-label-warning;
+}
+
+/*
+ * Danger
+ */
+
+.uk-label-danger {
+    background-color: @label-danger-background;
+    color: @label-danger-color;
+    .hook-label-danger;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-label-misc;
+
+.hook-label() {}
+.hook-label-success() {}
+.hook-label-warning() {}
+.hook-label-danger() {}
+.hook-label-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-label-background:                     @inverse-global-primary-background;
+@inverse-label-color:                          @inverse-global-inverse-color;
+
+.hook-inverse() {
+
+    .uk-label {
+        background-color: @inverse-label-background;
+        color: @inverse-label-color;
+        .hook-inverse-label;
+    }
+
+}
+
+.hook-inverse-label() {}

data/assets/stylesheets/components/link.less

@@ -0,0 +1,91 @@
+// Name:            Link
+// Description:     Styles for links
+//
+// Component:       `uk-link-muted`
+//                  `uk-link-reset`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@link-muted-color:                              @global-muted-color;
+@link-muted-hover-color:                        @global-color;
+
+
+/* ========================================================================
+   Component: Link
+ ========================================================================== */
+
+
+/* Muted
+ ========================================================================== */
+
+a.uk-link-muted,
+.uk-link-muted a {
+    color: @link-muted-color;
+    .hook-link-muted;
+}
+
+a.uk-link-muted:hover,
+.uk-link-muted a:hover {
+    color: @link-muted-hover-color;
+    .hook-link-muted-hover;
+}
+
+
+/* Reset
+ ========================================================================== */
+
+/*
+ * `!important` needed to override inverse component
+ */
+
+a.uk-link-reset,
+a.uk-link-reset:hover,
+a.uk-link-reset:focus,
+.uk-link-reset a,
+.uk-link-reset a:hover,
+.uk-link-reset a:focus {
+    color: inherit !important;
+    text-decoration: none !important;
+    .hook-link-reset;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-link-misc;
+
+.hook-link-muted() {}
+.hook-link-muted-hover() {}
+.hook-link-reset() {}
+.hook-link-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-link-muted-color:                        @inverse-global-muted-color;
+@inverse-link-muted-hover-color:                  @inverse-global-color;
+
+.hook-inverse() {
+
+    a.uk-link-muted,
+    .uk-link-muted a {
+        color: @inverse-link-muted-color;
+        .hook-inverse-link-muted;
+    }
+
+    a.uk-link-muted:hover,
+    .uk-link-muted a:hover {
+        color: @inverse-link-muted-hover-color;
+        .hook-inverse-link-muted-hover;
+    }
+
+}
+
+.hook-inverse-link-muted() {}
+.hook-inverse-link-muted-hover() {}

data/assets/stylesheets/components/list.less

@@ -0,0 +1,205 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-bullet`
+//                  `uk-list-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@list-margin-top:                               @global-small-margin;
+
+@list-nested-padding-left:                      @global-gutter;
+
+@list-divider-margin-top:                       @global-small-margin;
+@list-divider-border-width:                     @global-border-width;
+@list-divider-border:                           @global-border;
+
+@list-striped-padding-vertical:                 @global-small-margin;
+@list-striped-padding-horizontal:               @global-small-margin;
+@list-striped-background:                       @global-muted-background;
+
+@list-bullet-width:                             (@global-line-height * 1em);
+@list-bullet-height:                            @list-bullet-width;
+@list-bullet-margin-right:                      @global-small-margin;
+@list-bullet-icon-color:                        @global-color;
+
+@list-large-margin-top:                         @global-margin;
+@list-large-divider-margin-top:                 @global-margin;
+@list-large-striped-padding-vertical:           @global-margin;
+@list-large-striped-padding-horizontal:         @global-small-margin;
+
+@internal-list-bullet-image:                    "../../images/backgrounds/list-bullet.svg";
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-list > li::before,
+.uk-list > li::after {
+    content: "";
+    display: table;
+}
+
+.uk-list > li::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > li > :last-child { margin-bottom: 0; }
+
+/*
+ * Nested lists
+ */
+
+.uk-list ul {
+    margin: 0;
+    padding-left: @list-nested-padding-left;
+    list-style: none;
+}
+
+/*
+ * Style
+ */
+
+.uk-list > li:nth-child(n+2),
+.uk-list > li > ul { margin-top: @list-margin-top; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > li:nth-child(n+2) {
+    margin-top: @list-divider-margin-top;
+    padding-top: @list-divider-margin-top;
+    border-top: @list-divider-border-width solid @list-divider-border;
+    .hook-list-divider;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > li {
+    padding: @list-striped-padding-vertical @list-striped-padding-horizontal;
+    .hook-list-striped;
+}
+
+.uk-list-striped > li:nth-of-type(odd) { background: @list-striped-background; }
+
+.uk-list-striped > li:nth-child(n+2) { margin-top: 0; }
+
+/*
+ * Bullet
+ */
+
+.uk-list-bullet > li {
+    position: relative;
+    padding-left: ~'calc(@{list-bullet-width} + @{list-bullet-margin-right})';
+}
+
+.uk-list-bullet > li::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: @list-bullet-width;
+    height: @list-bullet-height;
+    .svg-fill(@internal-list-bullet-image, "#000", @list-bullet-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    float: left;
+    .hook-list-bullet;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > li:nth-child(n+2),
+.uk-list-large > li > ul { margin-top: @list-large-margin-top; }
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > li:nth-child(n+2) {
+    margin-top: @list-large-divider-margin-top;
+    padding-top: @list-large-divider-margin-top;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > li {
+    padding: @list-large-striped-padding-vertical @list-large-striped-padding-horizontal;
+    .hook-list-striped;
+}
+
+.uk-list-large.uk-list-striped > li:nth-child(n+2) { margin-top: 0; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-list-misc;
+
+.hook-list-divider() {}
+.hook-list-striped() {}
+.hook-list-bullet() {}
+.hook-list-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-list-divider-border:                     @inverse-global-border;
+@inverse-list-striped-background:                 @inverse-global-muted-background;
+@inverse-list-bullet-icon-color:                  @inverse-global-color;
+
+.hook-inverse() {
+
+    .uk-list-divider > li:nth-child(n+2) {
+        border-top-color: @inverse-list-divider-border;
+        .hook-inverse-list-divider;
+    }
+
+    .uk-list-striped > li {
+        .hook-inverse-list-striped;
+    }
+
+    .uk-list-striped > li:nth-of-type(odd) { background-color: @inverse-list-striped-background; }
+
+    .uk-list-bullet > li::before {
+        .svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);
+        .hook-inverse-list-bullet;
+    }
+
+}
+
+.hook-inverse-list-divider() {}
+.hook-inverse-list-striped() {}
+.hook-inverse-list-bullet() {}

data/assets/stylesheets/components/margin.less

@@ -0,0 +1,161 @@
+// Name:            Margin
+// Description:     Utilities for margins
+//
+// Component:       `uk-margin-*`
+//                  `uk-margin-small-*`
+//                  `uk-margin-medium-*`
+//                  `uk-margin-large-*`
+//                  `uk-margin-xlarge-*`
+//                  `uk-margin-remove-*`
+//                  `uk-margin-auto-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@margin-margin:                                        @global-margin;
+
+@margin-small-margin:                                  @global-small-margin;
+
+@margin-medium-margin:                                 @global-medium-margin;
+
+@margin-large-margin:                                  @global-medium-margin;
+@margin-large-margin-l:                                @global-large-margin;
+
+@margin-xlarge-margin:                                 @global-large-margin;
+@margin-xlarge-margin-l:                               @global-xlarge-margin;
+
+
+/* ========================================================================
+   Component: Margin
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-margin { margin-bottom: @margin-margin; }
+* + .uk-margin { margin-top: @margin-margin !important; }
+
+.uk-margin-top { margin-top: @margin-margin !important; }
+.uk-margin-bottom { margin-bottom: @margin-margin !important; }
+.uk-margin-left { margin-left: @margin-margin !important; }
+.uk-margin-right { margin-right: @margin-margin !important; }
+
+
+/* Small
+ ========================================================================== */
+
+.uk-margin-small { margin-bottom: @margin-small-margin; }
+* + .uk-margin-small { margin-top: @margin-small-margin !important; }
+
+.uk-margin-small-top { margin-top: @margin-small-margin !important; }
+.uk-margin-small-bottom { margin-bottom: @margin-small-margin !important; }
+.uk-margin-small-left { margin-left: @margin-small-margin !important; }
+.uk-margin-small-right { margin-right: @margin-small-margin !important; }
+
+
+/* Medium
+ ========================================================================== */
+
+.uk-margin-medium { margin-bottom: @margin-medium-margin; }
+* + .uk-margin-medium { margin-top: @margin-medium-margin !important; }
+
+.uk-margin-medium-top { margin-top: @margin-medium-margin !important; }
+.uk-margin-medium-bottom { margin-bottom: @margin-medium-margin !important; }
+.uk-margin-medium-left { margin-left: @margin-medium-margin !important; }
+.uk-margin-medium-right { margin-right: @margin-medium-margin !important; }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-margin-large { margin-bottom: @margin-large-margin; }
+* + .uk-margin-large { margin-top: @margin-large-margin !important; }
+
+.uk-margin-large-top { margin-top: @margin-large-margin!important; }
+.uk-margin-large-bottom { margin-bottom: @margin-large-margin!important; }
+.uk-margin-large-left { margin-left: @margin-large-margin!important; }
+.uk-margin-large-right { margin-right: @margin-large-margin!important; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-margin-large { margin-bottom: @margin-large-margin-l; }
+    * + .uk-margin-large { margin-top: @margin-large-margin-l !important; }
+
+    .uk-margin-large-top { margin-top: @margin-large-margin-l !important; }
+    .uk-margin-large-bottom { margin-bottom: @margin-large-margin-l !important; }
+    .uk-margin-large-left { margin-left: @margin-large-margin-l !important; }
+    .uk-margin-large-right { margin-right: @margin-large-margin-l !important; }
+
+}
+
+
+/* XLarge
+ ========================================================================== */
+
+.uk-margin-xlarge { margin-bottom: @margin-xlarge-margin; }
+* + .uk-margin-xlarge { margin-top: @margin-xlarge-margin !important; }
+
+.uk-margin-xlarge-top { margin-top: @margin-xlarge-margin !important; }
+.uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin !important; }
+.uk-margin-xlarge-left { margin-left: @margin-xlarge-margin !important; }
+.uk-margin-xlarge-right { margin-right: @margin-xlarge-margin !important; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin-l; }
+    * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l !important; }
+
+    .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin-l !important; }
+    .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin-l !important; }
+
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-margin-remove { margin: 0 !important; }
+.uk-margin-remove-top { margin-top: 0 !important; }
+.uk-margin-remove-bottom { margin-bottom: 0 !important; }
+.uk-margin-remove-left { margin-left: 0 !important; }
+.uk-margin-remove-right { margin-right: 0 !important; }
+
+.uk-margin-remove-vertical {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.uk-margin-remove-adjacent + * { margin-top: 0 !important; }
+
+
+/* Auto
+ ========================================================================== */
+
+.uk-margin-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.uk-margin-auto-left { margin-left: auto !important; }
+.uk-margin-auto-right { margin-right: auto !important; }
+
+.uk-margin-auto-vertical {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-margin-misc;
+
+.hook-margin-misc() {}