@koobiq/components 16.0.0-beta.1

package/core/styles/common/_overlay.scss

@@ -0,0 +1,173 @@
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$overlay-container-z-index: 1000 !default;
+$overlay-z-index: 1000 !default;
+$overlay-backdrop-z-index: 1000 !default;
+
+// Background color for all of the backdrops
+$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
+
+// Default backdrop animation is based on the Material Design swift-ease-out.
+$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+
+/// Emits structural styles required for cdk/overlay to function.
+@mixin overlay() {
+    .cdk-overlay-container,
+    .cdk-global-overlay-wrapper {
+        // Disable events from being captured on the overlay container.
+        pointer-events: none;
+
+        // The container should be the size of the viewport.
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+    // The overlay-container is an invisible element which contains all individual overlays.
+    .cdk-overlay-container {
+        position: fixed;
+        z-index: $overlay-container-z-index;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+
+        &:empty {
+            // Hide the element when it doesn't have any child nodes. This doesn't
+            // include overlays that have been detached, rather than disposed.
+            display: none;
+        }
+    }
+
+    // We use an extra wrapper element in order to use make the overlay itself a flex item.
+    // This makes centering the overlay easy without running into the subpixel rendering
+    // problems tied to using `transform` and without interfering with the other position
+    // strategies.
+    .cdk-global-overlay-wrapper {
+        display: flex;
+        position: absolute;
+        z-index: $overlay-z-index;
+    }
+
+    // A single overlay pane.
+    .cdk-overlay-pane {
+        // Note: it's important for this one to start off `absolute`,
+        // in order for us to be able to measure it correctly.
+        position: absolute;
+        pointer-events: auto;
+        box-sizing: border-box;
+        z-index: $overlay-z-index;
+
+        // For connected-position overlays, we set `display: flex` in
+        // order to force `max-width` and `max-height` to take effect.
+        display: flex;
+        max-width: 100%;
+        max-height: 100%;
+
+        // todo перепроверить
+        margin: 0;
+        padding: 0;
+    }
+
+    .cdk-overlay-backdrop {
+        // TODO(jelbourn): reuse sidenav fullscreen mixin.
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        z-index: $overlay-backdrop-z-index;
+        pointer-events: auto;
+        -webkit-tap-highlight-color: transparent;
+        transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+        opacity: 0;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+
+        &.cdk-overlay-backdrop-showing {
+            opacity: 1;
+
+            // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
+            // this file will be copied to the top-level `cdk` package when putting together the files
+            // for npm. Any relative import paths we use here will become invalid once the file is copied.
+            .cdk-high-contrast-active & {
+                // In high contrast mode the rgba background will become solid
+                // so we need to fall back to making it opaque using `opacity`.
+                opacity: 0.6;
+            }
+        }
+    }
+
+    .cdk-overlay-dark-backdrop {
+        background: $overlay-backdrop-color;
+    }
+
+    .cdk-overlay-transparent-backdrop {
+        // Define a transition on the visibility so that the `transitionend` event can fire immediately.
+        transition: visibility 1ms linear, opacity 1ms linear;
+        visibility: hidden;
+        opacity: 1;
+
+        // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
+        // capturing the user's mouse scroll events. Since we also can't use something like
+        // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
+        // all and using `opacity` to make the element transparent.
+        &.cdk-overlay-backdrop-showing {
+            opacity: 0;
+            visibility: visible;
+        }
+    }
+
+    .cdk-overlay-backdrop-noop-animation {
+        transition: none;
+    }
+
+    // Overlay parent element used with the connected position strategy. Used to constrain the
+    // overlay element's size to fit within the viewport.
+    .cdk-overlay-connected-position-bounding-box {
+        position: absolute;
+        z-index: $overlay-z-index;
+
+        // We use `display: flex` on this element exclusively for centering connected overlays.
+        // When *not* centering, a top/left/bottom/right will be set which overrides the normal
+        // flex layout.
+        display: flex;
+
+        // We use the `column` direction here to avoid some flexbox issues in Edge
+        // when using the "grow after open" options.
+        flex-direction: column;
+
+        // Add some dimensions so the element has an `innerText` which some people depend on in tests.
+        min-width: 1px;
+        min-height: 1px;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    // Used when disabling global scrolling.
+    .cdk-global-scrollblock {
+        position: fixed;
+
+        // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+        // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+        // that the element had before we made it `fixed`.
+        width: 100%;
+
+        // Note: this will always add a scrollbar to whatever element it is on, which can
+        // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+        // block scrolling on a page that doesn't have a scrollbar in the first place.
+        overflow-y: scroll;
+    }
+}
+

package/core/styles/common/_popup.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+
+@mixin popup-params($theme) {
+    $popup: map.get(map.get($theme, components), popup);
+
+    box-shadow: map.get($popup, shadow);
+    border-color: map.get($popup, border);
+
+    background-color: map.get($popup, background);
+}

package/core/styles/common/_rtl.scss

@@ -0,0 +1,33 @@
+@use 'sass:list';
+// mixin definition ; sets LTR and RTL within the same style call
+// @see https://css-tricks.com/almanac/properties/d/direction/
+
+@mixin rtl($prop, $ltr-value, $rtl-value) {
+    #{$prop}: $ltr-value;
+
+    [dir=rtl] & {
+        #{$prop}: $rtl-value;
+    }
+}
+
+@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
+    #{$ltr-prop}: $value;
+
+    [dir=rtl] & {
+        #{$ltr-prop}: $reset-value;
+        #{$rtl-prop}: $value;
+    }
+}
+
+// To reverse padding (top left bottom right) -> (top right bottom left)
+@function rtl-value($list) {
+    @if list.length($list) == 4 {
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2)
+    }
+
+    @if list.length($list) == 5 {
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5)
+    }
+
+    @return $list;
+}

package/core/styles/common/_size.scss

@@ -0,0 +1,8 @@
+@mixin size($width, $height) {
+    width: $width;
+    height: $height;
+}
+
+@mixin square($size) {
+    @include size($size, $size);
+}

package/core/styles/common/_vendor-prefixes.scss

@@ -0,0 +1,24 @@
+@mixin user-select($value) {
+    -webkit-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}
+
+@mixin input-placeholder {
+    &::placeholder {
+        @content;
+    }
+
+    &::-moz-placeholder {
+        @content;
+    }
+
+    &::-webkit-input-placeholder {
+        @content;
+    }
+
+    &:-ms-input-placeholder {
+        @content;
+    }
+}

package/core/styles/common/_visually-hidden.scss

@@ -0,0 +1,36 @@
+/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
+/// to make that element visually hidden while remaining available to assistive technology.
+@mixin a11y-visually-hidden() {
+    .cdk-visually-hidden {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+
+        // This works around a Chrome bug that can cause the tab to crash when large amounts of
+        // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
+        white-space: nowrap;
+
+        // Avoid browsers rendering the focus ring in some cases.
+        outline: 0;
+
+        // Avoid some cases where the browser will still render the native controls (see #9049).
+        -webkit-appearance: none;
+        -moz-appearance: none;
+
+        // We need at least one of top/bottom/left/right in order to prevent cases where the
+        // absolute-positioned element is pushed down and can affect scrolling (see #24597).
+        // `left` was chosen here, because it's the least likely to break overrides where the
+        // element might have been positioned (e.g. `mat-checkbox`).
+        left: 0;
+
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
+        }
+    }
+}

package/core/styles/functions/_index.scss

@@ -0,0 +1,3 @@
+@forward 'number';
+@forward 'timing';
+@forward 'string';

package/core/styles/functions/_number.scss

@@ -0,0 +1,65 @@
+@use 'sass:math';
+
+
+@function unit-length($number, $unit) {
+    $strings: 'px' 'cm' 'mm' '%' 'ch' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
+    $units:   1px  1cm  1mm  1%  1ch  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
+    $index: index($strings, $unit);
+
+    @if not $index {
+        @warn "Invalid unit `#{$unit}`.";
+        @return false;
+    }
+
+    @return $number * nth($units, $index);
+}
+
+// @author Hugo Giraudel
+// @link http://hugogiraudel.com/2014/01/15/sass-string-to-number/
+@function number($string) {
+    // Matrices
+    $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
+    $numbers:  0   1   2   3   4   5   6   7   8   9;
+
+    // Result
+    $result: 0;
+    $divider: 0;
+    $minus: false;
+
+    // Looping through all characters
+    @for $i from 1 through str-length($string) {
+        $character: str-slice($string, $i, $i);
+        $index: index($strings, $character);
+
+        @if $character == '-' {
+            $minus: true;
+        }
+
+        @else if $character == '.' {
+            $divider: 1;
+        }
+
+        @else {
+            @if not $index {
+                $result: if($minus, $result * -1, $result);
+                @return unit-length($result, str-slice($string, $i));
+            }
+
+            $number: nth($numbers, $index);
+
+            @if $divider == 0 {
+                $result: $result * 10;
+            }
+
+            @else {
+                // Move the decimal dot to the left
+                $divider: $divider * 10;
+                $number: math.div($number, $divider);
+            }
+
+            $result: $result + $number;
+        }
+    }
+
+    @return if($minus, $result * -1, $result);
+}

package/core/styles/functions/_string.scss

@@ -0,0 +1,19 @@
+@use 'sass:string';
+
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+    
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace +
+            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+    
+    @return $string;
+}

package/core/styles/functions/_timing.scss

@@ -0,0 +1,30 @@
+/**
+ * CSS cubic-bezier timing functions
+ * http://bourbon.io/docs/#timing-functions
+ */
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

package/core/styles/theming/_badges-theme.scss

@@ -0,0 +1,118 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'badges' as badge;
+@use '../typography/typography-utils' as *;
+
+
+@mixin kbq-badge-filled-color($badge) {
+    color: map.get($badge, color);
+    background: map.get($badge, background);
+    border: transparent;
+
+    & .kbq-badge-caption {
+        color: map.get($badge, caption);
+    }
+}
+
+@mixin kbq-badge-outline-color($badge) {
+    color: map.get($badge, color);
+    border-color: map.get($badge, border);
+    background: map.get($badge, background);
+
+    & .kbq-badge-caption {
+        color: map.get($badge, caption);
+    }
+}
+
+@mixin kbq-badge-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $badge: map.get(map.get($theme, components), badge);
+
+    $filled: map.get($badge, filled);
+    $outline: map.get($badge, outline);
+
+    @include badge.kbq-badge(map.get($theme, tokens));
+
+    .kbq-badge-filled {
+        $fade-on: map.get($filled, fade-on);
+
+        &.kbq-badge_fade-contrast {
+            @include kbq-badge-filled-color(map.get($fade-on, contrast));
+        }
+
+        &.kbq-badge_fade-theme {
+            @include kbq-badge-filled-color(map.get($fade-on, theme));
+        }
+
+        &.kbq-badge_fade-success {
+            @include kbq-badge-filled-color(map.get($fade-on, success));
+        }
+
+        &.kbq-badge_fade-warning {
+            @include kbq-badge-filled-color(map.get($fade-on, warning));
+        }
+
+        &.kbq-badge_fade-error {
+            @include kbq-badge-filled-color(map.get($fade-on, error));
+        }
+
+        $fade-off: map.get($filled, fade-off);
+
+        &.kbq-badge_success {
+            @include kbq-badge-filled-color(map.get($fade-off, success));
+        }
+
+        &.kbq-badge_warning {
+            @include kbq-badge-filled-color(map.get($fade-off, warning));
+        }
+
+        &.kbq-badge_error {
+            @include kbq-badge-filled-color(map.get($fade-off, error));
+        }
+    }
+
+    .kbq-badge-outline {
+        $fade-on: map.get($outline, fade-on);
+
+        &.kbq-badge_fade-contrast {
+            @include kbq-badge-outline-color(map.get($fade-on, contrast));
+        }
+
+        &.kbq-badge_fade-theme {
+            @include kbq-badge-outline-color(map.get($fade-on, theme));
+        }
+
+        &.kbq-badge_fade-success {
+            @include kbq-badge-outline-color(map.get($fade-on, success));
+        }
+
+        &.kbq-badge_fade-warning {
+            @include kbq-badge-outline-color(map.get($fade-on, warning));
+        }
+
+        &.kbq-badge_fade-error {
+            @include kbq-badge-outline-color(map.get($fade-on, error));
+        }
+    }
+}
+
+@mixin kbq-badge-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-badge {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-normal-default));
+
+        & .kbq-badge-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-normal-caption));
+        }
+    }
+
+    .kbq-badge_compact {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-compact-default));
+
+        & .kbq-badge-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, badge-font-compact-caption));
+        }
+    }
+}

package/core/styles/theming/_badges.scss

@@ -0,0 +1,57 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+//@use '../tokens.kbq.import' as tokens;
+
+//$tokens: meta.module-variables(tokens) !default;
+
+
+@mixin kbq-badge($tokens) {
+    .kbq-badge-filled,
+    .kbq-badge-outline {
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        text-align: center;
+        white-space: nowrap;
+
+        border-style: solid;
+
+        box-sizing: border-box;
+
+        padding:
+            var(--kbq-badge-size-normal-vertical-padding, map.get($tokens, badge-size-normal-vertical-padding))
+            var(--kbq-badge-size-normal-horizontal-padding, map.get($tokens, badge-size-normal-horizontal-padding));
+
+        border: {
+            width: var(--kbq-badge-size-normal-border-width, map.get($tokens, badge-size-normal-border-width));
+            radius: var(--kbq-badge-size-normal-border-radius, map.get($tokens, badge-size-normal-border-radius));
+        }
+
+        & .kbq-badge-caption {
+            padding-left:
+                var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
+        }
+
+        &.kbq-badge_compact {
+            padding:
+                var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
+                var(
+                    --kbq-badge-size-compact-horizontal-padding,
+                    map.get($tokens, badge-size-compact-horizontal-padding)
+                );
+
+            border: {
+                width: var(--kbq-badge-size-compact-border-width, map.get($tokens, badge-size-compact-border-width));
+                radius: var(--kbq-badge-size-compact-border-radius, map.get($tokens, badge-size-compact-border-radius));
+            }
+
+            & .kbq-badge-caption {
+                padding-left:
+                    var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
+            }
+        }
+    }
+}