uikit3-rails 0.1.0

data/assets/stylesheets/components/card.less

@@ -0,0 +1,363 @@
+// Name:            Card
+// Description:     Component to create boxed content containers
+//
+// Component:       `uk-card`
+//
+// Sub-objects:     `uk-card-body`
+//                  `uk-card-header`
+//                  `uk-card-footer`
+//                  `uk-card-media-*`
+//                  `uk-card-title`
+//                  `uk-card-badge`
+//
+// Modifiers:       `uk-card-hover`
+//                  `uk-card-default`
+//                  `uk-card-primary`
+//                  `uk-card-secondary`
+//                  `uk-card-small`
+//                  `uk-card-large`
+//
+// Uses:            `uk-grid-stack`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@card-body-padding-horizontal:                 @global-gutter;
+@card-body-padding-vertical:                   @global-gutter;
+
+@card-body-padding-horizontal-l:               @global-medium-gutter;
+@card-body-padding-vertical-l:                 @global-medium-gutter;
+
+@card-header-padding-horizontal:               @global-gutter;
+@card-header-padding-vertical:                 round(@global-gutter / 2);
+
+@card-header-padding-horizontal-l:             @global-medium-gutter;
+@card-header-padding-vertical-l:               round(@global-medium-gutter / 2);
+
+@card-footer-padding-horizontal:               @global-gutter;
+@card-footer-padding-vertical:                 (@global-gutter / 2);
+
+@card-footer-padding-horizontal-l:             @global-medium-gutter;
+@card-footer-padding-vertical-l:               round(@global-medium-gutter / 2);
+
+@card-title-font-size:                         @global-large-font-size;
+@card-title-line-height:                       1.4;
+
+@card-badge-top:                               @global-gutter;
+@card-badge-right:                             @card-badge-top;
+
+@card-hover-background:                        @global-muted-background;
+
+@card-default-background:                      @global-muted-background;
+@card-default-color:                           @global-color;
+@card-default-title-color:                     @global-emphasis-color;
+@card-default-hover-background:                darken(@card-default-background, 5%);
+
+@card-primary-background:                      @global-primary-background;
+@card-primary-color:                           @global-inverse-color;
+@card-primary-title-color:                     @card-primary-color;
+@card-primary-hover-background:                darken(@card-primary-background, 5%);
+@card-primary-color-mode:                      light;
+
+@card-secondary-background:                    @global-secondary-background;
+@card-secondary-color:                         @global-inverse-color;
+@card-secondary-title-color:                   @card-secondary-color;
+@card-secondary-hover-background:              darken(@card-secondary-background, 5%);
+@card-secondary-color-mode:                    light;
+
+@card-small-body-padding-horizontal:           @global-margin;
+@card-small-body-padding-vertical:             @global-margin;
+@card-small-header-padding-horizontal:         @global-margin;
+@card-small-header-padding-vertical:           round(@global-margin / 1.5);
+@card-small-footer-padding-horizontal:         @global-margin;
+@card-small-footer-padding-vertical:           round(@global-margin / 1.5);
+
+@card-large-body-padding-horizontal-l:         @global-large-gutter;
+@card-large-body-padding-vertical-l:           @global-large-gutter;
+@card-large-header-padding-horizontal-l:       @global-large-gutter;
+@card-large-header-padding-vertical-l:         round(@global-large-gutter / 2);
+@card-large-footer-padding-horizontal-l:       @global-large-gutter;
+@card-large-footer-padding-vertical-l:         round(@global-large-gutter / 2);
+
+
+/* ========================================================================
+   Component: Card
+ ========================================================================== */
+
+.uk-card {
+    position: relative;
+    box-sizing: border-box;
+    .hook-card;
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-card-body {
+    padding: @card-body-padding-vertical @card-body-padding-horizontal;
+    .hook-card-body;
+}
+
+.uk-card-header {
+    padding: @card-header-padding-vertical @card-header-padding-horizontal;
+    .hook-card-header;
+}
+
+.uk-card-footer {
+    padding: @card-footer-padding-vertical @card-footer-padding-horizontal;
+    .hook-card-footer;
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-card-body { padding: @card-body-padding-vertical-l @card-body-padding-horizontal-l; }
+
+    .uk-card-header { padding: @card-header-padding-vertical-l @card-header-padding-horizontal-l; }
+
+    .uk-card-footer { padding: @card-footer-padding-vertical-l @card-footer-padding-horizontal-l; }
+
+}
+
+/*
+ * Micro clearfix
+ */
+
+.uk-card-body::before,
+.uk-card-body::after,
+.uk-card-header::before,
+.uk-card-header::after,
+.uk-card-footer::before,
+.uk-card-footer::after {
+    content: "";
+    display: table;
+}
+
+.uk-card-body::after,
+.uk-card-header::after,
+.uk-card-footer::after { clear: both; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-card-body > :last-child,
+.uk-card-header > :last-child,
+.uk-card-footer > :last-child { margin-bottom: 0; }
+
+
+/* Media
+ ========================================================================== */
+
+/*
+ * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+ * Implemented by the theme
+ */
+
+[class*='uk-card-media'] {
+    .hook-card-media;
+}
+
+.uk-card-media-top,
+.uk-grid-stack > .uk-card-media-left,
+.uk-grid-stack > .uk-card-media-right  {
+    .hook-card-media-top;
+}
+
+.uk-card-media-bottom {
+    .hook-card-media-bottom;
+}
+
+:not(.uk-grid-stack) > .uk-card-media-left {
+    .hook-card-media-left;
+}
+
+:not(.uk-grid-stack) > .uk-card-media-right {
+    .hook-card-media-right;
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-card-title {
+    font-size: @card-title-font-size;
+    line-height: @card-title-line-height;
+    .hook-card-title;
+}
+
+
+/* Badge
+ ========================================================================== */
+
+.uk-card-badge {
+    position: absolute;
+    top: @card-badge-top;
+    right: @card-badge-right;
+    z-index: 1;
+    .hook-card-badge;
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-card-badge:first-child + * { margin-top: 0; }
+
+
+/* Hover modifier
+ ========================================================================== */
+
+.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
+    background: @card-hover-background;
+    .hook-card-hover;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ * Note: Header and Footer are only implemented for the default style
+ */
+
+.uk-card-default {
+    background: @card-default-background;
+    color: @card-default-color;
+    .hook-card-default;
+}
+
+.uk-card-default .uk-card-title {
+    color: @card-default-title-color;
+    .hook-card-default-title;
+}
+
+.uk-card-default.uk-card-hover:hover {
+    background-color: @card-default-hover-background;
+    .hook-card-default-hover;
+}
+
+.uk-card-default .uk-card-header {
+    .hook-card-default-header;
+}
+
+.uk-card-default .uk-card-footer {
+    .hook-card-default-footer;
+}
+
+/*
+ * Primary
+ */
+
+.uk-card-primary {
+    background: @card-primary-background;
+    color: @card-primary-color;
+    .hook-card-primary;
+}
+
+.uk-card-primary .uk-card-title {
+    color: @card-primary-title-color;
+    .hook-card-primary-title;
+}
+
+.uk-card-primary.uk-card-hover:hover {
+    background-color: @card-primary-hover-background;
+    .hook-card-primary-hover;
+}
+
+// Color Mode
+.uk-card-primary.uk-card-body:extend(.uk-light all) when (@card-primary-color-mode = light) {}
+.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-primary-color-mode = light) {}
+.uk-card-primary.uk-card-body:extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
+.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
+
+/*
+ * Secondary
+ */
+
+.uk-card-secondary {
+    background: @card-secondary-background;
+    color: @card-secondary-color;
+    .hook-card-secondary;
+}
+
+.uk-card-secondary .uk-card-title {
+    color: @card-secondary-title-color;
+    .hook-card-secondary-title;
+}
+
+.uk-card-secondary.uk-card-hover:hover {
+    background-color: @card-secondary-hover-background;
+    .hook-card-secondary-hover;
+}
+
+// Color Mode
+.uk-card-secondary.uk-card-body:extend(.uk-light all) when (@card-secondary-color-mode = light) {}
+.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
+.uk-card-secondary.uk-card-body:extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
+.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-card-small.uk-card-body,
+.uk-card-small .uk-card-body { padding: @card-small-body-padding-vertical @card-small-body-padding-horizontal; }
+
+.uk-card-small .uk-card-header { padding: @card-small-header-padding-vertical @card-small-header-padding-horizontal; }
+.uk-card-small .uk-card-footer { padding: @card-small-footer-padding-vertical @card-small-footer-padding-horizontal; }
+
+/*
+ * Large
+ */
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-card-large.uk-card-body,
+    .uk-card-large .uk-card-body { padding: @card-large-body-padding-vertical-l @card-large-body-padding-horizontal-l; }
+
+    .uk-card-large .uk-card-header { padding: @card-large-header-padding-vertical-l @card-large-header-padding-horizontal-l; }
+    .uk-card-large .uk-card-footer { padding: @card-large-footer-padding-vertical-l @card-large-footer-padding-horizontal-l; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-card-misc;
+
+.hook-card() {}
+.hook-card-body() {}
+.hook-card-header() {}
+.hook-card-footer() {}
+.hook-card-media() {}
+.hook-card-media-top() {}
+.hook-card-media-bottom() {}
+.hook-card-media-left() {}
+.hook-card-media-right() {}
+.hook-card-title() {}
+.hook-card-badge() {}
+.hook-card-hover() {}
+.hook-card-default() {}
+.hook-card-default-title() {}
+.hook-card-default-hover() {}
+.hook-card-default-header() {}
+.hook-card-default-footer() {}
+.hook-card-primary() {}
+.hook-card-primary-title() {}
+.hook-card-primary-hover() {}
+.hook-card-secondary() {}
+.hook-card-secondary-title() {}
+.hook-card-secondary-hover() {}
+.hook-card-misc() {}

data/assets/stylesheets/components/close.less

@@ -0,0 +1,119 @@
+// Name:            Close
+// Description:     Component to create a close button
+//
+// Component:       `uk-close`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@close-color:                                   @global-muted-color;
+@close-hover-color:                             @global-color;
+
+@internal-close-image:                          "../../images/components/close.svg";
+@internal-close-large-image:                    "../../images/components/close-large.svg";
+
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+
+/*
+ * Icon
+ */
+
+.uk-close::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-close-image); }
+
+/*
+ * Adopts `uk-icon`
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Address `overflow` set to `hidden` in IE.
+ * 4. Correct `font` properties and `color` not being inherited for `button`.
+ * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 6. Remove default `button` padding and background color
+ * 7. Required for `button`.
+ * 8. Re-reset `line-height` for icon
+ */
+
+.uk-close {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    overflow: visible;
+    /* 4 */
+    font: inherit;
+    color: @close-color;
+    /* 5 */
+    text-transform: none;
+    /* 6. */
+    padding: 0;
+    background-color: transparent;
+    /* 7 */
+    cursor: pointer;
+    /* 8 */
+    line-height: 0;
+    .hook-close;
+}
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-close::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+ /* Hover + Focus */
+.uk-close:hover,
+.uk-close:focus {
+    color: @close-hover-color;
+    outline: none;
+    .hook-close-hover;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-close-large::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-close-large-image); }
+
+
+// Hooks
+// ========================================================================
+
+.hook-close-misc;
+
+.hook-close() {}
+.hook-close-hover() {}
+.hook-close-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-close-color:                           @inverse-global-muted-color;
+@inverse-close-hover-color:                     @inverse-global-color;
+
+.hook-inverse() {
+
+    .uk-close {
+        color: @inverse-close-color;
+        .hook-inverse-close;
+    }
+
+    .uk-close:hover,
+    .uk-close:focus {
+        color: @inverse-close-hover-color;
+        .hook-inverse-close-hover;
+    }
+
+}
+
+.hook-inverse-close() {}
+.hook-inverse-close-hover() {}