Skip to content

Commit ad50343

Browse files
daftspunkdaftspunk
committed
Improve styles
1 parent 334bf8d commit ad50343

File tree

4 files changed

+93
-42
lines changed

4 files changed

+93
-42
lines changed

‎modules/backend/behaviors/importexportcontroller/assets/css/importexport.css

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,69 @@
1313
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
1414
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
1515
}
16-
.import-behavior ul.import-file-columns li,
17-
.import-behavior ul.import-record-columns li {
18-
background: #f0f0f0;
16+
.import-behavior ul li.dragged,
17+
.import-behavior ul.import-file-columns > li,
18+
.import-behavior ul.import-record-columns > li {
19+
background: #e8eaeb;
1920
border: 1px solid #cccccc;
2021
border-radius: 3px;
2122
margin-bottom: 5px;
2223
}
23-
.import-behavior ul.import-file-columns li div.import-column-name > span,
24-
.import-behavior ul.import-record-columns li div.import-column-name > span,
25-
.import-behavior ul.import-file-columns li > span,
26-
.import-behavior ul.import-record-columns li > span {
24+
.import-behavior ul li.dragged div.import-column-name > span,
25+
.import-behavior ul.import-file-columns > li div.import-column-name > span,
26+
.import-behavior ul.import-record-columns > li div.import-column-name > span,
27+
.import-behavior ul li.dragged > span,
28+
.import-behavior ul.import-file-columns > li > span,
29+
.import-behavior ul.import-record-columns > li > span {
2730
display: block;
2831
padding: 5px;
2932
}
30-
.import-behavior ul.import-file-columns li:before,
31-
.import-behavior ul.import-file-columns li:after {
33+
.import-behavior ul.import-file-columns > li:before,
34+
.import-behavior ul.import-file-columns > li:after {
3235
content: " ";
3336
display: table;
3437
}
35-
.import-behavior ul.import-file-columns li:after {
38+
.import-behavior ul.import-file-columns > li:after {
3639
clear: both;
3740
}
3841
.import-behavior ul.import-file-columns div.import-column-name {
3942
float: left;
40-
width: 50%;
43+
width: 45%;
4144
}
4245
.import-behavior ul.import-file-columns ul.import-column-bindings {
4346
float: right;
44-
width: 50%;
47+
width: 55%;
4548
}
4649
.import-behavior ul.import-column-bindings {
47-
background: #999;
48-
padding: 5px 5px;
50+
background: #dddddd;
51+
padding: 0 5px 0 21px;
52+
position: relative;
53+
min-height: 30px;
54+
}
55+
.import-behavior ul.import-column-bindings:after {
56+
content: '';
57+
display: block;
58+
width: 0;
59+
height: 0;
60+
border-top: 15px solid transparent;
61+
border-bottom: 15px solid transparent;
62+
border-left: 16px solid #e8eaeb;
63+
position: absolute;
64+
top: 0;
65+
left: 0;
4966
}
50-
.import-behavior ul.import-column-bindings li {
51-
background: transparent;
52-
border-color: transparent;
67+
.import-behavior ul.import-column-bindings:before {
68+
position: absolute;
69+
padding: 5px;
70+
content: attr(data-empty-text);
71+
font-style: italic;
72+
color: rgba(0, 0, 0, 0.5);
73+
}
74+
.import-behavior ul.import-column-bindings > li:not(.dragged) {
75+
background: #dddddd;
76+
position: relative;
77+
}
78+
.import-behavior ul.import-column-bindings > li:not(.dragged) > span {
79+
display: block;
80+
padding: 5px;
5381
}

‎modules/backend/behaviors/importexportcontroller/assets/less/importexport.less

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@import "../../../../assets/less/core/boot.less";
22

3-
@color-import-column-bg: #f0f0f0;
3+
@color-import-column-bg: #e8eaeb;
44
@color-import-column-border: #ccc;
5+
@color-import-bound-bg: #ddd;
56

67
.import-behavior {
78

@@ -23,44 +24,66 @@
2324
}
2425
}
2526

26-
ul.import-file-columns,
27-
ul.import-record-columns {
28-
li {
29-
background: @color-import-column-bg;
30-
border: 1px solid @color-import-column-border;
31-
border-radius: 3px;
32-
margin-bottom: 5px;
27+
ul li.dragged,
28+
ul.import-file-columns > li,
29+
ul.import-record-columns > li {
30+
background: @color-import-column-bg;
31+
border: 1px solid @color-import-column-border;
32+
border-radius: 3px;
33+
margin-bottom: 5px;
3334

34-
div.import-column-name > span,
35-
> span {
36-
display: block;
37-
padding: 5px;
38-
}
35+
div.import-column-name > span,
36+
> span {
37+
display: block;
38+
padding: 5px;
3939
}
4040
}
4141

4242
ul.import-file-columns {
43-
li {
43+
> li {
4444
.clearfix;
4545
}
4646

4747
div.import-column-name {
4848
float: left;
49-
width: 50%;
49+
width: 45%;
5050
}
5151

5252
ul.import-column-bindings {
5353
float: right;
54-
width: 50%;
54+
width: 55%;
5555
}
5656
}
5757

5858
ul.import-column-bindings {
59-
background: #999;
60-
padding: 5px 5px;
61-
li {
62-
background: transparent;
63-
border-color: transparent;
59+
background: @color-import-bound-bg;
60+
padding: 0 5px 0 21px;
61+
position: relative;
62+
min-height: 30px;
63+
64+
&:after {
65+
.triangle(right, 16px, 30px, @color-import-column-bg);
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
}
70+
71+
&:before {
72+
position: absolute;
73+
padding: 5px;
74+
content: attr(data-empty-text);
75+
font-style: italic;
76+
color: rgba(0,0,0,.5);
77+
}
78+
79+
> li:not(.dragged) {
80+
background: @color-import-bound-bg;
81+
position: relative;
82+
83+
> span {
84+
display: block;
85+
padding: 5px;
86+
}
6487
}
6588
}
6689

‎modules/backend/behaviors/importexportcontroller/partials/_container.htm

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="import-behavior">
2-
<h3>1. Upload a CSV file</h3>
2+
<h4>1. Upload a CSV file</h4>
33

44
<?= $this->importRenderUpload() ?>
55

6-
<h3>2. Match fields to the CSV columns</h3>
6+
<h4>2. Match fields to the CSV columns</h4>
77

88
<?= $this->importRenderFields() ?>
99
</div>

‎modules/backend/behaviors/importexportcontroller/partials/_import_fields.htm

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
<div class="import-column-name">
1010
<span>Name</span>
1111
</div>
12-
<ul class="import-column-bindings">
12+
<ul class="import-column-bindings" data-empty-text="Drag here">
1313
</ul>
1414
</li>
1515
<li>
1616
<div class="import-column-name">
1717
<span>URL Name</span>
1818
</div>
19-
<ul class="import-column-bindings">
19+
<ul class="import-column-bindings" data-empty-text="Drag here">
2020
</ul>
2121
</li>
2222
</ul>

0 commit comments

Comments
 (0)