react-cm-ui/core/dataDisplay/icon/icon.css

React UI for Healthy Church

.ui.icon{display:inline-flex;height:1rem;margin-right:11px;text-align:center;width:1rem}.ui.icon>svg{height:1rem;transition:color 150ms ease-out,transform 150ms ease-out;width:1rem}.ui.icon .icon-use-path{transition:fill 150ms linear}.ui.icon-align-left{margin-right:11px}.ui.icon-align-right{margin-left:11px;margin-right:0}.ui.icon-clickable{cursor:pointer}.ui.icon-color-alert .icon-use-path{fill:#ee4334}.ui.icon-color-disable .icon-use-path{fill:#dbe0e3}.ui.icon-color-highlight .icon-use-path{fill:#00aeef}.ui.icon-color-primary .icon-use-path{fill:#1c2530}.ui.icon-color-static .icon-use-path{fill:#97a4ab}.ui.icon-color-success .icon-use-path{fill:#54cd86}.ui.icon-color-warning .icon-use-path{fill:#f99e49}.ui.icon-inverse.icon-color-alert .icon-use-path{fill:#ee4334}.ui.icon-inverse.icon-color-disable .icon-use-path{fill:#38424d}.ui.icon-inverse.icon-color-highlight .icon-use-path{fill:#00aeef}.ui.icon-inverse.icon-color-primary .icon-use-path{fill:#fff}.ui.icon-inverse.icon-color-static .icon-use-path{fill:#97a4ab}.ui.icon-inverse.icon-color-success .icon-use-path{fill:#54cd86}.ui.icon-inverse.icon-color-warning .icon-use-path{fill:#f99e49}.ui.icon-compact{margin:0}.ui.icon.icon-disable{color:#dbe0e3;cursor:default}.ui.icon-size-xxlarge,.ui.icon-size-xxlarge svg{height:2rem;width:2rem}.ui.icon-size-xlarge,.ui.icon-size-xlarge svg{height:1.5rem;width:1.5rem}.ui.icon-size-large,.ui.icon-size-large svg{height:1.25rem;width:1.25rem}.ui.icon-size-medium,.ui.icon-size-medium svg{height:1.125rem;width:1.125rem}.ui.icon-size-small,.ui.icon-size-small svg{height:.875rem;width:.875rem}.ui.icon-size-xsmall,.ui.icon-size-xsmall svg{height:.75rem;width:.75rem}.ui.icon-size-xxsmall,.ui.icon-size-xxsmall svg{height:.625rem;width:.625rem}.ui.icon-spin svg{animation:1.5s infinite spin linear;line-height:1}button.ui.icon{background-color:transparent;border:none;outline:0;padding:0}button.ui.icon:focus{box-shadow:0 0 0 1px #00aeef}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}