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                         }
 372
 373                         &.ui-corner-right {
 374                                 border-right-width : 0px;
 375                         }
 376
 377                         &.ui-corner-left {
 378                                 border-left-width : 0px;
 379                         }
 380                 }
 381                 }
 382
 383         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 384                 top : 0px;
 385                 padding : 12 * @unit_base 0px;
 386         }
 387
 388         > p {
 389                 margin-top : 8 * @unit_base;
 390                 margin-bottom : 8 * @unit_base;
 391         }
 392         > h1, h2, h3, h4, h5, h6 {
 393                 display: inline-block;
 394         }
 395
 396         >.ui-btn.ui-btn-box-s {
 397                 box-shadow: none;
 398                 bottom: 0px;
 399                 .LESSborder-radius-allimportant( 0em );
 400                 .ui-btn-inner {
 401                         .LESSborder-radius-allimportant( 0em );
 402                 }
 403         }
 404
 405         >.ui-btn.ui-btn-down-s.ui-btn-box-s  {
 406                 &:not([data-icon="naviframe-more"]) {
 407                         background-color : @color_bar_navbar_press !important;
 408                 }
 409         }
 410
 411         >.ui-footer-btn-border {
 412                 >.ui-btn-inner {
 413                         border-left : 2px solid @color_bar_toolbar_divider;
 414                 }
 415         }
 416 }
 417
 418 /***************************************************************************
 419                     Content Top calculate
 420 ***************************************************************************/
 421 .ui-content {
 422         position : relative;
 423         top : 0;
 424 }
 425
 426 /***************************************************************************
 427                     Content Top calculate
 428 ***************************************************************************/
 429
 430
 431 .ui-body-s {
 432         border: 1px solid #2a2a2a;
 433         background:                     @color_bg;
 434         color:                                  @color_text;
 435         font-weight: normal;
 436
 437         font-family: @font_family;
 438
 439         .ui-link-inherit { color:       #fff; }
 440         .ui-link {
 441                 /* ui-body-link */
 442                 color: #2489CE;
 443                 font-weight: bold;
 444                 &:hover { color: #2489CE; }
 445                 &:active { color: #2489CE; }
 446                 &:visited {     color: #2489CE; }
 447         }
 448 }
 449
 450 .ui-br {
 451 }
 452 .ui-btn-box-s {
 453         padding: 1 * @unit_base;
 454 }
 455
 456 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
 457         .LESSborder-radius-all( 1.2rem );
 458 }
 459
 460 .ui-ctxpopup .ui-btn-box-s{
 461         &.ui-btn-up-s,
 462         &.ui-btn-hover-s {
 463                 background: transparent !important;
 464                 border: none;
 465                 box-shadow: none;
 466                 padding: 0;
 467                 color: white !important;
 468         }
 469         &.ui-btn-down-s {
 470                 background: @color_ctxbutton_press !important;
 471                 border: none;
 472                 box-shadow: none;
 473                 padding: 0;
 474                 color: white !important;
 475                 .LESSborder-radius-all( 0 );
 476         }
 477         .ui-btn-inner {
 478                 background: transparent ! important;
 479                 box-shadow: none;
 480                 border: none;
 481         }
 482 }
 483
 484 .ui-ctxpopup .ui-btn-down-s {
 485         background: @color_ctxbutton_press !important;
 486 }
 487
 488 .ui-header .ui-btn-box-s,
 489 .ui-footer .ui-btn-box-s,
 490 .ui-btn-back.ui-btn-up-s,
 491 .ui-btn-back.ui-btn-hover-s,
 492 .ui-btn-back.ui-btn-down-s,
 493 .ui-btn-footer-down.ui-btn-up-s,
 494 .ui-btn-footer-down.ui-btn-hover-s,
 495 .ui-btn-footer-down.ui-btn-down-s,
 496 .ui-popup-container .ui-btn-box-s {
 497         font-weight: normal;
 498         .LESSborder-radius-all( 0.9 rem );
 499 }
 500
 501 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
 502         .LESSborder-radius-allimportant( 1em );
 503 }
 504 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
 505         .LESSborder-radius-allimportant( 1.2em );
 506 }
 507 .ui-btn-box-s.ui-btn-down-s {
 508         .ui-btn-inner {
 509                 .LESSbutton_down_style;
 510         }
 511 }
 512
 513 .ui-btn-up-s,
 514 .ui-btn-hover-s,
 515 .ui-btn-down-s {
 516         font-family: @font_family;
 517         text-decoration: none;
 518 }
 519
 520 /*
 521 /* Structure */
 522 /* links within "buttons"
 523 -----------------------------------------------------------------------------------------------------------*/
 524
 525 a.ui-link-inherit {
 526         text-decoration: none !important;
 527 }
 528
 529
 530 /* Active class used as the "on" state across all themes
 531 -----------------------------------------------------------------------------------------------------------*/
 532
 533 /* button default color for active state */
 534 .ui-btn-active {
 535         /* global-active */
 536         color: @color_button_text_normal;
 537         cursor: pointer;
 538         text-decoration: none;
 539         background: @color_button_press;
 540         outline: none;
 541
 542         a.ui-link-inherit {
 543                 color: @color_button_text_normal;
 544         }
 545 }
 546
 547
 548 /* corner rounding classes
 549 -----------------------------------------------------------------------------------------------------------*/
 550
 551 .ui-corner-tl {
 552         .LESSborder-radius-topleft(.3em);
 553 }
 554 .ui-corner-tr {
 555         .LESSborder-radius-topright(.3em);
 556 }
 557 .ui-corner-bl {
 558         .LESSborder-radius-bottomleft(.3em);
 559 }
 560 .ui-corner-br {
 561         .LESSborder-radius-bottomright(.3em);
 562 }
 563 .ui-corner-top {
 564         .LESSborder-radius-topleft(.3em);
 565         .LESSborder-radius-topright(.3em);
 566 }
 567 .ui-corner-bottom {
 568         .LESSborder-radius-bottomleft(.3em);
 569         .LESSborder-radius-bottomright(.3em);
 570 }
 571 .ui-corner-right {
 572         .LESSborder-radius-topright(.3em);
 573         .LESSborder-radius-bottomright(.3em);
 574 }
 575 .ui-corner-left {
 576         .LESSborder-radius-topleft(.3em);
 577         .LESSborder-radius-bottomleft(.3em);
 578 }
 579 .ui-corner-none {
 580         .LESSborder-radius-all(0);
 581 }
 582
 583 /***************************************************************************
 584                     Icon (Naviframe)
 585 ***************************************************************************/
 586 .ui-header, .ui-footer {
 587         .ui-btn .ui-btn-icon-only .ui-icon {
 588                 width: 32 * @unit_base;
 589                 height: 32 * @unit_base;
 590
 591         }
 592 }
 593
 594 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn,
 595 .ui-btn-footer-down .ui-btn-inner .ui-icon {
 596         width: 32 * @unit_base;
 597         height: 32 * @unit_base;
 598
 599         background-repeat: no-repeat;
 600         background-size: 100% 100%;
 601
 602 }
 603
 604 .ui-btn-up-s { /* less parsing problem : divide css */
 605         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 606         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 607
 608         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
 609         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 610         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
 611         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
 612         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
 613         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
 614         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
 615         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
 616 }
 617
 618 .ui-btn-hover-s {
 619         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 620         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 621
 622         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_web.png); }
 623         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 624         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_web.png); }
 625         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_web.png); }
 626         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_web.png); }
 627         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_web.png); }
 628         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_web.png); }
 629         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_web.png); }
 630 }
 631
 632 .ui-btn-down-s {
 633         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
 634         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
 635
 636         .ui-icon-down { background-image: url(images/page/00_icon_SIP_close_press_web.png); }
 637         .ui-icon-naviframe-cancel { background-image: url(images/page/00_icon_cancel_press_web.png); } /* FIXME : check ux if it needs to be deprecated... */
 638         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press_web.png); }
 639         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press_web.png); }
 640         .ui-icon-naviframe-delete { background-image: url(images/page/00_icon_delete_press_web.png); }
 641         .ui-icon-naviframe-done { background-image: url(images/page/00_icon_done_press_web.png); }
 642         .ui-icon-naviframe-search { background-image: url(images/page/00_icon_search_press_web.png); }
 643         .ui-icon-naviframe-selectall { background-image: url(images/page/00_icon_select_all_press_web.png); }
 644 }
 645
 646 /* Interaction cues
 647 -----------------------------------------------------------------------------------------------------------*/
 648 .ui-disabled {
 649         filter: Alpha(Opacity=30);
 650         opacity: .3;
 651         zoom: 1;
 652 }
 653 .ui-disabled,
 654 .ui-disabled a {
 655         cursor: default !important;
 656         pointer-events: none;
 657 }
 658
 659
 660
 661 /************************************************************************
 662                         Landscape mode
 663 ************************************************************************/
 664 @media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
 665 .ui-bar-s {
 666         > .ui-btn.ui-btn-back,
 667         > .ui-btn.ui-btn-footer-down {
 668                 .ui-icon-header-back-btn {
 669                         top : 5 * @unit_base;
 670                 }
 671         }
 672 }
 673
 674 .ui-header.ui-bar-s{
 675         min-height : 45 * @unit_base;
 676
 677         .ui-title {
 678                 min-height : 25 * @unit_base;
 679                 max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/
 680                 font-size  : 25 * @unit_base;
 681
 682                 margin: 12*@unit_base 13*@unit_base 4*@unit_base 13*@unit_base;/* tuning UX guide(title height too large)*/
 683         }
 684
 685         > .ui-btn.ui-btn-back,
 686         > .ui-btn.ui-btn-footer-down {
 687                 right : 13 * @unit_base;
 688         }
 689
 690         img {
 691                 margin-top : 14 * @unit_base;
 692                 height: 23 * @unit_base;
 693                 width: 23 * @unit_base;
 694         }
 695
 696         .ui-title-text-sub {
 697                 top : 26 * @unit_base;
 698         }
 699
 700         > .ui-btn,
 701         > .naviframe-button.ui-btn {
 702                 top : 8 * @unit_base;
 703
 704                 height : 34 * @unit_base;
 705                 width : 34 * @unit_base;
 706         }
 707         &.ui-title-tabbar >.ui-btn {
 708                 top: 8 * @unit_base;
 709         }
 710
 711         &.ui-title-multiline {
 712                 img {
 713                         margin-top : 12 * @unit_base;
 714                 }
 715
 716                 .ui-title {
 717                         min-height : 21 * @unit_base;
 718                         max-height : 21 * @unit_base; /* temporary UX strange */
 719                         font-size  : 19 * @unit_base;
 720                         margin: 5*@unit_base 13*@unit_base 19*@unit_base 13*@unit_base;
 721
 722                         display : block;
 723                 }
 724
 725                 .ui-title-text-sub {
 726                         top : 26 * @unit_base;
 727
 728                         font-size : 14 * @unit_base;
 729                 }
 730         }
 731 }
 732
 733 .ui-footer.ui-bar-s {
 734         height : 42 * @unit_base;
 735         >.ui-btn.ui-btn-back,
 736         >.ui-btn.ui-btn-footer-down,
 737         >[data-icon="naviframe-more"] {
 738                 >.ui-btn-icon-only {
 739                         width : 56 * @unit_base;
 740                         height : 42 * @unit_base;
 741                 }
 742                 .ui-icon-down {
 743                         top : 5 * @unit_base;
 744                 }
 745         }
 746
 747         [data-icon="naviframe-more"] {
 748                 .ui-icon-naviframe-more {
 749                         top : 5 * @unit_base;
 750                 }
 751         }
 752
 753         [data-role="controlgroup"] {
 754                 margin-top : 6 * @unit_base; /* temp value */
 755                 margin-bottom : 6 * @unit_base; /* temp value */
 756                 padding-left : 58 * @unit_base;
 757                 padding-right : 58 * @unit_base;
 758
 759
 760                 [data-role="button"] {
 761                         padding : 0px;
 762                         margin-left : -4 * @unit_base;
 763                         margin-right : -5 * @unit_base;
 764                         top : -4 * @unit_base;
 765                 }
 766         }
 767
 768         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 769                 position : absolute;
 770                 top : 0px;
 771         }
 772 }
 773
 774 }