fixed styles imports

src/components/bars/PlayerBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   position: relative;
   height: $bar_height;

src/components/bars/SubmitBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: -($bar_height + $gap);

src/components/boris/BorisStatsBackend/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   ul {
     font: $font_12_regular;

src/components/boris/BorisStatsGit/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .stats {
   &__title {
     font: $font_12_semibold;

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap / 2 0;
   border-bottom: 1px solid #333333;

src/components/comment/CommentEmbedBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .embed {
   padding: 0 $gap;
   height: $comment_height;

src/components/comment/CommentTextBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   padding: 0 $gap;
   font-weight: 300;

src/components/containers/BlurWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .blur {
   padding-top: $header_height + 2px;
   display: flex;

src/components/containers/Card/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .card {
   background-color: $card_bg;
   border-radius: $panel_radius;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CellGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-auto-rows: 1fr;

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $comment_bg;
   min-height: $comment_height;

src/components/containers/CoverBackdrop/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cover {
   position: absolute;
   width: 100%;

src/components/containers/Filler/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .filler {
   flex: 1;
 }

src/components/containers/Grid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;

src/components/containers/Group/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .group {
   display: flex;
   flex: 1;

src/components/containers/InfiniteScroll/styles.module.scss

@@ -1,2 +1,4 @@
+@import "src/styles/variables";
+
 .more {
 }

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/Padder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .padder {
   padding: $gap;
 

src/components/containers/PageCover/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes fadeIn {
   0% {
     opacity: 0;

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Panel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   padding: $gap;
   min-height: $input_height + $gap;

src/components/containers/Scroll/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: 50px;
 }

src/components/containers/Sticky/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 100%;
   width: 100%;

src/components/containers/TagField/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;

src/components/dialogs/DialogTitle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .title {
   margin: $gap 0 $gap * 4 !important;
   text-transform: uppercase;

src/components/editors/AudioEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $upload_button_height + $gap;
   min-height: 200px;

src/components/editors/AudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/EditorPanel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   height: 72px;
   position: absolute;

src/components/editors/EditorUploadButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/EditorUploadCoverButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/ImageEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   min-height: 200px;
   padding-bottom: $upload_button_height + $gap;

src/components/editors/ImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/SortableAudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableAudioGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/SortableImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableImageGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/TextEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     padding-bottom: 64px;

src/components/editors/VideoEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .preview {
   padding-top: 56.25%;
   position: relative;

src/components/flow/Cell/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cell {
   padding: $gap / 4;
   box-sizing: border-box;

src/components/flow/FlowHero/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 100%;

src/components/flow/FlowRecentItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   display: flex;
   align-items: center;

src/components/flow/FlowSearchResults/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   overflow: auto;

src/components/flow/FlowStamp/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/flow/HeroPlaceholder/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 280px;
   width: 100%;

src/components/input/ArcProgress/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: $red;
   stroke: none;

src/components/input/Button/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes pulse {
   0% {
     opacity: 1;

src/components/input/ButtonGroup/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/input/Info/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 const style = require('./style.scss');
 

src/components/input/Info/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: $info_height;
   border-radius: $input_radius;

src/components/input/LoaderCircle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: transparentize(black, 0.6);
   stroke: none;

src/components/input/TextInput/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   height: $input_height;
   display: flex;

src/components/main/Footer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   display: flex;
   flex-direction: row;

src/components/main/Header/index.tsx

@@ -16,7 +16,7 @@ import { URLS } from '~/constants/urls';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-import * as style from './style.scss';
+import styles from './styles.module.scss';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
@@ -75,24 +75,24 @@ const HeaderUnconnected: FC<IProps> = memo(
     );
 
     return createPortal(
-      <div className={classNames(style.wrap, { [style.is_scrolled]: is_scrolled })}>
-        <div className={style.container}>
+      <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
+        <div className={styles.container}>
           <Logo />
 
           <Filler />
 
-          <div className={style.plugs}>
+          <div className={styles.plugs}>
             <Link
-              className={classNames(style.item, { [style.is_active]: pathname === URLS.BASE })}
+              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
               to={URLS.BASE}
             >
               ФЛОУ
             </Link>
 
             <Link
-              className={classNames(style.item, {
-                [style.is_active]: pathname === URLS.BORIS,
-                [style.has_dot]: hasBorisUpdates,
+              className={classNames(styles.item, {
+                [styles.is_active]: pathname === URLS.BORIS,
+                [styles.has_dot]: hasBorisUpdates,
               })}
               to={URLS.BORIS}
             >
@@ -100,7 +100,7 @@ const HeaderUnconnected: FC<IProps> = memo(
             </Link>
 
             {is_user && (
-              <div className={style.item}>
+              <div className={styles.item}>
                 <Notifications />
               </div>
             )}
@@ -111,7 +111,7 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {!is_user && (
-            <Group horizontal className={style.user_button} onClick={onLogin}>
+            <Group horizontal className={styles.user_button} onClick={onLogin}>
               <div>ВДОХ</div>
             </Group>
           )}

src/components/main/Header/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: $header_height;
   z-index: 25;

src/components/main/Logo/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './style.scss';
+import styles from './styles.module.scss';
 import { Link } from 'react-router-dom';
 
 export const Logo = () => (

src/components/main/Logo/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .logo {
   font: $font_24_bold;
   display: flex;

src/components/main/Notifications/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes ring {
   0% {
     transform: rotate(-10deg);

src/components/main/SidePane/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .pane {
   width: 54px;
   height: 100%;

src/components/main/UserButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 2;

src/components/media/AudioPlayer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/node/CommendDeleted/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: center;

src/components/node/Comment/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   from {
     opacity: 0;

src/components/node/CommentContent/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @import 'flexbin/flexbin.scss';
 
 .wrap {

src/components/node/CommentForm/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/node/CommentMenu/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: 0;

src/components/node/ImageSwitcher/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 0;

src/components/node/MenuButton/styles.module.scss

@@ -1,3 +1,4 @@
+@import "src/styles/variables";
 
 .button {
   fill: white;

src/components/node/NodeAudioBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $content_bg;
   border-radius: $radius;

src/components/node/NodeAudioImageBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding-bottom: 33vh;

src/components/node/NodeComments/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     margin: 0 0 $gap 0;

src/components/node/NodeDeletedBadge/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .badge {
   padding: $gap;
   text-align: center;

src/components/node/NodeImageBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $gap * 2;
 

src/components/node/NodeImageBlockPlaceholder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .placeholder {
   height: 320px;
   background: transparentize(black, 0.8);

src/components/node/NodeImageSlideBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
 }

src/components/node/NodeNoComments/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   user-select: none;
   overflow: hidden;

src/components/node/NodePanel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   // height: 72px;
   position: relative;

src/components/node/NodePanelInner/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @mixin button {
   margin: 0 $gap;
   cursor: pointer;

src/components/node/NodeRelated/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   // padding: $gap;
   //background: transparentize(black, 0.8);

src/components/node/NodeRelatedItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   background: lighten($content_bg, 2%) 50% 50% no-repeat;
   padding-bottom: 100%;

src/components/node/NodeTextBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   @include outer_shadow();
 

src/components/node/NodeVideoBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: 56.25%;
   position: relative;

src/components/notifications/NotificationBubble/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $notification_color: darken($content_bg, 2%);
 
 @keyframes appear {

src/components/placeholders/ParagraphPlaceholder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .para {
   display: grid;
   grid-template-columns: auto;

src/components/placeholders/Placeholder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .placeholder {
   height: 1em;
   width: 120px;

src/components/profile/Message/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $incoming_color: transparentize($wisegreen, 0.7);
 $outgoing_color: $comment_bg;
 

src/components/profile/MessageForm/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding: $gap;

src/components/profile/ProfileAccounts/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
 }
 

src/components/profile/ProfileAccountsError/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   top: 0;

src/components/profile/ProfileDescription/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .content {
   padding: $gap * 2;
   min-height: 200px;

src/components/profile/ProfileSettings/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $pad_danger: mix($red, $content_bg, 70%);
 $pad_usual: mix(white, $content_bg, 10%);
 

src/components/sidebar/TagSidebarList/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .list {
   flex: 1;
   flex-direction: column;

src/components/tags/TagAutocomplete/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   0% { opacity: 0 }
   100% { opacity: 100 }

src/components/tags/TagAutocompleteRow/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $row_height: 24px;
 
 .row {

src/components/tags/TagInput/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 20;

src/components/tags/TagWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $big: 1.2;
 
 .tag {

src/components/upload/AudioUpload/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: lighten($content_bg, 4%);
   // padding-bottom: 100%;

src/components/upload/ImageUpload/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: lighten($content_bg, 4%);
   padding-bottom: 100%;

src/containers/dialogs/BetterScrollDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100vw;
   height: 100vh;

src/containers/dialogs/EditorDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .editor {
   flex: 1;
   padding: $gap;