remove unnecessary wrappers

SisIvanova · SisIvanova · commit 2a3f944e22fc · 2020-06-17T10:38:43.000+03:00
diff --git a/src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.scss b/src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.scss
@@ -7,7 +7,7 @@
 :host {
     display: flex;
     flex-flow: row;
-    padding: 4px;
+    margin: 8px;
 }
 
 .button {
diff --git a/src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.scss b/src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.scss
@@ -7,7 +7,7 @@
 :host {
     display: flex;
     flex-flow: row;
-    padding: 4px;
+    margin: 8px;
 }
 
 .button {
diff --git a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html
@@ -1,8 +1,7 @@
-<div class="sample-wrapper">
-    <button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown" >Options</button>
-    <igx-drop-down #dropdown>
-        <igx-drop-down-item *ngFor="let item of items">
-            {{ item.field }}
-        </igx-drop-down-item>
-    </igx-drop-down>
-</div>
+<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
+    [igxDropDownItemNavigation]="dropdown">Options</button>
+<igx-drop-down #dropdown>
+    <igx-drop-down-item *ngFor="let item of items">
+        {{ item.field }}
+    </igx-drop-down-item>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.scss b/src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.scss
@@ -1,7 +1,4 @@
-.sample-wrapper {
-    margin: 8px;
-}
-
 .button {
+    margin: 8px;
     width: 128px;
 }
diff --git a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html
@@ -1,8 +1,7 @@
-<div class="sample-wrapper">
-    <button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Options</button>
-    <igx-drop-down #dropdown (onOpening)="dropdown.setSelectedItem(0)">
-        <igx-drop-down-item *ngFor="let item of items">
-            {{ item.field }}
-        </igx-drop-down-item>
-    </igx-drop-down>
-</div>
+<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
+    [igxDropDownItemNavigation]="dropdown">Options</button>
+<igx-drop-down #dropdown (onOpening)="dropdown.setSelectedItem(0)">
+    <igx-drop-down-item *ngFor="let item of items">
+        {{ item.field }}
+    </igx-drop-down-item>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.scss b/src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.scss
@@ -1,7 +1,4 @@
-.sample-wrapper {
-    margin: 8px;
-}
-
 .button {
+    margin: 8px;
     width: 128px;
 }
diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html
@@ -1,11 +1,10 @@
-<div class="sample-wrapper">
-    <button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Countries</button>
-    <igx-drop-down #dropdown [width]="'160px'">
-        <div class="drop-down__scroll-container">
-            <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
-                [selected]="item.selected">
-                {{ item.field }}
-            </igx-drop-down-item>
-        </div>
-    </igx-drop-down>
-</div>
+<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
+    [igxDropDownItemNavigation]="dropdown">Countries</button>
+<igx-drop-down #dropdown [width]="'160px'">
+    <div class="drop-down__scroll-container">
+        <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
+            [selected]="item.selected">
+            {{ item.field }}
+        </igx-drop-down-item>
+    </div>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.scss b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.scss
@@ -1,8 +1,5 @@
-.sample-wrapper {
-    margin: 8px;
-}
-
 .button {
+    margin: 8px;
     width: 160px;
 }
 
diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html
@@ -1,21 +1,13 @@
-<div class="sample-wrapper">
-    <igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
-        <input #input class="input"  type="text" igxInput [igxDropDownItemNavigation]="dropDown"
-            readonly= "true"
-            placeholder="Choose an option"
-            [value]="dropDown.selectedItem?.value"
-            (keydown.ArrowDown)="openDropDown()"/>
-
-        <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
-            <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
-        </igx-suffix>
-    </igx-input-group>
-
-    <span>Selected: {{ dropDown.selectedItem?.value }}</span>
-    <igx-drop-down #dropDown [width]="'180px'">
-        <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
-            {{ item.field }}
-        </igx-drop-down-item>
-    </igx-drop-down>
-</div>
-
+<igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
+    <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown" readonly="true"
+        placeholder="Choose an option" [value]="dropDown.selectedItem?.value" (keydown.ArrowDown)="openDropDown()" />
+    <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
+        <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
+    </igx-suffix>
+</igx-input-group>
+<span>Selected: {{ dropDown.selectedItem?.value }}</span>
+<igx-drop-down #dropDown [width]="'180px'">
+    <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
+        {{ item.field }}
+    </igx-drop-down-item>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss
@@ -1,4 +1,4 @@
-.sample-wrapper {
+:host {
     margin: 8px;
 }
 
diff --git a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html
@@ -1,17 +1,17 @@
-<div class="sample-wrapper">
-    <div class='controls-wrapper'>
-        <button class="button" igxButton="raised" [igxToggleAction]="dropDown" [igxDropDownItemNavigation]="dropDown">Foods</button>
-        <igx-switch [(ngModel)]="disableMeats">
-            Disable 'Meats'
-        </igx-switch>
-    </div>
-    <igx-drop-down #dropDown [width]="'160px'">
-        <div class="drop-down__scroll-container">
-            <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="disableMeats && foodGroup.name === 'Meats'">
-                <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
-                    {{ food.name }}
-                </igx-drop-down-item>
-            </igx-drop-down-item-group>
-        </div>
-    </igx-drop-down>
+<div class='controls-wrapper'>
+    <button class="button" igxButton="raised" [igxToggleAction]="dropDown"
+        [igxDropDownItemNavigation]="dropDown">Foods</button>
+    <igx-switch [(ngModel)]="disableMeats">
+        Disable 'Meats'
+    </igx-switch>
 </div>
+<igx-drop-down #dropDown [width]="'160px'">
+    <div class="drop-down__scroll-container">
+        <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name"
+            [disabled]="disableMeats && foodGroup.name === 'Meats'">
+            <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
+                {{ food.name }}
+            </igx-drop-down-item>
+        </igx-drop-down-item-group>
+    </div>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.scss b/src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.scss
@@ -1,7 +1,3 @@
-.sample-wrapper {
-    margin: 8px;
-}
-
 .button {
     width: 160px;
 }
@@ -10,6 +6,7 @@
     display: flex;
     flex-flow: row;
     max-width: 450px;
+    margin: 8px;
 }
 
 igx-switch {
diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.html
@@ -1,13 +1,11 @@
-<div class='control-wrapper'>
-    <button #button class="drop-down" igxButton="raised" [igxToggleAction]="dropDown" [overlaySettings]="{outlet: elem}"
+<button #button class="drop-down" igxButton="raised" [igxToggleAction]="dropDown" [overlaySettings]="{outlet: elem}"
     [igxDropDownItemNavigation]="dropDown">{{ hero }}</button>
-    <igx-drop-down #dropDown class="drop-down" (onSelection)="handleDropDownSelection($event)">
-        <div class="drop-down__scroll-container">
-            <igx-drop-down-item-group *ngFor="let classGroup of heroClasses" [label]="classGroup['name']">
-                <igx-drop-down-item *ngFor="let class of classGroup['entries']" [value]='class.name'>
-                    {{ class.name }}
-                </igx-drop-down-item>
-            </igx-drop-down-item-group>
-        </div>
-    </igx-drop-down>
-</div>
+<igx-drop-down #dropDown class="drop-down" (onSelection)="handleDropDownSelection($event)">
+    <div class="drop-down__scroll-container">
+        <igx-drop-down-item-group *ngFor="let classGroup of heroClasses" [label]="classGroup['name']">
+            <igx-drop-down-item *ngFor="let class of classGroup['entries']" [value]='class.name'>
+                {{ class.name }}
+            </igx-drop-down-item>
+        </igx-drop-down-item-group>
+    </div>
+</igx-drop-down>
diff --git a/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss b/src/app/data-entries/dropdown/dropdown-styling/dropdown-styling.component.scss
@@ -1,8 +1,5 @@
-.control-wrapper {
-    margin: 10px;
-}
-
 .drop-down {
+    margin: 8px;
     width: 220px;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`:host {`
`8`	`8`	`display: flex;`
`9`	`9`	`flex-flow: row;`
`10`		`- padding: 4px;`
	`10`	`+ margin: 8px;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.button {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,4 @@`
`1`		`-.sample-wrapper {`
`2`		`- margin: 8px;`
`3`		`-}`
`4`		`-`
`5`	`1`	`.button {`
	`2`	`+ margin: 8px;`
`6`	`3`	`width: 128px;`
`7`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,5 @@`
`1`		`-.sample-wrapper {`
`2`		`- margin: 8px;`
`3`		`-}`
`4`		`-`
`5`	`1`	`.button {`
	`2`	`+ margin: 8px;`
`6`	`3`	`width: 160px;`
`7`	`4`	`}`
`8`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.sample-wrapper {`
	`1`	`+:host {`
`2`	`2`	`margin: 8px;`
`3`	`3`	`}`
`4`	`4`