title: Change the font size of the index bar
body: <p>I am new for sencha touch. I need to set the font size of the index bar
  Please see the picture below</p>
  
  <p><img src="https://i.stack.imgur.com/35uAo.png" alt="enter image description here"></p>
  
  <p>Here is my scss file</p>
  
  <pre><code>   $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;
    }
  }
  </code></pre>
  
  <p>I need to set the font size to become more bigger.</p>