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