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