vuestic-ui/dist/web-components/src/components/va-toast/VaToast.js

Vue 3 UI Framework

import { _ as _sfc_main } from "./VaToast.vue_vue_type_script_setup_true_lang.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ":root,\n:host {\n  --va-toast-display: flex;\n  --va-toast-width: 330px;\n  --va-toast-padding: 14px 1.25rem 14px 1.25rem;\n  --va-toast-border-radius: 8px;\n  --va-toast-border-color: transparent;\n  --va-toast-border: 1px solid var(--va-toast-border-color);\n  --va-toast-background-color: var(--va-background-secondary);\n  --va-toast-box-shadow: 0 2px 12px 0 var(--va-shadow);\n  --va-toast-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;\n  --va-toast-z-index: calc(var(--va-z-index-teleport-overlay) + 100);\n  /* Title */\n  --va-toast-title-font-weight: bold;\n  --va-toast-title-font-size: 1rem;\n  --va-toast-title-color: #303133;\n  --va-toast-title-margin: 0 0 6px;\n  /* Content */\n  --va-toast-content-font-size: 1rem;\n  --va-toast-content-line-height: 1.3125;\n  --va-toast-content-padding-right: 20px;\n  /* Icon */\n  --va-toast-icon-height: 24px;\n  --va-toast-icon-width: 24px;\n  --va-toast-icon-font-size: 24px;\n  /* Icon Close */\n  --va-toast-close-icon-top: 18px;\n  --va-toast-close-icon-right: 15px;\n  --va-toast-close-icon-font-size: 1rem;\n}\n.va-toast {\n  --va-toast-x-shift: 0px;\n  --va-toast-animation-x-shift: 0px;\n  --va-toast-animation-y-shift: 100%;\n  position: fixed;\n  box-sizing: border-box;\n  width: var(--va-toast-width);\n  padding: var(--va-toast-padding);\n  display: flex;\n  align-items: center;\n  border-radius: var(--va-toast-border-radius);\n  border: var(--va-toast-border);\n  background-color: var(--va-toast-background-color);\n  box-shadow: var(--va-toast-box-shadow);\n  transition: var(--va-toast-transition);\n  overflow: hidden;\n  z-index: var(--va-toast-z-index);\n  font-family: var(--va-font-family);\n  transform: translateX(var(--va-toast-x-shift));\n}\n.va-toast--top-right, .va-toast--bottom-right {\n  --va-toast-animation-x-shift: 100%;\n}\n.va-toast--top-left, .va-toast--bottom-left {\n  --va-toast-animation-x-shift: -100%;\n}\n.va-toast--top-left, .va-toast--top-center, .va-toast--top-right {\n  --va-toast-animation-y-shift: -100%;\n}\n.va-toast--inline {\n  position: static;\n}\n.va-toast--multiline {\n  min-height: 70px;\n}\n.va-toast__title {\n  font-weight: var(--va-toast-title-font-weight);\n  font-size: var(--va-toast-title-font-size);\n  margin: var(--va-toast-title-margin);\n  font-size: 0.625rem;\n  letter-spacing: 0.6px;\n  line-height: 1.2;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n.va-toast__content {\n  font-size: var(--va-toast-content-font-size);\n  line-height: var(--va-toast-content-line-height);\n  padding-right: var(--va-toast-content-padding-right);\n}\n.va-toast__content p,\n.va-toast__content div {\n  margin: 0;\n}\n.va-toast__icon {\n  height: var(--va-toast-icon-height);\n  width: var(--va-toast-icon-width);\n  font-size: var(--va-toast-icon-font-size);\n}\n.va-toast__close-icon {\n  position: absolute;\n  top: 50%;\n  right: var(--va-toast-close-icon-right);\n  cursor: pointer;\n  transform: translateY(-50%);\n  font-size: var(--va-toast-close-icon-font-siz);\n  opacity: 0.7;\n}\n.va-toast__close-icon:hover {\n  opacity: 1;\n}\n.va-toast-fade-enter-from {\n  transform: translateX(calc(var(--va-toast-animation-x-shift) + var(--va-toast-x-shift)));\n}\n.va-toast-fade-leave-to {\n  transform: translateY(var(--va-toast-animation-y-shift));\n  opacity: 0;\n}";
const _VaToast = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
  _VaToast as _
};
//# sourceMappingURL=VaToast.js.map