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

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