121 lines
3.5 KiB
SCSS

@charset "UTF-8";
@import "../core/index-noreset.scss";
@import "scss/variable";
@import "scss/mixin";
.#{$css-prefix}balloon {
@include box-sizing;
@include balloon-bounding($balloon-border-style);
font-size: $balloon-content-font-size;
font-weight: $balloon-content-font-weight;
animation-duration: $motion-duration-standard;
animation-timing-function: $motion-ease-in-out;
word-wrap: break-all;
word-wrap: break-word;
z-index: 0;
&:focus,
& *:focus {
outline: 0;
}
&-primary {
@include balloon-state(
$balloon-primary-color,
$balloon-primary-color-border,
$balloon-primary-color-bg,
$balloon-primary-shadow,
$balloon-primary-border-width
);
@include balloon-close(
$balloon-size-close-margin-top,
$balloon-size-close-margin-right,
$balloon-size-close,
$balloon-primary-color-close,
$balloon-primary-color-close-hover
);
@include balloon-arrow(
$balloon-size-arrow-size,
$balloon-size-arrow-size,
$balloon-primary-color-border,
$balloon-primary-color-bg,
$balloon-primary-shadow,
$balloon-primary-border-width,
$balloon-size-arrow-expose-primary
);
}
&-normal {
@include balloon-state(
$balloon-normal-color,
$balloon-normal-color-border,
$balloon-normal-color-bg,
$balloon-normal-shadow,
$balloon-normal-border-width
);
@include balloon-close(
$balloon-size-close-margin-top,
$balloon-size-close-margin-right,
$balloon-size-close,
$balloon-normal-color-close,
$balloon-normal-color-close-hover
);
@include balloon-arrow(
$balloon-size-arrow-size,
$balloon-size-arrow-size,
$balloon-normal-color-border,
$balloon-normal-color-bg,
$balloon-normal-shadow,
$balloon-normal-border-width,
$balloon-size-arrow-expose
);
}
@include show-hidden();
/* size */
&-medium {
@include balloon-size($balloon-size-padding-top, $balloon-size-padding-right, $balloon-size-padding-top, $balloon-size-padding-right);
}
/* 带关闭按钮的右侧padding变大 */
&-closable {
@include balloon-size($balloon-size-padding-top, $balloon-size-padding-closable-right, $balloon-size-padding-top, $balloon-size-padding-right);
}
}
.#{$css-prefix}balloon-tooltip {
@include box-sizing;
@include balloon-bounding($balloon-tooltip-border-style);
font-size: $balloon-tooltip-content-font-size;
font-weight: $balloon-tooltip-content-font-weight;
z-index: 0;
word-wrap: break-all;
word-wrap: break-word;
@include tooltip-state(
$balloon-tooltip-color,
$balloon-tooltip-color-border,
$balloon-tooltip-color-bg,
$balloon-tooltip-shadow,
$balloon-tooltip-border-width
);
@include tooltip-arrow(
$balloon-size-arrow-size,
$balloon-size-arrow-size,
$balloon-tooltip-color-border,
$balloon-tooltip-color-bg
);
@include show-hidden();
/* size */
&-medium {
@include balloon-size($balloon-tooltip-size-padding-top, $balloon-tooltip-size-padding-right, $balloon-tooltip-size-padding-bottom, $balloon-tooltip-size-padding-left);
}
}
@import "./rtl.scss";