Merge pull request #3141 from IgniteUI/mpopov/styling-samples-refactoring

Refactoring styling samples

Author: simeonoff

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -56,7 +56,7 @@ $custom-badge-theme: badge-theme(
     .selected {
         igx-badge {
             & {
-                @include badge($custom-badge-theme);
+                @include css-vars($custom-badge-theme);
             }
 
             position: absolute;

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss

@@ -16,8 +16,8 @@ $progressBar-sample-theme: progress-linear-theme(
 
 ::ng-deep .default-theme {
     .grid__wrapper {
-        @include grid($grid-sample-theme);
-        @include progress-linear($progressBar-sample-theme);
+        @include css-vars($grid-sample-theme);
+        @include css-vars($progressBar-sample-theme);
     }
 }
 

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -17,17 +17,6 @@ $custom-theme: chip-theme(
     $border-radius: 5px
 );
 
-
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include chip($custom-theme);
+    @include css-vars($custom-theme);
 }

src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss

@@ -5,15 +5,6 @@ $custom-theme: progress-circular-theme(
     $progress-circle-color: color($color: 'success')
 );
 
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include progress-circular($custom-theme);
+    @include css-vars($custom-theme);
 }

src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss

@@ -25,15 +25,6 @@ $custom-icon-theme: icon-theme(
       color: #0a415c;
     }
 
-    // @include css-vars($custom-icon-theme);
-
-    /* Using Theme Overrides to provide IE 11 support.
-     * NOTE: Theming using this approach will greatly increase the size
-     * of the output CSS. If you do not plan to target IE 11,
-     * delete this section and use the `igx-css-vars` mixin as shown above.
-    **/
-    ::ng-deep {
-        @include icon($custom-icon-theme);
-    }
+	@include css-vars($custom-icon-theme);
 }
 

src/app/data-display/linear-progressbar/linear-progressbar-styling-sample/linear-progressbar-styling-sample.component.scss

@@ -10,15 +10,6 @@ $custom-theme: progress-linear-theme(
     $text-color: #ECAA53
 );
 
-// :host {
-//     @include css-vars($custom-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
-:host ::ng-deep {
-    @include progress-linear($custom-theme);
+:host {
+    @include css-vars($custom-theme);
 }

src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.scss

@@ -12,7 +12,7 @@ $dark-highlight: highlight-theme(
     padding: 4px;
 
     ::ng-deep {
-        @include highlight($dark-highlight);
+        @include css-vars($dark-highlight);
 
         .custom-highlight {
             border: 1px solid #FFCD0F;

src/app/data-entries/buttonGroup/button-group-style/button-group-style.component.scss

@@ -17,16 +17,9 @@ $custom-button-group: button-group-theme(
     $disabled-background-color: lightgray
 );
 
-// :host {
-//   @include css-vars($custom-button-group);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-  @include button-group($custom-button-group);
+	@include css-vars($custom-button-group);
 }
 
+
+

src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample.scss

@@ -17,19 +17,19 @@ $iconBtn: button-theme(
 );
 
 .flat {
-    @include button($flatBtn);
+    @include css-vars($flatBtn);
 }
 
 .raised {
-    @include button($raisedBtn);
+    @include css-vars($raisedBtn);
 }
 
 .fab {
-    @include button($fabBtn);
+    @include css-vars($fabBtn);
 }
 
 .icon {
-    @include button($iconBtn);
+    @include css-vars($iconBtn);
 }
 
 .buttons-sample {

src/app/data-entries/buttons/buttons-style/buttons-style.component.scss

@@ -20,15 +20,6 @@ $custom-button-theme: button-theme(
     $disabled-foreground: #bbb
 );
 
-// :host {
-//     @include css-vars($custom-button-theme);
-// }
-
-/* Using Theme Overrides to provide IE 11 support.
- * NOTE: Theming using this approach will greatly increase the size
- * of the output CSS. If you do not plan to target IE 11,
- * delete this section and use the `igx-css-vars` mixin as shown above.
-**/
 :host ::ng-deep {
-    @include button($custom-button-theme);
+	@include css-vars($custom-button-theme);
 }