Files
mochi/css/IconButton.less
germboy 904e5892c1 ENYO-1498: Restyle IconButtons
Enyo-DCO-1.1-Signed-off-by: Jeremy Thomas <jeremy.thomas@palm.com>
2012-12-10 17:51:03 -05:00

53 lines
1.2 KiB
Plaintext

/* Icon.css & IconButton.css */
.mochi-icon {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: 0 0px;
}
.mochi-icon-button-item {
display: inline-block;
margin: 2px;
padding: 1px 0px;
width: 34px;
height: 34px;
border-width: 0px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
}
.mochi-icon-button-item:active:hover:not([disabled]) > .mochi-icon {
background-position: 0 -24px;
}
.mochi-icon-button-item.disabled {
opacity: 0.4;
}
.mochi-icon-button {
position: relative;
border-width: 0px;
margin: 0px;
padding: 0px;
height: 40px;
width: 40px;
background-color: transparent;
}
.mochi-icon-button > .mochi-button-bar {
background-color: transparent;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-ms-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.mochi-icon-button:active:hover:not([disabled]) > .mochi-button-bar {
background-color: #69cdff;
}
.mochi-icon-button.active > .mochi-button-bar {
background-color: #69cdff;
}
.mochi-icon-button.disabled {
opacity: 0.4;
}
.mochi-icon-button-bar {
top: 38px;
}