uikit3-rails 0.1.0

data/assets/stylesheets/components/variables.less

@@ -0,0 +1,117 @@
+//
+// Component:       Variables
+// Description:     Defines common values which are used across all components
+//
+// ========================================================================
+
+
+// Breakpoints
+// ========================================================================
+
+// Phone Portrait:   Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
+// Phone Landscape:  Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
+// Tablet Portrait:  iPad (768x1024), Galaxy Tab (800x1280),
+// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
+// Desktop:          Galaxy Tab (1280x800), iPad Pro (1366x1024)
+
+@breakpoint-small:                             640px;  // Phone landscape
+@breakpoint-medium:                            960px;  // Tablet Landscape
+@breakpoint-large:                             1200px; // Desktop
+@breakpoint-xlarge:                            1600px; // Large Screens
+
+@breakpoint-xsmall-max:                        (@breakpoint-small - 1);
+@breakpoint-small-max:                         (@breakpoint-medium - 1);
+@breakpoint-medium-max:                        (@breakpoint-large - 1);
+@breakpoint-large-max:                         (@breakpoint-xlarge - 1);
+
+
+// Global variables
+// ========================================================================
+
+//
+// Typography
+//
+
+@global-font-family:                            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@global-font-size:                              16px;
+@global-line-height:                            1.5;      // 24px
+
+@global-xxlarge-font-size:                      2.625rem; // 42px
+@global-xlarge-font-size:                       2rem;     // 32px
+@global-large-font-size:                        1.5rem;   // 24px
+@global-medium-font-size:                       1.25rem;  // 20px
+@global-small-font-size:                        0.875rem; // 14px
+
+//
+// Colors
+//
+
+@global-color:                                  #666;
+@global-emphasis-color:                         #333;
+@global-muted-color:                            #999;
+
+@global-link-color:                             #1e87f0;
+@global-link-hover-color:                       #0f6ecd;
+
+@global-inverse-color:                          #fff;
+
+//
+// Backgrounds
+//
+
+@global-background:                             #fff;
+
+@global-muted-background:                       #f8f8f8;
+@global-primary-background:                     #1e87f0;
+@global-secondary-background:                   #222;
+
+@global-success-background:                     #32d296;
+@global-warning-background:                     #faa05a;
+@global-danger-background:                      #f0506e;
+
+//
+// Borders
+//
+
+@global-border-width:                           1px;
+@global-border:                                 #e5e5e5;
+
+//
+// Box-Shadows
+//
+
+@global-small-box-shadow:                       0 2px 8px rgba(0,0,0,0.08);
+@global-medium-box-shadow:                      0 5px 15px rgba(0,0,0,0.08);
+@global-large-box-shadow:                       0 14px 25px rgba(0,0,0,0.16);
+@global-xlarge-box-shadow:                      0 28px 50px rgba(0,0,0,0.16);
+
+//
+// Spacings
+//
+
+// Used in margin, section, list
+@global-margin:                                 20px;
+@global-small-margin:                           10px;
+@global-medium-margin:                          40px;
+@global-large-margin:                           70px;
+@global-xlarge-margin:                          140px;
+
+// Used in grid, column, container, align, card, padding
+@global-gutter:                                 30px;
+@global-small-gutter:                           15px;
+@global-medium-gutter:                          40px;
+@global-large-gutter:                           70px;
+
+//
+// Controls
+//
+
+@global-control-height:                         40px;
+@global-control-small-height:                   30px;
+@global-control-large-height:                   55px;
+
+//
+// Z-index
+//
+
+@global-z-index:                                1000;

data/assets/stylesheets/components/visibility.less

@@ -0,0 +1,109 @@
+// Name:            Visibility
+// Description:     Utilities to show or hide content on breakpoints, hover or touch
+//
+// Component:       `uk-hidden-*`
+//                  `uk-visible-*`
+//                  `uk-invisible`
+//                  `uk-visible-toggle`
+//                  `uk-hidden-hover`
+//                  `uk-invisible-hover`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Visibility
+ ========================================================================== */
+
+/*
+ * Hidden
+ * `hidden` attribute also set here to make it stronger
+ */
+
+[hidden],
+.uk-hidden { display: none !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-hidden\@s { display: none !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-hidden\@m { display: none !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-hidden\@l { display: none !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-hidden\@xl { display: none !important; }
+
+}
+
+/*
+ * Visible
+ */
+
+/* Phone portrait and smaller */
+@media (max-width: @breakpoint-xsmall-max) {
+
+    .uk-visible\@s { display: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: @breakpoint-small-max) {
+
+    .uk-visible\@m { display: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: @breakpoint-medium-max) {
+
+    .uk-visible\@l { display: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: @breakpoint-large-max) {
+
+    .uk-visible\@xl { display: none !important; }
+
+}
+
+
+/* Visibility
+ ========================================================================== */
+
+.uk-invisible { visibility: hidden !important; }
+
+
+/* Hover
+ ========================================================================== */
+
+/* Hidden */
+.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover { display: none !important; }
+
+/* Invisible */
+.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-invisible-hover { visibility: hidden !important; }
+
+
+
+// Hooks
+// ========================================================================
+
+.hook-visibility-misc;
+
+.hook-visibility-misc() {}

data/assets/stylesheets/components/width.less

@@ -0,0 +1,418 @@
+// Name:            Width
+// Description:     Utilities for widths
+//
+// Component:       `uk-child-width-*`
+//                  `uk-width-*`
+//
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@width-small-width:                             150px;
+@width-medium-width:                            300px;
+@width-large-width:                             450px;
+@width-xlarge-width:                            600px;
+@width-xxlarge-width:                           750px;
+
+
+/* ========================================================================
+   Component: Width
+ ========================================================================== */
+
+
+/* Equal child widths
+ ========================================================================== */
+
+[class*='uk-child-width'] > * {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.uk-child-width-1-2 > * { width: 50%; }
+.uk-child-width-1-3 > * { width: ~'calc(100% * 1 / 3.001)'; }
+.uk-child-width-1-4 > * { width: 25%; }
+.uk-child-width-1-5 > * { width: 20%; }
+.uk-child-width-1-6 > * { width: ~'calc(100% * 1 / 6.001)'; }
+
+.uk-child-width-auto > * { width: auto; }
+
+/*
+ *    Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide
+ *    and the grid gutter is 0 pixels wide
+ */
+
+.uk-child-width-expand > * { width: 1px; }
+
+/*
+ * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink
+ *    below their minimum content size. To change this, set the min-width.
+ *    Only needed for Firefox. All other browsers ignore this.
+ *
+ * 2. `width` is ignored when wrapping flex items in Safari
+ *    https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
+ */
+
+.uk-child-width-expand > :not([class*='uk-width']) {
+    -ms-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    /* 1 */
+    min-width: 0;
+    /* 2 */
+    flex-basis: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-child-width-1-1\@s > * { width: 100%; }
+    .uk-child-width-1-2\@s > * { width: 50%; }
+    .uk-child-width-1-3\@s > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-4\@s > * { width: 25%; }
+    .uk-child-width-1-5\@s > * { width: 20%; }
+    .uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
+
+    .uk-child-width-auto\@s > * { width: auto; }
+    .uk-child-width-expand\@s > * { width: 1px; }
+
+    .uk-child-width-expand\@s > :not([class*='uk-width']) {
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-child-width-1-1\@m > * { width: 100%; }
+    .uk-child-width-1-2\@m > * { width: 50%; }
+    .uk-child-width-1-3\@m > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-4\@m > * { width: 25%; }
+    .uk-child-width-1-5\@m > * { width: 20%; }
+    .uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
+
+    .uk-child-width-auto\@m > * { width: auto; }
+    .uk-child-width-expand\@m > * { width: 1px; }
+
+    .uk-child-width-expand\@m > :not([class*='uk-width']) {
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-child-width-1-1\@l > * { width: 100%; }
+    .uk-child-width-1-2\@l > * { width: 50%; }
+    .uk-child-width-1-3\@l > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-4\@l > * { width: 25%; }
+    .uk-child-width-1-5\@l > * { width: 20%; }
+    .uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
+
+    .uk-child-width-auto\@l > * { width: auto; }
+    .uk-child-width-expand\@l > * { width: 1px; }
+
+    .uk-child-width-expand\@l > :not([class*='uk-width']) {
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-child-width-1-1\@xl > * { width: 100%; }
+    .uk-child-width-1-2\@xl > * { width: 50%; }
+    .uk-child-width-1-3\@xl > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-4\@xl > * { width: 25%; }
+    .uk-child-width-1-5\@xl > * { width: 20%; }
+    .uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
+
+    .uk-child-width-auto\@xl > * { width: auto; }
+    .uk-child-width-expand\@xl > * { width: 1px; }
+
+    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+
+/* Single Widths
+ ========================================================================== */
+
+/*
+ * 1. `max-width` is needed for the pixel-based classes
+ */
+
+[class*='uk-width'] {
+    box-sizing: border-box;
+    width: 100%;
+    /* 1 */
+   max-width: 100%;
+}
+
+/* Halves */
+.uk-width-1-2 { width: 50%; }
+
+/* Thirds */
+.uk-width-1-3 { width: ~'calc(100% * 1 / 3.001)'; }
+.uk-width-2-3 { width: ~'calc(100% * 2 / 3.001)'; }
+
+/* Quarters */
+.uk-width-1-4 { width: 25%; }
+.uk-width-3-4 { width: 75%; }
+
+/* Fifths */
+.uk-width-1-5 { width: 20%; }
+.uk-width-2-5 { width: 40%; }
+.uk-width-3-5 { width: 60%; }
+.uk-width-4-5 { width: 80%; }
+
+/* Sixths */
+.uk-width-1-6 { width: ~'calc(100% * 1 / 6.001)'; }
+.uk-width-5-6 { width: ~'calc(100% * 5 / 6.001)'; }
+
+/* Pixel */
+.uk-width-small { width: @width-small-width; }
+.uk-width-medium { width: @width-medium-width; }
+.uk-width-large { width: @width-large-width; }
+.uk-width-xlarge { width: @width-xlarge-width; }
+.uk-width-xxlarge { width: @width-xxlarge-width; }
+
+/* Auto */
+.uk-width-auto { width: auto; }
+
+/* Expand */
+.uk-width-expand {
+    width: 1px;
+    -ms-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    min-width: 0;
+    flex-basis: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    /* Whole */
+    .uk-width-1-1\@s { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@s { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@s { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-width-2-3\@s { width: ~'calc(100% * 2 / 3.001)'; }
+
+    /* Quarters */
+    .uk-width-1-4\@s { width: 25%; }
+    .uk-width-3-4\@s { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@s { width: 20%; }
+    .uk-width-2-5\@s { width: 40%; }
+    .uk-width-3-5\@s { width: 60%; }
+    .uk-width-4-5\@s { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@s { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-width-5-6\@s { width: ~'calc(100% * 5 / 6.001)'; }
+
+    /* Pixel */
+    .uk-width-small\@s { width: @width-small-width; }
+    .uk-width-medium\@s { width: @width-medium-width; }
+    .uk-width-large\@s { width: @width-large-width; }
+    .uk-width-xlarge\@s { width: @width-xlarge-width; }
+    .uk-width-xxlarge\@s { width: @width-xxlarge-width; }
+
+    /* Auto */
+    .uk-width-auto\@s { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@s {
+        width: 1px;
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    /* Whole */
+    .uk-width-1-1\@m { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@m { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@m { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-width-2-3\@m { width: ~'calc(100% * 2 / 3.001)'; }
+
+    /* Quarters */
+    .uk-width-1-4\@m { width: 25%; }
+    .uk-width-3-4\@m { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@m { width: 20%; }
+    .uk-width-2-5\@m { width: 40%; }
+    .uk-width-3-5\@m { width: 60%; }
+    .uk-width-4-5\@m { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@m { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-width-5-6\@m { width: ~'calc(100% * 5 / 6.001)'; }
+
+    /* Pixel */
+    .uk-width-small\@m { width: @width-small-width; }
+    .uk-width-medium\@m { width: @width-medium-width; }
+    .uk-width-large\@m { width: @width-large-width; }
+    .uk-width-xlarge\@m { width: @width-xlarge-width; }
+    .uk-width-xxlarge\@m { width: @width-xxlarge-width; }
+
+     /* Auto */
+    .uk-width-auto\@m { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@m {
+        width: 1px;
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    /* Whole */
+    .uk-width-1-1\@l { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@l { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@l { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-width-2-3\@l { width: ~'calc(100% * 2 / 3.001)'; }
+
+    /* Quarters */
+    .uk-width-1-4\@l { width: 25%; }
+    .uk-width-3-4\@l { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@l { width: 20%; }
+    .uk-width-2-5\@l { width: 40%; }
+    .uk-width-3-5\@l { width: 60%; }
+    .uk-width-4-5\@l { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@l { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-width-5-6\@l { width: ~'calc(100% * 5 / 6.001)'; }
+
+    /* Pixel */
+    .uk-width-small\@l { width: @width-small-width; }
+    .uk-width-medium\@l { width: @width-medium-width; }
+    .uk-width-large\@l { width: @width-large-width; }
+    .uk-width-xlarge\@l { width: @width-xlarge-width; }
+    .uk-width-xxlarge\@l { width: @width-xxlarge-width; }
+
+    /* Auto */
+    .uk-width-auto\@l { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@l {
+        width: 1px;
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    /* Whole */
+    .uk-width-1-1\@xl { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@xl { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@xl { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-width-2-3\@xl { width: ~'calc(100% * 2 / 3.001)'; }
+
+    /* Quarters */
+    .uk-width-1-4\@xl { width: 25%; }
+    .uk-width-3-4\@xl { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@xl { width: 20%; }
+    .uk-width-2-5\@xl { width: 40%; }
+    .uk-width-3-5\@xl { width: 60%; }
+    .uk-width-4-5\@xl { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@xl { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-width-5-6\@xl { width: ~'calc(100% * 5 / 6.001)'; }
+
+    /* Pixel */
+    .uk-width-small\@xl { width: @width-small-width; }
+    .uk-width-medium\@xl { width: @width-medium-width; }
+    .uk-width-large\@xl { width: @width-large-width; }
+    .uk-width-xlarge\@xl { width: @width-xlarge-width; }
+    .uk-width-xxlarge\@xl { width: @width-xxlarge-width; }
+
+    /* Auto */
+    .uk-width-auto\@xl { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@xl {
+        width: 1px;
+        -ms-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        min-width: 0;
+        flex-basis: 1px;
+    }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-width-misc;
+
+.hook-width-misc() {}