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

   1 .x-list {
   2     overflow: hidden;
   3
   4     .x-scroll-scroller {
   5         max-width: 100%;
   6     }
   7
   8     .x-list-inner {
   9         width: 100% !important;
  10     }
  11
  12     &.x-list-indexed .x-list-disclosure {
  13         margin-right: 50px;
  14     }
  15
  16     .x-item-selected .x-list-disclosure {
  17         background-color: #fff;
  18     }
  19
  20     .x-list-scrolldock-hidden {
  21         display: none;
  22     }
  23
  24     .x-list-item {
  25         position: absolute !important;
  26         left: 0;
  27         top: 0;
  28         width: 100%;
  29
  30         > .x-dock {
  31             height: auto;
  32         }
  33
  34         .x-dock-horizontal {
  35             border-top: 1px solid #ccc;
  36         }
  37
  38         &.x-item-selected .x-dock-horizontal,
  39         &.x-item-selected.x-list-item-tpl {
  40             background-color: #ccc;
  41         }
  42
  43                                 &.x-item-pressed {
  44                                         &.x-list-item-tpl,
  45                                         .x-dock-horizontal {
  46                                                 background-color: #ddd;
  47                                         }
  48                                 }
  49
  50         .x-list-item-body,
  51         &.x-list-item-tpl .x-innerhtml {
  52             padding: 5px;
  53         }
  54
  55         &.x-list-item-relative {
  56             position: relative !important;
  57         }
  58     }
  59
  60     .x-list-header {
  61         background-color: #eee;
  62         border-top: 1px solid #ccc;
  63         border-bottom: 1px solid #ccc;
  64         font-weight: bold;
  65
  66         &.x-list-item-relative {
  67             position:  relative !important;
  68         }
  69     }
  70
  71     .x-list-disclosure {
  72         margin: 5px 15px 5px 0;
  73         overflow: visible;
  74         width: 20px;
  75         height: 20px;
  76         border: 1px solid #ccc;
  77         background-color: #eee;
  78     }
  79
  80     .x-list-item-tpl .x-list-disclosure {
  81         position: absolute;
  82         right: 0px;
  83         top: 0px;
  84     }
  85
  86     .x-list-emptytext {
  87         text-align: center;
  88         pointer-events: none;
  89         font-color: #333333;
  90         @include st-box();
  91         @include st-box-orient(vertical);
  92         @include st-box-pack(center);
  93     }
  94
  95     &.x-list-indexed .x-list-disclosure {
  96         margin-right: 35px;
  97     }
  98
  99     .x-list-scrolldockitem {
 100         position: absolute !important;
 101         left: 0;
 102         top: 0;
 103         width: 100%;
 104     }
 105 }
 106
 107 // Provides ability to capture events on the list
 108 .x-ie .x-list-grouped .x-translatable-container {
 109   .x-list-item, .x-list-header {
 110     &:before {
 111       content: ". .";
 112       color: transparent;
 113       position: absolute;
 114       left: 0px;
 115       word-spacing: 3000px;
 116       opacity: 0;
 117     }
 118   }
 119 }
 120
 121 .x-list-header {
 122     position: absolute;
 123     left: 0;
 124     width: 100%;
 125     z-index: 2 !important;
 126 }
 127
 128 .x-ios .x-list-header {
 129     @include transform(translate3d(0, 0, 0));
 130 }
 131
 132 .x-list-grouped .x-list-item.x-list-header-wrap .x-dock-horizontal,
 133 .x-list-grouped .x-list-item-tpl.x-list-header-wrap {
 134     border-top: 0;
 135 }
 136
 137 .x-list-inlineblock {
 138     .x-list-item {
 139         display: inline-block !important;
 140     }
 141 }
 142
 143 .x-list-nowrap {
 144     .x-list-inner {
 145         width: auto;
 146     }
 147
 148     .x-list-container {
 149         white-space: nowrap !important;
 150     }
 151 }
 152
 153 .x-list-item-dragging {
 154     border-bottom: 1px solid #ccc;
 155     background: #fff !important;
 156     z-index: 1;
 157 }