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         table {
 126             border: none;
 127             border-spacing: 0;
 128         }
 129
 130         td {
 131                         * {
 132                                 display: -moz-box;
 133                                 -moz-box-pack: center;
 134                                 display: -webkit-box;
 135                                 -webkit-box-pack: center;
 136                                 display: box;
 137                                 box-pack: center;
 138                         }
 139
 140             border-left: 1px solid @color_ctxpopup_border_left;
 141             border-right: 1px solid @color_ctxpopup_border_right;
 142             border-top: 1px solid @color_ctxpopup_border_right;
 143             border-bottom: 1px solid @color_ctxpopup_border_left;
 144         }
 145
 146         td:first-of-type {
 147             border-left: none;
 148         }
 149
 150         td:last-of-type {
 151             border-right: none;
 152         }
 153
 154         tr:first-of-type > td {
 155             border-top: none;
 156         }
 157
 158         tr:last-of-type > td {
 159             border-bottom: none;
 160         }
 161
 162                 tr:first-of-type > td:first-of-type {
 163                         border-top-left-radius: @border_radius;
 164                 }
 165
 166                 tr:first-of-type > td:last-of-type {
 167                         border-top-right-radius: @border_radius;
 168                 }
 169
 170                 tr:last-of-type > td:first-of-type {
 171                         border-bottom-left-radius: @border_radius;
 172                 }
 173
 174                 tr:last-of-type > td:last-of-type {
 175                         border-bottom-right-radius: @border_radius;
 176                 }
 177
 178         ul {
 179             padding: 0;
 180             display: inline-block;
 181             list-style: none;
 182             vertical-align: middle;
 183             margin: 0;
 184         }
 185
 186         li {
 187                         line-height: 64 * @unit_base;
 188                         min-height: 64 * @unit_base;
 189                         min-width: 96 * @unit_base;
 190
 191             float: left;
 192             display: inline-block;
 193             border-left: 1px solid @color_ctxpopup_border_left;
 194             border-right: 1px solid @color_ctxpopup_border_right;
 195             text-align: center;
 196         }
 197
 198                 li:first-of-type {
 199                         border-top-left-radius: @border_radius;
 200                         border-bottom-left-radius: @border_radius;
 201
 202             border-left: none;
 203         }
 204
 205         li:last-of-type {
 206                         border-top-right-radius: @border_radius;
 207                         border-bottom-right-radius: @border_radius;
 208
 209             border-right: none;
 210             margin-right: 0;
 211         }
 212
 213                 li:active, td:active {
 214                         background: @color_ctxbutton_press;
 215                 }
 216     }
 217
 218     .button {
 219         table .ui-btn {
 220             margin: 0 * @unit_base;
 221             padding: 0;
 222             height: 56 * @unit_base;
 223             width: 132 * @unit_base;
 224         }
 225     }
 226
 227 }