mediacube-ui 0.1.346 → 0.1.347

package/src/styles/global.scss

@@ -1,308 +0,0 @@
-@import "./toast";
-@import "../tokens/font-families";
-@import "../tokens/border-radius";
-@import "../tokens/box-shadows";
-
-html {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -ms-overflow-style: scrollbar;
-  -ms-text-size-adjust: 100%;
-  min-height: 100%;
-  font-size: $font-size-200;
-}
-
-body {
-  overflow-y: hidden;
-}
-
-body,
-#__nuxt,
-#__layout,
-.mc-tm-root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-  // убирает превращение х в знак умножения между цифр
-  font-variant-ligatures: none !important;
-}
-
-body {
-  margin: 0;
-  overflow-y: auto;
-  word-break: break-word;
-
-  font-family: $font-family-main;
-  font-size: $font-size-200;
-  line-height: $line-height-200;
-  color: $color-black;
-  font-variant: none !important;
-  font-feature-settings: normal !important;
-}
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
-[role="button"] {
-  cursor: pointer;
-}
-
-input[type="search"] {
-  -webkit-appearance: textfield;
-}
-
-a,
-button,
-[role="button"],
-input,
-label,
-select,
-textarea {
-  touch-action: manipulation;
-}
-
-input {
-  overflow: visible;
-  text-transform: none;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-
-svg {
-  fill: currentColor;
-
-  a &,
-  button & {
-    pointer-events: none;
-  }
-
-  &:not(:root) {
-    overflow: hidden;
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-a {
-  text-decoration-skip-ink: auto;
-}
-
-::selection {
-  background: fade-out($color-purple, 0);
-  color: $color-white;
-}
-
-::-moz-selection {
-  background: fade-out($color-purple, 0);
-  color: $color-white;
-}
-
-input,
-textarea,
-[contenteditable] {
-  caret-color: $color-purple;
-}
-
-button {
-  -webkit-appearance: none;
-}
-
-a,
-button {
-  outline: none;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-hr {
-  box-sizing: content-box;
-  overflow: visible;
-}
-
-pre {
-  font-size: 0.7em;
-}
-
-/**
- * Global classes
- */
-
-// Spaces
-@each $space, $value in $token-spaces {
-  .pb-#{$space} {
-    padding-bottom: $value !important;
-  }
-  .pt-#{$space} {
-    padding-top: $value !important;
-  }
-
-  .mb-#{$space} {
-    margin-bottom: $value !important;
-  }
-  .mt-#{$space} {
-    margin-top: $value !important;
-  }
-}
-
-
-// Visibility
-.hidden-xs {
-  @media #{$media-query-xs} {
-    display: none !important;
-  }
-}
-.hidden-s {
-  @media #{$media-query-s} {
-    display: none !important;
-  }
-}
-.hidden-m {
-  @media #{$media-query-m} {
-    display: none !important;
-  }
-}
-.hidden-l {
-  @media #{$media-query-l} {
-    display: none !important;
-  }
-}
-
-.hidden-xs {
-  @media #{$media-query-xs-down} {
-    display: none !important;
-  }
-}
-.hidden-s-down {
-  @media #{$media-query-s-down} {
-    display: none !important;
-  }
-}
-.hidden-m-down {
-  @media #{$media-query-m-down} {
-    display: none !important;
-  }
-}
-.hidden-l-down {
-  @media #{$media-query-l-down} {
-    display: none !important;
-  }
-}
-
-.color {
-  @each $name, $color in $token-colors {
-    &--#{$name} {
-      color: $color;
-    }
-  }
-}
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@keyframes rotate-reverse {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(-359deg);
-  }
-}
-
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slide-up-with-margin {
-  from {
-    opacity: 0;
-    margin-top: 30px;
-  }
-  to {
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@keyframes glow {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-
-:root {
-  @each $name, $radius in $token-radius {
-    #{'--radius-'}#{$name}: #{$radius};
-  }
-  @each $name, $color in $token-colors {
-    #{'--color-'}#{$name}: #{$color};
-  }
-  @each $name, $size in $token-icon-sizes {
-    #{'--size-'}#{$name}: #{$size};
-  }
-  @each $name, $space in $token-spaces {
-    #{'--space-'}#{$name}: #{$space};
-  }
-  @each $name, $shadow in $token-shadows {
-    #{'--shadow-'}#{$name}: #{$shadow};
-  }
-  --font-weight-normal: #{$font-weight-normal};
-  --font-weight-medium: #{$font-weight-medium};
-  --font-weight-semi-bold: #{$font-weight-semi-bold};
-  --font-weight-bold: #{$font-weight-bold};
-
-  @each $name, $height in $token-line-heights {
-    #{'--line-height-'}#{$name}: #{$height};
-  }
-}

package/src/styles/main.scss

@@ -1,4 +0,0 @@
-@import 'variables.scss';
-@import 'spacing.scss';
-@import 'mixins.scss';
-@import 'functions.scss';

package/src/styles/table.scss

@@ -1,10 +0,0 @@
-$vxe-table-border-color: $color-hover-gray;
-$vxe-table-header-background-color: $color-white;
-$vxe-table-row-hover-background-color: $color-hover-gray;
-$vxe-table-row-hover-striped-background-color: $color-hover-gray;
-$vxe-table-row-current-background-color: $color-lighter-purple;
-$vxe-table-row-hover-current-background-color: $color-lighter-purple;
-$vxe-table-row-cheched-background-color: $color-lighter-purple;
-$vxe-table-row-hover-cheched-background-color: $color-lighter-purple;
-
-$vxe-table-row-line-height: 16px;

package/src/styles/toast.scss

@@ -1,55 +0,0 @@
-.toasted-container {
-  $toasted-container-name: &;
-  @import './mixins';
-  @import '../tokens/z-indexes';
-  z-index: $z-index-toasted !important;
-  .toasted {
-    &.mc-toast {
-      padding: $space-100 0;
-      padding-inline: $space-150 $space-400;
-      &--primary {
-        border-radius: $radius-100;
-        background-color: $color-black;
-        color: $color-white;
-        font-size: $font-size-200;
-        line-height: $line-height-200;
-
-        .action {
-          text-decoration: none;
-          text-transform: none;
-          margin: 0;
-          font-size: $font-size-200;
-          line-height: $line-height-200;
-          &.mc-toast__action {
-            color: fade-out($color-white, 0.5);
-
-            &--outline {
-              color: $color-white;
-              padding: $space-100 $space-150;
-              border: 1px solid $color-outline-gray;
-              border-radius: $radius-50;
-            }
-          }
-          &:not(:last-child) {
-            margin-inline-end: $space-50;
-          }
-          &:first-of-type {
-            margin-inline-start: $space-600;
-          }
-          &:last-child {
-            margin-inline-end: -$space-300; // TODO: refactor negative margin
-          }
-          &:first-of-type:last-child {
-            margin-inline-end: -$space-300; // TODO: refactor negative margin
-          }
-        }
-      }
-      .las,
-      i {
-        @include size($space-300);
-        font-size: 24px;
-        margin-inline-end: $space-150;
-      }
-    }
-  }
-}

package/src/templates/layouts/McContentFixed/McContentFixed.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="mc-content-fixed">
-        <div class="mc-content-fixed__top">
-            <!-- @slot Слот шапки -->
-            <slot name="top" />
-        </div>
-        <div class="mc-content-fixed__mid">
-            <div class="mc-content-fixed__mid-inner">
-                <!-- @slot Слот контента -->
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-/**
- * Нужен для вписания контента
- * в оставшееся свободное пространство страницы браузера.
- * Чаще всего используется для таблиц.
- */
-export default {
-    name: 'McContentFixed',
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-content-fixed {
-    $block-name: &;
-
-    @include position(absolute, 0);
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-y: auto;
-    @include custom-scroll();
-
-    &__top,
-    &__mid {
-        &:empty {
-            display: none;
-        }
-    }
-
-    &__top {
-        flex-shrink: 0;
-    }
-
-    &__mid {
-        position: relative;
-        flex-grow: 1;
-        &-inner {
-            @include position(absolute, 0);
-        }
-    }
-}
-</style>

package/src/templates/layouts/McMain/McMain.vue

@@ -1,115 +0,0 @@
-<template>
-    <div class="mc-main">
-        <div v-if="$slots['left-bar']" class="mc-main__left">
-            <!-- @slot Слот сайдбара -->
-            <slot name="left-bar" />
-        </div>
-        <div class="mc-main__right">
-            <!-- @slot Слот хедера -->
-            <slot name="top-bar" />
-            <div v-if="!fakeScroll" class="mc-main__content-wrapper">
-                <div class="mc-main__content">
-                    <!-- @slot Слот контента -->
-                    <slot />
-                </div>
-            </div>
-            <mc-fake-scroll v-else ref="fake-scroll" visible="l-down">
-                <div class="mc-main__content">
-                    <!-- @slot Слот контента -->
-                    <slot />
-                </div>
-            </mc-fake-scroll>
-            <slot name="bottom" />
-        </div>
-        <slot name="includes" />
-    </div>
-</template>
-
-<script>
-import McFakeScroll from '../../../patterns/McFakeScroll/McFakeScroll'
-/**
- * Используется для вёрстки основных страниц
- * на проектах
- */
-export default {
-    name: 'McMain',
-    components: { McFakeScroll },
-    props: {
-        fakeScroll: {
-            type: Boolean,
-            default: false,
-        },
-        routeKey: {
-            type: [Number, String],
-            default: '',
-        },
-    },
-
-    watch: {
-        routeKey() {
-            if (this.$refs['fake-scroll']) {
-                this.$refs['fake-scroll'].resetData()
-            }
-        },
-    },
-
-    mounted() {
-        this.vhFix()
-        window.addEventListener('resize', this.vhFix)
-    },
-
-    beforeDestroy() {
-        window.removeEventListener('resize', this.vhFix)
-    },
-    methods: {
-        vhFix() {
-            const vh = window.innerHeight * 0.01
-            document.documentElement.style.setProperty('--vh', `${vh}px`)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/toast';
-@import '../../../styles/global';
-@import '../../../styles/mixins';
-.mc-main {
-    $block-name: &;
-
-    position: relative;
-    display: flex;
-    height: calc(var(--vh, 1vh) * 100);
-    min-height: -webkit-fill-available;
-    min-height: -moz-available;
-    min-height: stretch;
-    @include custom-scroll();
-
-    &__left {
-        display: flex;
-    }
-
-    &__right {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-    }
-    &__content {
-        @include position(absolute, 0);
-        overflow-y: auto;
-        &-wrapper {
-            flex: 1 1 auto;
-            position: relative;
-        }
-    }
-
-    .mc-fake-scroll {
-        display: flex;
-        flex: 1 1 auto;
-        .mc-fake-scroll__main {
-            display: flex;
-            flex: 1 1 auto;
-        }
-    }
-}
-</style>

package/src/templates/layouts/McRoot/McRoot.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="mc-root">
-        <slot />
-        <client-only v-if="ssr && includePanel">
-            <slideout-panel :class="panelClass"></slideout-panel>
-        </client-only>
-        <slideout-panel v-else-if="includePanel" :class="panelClass"></slideout-panel>
-    </div>
-</template>
-
-<script>
-import 'normalize.css/normalize.css'
-/**
- * Это обязательный компонент, с него начинается любой layout,
- * т.к. здесь находятся глобальные стили.
- */
-export default {
-    name: 'McRoot',
-    props: {
-        panelClass: {
-            type: String,
-            default: '',
-        },
-        ssr: {
-            type: Boolean,
-            default: false,
-        },
-        includePanel: {
-            type: Boolean,
-            default: true,
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/global';
-@import '../../../tokens/box-shadows';
-.mc-root {
-    $block-name: &;
-    .slideout {
-        box-shadow: $shadow-s;
-    }
-}
-</style>

package/src/tokens/animations.scss

@@ -1,9 +0,0 @@
-/**
- * @tokens Animations
- * @presenter Animation
- */
-
-$animation-slide-up: slide-up 0.3s;
-$animation-slide-up-with-margin: slide-up-with-margin 0.3s;
-$animation-spinner: rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1);
-$animation-glow: glow 1.5s ease-in-out infinite;

package/src/tokens/border-radius.scss

@@ -1,26 +0,0 @@
-/**
- * @tokens Border Radius
- * @presenter BorderRadius
- */
-
-$radius-square: 0px;
-$radius-50: 4px; /* Additional token */
-$radius-100: 8px;
-$radius-150: 12px; /* Additional token */
-$radius-200: 16px;
-$radius-300: 24px;
-$radius-1250: 100px;
-$radius-rounded: 300px;
-$radius-circle: 50%;
-
-$token-radius: (
-  "square": $radius-square,
-  "50": $radius-50,
-  "100": $radius-100,
-  "150": $radius-150,
-  "200": $radius-200,
-  "300": $radius-300,
-  "1250": $radius-1250,
-  "rounded": $radius-rounded,
-  "circle": $radius-circle
-);

package/src/tokens/box-shadows.scss

@@ -1,28 +0,0 @@
-/**
- * @tokens Shadows
- * @presenter Shadow
- */
-
-$shadow-xs: 0px 2px 8px rgba(0, 0, 0, 0.16);
-$shadow-s: 0px 4px 12px rgba(0, 0, 0, 0.16);
-$shadow-m: 0px 12px 32px rgba(0, 0, 0, 0.24);
-$shadow-l: 0px 24px 40px rgba(0, 0, 0, 0.16);
-$shadow-xs-blue: 0px 2px 8px rgba(51, 68, 153, 0.1);
-$shadow-s-blue: 0px 4px 12px rgba(51, 68, 153, 0.1);
-$shadow-m-blue: 0px 12px 32px rgba(51, 68, 153, 0.2);
-$shadow-xs-purple: 0px 2px 8px rgba(91, 44, 205, 0.1);
-$shadow-s-purple: 0px 4px 12px rgba(91, 44, 205, 0.1);
-$shadow-m-purple: 0px 12px 32px rgba(91, 44, 205, 0.2);
-
-$token-shadows: (
-  'xs': $shadow-xs,
-  's': $shadow-s,
-  'm': $shadow-m,
-  'l': $shadow-l,
-  'xs-blue': $shadow-xs-blue,
-  's-blue': $shadow-s-blue,
-  'm-blue': $shadow-m-blue,
-  'xs-purple': $shadow-xs-purple,
-  's-purple': $shadow-s-purple,
-  'm-purple': $shadow-m-purple,
-);