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         .ui-listview li:last-child {
  48                 border-bottom-left-radius: @border_radius;
  49                 border-bottom-right-radius: @border_radius;
  50         }
  51
  52         .ui-listview li:first-child {
  53                 border-top-left-radius: @border_radius;
  54                 border-top-right-radius: @border_radius;
  55         }
  56
  57     .ui-listview {
  58                 max-width: 620 * @unit_base;
  59                 border: none;
  60     }
  61
  62         .ui-listview > .ui-li {
  63                 color: @color_ctxpopup_text;
  64                 border-bottom-color: @color_ctxpopup_border_bottom;
  65                 border-top-width: 1px;
  66                 border-top-color: @color_ctxpopup_border_top;
  67                 margin-left: 0;
  68                 margin-right: 0;
  69                 &:first-child, &:last-child {
  70                         border-top-width: 0px;
  71                 }
  72                 .ui-btn-inner {
  73                         margin: 0;
  74                         padding-left: 10 * @unit_base;
  75                         padding-right: 10 * @unit_base;
  76                 }
  77         }
  78
  79         .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 {
  80           color: @color_ctxpopup_text;
  81         }
  82
  83     .ui-listview > .ui-li:last-child {
  84         border: none;
  85     }
  86
  87     .horizontal {
  88                 color: @color_ctxpopup_text;
  89                 .icon .ui-btn {
  90                         padding: 0;
  91                         background: transparent ! important;
  92                         .ui-btn-icon-only {
  93                                 width: 96 * @unit_base;
  94                                 height: 64 * @unit_base;
  95                                 padding: 0;
  96                         }
  97
  98                         .ui-icon {
  99                                 top: 0;
 100                                 height: inherit;
 101                                 width: inherit;
 102                                 margin: 0;
 103                                 background-position: center;
 104                                 .LESSbackground-size( 48 * @unit_base, 48 * @unit_base );
 105                         }
 106                 }
 107
 108                 .text {
 109                         padding: 0 10 * @unit_base;
 110                         min-width: 48 * @unit_base;
 111                 }
 112
 113
 114         a.ui-link {
 115             color: @color_ctxpopup_text;
 116             text-decoration: none;
 117         }
 118
 119         ul {
 120             padding: 0;
 121             display: inline-block;
 122             list-style: none;
 123             vertical-align: middle;
 124             margin: 0;
 125         }
 126
 127         li {
 128                         line-height: 32 * @unit_base;
 129                         min-height: 32 * @unit_base;
 130                         min-width: 48 * @unit_base;
 131
 132             float: left;
 133             display: inline-block;
 134             border-right: 1px solid @color_ctxpopup_border_right;
 135             text-align: center;
 136         }
 137
 138                 li:first-of-type {
 139                         border-top-left-radius: @border_radius;
 140                         border-bottom-left-radius: @border_radius;
 141                         border-top-right-radius: 0px ! important;
 142             border-left: none;
 143         }
 144
 145         li:last-of-type {
 146                         border-top-right-radius: @border_radius;
 147                         border-bottom-right-radius: @border_radius;
 148
 149
 150             border-right: none;
 151             margin-right: 0;
 152         }
 153
 154                 .ui-li {
 155                         &:first-child, &:last-child {
 156                                 border-left-width: 0px;
 157                         }
 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 }