1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default IOS ToggleField CSS

    IOS ToggleField CSS


    Apply below mentioned css to implement toggle field similar to IOS.

    Code:
    .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
    }
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Nice @tomalex0!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Vote Rating
    0
    RussellYermal is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75
    Vote Rating
    9
    gypsie will become famous soon enough

      0  

    Default


    Quote Originally Posted by RussellYermal View Post
    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/showthre...8-iOS-5-Toggle