-2

私はsenchatouchが初めてです。インデックスバーのフォントサイズを設定する必要があります下の画像をご覧ください

ここに画像の説明を入力してください

これが私の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;
  }
}

フォントサイズをもっと大きくするように設定する必要があります。

4

1 に答える 1

1

インデックスバーを調べたときにわかることから、cssをオーバーライドする必要があります.x-indexbar > font-size。

ここに画像の説明を入力してください

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

お役に立てれば

于 2012-12-10T16:33:18.737 に答える