src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less

   1 @import "config.less";
   2
   3 @border_radius: .3em;
   4
   5 .ui-ctxpopup {
   6         display: table;
   7
   8         .ui-ctxpopup-row .ui-triangle-top {
   9                 top: 2px;
  10         }
  11
  12         .ui-ctxpopup-row .ui-triangle-left {
  13                 left: 2px;
  14         }
  15
  16         .ui-ctxpopup-row .ui-triangle-right {
  17                 right: 2px;
  18         }
  19
  20         .ui-ctxpopup-row .ui-triangle-bottom {
  21                 bottom: 2px;
  22         }
  23
  24         .ui-ctxpopup-row {
  25                 display: table-row;
  26
  27                 .ui-ctxpopup-cell {
  28                         display: table-cell;
  29                 }
  30
  31                 .ui-popupwindow-padding {
  32                         background: @color_ctxpopup_background;
  33                         border: none;
  34                         -ms-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
  35                         -o-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
  36                         -moz-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
  37                         -webkit-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
  38                         box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
  39                         .LESSborder-radius-all(@border_radius);
  40                 }
  41
  42         }
  43
  44     .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s {
  45         background: transparent;
  46     }
  47
  48         .ui-listview li.ui-btn-down-s {
  49                 background: @color_bar_back_btn_press;
  50         }
  51
  52         .ui-listview li:last-child {
  53                 border-bottom-left-radius: @border_radius;
  54                 border-bottom-right-radius: @border_radius;
  55         }
  56
  57         .ui-listview li:first-child {
  58                 border-top-left-radius: @border_radius;
  59                 border-top-right-radius: @border_radius;
  60         }
  61
  62     .ui-listview {
  63                 max-width: 620 * @unit_base;
  64                 border: none;
  65     }
  66
  67         .ui-listview > .ui-li {
  68                 color: @color_ctxpopup_text;
  69                 border-bottom-color: @color_ctxpopup_border_bottom;
  70                 border-top-width: 1px;
  71                 border-top-color: @color_ctxpopup_border_top;
  72                 margin-left: 0;
  73                 margin-right: 0;
  74                 &:first-child, &:last-child {
  75                         border-top-width: 0px;
  76                 }
  77                 .ui-btn-inner {
  78                         margin: 0;
  79                         padding-left: 10 * @unit_base;
  80                         padding-right: 10 * @unit_base;
  81                 }
  82         }
  83
  84         .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 {
  85           color: @color_ctxpopup_text;
  86         }
  87
  88     .ui-listview > .ui-li:last-child {
  89         border: none;
  90     }
  91
  92     .horizontal {
  93                 color: @color_ctxpopup_text;
  94                 max-width: 648 * @unit_base;
  95                 .icon .ui-btn {
  96                         padding: 0;
  97                         background: transparent ! important;
  98                         .ui-btn-icon-only {
  99                                 width: 96 * @unit_base;
 100                                 height: 64 * @unit_base;
 101                                 padding: 0;
 102                         }
 103
 104                         .ui-icon {
 105                                 top: 0;
 106                                 height: inherit;
 107                                 width: inherit;
 108                                 margin: 0;
 109                                 background-position: center;
 110                                 .LESSbackground-size( 48 * @unit_base, 48 * @unit_base );
 111                         }
 112                 }
 113
 114                 .text {
 115                         padding: 0 10 * @unit_base;
 116                         min-width: 48 * @unit_base;
 117                 }
 118
 119
 120         a.ui-link {
 121             color: @color_ctxpopup_text;
 122             text-decoration: none;
 123         }
 124
 125         ul {
 126             padding: 0;
 127             display: inline-block;
 128             list-style: none;
 129             vertical-align: middle;
 130             margin: 0;
 131         }
 132
 133         li {
 134                         line-height: 64 * @unit_base;
 135                         min-height: 64 * @unit_base;
 136                         min-width: 96 * @unit_base;
 137
 138             float: left;
 139             display: inline-block;
 140             border-left: 1px solid @color_ctxpopup_border_left;
 141             border-right: 1px solid @color_ctxpopup_border_right;
 142             text-align: center;
 143         }
 144
 145                 li:first-of-type {
 146                         border-top-left-radius: @border_radius;
 147                         border-bottom-left-radius: @border_radius;
 148
 149             border-left: none;
 150         }
 151
 152         li:last-of-type {
 153                         border-top-right-radius: @border_radius;
 154                         border-bottom-right-radius: @border_radius;
 155
 156             border-right: none;
 157             margin-right: 0;
 158         }
 159
 160                 li:active, td:active {
 161                         background: @color_ctxbutton_press;
 162                 }
 163     }
 164
 165     .button {
 166         table .ui-btn {
 167             margin: 0 * @unit_base;
 168             padding: 0;
 169             height: 56 * @unit_base;
 170             width: 132 * @unit_base;
 171         }
 172     }
 173
 174 }
 175
 176 .ui-arrow {
 177         border-style: solid;
 178         border-width: 10px;
 179         width: 0;
 180         height: 0px;
 181         position: absolute;
 182         &.top {
 183                 border-color: transparent transparent @color_ctxpopup_background transparent;
 184         }
 185         &.left {
 186                 border-color: transparent transparent transparent @color_ctxpopup_background;
 187         }
 188         &.right {
 189                 border-color: transparent @color_ctxpopup_background transparent transparent;
 190         }
 191         &.bottom {
 192                 border-color: @color_ctxpopup_background transparent transparent transparent;
 193         }
 194 }
 195
 196 .ui-ctxpopup-container
 197 {
 198         z-index: 1200;
 199         display: inline-bloack;
 200         position: absolute;
 201         padding: 0;
 202         outline: 0;
 203         .ui-popup
 204         {
 205                 border: none;
 206                 background: @color_ctxpopup_background;
 207                 .LESSborder-radius-all(@border_radius);
 208         }
 209         .ui-listview li:first-child {
 210                 border-top-left-radius: @border_radius;
 211                 border-top-right-radius: @border_radius;
 212         }
 213 }
 214
 215 .poptop {
 216         -webkit-transform-origin: 0% 0%;
 217         -moz-transform-origin: 0% 0%;
 218 }
 219
 220 .poptop.in {
 221         -webkit-transform: scale(1);
 222         -moz-transform: scale(1);
 223     opacity: 1;
 224         -webkit-animation-name: scalepopin;
 225         -moz-animation-name: scalepopin;
 226         -webkit-animation-duration: 350ms;
 227         -moz-animation-duration: 350ms;
 228 }
 229
 230 .poptop.out {
 231         -webkit-animation-name: fadeout;
 232         -moz-animation-name: fadeout;
 233         opacity: 0;
 234         -webkit-animation-duration: 100ms;
 235         -moz-animation-duration: 100ms;
 236 }
 237
 238 .poptop.in.reverse {
 239         -webkit-animation-name: fadein;
 240         -moz-animation-name: fadein;
 241 }
 242
 243 .poptop.out.reverse {
 244         -webkit-transform: scale(.8);
 245         -moz-transform: scale(.8);
 246         -webkit-animation-name: scalepopout;
 247         -moz-animation-name: scalepopout;
 248 }
 249
 250 @-webkit-keyframes scalepopin {
 251     from {
 252         -webkit-transform: scale(.8);
 253         opacity: 0;
 254     }
 255     to {
 256         -webkit-transform: scale(1);
 257         opacity: 1;
 258     }
 259 }
 260
 261 .popbottom {
 262         -webkit-transform-origin: 0% 100%;
 263         -moz-transform-origin: 0% 100%;
 264 }
 265
 266 .popbottom.in {
 267         -webkit-transform: scale(1);
 268         -moz-transform: scale(1);
 269     opacity: 1;
 270         -webkit-animation-name: scalepopin;
 271         -moz-animation-name: scalepopin;
 272         -webkit-animation-duration: 350ms;
 273         -moz-animation-duration: 350ms;
 274 }
 275
 276 .popbottom.out {
 277         -webkit-animation-name: fadeout;
 278         -moz-animation-name: fadeout;
 279         opacity: 0;
 280         -webkit-animation-duration: 100ms;
 281         -moz-animation-duration: 100ms;
 282 }
 283
 284 .popbottom.in.reverse {
 285         -webkit-animation-name: fadein;
 286         -moz-animation-name: fadein;
 287 }
 288
 289 .popbottom.out.reverse {
 290         -webkit-transform: scale(.8);
 291         -moz-transform: scale(.8);
 292         -webkit-animation-name: scalepopout;
 293         -moz-animation-name: scalepopout;
 294 }
 295
 296 @-moz-keyframes scalepopin {
 297     from {
 298         -moz-transform: scale(.8);
 299         opacity: 0;
 300     }
 301     to {
 302         -moz-transform: scale(1);
 303         opacity: 1;
 304     }
 305 }
 306
 307 @-webkit-keyframes scalepopout {
 308     from {
 309         -webkit-transform: scale(1);
 310         opacity: 1;
 311     }
 312     to {
 313         -webkit-transform: scale(.8);
 314         opacity: 0;
 315     }
 316 }
 317
 318 @-moz-keyframes scalepopout {
 319     from {
 320         -moz-transform: scale(1);
 321         opacity: 1;
 322     }
 323     to {
 324         -moz-transform: scale(.8);
 325         opacity: 0;
 326     }
 327 }