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

   1
   2 @import "config.less";
   3
   4 /***************************************************************************
   5                     Header / Footer
   6                     NavigationBar
   7 ***************************************************************************/
   8
   9 .ui-bar-s {
  10         border: none;
  11         background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
  12         color: @color_bar_title_text;
  13         font-family: Helvetica, Arial, sans-serif;
  14         font-weight: bold;
  15         font-size : 28 * @unit_base;
  16
  17         .ui-link-inherit {
  18                 color: @color_bar_title_text;
  19         }
  20
  21
  22         > .ui-btn.ui-btn-back {
  23                 background : transparent;
  24
  25                 position : absolute;
  26                 right : 0px;
  27
  28                 .ui-icon-header-back-btn {
  29                         top : 8 * @unit_base;
  30                         left : auto;
  31                         right : 13 * @unit_base;
  32
  33                         margin-top : 0px
  34                 }
  35         }
  36 }
  37
  38 /* Header style */
  39 .ui-header.ui-bar-s{
  40         position : fixed;
  41         top : 0px;
  42
  43         min-height : 55 * @unit_base;
  44
  45         .ui-title {
  46                 display: inline-block;
  47                 color : @color_bar_title_text;
  48                 min-height : 28 * @unit_base;
  49                 max-height : 34 * @unit_base; /* temporary UX strange */
  50                 font-size  : 28 * @unit_base;
  51                 text-overflow: ellipsis;
  52                 overflow: hidden;
  53                 white-space: nowrap;
  54                 outline: 0 !important;
  55
  56                 text-align: left;
  57                 margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
  58
  59         }
  60
  61         /* header button position : need to press area more... */
  62         >.ui-btn {
  63                 .ui-btn-inner.ui-btn-icon-only .ui-icon {
  64                         left : 0px;
  65                         top : 0px;
  66                         margin-top : 0px;
  67                 }
  68         }
  69
  70         > .ui-btn.ui-btn-back {
  71                 right : 13 * @unit_base;
  72         }
  73
  74         img {
  75                 display: inline-block;
  76                 height: 16 * @unit_base;
  77                 width: 16 * @unit_base;
  78                 margin-left: 8 * @unit_base;
  79         }
  80
  81         .ui-title-text-sub {
  82                 position : absolute;
  83                 top : 36 * @unit_base;
  84                 left : 8 * @unit_base;
  85
  86                 font-size : 12 * @unit_base;
  87
  88                 img {
  89                         height: 16 * @unit_base;
  90                         width: 16 * @unit_base;
  91                         margin-left: 8 * @unit_base;
  92                 }
  93         }
  94
  95         > .ui-btn{
  96                 position : absolute;
  97                 top : 16 * @unit_base;
  98                 margin-top : 0px;
  99
 100                 height : 34 * @unit_base;
 101                 width : 34 * @unit_base;
 102
 103                 background: transparent;
 104                 color   : @color_bar_title_button_text;
 105         }
 106         &.ui-title-tabbar >.ui-btn {
 107                 // NOTE: there is an issue that when tabbar and button are
 108                 // used together in the header, the lower part of buttons is
 109                 // hidden by the tabbar. (N_SE-22253) Although No specification
 110                 // for this case is found in the GUI guide, this one is added
 111                 // to resolve this issue.
 112                 top: 8 * @unit_base;
 113         }
 114
 115         > .ui-btn.ui-btn-icon_only {
 116                 -o-border-radius : 0px;
 117                 -ms-border-radius : 0px;
 118                 -moz-border-radius : 0px;
 119                 -webkit-border-radius : 0px;
 120                 border-radius : 0px;
 121         }
 122
 123         > .ui-btn:nth-child(2) {
 124                 right : 13 * @unit_base;
 125         }
 126
 127         > .ui-btn:nth-child(3) {
 128                 right : 56 * @unit_base;
 129         }
 130
 131         > img + h1 + .ui-btn:nth-child(3) {
 132                 right : 13 * @unit_base;
 133         }
 134
 135         > img + h1 + .ui-btn:nth-child(3) + .ui-btn {
 136                 right : 56 * @unit_base;
 137         }
 138
 139         > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) {
 140                 right : 11 * @unit_base;
 141         }
 142
 143         > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) + .ui-btn {
 144                 right : 58 * @unit_base;
 145         }
 146
 147         > .ui-btn.ui-btn-down-s {
 148                 background : @color_bar_btn_press;
 149                 color : @color_bar_title_button_text_press;
 150         }
 151
 152         &.ui-title-multiline {
 153                 .ui-title {
 154                         min-height : 24 * @unit_base;
 155                         max-height : 24 * @unit_base; /* temporary UX strange */
 156                         font-size  : 22 * @unit_base;
 157
 158                         margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
 159                 }
 160         }
 161
 162 }
 163
 164 .ui-footer.ui-bar-s {
 165         height : 49 * @unit_base;
 166         text-align : center;
 167         bottom : 0px;
 168         >.ui-btn.ui-btn-back,
 169         >[data-icon="naviframe-more"] {
 170                 background : transparent;
 171
 172                 >.ui-btn-icon-only {
 173                         width : 56 * @unit_base;
 174                         height : 49 * @unit_base;
 175                         padding : 0px;
 176                         -webkit-box-shadow : none /* temp code */
 177                 }
 178         }
 179
 180         [data-icon="naviframe-more"] {
 181                 position : absolute;
 182                 left : 0 * @unit_base;
 183                 top : 0 * @unit_base;
 184
 185                 box-shadow : none;
 186                 border-width : 0px;
 187
 188                 .ui-icon-naviframe-more {
 189                         left : 13 * @unit_base;
 190                         top : 8 * @unit_base;
 191
 192                         margin-top : 0px;
 193                 }
 194                 .ui-btn-inner {
 195                         border: none;
 196                         background: transparent;
 197                         box-shadow: none;
 198                 }
 199         }
 200         >[data-role="button"] {
 201                 font-size : 15 * @unit_base;
 202                 font-weight : bold;
 203                 color : @color_tabbar_btn_normal;
 204         }
 205
 206         [data-role="controlgroup"] {
 207                 margin-left : auto;
 208                 margin-right : auto;
 209                 margin-top : 6 * @unit_base; /* temp value */
 210                 margin-bottom : 6 * @unit_base; /* temp value */
 211                 padding-left : 58 * @unit_base;
 212                 padding-right : 58 * @unit_base;
 213
 214
 215                 [data-role="button"] {
 216                         background : transparent;
 217
 218                         border-style : solid;
 219                         border-color : @color_bar_divider_line;
 220                         border-top-width : 0px;
 221                         border-bottom-width : 0px;
 222                         border-left-width : 1px;
 223                         border-right-width : 1px;
 224
 225                         .LESSborder-radius-all(0);
 226
 227                         box-shadow : none;
 228
 229                         padding : 0px;
 230                         margin-left : -4 * @unit_base;
 231                         margin-right : -5 * @unit_base;
 232                         &.ui-btn-hover-s {
 233                                 .LESSborder-radius-all(0);
 234                         }
 235                         &.ui-btn-down-s, .ui-btn-active-s {
 236                                 .LESSborder-radius-all(0);
 237                                 .ui-btn-inner {
 238                                         background : @color_bg;
 239                                         .ui-btn-text {
 240                                                 color : @color_bar_title_text;
 241                                         }
 242                                 }
 243                         }
 244
 245                         >.ui-btn-inner {
 246                                 .LESSborder-radius-all(0);
 247                                 border : 0px solid;
 248                                 box-shadow : none;
 249                         }
 250                         .ui-btn-text {
 251                                 font-size : 17 * @unit_base;
 252                                 color : rgba(58, 58, 58, 1);
 253                         }
 254
 255                         &.ui-corner-right {
 256                                 border-right-width : 0px;
 257                         }
 258
 259                         &.ui-corner-left {
 260                                 border-left-width : 0px;
 261                         }
 262                 }
 263                 }
 264
 265         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 266                 top : 6 * @unit_base;
 267         }
 268
 269         > p {
 270                 margin-top : 8 * @unit_base;
 271                 margin-bottom : 8 * @unit_base;
 272         }
 273         > h1, h2, h3, h4, h5, h6 {
 274                 display: inline-block;
 275         }
 276 }
 277
 278 /***************************************************************************
 279                     Content Top calculate
 280 ***************************************************************************/
 281 .ui-content {
 282         position : relative;
 283         top : 0;
 284 }
 285
 286 /***************************************************************************
 287                     Content Top calculate
 288 ***************************************************************************/
 289
 290
 291 .ui-body-s {
 292         border: 1px solid #2a2a2a;
 293         background:                     @color_bg;
 294         color:                                  @color_text;
 295         font-weight: normal;
 296
 297         font-family: Helvetica, Arial, sans-serif;
 298
 299         .ui-link-inherit { color:       #fff; }
 300         .ui-link {
 301                 /* ui-body-link */
 302                 color: #2489CE;
 303                 font-weight: bold;
 304                 &:hover { color: #2489CE; }
 305                 &:active { color: #2489CE; }
 306                 &:visited {     color: #2489CE; }
 307         }
 308 }
 309
 310 .ui-br {
 311 }
 312 .ui-btn-box-s {
 313         padding: 1 * @unit_base;
 314 }
 315 .ui-btn-box-s.ui-btn-up-s {
 316         .LESSbutton_box_style;
 317         .LESSborder-radius-all( 0.3rem );
 318         .LESSbutton_text1_style;
 319 }
 320
 321 .ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
 322         .LESSborder-radius-all( 1.2rem );
 323 }
 324
 325 .ui-btn-box-s .ui-btn-inner {
 326         border: 1px solid;
 327         border-color: rgb(199, 197, 190);
 328         .LESSborder-radius-all( 0.3rem );
 329         .LESSbox-boxsizing( border-box );
 330         .LESSbutton_inner_box_style;
 331         height: 100%;
 332 }
 333
 334 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
 335         .LESSborder-radius-all( 1.2rem );
 336 }
 337
 338 .ui-ctxpopup .ui-btn-box-s{
 339         &.ui-btn-up-s,
 340         &.ui-btn-hover-s {
 341                 background: transparent !important;
 342                 border: none;
 343                 box-shadow: none;
 344                 padding: 0;
 345                 color: white !important;
 346         }
 347         &.ui-btn-down-s {
 348                 background: @color_ctxbutton_press !important;
 349                 border: none;
 350                 box-shadow: none;
 351                 padding: 0;
 352                 color: white !important;
 353                 .LESSborder-radius-all( 0 );
 354         }
 355         .ui-btn-inner {
 356                 background: transparent ! important;
 357                 box-shadow: none;
 358                 border: none;
 359         }
 360 }
 361
 362 .ui-ctxpopup .ui-btn-down-s {
 363         background: @color_ctxbutton_press !important;
 364 }
 365
 366 .ui-header .ui-btn-box-s,
 367 .ui-footer .ui-btn-box-s,
 368 .ui-btn-back.ui-btn-up-s,
 369 .ui-btn-back.ui-btn-hover-s,
 370 .ui-btn-back.ui-btn-down-s,
 371 .ui-popup-container .ui-btn-box-s {
 372         font-weight: normal;
 373         .LESSborder-radius-all( 0.9 rem );
 374 }
 375
 376 .ui-btn-box-s.ui-btn-hover-s {
 377         .LESSbutton_hover_style;
 378         .LESSbutton_text1_style;
 379         .LESSborder-radius-allimportant( 0.3em );
 380 }
 381 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
 382         .LESSborder-radius-allimportant( 1em );
 383 }
 384 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
 385         .LESSborder-radius-allimportant( 1.2em );
 386 }
 387 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
 388         .LESSborder-radius-allimportant( 1.2em );
 389 }
 390 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
 391         .LESSbutton_down_style;
 392 }
 393
 394 .ui-btn-up-s,
 395 .ui-btn-hover-s,
 396 .ui-btn-down-s {
 397         font-family: Helvetica, Arial, sans-serif;
 398         text-decoration: none;
 399 }
 400
 401 /*
 402 /* Structure */
 403 /* links within "buttons"
 404 -----------------------------------------------------------------------------------------------------------*/
 405
 406 a.ui-link-inherit {
 407         text-decoration: none !important;
 408 }
 409
 410
 411 /* Active class used as the "on" state across all themes
 412 -----------------------------------------------------------------------------------------------------------*/
 413
 414 /* button default color for active state */
 415 .ui-btn-active {
 416         /* global-active */
 417         color:                                  @color_button_text_normal;
 418         cursor: pointer;
 419         text-decoration: none;
 420         background:                     @color_button_press;
 421         outline: none;
 422         //font-family: Helvetica, Arial, sans-serif;
 423
 424         a.ui-link-inherit {
 425                 color:                                  @color_button_text_normal;
 426         }
 427 }
 428
 429 /* button inner top highlight
 430 -----------------------------------------------------------------------------------------------------------*/
 431
 432 .ui-btn-inner {
 433         //border : none;
 434 }
 435
 436
 437
 438
 439 /* corner rounding classes
 440 -----------------------------------------------------------------------------------------------------------*/
 441
 442 .ui-corner-tl {
 443         .LESSborder-radius-topleft(.3em);
 444 }
 445 .ui-corner-tr {
 446         .LESSborder-radius-topright(.3em);
 447 }
 448 .ui-corner-bl {
 449         .LESSborder-radius-bottomleft(.3em);
 450 }
 451 .ui-corner-br {
 452         .LESSborder-radius-bottomright(.3em);
 453 }
 454 .ui-corner-top {
 455         .LESSborder-radius-topleft(.3em);
 456         .LESSborder-radius-topright(.3em);
 457 }
 458 .ui-corner-bottom {
 459         .LESSborder-radius-bottomleft(.3em);
 460         .LESSborder-radius-bottomright(.3em);
 461 }
 462 .ui-corner-right {
 463         .LESSborder-radius-topright(.3em);
 464         .LESSborder-radius-bottomright(.3em);
 465 }
 466 .ui-corner-left {
 467         .LESSborder-radius-topleft(.3em);
 468         .LESSborder-radius-bottomleft(.3em);
 469 }
 470 .ui-corner-all {
 471         //.LESSborder-radius-all(.3em);
 472 }
 473 .ui-corner-none {
 474         .LESSborder-radius-all(0);
 475 }
 476
 477 /***************************************************************************
 478                     Icon (Naviframe)
 479 ***************************************************************************/
 480 .ui-header, .ui-footer {
 481         .ui-btn .ui-btn-icon-only .ui-icon {
 482                 width: 32 * @unit_base;
 483                 height: 32 * @unit_base;
 484
 485         }
 486 }
 487
 488 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
 489         width: 32 * @unit_base;
 490         height: 32 * @unit_base;
 491
 492         background-repeat: no-repeat;
 493         background-size: 100% 100%;
 494
 495 }
 496
 497 .ui-btn-up-s {
 498         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 499         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 500         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
 501         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
 502         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
 503 }
 504
 505 .ui-btn-down-s, .ui-btn-hover-s {
 506         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
 507         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
 508         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
 509         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
 510         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
 511 }
 512
 513 /* Interaction cues
 514 -----------------------------------------------------------------------------------------------------------*/
 515 .ui-disabled {
 516         filter: Alpha(Opacity=30);
 517         opacity: .3;
 518         zoom: 1;
 519 }
 520 .ui-disabled,
 521 .ui-disabled a {
 522         cursor: default !important;
 523         pointer-events: none;
 524 }
 525