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