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