jiro-ui
Version:
A Mithril.js UI library based from construct-ui
69 lines (68 loc) • 2.07 kB
CSS
.cui-tag {
font-size: 14px;
padding: 2px 8px;
margin-right: 8px;
color: #607d8b;
background: #f1f3f5;
border: solid 1px #d4dce0;
position: relative;
display: inline-flex;
vertical-align: middle;
align-items: center;
border-radius: 3px; }
.cui-tag.cui-tag-removable .cui-icon {
margin-left: 8px; }
.cui-tag.cui-rounded {
border-radius: 30px; }
.cui-tag.cui-primary .cui-icon, .cui-tag.cui-positive .cui-icon, .cui-tag.cui-negative .cui-icon, .cui-tag.cui-warning .cui-icon {
color: #eceff1; }
.cui-tag.cui-primary .cui-icon:hover, .cui-tag.cui-positive .cui-icon:hover, .cui-tag.cui-negative .cui-icon:hover, .cui-tag.cui-warning .cui-icon:hover {
color: white; }
.cui-tag.cui-xs,
.cui-xs .cui-tag {
font-size: 12px;
padding: 1px 6px;
margin-right: 6px; }
.cui-tag.cui-xs.cui-tag-removable .cui-icon,
.cui-xs .cui-tag.cui-tag-removable .cui-icon {
margin-left: 6px; }
.cui-tag.cui-sm,
.cui-sm .cui-tag {
font-size: 13px;
padding: 1px 7px;
margin-right: 7px; }
.cui-tag.cui-sm.cui-tag-removable .cui-icon,
.cui-sm .cui-tag.cui-tag-removable .cui-icon {
margin-left: 7px; }
.cui-tag.cui-lg,
.cui-lg .cui-tag {
font-size: 16px;
padding: 2px 9px;
margin-right: 9px; }
.cui-tag.cui-lg.cui-tag-removable .cui-icon,
.cui-lg .cui-tag.cui-tag-removable .cui-icon {
margin-left: 9px; }
.cui-tag.cui-xl,
.cui-xl .cui-tag {
font-size: 18px;
padding: 2px 10px;
margin-right: 10px; }
.cui-tag.cui-xl.cui-tag-removable .cui-icon,
.cui-xl .cui-tag.cui-tag-removable .cui-icon {
margin-left: 10px; }
.cui-tag.cui-primary {
color: #ffffff;
background: #5c6bc0;
border: solid 1px #4a569a; }
.cui-tag.cui-positive {
color: #ffffff;
background: #4caf50;
border: solid 1px #3d8c40; }
.cui-tag.cui-negative {
color: #ffffff;
background: #f44336;
border: solid 1px #c3362b; }
.cui-tag.cui-warning {
color: #ffffff;
background: #f57c00;
border: solid 1px #c46300; }