1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 | @import "scss/variable";
|
5 | @import "scss/mixin";
|
6 |
|
7 | .#{$css-prefix}balloon {
|
8 | @include box-sizing;
|
9 | @include balloon-bounding($balloon-border-style);
|
10 |
|
11 | font-size: $balloon-content-font-size;
|
12 | font-weight: $balloon-content-font-weight;
|
13 |
|
14 | word-wrap: break-all;
|
15 | word-wrap: break-word;
|
16 |
|
17 | z-index: 0;
|
18 | &:focus,
|
19 | & *:focus {
|
20 | outline: 0;
|
21 | }
|
22 |
|
23 | &-title {
|
24 | margin-bottom: $balloon-size-header-margin-bottom;
|
25 | font-size: $balloon-title-font-size;
|
26 | font-weight: $balloon-title-font-weight;
|
27 |
|
28 | &.#{$css-prefix}balloon-closable {
|
29 | @include balloon-size(0, $balloon-size-padding-closable-right, 0, 0);
|
30 | .#{$css-prefix}balloon-close {
|
31 | top: -1px;
|
32 | transform: translateY(calc(#{$balloon-size-padding-top} + (#{$balloon-title-font-size} - #{$balloon-size-close}) / 2));
|
33 | right: $balloon-size-padding-right;
|
34 | }
|
35 | }
|
36 | }
|
37 |
|
38 | &-primary {
|
39 | @include balloon-state(
|
40 | $balloon-primary-color,
|
41 | $balloon-primary-color-border,
|
42 | $balloon-primary-color-bg,
|
43 | $balloon-primary-shadow,
|
44 | $balloon-primary-border-width
|
45 | );
|
46 | @include balloon-close(
|
47 | $balloon-size-close-margin-top,
|
48 | $balloon-size-close-margin-right,
|
49 | $balloon-size-close,
|
50 | $balloon-primary-color-close,
|
51 | $balloon-primary-color-close-hover
|
52 | );
|
53 | @include balloon-arrow(
|
54 | $balloon-size-arrow-size,
|
55 | $balloon-size-arrow-size,
|
56 | $balloon-primary-color-border,
|
57 | $balloon-primary-color-bg,
|
58 | $balloon-primary-shadow,
|
59 | $balloon-primary-border-width,
|
60 | $balloon-size-arrow-expose-primary
|
61 | );
|
62 | }
|
63 |
|
64 | &-normal {
|
65 | @include balloon-state(
|
66 | $balloon-normal-color,
|
67 | $balloon-normal-color-border,
|
68 | $balloon-normal-color-bg,
|
69 | $balloon-normal-shadow,
|
70 | $balloon-normal-border-width
|
71 | );
|
72 | @include balloon-close(
|
73 | $balloon-size-close-margin-top,
|
74 | $balloon-size-close-margin-right,
|
75 | $balloon-size-close,
|
76 | $balloon-normal-color-close,
|
77 | $balloon-normal-color-close-hover
|
78 | );
|
79 | @include balloon-arrow(
|
80 | $balloon-size-arrow-size,
|
81 | $balloon-size-arrow-size,
|
82 | $balloon-normal-color-border,
|
83 | $balloon-normal-color-bg,
|
84 | $balloon-normal-shadow,
|
85 | $balloon-normal-border-width,
|
86 | $balloon-size-arrow-expose
|
87 | );
|
88 | }
|
89 |
|
90 | @include show-hidden();
|
91 |
|
92 |
|
93 | &-medium {
|
94 | @include balloon-size($balloon-size-padding-top, $balloon-size-padding-right, $balloon-size-padding-top, $balloon-size-padding-right);
|
95 | }
|
96 |
|
97 | &-closable {
|
98 | @include balloon-size($balloon-size-padding-top, $balloon-size-padding-closable-right, $balloon-size-padding-top, $balloon-size-padding-right);
|
99 | }
|
100 | }
|
101 |
|
102 | .#{$css-prefix}balloon-tooltip {
|
103 | @include box-sizing;
|
104 | @include balloon-bounding($balloon-tooltip-border-style);
|
105 |
|
106 | font-size: $balloon-tooltip-content-font-size;
|
107 | font-weight: $balloon-tooltip-content-font-weight;
|
108 | z-index: 0;
|
109 |
|
110 | word-wrap: break-all;
|
111 | word-wrap: break-word;
|
112 |
|
113 |
|
114 | @include tooltip-state(
|
115 | $balloon-tooltip-color,
|
116 | $balloon-tooltip-color-border,
|
117 | $balloon-tooltip-color-bg,
|
118 | $balloon-tooltip-shadow,
|
119 | $balloon-tooltip-border-width
|
120 | );
|
121 |
|
122 | @include tooltip-arrow(
|
123 | $balloon-size-arrow-size,
|
124 | $balloon-size-arrow-size,
|
125 | $balloon-tooltip-color-border,
|
126 | $balloon-tooltip-color-bg
|
127 | );
|
128 |
|
129 | @include show-hidden();
|
130 |
|
131 |
|
132 | &-medium {
|
133 | @include balloon-size($balloon-tooltip-size-padding-top, $balloon-tooltip-size-padding-right, $balloon-tooltip-size-padding-bottom, $balloon-tooltip-size-padding-left);
|
134 | }
|
135 | }
|
136 |
|
137 | @import "./rtl.scss";
|