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