更改索引條

Question

我新的煎茶觸摸的字體大小。我需要設置索引欄的字體大小 請參考下面

畫面這裏是我的SCSS文件

$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; 
    } 
} 

我需要設置字體大小變得更加大。

Answer 1

從我所看到的，當我檢查indexbar，你需要重寫CSS .x-indexbar > font-size：

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

希望這有助於