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