@broxus/react-uikit 0.1.0

package/dist/cjs/styles/utility.scss

@@ -0,0 +1,633 @@
+// Name:            Utility
+// Description:     Utilities collection
+//
+// Component:       `uk-panel-*`
+//                  `uk-clearfix`
+//                  `uk-float-*`
+//                  `uk-overflow-*`
+//                  `uk-resize-*`
+//                  `uk-display-*`
+//                  `uk-inline-*`
+//                  `uk-responsive-*`
+//                  `uk-preserve-width`
+//                  `uk-border-*`
+//                  `uk-box-shadow-*`
+//                  `uk-box-shadow-bottom`
+//                  `uk-dropcap`
+//                  `uk-logo`
+//                  `uk-blend-*`
+//                  `uk-transform-*`
+//                  `uk-transform-origin-*`
+//
+// States:          `uk-disabled`
+//                  `uk-drag`
+//                  `uk-dragover`
+//                  `uk-preserve`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Utility
+ ========================================================================== */
+
+
+/* Panel
+ ========================================================================== */
+
+.uk-panel {
+    box-sizing: border-box;
+    display: flow-root;
+    position: relative;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-panel > :last-child {
+    margin-bottom: 0;
+}
+
+
+/*
+ * Scrollable
+ */
+
+.uk-panel-scrollable {
+    border: var(--panel-scrollable-border-width) solid var(--panel-scrollable-border);
+    height: var(--panel-scrollable-height);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: var(--panel-scrollable-padding);
+    resize: both;
+    @if mixin-exists(hook-panel-scrollable) {
+        @include hook-panel-scrollable;
+    }
+}
+
+
+/* Clearfix
+ ========================================================================== */
+
+/*
+ * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
+ * 2. `table` is used again with `::after` because `clear` only works with block elements.
+ * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
+ */
+
+/* 1 */
+.uk-clearfix::before {
+    content: '';
+    display: table-cell;
+}
+
+/* 2 */
+.uk-clearfix::after {
+    clear: both;
+    content: '';
+    display: table;
+}
+
+
+/* Float
+ ========================================================================== */
+
+/*
+ * 1. Prevent content overflow
+ */
+
+.uk-float-left {
+    float: left;
+}
+
+.uk-float-right {
+    float: right;
+}
+
+/* 1 */
+[class*='uk-float-'] {
+    max-width: 100%;
+}
+
+
+/* Overflow
+ ========================================================================== */
+
+.uk-overflow-hidden {
+    overflow: hidden;
+}
+
+/*
+ * Enable scrollbars if content is clipped
+ * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+ */
+
+.uk-overflow-auto {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.uk-overflow-auto > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Resize
+ ========================================================================== */
+
+.uk-resize {
+    resize: both;
+}
+
+.uk-resize-vertical {
+    resize: vertical;
+}
+
+
+/* Display
+ ========================================================================== */
+
+.uk-display-block {
+    display: block !important;
+}
+
+.uk-display-inline {
+    display: inline !important;
+}
+
+.uk-display-inline-block {
+    display: inline-block !important;
+}
+
+
+/* Inline
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ * 5. Force new layer without creating a new stacking context
+ *    to fix 1px glitch when combined with overlays and transitions in Webkit
+ * 6. Clip child elements
+ */
+
+[class*='uk-inline'] {
+    /* 5 */
+    -webkit-backface-visibility: hidden;
+
+    /* 1 */
+    display: inline-block;
+
+    /* 3 */
+    max-width: 100%;
+
+    /* 2 */
+    position: relative;
+
+    /* 4 */
+    vertical-align: middle;
+}
+
+.uk-inline-clip {
+    /* 6 */
+    overflow: hidden;
+}
+
+
+/* Responsive objects
+ ========================================================================== */
+
+/*
+ * Preserve original dimensions
+ * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
+ */
+
+.uk-preserve-width,
+.uk-preserve-width canvas,
+.uk-preserve-width img,
+.uk-preserve-width svg,
+.uk-preserve-width video {
+    max-width: none;
+}
+
+/*
+ * Responsiveness
+ * Corrects `max-width` and `max-height` behavior if padding and border are used
+ */
+
+.uk-responsive-width,
+.uk-responsive-height {
+    box-sizing: border-box;
+}
+
+/*
+ * 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
+ * 2. Auto scale the height. Only needed if `height` attribute is present
+ */
+
+.uk-responsive-width {
+    /* 2 */
+    height: auto;
+
+    /* 1 */
+    max-width: 100% !important;
+}
+
+/*
+ * 1. Set a maximum height. Only works if the parent element has a fixed height
+ * 2. Auto scale the width. Only needed if `width` attribute is present
+ * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
+ */
+
+.uk-responsive-height {
+    /* 1 */
+    max-height: 100%;
+
+    /* 3 */
+    max-width: none;
+
+    /* 2 */
+    width: auto;
+}
+
+
+/* Border
+ ========================================================================== */
+
+.uk-border-circle {
+    border-radius: 50%;
+}
+
+.uk-border-pill {
+    border-radius: 500px;
+}
+
+.uk-border-rounded {
+    border-radius: var(--border-rounded-border-radius);
+}
+
+/*
+ * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
+ */
+
+.uk-inline-clip[class*='uk-border-'] {
+    -webkit-transform: translateZ(0);
+}
+
+
+/* Box-shadow
+ ========================================================================== */
+
+.uk-box-shadow-small {
+    box-shadow: var(--global-small-box-shadow);
+}
+
+.uk-box-shadow-medium {
+    box-shadow: var(--global-medium-box-shadow);
+}
+
+.uk-box-shadow-large {
+    box-shadow: var(--global-large-box-shadow);
+}
+
+.uk-box-shadow-xlarge {
+    box-shadow: var(--global-xlarge-box-shadow);
+}
+
+/*
+ * Hover
+ */
+
+[class*='uk-box-shadow-hover'] {
+    transition: box-shadow var(--box-shadow-duration) var(--ease-in-out);
+}
+
+.uk-box-shadow-hover-small:hover {
+    box-shadow: var(--global-small-box-shadow);
+}
+
+.uk-box-shadow-hover-medium:hover {
+    box-shadow: var(--global-medium-box-shadow);
+}
+
+.uk-box-shadow-hover-large:hover {
+    box-shadow: var(--global-large-box-shadow);
+}
+
+.uk-box-shadow-hover-xlarge:hover {
+    box-shadow: var(--global-xlarge-box-shadow);
+}
+
+
+/* Box-shadow bottom
+ ========================================================================== */
+
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+
+@supports (filter: blur(0)) {
+    .uk-box-shadow-bottom {
+        display: inline-block;
+        max-width: 100%;
+        position: relative;
+        vertical-align: middle;
+        z-index: 0;
+    }
+
+    .uk-box-shadow-bottom::after {
+        background: var(--box-shadow-bottom-background);
+        border-radius: var(--box-shadow-bottom-border-radius);
+        bottom: calc(var(--box-shadow-bottom-height) * -1);
+        content: '';
+        filter: blur(var(--box-shadow-bottom-blur));
+
+        /* 2 */
+        height: var(--box-shadow-bottom-height);
+        left: 0;
+
+        /* 1 */
+        position: absolute;
+        right: 0;
+
+        /* 3 */
+        will-change: filter;
+        z-index: -1;
+        @if mixin-exists(hook-box-shadow-bottom) {
+            @include hook-box-shadow-bottom;
+        }
+    }
+}
+
+
+/* Drop cap
+ ========================================================================== */
+
+/*
+ * 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
+ * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
+ *    This doubles the `font-size` exponential when using the `em` unit.
+ */
+
+.uk-dropcap::first-letter,
+    /* 1 */
+.uk-dropcap > p:first-of-type::first-letter {
+    display: block;
+    float: left;
+    font-size: var(--dropcap-font-size);
+    line-height: 1;
+    margin-right: var(--dropcap-margin-right);
+    @if 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%;
+    }
+}
+
+/* 3 */
+@supports (-ms-ime-align: auto) {
+    .uk-dropcap > p:first-of-type::first-letter {
+        font-size: 1em;
+    }
+}
+
+
+/* Logo
+ ========================================================================== */
+
+/*
+ * 1. Required for `a`
+ */
+
+.uk-logo {
+    color: var(--logo-color);
+    font-family: var(--logo-font-family);
+    font-size: var(--logo-font-size);
+
+    /* 1 */
+    text-decoration: none;
+    @if mixin-exists(hook-logo) {
+        @include hook-logo;
+    }
+}
+
+/* Hover + Focus */
+.uk-logo:hover,
+.uk-logo:focus {
+    color: var(--logo-hover-color);
+    outline: none;
+
+    /* 1 */
+    text-decoration: none;
+    @if mixin-exists(hook-logo-hover) {
+        @include hook-logo-hover;
+    }
+}
+
+.uk-logo-inverse {
+    display: none;
+}
+
+
+/* Disabled State
+ ========================================================================== */
+
+.uk-disabled {
+    pointer-events: none;
+}
+
+
+/* Drag State
+ ========================================================================== */
+
+/*
+ * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
+ * 2. Fix dragging over iframes
+ */
+
+.uk-drag,
+    /* 1 */
+.uk-drag * {
+    cursor: move;
+}
+
+/* 2 */
+.uk-drag iframe {
+    pointer-events: none;
+}
+
+
+/* Dragover State
+ ========================================================================== */
+
+/*
+ * Create a box-shadow when dragging a file over the upload area
+ */
+
+.uk-dragover {
+    box-shadow: var(--dragover-box-shadow);
+}
+
+
+/* Blend modes
+ ========================================================================== */
+
+.uk-blend-multiply {
+    mix-blend-mode: multiply;
+}
+
+.uk-blend-screen {
+    mix-blend-mode: screen;
+}
+
+.uk-blend-overlay {
+    mix-blend-mode: overlay;
+}
+
+.uk-blend-darken {
+    mix-blend-mode: darken;
+}
+
+.uk-blend-lighten {
+    mix-blend-mode: lighten;
+}
+
+.uk-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+}
+
+.uk-blend-color-burn {
+    mix-blend-mode: color-burn;
+}
+
+.uk-blend-hard-light {
+    mix-blend-mode: hard-light;
+}
+
+.uk-blend-soft-light {
+    mix-blend-mode: soft-light;
+}
+
+.uk-blend-difference {
+    mix-blend-mode: difference;
+}
+
+.uk-blend-exclusion {
+    mix-blend-mode: exclusion;
+}
+
+.uk-blend-hue {
+    mix-blend-mode: hue;
+}
+
+.uk-blend-saturation {
+    mix-blend-mode: saturation;
+}
+
+.uk-blend-color {
+    mix-blend-mode: color;
+}
+
+.uk-blend-luminosity {
+    mix-blend-mode: luminosity;
+}
+
+
+/* Transform
+========================================================================== */
+
+.uk-transform-center {
+    transform: translate(-50%, -50%);
+}
+
+
+/* Transform Origin
+========================================================================== */
+
+.uk-transform-origin-top-left {
+    transform-origin: 0 0;
+}
+
+.uk-transform-origin-top-center {
+    transform-origin: 50% 0;
+}
+
+.uk-transform-origin-top-right {
+    transform-origin: 100% 0;
+}
+
+.uk-transform-origin-center-left {
+    transform-origin: 0 50%;
+}
+
+.uk-transform-origin-center-right {
+    transform-origin: 100% 50%;
+}
+
+.uk-transform-origin-bottom-left {
+    transform-origin: 0 100%;
+}
+
+.uk-transform-origin-bottom-center {
+    transform-origin: 50% 100%;
+}
+
+.uk-transform-origin-bottom-right {
+    transform-origin: 100% 100%;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-utility-misc) {
+    @include hook-utility-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --panel-scrollable-height: #{$panel-scrollable-height};
+    --panel-scrollable-padding: #{$panel-scrollable-padding};
+    --panel-scrollable-border-width: var(--global-border-width);
+    --panel-scrollable-border: var(--global-border);
+    --border-rounded-border-radius: #{$border-rounded-border-radius};
+    --box-shadow-duration: #{$box-shadow-duration};
+    --box-shadow-bottom-height: #{$box-shadow-bottom-height};
+    --box-shadow-bottom-border-radius: #{$box-shadow-bottom-border-radius};
+    --box-shadow-bottom-background: #{$box-shadow-bottom-background};
+    --box-shadow-bottom-blur: #{$box-shadow-bottom-blur};
+    --dropcap-margin-right: #{$dropcap-margin-right};
+    --dropcap-font-size: #{$global-line-height * 3 * 1em};
+    --logo-font-size: var(--global-large-font-size);
+    --logo-font-family: var(--global-font-family);
+    --logo-color: var(--global-color);
+    --logo-hover-color: var(--global-color);
+    --dragover-box-shadow: #{$dragover-box-shadow};
+
+    // Inverse
+    --inverse-logo-color: var(--inverse-global-color);
+    --inverse-logo-hover-color: var(--inverse-global-color);
+}