From c883fe4128cd586209fc408536bd2432e9df866d Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 16 Apr 2018 17:40:44 +0300 Subject: [PATCH 1/7] fix(selection-controls): add min-width to radio, checkbox, and switch --- src/core/styles/components/checkbox/_checkbox-theme.scss | 1 + src/core/styles/components/radio/_radio-theme.scss | 1 + src/core/styles/components/switch/_switch-theme.scss | 1 + 3 files changed, 3 insertions(+) diff --git a/src/core/styles/components/checkbox/_checkbox-theme.scss b/src/core/styles/components/checkbox/_checkbox-theme.scss index e2fdd416b7b..47429af9cab 100644 --- a/src/core/styles/components/checkbox/_checkbox-theme.scss +++ b/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 --git a/src/core/styles/components/radio/_radio-theme.scss b/src/core/styles/components/radio/_radio-theme.scss index 68b8ed3ec1f..c04db7daf7c 100644 --- a/src/core/styles/components/radio/_radio-theme.scss +++ b/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 --git a/src/core/styles/components/switch/_switch-theme.scss b/src/core/styles/components/switch/_switch-theme.scss index 744cfc6fae8..309ce733571 100644 --- a/src/core/styles/components/switch/_switch-theme.scss +++ b/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; From c438ae47731aa4c9a03b0817d2cbd20b5473c6f7 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 16 Apr 2018 17:41:09 +0300 Subject: [PATCH 2/7] fix(grid): remove scrollbar styling and add background --- .../styles/components/grid/_grid-theme.scss | 31 ++----------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/src/core/styles/components/grid/_grid-theme.scss b/src/core/styles/components/grid/_grid-theme.scss index 84f67a7d8c2..333a2215fb4 100644 --- a/src/core/styles/components/grid/_grid-theme.scss +++ b/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; @@ -272,11 +246,12 @@ 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'); + // border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color'); + background: igx-color($palette, 'grays', 200); } %grid-scroll-main { From 82afe5251b6400b5d024c977cc23bd533d042310 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 16 Apr 2018 17:46:49 +0300 Subject: [PATCH 3/7] refactor(grid): remove commented lines --- src/core/styles/components/grid/_grid-theme.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/styles/components/grid/_grid-theme.scss b/src/core/styles/components/grid/_grid-theme.scss index 333a2215fb4..dc2193a01dd 100644 --- a/src/core/styles/components/grid/_grid-theme.scss +++ b/src/core/styles/components/grid/_grid-theme.scss @@ -250,7 +250,6 @@ } %grid-scroll-start { - // border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color'); background: igx-color($palette, 'grays', 200); } From 302141b7f096c87f8f9eac39e395faedca4d8e75 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 17 Apr 2018 11:37:45 +0300 Subject: [PATCH 4/7] fix(grid): improve performance by removing will-change The will-change css property was causing performance issues. --- src/core/styles/components/grid/_grid-theme.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/styles/components/grid/_grid-theme.scss b/src/core/styles/components/grid/_grid-theme.scss index dc2193a01dd..81148dd577e 100644 --- a/src/core/styles/components/grid/_grid-theme.scss +++ b/src/core/styles/components/grid/_grid-theme.scss @@ -232,7 +232,6 @@ background: map-get($this, 'content-background'); color: map-get($this, 'content-text-color'); overflow: hidden; - will-change: transform; } %grid-tbody--empty { From dfda904393083b5470443aef554951ebc97aace1 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 17 Apr 2018 14:52:48 +0300 Subject: [PATCH 5/7] refactor(grid): remove float left from virtual display container --- src/core/styles/components/_common/_igx-display-container.scss | 1 - src/core/styles/components/_common/_igx-vhelper.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/styles/components/_common/_igx-display-container.scss b/src/core/styles/components/_common/_igx-display-container.scss index bcb48d821ba..dfa1d281f69 100644 --- a/src/core/styles/components/_common/_igx-display-container.scss +++ b/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 --git a/src/core/styles/components/_common/_igx-vhelper.scss b/src/core/styles/components/_common/_igx-vhelper.scss index e48dfbcb97b..670acdc24f6 100644 --- a/src/core/styles/components/_common/_igx-vhelper.scss +++ b/src/core/styles/components/_common/_igx-vhelper.scss @@ -6,6 +6,7 @@ %vhelper--vertical { position: absolute; width: 18px; + top: 0; right: 0; } From a6a0c8e9a4e06c888b3f358c878005fa2338ad55 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 17 Apr 2018 14:54:43 +0300 Subject: [PATCH 6/7] refactor(demos): update list performance demo sample --- .../app/list-performance/sample.component.css | 11 +++++--- .../list-performance/sample.component.html | 26 +++++++++---------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/demos/app/list-performance/sample.component.css b/demos/app/list-performance/sample.component.css index 10925d040e6..b12d0866293 100644 --- a/demos/app/list-performance/sample.component.css +++ b/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; -} \ No newline at end of file +} + +.virtualized-items { + position: relative; + overflow: hidden; +} diff --git a/demos/app/list-performance/sample.component.html b/demos/app/list-performance/sample.component.html index 29a8af9f8f6..b0bb0c5f298 100644 --- a/demos/app/list-performance/sample.component.html +++ b/demos/app/list-performance/sample.component.html @@ -12,20 +12,18 @@

Performance sample

-
- - Contacts -
- -
- - {{item.text}} - -
- -
- -
+ + Contacts +
+ +
+ + {{item.text}} + +
+ +
+ From 897b7db50df1da104b23bb103cc5116368172515 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 17 Apr 2018 15:47:59 +0300 Subject: [PATCH 7/7] fix(buttons): don't set height to auto on button elements --- src/core/styles/base/_normalize.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/styles/base/_normalize.scss b/src/core/styles/base/_normalize.scss index fad59e2c4f2..e9c6bc8a7c4 100644 --- a/src/core/styles/base/_normalize.scss +++ b/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; }