Skip to content

Commit 356a263

Browse files
author
wfbn8821
committed
fix css issue on arrows
1 parent c74744b commit 356a263

File tree

2 files changed

+91
-93
lines changed

2 files changed

+91
-93
lines changed

‎lib/assets/styles.css‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,55 @@
11
._1H7C65wd8WJqBtCRmAfokb {
22
position: relative;
33
box-sizing: border-box; }
4-
5-
._1H7C65wd8WJqBtCRmAfokb ._358enaiolY7BZPuXLuxdRA {
6-
position: absolute;
7-
transition: left 1s cubic-bezier(0, 0.7, 0.7, 1);
8-
box-sizing: border-box; }
9-
10-
._22yQcZhJvmCSA52vE9VrUe {
11-
position: fixed;
12-
top: 40%;
13-
z-index: 1;
14-
height: 20%;
15-
padding: 4px;
16-
border-top: #ccc solid 1px;
17-
border-bottom: #ccc solid 1px;
18-
display: flex;
19-
align-items: center;
20-
transition: margin 0.5s;
21-
background: linear-gradient(to right, white, #eee);
22-
right: 0;
23-
border-left: #ccc solid 1px;
24-
border-radius: 2px 0 0 2px;
25-
margin-right: -15px;
26-
padding-right: 19px;
27-
cursor: pointer; }
28-
._22yQcZhJvmCSA52vE9VrUe ._1y88-b9gQ_tGRfPBQpxMfo::after {
29-
content: ">"; }
30-
._22yQcZhJvmCSA52vE9VrUe:hover {
31-
background: linear-gradient(to right, #ddd, #ccc);
32-
margin-right: 0; }
33-
34-
._1bIeR72ojeoWY-MxcIhjT- {
35-
position: fixed;
36-
top: 40%;
37-
z-index: 1;
38-
height: 20%;
39-
padding: 4px;
40-
border-top: #ccc solid 1px;
41-
border-bottom: #ccc solid 1px;
42-
display: flex;
43-
align-items: center;
44-
transition: margin 0.5s;
45-
background: linear-gradient(to left, white, #eee);
46-
left: 0;
47-
border-right: #ccc solid 1px;
48-
border-radius: 0 2px 2px 0;
49-
margin-left: -15px;
50-
padding-left: 19px; }
51-
._1bIeR72ojeoWY-MxcIhjT- ._1y88-b9gQ_tGRfPBQpxMfo::after {
52-
content: "<"; }
53-
._1bIeR72ojeoWY-MxcIhjT-:hover {
54-
background: linear-gradient(to left, #ddd, #ccc);
55-
margin-left: 0; }
4+
._1H7C65wd8WJqBtCRmAfokb .rcs-center, ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack {
5+
position: absolute;
6+
transition: left 1s cubic-bezier(0, 0.7, 0.7, 1);
7+
box-sizing: border-box; }
8+
._1H7C65wd8WJqBtCRmAfokb ._22yQcZhJvmCSA52vE9VrUe {
9+
position: fixed;
10+
top: 40%;
11+
z-index: 1;
12+
height: 20%;
13+
padding: 4px;
14+
border-top: #ccc solid 1px;
15+
border-bottom: #ccc solid 1px;
16+
display: flex;
17+
align-items: center;
18+
transition: margin 0.5s;
19+
background: linear-gradient(to right, white, #eee);
20+
right: 0;
21+
border-left: #ccc solid 1px;
22+
border-radius: 2px 0 0 2px;
23+
margin-right: -15px;
24+
padding-right: 19px;
25+
cursor: pointer; }
26+
._1H7C65wd8WJqBtCRmAfokb ._22yQcZhJvmCSA52vE9VrUe ._1y88-b9gQ_tGRfPBQpxMfo::after {
27+
content: ">"; }
28+
._1H7C65wd8WJqBtCRmAfokb ._22yQcZhJvmCSA52vE9VrUe:hover {
29+
background: linear-gradient(to right, #ddd, #ccc);
30+
margin-right: 0; }
31+
._1H7C65wd8WJqBtCRmAfokb ._1bIeR72ojeoWY-MxcIhjT- {
32+
position: fixed;
33+
top: 40%;
34+
z-index: 1;
35+
height: 20%;
36+
padding: 4px;
37+
border-top: #ccc solid 1px;
38+
border-bottom: #ccc solid 1px;
39+
display: flex;
40+
align-items: center;
41+
transition: margin 0.5s;
42+
background: linear-gradient(to left, white, #eee);
43+
left: 0;
44+
border-right: #ccc solid 1px;
45+
border-radius: 0 2px 2px 0;
46+
margin-left: -15px;
47+
padding-left: 19px; }
48+
._1H7C65wd8WJqBtCRmAfokb ._1bIeR72ojeoWY-MxcIhjT- ._1y88-b9gQ_tGRfPBQpxMfo::after {
49+
content: "<"; }
50+
._1H7C65wd8WJqBtCRmAfokb ._1bIeR72ojeoWY-MxcIhjT-:hover {
51+
background: linear-gradient(to left, #ddd, #ccc);
52+
margin-left: 0; }
5653

5754
._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-1, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-2, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-3, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-4, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-5, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-6, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-7, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-8, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-9, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-10, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-11, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xs-12, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-1, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-2, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-3, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-4, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-5, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-6, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-7, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-8, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-9, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-10, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-11, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-sm-12, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-1, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-2, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-3, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-4, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-5, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-6, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-7, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-8, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-9, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-10, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-11, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-md-12, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-1, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-2, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-3, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-4, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-5, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-6, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-7, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-8, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-9, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-10, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-11, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-lg-12, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-1, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-2, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-3, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-4, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-5, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-6, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-7, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-8, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-9, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-10, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-11, ._1H7C65wd8WJqBtCRmAfokb .rcs-col-xl-12 {
5855
min-height: 1px;

‎src/styles.scss‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@ $padding: 4px;
33
$outMargin: -15px;
44
$outPadding: $padding - $outMargin;
55

6+
.container {
7+
position: relative;
8+
box-sizing: border-box;
9+
:global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
10+
position: absolute;
11+
transition: left 1s cubic-bezier(0,.7,.7,1);
12+
box-sizing: border-box;
13+
}
14+
}
15+
616
@mixin arrow{
717
position: fixed;
818
top: 40%;
@@ -16,52 +26,43 @@ $outPadding: $padding - $outMargin;
1626
transition: margin 0.5s;
1727
}
1828

19-
.container {
20-
position: relative;
21-
box-sizing: border-box;
22-
:global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
23-
position: absolute;
24-
transition: left 1s cubic-bezier(0,.7,.7,1);
25-
box-sizing: border-box;
26-
}
27-
.rightArrow {
28-
@include arrow;
29-
background: linear-gradient(to right, white, #eee);
30-
right: 0;
31-
border-left: $border-color solid 1px;
32-
border-radius: 2px 0 0 2px;
33-
margin-right: $outMargin;
34-
padding-right: $outPadding;
35-
cursor: pointer;
36-
.arrow{
37-
&::after{
38-
content: ">"
39-
}
40-
}
41-
&:hover{
42-
background: linear-gradient(to right, #ddd, #ccc);
43-
margin-right: 0;
29+
.rightArrow {
30+
@include arrow;
31+
background: linear-gradient(to right, white, #eee);
32+
right: 0;
33+
border-left: $border-color solid 1px;
34+
border-radius: 2px 0 0 2px;
35+
margin-right: $outMargin;
36+
padding-right: $outPadding;
37+
cursor: pointer;
38+
.arrow{
39+
&::after{
40+
content: ">"
4441
}
4542
}
43+
&:hover{
44+
background: linear-gradient(to right, #ddd, #ccc);
45+
margin-right: 0;
46+
}
47+
}
4648

47-
.leftArrow {
48-
@include arrow;
49-
background: linear-gradient(to left, white, #eee);
50-
left: 0;
51-
border-right: $border-color solid 1px;
52-
border-radius: 0 2px 2px 0;
53-
margin-left: $outMargin;
54-
padding-left: $outPadding;
55-
.arrow{
56-
&::after{
57-
content: "<"
58-
}
59-
}
60-
&:hover{
61-
background: linear-gradient(to left, #ddd, #ccc);
62-
margin-left: 0;
49+
.leftArrow {
50+
@include arrow;
51+
background: linear-gradient(to left, white, #eee);
52+
left: 0;
53+
border-right: $border-color solid 1px;
54+
border-radius: 0 2px 2px 0;
55+
margin-left: $outMargin;
56+
padding-left: $outPadding;
57+
.arrow{
58+
&::after{
59+
content: "<"
6360
}
6461
}
62+
&:hover{
63+
background: linear-gradient(to left, #ddd, #ccc);
64+
margin-left: 0;
65+
}
6566
}
6667

6768
$grid-breakpoints: (

0 commit comments

Comments
 (0)