Vuetify 2->3 replacing removed styles .v-application / rounded / flat

Question

I'm trying to upgrade from Vuetify/Vue 2->3. I'm not a front-end developer, just tasked with upgrading some legacy code to keep things functioning. Unfortunately, the migration guide seems to assume a level of baseline CSS knowledge and doesn't provide examples of how to fix everything that was removed.

I'm struggling to figure out how to migrate rounded and flat in the following code snippet:

      <v-select
        class="mr-2 filter-custom-input"
        slot="prepend-inner"
        v-model="field"
        :items="fields"
        menu-props="auto"
        label="Field"
        hide-details
        single-line
        density="compact"
        rounded
        flat
        theme="dark"
      />

and .v-application in this one (if it even needs to be done?):

<style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:first-child,
.v-application--is-ltr .mr {
  margin-right: 10px;
}
</style>

Unfortunately, the only advice the migration guide on these is:

• rounded prop has been removed. Apply a rounded css class to the menu content element instead. e.g. .rounded-te
• Global styles previously included as .v-application p or .v-application ul are no longer included. If you need margin for p, or padding-left for ul and ol, set it manually in your root component’s <style> tag

The above rounded guidance doesn't work just by replacing rounded with .rounded-te (not to mention it talks about this in a different type of control).

It says flat was removed from some other controls and replaced by "a single variant prop", but attempting to replace flat with variant="flat" gave me a syntax error.

Thank you!

(I originally asked this here and it was suggested that I split that into multiple questions)

Answer 1

You can still use rounded and flat, they just moved to the underlying VField component.

I think your v2 select would end up without any frame at all, in which case rounded won't do anything visible. Add variant="solo" with flat to get the same effect in v3 (see playground)

---

As to the v-application--is-ltr class, it is called v-locale--is-ltr in V3.

If you still need it depends on your app, those are custom rules. Check if the custom mr class is used and how the margin on the first icon in lists look like (I think list icons are now set through the prepend slot, so the class would be .v-list-item__prepend .v-icon)