1 | @import "../core/index-noreset.scss";
|
2 | @import "../button/scss/variable.scss";
|
3 | @import "scss/mixin";
|
4 | @import "scss/variable";
|
5 |
|
6 | #{$menu-btn-prefix} {
|
7 | display: inline-block;
|
8 | box-shadow: none;
|
9 |
|
10 | &-spacing-tb {
|
11 | padding: $popup-spacing-tb 0;
|
12 | }
|
13 |
|
14 | .#{$css-prefix}icon {
|
15 | transition: transform $motion-duration-immediately $motion-linear;
|
16 | }
|
17 |
|
18 | .#{$css-prefix}menu-btn-arrow::before {
|
19 | content: $menu-btn-fold-icon-content;
|
20 | }
|
21 |
|
22 | &.#{$css-prefix}expand .#{$css-prefix}menu-btn-arrow {
|
23 | @if get-compiling-value($menu-btn-unfold-icon-content) != get-compiling-value($icon-reset) {
|
24 | &::before {
|
25 | content: $menu-btn-unfold-icon-content;
|
26 | }
|
27 | } @else {
|
28 | transform: rotate(180deg);
|
29 | }
|
30 | }
|
31 |
|
32 | &-symbol-unfold::before {
|
33 | content: $menu-btn-unfold-icon-content;
|
34 | }
|
35 |
|
36 |
|
37 | &.#{$css-prefix}btn-normal {
|
38 | .#{$css-prefix}menu-btn-arrow {
|
39 | color: $menu-btn-pure-text-normal-icon-color;
|
40 | }
|
41 | &:hover .#{$css-prefix}menu-btn-arrow {
|
42 | color: $btn-pure-normal-color-hover;
|
43 | }
|
44 | }
|
45 |
|
46 | &.#{$css-prefix}btn-secondary {
|
47 | .#{$css-prefix}menu-btn-arrow {
|
48 | color: $menu-btn-pure-text-secondary-icon-color;
|
49 | }
|
50 | &:hover .#{$css-prefix}menu-btn-arrow {
|
51 | color: $btn-pure-secondary-color-hover;
|
52 | }
|
53 | &.#{$css-prefix}btn-text:hover .#{$css-prefix}menu-btn-arrow {
|
54 | color: $btn-text-secondary-color-hover;
|
55 | }
|
56 | }
|
57 |
|
58 | &.#{$css-prefix}btn-primary {
|
59 | .#{$css-prefix}menu-btn-arrow {
|
60 | color: $menu-btn-pure-text-primary-icon-color;
|
61 | }
|
62 | &:hover .#{$css-prefix}menu-btn-arrow {
|
63 | color: $btn-pure-primary-color-hover;
|
64 | }
|
65 | }
|
66 |
|
67 | &.#{$css-prefix}btn-text.#{$css-prefix}btn-normal {
|
68 | .#{$css-prefix}menu-btn-arrow {
|
69 | color: $menu-btn-text-text-normal-icon-color;
|
70 | }
|
71 | &:hover .#{$css-prefix}menu-btn-arrow {
|
72 | color: $btn-text-normal-color-hover;
|
73 | }
|
74 | }
|
75 |
|
76 | &.#{$css-prefix}btn-text.#{$css-prefix}btn-primary {
|
77 | .#{$css-prefix}menu-btn-arrow {
|
78 | color: $menu-btn-text-text-primary-icon-color;
|
79 | }
|
80 | &:hover .#{$css-prefix}menu-btn-arrow {
|
81 | color: $btn-text-primary-color-hover;
|
82 | }
|
83 | }
|
84 |
|
85 | &.#{$css-prefix}btn-ghost.#{$css-prefix}btn-light {
|
86 | .#{$css-prefix}menu-btn-arrow {
|
87 | color: $menu-btn-ghost-light-icon-color;
|
88 | }
|
89 | &:hover .#{$css-prefix}menu-btn-arrow {
|
90 | color: $btn-ghost-light-color-hover;
|
91 | }
|
92 | }
|
93 |
|
94 | &.#{$css-prefix}btn-ghost.#{$css-prefix}btn-dark {
|
95 | .#{$css-prefix}menu-btn-arrow {
|
96 | color: $menu-btn-ghost-dark-icon-color;
|
97 | }
|
98 | &:hover .#{$css-prefix}menu-btn-arrow {
|
99 | color: $btn-ghost-dark-color-hover;
|
100 | }
|
101 | }
|
102 |
|
103 | &.disabled .#{$css-prefix}menu-btn-arrow,
|
104 | &[disabled] .#{$css-prefix}menu-btn-arrow {
|
105 | color: $menu-btn-disabled-icon-color;
|
106 | }
|
107 |
|
108 | &.#{$css-prefix}btn-text.disabled .#{$css-prefix}menu-btn-arrow,
|
109 | &.#{$css-prefix}btn-text[disabled] .#{$css-prefix}menu-btn-arrow {
|
110 | color: $menu-btn-disabled-icon-color;
|
111 | }
|
112 |
|
113 | &[disabled].#{$css-prefix}btn-ghost.#{$css-prefix}btn-dark .#{$css-prefix}menu-btn-arrow {
|
114 | color: $menu-btn-ghost-dark-disabled-icon-color;
|
115 | }
|
116 |
|
117 | &[disabled].#{$css-prefix}btn-ghost.#{$css-prefix}btn-light .#{$css-prefix}menu-btn-arrow {
|
118 | color: $menu-btn-ghost-light-disabled-icon-color;
|
119 | }
|
120 | }
|