@frankenstyle/uikit 0.0.1

package/src/less/components/notification.less

@@ -0,0 +1,191 @@
+// 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-top:                     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;
+    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();
+}
+
+* + .uk-notification-message { margin-top: @notification-message-margin-top; }
+
+
+/* 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() {}

package/src/less/components/offcanvas.less

@@ -0,0 +1,329 @@
+// Name:            Off-canvas
+// Description:     Component to create an off-canvas sidebar
+//
+// Component:       `uk-offcanvas`
+//
+// Sub-objects:     `uk-offcanvas-bar`
+//                  `uk-offcanvas-container`
+//                  `uk-offcanvas-page`
+//
+// Adopted:         `uk-offcanvas-close`
+//
+// Modifiers:       `uk-offcanvas-flip`
+//                  `uk-offcanvas-bar-animation`
+//                  `uk-offcanvas-reveal`
+//                  `uk-offcanvas-overlay`
+//                  `uk-offcanvas-container-animation`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@offcanvas-z-index:                             @global-z-index;
+
+@offcanvas-bar-width:                           270px;
+@offcanvas-bar-padding-vertical:                20px;
+@offcanvas-bar-padding-horizontal:              20px;
+@offcanvas-bar-background:                      @global-secondary-background;
+@offcanvas-bar-color-mode:                      light;
+
+@offcanvas-bar-width-s:                         350px;
+@offcanvas-bar-padding-vertical-s:              @global-gutter;
+@offcanvas-bar-padding-horizontal-s:            @global-gutter;
+
+@offcanvas-close-position:                      5px;
+@offcanvas-close-padding:                       5px;
+
+@offcanvas-close-position-s:                    10px;
+
+@offcanvas-overlay-background:                  rgba(0,0,0,0.1);
+
+
+/* ========================================================================
+   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;
+}
+
+
+/* Bar
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Size and style
+ * 3. Allow scrolling
+ */
+
+.uk-offcanvas-bar {
+    --uk-inverse: @offcanvas-bar-color-mode;
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -@offcanvas-bar-width;
+    /* 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;
+    .hook-offcanvas-bar();
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-offcanvas-bar {
+        left: -@offcanvas-bar-width-s;
+        width: @offcanvas-bar-width-s;
+        padding: @offcanvas-bar-padding-vertical-s @offcanvas-bar-padding-horizontal-s;
+    }
+
+}
+
+// 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: -@offcanvas-bar-width;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-offcanvas-flip .uk-offcanvas-bar { right: -@offcanvas-bar-width-s; }
+
+}
+
+/*
+ * Open
+ */
+
+.uk-open > .uk-offcanvas-bar { left: 0; }
+.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
+    left: auto;
+    right: 0;
+}
+
+/*
+ * Slide Animation (Used in slide and push mode)
+ */
+
+.uk-offcanvas-bar-animation { transition: left 0.3s ease-out; }
+.uk-offcanvas-flip .uk-offcanvas-bar-animation { transition-property: right; }
+
+/*
+ * Reveal Animation
+ * 1. Set position
+ * 2. Clip the bar
+ * 3. Animation
+ * 4. Reset position
+ */
+
+.uk-offcanvas-reveal {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    width: 0;
+    overflow: hidden;
+    /* 3 */
+    transition: width 0.3s ease-out;
+}
+
+.uk-offcanvas-reveal .uk-offcanvas-bar {
+    /* 4 */
+    left: 0;
+}
+
+.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
+    /* 4 */
+    left: auto;
+    right: 0;
+}
+
+.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width; }
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width-s; }
+
+}
+
+/*
+ * Flip modifier
+ */
+
+.uk-offcanvas-flip .uk-offcanvas-reveal {
+    right: 0;
+    left: auto;
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+.uk-offcanvas-close {
+    position: absolute;
+    z-index: @offcanvas-z-index;
+    top: @offcanvas-close-position;
+    right: @offcanvas-close-position;
+    padding: @offcanvas-close-padding;
+    .hook-offcanvas-close();
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-offcanvas-close {
+        top: @offcanvas-close-position-s;
+        right: @offcanvas-close-position-s;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
+
+/* Overlay
+ ========================================================================== */
+
+/*
+ * Overlay the whole page. Needed for the `::before`
+ * 1. Using `100vw` so no modification is needed when off-canvas is flipped
+ * 2. Allow for closing with swipe gesture on devices with pointer events.
+ */
+
+.uk-offcanvas-overlay {
+    /* 1 */
+    width: 100vw;
+    /* 2 */
+    touch-action: none;
+}
+
+/*
+ * 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;
+    transition: opacity 0.15s linear;
+    .hook-offcanvas-overlay();
+}
+
+.uk-offcanvas-overlay.uk-open::before { opacity: 1; }
+
+
+/* Prevent scrolling
+ ========================================================================== */
+
+/*
+ * Prevent horizontal scrollbar when the content is slide-out
+ * Has to be on the `html` element too to make it work on the `body`
+ * 1. `clip` is needed for `position: sticky` elements to keep their position
+ */
+
+.uk-offcanvas-page,
+.uk-offcanvas-container {
+    overflow-x: hidden;
+    /* 1 */
+    overflow-x: clip;
+}
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * Prepare slide-out animation (Used in reveal and push mode)
+ * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
+ * lose their fixed state and behaves like `absolute` within a transformed container
+ * 1. Provide a fixed width and prevent shrinking
+ */
+
+.uk-offcanvas-container {
+    position: relative;
+    left: 0;
+    transition: left 0.3s ease-out;
+    /* 1 */
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/*
+ * Activate slide-out animation
+ */
+
+:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: @offcanvas-bar-width; }
+
+.uk-offcanvas-flip.uk-offcanvas-container-animation { left: -@offcanvas-bar-width; }
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: @offcanvas-bar-width-s; }
+
+    .uk-offcanvas-flip.uk-offcanvas-container-animation { left: -@offcanvas-bar-width-s; }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-offcanvas-misc();
+
+.hook-offcanvas-bar() {}
+.hook-offcanvas-close() {}
+.hook-offcanvas-overlay() {}
+.hook-offcanvas-misc() {}

package/src/less/components/overlay.less

@@ -0,0 +1,92 @@
+// 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-default-color-mode:                    dark;
+
+@overlay-primary-background:                    fade(@global-secondary-background, 80%);
+@overlay-primary-color-mode:                    light;
+
+
+/* ========================================================================
+   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 {
+    .hook-overlay-icon();
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-overlay-default {
+    --uk-inverse: @overlay-default-color-mode;
+    background: @overlay-default-background;
+    .hook-overlay-default();
+}
+
+// Color Mode
+.uk-overlay-default:extend(.uk-light all) when (@overlay-default-color-mode = light) {}
+.uk-overlay-default:extend(.uk-dark all) when (@overlay-default-color-mode = dark) {}
+
+/*
+ * Primary
+ */
+
+.uk-overlay-primary {
+    --uk-inverse: @overlay-primary-color-mode;
+    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() {}

package/src/less/components/padding.less

@@ -0,0 +1,81 @@
+// Name:            Padding
+// Description:     Utilities for padding
+//
+// Component:       `uk-padding`
+//                  `uk-padding-large`
+//                  `uk-padding-remove-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@padding-padding:                                       @global-gutter;
+@padding-padding-l:                                     @global-medium-gutter;
+
+@padding-small-padding:                                 @global-small-gutter;
+
+@padding-large-padding:                                 @global-medium-gutter;
+@padding-large-padding-l:                               @global-large-gutter;
+
+
+/* ========================================================================
+   Component: Padding
+ ========================================================================== */
+
+.uk-padding { padding: @padding-padding; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-padding { padding: @padding-padding-l; }
+
+}
+
+
+/* Small
+ ========================================================================== */
+
+.uk-padding-small { padding: @padding-small-padding; }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-padding-large { padding: @padding-large-padding; }
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-padding-large { padding: @padding-large-padding-l; }
+
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-padding-remove { padding: 0 !important; }
+.uk-padding-remove-top { padding-top: 0 !important; }
+.uk-padding-remove-bottom { padding-bottom: 0 !important; }
+.uk-padding-remove-left { padding-left: 0 !important; }
+.uk-padding-remove-right { padding-right: 0 !important; }
+
+.uk-padding-remove-vertical {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.uk-padding-remove-horizontal {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-padding-misc();
+
+.hook-padding-misc() {}