src/resources/themes/stylesheets/sencha-touch/bb10/src/dataview/_List.scss

   1 /**
   2  * @class Ext.dataview.List
   3  */
   4
   5 .x-list {
   6         background: #fff;
   7 }
   8
   9 .x-list-item {
  10         border-bottom: 1px solid #F7F3F7;
  11         color: #292429;
  12         font-size: 20px;
  13         padding: 0 10px;
  14         line-height: 38px;
  15 }
  16
  17 .x-list .x-list-disclosure {
  18         margin-top: 13px;
  19         border: 0;
  20         background: transparent;
  21
  22         &:before {
  23                 content: '>';
  24                 color: #444;
  25                 font-weight: bold;
  26                 line-height: 19px;
  27                 font-size: 22px;
  28                 text-align: center;
  29                 position: absolute;
  30                 top: 0;
  31                 right: 0;
  32                 bottom: 0;
  33                 left: 0;
  34         }
  35 }
  36
  37 .x-list .x-list-item.x-item-pressed.x-list-item-tpl,
  38 .x-list .x-list-item.x-item-pressed .x-dock-horizontal {
  39         background-color: transparent;
  40         @include box-shadow(inset 0 0 0 2px $base-color);
  41 }
  42
  43 .x-list .x-list-item.x-item-selected .x-dock-horizontal,
  44 .x-list .x-list-item.x-item-selected.x-list-item-tpl {
  45         background-color: $base-color;
  46         @include box-shadow(none);
  47 }
  48
  49 .x-list .x-item-selected .x-list-disclosure {
  50         &:before {
  51                 color: #000
  52         }
  53         background-color: transparent;
  54 }
  55
  56 .x-list .x-list-header {
  57         font-weight: normal;
  58         font-size: 14px;
  59         padding: 2px 10px;
  60         border-top-color: #D1D1D1;
  61         border-bottom: 2px solid #0AA9DC;
  62         @include background(linear-gradient(color-stops(#FEFEFE, #DDDDDD)));
  63 }
  64
  65 .x-indexbar {
  66         color: #888;
  67         padding: 3px 0;
  68         @include border-radius(0px);
  69         @include st-box();
  70         height: 100% !important;
  71         background: rgba(255, 255, 255, .75);
  72
  73         & > div {
  74                 @include st-box();
  75                 @include st-box-flex(1);
  76                 color: #060606;
  77                 font-size: .75em
  78         }
  79 }
  80
  81 $indexbar-indicator-width: 120px;
  82 $indexbar-indicator-height: 50px;
  83 $indexbar-indicator-background-color: #222;
  84 $indexbar-indicator-font-color: #FFF;
  85 $indexbar-indicator-font-size: 2em;
  86 .x-indexbar-indicator {
  87         width: $indexbar-indicator-width;
  88         height: $indexbar-indicator-height;
  89         background-color: $indexbar-indicator-background-color;
  90         position: absolute;
  91         top: 0;
  92         right: 0;
  93         z-index: 100;
  94         border-top-left-radius: 5px;
  95         border-bottom-left-radius: 5px;
  96
  97         .x-indexbar-indicator-inner {
  98                 color: $indexbar-indicator-font-color;
  99                 line-height: $indexbar-indicator-height;
 100                 font-size: $indexbar-indicator-font-size;
 101                 padding-left: $indexbar-indicator-width / 6;
 102         }
 103
 104         &:after {
 105                 content:'';
 106                 background-image: theme_image('bb10', "icons/ic_overflow_tab.png");
 107                 background-size: 50%;
 108                 background-position: 50%;
 109                 background-repeat: no-repeat;
 110                 opacity: .5;
 111                 width: $indexbar-indicator-width /3;
 112                 height: 100%;
 113                 position: absolute;
 114                 top: 0;
 115                 right: 0;
 116         }
 117 }
 118
 119 .x-indexbar-vertical {
 120         width: 30px;
 121         margin-right: 0px;
 122         @include st-box-align(center);
 123         @include st-box-direction(vertical);
 124         padding-top: .5em;
 125 }
 126
 127 .x-indexbar-pressed {
 128         background: rgba(255, 255, 255, 1);
 129 }
 130
 131 .x-list-item-odd {
 132         &.x-list-item-tpl,
 133         .x-dock-horizontal {
 134                 background-color: darken(#fff, 5%);
 135                 border-bottom: 1px solid darken(#fff, 5%);
 136         }
 137 }