@frankenstyle/uikit 0.0.1

package/src/less/components/leader.less

@@ -0,0 +1,75 @@
+// Name:            Leader
+// Description:     Component to create dot leaders
+//
+// Component:       `uk-leader`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@leader-fill-content:                           ~'.';
+@leader-fill-margin-left:                       @global-small-gutter;
+
+
+/* ========================================================================
+   Component: Leader
+ ========================================================================== */
+
+.uk-leader { overflow: hidden; }
+
+/*
+ * 1. Place element in text flow
+ * 2. Never break into a new line
+ * 3. Get a string back with as many repeating characters to fill the container
+ * 4. Prevent wrapping. Overflowing characters will be clipped by the container
+ */
+
+.uk-leader-fill::after {
+    /* 1 */
+    display: inline-block;
+    margin-left: @leader-fill-margin-left;
+    /* 2 */
+    width: 0;
+    /* 3 */
+    content: attr(data-fill);
+    /* 4 */
+    white-space: nowrap;
+    .hook-leader();
+}
+
+/*
+ * Hide if media does not match
+ */
+
+.uk-leader-fill.uk-leader-hide::after { display: none; }
+
+/*
+ * Pass fill character to JS
+ */
+
+:root { --uk-leader-fill-content: @leader-fill-content; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-leader-misc();
+
+.hook-leader() {}
+.hook-leader-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-leader-fill::after {
+        .hook-inverse-leader();
+    }
+
+}
+
+.hook-inverse-leader() {}

package/src/less/components/lightbox.less

@@ -0,0 +1,215 @@
+// Name:            Lightbox
+// Description:     Component to create an lightbox image gallery
+//
+// Component:       `uk-lightbox`
+//
+// Sub-objects:     `uk-lightbox-page`
+//                  `uk-lightbox-items`
+//                  `uk-lightbox-items-fit`
+//                  `uk-lightbox-thumbnav`
+//                  `uk-lightbox-thumbnav-vertical`
+//                  `uk-lightbox-dotnav`
+//                  `uk-lightbox-caption`
+//                  `uk-lightbox-counter`
+//                  `uk-lightbox-iframe`
+//                  `uk-lightbox-zoom`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@lightbox-z-index:                              @global-z-index + 10;
+@lightbox-background:                           #000;
+@lightbox-color-mode:                           light;
+
+@lightbox-focus-outline:                        rgba(255,255,255,0.7);
+
+@lightbox-item-max-width:                       100vw;
+@lightbox-item-max-height:                      100vh;
+
+@lightbox-thumbnav-vertical-width:              100px;
+@lightbox-thumbnav-height:                      100px;
+
+@lightbox-caption-padding-vertical:             10px;
+@lightbox-caption-padding-horizontal:           10px;
+@lightbox-caption-background:                   rgba(0,0,0,0.3);
+@lightbox-caption-color:                        rgba(255,255,255,0.7);
+
+
+/* ========================================================================
+   Component: Lightbox
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Allow scrolling for the modal dialog
+ * 4. Horizontal padding
+ * 5. Mask the background page
+ * 6. Fade-in transition
+ * 7. Prevent cancellation of pointer events while dragging
+ */
+
+.uk-lightbox {
+    --uk-inverse: @lightbox-color-mode;
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @lightbox-z-index;
+    /* 5 */
+    background: @lightbox-background;
+    /* 6 */
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    /* 7 */
+    touch-action: pinch-zoom;
+    .hook-lightbox();
+}
+
+/*
+ * Open
+ * 1. Center child
+ * 2. Fade-in
+ */
+
+.uk-lightbox.uk-open {
+    display: block;
+    /* 2 */
+    opacity: 1;
+}
+
+/*
+ * Focus
+ */
+
+.uk-lightbox :focus-visible { outline-color: @lightbox-focus-outline; }
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * Prevent scrollbars
+ */
+
+.uk-lightbox-page { overflow: hidden; }
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Reset list
+ */
+
+.uk-lightbox-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * 1. Center child within the viewport
+ * 2. Not visible by default
+ * 3. Optimize animation
+ * 4. Responsiveness
+ *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
+ */
+
+.uk-lightbox-items > * {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    /* 2 */
+    display: none;
+    justify-content: center;
+    align-items: flex-start;
+    /* 3 */
+    will-change: transform, opacity;
+    /* 4 */
+    overflow: auto;
+    .hook-lightbox-item();
+}
+
+/* 2 */
+.uk-lightbox-items > .uk-active { display: flex; }
+
+.uk-lightbox-items-fit > * { align-items: center; }
+
+/* 4 */
+.uk-lightbox-items-fit > * > * {
+    max-width: @lightbox-item-max-width;
+    max-height: @lightbox-item-max-height;
+}
+
+.uk-lightbox-items-fit > * > :not(iframe) {
+    width: auto;
+    height: auto;
+}
+
+/* Zoom Cursor */
+.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
+.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }
+
+
+/* Navs
+ ========================================================================== */
+
+.uk-lightbox-thumbnav-vertical :where(img, video) { max-width: @lightbox-thumbnav-vertical-width; }
+.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) { max-height: @lightbox-thumbnav-height; }
+
+.uk-lightbox-thumbnav:empty,
+.uk-lightbox-dotnav:empty { display: none; }
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-lightbox-caption:empty { display: none; }
+
+.uk-lightbox-caption {
+    padding: @lightbox-caption-padding-vertical @lightbox-caption-padding-horizontal;
+    background: @lightbox-caption-background;
+    color: @lightbox-caption-color;
+    .hook-lightbox-caption();
+}
+
+.uk-lightbox-caption > * { color: @lightbox-caption-color; }
+
+
+/* Counter
+ ========================================================================== */
+
+.uk-lightbox-counter:empty { display: none; }
+
+
+/* Iframe
+ ========================================================================== */
+
+.uk-lightbox-iframe {
+    width: 80%;
+    height: 80%;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-lightbox-misc();
+
+.hook-lightbox() {}
+.hook-lightbox-item() {}
+.hook-lightbox-caption() {}
+.hook-lightbox-misc() {}

package/src/less/components/link.less

@@ -0,0 +1,167 @@
+// Name:            Link
+// Description:     Styles for links
+//
+// Component:       `uk-link-muted`
+//                  `uk-link-text`
+//                  `uk-link-heading`
+//                  `uk-link-reset`
+//
+// Sub-objects:     `uk-link-toggle`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@link-muted-color:                              @global-muted-color;
+@link-muted-hover-color:                        @global-color;
+
+@link-text-hover-color:                         @global-muted-color;
+
+@link-heading-hover-color:                      @global-primary-background;
+@link-heading-hover-text-decoration:            none;
+
+
+/* ========================================================================
+   Component: Link
+ ========================================================================== */
+
+
+/* Muted
+ ========================================================================== */
+
+a.uk-link-muted,
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
+    color: @link-muted-color;
+    .hook-link-muted();
+}
+
+a.uk-link-muted:hover,
+.uk-link-muted a:hover,
+.uk-link-toggle:hover .uk-link-muted {
+    color: @link-muted-hover-color;
+    .hook-link-muted-hover();
+}
+
+
+/* Text
+ ========================================================================== */
+
+a.uk-link-text,
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
+    color: inherit;
+    .hook-link-text();
+}
+
+a.uk-link-text:hover,
+.uk-link-text a:hover,
+.uk-link-toggle:hover .uk-link-text {
+    color: @link-text-hover-color;
+    .hook-link-text-hover();
+}
+
+
+/* Heading
+ ========================================================================== */
+
+a.uk-link-heading,
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
+    color: inherit;
+    .hook-link-heading();
+}
+
+a.uk-link-heading:hover,
+.uk-link-heading a:hover,
+.uk-link-toggle:hover .uk-link-heading {
+    color: @link-heading-hover-color;
+    text-decoration: @link-heading-hover-text-decoration;
+    .hook-link-heading-hover();
+}
+
+
+/* Reset
+ ========================================================================== */
+
+/*
+ * `!important` needed to override inverse component
+ */
+
+a.uk-link-reset,
+.uk-link-reset a {
+    color: inherit !important;
+    text-decoration: none !important;
+    .hook-link-reset();
+}
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-link-toggle {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-link-misc();
+
+.hook-link-muted() {}
+.hook-link-muted-hover() {}
+.hook-link-text() {}
+.hook-link-text-hover() {}
+.hook-link-heading() {}
+.hook-link-heading-hover() {}
+.hook-link-reset() {}
+.hook-link-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-link-muted-color:                        @inverse-global-muted-color;
+@inverse-link-muted-hover-color:                  @inverse-global-color;
+@inverse-link-text-hover-color:                   @inverse-global-muted-color;
+@inverse-link-heading-hover-color:                @inverse-global-primary-background;
+
+.hook-inverse() {
+
+    a.uk-link-muted,
+    .uk-link-muted a {
+        color: @inverse-link-muted-color;
+        .hook-inverse-link-muted();
+    }
+
+    a.uk-link-muted:hover,
+    .uk-link-muted a:hover,
+    .uk-link-toggle:hover .uk-link-muted {
+        color: @inverse-link-muted-hover-color;
+        .hook-inverse-link-muted-hover();
+    }
+
+    a.uk-link-text:hover,
+    .uk-link-text a:hover,
+    .uk-link-toggle:hover .uk-link-text {
+        color: @inverse-link-text-hover-color;
+        .hook-inverse-link-text-hover();
+    }
+
+    a.uk-link-heading:hover,
+    .uk-link-heading a:hover,
+    .uk-link-toggle:hover .uk-link-heading {
+        color: @inverse-link-heading-hover-color;
+        .hook-inverse-link-heading-hover();
+    }
+
+}
+
+.hook-inverse-link-muted() {}
+.hook-inverse-link-muted-hover() {}
+.hook-inverse-link-text-hover() {}
+.hook-inverse-link-heading-hover() {}

package/src/less/components/list.less

@@ -0,0 +1,245 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@list-margin-top:                               @global-small-margin;
+
+@list-padding-left:                             30px;
+
+@list-marker-height:                            (@global-line-height * 1em);
+
+@list-muted-color:                              @global-muted-color;
+@list-emphasis-color:                           @global-emphasis-color;
+@list-primary-color:                            @global-primary-background;
+@list-secondary-color:                          @global-secondary-background;
+
+@list-bullet-icon-color:                        @global-color;
+
+@list-divider-margin-top:                       @global-small-margin;
+@list-divider-border-width:                     @global-border-width;
+@list-divider-border:                           @global-border;
+
+@list-striped-padding-vertical:                 @global-small-margin;
+@list-striped-padding-horizontal:               @global-small-margin;
+@list-striped-background:                       @global-muted-background;
+
+@list-large-margin-top:                         @global-margin;
+@list-large-divider-margin-top:                 @global-margin;
+@list-large-striped-padding-vertical:           @global-margin;
+@list-large-striped-padding-horizontal:         @global-small-margin;
+
+@internal-list-bullet-image:                    "../../images/backgrounds/list-bullet.svg";
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * Avoid column break within the list item, when using `column-count`
+ */
+
+.uk-list > * { break-inside: avoid-column; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child { margin-bottom: 0; }
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul { margin-top: @list-margin-top; }
+
+
+/* Marker modifiers
+ ========================================================================== */
+
+.uk-list-disc,
+.uk-list-circle,
+.uk-list-square,
+.uk-list-decimal,
+.uk-list-hyphen { padding-left: @list-padding-left; }
+
+.uk-list-disc { list-style-type: disc; }
+.uk-list-circle { list-style-type: circle; }
+.uk-list-square { list-style-type: square; }
+.uk-list-decimal { list-style-type: decimal; }
+.uk-list-hyphen { list-style-type: '–  '; }
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::marker { color: @list-muted-color !important; }
+.uk-list-emphasis > ::marker { color: @list-emphasis-color !important; }
+.uk-list-primary > ::marker { color: @list-primary-color !important; }
+.uk-list-secondary > ::marker { color: @list-secondary-color !important; }
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * {
+    position: relative;
+    padding-left: @list-padding-left;
+}
+
+.uk-list-bullet > ::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: @list-padding-left;
+    height: @global-line-height * 1em;
+    .svg-fill(@internal-list-bullet-image, "#000", @list-bullet-icon-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    margin-top: @list-divider-margin-top;
+    padding-top: @list-divider-margin-top;
+    border-top: @list-divider-border-width solid @list-divider-border;
+    .hook-list-divider();
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: @list-striped-padding-vertical @list-striped-padding-horizontal;
+    .hook-list-striped();
+}
+
+.uk-list-striped > :nth-of-type(odd) { background: @list-striped-background; }
+
+.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul { margin-top: @list-large-margin-top; }
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul { margin-top: 0; }
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: @list-large-divider-margin-top;
+    padding-top: @list-large-divider-margin-top;
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * { padding: @list-large-striped-padding-vertical @list-large-striped-padding-horizontal; }
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-list-misc();
+
+.hook-list-divider() {}
+.hook-list-striped() {}
+.hook-list-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-list-muted-color:                        @inverse-global-muted-color;
+@inverse-list-emphasis-color:                     @inverse-global-emphasis-color;
+@inverse-list-primary-color:                      @inverse-global-primary-background;
+@inverse-list-secondary-color:                    @inverse-global-primary-background;
+
+@inverse-list-divider-border:                     @inverse-global-border;
+@inverse-list-striped-background:                 @inverse-global-muted-background;
+
+@inverse-list-bullet-icon-color:                  @inverse-global-color;
+
+.hook-inverse() {
+
+    .uk-list-muted > ::marker { color: @inverse-list-muted-color !important; }
+    .uk-list-emphasis > ::marker { color: @inverse-list-emphasis-color !important; }
+    .uk-list-primary > ::marker { color: @inverse-list-primary-color !important; }
+    .uk-list-secondary > ::marker { color: @inverse-list-secondary-color !important; }
+
+    .uk-list-bullet > ::before {
+        .svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);
+    }
+
+    .uk-list-divider > :nth-child(n+2) {
+        border-top-color: @inverse-list-divider-border;
+        .hook-inverse-list-divider();
+    }
+
+    .uk-list-striped > * {
+        .hook-inverse-list-striped();
+    }
+
+    .uk-list-striped > :nth-of-type(odd) { background-color: @inverse-list-striped-background; }
+
+}
+
+.hook-inverse-list-divider() {}
+.hook-inverse-list-striped() {}