1 | @charset "UTF-8";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin message-bounding() {
|
7 | @include clearfix();
|
8 | position: relative;
|
9 | display: block;
|
10 | vertical-align: baseline;
|
11 | }
|
12 |
|
13 | @mixin message-size(
|
14 | $borderWidth,
|
15 | $padding,
|
16 | $titlePadding,
|
17 | $titleFontSize,
|
18 | $contentPadding,
|
19 | $contentMarginTop,
|
20 | $contentFontSize,
|
21 | $iconSize
|
22 | ) {
|
23 | border-width: $borderWidth;
|
24 | padding: $padding;
|
25 |
|
26 | .#{$css-prefix}message-symbol {
|
27 | float: left;
|
28 | @include icon-size($iconSize);
|
29 | line-height: $iconSize;
|
30 | }
|
31 | .#{$css-prefix}message-title {
|
32 | padding: $titlePadding;
|
33 | font-size: $titleFontSize;
|
34 | line-height: $titleFontSize;
|
35 | }
|
36 | .#{$css-prefix}message-content {
|
37 | margin-top: $contentMarginTop;
|
38 | padding: $contentPadding;
|
39 | font-size: $contentFontSize;
|
40 | line-height: $font-lineheight-2;
|
41 | }
|
42 |
|
43 | .#{$css-prefix}message-symbol + .#{$css-prefix}message-content {
|
44 | margin-top: 0;
|
45 | }
|
46 | }
|
47 |
|
48 | @mixin message-shape(
|
49 | $shape,
|
50 | $titleColor,
|
51 | $contentColor,
|
52 | $iconColor,
|
53 | $bgColor,
|
54 | $borderColor,
|
55 | $shadow,
|
56 | $icon
|
57 | ) {
|
58 | background-color: $bgColor;
|
59 | border-color: $borderColor;
|
60 | box-shadow: $shadow;
|
61 |
|
62 | .#{$css-prefix}message-title {
|
63 | color: $titleColor;
|
64 | }
|
65 | .#{$css-prefix}message-content {
|
66 | color: $contentColor;
|
67 | }
|
68 | .#{$css-prefix}message-symbol {
|
69 | color: $iconColor;
|
70 | }
|
71 | .#{$css-prefix}message-symbol-icon::before {
|
72 | content: $icon;
|
73 | @if (get-compiling-value($icon) == get-compiling-value($message-loading-icon-content)) {
|
74 | animation: loadingCircle 1s infinite linear;
|
75 | }
|
76 | }
|
77 |
|
78 | @if ($shape == 'inline') {
|
79 | border-style: $message-border-style;
|
80 | }
|
81 |
|
82 | @if ($shape == 'toast') {
|
83 | border-style: $message-border-style-toast;
|
84 | }
|
85 | }
|
86 |
|
87 | @mixin vertial-align-middle(
|
88 | $fontSize,
|
89 | $iconSize,
|
90 | $className
|
91 | ) {
|
92 | @if get-compiling-value($fontSize) > get-compiling-value($iconSize) {
|
93 | .#{$css-prefix}message-symbol {
|
94 | line-height: $fontSize;
|
95 | }
|
96 | } @else {
|
97 | .#{$css-prefix}message-#{$className} {
|
98 | line-height: $iconSize;
|
99 | }
|
100 | }
|
101 | }
|