@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/base.scss

@@ -1,656 +0,0 @@
-// Name:            Base
-// Description:     Default values for HTML elements
-//
-// Component:       `uk-link`
-//                  `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
-//                  `uk-hr`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Base
- ========================================================================== */
-
-/*
- * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- * 3. Style
- */
-
-html {
-    background: var(--base-body-background); /* 3 */
-    color: var(--base-body-color); /* 3 */
-    font-family: var(--base-body-font-family), system-ui;
-    font-size: var(--base-body-font-size); /* 1 */
-    font-weight: var(--base-body-font-weight);
-    line-height: var(--base-body-line-height);
-    text-size-adjust: 100%; /* 2 */
-    @if meta.mixin-exists('hook-base-body') {
-        @include hook-base-body;
-    }
-}
-
-/*
- * Remove the margin in all browsers.
- */
-
-body { margin: 0; }
-
-
-/* Links
- ========================================================================== */
-
-/*
- * Style
- */
-
-a,
-.uk-link {
-    color: var(--base-link-color);
-    cursor: pointer;
-    text-decoration: var(--base-link-text-decoration);
-    @if meta.mixin-exists('hook-base-link') {
-        @include hook-base-link;
-    }
-}
-
-a:hover,
-.uk-link:hover,
-.uk-link-toggle:hover .uk-link,
-.uk-link-toggle:focus .uk-link {
-    color: var(--base-link-hover-color);
-    text-decoration: var(--base-link-hover-text-decoration);
-    @if meta.mixin-exists('hook-base-link-hover') {
-        @include hook-base-link-hover;
-    }
-}
-
-/*
- * Fix text underline offset if `vertical-align`is set to `middle`
- */
-
-a:has(.uk-text-middle),
-.uk-link:has(.uk-text-middle),
-.uk-link-toggle:hover .uk-link:has(.uk-text-middle) { text-underline-offset: 0.1875em; }
-
-
-/* Text-level semantics
- ========================================================================== */
-
-/*
- * 1. Add the correct text decoration in Edge.
- * 2. The shorthand declaration `underline dotted` is not supported in Safari.
- */
-
-abbr[title] {
-    text-decoration: underline dotted; /* 1 */
-    -webkit-text-decoration-style: dotted; /* 2 */
-}
-
-/*
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong { font-weight: var(--base-strong-font-weight); }
-
-/*
- * 1. Consolas has a better baseline in running text compared to `Courier`
- * 2. Correct the odd `em` font sizing in all browsers.
- * 3. Style
- */
-
-:not(pre) > code,
-:not(pre) > kbd,
-:not(pre) > samp {
-    color: var(--base-code-color); /* 3 */
-    font-family: var(--base-code-font-family), monospace; /* 1 */
-    font-size: var(--base-code-font-size); /* 2 */
-    padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-base-code') {
-        @include hook-base-code;
-    }
-}
-
-/*
- * Emphasize
- */
-
-em { color: var(--base-em-color); }
-
-/*
- * Insert
- */
-
-ins {
-    background: var(--base-ins-background);
-    color: var(--base-ins-color);
-    text-decoration: none;
-}
-
-/*
- * Mark
- */
-
-mark {
-    background: var(--base-mark-background);
-    color: var(--base-mark-color);
-}
-
-/*
- * Quote
- */
-
-q { font-style: var(--base-quote-font-style); }
-
-/*
- * Add the correct font size in all browsers.
- */
-
-small { font-size: var(--base-small-font-size); }
-
-/*
- * Prevents `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
-
-
-/* Embedded content
- ========================================================================== */
-
-/*
- * Remove the gap between the element and the bottom of its parent container.
- */
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video { vertical-align: middle; }
-
-/*
- * 1. Constrain the element to its parent width.
- * 2. Take border and padding into account.
- * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
- * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
- * 5. Size image to fill the element's content box.
- * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
- */
-
-canvas,
-img,
-svg,
-video {
-    aspect-ratio: string.unquote('attr(width type(<number>)) / attr(height type(<number>))'); /* 4 */
-    box-sizing: border-box; /* 3 */
-    height: auto; /* 2 */
-    max-width: 100%; /* 1 */
-    object-fit: cover; /* 5 */
-}
-
-/*
- * Deprecated: only needed for `img` elements with `uk-img`
- * 1. Hide `alt` text for lazy load images.
- * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- */
-
-img:not([src]) {
-    min-width: 1px; /* 2 */
-    visibility: hidden; /* 1 */
-}
-
-/*
- * Iframe
- * Remove border in all browsers
- */
-
-iframe { border: 0; }
-
-
-/* Block elements
- ========================================================================== */
-
-/*
- * Margins
- */
-
-p,
-ul,
-ol,
-dl,
-pre,
-address,
-fieldset,
-figure { margin: 0 0 var(--base-margin-vertical) 0; }
-
-/* Add margin if adjacent element */
-* + p,
-* + ul,
-* + ol,
-* + dl,
-* + pre,
-* + address,
-* + fieldset,
-* + figure { margin-top: var(--base-margin-vertical); }
-
-
-/* Headings
- ========================================================================== */
-
-h1, .uk-h1,
-h2, .uk-h2,
-h3, .uk-h3,
-h4, .uk-h4,
-h5, .uk-h5,
-h6, .uk-h6,
-.uk-heading-small,
-.uk-heading-medium,
-.uk-heading-large,
-.uk-heading-xlarge,
-.uk-heading-2xlarge,
-.uk-heading-3xlarge {
-    color: var(--base-heading-color);
-    font-family: var(--base-heading-font-family), system-ui;
-    font-weight: var(--base-heading-font-weight);
-    margin: 0 0 var(--base-margin-vertical) 0;
-    text-transform: var(--base-heading-text-transform);
-    @if meta.mixin-exists('hook-base-heading') {
-        @include hook-base-heading;
-    }
-}
-
-/* Add margin if adjacent element */
-* + h1, * + .uk-h1,
-* + h2, * + .uk-h2,
-* + h3, * + .uk-h3,
-* + h4, * + .uk-h4,
-* + h5, * + .uk-h5,
-* + h6, * + .uk-h6,
-* + .uk-heading-small,
-* + .uk-heading-medium,
-* + .uk-heading-large,
-* + .uk-heading-xlarge,
-* + .uk-heading-2xlarge,
-* + .uk-heading-3xlarge {
-    margin-top: var(--base-heading-margin-top);
-}
-
-/*
- * Sizes
- */
-
-h1, .uk-h1 {
-    font-size: var(--base-h1-font-size);
-    line-height: var(--base-h1-line-height);
-    @if meta.mixin-exists('hook-base-h1') {
-        @include hook-base-h1;
-    }
-}
-
-h2, .uk-h2 {
-    font-size: var(--base-h2-font-size);
-    line-height: var(--base-h2-line-height);
-    @if meta.mixin-exists('hook-base-h2') {
-        @include hook-base-h2;
-    }
-}
-
-h3, .uk-h3 {
-    font-size: var(--base-h3-font-size);
-    line-height: var(--base-h3-line-height);
-    @if meta.mixin-exists('hook-base-h3') {
-        @include hook-base-h3;
-    }
-}
-
-h4, .uk-h4 {
-    font-size: var(--base-h4-font-size);
-    line-height: var(--base-h4-line-height);
-    @if meta.mixin-exists('hook-base-h4') {
-        @include hook-base-h4;
-    }
-}
-
-h5, .uk-h5 {
-    font-size: var(--base-h5-font-size);
-    line-height: var(--base-h5-line-height);
-    @if meta.mixin-exists('hook-base-h5') {
-        @include hook-base-h5;
-    }
-}
-
-h6, .uk-h6 {
-    font-size: var(--base-h6-font-size);
-    line-height: var(--base-h6-line-height);
-    @if meta.mixin-exists('hook-base-h6') {
-        @include hook-base-h6;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    h1, .uk-h1 { font-size: var(--base-h1-font-size-m); }
-    h2, .uk-h2 { font-size: var(--base-h2-font-size-m); }
-
-}
-
-
-/* Lists
- ========================================================================== */
-
-ul, ol { padding-left: var(--base-list-padding-left); }
-
-/*
- * Reset margin for nested lists
- */
-
-ul > li > ul,
-ul > li > ol,
-ol > li > ol,
-ol > li > ul {
-    margin: 0;
-}
-
-
-/* Description lists
- ========================================================================== */
-
-dt { font-weight: bold; }
-dd { margin-left: 0; }
-
-
-/* Horizontal rules
- ========================================================================== */
-
-/*
- * 1. Show the overflow in Chrome, Edge and IE.
- * 2. Add the correct text-align in Edge and IE.
- * 3. Style
- */
-
-hr, .uk-hr {
-    border: 0; /* 3 */
-    border-top: var(--base-hr-border-width) solid var(--base-hr-border); /* 3 */
-    margin: 0 0 var(--base-hr-margin-vertical) 0; /* 3 */
-    overflow: visible; /* 1 */
-    text-align: inherit; /* 2 */
-    @if meta.mixin-exists('hook-base-hr') {
-        @include hook-base-hr;
-    }
-}
-
-/* Add margin if adjacent element */
-* + hr,
-* + .uk-hr {
-    margin-top: var(--base-hr-margin-vertical);
-}
-
-
-/* Address
- ========================================================================== */
-
-address { font-style: normal; }
-
-
-/* Blockquotes
- ========================================================================== */
-
-blockquote {
-    color: var(--base-blockquote-color);
-    font-size: var(--base-blockquote-font-size);
-    font-style: var(--base-blockquote-font-style);
-    line-height: var(--base-blockquote-line-height);
-    margin: 0 0 var(--base-blockquote-margin-vertical) 0;
-    @if meta.mixin-exists('hook-base-blockquote') {
-        @include hook-base-blockquote;
-    }
-}
-
-/* Add margin if adjacent element */
-* + blockquote {
-    margin-top: var(--base-blockquote-margin-vertical);
-}
-
-/*
- * Content
- */
-
-blockquote p:last-of-type {
-    margin-bottom: 0;
-}
-
-blockquote footer {
-    color: var(--base-blockquote-footer-color);
-    font-size: var(--base-blockquote-footer-font-size);
-    line-height: var(--base-blockquote-footer-line-height);
-    margin-top: var(--base-blockquote-footer-margin-top);
-    @if meta.mixin-exists('hook-base-blockquote-footer') {
-        @include hook-base-blockquote-footer;
-    }
-}
-
-
-/* Preformatted text
- ========================================================================== */
-
-/*
- * 1. Contain overflow in all browsers.
- */
-
-pre {
-    color: var(--base-pre-color);
-    font-family: var(--base-pre-font-family), monospace;
-    font-size: var(--base-pre-font-size);
-    line-height: var(--base-pre-line-height);
-    overflow: auto; /* 1 */
-    tab-size: 4;
-    @if meta.mixin-exists('hook-base-pre') {
-        @include hook-base-pre;
-    }
-}
-
-pre code { font-family: var(--base-pre-font-family), monospace; }
-
-
-/* Focus
- ========================================================================== */
-
-/*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
- * 1. Fallback: Remove `:focus` for a negative tab-indexes.
- * 2. Fallback: Set `:focus` style but not for negative tab-indexes.
- * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
- * 4. Set `:focus-visible` style for browsers which support it.
- */
-
-/* 1 */
-:focus { outline: none; }
-
-/* 2 */
-:focus:not([tabindex^='-']) {
-    outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
-    outline-offset: var(--base-focus-outline-offset);
-}
-
-/* 3 */
-:focus:not(:focus-visible) {
-    outline: none;
-}
-
-/* 4 */
-:focus-visible {
-    outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
-    outline-offset: var(--base-focus-outline-offset);
-}
-
-
-/* Selection pseudo-element
- ========================================================================== */
-
-::selection {
-    background: var(--base-selection-background);
-    color: var(--base-selection-color);
-    text-shadow: none;
-}
-
-
-/* HTML5 elements
- ========================================================================== */
-
-/*
- * 1. Add the correct display in Edge, IE 10+, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-details, /* 1 */
-main { /* 2 */
-    display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary { display: list-item; }
-
-/*
- * Add the correct display in IE.
- */
-
-template { display: none; }
-
-
-/* Pass media breakpoints to JS
- ========================================================================== */
-
-/*
- * Breakpoints
- */
-
-.uk-breakpoint-s::before { content: var(--breakpoint-small); }
-.uk-breakpoint-m::before { content: var(--breakpoint-medium); }
-.uk-breakpoint-l::before { content: var(--breakpoint-large); }
-.uk-breakpoint-xl::before { content: var(--breakpoint-xlarge); }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-base-misc') {
-    @include hook-base-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --base-body-background: var(--global-background);
-    --base-body-font-family: var(--global-font-family);
-    --base-body-font-weight: #{$base-body-font-weight};
-    --base-body-font-size: var(--global-font-size);
-    --base-body-line-height: var(--global-line-height);
-    --base-body-color: var(--global-color);
-    --base-link-color: var(--global-link-color);
-    --base-link-text-decoration: #{$base-link-text-decoration};
-    --base-link-hover-color: var(--global-link-hover-color);
-    --base-link-hover-text-decoration: #{$base-link-hover-text-decoration};
-    --base-strong-font-weight: #{$base-strong-font-weight};
-    --base-code-font-size: var(--global-small-font-size);
-    --base-code-font-family: #{$base-code-font-family};
-    --base-code-color: var(--global-danger-background);
-    --base-code-padding-horizontal: #{$base-code-padding-horizontal};
-    --base-code-padding-vertical: #{$base-code-padding-vertical};
-    --base-em-color: var(--global-danger-background);
-    --base-ins-background: #{$base-ins-background};
-    --base-ins-color: var(--global-color);
-    --base-mark-background: #{$base-mark-background};
-    --base-mark-color: var(--global-color);
-    --base-quote-font-style: #{$base-quote-font-style};
-    --base-small-font-size: #{$base-small-font-size};
-    --base-margin-vertical: var(--global-margin);
-    --base-heading-font-family: var(--global-font-family);
-    --base-heading-font-weight: #{$base-heading-font-weight};
-    --base-heading-color: var(--global-emphasis-color);
-    --base-heading-text-transform: #{$base-heading-text-transform};
-    --base-heading-margin-top: var(--global-medium-margin);
-    --base-h1-font-size-m: var(--global-2xlarge-font-size);
-    --base-h1-font-size: calc(var(--base-h1-font-size-m) * 0.85);
-    --base-h1-line-height: #{$base-h1-line-height};
-    --base-h2-font-size-m: var(--global-xlarge-font-size);
-    --base-h2-font-size: calc(var(--base-h2-font-size-m) * 0.85);
-    --base-h2-line-height: #{$base-h2-line-height};
-    --base-h3-font-size: var(--global-large-font-size);
-    --base-h3-line-height: #{$base-h3-line-height};
-    --base-h4-font-size: var(--global-medium-font-size);
-    --base-h4-line-height: #{$base-h4-line-height};
-    --base-h5-font-size: var(--global-font-size);
-    --base-h5-line-height: #{$base-h5-line-height};
-    --base-h6-font-size: var(--global-small-font-size);
-    --base-h6-line-height: #{$base-h6-line-height};
-    --base-list-padding-left: #{$base-list-padding-left};
-    --base-hr-margin-vertical: var(--global-margin);
-    --base-hr-border-width: var(--global-border-width);
-    --base-hr-border: var(--global-border);
-    --base-blockquote-font-size: var(--global-medium-font-size);
-    --base-blockquote-line-height: #{$base-blockquote-line-height};
-    --base-blockquote-font-style: #{$base-blockquote-font-style};
-    --base-blockquote-margin-vertical: var(--global-margin);
-    --base-blockquote-color: var(--global-emphasis-color);
-    --base-blockquote-footer-color: var(--global-color);
-    --base-blockquote-footer-margin-top: var(--global-small-margin);
-    --base-blockquote-footer-font-size: var(--global-small-font-size);
-    --base-blockquote-footer-line-height: #{$base-blockquote-footer-line-height};
-    --base-pre-font-size: var(--global-small-font-size);
-    --base-pre-line-height: #{$base-pre-line-height};
-    --base-pre-font-family: var(--base-code-font-family);
-    --base-pre-color: var(--global-color);
-    --base-focus-outline-width: #{$base-focus-outline-width};
-    --base-focus-outline-style: #{$base-focus-outline-style};
-    --base-focus-outline: var(--global-emphasis-color);
-    --base-focus-outline-offset: #{$base-focus-outline-offset};
-    --base-selection-background: #{$base-selection-background};
-    --base-selection-color: var(--global-inverse-color);
-
-    // Breakpoint
-    --uk-breakpoint-s: var(--breakpoint-small);
-    --uk-breakpoint-m: var(--breakpoint-medium);
-    --uk-breakpoint-l: var(--breakpoint-large);
-    --uk-breakpoint-xl: var(--breakpoint-xlarge);
-
-    // Inverse
-    --inverse-base-color: var(--inverse-global-color);
-    --inverse-base-link-color: var(--inverse-global-emphasis-color);
-    --inverse-base-link-hover-color: var(--inverse-global-emphasis-color);
-    --inverse-base-code-color: var(--inverse-global-color);
-    --inverse-base-em-color: var(--inverse-global-emphasis-color);
-    --inverse-base-heading-color: var(--inverse-global-emphasis-color);
-    --inverse-base-hr-border: var(--inverse-global-color);
-    --inverse-base-focus-outline: var(--inverse-global-emphasis-color);
-    --inverse-base-blockquote-color: var(--inverse-global-emphasis-color);
-    --inverse-base-blockquote-footer-color: var(--inverse-global-color);
-}