@frankenstyle/uikit 0.0.2 → 0.0.3

package/src/less/components/accordion.less

@@ -6,6 +6,8 @@
 // Sub-objects:     `uk-accordion-title`
 //                  `uk-accordion-content`
 //
+// Modifiers:       `uk-accordion-default`
+//
 // States:          `uk-open`
 //
 // ========================================================================
@@ -14,14 +16,15 @@
 // Variables
 // ========================================================================
 
-@accordion-item-margin-top:                    @global-margin;
+@accordion-default-item-margin-top:             @global-margin;
 
-@accordion-title-font-size:                    @global-medium-font-size;
-@accordion-title-line-height:                  1.4;
-@accordion-title-color:                        @global-emphasis-color;
-@accordion-title-hover-color:                  @global-color;
+@accordion-default-title-gap:                   15px;
+@accordion-default-title-font-size:             @global-medium-font-size;
+@accordion-default-title-line-height:           1.4;
+@accordion-default-title-color:                 @global-emphasis-color;
+@accordion-default-title-hover-color:           @global-color;
 
-@accordion-content-margin-top:                 @global-margin;
+@accordion-default-content-margin-top:          @global-margin;
 
 
 /* ========================================================================
@@ -34,50 +37,88 @@
     .hook-accordion();
 }
 
+.uk-accordion-title { display: block; }
+
+.uk-accordion-content { display: flow-root; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-accordion-content > :last-child { margin-bottom: 0; }
+
 
-/* Item
+/* Default modifier
  ========================================================================== */
 
-.uk-accordion > * {
-    .hook-accordion-item();
+/*
+ * Item
+ */
+
+.uk-accordion-default > * {
+    .hook-accordion-default-item();
 }
 
-.uk-accordion > :nth-child(n+2) { margin-top: @accordion-item-margin-top; }
+.uk-accordion-default > :nth-child(n+2) { margin-top: @accordion-default-item-margin-top; }
+
+/* Active */
+.uk-accordion-default > .uk-open {
+    .hook-accordion-default-item-active();
+}
 
+/*
+ * Title
+ */
 
-/* Title
- ========================================================================== */
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
 
-.uk-accordion-title {
-    display: block;
-    font-size: @accordion-title-font-size;
-    line-height: @accordion-title-line-height;
-    color: @accordion-title-color;
-    .hook-accordion-title();
+.uk-accordion-default .uk-accordion-title {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: @accordion-default-title-gap;
+    /* 3 */
+    font-size: @accordion-default-title-font-size;
+    line-height: @accordion-default-title-line-height;
+    color: @accordion-default-title-color;
+    .hook-accordion-default-title();
 }
 
 /* Hover */
-.uk-accordion-title:hover {
-    color: @accordion-title-hover-color;
+.uk-accordion-default .uk-accordion-title:hover {
+    color: @accordion-default-title-hover-color;
     text-decoration: none;
-    .hook-accordion-title-hover();
+    .hook-accordion-default-title-hover();
 }
 
+/* Active */
+.uk-accordion-default > .uk-open .uk-accordion-title {
+    .hook-accordion-default-title-active();
+}
 
-/* Content
- ========================================================================== */
+/*
+ * Icon
+ */
 
-.uk-accordion-content {
-    display: flow-root;
-    margin-top: @accordion-content-margin-top;
-    .hook-accordion-content();
+.uk-accordion-default .uk-accordion-icon {
+    flex: none;
+    margin-left: auto;
+    .hook-accordion-default-icon();
 }
 
 /*
- * Remove margin from the last-child
+ * Content
  */
 
- .uk-accordion-content > :last-child { margin-bottom: 0; }
+.uk-accordion-default .uk-accordion-content {
+    margin-top: @accordion-default-content-margin-top;
+    .hook-accordion-default-content();
+}
 
 
 // Hooks
@@ -86,37 +127,60 @@
 .hook-accordion-misc();
 
 .hook-accordion() {}
-.hook-accordion-item() {}
-.hook-accordion-title() {}
-.hook-accordion-title-hover() {}
-.hook-accordion-content() {}
+.hook-accordion-default-item() {}
+.hook-accordion-default-item-active() {}
+.hook-accordion-default-title() {}
+.hook-accordion-default-title-hover() {}
+.hook-accordion-default-title-active() {}
+.hook-accordion-default-icon() {}
+.hook-accordion-default-content() {}
 .hook-accordion-misc() {}
 
 
 // Inverse
 // ========================================================================
 
-@inverse-accordion-title-color:             @inverse-global-emphasis-color;
-@inverse-accordion-title-hover-color:       @inverse-global-color;
+@inverse-accordion-default-title-color:             @inverse-global-emphasis-color;
+@inverse-accordion-default-title-hover-color:       @inverse-global-color;
 
 .hook-inverse() {
 
-    .uk-accordion > * {
-        .hook-inverse-accordion-item();
+    .uk-accordion-default > * {
+        .hook-inverse-accordion-default-item();
+    }
+
+    .uk-accordion-default > .uk-open {
+        .hook-inverse-accordion-default-item-active();
+    }
+
+    .uk-accordion-default .uk-accordion-title {
+        color: @inverse-accordion-default-title-color;
+        .hook-inverse-accordion-default-title();
+    }
+
+    .uk-accordion-default .uk-accordion-title:hover {
+        color: @inverse-accordion-default-title-hover-color;
+        .hook-inverse-accordion-default-title-hover();
+    }
+
+    .uk-accordion-default .uk-accordion-title:active {
+        .hook-inverse-accordion-default-title-active();
     }
 
-    .uk-accordion-title {
-        color: @inverse-accordion-title-color;
-        .hook-inverse-accordion-title();
+    .uk-accordion-default .uk-accordion-icon {
+        .hook-inverse-accordion-default-icon();
     }
 
-    .uk-accordion-title:hover {
-        color: @inverse-accordion-title-hover-color;
-        .hook-inverse-accordion-title-hover();
+    .uk-accordion-default .uk-accordion-content {
+        .hook-inverse-accordion-default-content();
     }
 
 }
 
-.hook-inverse-accordion-item() {}
-.hook-inverse-accordion-title() {}
-.hook-inverse-accordion-title-hover() {}
+.hook-inverse-accordion-default-item() {}
+.hook-inverse-accordion-default-item-active() {}
+.hook-inverse-accordion-default-title() {}
+.hook-inverse-accordion-default-title-hover() {}
+.hook-inverse-accordion-default-title-active() {}
+.hook-inverse-accordion-default-icon() {}
+.hook-inverse-accordion-default-content() {}

package/src/less/components/card.less

@@ -75,7 +75,7 @@
 @card-secondary-hover-background:              darken(@card-secondary-background, 5%);
 @card-secondary-color-mode:                    light;
 
-@card-overlay-background:                      fade(@global-background, 80%);
+@card-overlay-background:                      fade(@global-background, 90%);
 @card-overlay-color:                           @global-color;
 @card-overlay-title-color:                     @global-emphasis-color;
 @card-overlay-hover-background:                fadein(@card-overlay-background, 10%);

package/src/less/components/form.less

@@ -37,8 +37,10 @@
 
 @form-height:                                   @global-control-height;
 @form-line-height:                              @form-height;
+
 @form-padding-horizontal:                       10px;
-@form-padding-vertical:                         round(@form-padding-horizontal * 0.6);
+@form-multi-line-padding-horizontal:            @form-padding-horizontal;
+@form-multi-line-padding-vertical:              round(@form-multi-line-padding-horizontal * 0.6);
 
 @form-background:                               @global-muted-background;
 @form-color:                                    @global-color;
@@ -84,14 +86,16 @@
 @form-small-font-size:                          @global-small-font-size;
 @form-small-height:                             @global-control-small-height;
 @form-small-padding-horizontal:                 8px;
-@form-small-padding-vertical:                   round(@form-small-padding-horizontal * 0.6);
+@form-small-multi-line-padding-horizontal:      @form-small-padding-horizontal;
+@form-small-multi-line-padding-vertical:        round(@form-small-multi-line-padding-horizontal * 0.6);
 @form-small-line-height:                        @form-small-height;
 @form-small-radio-size:                         14px;
 
 @form-large-font-size:                          @global-medium-font-size;
 @form-large-height:                             @global-control-large-height;
 @form-large-padding-horizontal:                 12px;
-@form-large-padding-vertical:                   round(@form-large-padding-horizontal * 0.6);
+@form-large-multi-line-padding-horizontal:      @form-large-padding-horizontal;
+@form-large-multi-line-padding-vertical:        round(@form-large-multi-line-padding-horizontal * 0.6);
 @form-large-line-height:                        @form-large-height;
 @form-large-radio-size:                         22px;
 
@@ -304,8 +308,7 @@
 .uk-select[multiple],
 .uk-select[size],
 .uk-textarea {
-    padding-top: @form-padding-vertical;
-    padding-bottom: @form-padding-vertical;
+    padding: @form-multi-line-padding-vertical @form-multi-line-padding-horizontal;
     vertical-align: top;
     .hook-form-multi-line();
 }
@@ -549,7 +552,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 }
 
 /* Multi-line */
-.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-small-padding-vertical @form-small-padding-horizontal; }
+.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-small-multi-line-padding-vertical @form-small-multi-line-padding-horizontal; }
 
 /* Any element */
 .uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: @form-small-line-height; }
@@ -574,7 +577,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 }
 
 /* Multi-line */
-.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-large-padding-vertical @form-large-padding-horizontal; }
+.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: @form-large-multi-line-padding-vertical @form-large-multi-line-padding-horizontal; }
 
 /* Any element */
 .uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: @form-large-line-height; }

package/src/less/components/lightbox.less

@@ -154,11 +154,6 @@
     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; }

package/src/less/components/nav.less

@@ -185,6 +185,7 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-parent-icon {
+    flex: none;
     margin-left: auto;
     transition: transform 0.3s ease-out;
 }
@@ -374,7 +375,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-secondary > li > a {
-
     color: @nav-secondary-item-color;
     .hook-nav-secondary-item();
 }

package/src/less/components/overlay.less

@@ -17,10 +17,10 @@
 @overlay-padding-horizontal:                    @global-gutter;
 @overlay-padding-vertical:                      @global-gutter;
 
-@overlay-default-background:                    fade(@global-background, 80%);
+@overlay-default-background:                    fade(@global-background, 90%);
 @overlay-default-color-mode:                    dark;
 
-@overlay-primary-background:                    fade(@global-secondary-background, 80%);
+@overlay-primary-background:                    fade(@global-secondary-background, 90%);
 @overlay-primary-color-mode:                    light;
 
 

package/src/less/components/utility.less

@@ -149,6 +149,7 @@
  * Overflow fade
  * 1. Overflow
  * 2. Mask
+ * 3. Hide scrollbar
  */
 
 @property --uk-overflow-fade-start-opacity {
@@ -180,14 +181,13 @@
     -ms-overflow-style: -ms-autohiding-scrollbar;
     /* 2 */
     mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 @overflow-fade-size, #000 ~'calc(100% - @{overflow-fade-size})', rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+    /* 3 */
+    scrollbar-width: none;
 }
 
 .uk-overflow-fade-horizontal > *,
 .uk-overflow-fade-vertical > * { min-width: max-content; }
 
-.uk-overflow-fade-horizontal::-webkit-scrollbar,
-.uk-overflow-fade-vertical::-webkit-scrollbar { display: none; }
-
 
 /* Box Sizing
  ========================================================================== */
@@ -256,7 +256,10 @@
 .uk-preserve-width canvas,
 .uk-preserve-width img,
 .uk-preserve-width svg,
-.uk-preserve-width video { max-width: none; }
+.uk-preserve-width video {
+    max-width: none;
+    object-fit: fill;
+}
 
 /*
  * Responsiveness

package/src/less/theme/accordion.less

@@ -11,10 +11,7 @@
 // New
 //
 
-@accordion-icon-margin-left:                   10px;
-@accordion-icon-color:                         @global-color;
-@internal-accordion-open-image:                "../../images/backgrounds/accordion-open.svg";
-@internal-accordion-close-image:               "../../images/backgrounds/accordion-close.svg";
+@accordion-default-icon-color:                 @global-color;
 
 
 // Component
@@ -23,41 +20,38 @@
 .hook-accordion() {}
 
 
-// Item
-// ========================================================================
-
-.hook-accordion-item() {}
+/* Default modifier
+ ========================================================================== */
 
+/*
+ * Item
+ */
 
-// Title
-// ========================================================================
+.hook-accordion-default-item() {}
 
-.hook-accordion-title() {
+.hook-accordion-default-item-active() {}
 
-    overflow: hidden;
+/*
+ * Title
+ */
 
-    &::before {
-        content: "";
-        width: (@accordion-title-line-height * 1em);
-        height: (@accordion-title-line-height * 1em);
-        margin-left: @accordion-icon-margin-left;
-        float: right;
-        .svg-fill(@internal-accordion-close-image, "#000", @accordion-icon-color);
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-    }
+.hook-accordion-default-title() {}
 
-    .uk-open > &::before { .svg-fill(@internal-accordion-open-image, "#000", @accordion-icon-color); }
+.hook-accordion-default-title-hover() {}
 
-}
+.hook-accordion-default-title-active() {}
 
-.hook-accordion-title-hover() {}
+/*
+ * Icon
+ */
 
+.hook-accordion-default-icon() { color: @accordion-default-icon-color; }
 
-// Content
-// ========================================================================
+/*
+ * Content
+ */
 
-.hook-accordion-content() {}
+.hook-accordion-default-content() {}
 
 
 // Miscellaneous
@@ -65,18 +59,17 @@
 
 .hook-accordion-misc() {}
 
+
 // Inverse
 // ========================================================================
 
-.hook-inverse-accordion-item() {}
-
-.hook-inverse-accordion-title() {}
-.hook-inverse-accordion-title-hover() {}
-
-.hook-inverse() {
-
-    .uk-accordion-title::before { .svg-fill(@internal-accordion-close-image, "#000", @inverse-global-color); }
+@inverse-accordion-default-icon-color:         @inverse-global-color;
 
-    .uk-open > .uk-accordion-title::before { .svg-fill(@internal-accordion-open-image, "#000", @inverse-global-color); }
+.hook-inverse-accordion-default-item() {}
+.hook-inverse-accordion-default-item-active() {}
 
-}
+.hook-inverse-accordion-default-title() {}
+.hook-inverse-accordion-default-title-hover() {}
+.hook-inverse-accordion-default-title-active() {}
+.hook-inverse-accordion-default-icon() { color: @inverse-accordion-default-icon-color; }
+.hook-inverse-accordion-default-content() {}

package/src/scss/components/accordion.scss

@@ -8,6 +8,8 @@
 // Sub-objects:     `uk-accordion-title`
 //                  `uk-accordion-content`
 //
+// Modifiers:       `uk-accordion-default`
+//
 // States:          `uk-open`
 //
 // ========================================================================
@@ -30,50 +32,88 @@
     @if(meta.mixin-exists(hook-accordion)) {@include hook-accordion();}
 }
 
+.uk-accordion-title { display: block; }
+
+.uk-accordion-content { display: flow-root; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-accordion-content > :last-child { margin-bottom: 0; }
+
 
-/* Item
+/* Default modifier
  ========================================================================== */
 
-.uk-accordion > * {
-    @if(meta.mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
+/*
+ * Item
+ */
+
+.uk-accordion-default > * {
+    @if(meta.mixin-exists(hook-accordion-default-item)) {@include hook-accordion-default-item();}
 }
 
-.uk-accordion > :nth-child(n+2) { margin-top: $accordion-item-margin-top; }
+.uk-accordion-default > :nth-child(n+2) { margin-top: $accordion-default-item-margin-top; }
+
+/* Active */
+.uk-accordion-default > .uk-open {
+    @if(meta.mixin-exists(hook-accordion-default-item-active)) {@include hook-accordion-default-item-active();}
+}
 
+/*
+ * Title
+ */
 
-/* Title
- ========================================================================== */
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
 
-.uk-accordion-title {
-    display: block;
-    font-size: $accordion-title-font-size;
-    line-height: $accordion-title-line-height;
-    color: $accordion-title-color;
-    @if(meta.mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
+.uk-accordion-default .uk-accordion-title {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: $accordion-default-title-gap;
+    /* 3 */
+    font-size: $accordion-default-title-font-size;
+    line-height: $accordion-default-title-line-height;
+    color: $accordion-default-title-color;
+    @if(meta.mixin-exists(hook-accordion-default-title)) {@include hook-accordion-default-title();}
 }
 
 /* Hover */
-.uk-accordion-title:hover {
-    color: $accordion-title-hover-color;
+.uk-accordion-default .uk-accordion-title:hover {
+    color: $accordion-default-title-hover-color;
     text-decoration: none;
-    @if(meta.mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
+    @if(meta.mixin-exists(hook-accordion-default-title-hover)) {@include hook-accordion-default-title-hover();}
 }
 
+/* Active */
+.uk-accordion-default > .uk-open .uk-accordion-title {
+    @if(meta.mixin-exists(hook-accordion-default-title-active)) {@include hook-accordion-default-title-active();}
+}
 
-/* Content
- ========================================================================== */
+/*
+ * Icon
+ */
 
-.uk-accordion-content {
-    display: flow-root;
-    margin-top: $accordion-content-margin-top;
-    @if(meta.mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
+.uk-accordion-default .uk-accordion-icon {
+    flex: none;
+    margin-left: auto;
+    @if(meta.mixin-exists(hook-accordion-default-icon)) {@include hook-accordion-default-icon();}
 }
 
 /*
- * Remove margin from the last-child
+ * Content
  */
 
- .uk-accordion-content > :last-child { margin-bottom: 0; }
+.uk-accordion-default .uk-accordion-content {
+    margin-top: $accordion-default-content-margin-top;
+    @if(meta.mixin-exists(hook-accordion-default-content)) {@include hook-accordion-default-content();}
+}
 
 
 // Hooks
@@ -82,10 +122,13 @@
 @if(meta.mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
 
 // @mixin hook-accordion(){}
-// @mixin hook-accordion-item(){}
-// @mixin hook-accordion-title(){}
-// @mixin hook-accordion-title-hover(){}
-// @mixin hook-accordion-content(){}
+// @mixin hook-accordion-default-item(){}
+// @mixin hook-accordion-default-item-active(){}
+// @mixin hook-accordion-default-title(){}
+// @mixin hook-accordion-default-title-hover(){}
+// @mixin hook-accordion-default-title-active(){}
+// @mixin hook-accordion-default-icon(){}
+// @mixin hook-accordion-default-content(){}
 // @mixin hook-accordion-misc(){}
 
 
@@ -95,6 +138,10 @@
 
 
 
-// @mixin hook-inverse-accordion-item(){}
-// @mixin hook-inverse-accordion-title(){}
-// @mixin hook-inverse-accordion-title-hover(){}
+// @mixin hook-inverse-accordion-default-item(){}
+// @mixin hook-inverse-accordion-default-item-active(){}
+// @mixin hook-inverse-accordion-default-title(){}
+// @mixin hook-inverse-accordion-default-title-hover(){}
+// @mixin hook-inverse-accordion-default-title-active(){}
+// @mixin hook-inverse-accordion-default-icon(){}
+// @mixin hook-inverse-accordion-default-content(){}

package/src/scss/components/form.scss

@@ -57,6 +57,7 @@
 
 
 
+
 
 
 /* ========================================================================
@@ -247,8 +248,7 @@
 .uk-select[multiple],
 .uk-select[size],
 .uk-textarea {
-    padding-top: $form-padding-vertical;
-    padding-bottom: $form-padding-vertical;
+    padding: $form-multi-line-padding-vertical $form-multi-line-padding-horizontal;
     vertical-align: top;
     @if(meta.mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();}
 }
@@ -492,7 +492,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 }
 
 /* Multi-line */
-.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-small-padding-vertical $form-small-padding-horizontal; }
+.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-small-multi-line-padding-vertical $form-small-multi-line-padding-horizontal; }
 
 /* Any element */
 .uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: $form-small-line-height; }
@@ -517,7 +517,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 }
 
 /* Multi-line */
-.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-large-padding-vertical $form-large-padding-horizontal; }
+.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-large-multi-line-padding-vertical $form-large-multi-line-padding-horizontal; }
 
 /* Any element */
 .uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: $form-large-line-height; }

package/src/scss/components/lightbox.scss

@@ -144,11 +144,6 @@
     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; }