@frankenstyle/uikit 0.0.1

package/src/scss/components/icon.scss

@@ -0,0 +1,228 @@
+@use "sass:meta";
+
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//                  `uk-icon-overlay`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+
+
+
+
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+
+/*
+ * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 10. Let the container fit the height of the icon
+ */
+
+.uk-icon {
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    border: none;
+    /* 3 */
+    border-radius: 0;
+    /* 4 */
+    overflow: visible;
+    /* 5 */
+    font: inherit;
+    color: inherit;
+    /* 6 */
+    text-transform: none;
+    /* 7. */
+    padding: 0;
+    background-color: transparent;
+    /* 8 */
+    display: inline-block;
+    /* 9 */
+    fill: currentcolor;
+    /* 10 */
+    line-height: 0;
+}
+
+/* Required for `button`. */
+button.uk-icon:not(:disabled) { cursor: pointer; }
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+
+.uk-icon::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-icon > * { transform: translate(0, 0); }
+
+
+/* Image modifier
+ ========================================================================== */
+
+/*
+ * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
+ */
+
+.uk-icon-image {
+    width: $icon-image-size;
+    height: $icon-image-size;
+    /* 1 */
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    /* 2 */
+    object-fit: scale-down;
+    max-width: none;
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Link
+ * 1. Allow text within link
+ */
+
+.uk-icon-link {
+    color: $icon-link-color;
+    /* 1 */
+    text-decoration: none !important;
+    @if(meta.mixin-exists(hook-icon-link)) {@include hook-icon-link();}
+}
+
+.uk-icon-link:hover {
+    color: $icon-link-hover-color;
+    @if(meta.mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+    color: $icon-link-active-color;
+    @if(meta.mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();}
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+
+.uk-icon-button {
+    box-sizing: border-box;
+    width: $icon-button-size;
+    height: $icon-button-size;
+    border-radius: $icon-button-border-radius;
+    background: $icon-button-background;
+    color: $icon-button-color;
+    vertical-align: middle;
+    /* 1 */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    @if(meta.mixin-exists(hook-icon-button)) {@include hook-icon-button();}
+}
+
+/* Hover */
+.uk-icon-button:hover {
+    background-color: $icon-button-hover-background;
+    color: $icon-button-hover-color;
+    @if(meta.mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+    background-color: $icon-button-active-background;
+    color: $icon-button-active-color;
+    @if(meta.mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
+}
+
+/*
+ * Overlay
+ */
+
+.uk-icon-overlay,
+a .uk-icon-overlay {
+    color: $icon-overlay-color;
+    @if(meta.mixin-exists(hook-icon-overlay)) {@include hook-icon-overlay();}
+}
+
+.uk-icon-overlay:hover,
+a:hover .uk-icon-overlay {
+    color: $icon-overlay-hover-color;
+    @if(meta.mixin-exists(hook-icon-overlay-hover)) {@include hook-icon-overlay-hover();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-icon-misc)) {@include hook-icon-misc();}
+
+// @mixin hook-icon-link(){}
+// @mixin hook-icon-link-hover(){}
+// @mixin hook-icon-link-active(){}
+// @mixin hook-icon-button(){}
+// @mixin hook-icon-button-hover(){}
+// @mixin hook-icon-button-active(){}
+// @mixin hook-icon-overlay(){}
+// @mixin hook-icon-overlay-hover(){}
+// @mixin hook-icon-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-icon-link(){}
+// @mixin hook-inverse-icon-link-hover(){}
+// @mixin hook-inverse-icon-link-active(){}
+// @mixin hook-inverse-icon-button(){}
+// @mixin hook-inverse-icon-button-hover(){}
+// @mixin hook-inverse-icon-button-active(){}
+// @mixin hook-inverse-icon-overlay(){}
+// @mixin hook-inverse-icon-overlay-hover(){}

package/src/scss/components/iconnav.scss

@@ -0,0 +1,140 @@
+@use "sass:meta";
+
+// Name:            Iconnav
+// Description:     Component to create icon navigations
+//
+// Component:       `uk-iconnav`
+//
+// Modifier:        `uk-iconnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+
+
+/* ========================================================================
+   Component: Iconnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-iconnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: (-$iconnav-margin-horizontal);
+    @if(meta.mixin-exists(hook-iconnav)) {@include hook-iconnav();}
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-iconnav > * {
+    /* 1 */
+    padding-left: $iconnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically if there is still some text
+ * 2. Imitate white space gap when using flexbox
+ * 3. Force text not to affect item height
+ * 4. Style
+ * 5. Required for `a` if there is still some text
+ */
+
+.uk-iconnav > * > a {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    line-height: 0;
+    /* 4 */
+    color: $iconnav-item-color;
+    /* 5 */
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
+}
+
+/* Hover */
+.uk-iconnav > * > a:hover {
+    color: $iconnav-item-hover-color;
+    @if(meta.mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();}
+}
+
+/* Active */
+.uk-iconnav > .uk-active > a {
+    color: $iconnav-item-active-color;
+    @if(meta.mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();}
+}
+
+
+/* Modifier: 'uk-iconnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-iconnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: (-$iconnav-margin-vertical);
+}
+
+/* 2 */
+.uk-iconnav-vertical > * {
+    padding-left: 0;
+    padding-top: $iconnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();}
+
+// @mixin hook-iconnav(){}
+// @mixin hook-iconnav-item(){}
+// @mixin hook-iconnav-item-hover(){}
+// @mixin hook-iconnav-item-active(){}
+// @mixin hook-iconnav-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-iconnav-item(){}
+// @mixin hook-inverse-iconnav-item-hover(){}
+// @mixin hook-inverse-iconnav-item-active(){}

package/src/scss/components/inverse.scss

@@ -0,0 +1,51 @@
+@use "sass:meta";
+
+// Name:            Inverse
+// Description:     Inverse component style for light or dark backgrounds
+//
+// Component:       `uk-light`
+//                  `uk-dark`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+
+
+/* ========================================================================
+   Component: Inverse
+ ========================================================================== */
+
+
+/*
+ * Implemented class depends on the general theme color
+ * `uk-light` is for light colors on dark backgrounds
+ * `uk-dark` is or dark colors on light backgrounds
+ */
+
+@if ($inverse-global-color-mode == light) { .uk-light { @if (meta.mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+
+@if ($inverse-global-color-mode == dark) { .uk-dark { @if (meta.mixin-exists(hook-inverse)) {@include hook-inverse();}}}
+
+/*
+ * Pass dropbar behind color to JS
+ */
+
+* { --uk-inverse: initial; }
+
+.uk-light { --uk-inverse: light; }
+.uk-dark { --uk-inverse: dark; }
+
+.uk-inverse-light { --uk-inverse: light !important; }
+.uk-inverse-dark { --uk-inverse: dark !important; }
+
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-inverse(){}

package/src/scss/components/label.scss

@@ -0,0 +1,90 @@
+@use "sass:meta";
+
+// Name:            Label
+// Description:     Component to indicate important notes
+//
+// Component:       `uk-label`
+//
+// Modifiers:       `uk-label-success`
+//                  `uk-label-warning`
+//                  `uk-label-danger`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+/* ========================================================================
+   Component: Label
+ ========================================================================== */
+
+.uk-label {
+    display: inline-block;
+    padding: $label-padding-vertical $label-padding-horizontal;
+    background: $label-background;
+    line-height: $label-line-height;
+    font-size: $label-font-size;
+    color: $label-color;
+    vertical-align: middle;
+    white-space: nowrap;
+    @if(meta.mixin-exists(hook-label)) {@include hook-label();}
+}
+
+
+/* Color modifiers
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-label-success {
+    background-color: $label-success-background;
+    color: $label-success-color;
+    @if(meta.mixin-exists(hook-label-success)) {@include hook-label-success();}
+}
+
+/*
+ * Warning
+ */
+
+.uk-label-warning {
+    background-color: $label-warning-background;
+    color: $label-warning-color;
+    @if(meta.mixin-exists(hook-label-warning)) {@include hook-label-warning();}
+}
+
+/*
+ * Danger
+ */
+
+.uk-label-danger {
+    background-color: $label-danger-background;
+    color: $label-danger-color;
+    @if(meta.mixin-exists(hook-label-danger)) {@include hook-label-danger();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-label-misc)) {@include hook-label-misc();}
+
+// @mixin hook-label(){}
+// @mixin hook-label-success(){}
+// @mixin hook-label-warning(){}
+// @mixin hook-label-danger(){}
+// @mixin hook-label-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-label(){}

package/src/scss/components/leader.scss

@@ -0,0 +1,69 @@
+@use "sass:meta";
+
+// Name:            Leader
+// Description:     Component to create dot leaders
+//
+// Component:       `uk-leader`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+/* ========================================================================
+   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;
+    @if(meta.mixin-exists(hook-leader)) {@include 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
+// ========================================================================
+
+@if(meta.mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
+
+// @mixin hook-leader(){}
+// @mixin hook-leader-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-leader(){}