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