From 1ee383b19d4ed006c9ffa72dff23774d60750c28 Mon Sep 17 00:00:00 2001 From: Mikilll Date: Mon, 2 Mar 2020 00:23:45 +0100 Subject: [PATCH 1/4] fix(vlist.sass): fix menu list items on IE11 On IE11 text in menu list items was not vertically centered. fix #10464 --- packages/vuetify/src/components/VList/VList.sass | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VList/VList.sass b/packages/vuetify/src/components/VList/VList.sass index 16eb8a738bb..29d191fb640 100644 --- a/packages/vuetify/src/components/VList/VList.sass +++ b/packages/vuetify/src/components/VList/VList.sass @@ -27,7 +27,8 @@ // Block .v-list border-radius: $list-border-radius - display: block + display: flex + flex-direction: column padding: $list-padding position: static +elevationTransition() From 5f585d35898c511509f38dbf5e0ce78fd0b56418 Mon Sep 17 00:00:00 2001 From: Mikilll Date: Tue, 3 Mar 2020 21:25:02 +0100 Subject: [PATCH 2/4] fix(vlistitem.sass): workaround IE11 min-height in flex container Fixed vertical text alignments in lists on IE11 fix #10464 --- packages/vuetify/src/components/VList/VList.sass | 3 +-- packages/vuetify/src/components/VList/VListItem.sass | 9 +++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VList/VList.sass b/packages/vuetify/src/components/VList/VList.sass index 29d191fb640..16eb8a738bb 100644 --- a/packages/vuetify/src/components/VList/VList.sass +++ b/packages/vuetify/src/components/VList/VList.sass @@ -27,8 +27,7 @@ // Block .v-list border-radius: $list-border-radius - display: flex - flex-direction: column + display: block padding: $list-padding position: static +elevationTransition() diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index 2dfe9896443..0b08cdfd602 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -40,6 +40,15 @@ &--selectable user-select: auto +// Fix for IE11 where min-height does not work with +// align-items: center in flex containers +// https://github.com/philipwalton/flexbugs/issues/231 +.v-list-item:after + content: '' + min-height: inherit + font-size: 0 + + // Element .v-list-item__action align-self: center From 525a31ec43f628acbf2c1096dcc61a4406f93f52 Mon Sep 17 00:00:00 2001 From: Mikilll Date: Wed, 4 Mar 2020 00:08:03 +0100 Subject: [PATCH 3/4] fix(vlistitem.sass): followed feedback refactor Just applied refactoring from comment. fix #10464 --- .../vuetify/src/components/VList/VListItem.sass | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index 0b08cdfd602..b928bc749ef 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -40,13 +40,13 @@ &--selectable user-select: auto -// Fix for IE11 where min-height does not work with -// align-items: center in flex containers -// https://github.com/philipwalton/flexbugs/issues/231 -.v-list-item:after - content: '' - min-height: inherit - font-size: 0 + // Fix for IE11 where min-height does not work with + // align-items: center in flex containers + // https://github.com/philipwalton/flexbugs/issues/231 + &:after + content: '' + min-height: inherit + font-size: 0 // Element From 69d13ff7411a420006763121de8afe7cb3260923 Mon Sep 17 00:00:00 2001 From: Mikilll Date: Tue, 10 Mar 2020 20:06:18 +0100 Subject: [PATCH 4/4] fix(vlistitem.sass): pr feedback + removed unnecessary new line Pseudoelements should you double colon + removed unnecessary new line fix #10464 --- packages/vuetify/src/components/VList/VListItem.sass | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index b928bc749ef..6c67ab18607 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -43,12 +43,11 @@ // Fix for IE11 where min-height does not work with // align-items: center in flex containers // https://github.com/philipwalton/flexbugs/issues/231 - &:after + &::after content: '' min-height: inherit font-size: 0 - // Element .v-list-item__action align-self: center