Skip to content

Commit 86566ff

Browse files
author
wfbn8821
committed
fix stacking context
1 parent 1e30279 commit 86566ff

File tree

6 files changed

+51
-49
lines changed

6 files changed

+51
-49
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.idea
3-
dist
3+
dist
4+
lib

‎lib/assets/styles.css‎

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

5456
._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 {
5557
min-height: 1px;

‎lib/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ var CardScroll = _react2.default.createClass({
7676
var container = this._container.getBoundingClientRect().width - this.maxOffset * 2;
7777
// get first child as all children should be of equal width
7878
var card = _reactDom2.default.findDOMNode(this._child).getBoundingClientRect().width * container / this._container.getBoundingClientRect().width;
79-
console.log({ card: card, container: container });
8079
return {
8180
card: card,
8281
container: container

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-card-scroll",
3-
"version": "2.0.3",
3+
"version": "2.0.5",
44
"description": "A React component to navigate horizontally between cards of same width",
55
"main": "lib/index.js",
66
"scripts": {

‎src/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ let CardScroll = React.createClass({
5757
const container = this._container.getBoundingClientRect().width-this.maxOffset*2
5858
// get first child as all children should be of equal width
5959
const card = ReactDOM.findDOMNode(this._child).getBoundingClientRect().width*container/this._container.getBoundingClientRect().width
60-
console.log({card, container})
6160
return {
6261
card,
6362
container

‎src/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ $outPadding: $padding - $outMargin;
55

66
.container {
77
position: relative;
8+
z-index: 0;
89
box-sizing: border-box;
910
:global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
1011
position: absolute;

0 commit comments

Comments
 (0)