Question

I am new for sencha touch. I need to set the font size of the index bar
Please see the picture below

Here is my scss file

   $base-color: #1674B6;
$active-color: #BCC8DA;

$index-bar-height: 50em ;



@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-toolbar-ui('cusToolbar', #E1E4ED, 'glossy');
// Your custom code goes here...



@include pictos-iconmask('card2');
@include pictos-iconmask('button3');
@include pictos-iconmask('circle2');
@include pictos-iconmask('circle3');
@include pictos-iconmask('bullseye1');
@include pictos-iconmask('reply');
@include pictos-iconmask('add_black');
@include pictos-iconmask('user_list');
@include pictos-iconmask('user_list2');
@include pictos-iconmask('list');
@include pictos-iconmask('note1');
@include pictos-iconmask('team1');
@include pictos-iconmask('user');




//--Custom GroupBy List css --
.tweet-wrapper {
  h2 { font-weight: bold; padding-bottom: 3px; }
  img { border-radius: 5px; float: left; }
  .tweet {
    font-size: 63%;
    margin-left: 60px;
    min-height: 40px;
  }
  .posted { float: right; }
}




.txtwhite {
  font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
    font-size: .7em;
    margin-left: 60px;
    min-height: 50px;
      font-weight: bold;

  color:white;

}



h2 { font-weight: bold; padding-bottom: 3px; }
img { border-radius: 5px; float: left; }
.tweet {
    font-size: 70%;
    margin-left: 60px;
    color: #333;
    min-height: 50px;
}
.posted { float: right; }



.x-pullmenu {
    display: -webkit-box!important;
    display: box!important;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-align: center;
    box-align: center;
    -webkit-box-pack: center;
    box-pack: center;
    position: absolute!important;

}
.x-pullmenu-top {
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;   
}

.x-pullmenu-left {
    top: 0px;
    left: -100px;
    width: 100px;
    height: 100%;
}

    .pullmenu#my-top-menu .x-body {
            background-color: black!important;
        }
        .bottom-menu {
            background-image: url(../images/bottom-menu.png) ;
            background-repeat: no-repeat ;
            background-size: 100% 100% ;
        }

        .menu-top {
            background-image: url(../images/top-menu.png) ;
            background-repeat: no-repeat ;
        }
        .doc-button {
            background-image: url(../images/info.png)!important;
            background-repeat: no-repeat ;
            background-size: 100% 100% ;
            width: 30px ;
            height: 30px ;
            margin: 5px 20px 0 20px;
        }
        .ok-button {
            background-image: url(../images/ok.png)!important;
            background-repeat: no-repeat ;
            background-size: 100% 100% ;
            width: 30px ;
            height: 30px ;
            margin: 5px 0 5px 20px;
        }
        .saving {
            margin-top: 8px; 
        }
        #doc-content {
            font-size: 15px ;
        }
        .doc-opt-label {
            display: inline-block;
            width: 100px ;
        }
        .doc-opt-expl {
            display: inline-block ;
            width: 100% ;
        }
        .pull-menu-doc {
            color: white ;
        }

@import '../global';

/**
 * @class Ext.dataview.IndexBar
 */

/**
 * @var {measurement} $index-bar-width
 * Width of the index bar.
 */
$index-bar-width: 1.1em !default;

/**
 * @var {color} $index-bar-bg-color
 * Background-color of the index bar.
 */
$index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default;

/**
 * @var {color} $index-bar-color
 * Text color of the index bar.
 */
$index-bar-color: darken(desaturate($base-color, 5%), 15%) !default;

/**
 * Includes default index bar styles.
 */


 @mixin sencha-indexbar {
  .x-indexbar {
    padding: 0 .3em;
    width: $index-bar-width;
    @include display-box;
    @include box-orient(vertical);
    @include box-align(stretch);
    @include box-pack(center);
    position: absolute;
    top: 1.5em;
    right: 0;
    bottom: 1em;
    z-index: 3;
  }

  .x-indexbar-body {
    padding: .3em 0;
  }

  .x-indexbar-pressed .x-indexbar-body {
    @include border-radius(($index-bar-width - .6em)/2);
    background-color: $index-bar-bg-color;
  }

  .x-indexbar-item {
    color: $index-bar-color;
    font-size: 3em;
    text-align: center;
    line-height: 3em;
    font-weight: bold;
    display: block;
  }
}

I need to set the font size to become more bigger.

Answer 1

From what I can see when I inspect the indexbar, you need to override the css .x-indexbar > font-size :

.x-indexbar > div {
  font-size: 1em; // for instance
}

Hope this helps