mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
92c49bf97e
The logic will actually support multi-option selects as well, but the labels are flipped in order for switch-style controls, so if we want to support regular sliders from selects, the labels will have to be in forward order and beneath the slider bar.
20 lines
No EOL
1.2 KiB
CSS
20 lines
No EOL
1.2 KiB
CSS
/*
|
|
* jQuery Mobile Framework
|
|
* Copyright (c) jQuery Project
|
|
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
|
|
*/
|
|
label.ui-slider { display: block; }
|
|
input.ui-slider-input, select.ui-slider-select { display: inline-block; width: 40px; }
|
|
select.ui-slider-select { width: 60px; /*commented out for demo purposes... display: none; */ }
|
|
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
|
|
div.ui-slider-select { height: 36px; width: 50%; }
|
|
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 49%; }
|
|
div.ui-slider-labels { overflow: hidden; }
|
|
div.ui-slider-label { float: left; text-align: center; height: 36px; line-height: 36px; }
|
|
a.ui-slider-handle { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }
|
|
div.ui-slider-select a.ui-slider-handle { width: 100%; height: 32px; margin-top: -18px; margin-left: -100%; }
|
|
a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
|
|
@media screen and (min-width: 480px){
|
|
label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
|
|
div.ui-slider { width: 45%; }
|
|
} |