Contextpopup: Support horizontal list

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

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
old mode 100755 (executable)
new mode 100644 (file)
index 70176ad..9aecb9a
--- a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
@@ -44,11 +44,6 @@
     .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s {
         background: transparent;
     }
-
-       .ui-listview li.ui-btn-down-s {
-               background: @color_bar_back_btn_press;
-       }
-
        .ui-listview li:last-child {
                border-bottom-left-radius: @border_radius;
                border-bottom-right-radius: @border_radius;
@@ -60,15 +55,25 @@
        }
        
     .ui-listview {
-               min-width: 386 * @unit_base;
                max-width: 620 * @unit_base;
-        border: none;
+               border: none;
     }
        
        .ui-listview > .ui-li {
                color: @color_ctxpopup_text;
                border-bottom-color: @color_ctxpopup_border_bottom;
-               padding: 0 7 * @unit_base;
+               border-top-width: 1px;
+               border-top-color: @color_ctxpopup_border_top;
+               margin-left: 0;
+               margin-right: 0;
+               &:first-child, &:last-child {
+                       border-top-width: 0px;
+               }
+               .ui-btn-inner {
+                       margin: 0;
+                       padding-left: 10 * @unit_base;
+                       padding-right: 10 * @unit_base;
+               }
        }
 
        .ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
@@ -81,15 +86,12 @@
 
     .horizontal {
                color: @color_ctxpopup_text;
-               max-width: 648 * @unit_base;
-
                .icon .ui-btn {
                        padding: 0;
-                       background: transparent;
-
+                       background: transparent ! important;
                        .ui-btn-icon-only {
-                               width: 128 * @unit_base;
-                               height: 92 * @unit_base;
+                               width: 96 * @unit_base;
+                               height: 64 * @unit_base;
                                padding: 0;
                        }
 
@@ -104,8 +106,8 @@
                }
 
                .text {
-                       padding: 0 20 * @unit_base;
-                       min-width: 128 * @unit_base;
+                       padding: 0 10 * @unit_base;
+                       min-width: 48 * @unit_base;
                }
 
 
@@ -114,59 +116,6 @@
             text-decoration: none;
         }
 
-        table {
-            border: none;
-            border-spacing: 0;
-        }
-
-        td {
-                       * {
-                               display: -moz-box;
-                               -moz-box-pack: center;
-                               display: -webkit-box;
-                               -webkit-box-pack: center;
-                               display: box;
-                               box-pack: center;
-                       }
-
-            border-left: 1px solid @color_ctxpopup_border_left;
-            border-right: 1px solid @color_ctxpopup_border_right;
-            border-top: 1px solid @color_ctxpopup_border_right;
-            border-bottom: 1px solid @color_ctxpopup_border_left;
-        }
-
-        td:first-of-type {
-            border-left: none;
-        }
-
-        td:last-of-type {
-            border-right: none;
-        }
-
-        tr:first-of-type > td {
-            border-top: none;
-        }
-
-        tr:last-of-type > td {
-            border-bottom: none;
-        }
-
-               tr:first-of-type > td:first-of-type {
-                       border-top-left-radius: @border_radius;
-               }
-
-               tr:first-of-type > td:last-of-type {
-                       border-top-right-radius: @border_radius;
-               }
-
-               tr:last-of-type > td:first-of-type {
-                       border-bottom-left-radius: @border_radius;
-               }
-
-               tr:last-of-type > td:last-of-type {
-                       border-bottom-right-radius: @border_radius;
-               }
-
         ul {
             padding: 0;
             display: inline-block;
@@ -176,13 +125,12 @@
         }
 
         li {
-                       line-height: 92 * @unit_base;
-                       min-height: 92 * @unit_base;
-                       min-width: 128 * @unit_base;
+                       line-height: 32 * @unit_base;
+                       min-height: 32 * @unit_base;
+                       min-width: 48 * @unit_base;
 
             float: left;
             display: inline-block;
-            border-left: 1px solid @color_ctxpopup_border_left;
             border-right: 1px solid @color_ctxpopup_border_right;
             text-align: center;
         }
@@ -190,7 +138,7 @@
                li:first-of-type {
                        border-top-left-radius: @border_radius;
                        border-bottom-left-radius: @border_radius;
-
+                       border-top-right-radius: 0px ! important;
             border-left: none;
         }
             
@@ -198,22 +146,182 @@
                        border-top-right-radius: @border_radius;
                        border-bottom-right-radius: @border_radius;
 
+
             border-right: none;
             margin-right: 0;
         }
 
+               .ui-li {
+                       &:first-child, &:last-child {
+                               border-left-width: 0px;
+                       }
+               }
+
                li:active, td:active {
-                       background: @color_bar_back_btn_press;
+                       background: @color_ctxbutton_press;
                }
     }
 
     .button {
         table .ui-btn {
-            margin: 8 * @unit_base;
+            margin: 0 * @unit_base;
             padding: 0;
-            height: 74 * @unit_base;
-            width: 172 * @unit_base;
+            height: 56 * @unit_base;
+            width: 132 * @unit_base;
         }
     }
 
 }
+
+.ui-arrow {
+       border-style: solid;
+       border-width: 10px;
+       width: 0;
+       height: 0px;
+       position: absolute;
+       &.top {
+               border-color: transparent transparent @color_ctxpopup_background transparent;
+       }
+       &.left {
+               border-color: transparent transparent transparent @color_ctxpopup_background;
+       }
+       &.right {
+               border-color: transparent @color_ctxpopup_background transparent transparent;
+       }
+       &.bottom {
+               border-color: @color_ctxpopup_background transparent transparent transparent;
+       }
+}
+
+.ui-ctxpopup-container
+{
+       z-index: 1200;
+       display: inline-bloack;
+       position: absolute;
+       padding: 0;
+       outline: 0;
+       .ui-popup
+       {
+               border: none;
+               background: @color_ctxpopup_background;
+               .LESSborder-radius-all(@border_radius);
+       }
+       .ui-listview li:first-child {
+               border-top-left-radius: @border_radius;
+               border-top-right-radius: @border_radius;
+       }
+}
+
+.poptop {
+       -webkit-transform-origin: 0% 0%;
+       -moz-transform-origin: 0% 0%;
+}
+
+.poptop.in {
+       -webkit-transform: scale(1);
+       -moz-transform: scale(1);
+    opacity: 1;
+       -webkit-animation-name: scalepopin;
+       -moz-animation-name: scalepopin;
+       -webkit-animation-duration: 350ms;
+       -moz-animation-duration: 350ms;
+}
+
+.poptop.out {
+       -webkit-animation-name: fadeout;
+       -moz-animation-name: fadeout;
+       opacity: 0;
+       -webkit-animation-duration: 100ms;
+       -moz-animation-duration: 100ms;
+}
+
+.poptop.in.reverse {
+       -webkit-animation-name: fadein;
+       -moz-animation-name: fadein;
+}
+
+.poptop.out.reverse {
+       -webkit-transform: scale(.8);
+       -moz-transform: scale(.8);
+       -webkit-animation-name: scalepopout;
+       -moz-animation-name: scalepopout;
+}
+
+@-webkit-keyframes scalepopin {
+    from {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.popbottom {
+       -webkit-transform-origin: 0% 100%;
+       -moz-transform-origin: 0% 100%;
+}
+
+.popbottom.in {
+       -webkit-transform: scale(1);
+       -moz-transform: scale(1);
+    opacity: 1;
+       -webkit-animation-name: scalepopin;
+       -moz-animation-name: scalepopin;
+       -webkit-animation-duration: 350ms;
+       -moz-animation-duration: 350ms;
+}
+
+.popbottom.out {
+       -webkit-animation-name: fadeout;
+       -moz-animation-name: fadeout;
+       opacity: 0;
+       -webkit-animation-duration: 100ms;
+       -moz-animation-duration: 100ms;
+}
+
+.popbottom.in.reverse {
+       -webkit-animation-name: fadein;
+       -moz-animation-name: fadein;
+}
+
+.popbottom.out.reverse {
+       -webkit-transform: scale(.8);
+       -moz-transform: scale(.8);
+       -webkit-animation-name: scalepopout;
+       -moz-animation-name: scalepopout;
+}
+
+@-moz-keyframes scalepopin {
+    from {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes scalepopout {
+    from {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes scalepopout {
+    from {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+}