PDA

View Full Version : IOS ToggleField CSS



tomalex0
9 Nov 2011, 10:07 PM
Apply below mentioned css to implement toggle field similar to IOS.



.x-toggle .x-thumb{
position:relative;
margin:0 0 0 0;
text-align:center;
font-size:1em;
font-weight :bold;
}
.x-toggle-on .x-thumb{
color:white;
text-shadow:#062547 0 -1px 0;
height: 2em;
}


.x-toggle-off .x-thumb{
color : #666;
text-shadow:#FFFFFF 0 1px 0;
}






.x-toggle.x-toggle-off .x-field-inner, .x-toggle.x-toggle-on .x-field-inner{
display: block;
border-radius: 4px;
border: #777 1px solid;
position: relative;
height: 2em;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #EBEBEB),color-stop(.8, #D6D6D6), color-stop(1,#A2A2A2));
-webkit-box-shadow:#CCC 0 0 2px;
}




.x-toggle-off .x-thumb::before, .x-toggle-on .x-thumb::before {
position: absolute;
min-width:2.2em;
width:100%;
top: 0em !important;
left: 0em !important;
-webkit-border-radius: 0.925em;
border-radius:3px;
-webkit-background-clip: padding;
background-clip: padding-box;
height:1.9em;
padding-top:0.3em;
}


.x-toggle-off .x-thumb::before{
content: "OFF";

}
.x-toggle-on .x-thumb::before{
content: "ON";
}
.x-toggle-off .x-thumb::before {
border:1px solid #E5E5E5;
background-color: white;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
background-image: linear-gradient(white,#A1A1A1 2%,#white);
-webkit-box-shadow:#222 0 0 3px;
}


.x-toggle-on .x-thumb::before {
border:1px solid #14539C;
background-color: #14539C;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background-image: linear-gradient(white,#14539C 2%,#3095C7);
-webkit-box-shadow:#05203F 0 0 3px
}

mitchellsimoens
10 Nov 2011, 4:48 AM
Nice @tomalex0!

RussellYermal
24 Feb 2012, 10:19 AM
Do you have updated css for the new touch 2 beta 3 release? Here's what it currently looks like:
http://russellyermal.com/jing/2012-02-24_1019.png
http://russellyermal.com/jing/2012-02-24_1019-1.png

gypsie
31 Mar 2012, 6:04 PM
Do you have updated css for the new touch 2 beta 3 release? Here's what it currently looks like:
http://russellyermal.com/jing/2012-02-24_1019.png
http://russellyermal.com/jing/2012-02-24_1019-1.png

http://www.sencha.com/forum/showthread.php?192358-iOS-5-Toggle