我是sencha touch的新手。我需要设置索引栏的字体大小 请看下面的图片
这是我的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;
}
}
我需要将字体大小设置得更大。
答案 0 :(得分:1)
当我检查索引栏时,我可以看到,你需要覆盖css .x-indexbar > font-size
:
.x-indexbar > div {
font-size: 1em; // for instance
}
希望这有帮助