@ptsecurity/mosaic 14.7.1 → 15.0.0

package/core/styles/common/_groups.scss

@@ -0,0 +1,116 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin border-top-radius($radius) {
+    border-top: {
+        right-radius: $radius;
+        left-radius: $radius;
+    }
+}
+
+@mixin border-bottom-radius($radius) {
+    border-bottom: {
+        right-radius: $radius;
+        left-radius: $radius;
+    }
+}
+
+@mixin border-right-radius($radius) {
+    border: {
+        bottom-right-radius: $radius;
+        top-right-radius: $radius;
+    }
+}
+
+@mixin border-left-radius($radius) {
+    border: {
+        bottom-left-radius: $radius;
+        top-left-radius: $radius;
+    }
+}
+
+.mc-group {
+    display: flex;
+    flex-direction: row;
+
+    .mc-group_justified {
+        > .mc-group-item {
+            width: 100%;
+        }
+    }
+
+    .mc-group-item + .mc-group-item {
+        margin-left: calc(-1 * var(--mc-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+    }
+
+    & > .mc-group-item:first-child:not(:last-child) {
+        @include border-right-radius(0);
+
+        > .mc-form-field__container {
+            @include border-right-radius(0);
+        }
+    }
+
+    & > .mc-group-item:last-child:not(:first-child) {
+        @include border-left-radius(0);
+
+        > .mc-form-field__container {
+            @include border-left-radius(0);
+        }
+    }
+
+    & > .mc-group-item:not(:first-child):not(:last-child) {
+        border-radius: 0;
+
+        > .mc-form-field__container {
+            border-radius: 0;
+        }
+    }
+}
+
+.mc-vertical-group {
+    display: flex;
+    flex-direction: column;
+
+    /* stylelint-disable no-descending-specificity */
+    > .mc-group-item {
+        &:first-child:not(:last-child) {
+            @include border-bottom-radius(0);
+
+            border-top-right-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+
+            > .mc-form-field__container {
+                @include border-bottom-radius(0);
+            }
+        }
+
+        &:last-child:not(:first-child) {
+            @include border-top-radius(0);
+
+            border-bottom-left-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
+
+            > .mc-form-field__container {
+                @include border-top-radius(0);
+            }
+        }
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+
+            > .mc-form-field__container {
+                border-radius: 0;
+            }
+        }
+    }
+
+    .mc-group-item + .mc-group-item {
+        margin-top: calc(-1 * var(--mc-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+

package/core/styles/common/_index.scss

@@ -0,0 +1,13 @@
+@forward 'animation';
+@forward 'button';
+@forward 'clearfix';
+@forward 'groups';
+@forward 'input';
+@forward 'layout';
+@forward 'list';
+@forward 'overlay';
+@forward 'popup';
+@forward 'rtl';
+@forward 'size';
+@forward 'vendor-prefixes';
+@forward 'visually-hidden';

package/core/styles/common/_input.scss

@@ -0,0 +1,28 @@
+@mixin mc-reset-input {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+
+    /* clears the 'X' from Internet Explorer */
+    &::-ms-clear {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    &::-ms-reveal {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        display: none;
+    }
+}

package/core/styles/common/_layout.scss

@@ -0,0 +1,8 @@
+// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
+@mixin mc-fill {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+}

package/core/styles/common/_list.scss

@@ -0,0 +1,46 @@
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
+@mixin mc-truncate-line() {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin mc-normalize-text() {
+    & > * {
+        margin: 0;
+        padding: 0;
+        font-weight: normal;
+        font-size: inherit;
+    }
+}
+
+// This mixin provides base styles for the wrapper around mc-line elements in a list.
+@mixin mc-line-wrapper-base() {
+    @include mc-normalize-text();
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    // Must remove wrapper when lines are empty or it takes up horizontal
+    // space and pushes other elements to the right.
+    &:empty {
+        display: none;
+    }
+}
+
+@mixin mc-no-select() {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
+.mc-no-select {
+    @include mc-no-select;
+}

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);