carbon-custom-elements/es/components/tile/tile.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-size:100%;font:inherit;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:'';content:none}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--tile,:host(bx-expandable-tile),:host(bx-tile){display:block;min-width:8rem;min-height:4rem;background-color:var(--cds-ui-01,#f4f4f4);position:relative;padding:1rem;outline:2px solid transparent;outline-offset:-2px}.bx--tile:focus,:host(bx-expandable-tile:focus),:host(bx-tile:focus){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.bx--tile--light,:host(bx-expandable-tile[color-scheme=light]),:host(bx-tile[color-scheme=light]){background-color:var(--cds-ui-02,#fff)}.bx--tile--clickable,.bx--tile--expandable,.bx--tile--selectable,:host(bx-expandable-tile){transition:150ms cubic-bezier(.2,0,.38,.9);cursor:pointer}.bx--tile--clickable:hover,.bx--tile--expandable:hover,.bx--tile--selectable:hover,:host(bx-expandable-tile:hover){background:var(--cds-hover-ui,#e5e5e5)}.bx--tile--clickable:focus .bx--tile__checkmark,.bx--tile--clickable:hover .bx--tile__checkmark,.bx--tile--expandable:focus .bx--tile__checkmark,.bx--tile--expandable:hover .bx--tile__checkmark,:host(bx-expandable-tile:focus) .bx--tile__checkmark,:host(bx-expandable-tile:hover) .bx--tile__checkmark{opacity:1}.bx--tile--clickable:focus,.bx--tile--expandable:focus,:host(bx-expandable-tile:focus){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.bx--tile--expandable::-moz-focus-inner,:host(bx-expandable-tile::-moz-focus-inner){border:0}.bx--tile--clickable{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);color:var(--cds-text-01,#161616);text-decoration:none}.bx--tile--clickable *,.bx--tile--clickable :after,.bx--tile--clickable :before{box-sizing:inherit}.bx--tile--selectable{padding-right:3rem}.bx--tile__checkmark,.bx--tile__chevron{position:absolute;transition:110ms cubic-bezier(.2,0,.38,.9);border:none;background:0 0}.bx--tile__checkmark{height:1rem;top:1rem;right:1rem;opacity:0}.bx--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-02,#525252)}.bx--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.bx--tile__chevron{position:absolute;bottom:.5rem;right:.5rem;height:1rem}.bx--tile__chevron svg{-webkit-transform-origin:center;transform-origin:center;transition:110ms cubic-bezier(.2,0,.38,.9);fill:var(--cds-ui-05,#161616)}.bx--tile__chevron:hover{cursor:pointer}.bx--tile__chevron:focus{outline:0}.bx--tile--expandable,:host(bx-expandable-tile){width:100%;color:inherit;font-size:inherit;text-align:left;border:0}.bx--tile--expandable,:host(bx-expandable-tile){overflow:hidden;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}.bx--tile-content__above-the-fold,:host(bx-expandable-tile) ::slotted(bx-tile-above-the-fold-content){display:block}.bx--tile-content__below-the-fold,:host(bx-expandable-tile) ::slotted(bx-tile-below-the-fold-content){display:block;visibility:hidden;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9)}.bx--tile--is-expanded,:host(bx-expandable-tile[expanded]){overflow:visible;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.bx--tile--is-expanded .bx--tile__chevron svg,:host(bx-expandable-tile[expanded]) .bx--tile__chevron svg{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.bx--tile--is-expanded .bx--tile-content__below-the-fold,.bx--tile--is-expanded :host(bx-expandable-tile) ::slotted(bx-tile-below-the-fold-content),:host(bx-expandable-tile) .bx--tile--is-expanded ::slotted(bx-tile-below-the-fold-content),:host(bx-expandable-tile[expanded]) .bx--tile-content__below-the-fold,:host(bx-expandable-tile[expanded]) ::slotted(bx-tile-below-the-fold-content){visibility:inherit;opacity:1;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9)}.bx--tile--is-selected{outline:1px solid var(--cds-ui-05,#161616);outline-offset:-1px}.bx--tile--is-selected .bx--tile__checkmark{opacity:1}.bx--tile-input:checked+.bx--tile>.bx--tile__checkmark svg,.bx--tile-input:checked+:host(bx-expandable-tile)>.bx--tile__checkmark svg,.bx--tile-input:checked+:host(bx-tile)>.bx--tile__checkmark svg{fill:var(--cds-ui-05,#161616)}.bx--tile-content{width:100%;height:100%}.bx--tile-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:inherit;white-space:nowrap}.bx--link{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);color:var(--cds-link-01,#0f62fe);text-decoration:none;outline:0;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.bx--link *,.bx--link :after,.bx--link :before{box-sizing:inherit}.bx--link:hover{color:var(--cds-hover-primary-text,#0043ce);text-decoration:underline}.bx--link:active,.bx--link:active:visited,.bx--link:active:visited:hover{color:var(--cds-text-01,#161616);text-decoration:underline}.bx--link:focus{outline:1px solid var(--cds-focus,#0f62fe)}.bx--link:not([href]):not(button){color:var(--cds-disabled-02,#c6c6c6);cursor:not-allowed;pointer-events:none;touch-action:none}.bx--link:visited{color:var(--cds-link-01,#0f62fe)}.bx--link:visited:hover{color:var(--cds-hover-primary-text,#0043ce)}.bx--link--disabled{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);display:inline;color:var(--cds-disabled-02,#c6c6c6);font-weight:400;cursor:not-allowed}.bx--link--disabled *,.bx--link--disabled :after,.bx--link--disabled :before{box-sizing:inherit}.bx--link.bx--link--visited:visited{color:var(--cds-visited-link,#8a3ffc)}.bx--link.bx--link--visited:visited:hover{color:var(--cds-hover-primary-text,#0043ce)}.bx--link.bx--link--inline{text-decoration:underline}.bx--link.bx--link--inline:hover{color:var(--cds-hover-primary-text,#0043ce)}.bx--link.bx--link--inline:focus{text-decoration:none}.bx--link.bx--link--inline:visited{text-decoration:none}.bx--link--disabled.bx--link--inline{text-decoration:underline}:host(bx-clickable-tile){display:block;display:content;outline:0}:host(bx-clickable-tile) .bx--tile,:host(bx-clickable-tile) :host(bx-expandable-tile),:host(bx-clickable-tile) :host(bx-tile){padding:1rem;outline:2px solid transparent}:host(bx-clickable-tile) .bx--tile--clickable{transition:150ms cubic-bezier(.2,0,.38,.9)}:host(bx-clickable-tile) .bx--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(bx-radio-tile){display:block;display:content;outline:0}:host(bx-selectable-tile){display:block;display:content;outline:0}:host(bx-radio-tile) .bx--tile-input:checked~.bx--tile--selectable .bx--tile__checkmark,:host(bx-selectable-tile) .bx--tile-input:checked~.bx--tile--selectable .bx--tile__checkmark{opacity:1}:host(bx-expandable-tile) .bx-ce--expandable-tile--below-the-fold-content{max-height:0;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}:host(bx-expandable-tile[expanded]) ::slotted(bx-tile-below-the-fold-content){opacity:1;transition:110ms cubic-bezier(.2,0,.38,.9)}",
]);