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