uikit 3.25.27-dev.9e97c1f → 3.25.27

package/src/less/components/logo.less

@@ -1,94 +0,0 @@
-// Name:            Logo
-// Description:     Style for the logo
-//
-// Component:       `uk-logo`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@logo-font-size:                                @global-large-font-size;
-@logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-emphasis-color;
-@logo-hover-color:                              @global-emphasis-color;
-
-/* ========================================================================
-   Component: Logo
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Required for `a`
- * 3. Behave like image but can be overridden through flex utility classes
- */
-
-.uk-logo {
-    /* 1 */
-    font-size: @logo-font-size;
-    font-family: @logo-font-family;
-    color: @logo-color;
-    /* 2 */
-    text-decoration: none;
-    .hook-logo();
-}
-
-/* 3 */
-:where(.uk-logo) {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Hover */
-.uk-logo:hover {
-    color: @logo-hover-color;
-    /* 2 */
-    text-decoration: none;
-    .hook-logo-hover();
-}
-
-.uk-logo :where(img:not([uk-svg]), svg, video) { display: block; }
-
-.uk-logo-inverse:where(:not([uk-svg])) { display: none; }
-
-
-// Misc
-// ========================================================================
-
-.hook-logo-misc();
-
-
-// Hooks
-// ========================================================================
-
-.hook-logo() {}
-.hook-logo-hover() {}
-.hook-logo-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@inverse-logo-color:                           @inverse-global-emphasis-color;
-@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
-
-.hook-inverse () {
-
-    .uk-logo {
-        color: @inverse-logo-color;
-        .hook-inverse-logo();
-    }
-
-    .uk-logo:hover {
-        color: @inverse-logo-hover-color;
-        .hook-inverse-logo-hover();
-    }
-
-    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse:not([uk-svg])), .uk-logo-inverse, [uk-svg]) { display: none; }
-    .uk-logo-inverse:not([uk-svg]) { display: block; }
-
-}
-
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}

package/src/less/components/marquee.less

@@ -1,133 +0,0 @@
-// Name:            Marquee
-// Description:     Component to create scrolling areas
-//
-// Component:       `uk-marquee`
-//
-// Sub-objects:     `uk-marquee-items`
-//
-// Modifiers:       `uk-marquee-vertical`
-//                  `uk-marquee-fade`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Marquee
- ========================================================================== */
-
-/*
- * 1. Fallback for Safari 15 and older
- * 2. Clip child elements
- *    `clip` prevents accidental scrolling through elements in slide getting focused
- *    `clip` also works in only one direction
- * 3. Prevent tab highlighting on iOS.
- */
-
-.uk-marquee {
-    /* 1 */
-    overflow-x: hidden;
-    /* 2 */
-    overflow-x: clip;
-    /* 3 */
-    -webkit-tap-highlight-color: transparent;
-    .hook-marquee();
-}
-
-.uk-marquee-vertical {
-    overflow: visible;
-    overflow-y: hidden;
-    overflow-y: clip;
-}
-
-/*
- * Fade out
- */
-
-.uk-marquee-fade {
-    --uk-overflow-fade-size: 100px;
-    --uk-overflow-fade-direction: right;
-}
-.uk-marquee-fade.uk-marquee-vertical { --uk-overflow-fade-direction: bottom; }
-
-.uk-marquee-fade {
-    mask-image: linear-gradient(
-        to var(--uk-overflow-fade-direction),
-        rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)),
-        #000 var(--uk-overflow-fade-size),
-        #000 ~'calc(100% - var(--uk-overflow-fade-size))',
-        rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity))
-    );
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * 1. Create a containing block.
- */
-
-.uk-marquee-items {
-    /* 1 */
-    position: relative;
-}
-
-/*
- * 1. Reset list style without interfering with grid
- * 2. Prevent displaying the callout information on iOS.
- */
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items:not(.uk-grid) {
-    display: flex;
-    /* 1 */
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    /* 2 */
-    -webkit-touch-callout: none;
-}
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items.uk-grid { flex-wrap: nowrap; }
-
-
-/* Item
- ========================================================================== */
-
-/*
- * 1. Let items take content dimensions (0 0 auto)
- *    `max-width` needed to keep image responsiveness and prevent content overflow
- * 2. Create position context
- * 3. Create animation along offset-path
- */
-
-.uk-marquee-items > * {
-    /* 1 */
-    flex: none !important;
-    box-sizing: border-box;
-    max-width: 100%;
-    /* 2 */
-    position: relative;
-    /* 3 */
-    offset-anchor: 0 0;
-    offset-rotate: 0deg;
-    offset-path: path(var(--uk-marquee-path));
-    animation: var(--uk-marquee-duration) linear calc(var(--uk-marquee-start) / -100 * var(--uk-marquee-duration)) infinite var(--uk-marquee-direction) uk-marquee;
-}
-
-@keyframes uk-marquee {
-    0% { offset-distance: 0; }
-    100% { offset-distance: 100%; }
-}
-
-
-// Hooks
-// ========================================================================
-
-.hook-marquee-misc();
-
-.hook-marquee() {}
-.hook-marquee-misc() {}

package/src/less/theme/dropcap.less

@@ -1,29 +0,0 @@
-//
-// Component: Dropcap
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-dropcap() {
-    // Prevent line wrap
-    margin-bottom: -2px;
-}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-dropcap-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-dropcap() {}

package/src/less/theme/floating-shadow.less

@@ -1,20 +0,0 @@
-//
-// Component: Floating Shadow
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-floating-shadow() {}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-floating-shadow-misc() {}

package/src/less/theme/logo.less

@@ -1,29 +0,0 @@
-//
-// Component: Logo
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-logo() {}
-
-.hook-logo-hover() {}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-logo-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}

package/src/less/theme/marquee.less

@@ -1,14 +0,0 @@
-//
-// Component: Marquee
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-marquee-misc() {}

package/src/scss/components/dropcap.scss

@@ -1,63 +0,0 @@
-@use "sass:meta";
-
-// Name:            Dropcap
-// Description:     Style for the drop cap
-//
-// Component:       `uk-dropcap`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-/* ========================================================================
-   Component: Dropcap
- ========================================================================== */
-
-/*
- * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
- * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
- */
-
-.uk-dropcap::first-letter,
-/* 1 */
-.uk-dropcap > p:first-of-type::first-letter {
-    display: block;
-    margin-right: $dropcap-margin-right;
-    float: left;
-    font-size: $dropcap-font-size;
-    line-height: $dropcap-line-height;
-    @if(meta.mixin-exists(hook-dropcap)) {@include hook-dropcap();}
-}
-
-/* 2 */
-@-moz-document url-prefix() {
-
-  .uk-dropcap::first-letter,
-  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
-
-}
-
-
-// Misc
-// ========================================================================
-
-@if(meta.mixin-exists(hook-dropcap-misc)) {@include hook-dropcap-misc();}
-
-
-// Hooks
-// ========================================================================
-
-// @mixin hook-dropcap(){}
-// @mixin hook-dropcap-misc(){}
-
-
-// Inverse
-// ========================================================================
-
-
-
-// @mixin hook-inverse-dropcap(){}

package/src/scss/components/floating-shadow.scss

@@ -1,63 +0,0 @@
-@use "sass:meta";
-
-// Name:            Floating Shadow
-// Description:     Component to create floating shadows
-//
-// Component:       `uk-floating-shadow`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-
-/* ========================================================================
-   Component: Floating Shadow
- ========================================================================== */
-
-/*
- * 1. Set position.
- * 2. Set style
- * 3. Fix shadow being clipped in Safari if container is animated
- */
-
-.uk-floating-shadow {
-    display: inline-block;
-    position: relative;
-    z-index: 0;
-    max-width: 100%;
-    vertical-align: middle;
-}
-
-.uk-floating-shadow::after {
-    content: "";
-    /* 1 */
-    position: absolute;
-    bottom: $floating-shadow-bottom;
-    left: 0;
-    right: 0;
-    z-index: -1;
-    /* 2 */
-    height: $floating-shadow-height;
-    border-radius: $floating-shadow-border-radius;
-    background: $floating-shadow-background;
-    filter: blur($floating-shadow-blur);
-    /* 3 */
-    will-change: filter;
-    @if(meta.mixin-exists(hook-floating-shadow)) {@include hook-floating-shadow();}
-}
-
-
-// Misc
-// ========================================================================
-
-@if(meta.mixin-exists(hook-floating-shadow-misc)) {@include hook-floating-shadow-misc();}
-
-
-// Hooks
-// ========================================================================
-
-// @mixin hook-floating-shadow(){}
-// @mixin hook-floating-shadow-misc(){}

package/src/scss/components/logo.scss

@@ -1,75 +0,0 @@
-@use "sass:meta";
-
-// Name:            Logo
-// Description:     Style for the logo
-//
-// Component:       `uk-logo`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Logo
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Required for `a`
- * 3. Behave like image but can be overridden through flex utility classes
- */
-
-.uk-logo {
-    /* 1 */
-    font-size: $logo-font-size;
-    font-family: $logo-font-family;
-    color: $logo-color;
-    /* 2 */
-    text-decoration: none;
-    @if(meta.mixin-exists(hook-logo)) {@include hook-logo();}
-}
-
-/* 3 */
-:where(.uk-logo) {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Hover */
-.uk-logo:hover {
-    color: $logo-hover-color;
-    /* 2 */
-    text-decoration: none;
-    @if(meta.mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
-}
-
-.uk-logo :where(img:not([uk-svg]), svg, video) { display: block; }
-
-.uk-logo-inverse:where(:not([uk-svg])) { display: none; }
-
-
-// Misc
-// ========================================================================
-
-@if(meta.mixin-exists(hook-logo-misc)) {@include hook-logo-misc();}
-
-
-// Hooks
-// ========================================================================
-
-// @mixin hook-logo(){}
-// @mixin hook-logo-hover(){}
-// @mixin hook-logo-misc(){}
-
-
-// Inverse
-// ========================================================================
-
-
-
-
-// @mixin hook-inverse-logo(){}
-// @mixin hook-inverse-logo-hover(){}

package/src/scss/components/marquee.scss

@@ -1,136 +0,0 @@
-@use "sass:meta";
-@use "sass:string";
-
-// Name:            Marquee
-// Description:     Component to create scrolling areas
-//
-// Component:       `uk-marquee`
-//
-// Sub-objects:     `uk-marquee-items`
-//
-// Modifiers:       `uk-marquee-vertical`
-//                  `uk-marquee-fade`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Marquee
- ========================================================================== */
-
-/*
- * 1. Fallback for Safari 15 and older
- * 2. Clip child elements
- *    `clip` prevents accidental scrolling through elements in slide getting focused
- *    `clip` also works in only one direction
- * 3. Prevent tab highlighting on iOS.
- */
-
-.uk-marquee {
-    /* 1 */
-    overflow-x: hidden;
-    /* 2 */
-    overflow-x: clip;
-    /* 3 */
-    -webkit-tap-highlight-color: transparent;
-    @if(meta.mixin-exists(hook-marquee)) {@include hook-marquee();}
-}
-
-.uk-marquee-vertical {
-    overflow: visible;
-    overflow-y: hidden;
-    overflow-y: clip;
-}
-
-/*
- * Fade out
- */
-
-.uk-marquee-fade {
-    --uk-overflow-fade-size: 100px;
-    --uk-overflow-fade-direction: right;
-}
-.uk-marquee-fade.uk-marquee-vertical { --uk-overflow-fade-direction: bottom; }
-
-.uk-marquee-fade {
-    mask-image: linear-gradient(
-        to var(--uk-overflow-fade-direction),
-        rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)),
-        #000 var(--uk-overflow-fade-size),
-        #000 string.unquote('calc(100% - var(--uk-overflow-fade-size))'),
-        rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity))
-    );
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * 1. Create a containing block.
- */
-
-.uk-marquee-items {
-    /* 1 */
-    position: relative;
-}
-
-/*
- * 1. Reset list style without interfering with grid
- * 2. Prevent displaying the callout information on iOS.
- */
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items:not(.uk-grid) {
-    display: flex;
-    /* 1 */
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    /* 2 */
-    -webkit-touch-callout: none;
-}
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items.uk-grid { flex-wrap: nowrap; }
-
-
-/* Item
- ========================================================================== */
-
-/*
- * 1. Let items take content dimensions (0 0 auto)
- *    `max-width` needed to keep image responsiveness and prevent content overflow
- * 2. Create position context
- * 3. Create animation along offset-path
- */
-
-.uk-marquee-items > * {
-    /* 1 */
-    flex: none !important;
-    box-sizing: border-box;
-    max-width: 100%;
-    /* 2 */
-    position: relative;
-    /* 3 */
-    offset-anchor: 0 0;
-    offset-rotate: 0deg;
-    offset-path: path(var(--uk-marquee-path));
-    animation: var(--uk-marquee-duration) linear calc(var(--uk-marquee-start) / -100 * var(--uk-marquee-duration)) infinite var(--uk-marquee-direction) uk-marquee;
-}
-
-@keyframes uk-marquee {
-    0% { offset-distance: 0; }
-    100% { offset-distance: 100%; }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if(meta.mixin-exists(hook-marquee-misc)) {@include hook-marquee-misc();}
-
-// @mixin hook-marquee(){}
-// @mixin hook-marquee-misc(){}

package/tests/dropcap.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-gb" dir="ltr">
-
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Dropcap - UIkit tests</title>
-        <script src="js/test.js"></script>
-    </head>
-
-    <body>
-
-        <div class="uk-container">
-
-            <h1>Drop Cap</h1>
-
-            <p class="uk-text-lead uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
-            <div class="uk-dropcap">
-                <p>Torem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            </div>
-
-        </div>
-
-    </body>
-</html>