feat: Add a light overlay on the cards which are not visible

Improve design when a short card is over a long card

Fixes #5

Author: wfbn8821

lib/assets/styles.css

@@ -6,6 +6,18 @@
     position: absolute;
     transition: left 1s cubic-bezier(0, 0.7, 0.7, 1), z-index 1s cubic-bezier(0, 0.7, 0.7, 1);
     box-sizing: border-box; }
+  ._1H7C65wd8WJqBtCRmAfokb .rcs-center:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: #fff;
+    opacity: 0;
+    transition: opacity 1s cubic-bezier(0, 0.7, 0.7, 1); }
+  ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack:after {
+    opacity: 0.7; }
 
 ._22yQcZhJvmCSA52vE9VrUe {
   position: fixed;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-card-scroll",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A React component to navigate horizontally between cards of same width",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -83,46 +83,49 @@ let CardScroll = React.createClass({
                          onClick={this.scrollCardsWrap({toLeft: true})}>
                         <div className={s.arrow}></div>
                     </div>
-                        :null}
+                :null}
+                
                 {this.showArrows() && this.canScrollRight()?
                     <div className={s.rightArrow}
                          onClick={this.scrollCardsWrap()}>
                         <div className={s.arrow}></div>
-                    </div>
-                        :null}
-                    <div className={s.container}
-                         style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
-                         ref={updateContainer}>
-                        {React.Children.map(this.props.children, (child, index) => {
-                            const offset = getOffset({
-                                index,
-                                firstVisibleIndex:currentCard,
-                                lastVisibleIndex:lastCard,
-                                visibleStack: this.props.visibleStack,
-                                stackSpace: this.props.stackSpace
-                            })
-                            let position = offset
-                            let zIndex = -currentCard+index
-                            let className = "rcs-left-stack"
-                            if(offset==0){
-                                position = (index-currentCard)*this.widths.card
-                                if(index == lastCard && currentCard != lastCard){
-                                    zIndex = 0
-                                }
-                                className = "rcs-center"
-                            } else if(offset>0){
-                                position = offset + (lastCard-currentCard)*this.widths.card
-                                zIndex = lastCard-index-1
-                                className = "rcs-right-stack"
+                    </div> 
+                :null}
+
+                
+                <div className={s.container}
+                     style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
+                     ref={updateContainer}>
+                    {React.Children.map(this.props.children, (child, index) => {
+                        const offset = getOffset({
+                            index,
+                            firstVisibleIndex:currentCard,
+                            lastVisibleIndex:lastCard,
+                            visibleStack: this.props.visibleStack,
+                            stackSpace: this.props.stackSpace
+                        })
+                        let position = offset
+                        let zIndex = -currentCard+index
+                        let className = "rcs-left-stack"
+                        if(offset==0){
+                            position = (index-currentCard)*this.widths.card
+                            if(index == lastCard && currentCard != lastCard){
+                                zIndex = 0
                             }
-                            const style = {left: position, zIndex}
-                            return (
-                                <div className={`${className} ${childrenClass}`} style={style} ref={index == 0 && updateChild}>
-                                    {child}
-                                </div>
-                            );
-                        })}
-                    </div>
+                            className = "rcs-center"
+                        } else if(offset>0){
+                            position = offset + (lastCard-currentCard)*this.widths.card
+                            zIndex = lastCard-index-1
+                            className = "rcs-right-stack"
+                        }
+                        const style = {left: position, zIndex}
+                        return (
+                            <div className={`${className} ${childrenClass}`} style={style} ref={index == 0 && updateChild}>
+                                {child}
+                            </div>
+                        );
+                    })}
+                </div>
             </div>
         )
     },

src/styles.scss

@@ -3,15 +3,34 @@ $padding: 4px;
 $outMargin: -15px;
 $outPadding: $padding - $outMargin;
 
+$grid-columns:               12 !default;
+$grid-gutter-width:          1.875rem !default; // 30px
+
 .container {
     position: relative;
     z-index: 0;
     box-sizing: border-box;
     :global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
         position: absolute;
-        transition: left 1s cubic-bezier(0,.7,.7,1), z-index 1s cubic-bezier(0,.7,.7,1);
+        transition:
+                left 1s cubic-bezier(0,.7,.7,1),
+                z-index 1s cubic-bezier(0,.7,.7,1);
         box-sizing: border-box;
     }
+    :global(.rcs-center):after, :global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background-color: #fff;
+        opacity: 0;
+        transition: opacity 1s cubic-bezier(0,.7,.7,1);
+    }
+    :global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
+        opacity: 0.7;
+    }
 }
 
 @mixin arrow{
@@ -79,9 +98,6 @@ $grid-breakpoints: (
         xl: 1200px
 ) !default;
 
-$grid-columns:               12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
-
 @mixin make-col-span($size, $columns: $grid-columns) {
     width: percentage($size / $columns);
 }