smart-webcomponents/source/styles/components/smart.chip.css

Web Components & Custom Elements for Professional Web Applications

.smart-chip .smart-avatar,.smart-chip .smart-value{text-overflow:ellipsis;vertical-align:middle;display:none}.smart-chip .smart-avatar,.smart-chip .smart-close-button{width:var(--smart-chip-default-height);height:var(--smart-chip-default-height);vertical-align:middle}.smart-chip .smart-value,.smart-chip.smart-container,smart-chip .smart-container{white-space:nowrap}smart-chip:focus,smart-chip:hover{box-shadow:var(--smart-elevation-2);outline:0}smart-chip.smart-element{display:inline-block}smart-chip[disabled]:hover{box-shadow:none}.smart-chip{min-height:var(--smart-chip-default-height);min-width:var(--smart-chip-default-height);border-radius:calc(var(--smart-chip-default-height)/ 2);box-sizing:border-box;background-color:var(--smart-primary);color:var(--smart-primary-color);position:relative;margin:2px}.smart-chip .smart-avatar{line-height:var(--smart-chip-default-height);border-radius:50%;font-size:20px;box-sizing:border-box;text-align:center;overflow:hidden}.smart-chip .smart-value{line-height:var(--smart-chip-default-height);padding:0 15px;overflow:hidden;margin:0;cursor:default}.smart-chip .smart-close-button{display:none;position:relative}.smart-chip .smart-close-button:after,.smart-chip[avatar] .smart-avatar,.smart-chip[close-button] .smart-close-button,.smart-chip[value] .smart-value{display:inline-block}.smart-chip .smart-close-button:after{font-family:var(--smart-font-family-icon);content:var(--smart-icon-close);color:inherit;line-height:var(--smart-chip-default-height);width:100%;text-align:center}.smart-chip .smart-close-button:hover:after{color:var(--smart-primary-color);cursor:pointer}.smart-chip[avatar] .smart-avatar img{width:100%;height:100%;border-radius:50%}.smart-chip[avatar] .smart-value{width:calc(100% - var(--smart-chip-default-height));padding-left:5px}.smart-chip[close-button] .smart-value{width:calc(100% - var(--smart-chip-default-height));padding-right:5px}.smart-chip[avatar][close-button] .smart-value{width:calc(100% - 2 * var(--smart-chip-default-height))}smart-chip[right-to-left]>.smart-container{direction:rtl}