jiro-ui
Version:
A Mithril.js UI library based from construct-ui
83 lines (82 loc) • 2.15 kB
CSS
.cui-control {
min-height: 16px;
line-height: 16px;
font-size: 14px;
padding-left: 24px;
color: #37474f;
position: relative;
display: inline-block;
vertical-align: top;
user-select: none;
cursor: pointer; }
.cui-control .cui-control-indicator {
height: 16px;
width: 16px; }
.cui-control input {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0; }
.cui-control .cui-control-indicator {
background: white;
position: absolute;
top: 0;
left: 0;
margin: 0;
border-radius: 2px;
transition: background 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
.cui-control input:focus ~ .cui-control-indicator {
outline: #64b5f6 auto 2px; }
.cui-control:hover .cui-control-indicator,
.cui-control:focus .cui-control-indicator {
background: #f6f7f8;
border: solid 1px #b0bec5; }
.cui-control:active .cui-control-indicator {
background: #eceff1;
border: solid 1px #b0bec5; }
.cui-control.cui-disabled .cui-control-indicator {
background: white;
user-select: none;
cursor: not-allowed;
opacity: 0.5; }
.cui-control.cui-xs {
min-height: 12px;
line-height: 12px;
font-size: 12px;
padding-left: 18px; }
.cui-control.cui-xs .cui-control-indicator {
height: 12px;
width: 12px; }
.cui-control.cui-sm {
min-height: 14px;
line-height: 14px;
font-size: 13px;
padding-left: 21px; }
.cui-control.cui-sm .cui-control-indicator {
height: 14px;
width: 14px; }
.cui-control.cui-lg {
min-height: 18px;
line-height: 18px;
font-size: 16px;
padding-left: 27px; }
.cui-control.cui-lg .cui-control-indicator {
height: 18px;
width: 18px; }
.cui-control.cui-xl {
min-height: 20px;
line-height: 20px;
font-size: 18px;
padding-left: 30px; }
.cui-control.cui-xl .cui-control-indicator {
height: 20px;
width: 20px; }
.cui-control.cui-primary {
color: #5c6bc0; }
.cui-control.cui-positive {
color: #4caf50; }
.cui-control.cui-negative {
color: #f44336; }
.cui-control.cui-warning {
color: #f57c00; }