mediacube-ui 0.1.7

package/src/patterns/McDropdown/McDropdown.vue

@@ -0,0 +1,210 @@
+<template>
+    <div v-click-outside="handleClickOutside" class="mc-dropdown" :class="dropdownClasses">
+        <div class="mc-dropdown__toggle" :class="toggleClasses" tabindex="0" @keyup.esc="closeDropdown">
+            <!-- @slot активатора переключения состояния -->
+            <slot name="activator" />
+        </div>
+        <div :style="dropdownBodyStyles" class="mc-dropdown__body">
+            <!-- @slot контента -->
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+import VueClickOutside from 'vue-click-outside'
+
+export default {
+    name: 'McDropdown',
+    directives: {
+        'click-outside': VueClickOutside,
+    },
+    props: {
+        /**
+         * Состояние видимости контента
+         */
+        value: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Выравнивание
+         * контента: 'left', 'right'
+         */
+        position: {
+            type: String,
+            default: 'left',
+        },
+        /**
+         * Направление отображения
+         * контента: 'top', 'bottom'
+         */
+        listPosition: {
+            type: String,
+            default: 'bottom',
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMinWidth: {
+            type: String,
+            default: 'inherit',
+        },
+        /**
+         * Необходимо ли вращение иконки
+         * (элементу для вращения, необходимо добавить класс 'rotate')
+         */
+        rotateIcon: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    computed: {
+        dropdownClasses() {
+            return {
+                [`mc-dropdown--position-${this.position}`]: this.position,
+                [`mc-dropdown--list-position-${this.listPosition}`]: this.listPosition,
+                ['mc-dropdown--is-open']: this.value,
+            }
+        },
+        dropdownBodyStyles() {
+            return {
+                'min-width': this.listMinWidth,
+            }
+        },
+        toggleClasses() {
+            return {
+                ['mc-dropdown__toggle--rotate-icon']: this.rotateIcon,
+            }
+        },
+        activator() {
+            return this.$slots.activator[0].elm
+        },
+    },
+
+    watch: {
+        $route() {
+            this.value && this.closeDropdown()
+        },
+    },
+
+    mounted() {
+        this.activator.addEventListener('click', this.toggleDropdown)
+    },
+
+    beforeDestroy() {
+        this.activator.removeEventListener('click', this.toggleDropdown)
+    },
+
+    methods: {
+        toggleDropdown() {
+            /**
+             * Событие по тогглу
+             * @property {Boolean}
+             */
+            this.$emit('input', !this.value)
+        },
+        handleClickOutside(e) {
+            if (!this.value || !document.body.contains(e.target)) return
+            this.value && this.closeDropdown()
+        },
+        closeDropdown() {
+            this.$emit('input', false)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-dropdown {
+    $block-name: &;
+
+    position: relative;
+    display: inline-block;
+
+    &__toggle {
+        outline: none;
+        @include reset-text-indents();
+        .mc-svg-icon {
+            transition: all $duration-s;
+        }
+    }
+
+    &__body {
+        @include position(absolute, null null null 0);
+        z-index: $z-index-dropdown;
+        height: 0;
+        overflow: hidden;
+        margin: 0;
+        background-color: transparent;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity $duration-s, transform $duration-s;
+
+        .mc-button {
+            &:not(.nuxt-link-active):not(.mc-button--is-active):not(.mc-button--variation-red-flat) {
+                &:hover {
+                    background-color: fade-out($color-purple, 0.9);
+                }
+            }
+        }
+    }
+
+    &--list-position-top {
+        #{$block-name} {
+            &__body {
+                bottom: 100%;
+                margin-bottom: $space-100;
+            }
+        }
+    }
+
+    &--list-position-bottom {
+        #{$block-name} {
+            &__body {
+                top: 100%;
+                margin-top: $space-100;
+            }
+        }
+    }
+
+    &--is-open {
+        #{$block-name} {
+            &__body {
+                height: auto;
+                visibility: visible;
+                overflow: visible;
+                opacity: 1;
+            }
+        }
+
+        #{$block-name} {
+            &__toggle--rotate-icon {
+                .rotate {
+                    position: relative;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
+    &--position-right {
+        #{$block-name} {
+            &__body {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+
+    &--position-left {
+        #{$block-name} {
+            &__body {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McDropdown/McDropdownPanel/McDropdownPanel.stories.js

@@ -0,0 +1,44 @@
+import McDropdownPanel from './McDropdownPanel'
+import McSvgIcon from "../../../elements/McSvgIcon/McSvgIcon"
+import McButton from "../../../elements/McButton/McButton"
+
+export default {
+  title: 'Patterns/McDropdown/McDropdownPanel',
+  component: McDropdownPanel,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=19%3A280',
+    },
+  },
+}
+
+export const Default = () => ({
+  components: { McDropdownPanel, McButton, McSvgIcon },
+  data() {
+    return {
+      buttons: [
+        {icon: 'mc_id', name: 'Identity'},
+        {icon: 'mc_assist', name: 'Assist'},
+        {icon: 'mc_studio', name: 'Studio'},
+        {icon: 'exit_to_app', name: 'Выйти'},
+      ],
+    }
+  },
+  template: `<mc-dropdown-panel>
+    <mc-button
+      v-for="(btn, i) in buttons"
+      :key="i"
+      href="#"
+      full-width
+      text-align="left"
+      :variation="btn.icon === 'exit_to_app' ? 'red-flat' : 'black-flat'"
+      @click.prevent
+    >
+      <mc-svg-icon slot="icon-prepend" :name="btn.icon" />
+      {{ btn.name }}
+    </mc-button>
+  </mc-dropdown-panel>`,
+})
+

package/src/patterns/McDropdown/McDropdownPanel/McDropdownPanel.vue

@@ -0,0 +1,38 @@
+<template>
+    <section class="mc-dropdown-panel">
+        <!-- @slot Слот контента -->
+        <slot />
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'McDropdownPanel',
+}
+</script>
+
+<style lang="scss">
+.mc-dropdown-panel {
+    $block-name: &;
+
+    box-shadow: $shadow-s;
+    border-radius: $radius-150;
+    background-color: $color-white;
+    padding: $space-100;
+    max-width: 320px;
+
+    &:empty {
+        display: none;
+    }
+
+    .mc-button {
+        &--size-m {
+            font-weight: $font-weight-medium;
+            padding: $space-100;
+            .mc-svg-icon {
+                @include size($size-300);
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McFakeScroll/McFakeScroll.stories.js

@@ -0,0 +1,47 @@
+import { select } from '@storybook/addon-knobs'
+
+import McFakeScroll from './McFakeScroll'
+import McTitle from '../../elements/McTitle/McTitle'
+import { getTokenGroup } from '../../utils/getTokens'
+
+export default {
+    title: 'Patterns/McFakeScroll',
+    component: McFakeScroll,
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+    },
+}
+const mediaQueries = getTokenGroup('media-queries')
+
+const getUniqueProps = key => {
+    return {
+        visible: {
+            default: select('visible', { ...mediaQueries, default: '' }, 's-down', key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        visible: ctx.visible,
+    }
+}
+
+export const Default = () => ({
+    components: { McFakeScroll, McTitle },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+    },
+    template: `<mc-fake-scroll v-bind="tagBind">
+   <div style="max-height: 300px; overflow-y: auto;" tabindex="0">
+       <mc-title :ellipsis="false" max-width="100%">
+           Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus commodi eos neque odit tempora vitae. Cumque cupiditate delectus ducimus ipsum iste iusto magnam neque nostrum reiciendis voluptatum! Alias dolore dolorem est et fugit inventore iusto libero maiores minima minus necessitatibus nostrum numquam, obcaecati quod rem, repudiandae sunt temporibus tenetur. Amet assumenda commodi consequuntur dicta eius est eum exercitationem, expedita facere fugiat illo impedit in ipsa ipsum magni minima nam nemo odio omnis porro quae quia quisquam quos, recusandae reprehenderit, saepe sequi similique temporibus vel vero. Accusantium adipisci animi aspernatur beatae debitis delectus dignissimos enim et illum, maiores maxime molestiae obcaecati officiis praesentium quidem quis sit suscipit totam veniam, voluptatibus! Ab adipisci amet beatae, corporis delectus ducimus ea esse expedita illo illum magnam magni, perferendis quas qui quidem repellat, similique ullam voluptatem? Ab accusamus assumenda aut commodi doloremque earum eveniet excepturi illum laboriosam minus modi, nihil, non numquam provident quis rem soluta tempore tenetur totam ullam, veniam veritatis voluptates? Accusantium assumenda at delectus dolor esse, nam nesciunt repellat temporibus. Dignissimos itaque labore qui repellendus temporibus. Alias architecto, commodi consequuntur deserunt distinctio dolores eligendi iusto magnam mollitia, nihil perferendis porro quisquam sed sint sunt. Culpa dicta earum eligendi provident unde ut. Accusamus aperiam, architecto deleniti dolores eaque iure nihil repellat suscipit. Asperiores autem dolores eos error facilis, fuga id modi molestias neque perspiciatis quaerat reiciendis reprehenderit vel velit voluptates? A, autem expedita fugiat libero nostrum perferendis porro qui rerum voluptas. Ab aliquam amet aperiam asperiores commodi corporis cumque dolorum eaque error excepturi expedita explicabo, fuga illo mollitia nam non pariatur quaerat quas rem tenetur. Accusamus amet aspernatur corporis et excepturi explicabo facere id, incidunt ipsam, maiores nam pariatur quidem, repudiandae sequi sint ut voluptates. Accusamus aliquam, aperiam asperiores assumenda at cumque dolorum ducimus facilis illo maiores nemo nostrum omnis optio praesentium, quidem similique soluta! Architecto aspernatur deleniti dicta nihil obcaecati! Animi commodi delectus fuga soluta sunt. Deserunt eligendi laudantium molestiae nisi sapiente tempore? Accusamus ad consectetur consequuntur dicta dolores et expedita facere ipsa itaque iusto magni minus nemo nulla officia perferendis quae sequi, sint soluta suscipit voluptatem! Ab alias, aperiam culpa dolorum eaque eligendi eveniet ex ipsam iste libero maxime, minima modi nobis numquam omnis, quia quis quod repellendus repudiandae sed tempora tempore ut vero voluptas voluptates. Aliquam asperiores consectetur, consequuntur corporis et eum exercitationem facilis ipsam ipsum labore natus neque optio quod similique, sit. Eum hic ipsam laborum libero magni pariatur placeat quo! Accusantium atque aut beatae blanditiis consequuntur deserunt dignissimos dolor dolorum, eligendi est et incidunt laboriosam nemo nobis non officia perferendis porro quibusdam! Alias architecto autem, commodi deleniti dicta dolore molestias non officia quae velit. Accusamus aliquid blanditiis cumque deleniti dolor dolore doloremque dolores eaque eius eligendi hic impedit in ipsa laboriosam nam nesciunt nisi omnis quae quidem quis ratione recusandae rerum, suscipit velit, vero voluptas voluptatibus voluptatum. Ab alias atque beatae consectetur consequatur cum dicta dolores ea earum, ex expedita explicabo facilis fugiat harum maiores, minima nulla porro quos recusandae repellat soluta sunt tempora tempore tenetur ut vero voluptas? A adipisci alias aliquam aut commodi corporis cumque dignissimos doloremque ea earum eius esse et ex exercitationem explicabo harum illum in incidunt iure laboriosam molestiae molestias, mollitia nam porro qui quidem quis quo suscipit tempore temporibus ullam, veniam veritatis voluptatibus. A ab accusantium, adipisci alias animi, aperiam asperiores aut autem deleniti earum eius eos explicabo in laboriosam laudantium magni, modi necessitatibus nobis numquam obcaecati officia omnis pariatur quidem quis quod reiciendis reprehenderit sunt tenetur unde ut veniam voluptas voluptatem voluptatum. Aperiam architecto corporis cupiditate distinctio dolorum, et inventore odio odit officiis quia! Accusantium aut dolores eveniet facere maiores mollitia provident voluptatem voluptatum. Ad assumenda dignissimos eius est explicabo id illo incidunt labore magnam nam nemo nesciunt, numquam perspiciatis porro quasi ratione rem saepe tenetur unde voluptas. A adipisci animi aperiam aut consectetur consequuntur delectus distinctio eaque, enim illum magnam magni nihil, numquam repellendus, tenetur ullam voluptates. Ad aliquam autem enim et fugit in ipsam nesciunt obcaecati omnis perferendis, porro quaerat quas reprehenderit ut veritatis. Accusamus, assumenda consectetur ex exercitationem libero natus neque nobis officia repudiandae sapiente. Accusamus ad aliquam autem culpa dolorem eaque fuga, illo, illum ipsum laboriosam nulla pariatur porro quidem quo repellendus reprehenderit sit suscipit voluptates. Amet culpa cumque deleniti distinctio dolorem doloremque eius eveniet id ipsa magnam nam, natus pariatur perferendis provident quaerat. Architecto at atque corporis cumque dicta doloremque eveniet illo labore magni minus modi molestiae nihil omnis praesentium quaerat rem repudiandae sequi similique soluta, tempore tenetur unde voluptates? Asperiores consectetur culpa deleniti dolores odit quo recusandae similique tempora temporibus, veniam. Ea explicabo harum odio possimus soluta, ut! Aperiam blanditiis exercitationem id ipsam laborum laudantium perspiciatis temporibus ullam voluptate voluptates. A alias aliquam animi aspernatur atque blanditiis consectetur eaque exercitationem expedita, facilis harum id illum labore laudantium nam necessitatibus neque nesciunt perferendis possimus quibusdam quis sint voluptate voluptatem. Deserunt distinctio dolor ducimus eligendi et, explicabo fugit incidunt ipsa ipsam minima nam nostrum officia placeat, reiciendis velit? Commodi deserunt dicta eligendi error modi obcaecati praesentium quia quibusdam repellendus saepe! Aperiam doloribus maxime mollitia, odit quis sapiente similique? Commodi doloribus labore, nobis quibusdam voluptate voluptatum. Accusamus adipisci alias cumque ea excepturi impedit inventore ipsum iste iusto magnam nemo neque nesciunt nostrum quaerat quasi reiciendis, repellendus vel velit voluptates voluptatum! Aut eius fugit ipsum nostrum omnis repellendus soluta ut! Ipsa odit, ullam! Architecto at blanditiis, corporis deleniti deserunt eius eum ex exercitationem harum in itaque laudantium maxime nemo nulla numquam placeat praesentium provident qui quibusdam quisquam quos reiciendis repudiandae saepe sit temporibus totam vitae! Dolor doloremque est et maiores nobis officiis porro reiciendis ut? A amet blanditiis cumque cupiditate deserunt dicta dolore dolorum ducimus eaque earum eligendi esse ex ipsam ipsum iure, modi molestias mollitia nostrum officiis pariatur possimus quaerat quas quidem quo quos ratione recusandae similique? Ab corporis, debitis deserunt facere facilis in iure magni natus optio porro quae repellendus sunt voluptas! Alias commodi consequatur corporis delectus dignissimos doloribus, earum ex, explicabo id illo laborum magni necessitatibus nihil officia praesentium rem soluta tempora tempore temporibus unde!
+       </mc-title>
+   </div>
+  </mc-fake-scroll>`,
+})

package/src/patterns/McFakeScroll/McFakeScroll.vue

@@ -0,0 +1,276 @@
+<template>
+    <div ref="main" :class="mainClasses">
+        <div class="mc-fake-scroll__main">
+            <!-- @slot Слот для <strong>одного (!)</strong> элемента со скроллом -->
+            <slot />
+        </div>
+        <div
+            ref="track"
+            :class="trackClasses"
+            @mousedown.stop="onFakeScrollBarTrackMouseDown"
+            @click.stop="onFakeScrollBarTrackClick"
+        >
+            <div
+                ref="thumb"
+                class="mc-fake-scroll__thumb"
+                :style="thumbStyles"
+                @mousedown.stop="onFakeScrollBarMouseDown"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'McFakeScroll',
+    props: {
+        /**
+         * Значение медиа-запроса (из токенов),
+         * при котором скроллбар
+         * будет виден всегда:
+         * `xl`, `xl-down`, `l`, `l-down`, `m`, `m-down` и т.д.
+         */
+        visible: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {
+            hasScroll: false,
+            thumbBox: null,
+            trackBox: null,
+            thumbHeight: 0,
+            scrollRatio: 1,
+            trackIsClicked: false,
+            dragOptions: {
+                startClientPos: 0,
+                distance: 0,
+                mouseIsDown: false,
+            },
+            scrollElContentHeight: null,
+        }
+    },
+    computed: {
+        thumbStyles() {
+            return {
+                height: `${this.thumbHeight}px`,
+            }
+        },
+
+        scrollEl() {
+            return this.$slots.default ? this.$slots.default[0].elm : null
+        },
+        mainClasses() {
+            return {
+                'mc-fake-scroll': true,
+                [`mc-fake-scroll--visible${this.visible && `-${this.visible}`}`]: this.hasScroll,
+            }
+        },
+        trackClasses() {
+            return {
+                'mc-fake-scroll__track': true,
+                'mc-fake-scroll__track--visible': this.hasScroll,
+            }
+        },
+    },
+    mounted() {
+        this.scrollEl && this.scrollEl.addEventListener('scroll', this.onFakeScrollBarContentScroll)
+
+        this.$nextTick(() => {
+            this.updateData()
+        })
+        window.addEventListener('resize', this.resize)
+
+        document.documentElement.addEventListener('mousemove', this.onFakeScrollBarMouseMove)
+        document.documentElement.addEventListener('mouseup', this.onFakeScrollBarMouseUp)
+    },
+
+    beforeDestroy() {
+        this.scrollEl && this.scrollEl.removeEventListener('scroll', this.onFakeScrollBarContentScroll)
+        document.documentElement.removeEventListener('mousemove', this.onFakeScrollBarMouseMove)
+        document.documentElement.removeEventListener('mouseup', this.onFakeScrollBarMouseUp)
+
+        window.removeEventListener('resize', this.resize)
+    },
+    methods: {
+        resize() {
+            this.updateData()
+        },
+        updateData() {
+            this.checkScroll()
+            this.setBoxes()
+            this.setThumbHeight()
+            this.setScrollRatio()
+            this.scrollElContentHeight = this.scrollEl.scrollHeight
+        },
+        resetData() {
+            this.scrollEl.scrollTo(0, 0)
+            this.scrollElContentHeight = this.scrollEl.scrollHeight
+            setTimeout(() => {
+                this.updateData()
+            }, 0)
+        },
+        checkScroll() {
+            this.hasScroll = false
+            if (this.scrollEl) {
+                this.hasScroll = this.scrollEl.clientHeight < this.scrollEl.scrollHeight
+            }
+        },
+        setThumbHeight() {
+            if (this.scrollEl) {
+                const thumbRatio = Math.min(this.scrollEl.clientHeight / this.scrollEl.scrollHeight, 1.0)
+                this.thumbHeight = this.scrollEl.clientHeight * thumbRatio
+                if (this.$refs.thumb) {
+                    this.thumbBox.height = this.$refs.thumb.getBoundingClientRect().height
+                }
+            }
+        },
+        setScrollRatio() {
+            if (this.thumbBox && this.trackBox) {
+                const availableTrackWay = this.trackBox.height - this.thumbHeight
+                const availableContentWay = this.scrollEl.scrollHeight - this.scrollEl.clientHeight
+                this.scrollRatio = Math.min(availableTrackWay / availableContentWay, 1.0)
+            }
+        },
+        setBoxes() {
+            this.thumbBox = this.getBoxPos(this.$refs.thumb)
+            this.trackBox = this.getBoxPos(this.$refs.track)
+        },
+        getBoxPos(el) {
+            if (!el) return null
+            const box = el.getBoundingClientRect()
+            return {
+                height: box.height,
+                bottom: box.bottom,
+                top: box.top + window.pageYOffset,
+            }
+        },
+
+        onFakeScrollBarTrackMouseDown(e) {
+            this.updateData()
+            let pos = e.clientY - this.trackBox.top
+            if (pos > this.trackBox.height - this.thumbBox.height * 0.5) {
+                pos -= this.thumbBox.height
+            } else if (pos > this.thumbBox.height * 0.5) {
+                pos -= this.thumbBox.height * 0.5
+            }
+
+            this.trackIsClicked = true
+            this.scrollEl.scrollTo({
+                top: pos / this.scrollRatio,
+                behavior: 'smooth',
+            })
+        },
+        onFakeScrollBarTrackClick() {
+            this.trackIsClicked = false
+        },
+        onFakeScrollBarMouseDown(e) {
+            this.dragOptions.startClientPos = e.clientY
+            this.dragOptions.mouseIsDown = true
+            this.setBoxes()
+            document.body.classList.add('no-user-select')
+        },
+        onFakeScrollBarMouseMove(e) {
+            if (!this.dragOptions.mouseIsDown) return
+
+            this.setThumbHeight()
+            this.setScrollRatio()
+
+            this.dragOptions.distance = e.clientY - this.dragOptions.startClientPos
+
+            let calculateTopPos = this.thumbBox.top - this.trackBox.top + this.dragOptions.distance
+            this.setThumbPos(calculateTopPos)
+            this.scrollEl.scrollTo(0, calculateTopPos / this.scrollRatio)
+        },
+        setThumbPos(pos) {
+            if (pos < 0) {
+                this.$refs.thumb.style.top = '0px'
+            } else if (pos + this.thumbBox.height > this.trackBox.height) {
+                this.$refs.thumb.style.top = `${this.trackBox.height - this.thumbBox.height}px`
+            } else {
+                this.$refs.thumb.style.top = `${pos}px`
+            }
+        },
+        onFakeScrollBarMouseUp() {
+            this.dragOptions.mouseIsDown = false
+            document.body.classList.remove('no-user-select')
+        },
+        onFakeScrollBarContentScroll(e) {
+            const startScrollElContentHeight = this.scrollElContentHeight
+            if (this.dragOptions.mouseIsDown || this.trackIsClicked) return
+
+            this.updateData()
+            const topPos = e.target.scrollTop
+            this.setThumbPos(topPos * this.scrollRatio)
+
+            if (startScrollElContentHeight !== e.target.scrollHeight) {
+                this.scrollEl.scrollTo(0, e.target.scrollHeight * this.scrollRatio)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@mixin track-visibility() {
+    right: 0;
+    width: 7px;
+    opacity: 1;
+}
+.mc-fake-scroll {
+    $block-name: &;
+    &__main {
+        > * {
+            @include hide-scrollbar();
+        }
+    }
+    position: relative;
+    &__track {
+        @include position(absolute, 0 -7px 0 null);
+        width: 0;
+        opacity: 0;
+        background-color: $color-transparent;
+        z-index: 101;
+        display: block;
+    }
+    &__thumb {
+        @include position(absolute, 0 1px null 1px);
+        background-color: $color-outline-gray;
+        height: 100px;
+        border-radius: $radius-100;
+        &:hover,
+        &:active {
+            background-color: $color-gray;
+        }
+    }
+    &:hover {
+        #{$block-name}__track--visible {
+            @include track-visibility();
+        }
+    }
+    &__track--visible:active {
+        @include track-visibility();
+    }
+
+    &--visible {
+        #{$block-name}__track {
+            @include track-visibility();
+        }
+        @each $name, $value in $token-media-queries {
+            &-#{$name} {
+                @media #{$value} {
+                    #{$block-name}__track {
+                        @include track-visibility();
+                    }
+                }
+            }
+        }
+    }
+}
+.no-user-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+</style>