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

   1 @import "config.less";
   2
   3 @popup-height: 54 * @unit_base;
   4 @popup-width: 45 * @unit_base;
   5 @img-height: 37 * @unit_base;
   6 @img-width: 37 * @unit_base;
   7 @handle-height: 36 * @unit_base;
   8 @handle-width: 36 * @unit_base;
   9
  10 label.ui-slider {
  11         display: block;
  12 }
  13
  14 select.ui-slider-switch {
  15         display: none;
  16 }
  17
  18 .ui-slider-container,
  19 .ui-slider-icon-container {
  20         position: relative;
  21         vertical-align: middle;
  22
  23         height: 18 * @unit_base;
  24         margin-left: 16 * @unit_base;
  25         margin-right: 16 * @unit_base;
  26         margin-top: 9 * @unit_base;
  27         margin-bottom: 9 * @unit_base;
  28
  29         background-image: -webkit-gradient(
  30                 linear,
  31                 left bottom,
  32                 left top,
  33                 color-stop(0, @color_progress_bar1),
  34                 color-stop(1, @color_progress_bar0)
  35         );
  36         .LESSbox-shadow(1px, 1px, 0px, white);
  37         .LESSborder-radius-all( 10 * @unit_base );
  38 }
  39
  40 .ui-slider-icon-container {
  41         margin-left: 58 * @unit_base;
  42         margin-right: 58 * @unit_base;
  43 }
  44
  45 .ui-slider-left-volume,
  46 .ui-slider-left-bright {
  47         position: absolute;
  48         vertical-align: middle;
  49
  50         top: -0.5rem;
  51         left: -50 * @unit_base;
  52         height: @img-height;
  53         width: @img-width;
  54
  55         background: url(images/controls/00_slider_button_brightness_01.png) no-repeat;
  56         .LESSbackground-size(@img-width, @img-height);
  57 }
  58
  59 .ui-slider-left-volume {
  60         background: url(images/controls/00_slider_button_volume_01.png) no-repeat;
  61         .LESSbackground-size(@img-width, @img-height);
  62 }
  63
  64 .ui-slider-right-volume,
  65 .ui-slider-right-bright {
  66         position: absolute;
  67
  68         top: -0.5rem;
  69         right: -50 * @unit_base;
  70         height: @img-height;
  71         width: @img-width;
  72
  73         vertical-align: middle;
  74
  75         background: url(images/controls/00_slider_button_brightness_02.png) no-repeat;
  76         .LESSbackground-size(@img-width, @img-height);
  77 }
  78
  79 .ui-slider-right-volume {
  80         background: url(images/controls/00_slider_button_volume_02.png) no-repeat;
  81         .LESSbackground-size(@img-width, @img-height);
  82 }
  83
  84 .ui-slider-left-text {
  85         position: absolute;
  86
  87         top: -0.5rem;
  88         left: -52 * @unit_base;
  89         height: 37 * @unit_base;
  90         width: 37 * @unit_base;
  91
  92         text-align: center;
  93         color: rgb(100, 100, 100);
  94 }
  95
  96 .ui-slider-right-text {
  97         position: absolute;
  98
  99         top: -0.5rem;
 100         right: -52 * @unit_base;
 101         height: 37 * @unit_base;
 102         width: 37 * @unit_base;
 103
 104         text-align: center;
 105         color: rgb(100, 100, 100);
 106 }
 107
 108 div.ui-slider:not(.ui-toggle-switch) {
 109         position: relative;
 110
 111         top: 5 * @unit_base;
 112         height: 7 * @unit_base;
 113         margin-left: 5 * @unit_base;
 114         margin-right: 5 * @unit_base;
 115
 116         .LESSborder-radius-all( 10 * @unit_base );
 117         border: 1px;
 118         border-style: solid;
 119         border-color: @color_progress_border;
 120         .LESSbox-shadow(1px, -1px, 1px, @color_progress_border);
 121         background-color: @color_progress_bar0;
 122
 123         .ui-btn {
 124                 top: -0.75rem;
 125                 margin-top: 0;
 126         }
 127         .ui-btn-inner {
 128                 padding: 0.3rem 0 0 0;
 129         }
 130         .ui-btn-text {
 131                 color: @color_slider_handle_text;
 132         }
 133 }
 134
 135 a.ui-slider-handle {
 136         position: relative;
 137         z-index: 10;
 138
 139         width: 36 * @unit_base;
 140         height: 36 * @unit_base;
 141         margin-left: -19 * @unit_base;
 142
 143         color: @color_slider_handle_text;
 144         font-size: 0.95rem;
 145
 146         background: url(images/controls/00_slider_handle.png) no-repeat;
 147         .LESSbackground-size(@handle-width, @handle-height);
 148 }
 149
 150 .ui-slider-popup {
 151         position: absolute !important;
 152         z-index: 100;
 153
 154         width: @popup-width;
 155         height: @popup-height;
 156         top: -60 * @unit_base;
 157         padding-top: 0.1rem;
 158
 159         color: @color_slider_popup_text;
 160         text-align: center;
 161         font-size: 1.5rem;
 162
 163         background: url(images/controls/00_slider_popup_bg.png) no-repeat;
 164         .LESSbackground-size(@popup-width, @popup-height);
 165 }
 166
 167 .ui-slider-bg {
 168         position: absolute;
 169
 170         height: 7 * @unit_base;
 171         width: 0;
 172
 173         background-image: -webkit-gradient(
 174                 linear,
 175                 left bottom,
 176                 left top,
 177                 color-stop(0, @color_progress_value0),
 178                 color-stop(1, @color_progress_value1)
 179         );
 180         .LESSborder-radius-all( 10 * @unit_base );
 181         .LESSbox-shadow(-1px, -1px, 1px, rgb(179, 200, 226));
 182 }
 183
 184 .ui-slider-handle-press {
 185         position: absolute;
 186         z-index: 15;
 187
 188         width: 37 * @unit_base;
 189         height: 37 * @unit_base;
 190
 191         //FIXME
 192         background: url(images/controls/00_slider_handle_press.png) no-repeat;
 193         .LESSbackground-size(@handle-width, @handle-height);
 194 }