1 2.mblToggleButton { 3 position: relative; 4 padding: 0 10px 0 25px; 5 height: 29px; 6 border-width: 1px 1px 1px 1px; 7 border-style: outset; 8 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); 9 background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%); 10 font-family: Helvetica; 11 line-height: 29px; 12 cursor: pointer; 13 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 14 border: 1px solid #c0c0c0; 15 border-bottom-color: #9b9b9b; 16 border-radius: 0; 17 font-size: 13px; 18 color: #000000; 19} 20.mblToggleButton:disabled { 21 border-color: grey; 22 background-image: none; 23 color: grey; 24 cursor: default; 25} 26.mblToggleButtonSelected { 27 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 28 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 29 color: #ffffff; 30} 31.mblToggleButtonChecked { 32 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); 33 background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%); 34 color: #000000; 35} 36.mblToggleButtonChecked:after { 37 position: absolute; 38 content: ""; 39 top: 6px; 40 left: 7px; 41 width: 5px; 42 height: 10px; 43 border-width: 2px; 44 border-style: none solid solid none; 45 -webkit-transform: rotate(45deg) skew(10deg); 46 transform: rotate(45deg) skew(10deg); 47 -webkit-transform-origin: 50% 50%; 48 transform-origin: 50% 50%; 49 border-color: #000000; 50} 51.mblToggleButtonChecked.mblToggleButtonSelected { 52 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 53 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 54 color: #ffffff; 55} 56.mblToggleButtonChecked.mblToggleButtonSelected:after { 57 border-color: #ffffff; 58} 59