@stokr/components-library/dist/components/LearnMoreCarousel/LearnMoreCarousel.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrapper = exports.Offset = exports.LearnMoreSlide = exports.Container = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const Container = exports.Container = _styledComponents.default.div.withConfig({
  displayName: "LearnMoreCarouselstyles__Container",
  componentId: "sc-auw5a4-0"
})(["overflow:hidden;"]);
const Offset = exports.Offset = _styledComponents.default.div.withConfig({
  displayName: "LearnMoreCarouselstyles__Offset",
  componentId: "sc-auw5a4-1"
})(["position:relative;padding-top:28px;padding-bottom:76px;margin-right:0;", " ", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 32px;\n    padding-bottom: 72px;\n    margin-right: 64px;\n  "]))), _rwd.default.Large(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-top: 64px;\n    padding-bottom: 88px;\n    margin-right: 128px;\n  "]))));
const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
  displayName: "LearnMoreCarouselstyles__Wrapper",
  componentId: "sc-auw5a4-2"
})(["margin-right:0;", " .slick-list{z-index:0;}.slick-arrow{z-index:1;width:32px;height:48px;background-color:", ";transition:background-color 0.2s;", " &.slick-prev,&.slick-next{top:100%;right:50%;margin-top:40px;transform:none;", " ", " &:before{font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:20px;line-height:24px;text-align:center;opacity:1;color:", ";}&:focus,&:hover{background-color:", ";}}&.slick-prev{left:auto;margin-right:-32px;", " &:before{content:'\f3cf';}}&.slick-next{border-left:1px solid ", ";margin-right:-64px;", " &:before{content:'\f3d1';}}}.slick-dots{z-index:1;height:auto;top:100%;margin-left:8px;text-align:center;width:100%;margin-top:28px;", " ", " li{display:inline-block;width:24px;height:24px;margin:0;button{display:block;padding:8px;width:24px;height:24px;&:before{position:relative;content:'';display:block;width:8px;height:8px;border-radius:4px;background-color:#eee;opacity:1;transition:background-color 0.2s;}&:hover{&:before{background-color:#0050ca;}}}&.slick-active{button{&:before{background-color:#ee220d;}}}}}.slick-track{display:flex;align-items:stretch;}.slick-slide{height:auto;& > div{height:100%;}}"], _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-right: -100%;\n  "]))), props => _theme.default.cWarning, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      width: 64px;\n    "]))), _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin-top: 24px;\n      "]))), _rwd.default.Large(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        margin-top: 40px;\n      "]))), props => _theme.default.cWhite, props => _theme.default.cWarningDark, _rwd.default.Large(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin-right: -64px;\n      "]))), props => _theme.default.cWarningDark, _rwd.default.Large(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin-right: -128px;\n      "]))), _rwd.default.Medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-top: 36px;\n      width: 50%;\n      padding-right: 32px;\n      text-align: right;\n      "]))), _rwd.default.Large(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      margin-top: 52px;\n      padding-right: 36px;\n    "]))));
const LearnMoreSlide = exports.LearnMoreSlide = _styledComponents.default.div.withConfig({
  displayName: "LearnMoreCarouselstyles__LearnMoreSlide",
  componentId: "sc-auw5a4-3"
})(["outline:0;height:100%;padding-left:32px;padding-right:32px;", " ", ""], _rwd.default.Medium(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    padding-left: 32px;\n    padding-right: 0;\n  "]))), _rwd.default.Large(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-left: 64px;\n    padding-right: 0;\n  "]))));

// Before Merge
// VD had white #fff dots with: box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);