react-scroll-shadow
Version:
Pure CSS shadow to indicate more content in scrollable area
35 lines (34 loc) • 4.18 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = require("styled-components");
exports.ScrollableWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex: 1 1 auto;\n width: 100%;\n position: relative;\n // Next line is important hack/fix for Firefox\n // https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n min-height:0;\n \n &::before{\n content: '';\n position: absolute;\n top:0;\n left:0;\n right:0;\n height: ", "px;\n background: ", ";\n z-index: 10;\n }\n &::after{\n content: '';\n position: absolute;\n bottom:0;\n left:0;\n right:0;\n height: ", "px;\n background: ", ";\n z-index: 10;\n }\n"], ["\n display: flex;\n flex: 1 1 auto;\n width: 100%;\n position: relative;\n // Next line is important hack/fix for Firefox\n // https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n min-height:0;\n \n &::before{\n content: '';\n position: absolute;\n top:0;\n left:0;\n right:0;\n height: ", "px;\n background: ", ";\n z-index: 10;\n }\n &::after{\n content: '';\n position: absolute;\n bottom:0;\n left:0;\n right:0;\n height: ", "px;\n background: ", ";\n z-index: 10;\n }\n"])), function (_a) {
var size = _a.size;
return size;
}, function (_a) {
var topShadowActiveColor = _a.topShadowActiveColor;
return topShadowActiveColor;
}, function (_a) {
var size = _a.size;
return size;
}, function (_a) {
var bottomShadowActiveColor = _a.bottomShadowActiveColor;
return bottomShadowActiveColor;
});
exports.ScrollableContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1 1 auto;\n overflow-y: auto;\n overflow-x: hidden;\n \n display: flex;\n flex-direction: column; \n \n &::before{\n content: '';\n height: ", "px;\n width: 100%;\n background: ", ";\n flex-shrink: 0;\n \n z-index: 11; \n // Next line is important hack/fix for Safari\n // https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome\n transform: translate3d(0,0,0); \n }\n &::after{\n content: '';\n height: ", "px;;\n width: 100%;\n background: ", ";\n flex-grow: 1;\n flex-shrink: 0;\n \n z-index: 11; \n // Next line is important hack/fix for Safari\n // https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome\n transform: translate3d(0,0,0);\n }\n"], ["\n flex: 1 1 auto;\n overflow-y: auto;\n overflow-x: hidden;\n \n display: flex;\n flex-direction: column; \n \n &::before{\n content: '';\n height: ", "px;\n width: 100%;\n background: ", ";\n flex-shrink: 0;\n \n z-index: 11; \n // Next line is important hack/fix for Safari\n // https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome\n transform: translate3d(0,0,0); \n }\n &::after{\n content: '';\n height: ", "px;;\n width: 100%;\n background: ", ";\n flex-grow: 1;\n flex-shrink: 0;\n \n z-index: 11; \n // Next line is important hack/fix for Safari\n // https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome\n transform: translate3d(0,0,0);\n }\n"])), function (_a) {
var size = _a.size;
return size;
}, function (_a) {
var topShadowInactiveColor = _a.topShadowInactiveColor;
return topShadowInactiveColor;
}, function (_a) {
var size = _a.size;
return size;
}, function (_a) {
var bottomShadowInactiveColor = _a.bottomShadowInactiveColor;
return bottomShadowInactiveColor;
});
var templateObject_1, templateObject_2;