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
index f56d03f..6644c72 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.slider.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.slider.less
@@ -15,14 +15,15 @@ select.ui-slider-switch {
        display: none;
 }
 
-.ui-slider-container,
-.ui-slider-icon-container {
+.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,
@@ -35,9 +36,9 @@ select.ui-slider-switch {
        .LESSborder-radius-all( 10 * @unit_base );
 }
 
-.ui-slider-icon-container {
-       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,
@@ -83,9 +84,7 @@ select.ui-slider-switch {
        position: absolute;
 
        top: -0.5rem;
-       left: -52 * @unit_base;
        height: 37 * @unit_base;
-       width: 37 * @unit_base;
 
        text-align: center;
        color: rgb(100, 100, 100);
@@ -95,9 +94,7 @@ select.ui-slider-switch {
        position: absolute;
 
        top: -0.5rem;
-       right: -52 * @unit_base;
        height: 37 * @unit_base;
-       width: 37 * @unit_base;
 
        text-align: center;
        color: rgb(100, 100, 100);
@@ -114,12 +111,12 @@ div.ui-slider:not(.ui-toggle-switch) {
        .LESSborder-radius-all( 10 * @unit_base );
        border: 1px;
        border-style: solid;
-       border-color: @color_progress_boarder;
-       .LESSbox-shadow(1px, -1px, 1px, @color_progress_boarder);
+       border-color: @color_progress_border;
+       .LESSbox-shadow(1px, -1px, 1px, @color_progress_border);
        background-color: @color_progress_bar0;
 
        .ui-btn {
-               top: -0.8rem;
+               top: -0.75rem;
                margin-top: 0;
        }
        .ui-btn-inner {