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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.SubheadingUI = exports.HeadingUI = exports.BadgeUI = exports.TitleContentUI = exports.TitleUI = exports.SectionUI = exports.BodyUI = exports.AccordionUI = void 0;

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

var _Badge = _interopRequireDefault(require("../Badge"));

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Text = _interopRequireDefault(require("../Text"));

var _breakpoints = require("../../styles/mixins/breakpoints.css");

var _color = require("../../styles/utilities/color");

var _Page = require("../Page/Page.config");

var _Accordion = require("./Accordion.Title");

var _font = require("../../styles/utilities/font");

var AccordionUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Accordioncss__AccordionUI",
  componentId: "s0h5mo-0"
})(["border:1px solid ", ";border-radius:4px;overflow:hidden;color:", ";.c-Accordion__Section{border-bottom:1px solid ", ";&:last-child{border-bottom-width:0;}}&.is-seamless{border:none;border-radius:none;}&.is-page{margin-left:-50px;margin-right:-50px;", ";}&.is-sortable{.c-Accordion__Section{border-bottom:none;}.c-Accordion__Section__Title{user-select:none;&:hover .drag-handle{display:inline-block;}}.c-SortableItem{border-bottom:1px solid ", ";&:last-child{border-bottom-width:0;}}&.is-sorting{pointer-events:none;user-select:none;.c-Accordion__Section{user-select:none;}}.c-Accordion__Section__Title.is-sortable{position:relative;.drag-handle{display:none;pointer-events:all;}&:hover .drag-handle{display:inline-block;}}}"], (0, _color.getColor)('grey.400'), (0, _color.getColor)('charcoal.500'), (0, _color.getColor)('grey.400'), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widescreen, "\n      margin-left: -100px;\n      margin-right: -100px;\n    "), (0, _color.getColor)('grey.400'));
exports.AccordionUI = AccordionUI;
var BodyUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Accordioncss__BodyUI",
  componentId: "s0h5mo-1"
})(["display:block;overflow:hidden;padding:0px 20px 20px 20px;.is-closed &{display:none;}&.is-md{padding:0 20px 20px 20px;}&.is-sm{padding:0 20px 16px 20px;}&.is-xs{padding:0 20px 14px 20px;}&.is-seamless{padding-left:0;padding-right:0;}&.is-page{padding-left:50px;padding-right:50px;", ";}"], (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widescreen, "\n      padding-left: 100px;\n      padding-right: 100px;\n    "));
exports.BodyUI = BodyUI;
var SectionUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Accordioncss__SectionUI",
  componentId: "s0h5mo-2"
})(["background:white;position:relative;&.is-link:hover,&.is-link:focus{background-color:", ";}&.is-info,&.is-info:hover,&.is-info:focus{background:", ";.is-highlighted{color:", ";}}&.is-error,&.is-error:hover,&.is-error:focus{background:", ";.is-highlighted{color:", ";}}&:hover,&:focus{.", "{color:", ";}.c-Accordion__Heading{color:#253642;}.c-Accordion__Subheading{color:#556575;}}"], (0, _color.getColor)('grey.200'), (0, _color.getColor)('blue.100'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('red.100'), (0, _color.getColor)('red.500'), _Accordion.classNameStrings.iconCaretClassName, (0, _color.getColor)('text.slightlyMuted'));
exports.SectionUI = SectionUI;
var TitleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Accordioncss__TitleUI",
  componentId: "s0h5mo-3"
})(["", ";color:currentColor;cursor:pointer;display:block;padding:18px 20px;position:relative;text-decoration:none;font-weight:500;&:focus{outline:none;}&.is-open{background-color:transparent;&:hover,&:active,&:focus{background-color:transparent;}&.is-link{border-bottom:none;}&.is-seamless{border-bottom-color:transparent;}}&.is-link{outline:none;text-decoration:none;color:currentColor;&:hover{.", "{color:", ";}}}&.is-xl{", ";padding:25px 100px;}&.is-md{padding:14px 20px;}&.is-sm{padding:8px 20px;}&.is-xs{padding:6px 20px;}&.is-compact{padding-bottom:17px;padding-top:17px;.c-Accordion__Heading{margin-bottom:0;}}&.is-seamless{padding-left:0;padding-right:0;}&.is-page{padding-left:50px;padding-right:50px;", ";}&.is-sortable{cursor:pointer;overflow:hidden;user-select:none;&.is-seamless .drag-handle{left:-15px;}&.is-page .drag-handle{left:14px;", ";}.drag-handle{color:#405261;cursor:move;display:inline-block;pointer-events:none;position:absolute;left:1px;top:50%;transform:translateY(-50%);}}"], (0, _font.setFontSize)(14), _Accordion.classNameStrings.iconCaretClassName, (0, _color.getColor)('text.slightlyMuted'), (0, _font.setFontSize)(13), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widescreen, "\n    padding-left: 100px;\n    padding-right: 100px;\n  "), (0, _breakpoints.breakpoint)(_Page.pageBreakpointsConfig.breakpoint.widescreen, "left: 39px;"));
exports.TitleUI = TitleUI;
var TitleContentUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
  displayName: "Accordioncss__TitleContentUI",
  componentId: "s0h5mo-4"
})(["pointer-events:none;"]);
exports.TitleContentUI = TitleContentUI;
var BadgeUI = (0, _styledComponents.default)(_Badge.default).withConfig({
  displayName: "Accordioncss__BadgeUI",
  componentId: "s0h5mo-5"
})(["padding-bottom:2px;padding-top:2px;"]);
exports.BadgeUI = BadgeUI;
var HeadingUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Accordioncss__HeadingUI",
  componentId: "s0h5mo-6"
})(["color:#314351;line-height:18px;margin-bottom:6px;"]);
exports.HeadingUI = HeadingUI;
var SubheadingUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Accordioncss__SubheadingUI",
  componentId: "s0h5mo-7"
})(["color:#748494;line-height:17px;"]);
exports.SubheadingUI = SubheadingUI;