carbon-custom-elements/es/components/accordion/accordion.css.js

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

/**
 * @license
 *
 * Copyright IBM Corp. 2019, 2020
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { css } from 'lit-element';
export default css([
  "a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}input[type=text]::-ms-clear{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}sup{vertical-align:super}sub{vertical-align:sub}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:''}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}button{margin:0}html{font-size:100%}body{font-weight:400;font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:'IBM Plex Mono',Menlo,'DejaVu Sans Mono','Bitstream Vera Sans Mono',Courier,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-productive-heading-06-font-size,2.625rem);font-weight:var(--cds-productive-heading-06-font-weight,300);line-height:var(--cds-productive-heading-06-line-height,3.125rem);letter-spacing:var(--cds-productive-heading-06-letter-spacing,0)}h2{font-size:var(--cds-productive-heading-05-font-size,2rem);font-weight:var(--cds-productive-heading-05-font-weight,400);line-height:var(--cds-productive-heading-05-line-height,2.5rem);letter-spacing:var(--cds-productive-heading-05-letter-spacing,0)}h3{font-size:var(--cds-productive-heading-04-font-size,1.75rem);font-weight:var(--cds-productive-heading-04-font-weight,400);line-height:var(--cds-productive-heading-04-line-height,2.25rem);letter-spacing:var(--cds-productive-heading-04-letter-spacing,0)}h4{font-size:var(--cds-productive-heading-03-font-size,1.25rem);font-weight:var(--cds-productive-heading-03-font-weight,400);line-height:var(--cds-productive-heading-03-line-height,1.75rem);letter-spacing:var(--cds-productive-heading-03-letter-spacing,0)}h5{font-size:var(--cds-productive-heading-02-font-size,1rem);font-weight:var(--cds-productive-heading-02-font-weight,600);line-height:var(--cds-productive-heading-02-line-height,1.375rem);letter-spacing:var(--cds-productive-heading-02-letter-spacing,0)}h6{font-size:var(--cds-productive-heading-01-font-size,.875rem);font-weight:var(--cds-productive-heading-01-font-weight,600);line-height:var(--cds-productive-heading-01-line-height,1.125rem);letter-spacing:var(--cds-productive-heading-01-letter-spacing,.16px)}p{font-size:var(--cds-body-long-02-font-size,1rem);font-weight:var(--cds-body-long-02-font-weight,400);line-height:var(--cds-body-long-02-line-height,1.5rem);letter-spacing:var(--cds-body-long-02-letter-spacing,0)}a{color:#0062ff}em{font-style:italic}@-webkit-keyframes skeleton{0%{width:0%;left:0;right:auto;opacity:.3}20%{width:100%;left:0;right:auto;opacity:1}28%{width:100%;left:auto;right:0}51%{width:0%;left:auto;right:0}58%{width:0%;left:auto;right:0}82%{width:100%;left:auto;right:0}83%{width:100%;left:0;right:auto}96%{width:0%;left:0;right:auto}100%{width:0%;left:0;right:auto;opacity:.3}}@keyframes skeleton{0%{width:0%;left:0;right:auto;opacity:.3}20%{width:100%;left:0;right:auto;opacity:1}28%{width:100%;left:auto;right:0}51%{width:0%;left:auto;right:0}58%{width:0%;left:auto;right:0}82%{width:100%;left:auto;right:0}83%{width:100%;left:0;right:auto}96%{width:0%;left:0;right:auto}100%{width:0%;left:0;right:auto;opacity:.3}}.bx--text-truncate--end{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--text-truncate--front{width:100%;display:inline-block;direction:rtl;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@-webkit-keyframes collapse-accordion{0%{height:100%;visibility:inherit;opacity:1}100%{height:0;visibility:hidden;opacity:0}}@keyframes collapse-accordion{0%{height:100%;visibility:inherit;opacity:1}100%{height:0;visibility:hidden;opacity:0}}@-webkit-keyframes expand-accordion{0%{height:0;visibility:hidden;opacity:0}100%{height:100%;visibility:inherit;opacity:1}}@keyframes expand-accordion{0%{height:0;visibility:hidden;opacity:0}100%{height:100%;visibility:inherit;opacity:1}}.bx--accordion,:host(bx-accordion){box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;width:100%}.bx--accordion *,.bx--accordion ::after,.bx--accordion ::before,:host(bx-accordion) *,:host(bx-accordion) ::after,:host(bx-accordion) ::before{box-sizing:inherit}.bx--accordion__item,:host(bx-accordion-item){transition:all 110ms cubic-bezier(.2,0,.38,.9);border-top:1px solid var(--cds-ui-03,#e0e0e0);overflow:visible}.bx--accordion__item:last-child,:host(bx-accordion-item:last-child){border-bottom:1px solid var(--cds-ui-03,#e0e0e0)}.bx--accordion__heading{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;display:inline-block;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;cursor:pointer;width:100%;color:var(--cds-text-01,#161616);display:flex;align-items:flex-start;justify-content:flex-start;cursor:pointer;padding:.625rem 0;flex-direction:row-reverse;position:relative;min-height:2.5rem;width:100%;margin:0;transition:background-color cubic-bezier(.2,0,.38,.9) 110ms}.bx--accordion__heading *,.bx--accordion__heading ::after,.bx--accordion__heading ::before{box-sizing:inherit}.bx--accordion__heading::-moz-focus-inner{border:0}.bx--accordion__heading:focus::before,.bx--accordion__heading:hover::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:calc(100% + 2px)}.bx--accordion__heading:hover::before{background-color:var(--cds-hover-ui,#e5e5e5)}.bx--accordion__heading:focus{outline:0}.bx--accordion__heading:focus::before{border:2px solid var(--cds-focus,#0f62fe);box-sizing:border-box}.bx--accordion__arrow{outline:2px solid transparent;outline-offset:-2px;flex:0 0 1rem;width:1rem;height:1rem;margin:2px 1rem 0 0;fill:var(--cds-ui-05,#161616);-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:all 110ms cubic-bezier(.2,0,.38,.9)}.bx--accordion__title{font-size:var(--cds-body-long-01-font-size,.875rem);font-weight:var(--cds-body-long-01-font-weight,400);line-height:var(--cds-body-long-01-line-height,1.25rem);letter-spacing:var(--cds-body-long-01-letter-spacing,.16px);margin:0 0 0 1rem;width:100%;text-align:left;z-index:1}.bx--accordion__content{display:none;transition:padding cubic-bezier(.2,0,.38,.9) 110ms;padding-left:1rem;padding-right:1rem}@media (min-width:480px){.bx--accordion__content{padding-right:3rem}}@media (min-width:640px){.bx--accordion__content{padding-right:25%}}.bx--accordion__content>p{font-size:var(--cds-body-long-01-font-size,.875rem);font-weight:var(--cds-body-long-01-font-weight,400);line-height:var(--cds-body-long-01-line-height,1.25rem);letter-spacing:var(--cds-body-long-01-letter-spacing,.16px)}.bx--accordion--start .bx--accordion__heading{flex-direction:row}.bx--accordion--start .bx--accordion__arrow{margin:2px 0 0 .5rem}.bx--accordion--start .bx--accordion__content{margin-left:1.5rem}.bx--accordion__item--collapsing .bx--accordion__content,.bx--accordion__item--expanding .bx--accordion__content{display:block}.bx--accordion__item--collapsing .bx--accordion__content{-webkit-animation:110ms cubic-bezier(.2,0,.38,.9) collapse-accordion;animation:110ms cubic-bezier(.2,0,.38,.9) collapse-accordion}.bx--accordion__item--expanding .bx--accordion__content{-webkit-animation:110ms cubic-bezier(.2,0,.38,.9) expand-accordion;animation:110ms cubic-bezier(.2,0,.38,.9) expand-accordion}.bx--accordion__item--active,:host(bx-accordion-item[open]){overflow:visible}.bx--accordion__item--active .bx--accordion__content,:host(bx-accordion-item[open]) .bx--accordion__content{display:block;padding-bottom:1.5rem;padding-top:var(--cds-spacing-03,.5rem);transition:padding-top cubic-bezier(0,0,.38,.9) 110ms,padding-bottom cubic-bezier(0,0,.38,.9) 110ms}.bx--accordion__item--active .bx--accordion__arrow,:host(bx-accordion-item[open]) .bx--accordion__arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);fill:var(--cds-ui-05,#161616)}.bx--accordion.bx--skeleton .bx--accordion__button,.bx--accordion.bx--skeleton .bx--accordion__heading,:host(bx-accordion.bx--skeleton) .bx--accordion__button,:host(bx-accordion.bx--skeleton) .bx--accordion__heading{cursor:default}.bx--accordion.bx--skeleton .bx--accordion__arrow,:host(bx-accordion.bx--skeleton) .bx--accordion__arrow{pointer-events:none;fill:var(--cds-ui-05,#161616);cursor:default}.bx--accordion.bx--skeleton .bx--accordion__arrow:active,.bx--accordion.bx--skeleton .bx--accordion__arrow:focus,.bx--accordion.bx--skeleton .bx--accordion__arrow:hover,:host(bx-accordion.bx--skeleton) .bx--accordion__arrow:active,:host(bx-accordion.bx--skeleton) .bx--accordion__arrow:focus,:host(bx-accordion.bx--skeleton) .bx--accordion__arrow:hover{border:none;outline:0;cursor:default}.bx--accordion.bx--skeleton .bx--accordion__heading:hover::before,:host(bx-accordion.bx--skeleton) .bx--accordion__heading:hover::before{background-color:transparent}.bx--accordion--end.bx--skeleton .bx--accordion__arrow{margin-left:var(--cds-spacing-05,1rem)}.bx--skeleton .bx--accordion__heading:focus .bx--accordion__arrow{border:none;outline:0;cursor:default}.bx--accordion__title.bx--skeleton__text{margin-bottom:0}:host(bx-accordion-item){display:block;outline:0}:host(bx-accordion-item) .bx--accordion__heading{padding-top:calc((var(--cds-container-03,2.5rem) - 1.25rem)/ 2);padding-bottom:calc((var(--cds-container-03,2.5rem) - 1.25rem)/ 2);min-height:var(--cds-container-03,2.5rem)}:host(bx-accordion-item[open]) .bx--accordion__content{padding-right:1rem}:host(bx-accordion-item[open]) .bx-ce--accordion__content--sm{padding-right:3rem}:host(bx-accordion-item[open]) .bx-ce--accordion__content--md{padding-right:25%}",
]);