src/themes/tizen/common/jquery.mobile.tizen.scrollview.less

   1 @import "config.less";
   2
   3 .ui-scrollview-clip {
   4         position: relative;
   5 }
   6
   7 .ui-scrollview-view {
   8 }
   9
  10 .ui-scrolllistview .ui-li-divider {
  11         z-index: 10;
  12 }
  13
  14 .ui-scrollbar {
  15         position: absolute;
  16         overflow: hidden;
  17
  18         opacity: 0;
  19 }
  20
  21 .ui-scrollbar-visible {
  22         opacity: 1;
  23 }
  24
  25 .ui-scrollbar-y {
  26         top: 2 * @unit_base;
  27         right: 2 * @unit_base;
  28         bottom: 2 * @unit_base;
  29         width: 8 * @unit_base;
  30 }
  31
  32 .ui-scrollbar-x {
  33         right: 2 * @unit_base;
  34         bottom: 2 * @unit_base;
  35         left: 2 * @unit_base;
  36         height: 8 * @unit_base;
  37 }
  38
  39 .ui-scrollbar-track {
  40         position: relative;
  41         width: 100%;
  42         height: 100%;
  43 }
  44
  45 .ui-scrollbar-thumb {
  46         position: absolute;
  47         top: 0;
  48         left: 0;
  49         background-color: @color_scrollbar;
  50 }
  51
  52 .ui-scrollbar-y .ui-scrollbar-thumb {
  53         width:  5 * @unit_base;
  54         height: 100%;
  55         .LESSborder-radius-all(2 * @unit_base);
  56         .LESSbox-shadow(1 * @unit_base, 1 * @unit_base, 2 * @unit_base, rgb(148, 146, 140))
  57 }
  58
  59 .ui-scrollbar-x .ui-scrollbar-thumb {
  60         width: 100%;
  61         height: 5 * @unit_base;
  62         .LESSborder-radius-all(2 * @unit_base);
  63 }
  64
  65 .ui-scroll-jump-top-bg {
  66         position: absolute;
  67         top: 9 * @unit_base;
  68         right: 13 * @unit_base;
  69         width: 37 * @unit_base;
  70         height: 37 * @unit_base;
  71 }
  72
  73 .ui-scroll-jump-left-bg {
  74         position: absolute;
  75         bottom: 9 * @unit_base;
  76         left: 13 * @unit_base;
  77         width: 37 * @unit_base;
  78         height: 37 * @unit_base;
  79 }
  80
  81 .ui-overflow-indicator-top {
  82         position: absolute;
  83         display: block;
  84         top: 0;
  85         width: 100%;
  86         height: 10 * @unit_base;
  87         opacity: 0;
  88         background: -webkit-gradient(linear,
  89                                 left bottom,
  90                                 left top,
  91                                 color-stop(0, rgb(255,255,255)),
  92                                 color-stop(1, rgb(128,128,128)));
  93 }
  94
  95 .ui-overflow-indicator-bottom {
  96         position: absolute;
  97         display: block;
  98         bottom: 0;
  99         width:100%;
 100         height: 10 * @unit_base;
 101         opacity: 0;
 102         background: -webkit-gradient(linear,
 103                                 left bottom,
 104                                 left top,
 105                                 color-stop(0, rgb(128,128,128)),
 106                                 color-stop(1, rgb(255,255,255)));
 107 }
 108
 109 /*
 110  * the values below are for the group index
 111  */
 112
 113 /*
 114  * padding here set to zero - otherwise the list scrolls underneith the top heading and can be seen above it
 115  */
 116 .ui-content.ui-scrollview-clip {
 117         padding: 0;
 118 }
 119 .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
 120         margin: 0;
 121         padding-left: 8 * @unit_base;
 122         padding-right: 8 * @unit_base;
 123 }
 124
 125 /*
 126  * this seems to effect how far the top divider is place wrt to the scrollview
 127  * without this, it is placed too high, so it is clipped in half
 128  */
 129 .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
 130         margin: 0;
 131 }