carbon-custom-elements/es/components/tag/tag.rtl.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%;right:0;left:auto;opacity:.3}20%{width:100%;right:0;left:auto;opacity:1}28%{width:100%;right:auto;left:0}51%{width:0%;right:auto;left:0}58%{width:0%;right:auto;left:0}82%{width:100%;right:auto;left:0}83%{width:100%;right:0;left:auto}96%{width:0%;right:0;left:auto}100%{width:0%;right:0;left:auto;opacity:.3}}@keyframes skeleton{0%{width:0%;right:0;left:auto;opacity:.3}20%{width:100%;right:0;left:auto;opacity:1}28%{width:100%;right:auto;left:0}51%{width:0%;right:auto;left:0}58%{width:0%;right:auto;left:0}82%{width:100%;right:auto;left:0}83%{width:100%;right:0;left:auto}96%{width:0%;right:0;left:auto}100%{width:0%;right:0;left:auto;opacity:.3}}.bx--tag,:host(bx-filter-tag),:host(bx-tag){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;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px);background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#525252);display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;min-height:1.5rem;max-width:100%;min-width:2rem;margin:.25rem;border-radius:.9375rem;word-break:break-word;cursor:default}.bx--tag *,.bx--tag :after,.bx--tag :before,:host(bx-filter-tag) *,:host(bx-filter-tag) :after,:host(bx-filter-tag) :before,:host(bx-tag) *,:host(bx-tag) :after,:host(bx-tag) :before{box-sizing:inherit}.bx--tag::-moz-focus-inner,:host(bx-filter-tag::-moz-focus-inner),:host(bx-tag::-moz-focus-inner){border:0}.bx--tag .bx--tag__close-icon:hover,:host(bx-filter-tag) .bx--tag__close-icon:hover,:host(bx-tag) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.bx--tag:not(:first-child),:host(bx-filter-tag:not(:first-child)),:host(bx-tag:not(:first-child)){margin-right:0}.bx--tag.bx--skeleton,:host(bx-filter-tag.bx--skeleton),:host(bx-tag.bx--skeleton){background-color:var(--cds-ui-03,#e0e0e0);color:var(--cds-text-01,#161616)}.bx--tag.bx--skeleton .bx--tag__close-icon:hover,:host(bx-filter-tag.bx--skeleton) .bx--tag__close-icon:hover,:host(bx-tag.bx--skeleton) .bx--tag__close-icon:hover{background-color:var(--cds-ui-03,#e0e0e0)}.bx--tag--red,:host(bx-filter-tag[type=red]),:host(bx-tag[type=red]){background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#a2191f)}.bx--tag--red .bx--tag__close-icon:hover,:host(bx-filter-tag[type=red]) .bx--tag__close-icon:hover,:host(bx-tag[type=red]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-red,#ffb3b8)}.bx--tag--magenta,:host(bx-filter-tag[type=magenta]),:host(bx-tag[type=magenta]){background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#9f1853)}.bx--tag--magenta .bx--tag__close-icon:hover,:host(bx-filter-tag[type=magenta]) .bx--tag__close-icon:hover,:host(bx-tag[type=magenta]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-magenta,#ffafd2)}.bx--tag--purple,:host(bx-filter-tag[type=purple]),:host(bx-tag[type=purple]){background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#6929c4)}.bx--tag--purple .bx--tag__close-icon:hover,:host(bx-filter-tag[type=purple]) .bx--tag__close-icon:hover,:host(bx-tag[type=purple]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-purple,#d4bbff)}.bx--tag--blue,:host(bx-filter-tag[type=blue]),:host(bx-tag[type=blue]){background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#0043ce)}.bx--tag--blue .bx--tag__close-icon:hover,:host(bx-filter-tag[type=blue]) .bx--tag__close-icon:hover,:host(bx-tag[type=blue]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-blue,#a6c8ff)}.bx--tag--cyan,:host(bx-filter-tag[type=cyan]),:host(bx-tag[type=cyan]){background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#00539a)}.bx--tag--cyan .bx--tag__close-icon:hover,:host(bx-filter-tag[type=cyan]) .bx--tag__close-icon:hover,:host(bx-tag[type=cyan]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-cyan,#82cfff)}.bx--tag--teal,:host(bx-filter-tag[type=teal]),:host(bx-tag[type=teal]){background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#005d5d)}.bx--tag--teal .bx--tag__close-icon:hover,:host(bx-filter-tag[type=teal]) .bx--tag__close-icon:hover,:host(bx-tag[type=teal]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-teal,#3ddbd9)}.bx--tag--green,:host(bx-filter-tag[type=green]),:host(bx-tag[type=green]){background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#0e6027)}.bx--tag--green .bx--tag__close-icon:hover,:host(bx-filter-tag[type=green]) .bx--tag__close-icon:hover,:host(bx-tag[type=green]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-green,#6fdc8c)}.bx--tag--gray,:host(bx-filter-tag[type=gray]),:host(bx-tag[type=gray]){background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#525252)}.bx--tag--gray .bx--tag__close-icon:hover,:host(bx-filter-tag[type=gray]) .bx--tag__close-icon:hover,:host(bx-tag[type=gray]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.bx--tag--cool-gray,:host(bx-filter-tag[type=cool-gray]),:host(bx-tag[type=cool-gray]){background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#4d5358)}.bx--tag--cool-gray .bx--tag__close-icon:hover,:host(bx-filter-tag[type=cool-gray]) .bx--tag__close-icon:hover,:host(bx-tag[type=cool-gray]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-cool-gray,#c1c7cd)}.bx--tag--warm-gray,:host(bx-filter-tag[type=warm-gray]),:host(bx-tag[type=warm-gray]){background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#565151)}.bx--tag--warm-gray .bx--tag__close-icon:hover,:host(bx-filter-tag[type=warm-gray]) .bx--tag__close-icon:hover,:host(bx-tag[type=warm-gray]) .bx--tag__close-icon:hover{background-color:var(--cds-tag-hover-warm-gray,#cac5c4)}.bx--tag--high-contrast{background-color:var(--cds-inverse-02,#393939);color:var(--cds-inverse-01,#fff)}.bx--tag--high-contrast .bx--tag__close-icon:hover{background-color:var(--cds-inverse-hover-ui,#4c4c4c)}.bx--tag--disabled,.bx--tag--filter.bx--tag--disabled,:host(:host(bx-filter-tagbx-filter-tag[disabled])),:host(:host(bx-filter-tagbx-tag[disabled])),:host(bx-filter-tag.bx--tag--disabled),:host(bx-filter-tag[disabled]),:host(bx-tag[disabled]),:host(bx-tag[disabled].bx--tag--filter){background-color:var(--cds-disabled-01,#f4f4f4);color:var(--cds-disabled-02,#c6c6c6)}.bx--tag--disabled .bx--tag__close-icon:hover,.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover,:host(:host(bx-filter-tagbx-filter-tag[disabled])) .bx--tag__close-icon:hover,:host(:host(bx-filter-tagbx-tag[disabled])) .bx--tag__close-icon:hover,:host(bx-filter-tag.bx--tag--disabled) .bx--tag__close-icon:hover,:host(bx-filter-tag[disabled]) .bx--tag__close-icon:hover,:host(bx-tag[disabled]) .bx--tag__close-icon:hover,:host(bx-tag[disabled].bx--tag--filter) .bx--tag__close-icon:hover{background-color:var(--cds-disabled-01,#f4f4f4)}.bx--tag--disabled:hover,.bx--tag--filter.bx--tag--disabled:hover,:host(:host(bx-filter-tagbx-filter-tag[disabled]:hover)),:host(:host(bx-filter-tagbx-tag[disabled]:hover)),:host(bx-filter-tag.bx--tag--disabled:hover),:host(bx-filter-tag[disabled]:hover),:host(bx-tag[disabled].bx--tag--filter:hover),:host(bx-tag[disabled]:hover){cursor:not-allowed}.bx--tag__label{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bx--tag--filter,:host(bx-filter-tag){cursor:pointer;padding-left:.125rem}.bx--tag--filter:focus,.bx--tag--filter:hover,:host(bx-filter-tag:focus),:host(bx-filter-tag:hover){outline:0}.bx--tag__close-icon{flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 .25rem 0 0;padding:.125rem;border:0;background-color:transparent;border-radius:50%;color:currentColor;cursor:pointer}.bx--tag__close-icon svg{fill:currentColor}.bx--tag--disabled .bx--tag__close-icon,:host(bx-filter-tag[disabled]) .bx--tag__close-icon,:host(bx-tag[disabled]) .bx--tag__close-icon{cursor:not-allowed}.bx--tag__close-icon:focus{outline:0;box-shadow:inset 0 0 0 2px var(--cds-focus,#0f62fe);border-radius:50%}.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover,:host(:host(bx-filter-tagbx-filter-tag[disabled])) .bx--tag__close-icon:hover,:host(:host(bx-filter-tagbx-tag[disabled])) .bx--tag__close-icon:hover,:host(bx-filter-tag.bx--tag--disabled) .bx--tag__close-icon:hover,:host(bx-tag[disabled].bx--tag--filter) .bx--tag__close-icon:hover{background-color:transparent}.bx--tag--filter.bx--tag--disabled svg,:host(:host(bx-filter-tagbx-filter-tag[disabled])) svg,:host(:host(bx-filter-tagbx-tag[disabled])) svg,:host(bx-filter-tag.bx--tag--disabled) svg,:host(bx-tag[disabled].bx--tag--filter) svg{fill:var(--cds-disabled-02,#c6c6c6)}.bx--tag.bx--skeleton,:host(bx-filter-tag.bx--skeleton),:host(bx-tag.bx--skeleton){position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:3.75rem;overflow:hidden}.bx--tag.bx--skeleton:active,.bx--tag.bx--skeleton:focus,.bx--tag.bx--skeleton:hover,:host(bx-filter-tag.bx--skeleton:active),:host(bx-filter-tag.bx--skeleton:focus),:host(bx-filter-tag.bx--skeleton:hover),:host(bx-tag.bx--skeleton:active),:host(bx-tag.bx--skeleton:focus),:host(bx-tag.bx--skeleton:hover){border:none;outline:0;cursor:default}.bx--tag.bx--skeleton:before,:host(bx-filter-tag.bx--skeleton):before,:host(bx-tag.bx--skeleton):before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){.bx--tag.bx--skeleton:before,:host(bx-filter-tag.bx--skeleton):before,:host(bx-tag.bx--skeleton):before{-webkit-animation:none;animation:none}}:host(bx-filter-tag){display:none}:host(bx-filter-tag[open]){display:inline-flex}:host(bx-filter-tag[disabled]) .bx--tag__close-icon{cursor:not-allowed}:host(bx-filter-tag[disabled]) .bx--tag__close-icon,:host(bx-filter-tag[disabled]) .bx--tag__close-icon:hover{background-color:transparent}:host(bx-tag.bx--skeleton){position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:3.75rem;overflow:hidden}:host(bx-tag.bx--skeleton:active),:host(bx-tag.bx--skeleton:focus),:host(bx-tag.bx--skeleton:hover){border:none;outline:0;cursor:default}:host(bx-tag.bx--skeleton):before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){:host(bx-tag.bx--skeleton):before{-webkit-animation:none;animation:none}}",
]);