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 @-webkit-keyframes ui-overflow-show-lite {
  82         from {
  83                 opacity: 0;
  84         } to {
  85                 opacity: 0.2;
  86         }
  87 }
  88
  89 @-webkit-keyframes ui-overflow-show {
  90         from {
  91                 opacity: 0;
  92         } to {
  93                 opacity: 0.5;
  94         }
  95 }
  96
  97 @-webkit-keyframes ui-overflow-show-dark {
  98         from {
  99                 opacity: 0;
 100         } to {
 101                 opacity: 0.8;
 102         }
 103 }
 104
 105 @-webkit-keyframes ui-overflow-hide-lite {
 106         from {
 107                 opacity: 0.2;
 108         } to {
 109                 opacity: 0;
 110         }
 111 }
 112
 113 @-webkit-keyframes ui-overflow-hide {
 114         from {
 115                 opacity: 0.5;
 116         } to {
 117                 opacity: 0;
 118         }
 119 }
 120
 121 @-webkit-keyframes ui-overflow-hide-dark {
 122         from {
 123                 opacity: 0.8;
 124         } to {
 125                 opacity: 0;
 126         }
 127 }
 128
 129 .ui-overflow-indicator-top {
 130         position: absolute;
 131         display: block;
 132         top: 0;
 133         width: 100%;
 134         height: 10 * @unit_base;
 135         opacity: 0;
 136         background: -webkit-gradient(linear,
 137                                 left bottom,
 138                                 left top,
 139                                 color-stop(0, rgb(255,255,255)),
 140                                 color-stop(1, rgb(128,128,128)));
 141 }
 142
 143 .ui-overflow-indicator-bottom {
 144         position: absolute;
 145         display: block;
 146         bottom: 0;
 147         width:100%;
 148         height: 10 * @unit_base;
 149         opacity: 0;
 150         background: -webkit-gradient(linear,
 151                                 left bottom,
 152                                 left top,
 153                                 color-stop(0, rgb(128,128,128)),
 154                                 color-stop(1, rgb(255,255,255)));
 155 }
 156
 157 /*
 158  * the values below are for the group index
 159  */
 160
 161 /*
 162  * padding here set to zero - otherwise the list scrolls underneith the top heading and can be seen above it
 163  */
 164 .ui-content.ui-scrollview-clip {
 165         padding: 0;
 166 }
 167 .ui-content.ui-scrollview-clip > div.ui-scrollview-view {
 168         margin: 0;
 169         padding-left: 8 * @unit_base;
 170         padding-right: 8 * @unit_base;
 171 }
 172
 173 /*
 174  * this seems to effect how far the top divider is place wrt to the scrollview
 175  * without this, it is placed too high, so it is clipped in half
 176  */
 177 .ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
 178         margin: 0;
 179 }