Skip to content

SASS 変数

テーマ

NameDefault
$light-theme
(
	'background': #eee
	'text-color': #000
	'divider': rgba(#000, 0.12)
)
$dark-theme
(
	'background': #1e1e1e
	'text-color': #fff
	'divider': rgba(#fff, 0.12)
)

v-confirm

NameDefault
$v-confirm-actions-button-height
36px
$v-confirm-actions-button-margin-size
0 0 0 8px
$v-confirm-actions-button-min-width
64px
$v-confirm-actions-padding
8px
$v-confirm-animation
bounce 0.2s
$v-confirm-button-border-radius
4px
$v-confirm-button-color
#1867c0
$v-confirm-button-font-size
0.857rem
$v-confirm-button-font-weight
500
$v-confirm-button-hover-opacity
0.08
$v-confirm-button-padding
0 8px
$v-confirm-button-white-space
nowrap
$v-confirm-content-border-radius
3px
$v-confirm-content-box-shadow
1px 2px 3px 4px rgba(12, 12, 12, 0.2)
$v-confirm-content-max-width
95%
$v-confirm-header-font-size
24px
$v-confirm-header-font-weight
bold
$v-confirm-header-min-height
36px
$v-confirm-header-padding
8px 12px
$v-confirm-message-font-size
large
$v-confirm-message-font-weigth
normal
$v-confirm-message-overflow-wrap
break-word
$v-confirm-message-padding
8px 16px
$v-confirm-message-white-space
pre-wrap
$v-confirm-overlay-background-color
rgba(0, 0, 0, 0.5)
$v-confirm-transition-enter-active
opacity 0.2s ease-in
$v-confirm-transition-leave-active
opacity 0.3s ease-out
$v-confirm-z-index
200

使い方

sass ファイルをインポート

scss
// main.scss
@use "@gn5r/vue-confirm";

SASS 変数を上書きする

scss
// main.scss
@use "@gn5r/vue-confirm" with (
  $v-confirm-z-index: 1007
);