Change the font size of the index bar - sencha-touch-2

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