1 | @import "../core/index-noreset.scss";
|
2 | @import "scss/variable";
|
3 |
|
4 | #{$transfer-prefix} {
|
5 | @include box-sizing;
|
6 | display: inline-block;
|
7 |
|
8 | &-panel {
|
9 | display: inline-block;
|
10 | border: $transfer-panel-border-width $line-solid $transfer-panel-border-color;
|
11 | border-radius: $transfer-panel-border-corner;
|
12 | background-color: $transfer-panel-background-color;
|
13 | vertical-align: middle;
|
14 | }
|
15 |
|
16 | &-panel-header {
|
17 | padding: $transfer-panel-header-padding-top-bottom $transfer-panel-header-padding-left-right;
|
18 | border-bottom: $transfer-panel-border-width $line-solid $transfer-panel-border-color;
|
19 | background-color: $transfer-panel-header-background-color;
|
20 | color: $transfer-panel-header-text-color;
|
21 | font-size: $transfer-panel-header-text-size;
|
22 | }
|
23 |
|
24 | &-panel-search {
|
25 | padding: 0 $transfer-panel-search-margin-left-right;
|
26 | margin-top: $transfer-panel-search-margin-top;
|
27 | margin-bottom: $transfer-panel-search-margin-bottom;
|
28 | width: $transfer-panel-list-width;
|
29 | }
|
30 |
|
31 | & &-panel-list {
|
32 | width: $transfer-panel-list-width;
|
33 |
|
34 | height: $transfer-panel-list-height;
|
35 | padding: 0;
|
36 | border: none;
|
37 | box-shadow: none;
|
38 | border-radius: 0;
|
39 | overflow-y: auto;
|
40 | }
|
41 |
|
42 | &-panel-not-found-container {
|
43 | display: table;
|
44 | width: 100%;
|
45 | height: 100%;
|
46 | }
|
47 |
|
48 | &-panel-not-found {
|
49 | display: table-cell;
|
50 | vertical-align: middle;
|
51 | text-align: center;
|
52 | color: $color-text1-2;
|
53 | font-size: $font-size-body-2;
|
54 | }
|
55 |
|
56 | &-panel-item {
|
57 | &.#{$css-prefix}focused {
|
58 | transition: background-color $motion-duration-immediately $motion-linear;
|
59 | }
|
60 |
|
61 | &:not(.#{$css-prefix}disabled).#{$css-prefix}simple:hover {
|
62 | color: $transfer-simple-panel-item-hover-text-color;
|
63 | }
|
64 |
|
65 | &.#{$css-prefix}insert-before:before {
|
66 | position: absolute;
|
67 | top: 0;
|
68 | left: 0;
|
69 | content: '';
|
70 | width: 100%;
|
71 | border-top: $line-1 solid $color-brand1-6;
|
72 | }
|
73 |
|
74 | &.#{$css-prefix}insert-after:after {
|
75 | position: absolute;
|
76 | left: 0;
|
77 | bottom: 0;
|
78 | content: '';
|
79 | width: 100%;
|
80 | border-bottom: $line-1 solid $color-brand1-6;
|
81 | }
|
82 | }
|
83 |
|
84 | &-panel-footer {
|
85 | position: relative;
|
86 | padding: $transfer-panel-footer-padding-top-bottom $transfer-panel-footer-padding-left-right;
|
87 | border-top: $transfer-panel-border-width $line-solid $transfer-panel-border-color;
|
88 | background-color: $transfer-panel-footer-background-color;
|
89 | font-size: 0;
|
90 | box-shadow: $transfer-panel-footer-shadow;
|
91 | }
|
92 |
|
93 | &-panel-count {
|
94 |
|
95 | margin-left: $s-1;
|
96 | font-size: $font-size-body-1;
|
97 | vertical-align: middle;
|
98 | color: $transfer-panel-footer-text-color;
|
99 | }
|
100 |
|
101 | &-panel-move-all {
|
102 | font-size: $font-size-body-1;
|
103 | color: $transfer-simple-panel-footer-text-color;
|
104 | cursor: pointer;
|
105 |
|
106 | &.#{$css-prefix}disabled {
|
107 | color: $color-text1-1;
|
108 | cursor: not-allowed;
|
109 | }
|
110 | }
|
111 |
|
112 | &-operations {
|
113 | display: inline-block;
|
114 | vertical-align: middle;
|
115 | margin: 0 $transfer-operation-margin-left-right;
|
116 | }
|
117 |
|
118 | &-move.#{$css-prefix}icon {
|
119 | color: $transfer-simple-move-icon-color;
|
120 | &::before {
|
121 | content: $transfer-simple-move-icon;
|
122 | }
|
123 | }
|
124 |
|
125 | &-operation.#{$css-prefix}btn {
|
126 | display: block;
|
127 |
|
128 | & + & {
|
129 | margin-top: $transfer-operation-margin-gutter;
|
130 | }
|
131 |
|
132 | .#{$css-prefix}icon {
|
133 | @include icon-size($transfer-operation-icon-size);
|
134 | }
|
135 | }
|
136 | }
|