slider: increase the margin

[platform/framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.tizen.slider.less

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.slider.less b/src/themes/tizen/common/jquery.mobile.tizen.slider.less
old mode 100644 (file)
new mode 100755 (executable)
index e52668f..6644c72
--- a/src/themes/tizen/common/jquery.mobile.tizen.slider.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.slider.less
@@ -15,18 +15,30 @@ select.ui-slider-switch {
        display: none;
 }
 
-.ui-slider-bg,
-.ui-slider-icon-bg {
+.ui-slider-container {
        position: relative;
        vertical-align: middle;
 
+       height: 18 * @unit_base;
        margin-left: 16 * @unit_base;
        margin-right: 16 * @unit_base;
+       margin-top: 18 * @unit_base;
+       margin-bottom: 18 * @unit_base;
+
+       background-image: -webkit-gradient(
+               linear,
+               left bottom,
+               left top,
+               color-stop(0, @color_progress_bar1),
+               color-stop(1, @color_progress_bar0)
+       );
+       .LESSbox-shadow(1px, 1px, 0px, white);
+       .LESSborder-radius-all( 10 * @unit_base );
 }
 
-.ui-slider-icon-bg {
-       margin-left: 58 * @unit_base;
-       margin-right: 58 * @unit_base;
+.ui-li > .ui-slider-container {
+       margin-top: 0;
+       margin-bottom: 0;
 }
 
 .ui-slider-left-volume,
@@ -34,7 +46,7 @@ select.ui-slider-switch {
        position: absolute;
        vertical-align: middle;
 
-       top: -0.35rem;
+       top: -0.5rem;
        left: -50 * @unit_base;
        height: @img-height;
        width: @img-width;
@@ -52,7 +64,7 @@ select.ui-slider-switch {
 .ui-slider-right-bright {
        position: absolute;
 
-       top: -0.35rem;
+       top: -0.5rem;
        right: -50 * @unit_base;
        height: @img-height;
        width: @img-width;
@@ -71,10 +83,8 @@ select.ui-slider-switch {
 .ui-slider-left-text {
        position: absolute;
 
-       top: -0.35rem;
-       left: -52 * @unit_base;
+       top: -0.5rem;
        height: 37 * @unit_base;
-       width: 37 * @unit_base;
 
        text-align: center;
        color: rgb(100, 100, 100);
@@ -83,28 +93,30 @@ select.ui-slider-switch {
 .ui-slider-right-text {
        position: absolute;
 
-       top: -0.35rem;
-       right: -52 * @unit_base;
+       top: -0.5rem;
        height: 37 * @unit_base;
-       width: 37 * @unit_base;
 
        text-align: center;
        color: rgb(100, 100, 100);
 }
 
-div.ui-slider {
-       display: inline-block;
-       overflow: visible;
+div.ui-slider:not(.ui-toggle-switch) {
+       position: relative;
 
-       height: 18 * @unit_base;
-       width: 100%;
+       top: 5 * @unit_base;
+       height: 7 * @unit_base;
+       margin-left: 5 * @unit_base;
+       margin-right: 5 * @unit_base;
 
-       //FIXME
-       //background-image: url(images/00_progress_bg.9.png);
-       background-color: rgb(236,233,229);
+       .LESSborder-radius-all( 10 * @unit_base );
+       border: 1px;
+       border-style: solid;
+       border-color: @color_progress_border;
+       .LESSbox-shadow(1px, -1px, 1px, @color_progress_border);
+       background-color: @color_progress_bar0;
 
        .ui-btn {
-               top: -0.45rem;
+               top: -0.75rem;
                margin-top: 0;
        }
        .ui-btn-inner {
@@ -136,35 +148,32 @@ a.ui-slider-handle {
 
        width: @popup-width;
        height: @popup-height;
-       top: -56 * @unit_base;
+       top: -60 * @unit_base;
        padding-top: 0.1rem;
 
        color: @color_slider_popup_text;
        text-align: center;
        font-size: 1.5rem;
 
-       background: url(images/00_slider_popup_bg.png) no-repeat;
+       background: url(images/controls/00_slider_popup_bg.png) no-repeat;
        .LESSbackground-size(@popup-width, @popup-height);
 }
 
-.ui-slider-bar {
-       position: relative;
+.ui-slider-bg {
+       position: absolute;
 
-       top: -36 * @unit_base;
-       height: 18 * @unit_base;
+       height: 7 * @unit_base;
        width: 0;
 
-       //FIXME
-       //background-image: url(images/00_progress_bar.9.png);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
-               color-stop(0.2, rgb(236,233,229)),
-               color-stop(0.2, rgb(54,119,155)),
-               color-stop(0.8, rgb(54,119,195)),
-               color-stop(0.8, rgb(236,233,229))
+               color-stop(0, @color_progress_value0),
+               color-stop(1, @color_progress_value1)
        );
+       .LESSborder-radius-all( 10 * @unit_base );
+       .LESSbox-shadow(-1px, -1px, 1px, rgb(179, 200, 226));
 }
 
 .ui-slider-handle-press {