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