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