Merge pull request #1033 from IgniteUI/styling-regression-fixes

fix(themes): fixes regression issues in various component themes

Author: kdinev

Diff for: demos/app/list-performance/sample.component.css

@@ -5,8 +5,8 @@
     height: 34px;
 }
 
-.item > [igxLabel],
-.item > .person {
+.item>[igxLabel],
+.item>.person {
     position: absolute;
     margin-left: 72px;
 }
@@ -22,4 +22,9 @@
 .item .delete-item:hover {
     color: crimson;
     cursor: pointer;
-}
+}
+
+.virtualized-items {
+    position: relative;
+    overflow: hidden;
+}

Diff for: demos/app/list-performance/sample.component.html

@@ -12,20 +12,18 @@ <h4 class="sample-title">Performance sample</h4>
             </igx-suffix>
         </igx-input-group>
 
-        <div class="list-sample">
-            <igx-list>
-                <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-                <div [style.height]="'518px'">
-                    <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *igxFor="let item of data | igxFilter: fo1; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '50px'">
-                        <div class="item">
-                            <igx-avatar [src]="item.avatar" roundShape="true"></igx-avatar>
-                            <span igxLabel>{{item.text}}</span>
-                            <igx-icon name="star" [class.favorite]="item.favorite"></igx-icon>
-                        </div>
-                    </igx-list-item>
-                </div>
-            </igx-list>
-        </div>
+        <igx-list>
+            <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+            <div class="virtualized-items">
+                <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *igxFor="let item of data | igxFilter: fo1; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '50px'">
+                    <div class="item">
+                        <igx-avatar [src]="item.avatar" roundShape="true"></igx-avatar>
+                        <span igxLabel>{{item.text}}</span>
+                        <igx-icon name="star" [class.favorite]="item.favorite"></igx-icon>
+                    </div>
+                </igx-list-item>
+            </div>
+        </igx-list>
 
     </article>
 </div>

Diff for: src/core/styles/base/_normalize.scss

@@ -35,7 +35,6 @@ html input[disabled] {
     cursor: default;
 }
 
-button,
 input[type='number']::-webkit-outer-spin-button {
     height: auto;
 }

Diff for: src/core/styles/components/_common/_igx-display-container.scss

@@ -1,7 +1,6 @@
 %display-container {
     display: inherit;
     position: relative;
-    float: left;
     width: calc(100% - 18px);
     overflow: hidden;
 }

Diff for: src/core/styles/components/_common/_igx-vhelper.scss

@@ -6,6 +6,7 @@
 %vhelper--vertical {
     position: absolute;
     width: 18px;
+    top: 0;
     right: 0;
 }
 

Diff for: src/core/styles/components/checkbox/_checkbox-theme.scss

@@ -108,6 +108,7 @@
         cursor: pointer;
         width: $size;
         height: $size;
+        min-width: $size;
         border-width: $border-width;
         border-style: solid;
         border-color: map-get($this, 'empty-color');

Diff for: src/core/styles/components/grid/_grid-theme.scss

@@ -156,32 +156,6 @@
         overflow: hidden;
     }
 
-    %vhelper-display {
-        &::-webkit-scrollbar {
-            background: rgba(text-contrast(map-get($this, 'content-background')), .12);
-
-            /* stylelint-disable selector-pseudo-class-no-unknown */
-            &:vertical {
-                border-left: 1px solid rgba(text-contrast(map-get($this, 'content-background')), .08);
-                border-right: 1px solid rgba(text-contrast(map-get($this, 'content-background')), .08);
-            }
-
-            &:horizontal {
-                border-top: 1px solid rgba(text-contrast(map-get($this, 'content-background')), .08);
-                border-bottom: 1px solid rgba(text-contrast(map-get($this, 'content-background')), .08);
-            }
-            /* stylelint-enable */
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: rgba(text-contrast(map-get($this, 'content-background')), .24);
-
-            &:hover {
-                background: rgba(text-contrast(map-get($this, 'content-background')), .37);
-            }
-        }
-    }
-
     %grid-caption {
         display: flex;
         align-items: center;
@@ -258,7 +232,6 @@
         background: map-get($this, 'content-background');
         color: map-get($this, 'content-text-color');
         overflow: hidden;
-        will-change: transform;
     }
 
     %grid-tbody--empty {
@@ -272,11 +245,11 @@
         flex-flow: row nowrap;
         grid-row: 5;
         width: 100%;
-        background: map-get($this, 'content-background');
+        background: map-get($this, 'header-background');
     }
 
     %grid-scroll-start {
-        border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
+        background: igx-color($palette, 'grays', 200);
     }
 
     %grid-scroll-main {

Diff for: src/core/styles/components/radio/_radio-theme.scss

@@ -98,6 +98,7 @@
         display: inline-block;
         width: $size;
         height: $size;
+        min-width: $size;
         line-height: $size;
         cursor: pointer;
         color: map-get($this, 'label-color');

Diff for: src/core/styles/components/switch/_switch-theme.scss

@@ -158,6 +158,7 @@
         display: block;
         width: $switch-thumb-width;
         height: $switch-thumb-height;
+        min-width: $switch-thumb-width;
         border-radius: 50%;
         background: map-get($this, 'thumb-off-color');
         box-shadow: $switch-shadow;