@helpscout/hsds-react/components/Scrollable/Scrollable.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.FaderUI = exports.ContentUI = exports.ScrollableUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var config = {
  borderRadius: '4px'
};
exports.config = config;
var ScrollableUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Scrollablecss__ScrollableUI",
  componentId: "sc-15mu3vn-0"
})(["box-sizing:border-box;display:flex;max-height:100%;height:", ";min-height:0;position:relative;width:100%;"], function (props) {
  return props.fadeSides ? '100%' : 'auto';
});
exports.ScrollableUI = ScrollableUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Scrollablecss__ContentUI",
  componentId: "sc-15mu3vn-1"
})(["box-sizing:border-box;max-height:100%;min-height:0;height:", ";overflow-x:", ";overflow-y:auto;overscroll-behavior-x:", ";overscroll-behavior-y:", ";position:relative;width:100%;will-change:scroll-position;"], function (props) {
  return props.fadeSides ? '100%' : 'auto';
}, function (props) {
  return props.fadeSides ? 'auto' : 'hidden';
}, function (props) {
  return props.isScrollLocked && props.fadeSides ? 'contain !important' : 'auto !important';
}, function (props) {
  return props.isScrollLocked && props.fade ? 'contain !important' : 'auto !important';
});
exports.ContentUI = ContentUI;
var FaderUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Scrollablecss__FaderUI",
  componentId: "sc-15mu3vn-2"
})(["color:white;height:", ";width:", ";position:absolute;transform:scaleY(0);z-index:1;pointer-events:none;&.is-rounded{border-top-left-radius:", ";border-top-right-radius:", ";}&.is-top{left:0;right:0;top:0;background:linear-gradient( to bottom,currentColor,rgba(255,255,255,0) );transform-origin:top;}&.is-bottom{left:0;right:0;bottom:0;background:linear-gradient(to top,currentColor,rgba(255,255,255,0));transform-origin:bottom;}&.is-left{top:0;bottom:0;left:0;background:linear-gradient(to right,currentColor,rgba(255,255,255,0));transform-origin:left;}&.is-right{top:0;bottom:0;left:calc(100% - 28px);background:linear-gradient(to left,currentColor,rgba(255,255,255,0));transform-origin:right;}"], function (props) {
  return props.fadeSides ? '100%' : '28px';
}, function (props) {
  return props.fadeSides ? '28px' : 'auto';
}, config.borderRadius, config.borderRadius);
exports.FaderUI = FaderUI;