Remove auto imports in scss because angular-cli does not support it. (#823)

frontend/app-config/webpack.config.js

@@ -156,10 +156,6 @@ module.exports = function calculateConfig(env) {
                 }, {
                     loader: 'sass-loader',
                     options: {
-                        additionalData: `
-                                @import '_vars';
-                                @import '_mixins';
-                            `,
                         sassOptions: {
                             includePaths: [helpers.root('app', 'theme')],
                         },

frontend/app/app.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/administration/administration-area.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/administration/pages/cluster/cluster-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 iframe {
     @include absolute(0, 0, 0, 0);
     @include force-height(100%);

frontend/app/features/administration/pages/event-consumers/event-consumer.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .faulted {
     color: $color-theme-error;
 

frontend/app/features/administration/pages/restore/restore-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 $circle-size: 2rem;
 
 h3 {

frontend/app/features/administration/pages/users/user-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .form-group-section {
     margin-top: 2rem;
 }

frontend/app/features/administration/pages/users/user.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/administration/pages/users/users-page.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/api/api-area.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .nav-link {
     padding-bottom: .6rem;
     padding-top: .6rem;

frontend/app/features/api/pages/graphql/graphql-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     @import '~graphiql/graphiql';
 

frontend/app/features/apps/pages/app.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .btn {
     @include absolute(1rem, 1rem);
 }

frontend/app/features/apps/pages/apps-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .apps {
     &-section {
         @include clearfix;

frontend/app/features/apps/pages/news-dialog.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     img {
         @include box-shadow-outer(0, 4px, 20px, .2);

frontend/app/features/apps/pages/onboarding-dialog.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 $size-width: 825px;
 $size-height: 576px;
 $size-image: 476px;

frontend/app/features/assets/pages/asset-tag-dialog.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/assets/pages/asset-tags.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .badge,
 .badge-secondary,
 .btn-rename {

frontend/app/features/assets/pages/assets-filters-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 hr {
     margin-left: 0;
     margin-right: 0;

frontend/app/features/assets/pages/assets-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .search ::ng-deep {
     .form-control {
         border-radius: 0 $border-radius $border-radius 0;

frontend/app/features/content/pages/calendar/calendar-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .tui-full-calendar-weekday-schedule-bullet {
         top: 10px !important;

frontend/app/features/content/pages/comments/comments-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 sqx-comments {
     display: flex;
     flex-direction: column;

frontend/app/features/content/pages/content/content-event.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .user-ref {
         font-weight: 500;

frontend/app/features/content/pages/content/content-history-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .section {
     margin-bottom: 2rem;
 

frontend/app/features/content/pages/content/content-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .btn-status {
     margin-left: 2rem;
 }

frontend/app/features/content/pages/content/editor/content-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host {
     display: flex;
     flex-direction: column;

frontend/app/features/content/pages/content/editor/content-field.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .table-items-row {
     border-left-width: 4px;
     overflow-x: hidden;

frontend/app/features/content/pages/content/editor/content-section.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 h3 {
     margin: 0;
 }

frontend/app/features/content/pages/content/editor/field-copy-button.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .section {
     padding: .25rem 1rem;
 }

frontend/app/features/content/pages/content/editor/field-languages.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .button-container {
     display: inline-block;
     max-width: none;

frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host,
 .inner-main {
     display: flex;

frontend/app/features/content/pages/content/references/content-references.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host {
     display: flex;
     flex-direction: column;

frontend/app/features/content/pages/contents/contents-filters-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .status {
     @include truncate;
 }

frontend/app/features/content/pages/contents/contents-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .content {
     cursor: pointer;
 }

frontend/app/features/content/pages/contents/custom-view-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .container {
     padding: .5rem 1rem;
 }

frontend/app/features/content/pages/schemas/schemas-page.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/content/pages/sidebar/sidebar-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 iframe {
     background: 0;
     border: 0;

frontend/app/features/content/shared/content-extension.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 iframe {
     background: 0;
     border: 0;

frontend/app/features/content/shared/due-time-selector.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/content/shared/forms/array-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .cdk-virtual-scroll-content-wrapper {
         right: 0;

frontend/app/features/content/shared/forms/array-item.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .ui-separator {
         border-color: $color-border !important;

frontend/app/features/content/shared/forms/assets-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .disabled {
     pointer-events: none;
 }

frontend/app/features/content/shared/forms/component-section.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .header {
     line-height: 2rem;
     margin-bottom: .5rem;

frontend/app/features/content/shared/forms/component.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .component {
     border: 1px solid $color-border;
     border-radius: 4px;

frontend/app/features/content/shared/forms/field-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .field {
     &-required {
         color: $color-theme-error;

frontend/app/features/content/shared/forms/iframe-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 iframe {
     background: 0;
     border: 0;

frontend/app/features/content/shared/forms/stock-photo-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 $color-user-background: rgba(0, 0, 0, 50%);
 $color-background: #000;
 $height: 300px;

frontend/app/features/content/shared/list/content.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .inline-edit {
     position: relative;
 

frontend/app/features/content/shared/preview-button.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/content/shared/references/content-creator.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .modal-body {
         background: $color-background;

frontend/app/features/content/shared/references/reference-dropdown.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .truncate {
     min-height: 1.5rem;
 }

frontend/app/features/content/shared/references/reference-item.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .reference-edit {
     @include hover-visible('.reference-menu');
     position: relative;

frontend/app/features/content/shared/references/references-checkboxes.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/content/shared/references/references-editor.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .disabled {
     pointer-events: none;
 }

frontend/app/features/content/shared/references/references-tags.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .truncate {
     min-height: 1.5rem;
 }

frontend/app/features/dashboard/pages/cards/api-calls-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/api-calls-summary-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/api-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/api-performance-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/api-traffic-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/api-traffic-summary-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/asset-uploads-count-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/asset-uploads-size-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/asset-uploads-size-summary-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/content-summary-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/github-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/history-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/iframe-card.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 iframe {
     @include absolute(0, 0, 0, 0);
     border: 0;

frontend/app/features/dashboard/pages/cards/random-cat-card.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 img {
     border-radius: $border-radius;
     height: 100%;

frontend/app/features/dashboard/pages/cards/random-dog-card.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 img {
     border-radius: $border-radius;
     height: 100%;

frontend/app/features/dashboard/pages/cards/schema-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/cards/support-card.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/dashboard/pages/dashboard-config.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .settings-button {
     border: 0;
     border-radius: 30px;

frontend/app/features/dashboard/pages/dashboard-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 gridster-item {
     position: absolute;
 }

frontend/app/features/rules/pages/events/rule-event.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 td {
     &.details {
         border-top: 0;

frontend/app/features/rules/pages/events/rule-events-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .panel2-slice {
         border-left: 1px solid $color-border;

frontend/app/features/rules/pages/rule/rule-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .summary-row {
     @include force-height(4rem);
 

frontend/app/features/rules/pages/rules/rule.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .card {
     margin-bottom: .5rem;
 

frontend/app/features/rules/pages/rules/rules-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .rule-element {
     display: block;
 }

frontend/app/features/rules/pages/simulator/rule-simulator-page.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     .panel2-slice {
         border-left: 1px solid $color-border;

frontend/app/features/rules/pages/simulator/rule-transition.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .history {
     &-transition {
         font-size: 85%;

frontend/app/features/rules/pages/simulator/simulated-rule-event.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 td {
     &.details {
         border-top: 0;

frontend/app/features/rules/shared/actions/formattable-input.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .input-group-apppend {
     z-index: 1;
 

frontend/app/features/rules/shared/actions/generic-action.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .form-check {
     margin-bottom: -.25rem;
 }

frontend/app/features/rules/shared/rule-element.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .root {
     cursor: pointer;
 

frontend/app/features/rules/shared/rule-icon.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host ::ng-deep {
     svg {
         display: block;

frontend/app/features/rules/shared/triggers/asset-changed-trigger.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 textarea {
     height: 100px;
 }

frontend/app/features/rules/shared/triggers/comment-trigger.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 textarea {
     height: 100px;
 }

frontend/app/features/rules/shared/triggers/content-changed-trigger.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .section {
     border-top: 1px solid $color-border;
     padding-bottom: 1rem;

frontend/app/features/rules/shared/triggers/schema-changed-trigger.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 textarea {
     height: 100px;
 }

frontend/app/features/rules/shared/triggers/usage-trigger.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 textarea {
     height: 100px;
 }

frontend/app/features/schemas/pages/schema/common/schema-edit-form.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .card-header,
 .card-footer {
     padding: 1.25rem;

frontend/app/features/schemas/pages/schema/export/schema-export-form.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host,
 .inner-form,
 .inner-main {

frontend/app/features/schemas/pages/schema/fields/field-wizard.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 $icon-size: 4.5rem;
 
 :host ::ng-deep {

frontend/app/features/schemas/pages/schema/fields/field.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 $field-header: #e7ebef;
 $field-line: #c7cfd7;
 $padding: 1rem;

frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'vars';

frontend/app/features/schemas/pages/schema/fields/forms/field-form.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 .table-items-row-details-tab {
     padding-right: 3rem;
 }

frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss

@@ -1,3 +1,6 @@
+@import 'mixins';
+@import 'vars';
+
 :host {
     overflow-x: hidden;
     overflow-y: auto;