fix(vlist.sass): fix menu list items on IE11

[Mikilll94]

On IE11 text in menu list items was not vertically centered.

fix #10464

Description

Fixes #10464

On IE11 text in menu list items is not vertically centered. This PR fixes this issue.

Motivation and Context

I wanted to fix the bug which was occurring only on IE11.

How Has This Been Tested?

Because this is a visual bug I have not created any unit tests.

I have tested this PR manually. First I have checked if on IE11 the behavior is correct. Then I have checked on Chrome and Firefox to see if everything is working as before.

Markup:

<template>
  <v-container>
    <div class="text-center">
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-btn
              color="primary"
              dark
              v-on="on"
            >
              Dropdown
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="(item, index) in items"
              :key="index"
              @click="onItemClicked"
            >
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "Click Me" },
        { title: "Click Me" },
        { title: "Click Me" },
        { title: "Click Me 2" }
      ]
    }
  },
  methods: {
    onItemClicked() {
    }
  }
}
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Was this a brute force fix or is there some flex knowledge you can bestow upon me?

[Mikilll94]

@johnleider
Yeah, that was a brute force fix 😄 I removed it and added next commit with a real solution.

I have finally found the real cause of this bug. It is because on IE11 align-items: center is not working when min-height is set. This is described in details here:
philipwalton/flexbugs#231

I have applied this workaround:
philipwalton/flexbugs#231 (comment)

Please check my changes again.

[johnleider]

Psuedo elements should use 2 colons