uikit3-rails 0.1.0

data/assets/stylesheets/components/notification.less

@@ -0,0 +1,190 @@
+// Name:            Notification
+// Description:     Component to create notification messages
+//
+// Component:       `uk-notification`
+//
+// Sub-objects:     `uk-notification-message`
+//
+// Adopted:         `uk-notification-close`
+//
+// Modifiers:       `uk-notification-top-center`
+//                  `uk-notification-top-right`
+//                  `uk-notification-bottom-left`
+//                  `uk-notification-bottom-center`
+//                  `uk-notification-bottom-right`
+//                  `uk-notification-message-primary`
+//                  `uk-notification-message-success`
+//                  `uk-notification-message-warning`
+//                  `uk-notification-message-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@notification-position:                               10px;
+@notification-z-index:                                @global-z-index + 40;
+@notification-width:                                  350px;
+
+@notification-message-margin-bottom:                  10px;
+@notification-message-padding:                        @global-small-gutter;;
+@notification-message-background:                     @global-muted-background;
+@notification-message-color:                          @global-color;
+@notification-message-font-size:                      @global-medium-font-size;
+@notification-message-line-height:                    1.4;
+
+@notification-close-top:                              @notification-message-padding + 5px;
+@notification-close-right:                            @notification-message-padding;
+
+@notification-message-primary-color:                  @global-primary-background;
+@notification-message-success-color:                  @global-success-background;
+@notification-message-warning-color:                  @global-warning-background;
+@notification-message-danger-color:                   @global-danger-background;
+
+
+/* ========================================================================
+   Component: Notification
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Dimensions
+ */
+
+.uk-notification {
+    /* 1 */
+    position: fixed;
+    top: @notification-position;
+    left: @notification-position;
+    z-index: @notification-z-index;
+    /* 2 */
+    box-sizing: border-box;
+    width: @notification-width;
+    .hook-notification;
+}
+
+
+/* Position modifiers
+========================================================================== */
+
+.uk-notification-top-right,
+.uk-notification-bottom-right {
+    left: auto;
+    right: @notification-position;
+}
+
+.uk-notification-top-center,
+.uk-notification-bottom-center {
+    left: 50%;
+    margin-left: (@notification-width / -2);
+}
+
+.uk-notification-bottom-left,
+.uk-notification-bottom-right,
+.uk-notification-bottom-center {
+    top: auto;
+    bottom: @notification-position;
+}
+
+
+/* Responsiveness
+========================================================================== */
+
+/* Phones portrait and smaller */
+@media (max-width: @breakpoint-xsmall-max) {
+
+    .uk-notification {
+        left: @notification-position;
+        right: @notification-position;
+        width: auto;
+        margin: 0;
+    }
+
+}
+
+
+/* Message
+========================================================================== */
+
+.uk-notification-message {
+    position: relative;
+    margin-bottom: @notification-message-margin-bottom;
+    padding: @notification-message-padding;
+    background: @notification-message-background;
+    color: @notification-message-color;
+    font-size: @notification-message-font-size;
+    line-height: @notification-message-line-height;
+    cursor: pointer;
+    .hook-notification-message;
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-notification-close {
+    display: none;
+    position: absolute;
+    top: @notification-close-top;
+    right: @notification-close-right;
+    .hook-notification-close;
+}
+
+.uk-notification-message:hover .uk-notification-close { display: block; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Primary
+ */
+
+.uk-notification-message-primary {
+    color: @notification-message-primary-color;
+    .hook-notification-message-primary;
+}
+
+/*
+ * Success
+ */
+
+.uk-notification-message-success {
+    color: @notification-message-success-color;
+    .hook-notification-message-success;
+}
+
+/*
+ * Warning
+ */
+
+.uk-notification-message-warning {
+    color: @notification-message-warning-color;
+    .hook-notification-message-warning;
+}
+
+/*
+ * Danger
+ */
+
+.uk-notification-message-danger {
+    color: @notification-message-danger-color;
+    .hook-notification-message-danger;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-notification-misc;
+
+.hook-notification() {}
+.hook-notification-message() {}
+.hook-notification-close() {}
+.hook-notification-message-primary() {}
+.hook-notification-message-success() {}
+.hook-notification-message-warning() {}
+.hook-notification-message-danger() {}
+.hook-notification-misc() {}

data/assets/stylesheets/components/offcanvas.less

@@ -0,0 +1,250 @@
+// Name:            Off-canvas
+// Description:     Component to create an off-canvas sidebar
+//
+// Component:       `uk-offcanvas`
+//
+// Sub-objects:     `uk-offcanvas-page`
+//                  `uk-offcanvas-overlay`
+//                  `uk-offcanvas-bar`
+//
+// Modifiers:       `uk-offcanvas-flip`
+//                  `uk-offcanvas-page-animation`
+//                  `uk-offcanvas-page-overlay`
+//                  `uk-offcanvas-bar-animation`
+//                  `uk-offcanvas-reveal`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@offcanvas-z-index:                             @global-z-index;
+
+@offcanvas-overlay-background:                  rgba(0,0,0,0.1);
+
+@offcanvas-bar-width:                           270px;
+@offcanvas-bar-padding-vertical:                @global-margin;
+@offcanvas-bar-padding-horizontal:              @global-margin;
+@offcanvas-bar-background:                      @global-secondary-background;
+@offcanvas-bar-color-mode:                      light;
+
+
+/* ========================================================================
+   Component: Off-canvas
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ */
+
+.uk-offcanvas {
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @offcanvas-z-index;
+}
+
+/*
+ * Flip modifier
+ */
+
+.uk-offcanvas-flip .uk-offcanvas {
+    right: 0;
+    left: auto;
+}
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * 1. Prepare slide-out animation (Used in reveal and push mode)
+ * 2. Prevent horizontal scrollbar when page is slide-out
+ * Note: JS sets a fixed width so the page can slide-out without shinking
+ */
+
+.uk-offcanvas-page {
+    /* 1 */
+    -webkit-transition: margin-left 0.3s ease-in-out;
+    transition: margin-left 0.3s ease-in-out;
+    /* 2 */
+    overflow-x: hidden;
+}
+
+/*
+ * Activate slide-out animation
+ */
+
+.uk-offcanvas-page-animation { margin-left: @offcanvas-bar-width; }
+
+/* Flip modifier */
+.uk-offcanvas-flip.uk-offcanvas-page-animation { margin-left: -@offcanvas-bar-width; }
+
+/*
+ * Prevent scrollbar on page if overlay is used
+ */
+
+.uk-offcanvas-page-overlay { overflow: hidden; }
+
+
+/* Overlay
+ ========================================================================== */
+
+/*
+ * Overlay the whole page. Needed for the `::before`
+ * Using `100vw` so no modification is needed when off-canvas is flipped
+ */
+
+.uk-offcanvas-overlay { width: 100vw; }
+
+/*
+ * 1. Mask the whole page
+ * 2. Fade-in transition
+ */
+
+.uk-offcanvas-overlay::before {
+    /* 1 */
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: @offcanvas-overlay-background;
+    /* 2 */
+    opacity: 0;
+    -webkit-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+    .hook-offcanvas-overlay;
+}
+
+.uk-offcanvas-overlay.uk-open::before { opacity: 1; }
+
+
+/* Bar
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Size and style
+ * 3. Allow scrolling
+ * 4. Transform
+ */
+
+.uk-offcanvas-bar {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    box-sizing: border-box;
+    width: @offcanvas-bar-width;
+    padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
+    background: @offcanvas-bar-background;
+    /* 3 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 4 */
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    .hook-offcanvas-bar;
+}
+
+// Color Mode
+.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
+.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}
+
+/* Flip modifier */
+.uk-offcanvas-flip .uk-offcanvas-bar {
+    left: auto;
+    right: 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+/*
+ * Open
+ */
+
+.uk-open > .uk-offcanvas-bar {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+}
+
+/*
+ * Slide Animation (Used in slide and push mode)
+ */
+
+.uk-offcanvas-bar-animation {
+    -webkit-transition: -webkit-transform 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
+}
+
+/*
+ * Reveal Animation
+ * 1. Set the bar to target position
+ * 2. Clip the bar with `clip-path` and use `clip` as fallback
+ * 3. Animation
+ * Note: Future `clip-path` is commented out (it's not working on iOS)
+ */
+
+.uk-offcanvas-reveal {
+    /* 1 */
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    /* 2 */
+    clip: rect(0, 0, 100vh, 0);
+    //-webkit-clip-path: inset(0 @offcanvas-bar-width 0 0);
+    //clip-path: inset(0 @offcanvas-bar-width 0 0);
+    /* 3 */
+    -webkit-transition: clip 0.3s ease-in-out; //, -webkit-clip-path 0.3s ease-in-out;
+    transition: clip 0.3s ease-in-out; //, -webkit-clip-path 0.3s ease-in-out, clip-path 0.3s ease-in-out;
+}
+
+/* Fix weird scrollbar bug in Chrome if overlay is used */
+.uk-offcanvas-page:not(.uk-offcanvas-flip) .uk-offcanvas-reveal {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.uk-open > .uk-offcanvas-reveal {
+    clip: rect(0, @offcanvas-bar-width, 100vh, 0);
+    //-webkit-clip-path: inset(0);
+    //clip-path: inset(0);
+}
+
+/* Flip modifier */
+.uk-offcanvas-flip .uk-offcanvas-reveal {
+    /* 1 */
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    /* 2 */
+    clip: rect(0, @offcanvas-bar-width, 100vh, @offcanvas-bar-width);
+    //-webkit-clip-path: inset(0 0 0 @offcanvas-bar-width);
+    //clip-path: inset(0 0 0 @offcanvas-bar-width);
+}
+
+.uk-offcanvas-flip .uk-open > .uk-offcanvas-reveal {
+    clip: rect(0, @offcanvas-bar-width, 100vh, 0);
+    //-webkit-clip-path: inset(0);
+    //clip-path: inset(0);
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-offcanvas-misc;
+
+.hook-offcanvas-overlay() {}
+.hook-offcanvas-bar() {}
+.hook-offcanvas-misc() {}

data/assets/stylesheets/components/overlay.less

@@ -0,0 +1,89 @@
+// Name:            Overlay
+// Description:     Component to create content areas overlaying an image
+//
+// Component:       `uk-overlay`
+//
+// Adopted:         `uk-overlay-icon`
+//
+// Modifier:        `uk-overlay-default`
+//                  `uk-overlay-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@overlay-padding-horizontal:                    @global-gutter;
+@overlay-padding-vertical:                      @global-gutter;
+
+@overlay-default-background:                    fade(@global-background, 80%);
+
+@overlay-primary-background:                    fade(@global-secondary-background, 80%);
+@overlay-primary-color-mode:                    light;
+
+@internal-overlay-image:                        "../../images/components/overlay.svg";
+
+
+/* ========================================================================
+   Component: Overlay
+ ========================================================================== */
+
+.uk-overlay {
+    padding: @overlay-padding-vertical @overlay-padding-horizontal;
+    .hook-overlay;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-overlay > :last-child { margin-bottom: 0; }
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-overlay-icon::before { background-image: data-uri('image/svg+xml;charset=UTF-8', @internal-overlay-image); }
+
+.uk-overlay-icon {
+    .hook-overlay-icon;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-overlay-default {
+    background: @overlay-default-background;
+    .hook-overlay-default;
+}
+
+/*
+ * Primary
+ */
+
+.uk-overlay-primary {
+    background: @overlay-primary-background;
+    .hook-overlay-primary;
+}
+
+// Color Mode
+.uk-overlay-primary:extend(.uk-light all) when (@overlay-primary-color-mode = light) {}
+.uk-overlay-primary:extend(.uk-dark all) when (@overlay-primary-color-mode = dark) {}
+
+
+// Hooks
+// ========================================================================
+
+.hook-overlay-misc;
+
+.hook-overlay() {}
+.hook-overlay-icon() {}
+.hook-overlay-default() {}
+.hook-overlay-primary() {}
+.hook-overlay-misc() {}