fix(sass): add missing imports, syntax fixes

Author: catfishcoder

src/app/pages/charts/discrete-bar-chart/discrete-bar-chart.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.discrete-bar-chart__container {
+:host {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

src/app/pages/charts/line-plus-bar-chart/line-plus-bar-chart.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.line-plus-bar-chart__container {
+:host {
   svg,
   svg .nv-linePlusBar {
     height: 250px;

src/app/pages/charts/stacked-bar-chart/stacked-bar-chart.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.stacked-bar-chart__container {
+:host {
   svg,
   svg .nv-linePlusBar {
     height: 250px;

src/app/pages/components/components.component.scss

@@ -1,4 +1,4 @@
-.ui-components {
+:host {
   .mdl-card {
     height: 100%;
   }

src/app/pages/dashboard/cotoneaster-card/cotoneaster-card.component.scss

@@ -1,6 +1,6 @@
-@import '~theme/helpers';
+@import '~theme/styles';
 
-.cotoneaster {
+:host {
   .mdl-card__supporting-text {
     @include typo-card-supporting-text;
 

src/app/pages/dashboard/robot-card/robot-card.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.robot {
+:host {
   .mdl-card {
     height: 450px;
   }

src/app/pages/dashboard/table-card/table-card.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.projects-table {
+:host {
   thead th {
     color: rgba($color-white, 0.9);
   }

src/app/pages/dashboard/trending/trending.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.trending {
+:host {
   .mdl-card__supporting-text {
     width: 100%;
     padding: 8px 0;
@@ -21,15 +21,15 @@
     font-size: $trending-arrow-size;
   }
 
-  &__arrow-up {
+  .trending__arrow-up {
     color: $trending-arrow-up-color;
   }
 
-  &__arrow-down {
+  .trending__arrow-down {
     color: $trending-arrow-down-color;
   }
 
-  &__percent {
+  .trending__percent {
     text-align: right;
     width: 40px;
   }

src/app/pages/dashboard/weather/weather.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.weather {
+:host {
   .mdl-card__supporting-text {
     color: $card-text-color;
     background: url('#{$image-path}/weather_bck.png') center center no-repeat;

src/app/pages/ui/buttons/buttons.component.scss

@@ -1,4 +1,4 @@
-.ui-buttons {
+:host {
   h6 {
     margin-top: 8px;
     margin-bottom: 0;

src/app/pages/ui/cards/cards.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.ui-cards {
+:host {
   .mdl-card {
     height: 100%;
 

src/app/pages/ui/colors/colors.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.ui-colors {
+:host {
   h3 {
     text-align: center;
     opacity: 0.2;

src/app/pages/ui/forms/forms.component.scss

@@ -1,11 +1,12 @@
-.ui-form-components {
+:host {
   form {
     .mdl-cell {
       margin-left: 16px;
     }
-  }
 
-  .mdl-card__supporting-text {
-    padding-bottom: 70px;
+    .mdl-card__supporting-text {
+      padding-bottom: 70px;
+    }
   }
+
 }

src/app/pages/ui/icons/icons.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.ui-icons {
+:host {
   .ui-icons-title {
     font-size: 20px;
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;

src/app/pages/ui/tables/tables.component.scss

@@ -1,4 +1,4 @@
-.ui-tables {
+:host {
   .mdl-card,
   .mdl-card__supporting-text {
     overflow-x: auto;

src/app/pages/ui/typography/typography.component.scss

@@ -1,6 +1,6 @@
 @import '~theme/helpers';
 
-.ui-typography {
+:host {
   font-family: "Roboto", sans-serif;
 
   p {

src/theme/scss/badge.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .badge--colored-green {
   @include colored-badge($color-green);
 }

src/theme/scss/button.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-button {
   font-weight: $button-font-weigth;
   padding-top: 1px;

src/theme/scss/card.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-card__title {
   background-color: $card-title-background-color;
 }

src/theme/scss/chip.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-chip {
   color: $color-black;
 

src/theme/scss/data-table.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-data-table {
   @include typo-data-table;
 

src/theme/scss/form.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 form {
   &.form--basic {
     .mdl-textfield__label {

src/theme/scss/helper.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .pull-right {
   float: right;
 }

src/theme/scss/label.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .label {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 1);

src/theme/scss/list.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-list {
   margin: 0;
 

src/theme/scss/material-angular-select.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 material-angular-select {
   .material-angular-select {
     width: 100%;

src/theme/scss/menu.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-menu {
   // width: $dropdown-menu-width;
 

src/theme/scss/progress.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-progress {
   min-width: 100px;
   width: auto;

src/theme/scss/scroll.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .scroller__bar {
   opacity: 0.2;
   position: absolute;

src/theme/scss/slider.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-slider__container {
   margin: 0 -20px;
 }

src/theme/scss/table.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-data-table {
   &.sorting-table {
     .sorting {

src/theme/scss/textfield.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-textfield {
   width: auto;
 

src/theme/scss/tooltip.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .mdl-tooltip {
   padding: $table-tooltip-vertical-padding $table-tooltip-horizontal-padding;
   border: none;

src/theme/styles.scss

@@ -7,6 +7,7 @@
 @import './scss/badge';
 @import './scss/slider';
 @import './scss/menu';
+@import './scss/card';
 @import './scss/button';
 @import './scss/textfield';
 @import './scss/data-table';
@@ -16,7 +17,20 @@
 @import './scss/scroll';
 @import './scss/helper';
 @import './scss/table';
+@import './scss/progress';
+@import './scss/tooltip';
 @import './widgets/link';
 @import './widgets/chart-legend';
 @import './widgets/form';
 @import './widgets/input-group';
+@import './components/line-chart/line-chart.component';
+@import './components/card/card.component';
+@import './components/page-top/page-top.component';
+@import './components/pagination/pagination.component';
+@import './components/pie-chart/pie-chart.component';
+@import './components/progress/progress.component';
+@import './components/right-sidebar/sidebar/sidebar.component';
+@import './components/right-sidebar/right-sidebar.component';
+@import '/components/sidebar/sidebar.component';
+@import '/components/toggle/toggle.component';
+@import '/directives/tooltip/tooltip.component';

src/theme/widgets/chart-legend.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .legend {
   .legend__item {
     @include typo-chart-legend;

src/theme/widgets/form.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 .form {
   .mdl-grid {
     padding: 0;

src/theme/widgets/link.scss

@@ -1,3 +1,5 @@
+@import '~theme/helpers';
+
 a {
   @include typo-default;