Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VAlert): reduce default close button margin #16851

Merged
merged 1 commit into from
Mar 7, 2023

Conversation

johnleider
Copy link
Member

Motivation and Context

reduce inline margin end

BEFORE:
image

AFTER:
image

Markup:

<template>
  <v-app>
    <v-defaults-provider
      :defaults="defaults"
    >
      <div class="ma-4 pa-4 d-flex">
        <div class="me-8">
          <v-alert
            type="info"
            color="#0d66d0"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            closable
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="success"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            closable
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="warning"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            closable
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="error"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            closable
            max-width="385"
          />
        </div>

        <div>
          <v-alert
            type="info"
            color="#0d66d0"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="success"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="warning"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            max-width="385"
          />
          <br>
          <br>
          <v-alert
            type="error"
            theme="dark"
            text="Check the downloads section of your browser for the installer, or find it where you save downloads on your machine."
            max-width="385"
          />
        </div>
      </div>
    </v-defaults-provider>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const defaults = ref({
    VAlert: {
      // density: 'compact',
    },
  })
</script>

@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VAlert VAlert labels Mar 7, 2023
@johnleider johnleider added this to the v3.1.x milestone Mar 7, 2023
@johnleider johnleider self-assigned this Mar 7, 2023
@KaelWD KaelWD changed the title fix(VAlert): reduce inline margin when using closable fix(VAlert): reduce default close button margin Mar 7, 2023
@KaelWD KaelWD merged commit 79eb58a into master Mar 7, 2023
@KaelWD KaelWD deleted the fix/alert-inline-margin branch March 7, 2023 17:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VAlert VAlert T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants