uikit3-rails 0.1.0

data/assets/stylesheets/components/text.less

@@ -0,0 +1,254 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@text-lead-font-size:                           @global-large-font-size;
+@text-lead-line-height:                         1.5;
+@text-lead-color:                               @global-emphasis-color;
+
+@text-meta-font-size:                           @global-small-font-size;
+@text-meta-line-height:                         1.4;
+@text-meta-color:                               @global-muted-color;
+
+@text-small-font-size:                          @global-small-font-size;
+@text-small-line-height:                        1.5;
+
+@text-large-font-size:                          @global-large-font-size;
+@text-large-line-height:                        1.5;
+
+@text-muted-color:                              @global-muted-color;
+@text-primary-color:                            @global-primary-background;
+@text-success-color:                            @global-success-background;
+@text-warning-color:                            @global-warning-background;
+@text-danger-color:                             @global-danger-background;
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-text-lead {
+    font-size: @text-lead-font-size;
+    line-height: @text-lead-line-height;
+    color: @text-lead-color;
+    .hook-text-lead;
+}
+
+.uk-text-meta {
+    font-size: @text-meta-font-size;
+    line-height: @text-meta-line-height;
+    color: @text-meta-color;
+    .hook-text-meta;
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-small {
+    font-size: @text-small-font-size;
+    line-height: @text-small-line-height;
+    .hook-text-small;
+}
+
+.uk-text-large {
+    font-size: @text-large-font-size;
+    line-height: @text-large-line-height;
+    .hook-text-large;
+}
+
+
+/* Weight modifier
+ ========================================================================== */
+
+.uk-text-bold { font-weight: bolder; }
+
+
+/* Transform modifier
+ ========================================================================== */
+
+.uk-text-uppercase { text-transform: uppercase !important; }
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: @text-muted-color !important; }
+
+.uk-text-primary {
+    color: @text-primary-color !important;
+    .hook-text-primary;
+}
+
+.uk-text-success { color: @text-success-color !important; }
+.uk-text-warning { color: @text-warning-color !important; }
+.uk-text-danger { color: @text-danger-color !important; }
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-text-left { text-align: left !important; }
+.uk-text-right { text-align: right !important; }
+.uk-text-center { text-align: center !important; }
+.uk-text-justify { text-align: justify !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-text-left\@s { text-align: left !important; }
+    .uk-text-right\@s { text-align: right !important; }
+    .uk-text-center\@s { text-align: center !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-text-left\@m { text-align: left !important; }
+    .uk-text-right\@m { text-align: right !important; }
+    .uk-text-center\@m { text-align: center !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-text-left\@l { text-align: left !important; }
+    .uk-text-right\@l { text-align: right !important; }
+    .uk-text-center\@l { text-align: center !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-text-left\@xl { text-align: left !important; }
+    .uk-text-right\@xl { text-align: right !important; }
+    .uk-text-center\@xl { text-align: center !important; }
+
+}
+
+/*
+ * Vertical
+ */
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+.uk-text-baseline { vertical-align: baseline !important; }
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+
+.uk-text-truncate {
+    /* 1 */
+    max-width: 100%;
+    /* 2 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate { max-width: 0; }
+
+
+/*
+ * 1. Wrap long words onto the next line and break them if they are too long to fit
+ * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
+ * 3. Add a hyphen where the word breaks
+ * 4. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
+ *    Must use `break-all` to support IE11 and Edge
+ */
+
+.uk-text-break {
+    /* 1 */
+    overflow-wrap: break-word;
+    /* 2 */
+    word-wrap: break-word;
+    /* 3 */
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
+
+/* 4 */
+th.uk-text-break,
+td.uk-text-break { word-break: break-all; }
+
+
+
+// Hooks
+// ========================================================================
+
+.hook-text-misc;
+
+.hook-text-lead() {}
+.hook-text-meta() {}
+.hook-text-small() {}
+.hook-text-large() {}
+.hook-text-primary() {}
+.hook-text-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-text-lead-color:                      @inverse-global-color;
+@inverse-text-meta-color:                      @inverse-global-muted-color;
+@inverse-text-muted-color:                     @inverse-global-muted-color;
+@inverse-text-primary-color:                   @inverse-global-color;
+
+.hook-inverse() {
+
+    .uk-text-lead {
+        color: @inverse-text-lead-color;
+        .hook-inverse-text-lead;
+    }
+
+    .uk-text-meta {
+        color: @inverse-text-meta-color;
+        .hook-inverse-text-meta;
+    }
+
+    .uk-text-muted { color: @inverse-text-muted-color !important; }
+
+    .uk-text-primary {
+        color: @inverse-text-primary-color !important;
+        .hook-inverse-text-primary;
+    }
+
+}
+
+.hook-inverse-text-lead() {}
+.hook-inverse-text-meta() {}
+.hook-inverse-text-primary() {}

data/assets/stylesheets/components/tooltip.less

@@ -0,0 +1,84 @@
+// Name:            Tooltip
+// Description:     Component to create tooltips
+//
+// Component:       `uk-tooltip`
+//
+// Modifiers        `uk-tooltip-top`
+//                  `uk-tooltip-top-left`
+//                  `uk-tooltip-top-right`
+//                  `uk-tooltip-bottom`
+//                  `uk-tooltip-bottom-left`
+//                  `uk-tooltip-bottom-right`
+//                  `uk-tooltip-left`
+//                  `uk-tooltip-right`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@tooltip-z-index:                               @global-z-index + 30;
+@tooltip-max-width:                             200px;
+@tooltip-padding-vertical:                      3px;
+@tooltip-padding-horizontal:                    6px;
+@tooltip-background:                            #666;
+@tooltip-border-radius:                         2px;
+@tooltip-color:                                 @global-inverse-color;
+@tooltip-font-size:                             12px;
+
+@tooltip-margin:                                10px;
+
+
+/* ========================================================================
+   Component: Tooltip
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Position
+ * 3. Dimensions
+ * 4. Style
+ */
+
+.uk-tooltip {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @tooltip-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    max-width: @tooltip-max-width;
+    padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
+    /* 4 */
+    background: @tooltip-background;
+    border-radius: @tooltip-border-radius;
+    color: @tooltip-color;
+    font-size: @tooltip-font-size;
+    .hook-tooltip;
+}
+
+/* Show */
+.uk-tooltip.uk-active { display: block; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-tooltip-top'] { margin-top: -@tooltip-margin; }
+[class*='uk-tooltip-bottom'] { margin-top: @tooltip-margin; }
+[class*='uk-tooltip-left'] { margin-left: -@tooltip-margin; }
+[class*='uk-tooltip-right'] { margin-left: @tooltip-margin; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-tooltip-misc;
+
+.hook-tooltip() {}
+.hook-tooltip-misc() {}

data/assets/stylesheets/components/totop.less

@@ -0,0 +1,97 @@
+// Name:            Totop
+// Description:     Component to create an icon to scroll back to top
+//
+// Component:       `uk-totop`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@totop-padding:                                 5px;
+@totop-color:                                   @global-muted-color;
+
+@totop-hover-color:                             @global-color;
+
+@totop-active-color:                            @global-emphasis-color;
+
+@internal-totop-image:                          "../../images/components/totop.svg";
+
+
+/* ========================================================================
+   Component: Totop
+ ========================================================================== */
+
+/*
+ * Icon
+ */
+
+.uk-totop::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-totop-image); }
+
+/*
+ * Addopts `uk-icon`
+ */
+
+.uk-totop {
+    padding: @totop-padding;
+    color: @totop-color;
+    .hook-totop;
+}
+
+/* Hover + Focus */
+.uk-totop:hover,
+.uk-totop:focus {
+    color: @totop-hover-color;
+    outline: none;
+    .hook-totop-hover;
+}
+
+/* OnClick */
+.uk-totop:active {
+    color: @totop-active-color;
+    .hook-totop-active;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-totop-misc;
+
+.hook-totop() {}
+.hook-totop-hover() {}
+.hook-totop-active() {}
+.hook-totop-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-totop-color:                       @inverse-global-muted-color;
+@inverse-totop-hover-color:                 @inverse-global-color;
+@inverse-totop-active-color:                @inverse-global-emphasis-color;
+
+.hook-inverse() {
+
+    .uk-totop {
+        color: @inverse-totop-color;
+        .hook-inverse-totop;
+    }
+
+    .uk-totop:hover,
+    .uk-totop:focus {
+        color: @inverse-totop-hover-color;
+        .hook-inverse-totop-hover;
+    }
+
+    .uk-totop:active {
+        color: @inverse-totop-active-color;
+        .hook-inverse-totop-active;
+    }
+
+}
+
+.hook-inverse-totop() {}
+.hook-inverse-totop-hover() {}
+.hook-inverse-totop-active() {}

data/assets/stylesheets/components/transition.less

@@ -0,0 +1,187 @@
+// Name:            Transition
+// Description:     Utilities for transitions
+//
+// Component:       `uk-transition-*`
+//
+// Modifiers:       `uk-transition-fade`
+//                  `uk-transition-scale-up`
+//                  `uk-transition-scale-down`
+//                  `uk-transition-slide-top-*`
+//                  `uk-transition-slide-bottom-*`
+//                  `uk-transition-slide-left-*`
+//                  `uk-transition-slide-right-*`
+//                  `uk-transition-opaque`
+//                  `uk-transition-slow`
+//
+// Sub-objects:     `uk-transition-toggle`
+//
+// States:          `uk-hover`
+//                  `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@transition-duration:                           0.3s;
+
+@transition-scale:                              1.1;
+
+@transition-slide-small-translate:              10px;
+@transition-slide-medium-translate:             50px;
+
+@transition-slow-duration:                      0.7s;
+
+
+/* ========================================================================
+   Component: Transition
+ ========================================================================== */
+
+/*
+ * Using multiple selectors to exclude `uk-transition-toggle`
+ * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`
+ *       Just put the transition in an extra `div`
+ */
+
+.uk-transition-fade,
+[class*='uk-transition-scale'],
+[class*='uk-transition-slide'] {
+    transition-duration: @transition-duration;
+    transition-timing-function: ease-out;
+    transition-property: opacity, transform, filter;
+}
+
+/*
+ * Fade
+ */
+
+.uk-transition-fade { opacity: 0; }
+
+.uk-transition-toggle:hover [class*='uk-transition-fade'],
+.uk-transition-toggle.uk-hover [class*='uk-transition-fade'] { opacity: 1; }
+
+/*
+ * Scale
+ * Note: Using `scale3d` for better image rendering
+ */
+
+[class*='uk-transition-scale'] { opacity: 0; }
+
+.uk-transition-scale-up {
+    -webkit-transform: scale3d(1,1,1);
+    transform: scale3d(1,1,1);
+}
+
+.uk-transition-toggle:hover .uk-transition-scale-up,
+.uk-transition-toggle.uk-hover .uk-transition-scale-up {
+    opacity: 1;
+    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);
+    transform: scale3d(@transition-scale,@transition-scale,1);
+}
+
+.uk-transition-scale-down {
+    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);
+    transform: scale3d(@transition-scale,@transition-scale,1);
+}
+
+.uk-transition-toggle:hover .uk-transition-scale-down,
+.uk-transition-toggle.uk-hover .uk-transition-scale-down {
+    opacity: 1;
+    -webkit-transform: scale3d(1,1,1);
+    transform: scale3d(1,1,1);
+}
+
+/*
+ * Slide
+ */
+
+[class*='uk-transition-slide'] { opacity: 0; }
+
+.uk-transition-slide-top {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+}
+
+.uk-transition-slide-bottom {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+}
+
+.uk-transition-slide-left {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+}
+
+.uk-transition-slide-right {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+.uk-transition-slide-top-small {
+    -webkit-transform: translateY(-@transition-slide-small-translate);
+    transform: translateY(-@transition-slide-small-translate);
+}
+
+.uk-transition-slide-bottom-small {
+    -webkit-transform: translateY(@transition-slide-small-translate);
+    transform: translateY(@transition-slide-small-translate);
+}
+
+.uk-transition-slide-left-small {
+    -webkit-transform: translateX(-@transition-slide-small-translate);
+    transform: translateX(-@transition-slide-small-translate);
+}
+
+.uk-transition-slide-right-small {
+    -webkit-transform: translateX(@transition-slide-small-translate);
+    transform: translateX(@transition-slide-small-translate);
+}
+
+.uk-transition-slide-top-medium {
+    -webkit-transform: translateY(-@transition-slide-medium-translate);
+    transform: translateY(-@transition-slide-medium-translate);
+}
+
+.uk-transition-slide-bottom-medium {
+    -webkit-transform: translateY(@transition-slide-medium-translate);
+    transform: translateY(@transition-slide-medium-translate);
+}
+
+.uk-transition-slide-left-medium {
+    -webkit-transform: translateX(-@transition-slide-medium-translate);
+    transform: translateX(-@transition-slide-medium-translate);
+}
+
+.uk-transition-slide-right-medium {
+    -webkit-transform: translateX(@transition-slide-medium-translate);
+    transform: translateX(@transition-slide-medium-translate);
+}
+
+/* Hover */
+.uk-transition-toggle:hover [class*='uk-transition-slide'],
+.uk-transition-toggle.uk-hover [class*='uk-transition-slide'] {
+    opacity: 1;
+    -webkit-transform: translateX(0) translateY(0);
+    transform: translateX(0) translateY(0);
+}
+
+
+/* Opacity modifier
+========================================================================== */
+
+.uk-transition-opaque { opacity: 1; }
+
+
+/* Duration modifiers
+========================================================================== */
+
+.uk-transition-slow { transition-duration: @transition-slow-duration; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-transition-misc;
+
+.hook-transition-misc() {}