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

   1 @import "config.less";
   2
   3 @popup-size: 102 * @unit_base;
   4 @padding-size: 18 * @unit_base;
   5 @img-height: 80 * @unit_base;
   6 @img-width: 80 * @unit_base;
   7
   8 label.ui-slider {
   9         display: block;
  10 }
  11
  12 input.ui-slider-input {
  13         display: inline-block;
  14         width: 50 * @unit_base;
  15 }
  16
  17 select.ui-slider-switch {
  18         display: none;
  19 }
  20
  21 .ui-slider-bg,
  22 .ui-slider-icon-bg {
  23         position: relative;
  24         margin-left: 32 * @unit_base;
  25         margin-right: 32 * @unit_base;
  26         margin-bottom: 0.2em;
  27         vertical-align: middle;
  28 }
  29
  30 .ui-slider-icon-bg {
  31         margin-left: 96 * @unit_base;
  32         margin-right: 96 * @unit_base;
  33 }
  34
  35 .ui-slider-left-volume,
  36 .ui-slider-left-bright {
  37         position: absolute;
  38         top: -0.2em;
  39         left: -96 * @unit_base;
  40         height: @img-height;
  41         width: @img-width;
  42         vertical-align: middle;
  43         background: url(images/00_slider_btn_brightness01.png) no-repeat;
  44         .LESSbackground-size(@img-height, @img-width);
  45 }
  46
  47 .ui-slider-left-volume {
  48         background: url(images/00_slider_btn_volume01.png) no-repeat;
  49         .LESSbackground-size(@img-height, @img-width);
  50 }
  51
  52 .ui-slider-right-volume,
  53 .ui-slider-right-bright {
  54         position: absolute;
  55         top: -0.2em;
  56         right: -96 * @unit_base;
  57         height: @img-height;
  58         width: @img-width;
  59         vertical-align: middle;
  60         background: url(images/00_slider_btn_brightness02.png) no-repeat;
  61         .LESSbackground-size(@img-height, @img-width);
  62 }
  63
  64 .ui-slider-right-volume {
  65         background: url(images/00_slider_btn_volume02.png) no-repeat;
  66         .LESSbackground-size(@img-height, @img-width);
  67 }
  68
  69 .ui-slider-left-text {
  70         position: absolute;
  71         top: -0.2em;
  72         left: -96 * @unit_base;
  73         height: 80 * @unit_base;
  74         width: 80 * @unit_base;
  75         text-align: center;
  76         color: rgb(100, 100, 100);
  77 }
  78
  79 .ui-slider-right-text {
  80         position: absolute;
  81         top: -0.2em;
  82         right: -96 * @unit_base;
  83         height: 80 * @unit_base;
  84         width: 80 * @unit_base;
  85         text-align: center;
  86         color: rgb(100, 100, 100);
  87 }
  88
  89 div.ui-slider {
  90         display: inline-block;
  91         overflow: visible;
  92         height: 16 * @unit_base;
  93         width: 100%;
  94         background-image: url(images/00_winset_list_progress_bg.png);
  95
  96         .ui-btn {
  97                 top: 0.15em !important;
  98         }
  99         .ui-btn-inner {
 100                 padding: 0.4em 0 * @unit_base;
 101         }
 102         .ui-btn-text {
 103                 color: @color_slider_handle_text;
 104         }
 105 }
 106
 107 a.ui-slider-handle {
 108         position: relative;
 109         z-index: 10;
 110         top: -21 * @unit_base;
 111         width: 58 * @unit_base;
 112         height: 58 * @unit_base;
 113         margin-top: -29 * @unit_base;
 114         margin-left: -29 * @unit_base;
 115         color: @color_slider_handle_text;
 116         background: url(images/00_slider_handle.png) no-repeat;
 117         .LESSbackground-size(58 * @unit_base, 58 * @unit_base);
 118 }
 119
 120 .ui-slider-popup {
 121         position: absolute !important;
 122         width: @popup-size;
 123         height: @popup-size;
 124         text-align: center;
 125         padding-top: 0.5em;
 126         z-index: 100;
 127         opacity: 0.9;
 128         background: url(images/00_slider_popup_bg.png) no-repeat;
 129         .LESSbackground-size(@popup-size, @popup-size);
 130 }
 131
 132 .ui-slider-bar {
 133         position: absolute;
 134         top: 0.8em;
 135         height: 16 * @unit_base;
 136         width: 0;
 137         background-image: url(images/00_winset_list_progress_bar.png);
 138 }
 139
 140 .ui-slider-handle-press {
 141         position: absolute;
 142         z-index: 15;
 143         width: 58 * @unit_base;
 144         height: 58 * @unit_base;
 145         background: url(images/00_slider_handle_press.png) no-repeat;
 146         .LESSbackground-size(58 * @unit_base, 58 * @unit_base);
 147 }