@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/grid.scss

@@ -1,650 +0,0 @@
-// Name:            Grid
-// Description:     Component to create responsive, fluid and nestable grids
-//
-// Component:       `uk-grid`
-//
-// Modifiers:       `uk-grid-xsmall`
-//                  `uk-grid-small`
-//                  `uk-grid-medium`
-//                  `uk-grid-large`
-//                  `uk-grid-collapse`
-//                  `uk-grid-divider`
-//                  `uk-grid-match`
-//                  `uk-grid-stack`
-//                  `uk-grid-margin`
-//                  `uk-grid-margin-small`
-//                  `uk-grid-margin-medium`
-//                  `uk-grid-margin-large`
-//                  `uk-grid-margin-collapse`
-//
-// Sub-modifier:    `uk-grid-item-match`
-//
-// States:          `uk-first-column`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Grid
- ========================================================================== */
-
-/*
- * 1. Allow cells to wrap into the next line
- * 2. Reset list
- * 3. Horizontal gutter
- * 4. Vertical gutter
- */
-
-.uk-grid {
-    display: flex;
-    flex-wrap: wrap; /* 1 */
-    list-style: none; /* 2 */
-    margin-left: calc(var(--grid-gutter-horizontal) * -1); /* 3 */
-    padding: 0;
-    row-gap: var(--grid-gutter-vertical); /* 4 */
-}
-
-/*
- * Grid cell
- * 1. Horizontal gutter
- * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
- * Reset margin for e.g. paragraphs
- */
-
-.uk-grid > * {
-    margin: 0;
-
-    /* 1 */
-    padding-left: var(--grid-gutter-horizontal);
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-grid > * > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Gutter
- ========================================================================== */
-
-/*
- * Default
- */
-
-/* Vertical */
-.uk-grid + .uk-grid,
-* + .uk-grid-margin {
-    margin-top: var(--grid-gutter-vertical);
-}
-
-.uk-grid > .uk-grid-margin {
-    margin-top: 0;
-}
-
-
-/* Phones portrait and smaller */
-@media (max-width: $breakpoint-xsmall-max) {
-    /* Horizontal */
-    .uk-grid {
-        margin-left: calc(var(--grid-gutter-horizontal-s) * -1);
-        row-gap: var(--grid-gutter-vertical-s);
-    }
-
-    .uk-grid > * {
-        padding-left: var(--grid-gutter-horizontal-s);
-    }
-
-    /* Vertical */
-    .uk-grid + .uk-grid,
-    * + .uk-grid-margin {
-        margin-top: var(--grid-gutter-vertical-s);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    /* Horizontal */
-    .uk-grid {
-        margin-left: calc(var(--grid-gutter-horizontal-m) * -1);
-        row-gap: var(--grid-gutter-vertical-m);
-    }
-
-    .uk-grid > * {
-        padding-left: var(--grid-gutter-horizontal-m);
-    }
-
-    /* Vertical */
-    .uk-grid + .uk-grid,
-    * + .uk-grid-margin {
-        margin-top: var(--grid-gutter-vertical-m);
-    }
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    /* Horizontal */
-    .uk-grid {
-        margin-left: calc(var(--grid-gutter-horizontal-l) * -1);
-        row-gap: var(--grid-gutter-vertical-l);
-    }
-
-    .uk-grid > * {
-        padding-left: var(--grid-gutter-horizontal-l);
-    }
-
-    /* Vertical */
-    .uk-grid + .uk-grid,
-    * + .uk-grid-margin {
-        margin-top: var(--grid-gutter-vertical-l);
-    }
-}
-
-/*
- * XSmall
- */
-
-/* Horizontal */
-.uk-grid-xsmall,
-.uk-grid-column-xsmall {
-    margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -1);
-}
-
-.uk-grid-xsmall,
-.uk-grid-row-xsmall {
-    row-gap: var(--grid-xsmall-gutter-vertical);
-}
-
-.uk-grid-xsmall > *,
-.uk-grid-column-xsmall > * {
-    padding-left: var(--grid-xsmall-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid + .uk-grid-xsmall,
-.uk-grid + .uk-grid-row-xsmall,
-* + .uk-grid-margin-xsmall {
-    margin-top: var(--grid-xsmall-gutter-vertical);
-}
-
-/*
- * Small
- */
-
-/* Horizontal */
-.uk-grid-small,
-.uk-grid-column-small {
-    margin-left: calc(var(--grid-small-gutter-horizontal) * -1);
-}
-
-.uk-grid-small,
-.uk-grid-row-small {
-    row-gap: var(--grid-small-gutter-vertical);
-}
-
-.uk-grid-small > *,
-.uk-grid-column-small > * {
-    padding-left: var(--grid-small-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid + .uk-grid-small,
-.uk-grid + .uk-grid-row-small,
-* + .uk-grid-margin-small {
-    margin-top: var(--grid-small-gutter-vertical);
-}
-
-/*
- * Medium
- */
-
-/* Horizontal */
-.uk-grid-medium,
-.uk-grid-column-medium {
-    margin-left: calc(var(--grid-medium-gutter-horizontal) * -1);
-}
-
-.uk-grid-medium,
-.uk-grid-row-medium {
-    row-gap: var(--grid-medium-gutter-vertical);
-}
-
-.uk-grid-medium > *,
-.uk-grid-column-medium > * {
-    padding-left: var(--grid-medium-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid + .uk-grid-medium,
-.uk-grid + .uk-grid-row-medium,
-* + .uk-grid-margin-medium {
-    margin-top: var(--grid-medium-gutter-vertical);
-}
-
-/*
- * Large
- */
-
-/* Horizontal */
-.uk-grid-large,
-.uk-grid-column-large {
-    margin-left: calc(var(--grid-large-gutter-horizontal) * -1);
-}
-
-.uk-grid-large,
-.uk-grid-row-large {
-    row-gap: var(--grid-large-gutter-vertical);
-}
-
-.uk-grid-large > *,
-.uk-grid-column-large > * {
-    padding-left: var(--grid-large-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid + .uk-grid-large,
-.uk-grid + .uk-grid-row-large,
-* + .uk-grid-margin-large {
-    margin-top: var(--grid-large-gutter-vertical);
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    /* Horizontal */
-    .uk-grid-large,
-    .uk-grid-column-large {
-        margin-left: calc(var(--grid-large-gutter-horizontal-l) * -1);
-    }
-
-    .uk-grid-large,
-    .uk-grid-row-large {
-        row-gap: var(--grid-large-gutter-vertical-l);
-    }
-
-    .uk-grid-large > *,
-    .uk-grid-column-large > * {
-        padding-left: var(--grid-large-gutter-horizontal-l);
-    }
-
-    /* Vertical */
-    .uk-grid + .uk-grid-large,
-    .uk-grid + .uk-grid-row-large,
-    * + .uk-grid-margin-large {
-        margin-top: var(--grid-large-gutter-vertical-l);
-    }
-}
-
-/*
- * Collapse
- */
-
-/* Horizontal */
-.uk-grid-collapse,
-.uk-grid-column-collapse {
-    margin-left: 0;
-}
-
-.uk-grid-collapse,
-.uk-grid-row-collapse {
-    row-gap: 0;
-}
-
-.uk-grid-collapse > *,
-.uk-grid-column-collapse > * {
-    padding-left: 0;
-}
-
-/* Vertical */
-.uk-grid + .uk-grid-collapse,
-.uk-grid + .uk-grid-row-collapse {
-    margin-top: 0;
-}
-
-
-/* Match child of a grid cell
- ========================================================================== */
-
-/*
- * Behave like a block element
- * 1. Wrap into the next line
- * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
- * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
- */
-
-.uk-grid-match > *,
-.uk-grid-item-match {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-}
-
-.uk-grid-match > * > :not([class*='uk-width']),
-.uk-grid-item-match > :not([class*='uk-width']) {
-    /* 2 */
-    box-sizing: border-box;
-
-    /* 3 */
-    flex: auto;
-    width: 100%;
-}
-
-
-/* Divider
- ========================================================================== */
-
-.uk-grid-divider > * {
-    padding-left: calc(var(--grid-gutter-horizontal) * 2);
-    position: relative;
-}
-
-.uk-grid-divider > :not(.uk-first-column)::before {
-    border-left: var(--grid-divider-border-width) solid var(--grid-divider-border);
-    bottom: 0;
-    content: '';
-    left: var(--grid-gutter-horizontal);
-    position: absolute;
-    top: 0;
-    @if meta.mixin-exists('hook-grid-divider-horizontal') {
-        @include hook-grid-divider-horizontal
-    };
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
-    border-top: var(--grid-divider-border-width) solid var(--grid-divider-border);
-    content: '';
-    left: calc(var(--grid-gutter-horizontal) * 2);
-    position: absolute;
-    right: 0;
-    top: calc(var(--grid-gutter-vertical) * -1);
-    @if meta.mixin-exists('hook-grid-divider-vertical') {
-        @include hook-grid-divider-vertical
-    };
-}
-
-/*
- * Default
- */
-
-.uk-grid-divider.uk-grid-stack {
-    row-gap: unset;
-}
-
-/* Horizontal */
-.uk-grid-divider {
-    margin-left: calc(var(--grid-gutter-horizontal) * -2);
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
-    margin-top: calc(var(--grid-gutter-vertical) * 2);
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    /* Horizontal */
-    .uk-grid-divider {
-        margin-left: calc(var(--grid-gutter-horizontal-l) * -2);
-    }
-
-    .uk-grid-divider > * {
-        padding-left: calc(var(--grid-gutter-horizontal-l) * 2);
-    }
-
-    .uk-grid-divider > :not(.uk-first-column)::before {
-        left: var(--grid-gutter-horizontal-l);
-    }
-
-    /* Vertical */
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
-        margin-top: calc(var(--grid-gutter-vertical-l) * 2);
-    }
-
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
-        left: calc(var(--grid-gutter-horizontal-l) * 2);
-        top: calc(var(--grid-gutter-vertical-l) * -1);
-    }
-}
-
-/*
- * Xsmall
- */
-
-/* Horizontal */
-.uk-grid-divider.uk-grid-xsmall,
-.uk-grid-divider.uk-grid-column-xsmall {
-    margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -2);
-}
-
-.uk-grid-divider.uk-grid-xsmall > *,
-.uk-grid-divider.uk-grid-column-xsmall > * {
-    padding-left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
-}
-
-.uk-grid-divider.uk-grid-xsmall > :not(.uk-first-column)::before,
-.uk-grid-divider.uk-grid-column-xsmall > :not(.uk-first-column)::before {
-    left: var(--grid-xsmall-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin {
-    margin-top: calc(var(--grid-xsmall-gutter-vertical) * 2);
-}
-
-.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
-    top: calc(var(--grid-xsmall-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin::before {
-    top: calc(var(--grid-xsmall-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-column-xsmall.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
-}
-
-/*
- * Small
- */
-
-/* Horizontal */
-.uk-grid-divider.uk-grid-small,
-.uk-grid-divider.uk-grid-column-small {
-    margin-left: calc(var(--grid-small-gutter-horizontal) * -2);
-}
-
-.uk-grid-divider.uk-grid-small > *,
-.uk-grid-divider.uk-grid-column-small > * {
-    padding-left: calc(var(--grid-small-gutter-horizontal) * 2);
-}
-
-.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
-.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
-    left: var(--grid-small-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
-    margin-top: calc(var(--grid-small-gutter-vertical) * 2);
-}
-
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-small-gutter-horizontal) * 2);
-    top: calc(var(--grid-small-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
-    top: calc(var(--grid-small-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-small-gutter-horizontal) * 2);
-}
-
-/*
- * Medium
- */
-
-/* Horizontal */
-.uk-grid-divider.uk-grid-medium,
-.uk-grid-divider.uk-grid-column-medium {
-    margin-left: calc(var(--grid-medium-gutter-horizontal) * -2);
-}
-
-.uk-grid-divider.uk-grid-medium > *,
-.uk-grid-divider.uk-grid-column-medium > * {
-    padding-left: calc(var(--grid-medium-gutter-horizontal) * 2);
-}
-
-.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
-.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
-    left: var(--grid-medium-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
-    margin-top: calc(var(--grid-medium-gutter-vertical) * 2);
-}
-
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-medium-gutter-horizontal) * 2);
-    top: calc(var(--grid-medium-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
-    top: calc(var(--grid-medium-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-medium-gutter-horizontal) * 2);
-}
-
-/*
- * Large
- */
-
-/* Horizontal */
-.uk-grid-divider.uk-grid-large,
-.uk-grid-divider.uk-grid-column-large {
-    margin-left: calc(var(--grid-large-gutter-horizontal) * -2);
-}
-
-.uk-grid-divider.uk-grid-large > *,
-.uk-grid-divider.uk-grid-column-large > * {
-    padding-left: calc(var(--grid-large-gutter-horizontal) * 2);
-}
-
-.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
-.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
-    left: var(--grid-large-gutter-horizontal);
-}
-
-/* Vertical */
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
-    margin-top: calc(var(--grid-large-gutter-vertical) * 2);
-}
-
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-large-gutter-horizontal) * 2);
-    top: calc(var(--grid-large-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
-    top: calc(var(--grid-large-gutter-vertical) * -1);
-}
-
-.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
-    left: calc(var(--grid-large-gutter-horizontal) * 2);
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    /* Horizontal */
-    .uk-grid-divider.uk-grid-large,
-    .uk-grid-divider.uk-grid-column-large {
-        margin-left: calc(var(--grid-large-gutter-horizontal-l) * -2);
-    }
-
-    .uk-grid-divider.uk-grid-large > *,
-    .uk-grid-divider.uk-grid-column-large > * {
-        padding-left: calc(var(--grid-large-gutter-horizontal-l) * 2);
-    }
-
-    .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
-    .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
-        left: var(--grid-large-gutter-horizontal-l);
-    }
-
-    /* Vertical */
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
-        margin-top: calc(var(--grid-large-gutter-vertical-l) * 2);
-    }
-
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
-        left: calc(var(--grid-large-gutter-horizontal-l) * 2);
-        top: calc(var(--grid-large-gutter-vertical-l) * -1);
-    }
-
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
-        top: calc(var(--grid-large-gutter-vertical-l) * -1);
-    }
-
-    .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
-        left: calc(var(--grid-large-gutter-horizontal-l) * 2);
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-grid-misc') {
-    @include hook-grid-misc
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --grid-gutter-horizontal: var(--global-gutter);
-    --grid-gutter-vertical: var(--grid-gutter-horizontal);
-    --grid-gutter-horizontal-s: var(--global-small-gutter);
-    --grid-gutter-vertical-s: var(--grid-gutter-horizontal-s);
-    --grid-gutter-horizontal-m: var(--global-medium-gutter);
-    --grid-gutter-vertical-m: var(--grid-gutter-horizontal-m);
-    --grid-gutter-horizontal-l: var(--global-large-gutter);
-    --grid-gutter-vertical-l: var(--grid-gutter-horizontal-l);
-    --grid-xsmall-gutter-horizontal: var(--global-xsmall-gutter);
-    --grid-xsmall-gutter-vertical: var(--grid-xsmall-gutter-horizontal);
-    --grid-small-gutter-horizontal: var(--global-small-gutter);
-    --grid-small-gutter-vertical: var(--grid-small-gutter-horizontal);
-    --grid-medium-gutter-horizontal: var(--global-medium-gutter);
-    --grid-medium-gutter-vertical: var(--grid-medium-gutter-horizontal);
-    --grid-large-gutter-horizontal: var(--global-large-gutter);
-    --grid-large-gutter-vertical: var(--grid-large-gutter-horizontal);
-    --grid-large-gutter-horizontal-l: var(--global-xlarge-gutter);
-    --grid-large-gutter-vertical-l: var(--grid-large-gutter-horizontal-l);
-    --grid-divider-border-width: var(--global-border-width);
-    --grid-divider-border: var(--global-border);
-
-    // Inverse
-    --inverse-grid-divider-border: var(--inverse-global-border);
-}