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 : @color_bar_naviframe_bg; /* Header Background */
  12         color: @color_bar_title_text;
  13         font-family: @font_family;
  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         > .ui-btn.ui-btn-footer-down {
  24                 background : transparent;
  25
  26                 position : absolute;
  27                 right : 0px;
  28
  29                 .ui-icon-header-back-btn {
  30                         top : 8 * @unit_base;
  31                         left : auto;
  32                         right : 13 * @unit_base;
  33                         margin-top : 0px;
  34                 }
  35         }
  36
  37         > .ui-btn.ui-btn-footer-down {
  38                 border : none;
  39                 box-shadow : none;
  40                 .ui-icon {
  41                         top : 8 * @unit_base;
  42                         margin-top : 0px;
  43                 }
  44         }
  45 }
  46
  47 /* Header style */
  48 .ui-header.ui-bar-s{
  49         position : fixed;
  50         top : 0px;
  51
  52         min-height : 48 * @unit_base;
  53
  54         .ui-title {
  55                 display: inline-block;
  56                 color : @color_bar_title_text;
  57                 min-height : 25 * @unit_base;
  58                 max-height : 31 * @unit_base; /* temporary UX strange */
  59                 font-size  : 25 * @unit_base;
  60                 font-weight : 500; /* tizen font weight tuning */
  61                 text-overflow: ellipsis;
  62                 text-shadow : 0px 2px @color_bar_title_shadow;
  63                 overflow: hidden;
  64                 white-space: nowrap;
  65                 outline: 0 !important;
  66
  67                 text-align: left;
  68                 margin: 10*@unit_base 13*@unit_base 9*@unit_base 13*@unit_base;
  69                 /* text align center tuning */
  70         }
  71
  72         /* header button position : need to press area more... */
  73         >.ui-btn,
  74         >.naviframe-button.ui-btn {
  75                 .ui-btn-inner.ui-btn-icon-only {
  76                         .LESSbox-boxsizing( border-box );
  77                         height : 100%;
  78                         .ui-icon {
  79                                 top : 0px;
  80                                 left : 0px;
  81                         }
  82                 }
  83         }
  84
  85         >.naviframe-button.ui-btn {
  86                 .ui-btn-inner .ui-icon {
  87                         margin-top : 0px;
  88                 }
  89         }
  90
  91         >.ui-btn:not(.ui-btn-icon-notext),
  92         >.naviframe-button.ui-btn:not(.ui-btn-icon-notext) {
  93                 .ui-btn-inner.ui-btn-icon-only {
  94                         padding-left : 0px;
  95                 }
  96         }
  97
  98         >.ui-btn:not(.ui-btn-icon_only),
  99         >.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
 100                 width : 62 * @unit_base;
 101                 height : 48 * @unit_base;
 102                 padding : 0px;
 103                 top : 0px;
 104
 105                 border-left-width : 1px;
 106                 border-left-style : solid;
 107                 border-left-color : @color_bar_divider_line;
 108
 109                 .LESSborder-radius-all(0);
 110
 111                 .ui-btn-inner {
 112                         padding : 0;
 113                         padding-top : 0 * @unit_base;
 114                         padding-bottom : 0 * @unit_base;
 115                         margin-top : 12 * @unit_base;
 116                         margin-bottom : 12 * @unit_base;
 117                         .ui-btn-text {
 118                                 font-size : 16 * @unit_base;
 119                         }
 120                 }
 121                 &.ui-btn-down-s {
 122                         background-color : @color_list_press;
 123                 }
 124         }
 125
 126
 127         > .ui-btn.ui-btn-back,
 128         > .ui-btn.ui-btn-footer-down {
 129                 right : 13 * @unit_base;
 130                 .ui-icon-header-back-btn {
 131                         left : 0px;
 132                 }
 133         }
 134
 135         img {
 136                 position : absolute;
 137                 display: inline-block;
 138                 height: 22 * @unit_base;
 139                 width: 22 * @unit_base;
 140                 margin-left: 13 * @unit_base;
 141                 margin-top : 13 * @unit_base;
 142         }
 143
 144         .ui-title-text-sub {
 145                 position : absolute;
 146                 top : 29 * @unit_base;
 147                 left : 13 * @unit_base;
 148
 149                 font-size : 16 * @unit_base;
 150                 font-weight : 500;
 151                 text-shadow : 0px 2px @color_bar_title_shadow;
 152                 text-overflow : ellipsis;
 153                 white-space : nowrap;
 154                 overflow : hidden;
 155         }
 156
 157         > .ui-btn,
 158         > .naviframe-button.ui-btn {
 159                 position : absolute;
 160                 top : 9 * @unit_base;
 161                 font-size : 18 * @unit_base;
 162                 margin-top : 0px;
 163
 164                 height : 34 * @unit_base;
 165                 width : 34 * @unit_base;
 166
 167                 padding-left : 13 * @unit_base;
 168                 padding-right : 13 * @unit_base;
 169
 170                 background: transparent;
 171                 color   : @color_bar_title_button_text;
 172         }
 173         &.ui-title-tabbar >.ui-btn {
 174                 // NOTE: there is an issue that when tabbar and button are
 175                 // used together in the header, the lower part of buttons is
 176                 // hidden by the tabbar. (N_SE-22253) Although No specification
 177                 // for this case is found in the GUI guide, this one is added
 178                 // to resolve this issue.
 179                 top: 8 * @unit_base;
 180         }
 181
 182         > .ui-btn.ui-btn-icon_only,
 183         > .naviframe-button.ui-btn.ui-btn-icon_only {
 184                 top : 8 * @unit_base;
 185                 width : 32 * @unit_base;
 186                 height : 32 * @unit_base;
 187
 188                 border-left-width : 1px;
 189                 border-left-style : solid;
 190                 border-left-color : @color_bar_divider_line;
 191                 border-top-left-radius : 0px;
 192                 border-bottom-left-radius : 0px;
 193         }
 194
 195         .ui-btn-right-0 {
 196                 right : 0 * @unit_base;
 197         }
 198
 199         .ui-btn-right-1 {
 200                 right : 58 * @unit_base;
 201         }
 202
 203         > .ui-btn:not(.ui-btn-icon_only):nth-child(2),
 204         > .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(2) {
 205                 right : 0 * @unit_base;
 206         }
 207
 208         > .ui-btn:not(.ui-btn-icon_only):nth-child(3),
 209         > .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) {
 210                 right : 62 * @unit_base;
 211         }
 212
 213         > img + h1 {
 214                 padding-left : 30 * @unit_base;
 215         }
 216
 217         > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3),
 218         > img + h1 + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) {
 219                 right : 0 * @unit_base;
 220         }
 221
 222         > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3) + .ui-btn:not(.ui-btn-icon_only),
 223         > img + h1 + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) + .naviframe-button.ui-btn:not(.ui-btn-icon_only) {
 224                 right : 62 * @unit_base;
 225         }
 226
 227         > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4),
 228         > img + h1 + span.ui-title-text-sub + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(4) {
 229                 right : 0 * @unit_base;
 230         }
 231
 232         > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4) + .ui-btn:not(.ui-btn-icon_only),
 233         > img + h1 + span.ui-title-text-sub + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(4) + .naviframe-button.ui-btn:not(.ui-btn-icon_only) {
 234                 right : 62 * @unit_base;
 235         }
 236
 237         > .ui-btn.ui-btn-down-s {
 238                 background : @color_bar_btn_press;
 239                 color : @color_bar_title_button_text_press;
 240         }
 241
 242         &.ui-title-multiline {
 243                 img {
 244                         margin-top : 15 * @unit_base; /* tuning */
 245                 }
 246
 247                 .ui-title {
 248                         min-height : 24 * @unit_base;
 249                         max-height : 24 * @unit_base; /* temporary UX strange */
 250                         font-size  : 22 * @unit_base;
 251
 252                         margin: 4*@unit_base 13*@unit_base 22*@unit_base 13*@unit_base;
 253                 }
 254                 img + .ui-title + .ui-title-text-sub {
 255                         left : 42 * @unit_base;
 256                 }
 257         }
 258
 259 }
 260
 261 .ui-footer.ui-bar-s {
 262         height : 49 * @unit_base;
 263         text-align : center;
 264         bottom : 0px;
 265         background : @color_bar_toolbar_bg;
 266
 267         >.ui-btn.ui-btn-back,
 268         >.ui-btn.ui-btn-footer-down,
 269         >[data-icon="naviframe-more"] {
 270                 background : transparent;
 271
 272                 >.ui-btn-icon-only {
 273                         width : 56 * @unit_base;
 274                         height : 49 * @unit_base;
 275                         padding : 0px;
 276                         -webkit-box-shadow : none /* temp code */
 277                 }
 278         }
 279
 280         >.ui-btn.ui-btn-back,
 281         >.ui-btn.ui-btn-footer-down {
 282                 top : 0px;
 283         }
 284
 285         >.ui-btn.ui-btn-footer-down {
 286                 .ui-icon {
 287                         left : auto;
 288                         right : 13 * @unit_base;
 289                 }
 290         }
 291
 292         [data-icon="naviframe-more"] {
 293                 position : absolute;
 294                 left : 0 * @unit_base;
 295                 top : 0 * @unit_base;
 296
 297                 box-shadow : none;
 298                 border-width : 0px;
 299
 300                 .ui-icon-naviframe-more {
 301                         left : 13 * @unit_base;
 302                         top : 8 * @unit_base;
 303
 304                         margin-top : 0px;
 305                 }
 306                 .ui-btn-inner {
 307                         border: none;
 308                         background: transparent;
 309                         box-shadow: none;
 310                 }
 311         }
 312         >[data-role="button"] {
 313                 font-size : 20 * @unit_base;
 314                 font-weight : bold;
 315                 color : @color_bar_toolbar_button_text;
 316                 background-image : none;
 317                 border-width : 0px;
 318
 319                 >.ui-btn-inner {
 320                         padding-top : 0px;
 321                         padding-bottom : 0px;
 322                 }
 323         }
 324
 325         [data-role="controlgroup"] {
 326                 margin-left : auto;
 327                 margin-right : auto;
 328                 margin-top : 5 * @unit_base;
 329                 margin-bottom : 5 * @unit_base;
 330
 331                 [data-role="button"] {
 332                         background : transparent;
 333                         vertical-align : middle;
 334                         border-style : solid;
 335                         border-color : @color_bar_divider_line;
 336                         border-top-width : 0px;
 337                         border-bottom-width : 0px;
 338                         border-left-width : 1px;
 339                         border-right-width : 1px;
 340
 341                         .LESSborder-radius-all(0);
 342                         border-radius : 0px !important;
 343
 344                         box-shadow : none;
 345
 346                         padding : 0px;
 347                         margin-left : -4 * @unit_base;
 348                         margin-right : -5 * @unit_base;
 349                         &.ui-btn-hover-s,
 350                         &.ui-btn-up-s {
 351                                 .LESSborder-radius-all(0);
 352                         }
 353                         &.ui-btn-down-s, .ui-btn-active-s {
 354                                 .LESSborder-radius-all(0);
 355                                 .ui-btn-inner {
 356                                         background : @color_bar_toolbar_bg;
 357                                         .ui-btn-text {
 358                                                 color : @color_bar_title_text;
 359                                         }
 360                                 }
 361                         }
 362
 363                         >.ui-btn-inner {
 364                                 .LESSborder-radius-all(0);
 365                                 border : 0px solid;
 366                                 box-shadow : none;
 367                         }
 368                         .ui-btn-text {
 369                                 vertical-align : middle;
 370                                 font-size : 17 * @unit_base;
 371                                 color : color_button_text_normal;
 372                         }
 373
 374                         &.ui-corner-right {
 375                                 border-right-width : 0px;
 376                         }
 377
 378                         &.ui-corner-left {
 379                                 border-left-width : 0px;
 380                         }
 381                 }
 382                 }
 383
 384         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 385                 top : 0px;
 386                 padding : 12 * @unit_base 0px;
 387         }
 388
 389         > p {
 390                 margin-top : 8 * @unit_base;
 391                 margin-bottom : 8 * @unit_base;
 392         }
 393         > h1, h2, h3, h4, h5, h6 {
 394                 display: inline-block;
 395         }
 396
 397         >.ui-btn.ui-btn-box-s {
 398                 box-shadow: none;
 399                 bottom: 0px;
 400                 .LESSborder-radius-allimportant( 0em );
 401                 .ui-btn-inner {
 402                         .LESSborder-radius-allimportant( 0em );
 403                 }
 404         }
 405
 406         >.ui-btn.ui-btn-down-s.ui-btn-box-s  {
 407                 &:not([data-icon="naviframe-more"]) {
 408                         background-color : @color_bar_navbar_press !important;
 409                 }
 410         }
 411
 412         >.ui-footer-btn-border {
 413                 >.ui-btn-inner {
 414                         border-left : 2px solid @color_bar_toolbar_divider;
 415                 }
 416         }
 417 }
 418
 419 /***************************************************************************
 420                     Content Top calculate
 421 ***************************************************************************/
 422 .ui-content {
 423         position : relative;
 424         top : 0;
 425 }
 426
 427 /***************************************************************************
 428                     Content Top calculate
 429 ***************************************************************************/
 430
 431
 432 .ui-body-s {
 433         border: 1px solid #2a2a2a;
 434         background:                     @color_bg;
 435         color:                                  @color_text;
 436         font-weight: normal;
 437
 438         font-family: @font_family;
 439
 440         .ui-link-inherit { color:       #fff; }
 441         .ui-link {
 442                 /* ui-body-link */
 443                 color: #2489CE;
 444                 font-weight: bold;
 445                 &:hover { color: #2489CE; }
 446                 &:active { color: #2489CE; }
 447                 &:visited {     color: #2489CE; }
 448         }
 449 }
 450
 451 .ui-br {
 452 }
 453 .ui-btn-box-s {
 454         padding: 1 * @unit_base;
 455 }
 456
 457 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
 458         .LESSborder-radius-all( 1.2rem );
 459 }
 460
 461 .ui-ctxpopup .ui-btn-box-s{
 462         &.ui-btn-up-s,
 463         &.ui-btn-hover-s {
 464                 background: transparent !important;
 465                 border: none;
 466                 box-shadow: none;
 467                 padding: 0;
 468                 color: white !important;
 469         }
 470         &.ui-btn-down-s {
 471                 background: @color_ctxbutton_press !important;
 472                 border: none;
 473                 box-shadow: none;
 474                 padding: 0;
 475                 color: white !important;
 476                 .LESSborder-radius-all( 0 );
 477         }
 478         .ui-btn-inner {
 479                 background: transparent ! important;
 480                 box-shadow: none;
 481                 border: none;
 482         }
 483 }
 484
 485 .ui-ctxpopup .ui-btn-down-s {
 486         background: @color_ctxbutton_press !important;
 487 }
 488
 489 .ui-header .ui-btn-box-s,
 490 .ui-footer .ui-btn-box-s,
 491 .ui-btn-back.ui-btn-up-s,
 492 .ui-btn-back.ui-btn-hover-s,
 493 .ui-btn-back.ui-btn-down-s,
 494 .ui-btn-footer-down.ui-btn-up-s,
 495 .ui-btn-footer-down.ui-btn-hover-s,
 496 .ui-btn-footer-down.ui-btn-down-s,
 497 .ui-popup-container .ui-btn-box-s {
 498         font-weight: normal;
 499         .LESSborder-radius-all( 0.9 rem );
 500 }
 501
 502 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
 503         .LESSborder-radius-allimportant( 1em );
 504 }
 505 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
 506         .LESSborder-radius-allimportant( 1.2em );
 507 }
 508 .ui-btn-box-s.ui-btn-down-s {
 509         .ui-btn-inner {
 510                 .LESSbutton_down_style;
 511         }
 512 }
 513
 514 .ui-btn-up-s,
 515 .ui-btn-hover-s,
 516 .ui-btn-down-s {
 517         font-family: @font_family;
 518         text-decoration: none;
 519 }
 520
 521 /*
 522 /* Structure */
 523 /* links within "buttons"
 524 -----------------------------------------------------------------------------------------------------------*/
 525
 526 a.ui-link-inherit {
 527         text-decoration: none !important;
 528 }
 529
 530
 531 /* Active class used as the "on" state across all themes
 532 -----------------------------------------------------------------------------------------------------------*/
 533
 534 /* button default color for active state */
 535 .ui-btn-active {
 536         /* global-active */
 537         color: @color_button_text_normal;
 538         cursor: pointer;
 539         text-decoration: none;
 540         background: @color_button_press;
 541         outline: none;
 542
 543         a.ui-link-inherit {
 544                 color: @color_button_text_normal;
 545         }
 546 }
 547
 548
 549 /* corner rounding classes
 550 -----------------------------------------------------------------------------------------------------------*/
 551
 552 .ui-corner-tl {
 553         .LESSborder-radius-topleft(.3em);
 554 }
 555 .ui-corner-tr {
 556         .LESSborder-radius-topright(.3em);
 557 }
 558 .ui-corner-bl {
 559         .LESSborder-radius-bottomleft(.3em);
 560 }
 561 .ui-corner-br {
 562         .LESSborder-radius-bottomright(.3em);
 563 }
 564 .ui-corner-top {
 565         .LESSborder-radius-topleft(.3em);
 566         .LESSborder-radius-topright(.3em);
 567 }
 568 .ui-corner-bottom {
 569         .LESSborder-radius-bottomleft(.3em);
 570         .LESSborder-radius-bottomright(.3em);
 571 }
 572 .ui-corner-right {
 573         .LESSborder-radius-topright(.3em);
 574         .LESSborder-radius-bottomright(.3em);
 575 }
 576 .ui-corner-left {
 577         .LESSborder-radius-topleft(.3em);
 578         .LESSborder-radius-bottomleft(.3em);
 579 }
 580 .ui-corner-none {
 581         .LESSborder-radius-all(0);
 582 }
 583
 584 /***************************************************************************
 585                     Icon (Naviframe)
 586 ***************************************************************************/
 587 .ui-header, .ui-footer {
 588         .ui-btn .ui-btn-icon-only .ui-icon {
 589                 width: 32 * @unit_base;
 590                 height: 32 * @unit_base;
 591
 592         }
 593 }
 594
 595 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn,
 596 .ui-btn-footer-down .ui-btn-inner .ui-icon {
 597         width: 32 * @unit_base;
 598         height: 32 * @unit_base;
 599
 600         background-repeat: no-repeat;
 601         background-size: 100% 100%;
 602
 603 }
 604
 605 .ui-btn-up-s { /* less parsing problem : divide css */
 606         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 607         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 608
 609         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
 610         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 611         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
 612         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
 613         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
 614         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
 615         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
 616         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
 617 }
 618
 619 .ui-btn-hover-s {
 620         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 621         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 622
 623         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
 624         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 625         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
 626         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
 627         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
 628         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
 629         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
 630         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
 631 }
 632
 633 .ui-btn-down-s {
 634         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
 635         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
 636
 637         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_press_web.png); }
 638         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_press_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 639         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press_web.png); }
 640         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press_web.png); }
 641         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_press_web.png); }
 642         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_press_web.png); }
 643         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_press_web.png); }
 644         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_press_web.png); }
 645 }
 646
 647 /* Interaction cues
 648 -----------------------------------------------------------------------------------------------------------*/
 649 .ui-disabled {
 650         filter: Alpha(Opacity=30);
 651         opacity: .3;
 652         zoom: 1;
 653 }
 654 .ui-disabled,
 655 .ui-disabled a {
 656         cursor: default !important;
 657         pointer-events: none;
 658 }
 659
 660
 661
 662 /************************************************************************
 663                         Landscape mode
 664 ************************************************************************/
 665 @media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
 666 .ui-bar-s {
 667         > .ui-btn.ui-btn-back,
 668         > .ui-btn.ui-btn-footer-down {
 669                 .ui-icon-header-back-btn {
 670                         top : 5 * @unit_base;
 671                 }
 672         }
 673 }
 674
 675 .ui-header.ui-bar-s{
 676         min-height : 45 * @unit_base;
 677
 678         .ui-title {
 679                 min-height : 25 * @unit_base;
 680                 max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/
 681                 font-size  : 25 * @unit_base;
 682
 683                 margin: 12*@unit_base 13*@unit_base 4*@unit_base 13*@unit_base;/* tuning UX guide(title height too large)*/
 684         }
 685
 686         > .ui-btn.ui-btn-back,
 687         > .ui-btn.ui-btn-footer-down {
 688                 right : 13 * @unit_base;
 689         }
 690
 691         img {
 692                 margin-top : 14 * @unit_base;
 693                 height: 23 * @unit_base;
 694                 width: 23 * @unit_base;
 695         }
 696
 697         .ui-title-text-sub {
 698                 top : 26 * @unit_base;
 699         }
 700
 701         > .ui-btn,
 702         > .naviframe-button.ui-btn {
 703                 top : 8 * @unit_base;
 704
 705                 height : 34 * @unit_base;
 706                 width : 34 * @unit_base;
 707         }
 708         &.ui-title-tabbar >.ui-btn {
 709                 top: 8 * @unit_base;
 710         }
 711
 712         &.ui-title-multiline {
 713                 img {
 714                         margin-top : 12 * @unit_base;
 715                 }
 716
 717                 .ui-title {
 718                         min-height : 21 * @unit_base;
 719                         max-height : 21 * @unit_base; /* temporary UX strange */
 720                         font-size  : 19 * @unit_base;
 721                         margin: 5*@unit_base 13*@unit_base 19*@unit_base 13*@unit_base;
 722
 723                         display : block;
 724                 }
 725
 726                 .ui-title-text-sub {
 727                         top : 26 * @unit_base;
 728
 729                         font-size : 14 * @unit_base;
 730                 }
 731         }
 732 }
 733
 734 .ui-footer.ui-bar-s {
 735         height : 42 * @unit_base;
 736         >.ui-btn.ui-btn-back,
 737         >.ui-btn.ui-btn-footer-down,
 738         >[data-icon="naviframe-more"] {
 739                 >.ui-btn-icon-only {
 740                         width : 56 * @unit_base;
 741                         height : 42 * @unit_base;
 742                 }
 743                 .ui-icon-down {
 744                         top : 5 * @unit_base;
 745                 }
 746         }
 747
 748         [data-icon="naviframe-more"] {
 749                 .ui-icon-naviframe-more {
 750                         top : 5 * @unit_base;
 751                 }
 752         }
 753
 754         [data-role="controlgroup"] {
 755                 margin-top : 6 * @unit_base; /* temp value */
 756                 margin-bottom : 6 * @unit_base; /* temp value */
 757                 padding-left : 58 * @unit_base;
 758                 padding-right : 58 * @unit_base;
 759
 760
 761                 [data-role="button"] {
 762                         padding : 0px;
 763                         margin-left : -4 * @unit_base;
 764                         margin-right : -5 * @unit_base;
 765                         top : -4 * @unit_base;
 766                 }
 767         }
 768
 769         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 770                 position : absolute;
 771                 top : 0px;
 772         }
 773 }
 774
 775 }