@frankenstyle/uikit 0.0.1

package/src/scss/components/switcher.scss

@@ -0,0 +1,49 @@
+@use "sass:meta";
+
+// Name:            Switcher
+// Description:     Component to navigate through different content panes
+//
+// Component:       `uk-switcher`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Switcher
+ ========================================================================== */
+
+/*
+ * Reset list
+ */
+
+.uk-switcher {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Hide not active items
+ */
+
+.uk-switcher > :not(.uk-active) { display: none; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-switcher > * > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-switcher-misc)) {@include hook-switcher-misc();}
+
+// @mixin hook-switcher-misc(){}

package/src/scss/components/tab.scss

@@ -0,0 +1,186 @@
+@use "sass:meta";
+
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-tab {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin-left: (-$tab-margin-horizontal);
+    /* 3 */
+    padding: 0;
+    list-style: none;
+    @if(meta.mixin-exists(hook-tab)) {@include hook-tab();}
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-tab > * {
+    /* 1 */
+    flex: none;
+    /* 2 */
+    padding-left: $tab-margin-horizontal;
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Center content if a width is set
+ * 4. Style
+ */
+
+.uk-tab > * > a {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    justify-content: center;
+    /* 4 */
+    padding: $tab-item-padding-vertical $tab-item-padding-horizontal;
+    color: $tab-item-color;
+    @if(meta.mixin-exists(hook-tab-item)) {@include hook-tab-item();}
+}
+
+/* Hover */
+.uk-tab > * > a:hover {
+    color: $tab-item-hover-color;
+    text-decoration: $tab-item-hover-text-decoration;
+    @if(meta.mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();}
+}
+
+/* Active */
+.uk-tab > .uk-active > a {
+    color: $tab-item-active-color;
+    @if(meta.mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();}
+}
+
+/* Disabled */
+.uk-tab > .uk-disabled > a {
+    color: $tab-item-disabled-color;
+    @if(meta.mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();}
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom
+ */
+
+.uk-tab-bottom {
+    @if(meta.mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();}
+}
+
+.uk-tab-bottom > * > a {
+    @if(meta.mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();}
+}
+
+/*
+ * Left + Right
+ * 1. Reset Gutter
+ */
+
+.uk-tab-left,
+.uk-tab-right {
+    flex-direction: column;
+    /* 1 */
+    margin-left: 0;
+}
+
+/* 1 */
+.uk-tab-left > *,
+.uk-tab-right > * { padding-left: 0; }
+
+.uk-tab-left {
+    @if(meta.mixin-exists(hook-tab-left)) {@include hook-tab-left();}
+}
+
+.uk-tab-right {
+    @if(meta.mixin-exists(hook-tab-right)) {@include hook-tab-right();}
+}
+
+.uk-tab-left > * > a {
+    justify-content: left;
+    @if(meta.mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();}
+}
+
+.uk-tab-right > * > a {
+    justify-content: left;
+    @if(meta.mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-tab-misc)) {@include hook-tab-misc();}
+
+// @mixin hook-tab(){}
+// @mixin hook-tab-item(){}
+// @mixin hook-tab-item-hover(){}
+// @mixin hook-tab-item-active(){}
+// @mixin hook-tab-item-disabled(){}
+// @mixin hook-tab-bottom(){}
+// @mixin hook-tab-bottom-item(){}
+// @mixin hook-tab-left(){}
+// @mixin hook-tab-left-item(){}
+// @mixin hook-tab-right(){}
+// @mixin hook-tab-right-item(){}
+// @mixin hook-tab-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-tab(){}
+// @mixin hook-inverse-tab-item(){}
+// @mixin hook-inverse-tab-item-hover(){}
+// @mixin hook-inverse-tab-item-active(){}
+// @mixin hook-inverse-tab-item-disabled(){}

package/src/scss/components/table.scss

@@ -0,0 +1,293 @@
+@use "sass:meta";
+@use "sass:math";
+
+// Name:            Table
+// Description:     Styles for tables
+//
+// Component:       `uk-table`
+//
+// Modifiers:       `uk-table-middle`
+//                  `uk-table-divider`
+//                  `uk-table-striped`
+//                  `uk-table-hover`
+//                  `uk-table-small`
+//                  `uk-table-justify`
+//                  `uk-table-shrink`
+//                  `uk-table-expand`
+//                  `uk-table-link`
+//                  `uk-table-responsive`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ========================================================================
+   Component: Table
+ ========================================================================== */
+
+/*
+ * 1. Remove most spacing between table cells.
+ * 2. Behave like a block element
+ * 3. Style
+ */
+
+.uk-table {
+    /* 1 */
+    border-collapse: collapse;
+    border-spacing: 0;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    margin-bottom: $table-margin-vertical;
+    @if(meta.mixin-exists(hook-table)) {@include hook-table();}
+}
+
+/* Add margin if adjacent element */
+* + .uk-table { margin-top: $table-margin-vertical; }
+
+
+/* Header cell
+ ========================================================================== */
+
+/*
+ * 1. Style
+ */
+
+.uk-table th {
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+    text-align: left;
+    vertical-align: bottom;
+    /* 1 */
+    font-size: $table-header-cell-font-size;
+    font-weight: $table-header-cell-font-weight;
+    color: $table-header-cell-color;
+    @if(meta.mixin-exists(hook-table-header-cell)) {@include hook-table-header-cell();}
+}
+
+
+/* Cell
+ ========================================================================== */
+
+.uk-table td {
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+    vertical-align: top;
+    @if(meta.mixin-exists(hook-table-cell)) {@include hook-table-cell();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-table td > :last-child { margin-bottom: 0; }
+
+
+/* Footer
+ ========================================================================== */
+
+.uk-table tfoot {
+    font-size: $table-footer-font-size;
+    @if(meta.mixin-exists(hook-table-footer)) {@include hook-table-footer();}
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-table caption {
+    font-size: $table-caption-font-size;
+    text-align: left;
+    color: $table-caption-color;
+    @if(meta.mixin-exists(hook-table-caption)) {@include hook-table-caption();}
+}
+
+
+/* Alignment modifier
+ ========================================================================== */
+
+.uk-table-middle,
+.uk-table-middle td { vertical-align: middle !important; }
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-table-divider > tr:not(:first-child),
+.uk-table-divider > :not(:first-child) > tr,
+.uk-table-divider > :first-child > tr:not(:first-child) {
+    border-top: $table-divider-border-width solid $table-divider-border;
+    @if(meta.mixin-exists(hook-table-divider)) {@include hook-table-divider();}
+}
+
+/*
+ * Striped
+ */
+
+.uk-table-striped > tr:nth-of-type(odd),
+.uk-table-striped tbody tr:nth-of-type(odd) {
+    background: $table-striped-row-background;
+    @if(meta.mixin-exists(hook-table-striped)) {@include hook-table-striped();}
+}
+
+/*
+ * Hover
+ */
+
+.uk-table-hover > tr:hover,
+.uk-table-hover tbody tr:hover {
+    background: $table-hover-row-background;
+    @if(meta.mixin-exists(hook-table-hover)) {@include hook-table-hover();}
+}
+
+
+/* Active state
+ ========================================================================== */
+
+.uk-table > tr.uk-active,
+.uk-table tbody tr.uk-active {
+    background: $table-row-active-background;
+    @if(meta.mixin-exists(hook-table-row-active)) {@include hook-table-row-active();}
+}
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-table-small th,
+.uk-table-small td {
+    padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal;
+    @if(meta.mixin-exists(hook-table-small)) {@include hook-table-small();}
+}
+
+.uk-table-large th,
+.uk-table-large td {
+    padding: $table-large-cell-padding-vertical $table-large-cell-padding-horizontal;
+    @if(meta.mixin-exists(hook-table-large)) {@include hook-table-large();}
+}
+
+
+/* Justify modifier
+ ========================================================================== */
+
+.uk-table-justify th:first-child,
+.uk-table-justify td:first-child { padding-left: 0; }
+
+.uk-table-justify th:last-child,
+.uk-table-justify td:last-child { padding-right: 0; }
+
+
+/* Cell size modifier
+ ========================================================================== */
+
+.uk-table-shrink { width: 1px; }
+.uk-table-expand { min-width: $table-expand-min-width; }
+
+
+/* Cell link modifier
+ ========================================================================== */
+
+/*
+ * Does not work with `uk-table-justify` at the moment
+ */
+
+.uk-table-link { padding: 0 !important; }
+
+.uk-table-link > a {
+    display: block;
+    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
+}
+
+.uk-table-small .uk-table-link > a { padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; }
+
+
+/* Responsive table
+ ========================================================================== */
+
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-table-responsive,
+    .uk-table-responsive tbody,
+    .uk-table-responsive th,
+    .uk-table-responsive td,
+    .uk-table-responsive tr { display: block; }
+
+    .uk-table-responsive thead { display: none; }
+
+    .uk-table-responsive th,
+    .uk-table-responsive td {
+        width: auto !important;
+        max-width: none !important;
+        min-width: 0 !important;
+        overflow: visible !important;
+        white-space: normal !important;
+    }
+
+    .uk-table-responsive th:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive td:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: math.round(($table-cell-padding-vertical * 0.33333)) !important; }
+
+    .uk-table-responsive th:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive td:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: math.round(($table-cell-padding-vertical * 0.33333)) !important; }
+
+    .uk-table-justify.uk-table-responsive th,
+    .uk-table-justify.uk-table-responsive td {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(meta.mixin-exists(hook-table-misc)) {@include hook-table-misc();}
+
+// @mixin hook-table(){}
+// @mixin hook-table-header-cell(){}
+// @mixin hook-table-cell(){}
+// @mixin hook-table-footer(){}
+// @mixin hook-table-caption(){}
+// @mixin hook-table-row-active(){}
+// @mixin hook-table-divider(){}
+// @mixin hook-table-striped(){}
+// @mixin hook-table-hover(){}
+// @mixin hook-table-small(){}
+// @mixin hook-table-large(){}
+// @mixin hook-table-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-table-header-cell(){}
+// @mixin hook-inverse-table-caption(){}
+// @mixin hook-inverse-table-row-active(){}
+// @mixin hook-inverse-table-divider(){}
+// @mixin hook-inverse-table-striped(){}
+// @mixin hook-inverse-table-hover(){}