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-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         [data-icon="naviframe-more"] {
 221                 position : absolute;
 222                 left : 0 * @unit_base;
 223                 top : 0 * @unit_base;
 224
 225                 box-shadow : none;
 226                 border-width : 0px;
 227
 228                 .ui-icon-naviframe-more {
 229                         left : 13 * @unit_base;
 230                         top : 8 * @unit_base;
 231
 232                         margin-top : 0px;
 233                 }
 234                 .ui-btn-inner {
 235                         border: none;
 236                         background: transparent;
 237                         box-shadow: none;
 238                 }
 239         }
 240         >[data-role="button"] {
 241                 font-size : 15 * @unit_base;
 242                 font-weight : bold;
 243                 color : @color_tabbar_btn_normal;
 244         }
 245
 246         [data-role="controlgroup"] {
 247                 margin-left : auto;
 248                 margin-right : auto;
 249                 margin-top : 6 * @unit_base; /* temp value */
 250                 margin-bottom : 6 * @unit_base; /* temp value */
 251                 padding-left : 58 * @unit_base;
 252                 padding-right : 58 * @unit_base;
 253
 254
 255                 [data-role="button"] {
 256                         background : transparent;
 257
 258                         border-style : solid;
 259                         border-color : @color_bar_divider_line;
 260                         border-top-width : 0px;
 261                         border-bottom-width : 0px;
 262                         border-left-width : 1px;
 263                         border-right-width : 1px;
 264
 265                         .LESSborder-radius-all(0);
 266
 267                         box-shadow : none;
 268
 269                         padding : 0px;
 270                         margin-left : -4 * @unit_base;
 271                         margin-right : -5 * @unit_base;
 272                         &.ui-btn-hover-s {
 273                                 .LESSborder-radius-all(0);
 274                         }
 275                         &.ui-btn-down-s, .ui-btn-active-s {
 276                                 .LESSborder-radius-all(0);
 277                                 .ui-btn-inner {
 278                                         background : @color_bg;
 279                                         .ui-btn-text {
 280                                                 color : @color_bar_title_text;
 281                                         }
 282                                 }
 283                         }
 284
 285                         >.ui-btn-inner {
 286                                 .LESSborder-radius-all(0);
 287                                 border : 0px solid;
 288                                 box-shadow : none;
 289                         }
 290                         .ui-btn-text {
 291                                 font-size : 17 * @unit_base;
 292                                 color : rgba(58, 58, 58, 1);
 293                         }
 294
 295                         &.ui-corner-right {
 296                                 border-right-width : 0px;
 297                         }
 298
 299                         &.ui-corner-left {
 300                                 border-left-width : 0px;
 301                         }
 302                 }
 303                 }
 304
 305         > [data-role="button"]:not([data-icon="naviframe-more"]) {
 306                 top : 6 * @unit_base;
 307         }
 308
 309         > p {
 310                 margin-top : 8 * @unit_base;
 311                 margin-bottom : 8 * @unit_base;
 312         }
 313         > h1, h2, h3, h4, h5, h6 {
 314                 display: inline-block;
 315         }
 316 }
 317
 318 /***************************************************************************
 319                     Content Top calculate
 320 ***************************************************************************/
 321 .ui-content {
 322         position : relative;
 323         top : 0;
 324 }
 325
 326 /***************************************************************************
 327                     Content Top calculate
 328 ***************************************************************************/
 329
 330
 331 .ui-body-s {
 332         border: 1px solid #2a2a2a;
 333         background:                     @color_bg;
 334         color:                                  @color_text;
 335         font-weight: normal;
 336
 337         font-family: Helvetica, Arial, sans-serif;
 338
 339         .ui-link-inherit { color:       #fff; }
 340         .ui-link {
 341                 /* ui-body-link */
 342                 color: #2489CE;
 343                 font-weight: bold;
 344                 &:hover { color: #2489CE; }
 345                 &:active { color: #2489CE; }
 346                 &:visited {     color: #2489CE; }
 347         }
 348 }
 349
 350 .ui-br {
 351 }
 352 .ui-btn-box-s {
 353         padding: 1 * @unit_base;
 354 }
 355 .ui-btn-box-s.ui-btn-up-s {
 356         .LESSbutton_box_style;
 357         .LESSborder-radius-all( 0.3rem );
 358         .LESSbutton_text1_style;
 359 }
 360
 361 .ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
 362         .LESSborder-radius-all( 1.2rem );
 363 }
 364
 365 .ui-btn-box-s .ui-btn-inner {
 366         border: 1px solid;
 367         border-color: rgb(199, 197, 190);
 368         .LESSborder-radius-all( 0.3rem );
 369         .LESSbox-boxsizing( border-box );
 370         .LESSbutton_inner_box_style;
 371         height: 100%;
 372 }
 373
 374 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
 375         .LESSborder-radius-all( 1.2rem );
 376 }
 377
 378 .ui-ctxpopup .ui-btn-box-s{
 379         &.ui-btn-up-s,
 380         &.ui-btn-hover-s {
 381                 background: transparent !important;
 382                 border: none;
 383                 box-shadow: none;
 384                 padding: 0;
 385                 color: white !important;
 386         }
 387         &.ui-btn-down-s {
 388                 background: @color_ctxbutton_press !important;
 389                 border: none;
 390                 box-shadow: none;
 391                 padding: 0;
 392                 color: white !important;
 393                 .LESSborder-radius-all( 0 );
 394         }
 395         .ui-btn-inner {
 396                 background: transparent ! important;
 397                 box-shadow: none;
 398                 border: none;
 399         }
 400 }
 401
 402 .ui-ctxpopup .ui-btn-down-s {
 403         background: @color_ctxbutton_press !important;
 404 }
 405
 406 .ui-header .ui-btn-box-s,
 407 .ui-footer .ui-btn-box-s,
 408 .ui-btn-back.ui-btn-up-s,
 409 .ui-btn-back.ui-btn-hover-s,
 410 .ui-btn-back.ui-btn-down-s,
 411 .ui-btn-footer-down.ui-btn-up-s,
 412 .ui-btn-footer-down.ui-btn-hover-s,
 413 .ui-btn-footer-down.ui-btn-down-s,
 414 .ui-popup-container .ui-btn-box-s {
 415         font-weight: normal;
 416         .LESSborder-radius-all( 0.9 rem );
 417 }
 418
 419 .ui-btn-box-s.ui-btn-hover-s {
 420         .LESSbutton_hover_style;
 421         .LESSbutton_text1_style;
 422         .LESSborder-radius-allimportant( 0.3em );
 423 }
 424 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
 425         .LESSborder-radius-allimportant( 1em );
 426 }
 427 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
 428         .LESSborder-radius-allimportant( 1.2em );
 429 }
 430 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
 431         .LESSborder-radius-allimportant( 1.2em );
 432 }
 433 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
 434         .LESSbutton_down_style;
 435 }
 436
 437 .ui-btn-up-s,
 438 .ui-btn-hover-s,
 439 .ui-btn-down-s {
 440         font-family: Helvetica, Arial, sans-serif;
 441         text-decoration: none;
 442 }
 443
 444 /*
 445 /* Structure */
 446 /* links within "buttons"
 447 -----------------------------------------------------------------------------------------------------------*/
 448
 449 a.ui-link-inherit {
 450         text-decoration: none !important;
 451 }
 452
 453
 454 /* Active class used as the "on" state across all themes
 455 -----------------------------------------------------------------------------------------------------------*/
 456
 457 /* button default color for active state */
 458 .ui-btn-active {
 459         /* global-active */
 460         color:                                  @color_button_text_normal;
 461         cursor: pointer;
 462         text-decoration: none;
 463         background:                     @color_button_press;
 464         outline: none;
 465         //font-family: Helvetica, Arial, sans-serif;
 466
 467         a.ui-link-inherit {
 468                 color:                                  @color_button_text_normal;
 469         }
 470 }
 471
 472 /* button inner top highlight
 473 -----------------------------------------------------------------------------------------------------------*/
 474
 475 .ui-btn-inner {
 476         //border : none;
 477 }
 478
 479
 480
 481
 482 /* corner rounding classes
 483 -----------------------------------------------------------------------------------------------------------*/
 484
 485 .ui-corner-tl {
 486         .LESSborder-radius-topleft(.3em);
 487 }
 488 .ui-corner-tr {
 489         .LESSborder-radius-topright(.3em);
 490 }
 491 .ui-corner-bl {
 492         .LESSborder-radius-bottomleft(.3em);
 493 }
 494 .ui-corner-br {
 495         .LESSborder-radius-bottomright(.3em);
 496 }
 497 .ui-corner-top {
 498         .LESSborder-radius-topleft(.3em);
 499         .LESSborder-radius-topright(.3em);
 500 }
 501 .ui-corner-bottom {
 502         .LESSborder-radius-bottomleft(.3em);
 503         .LESSborder-radius-bottomright(.3em);
 504 }
 505 .ui-corner-right {
 506         .LESSborder-radius-topright(.3em);
 507         .LESSborder-radius-bottomright(.3em);
 508 }
 509 .ui-corner-left {
 510         .LESSborder-radius-topleft(.3em);
 511         .LESSborder-radius-bottomleft(.3em);
 512 }
 513 .ui-corner-all {
 514         //.LESSborder-radius-all(.3em);
 515 }
 516 .ui-corner-none {
 517         .LESSborder-radius-all(0);
 518 }
 519
 520 /***************************************************************************
 521                     Icon (Naviframe)
 522 ***************************************************************************/
 523 .ui-header, .ui-footer {
 524         .ui-btn .ui-btn-icon-only .ui-icon {
 525                 width: 32 * @unit_base;
 526                 height: 32 * @unit_base;
 527
 528         }
 529 }
 530
 531 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn,
 532 .ui-btn-footer-down .ui-btn-inner .ui-icon {
 533         width: 32 * @unit_base;
 534         height: 32 * @unit_base;
 535
 536         background-repeat: no-repeat;
 537         background-size: 100% 100%;
 538
 539 }
 540
 541 .ui-btn-up-s, .ui-btn-hover-s {
 542         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
 543         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
 544         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
 545         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
 546         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
 547         .ui-icon-down { background-image: url(images/controls/button/00_button_down.png); }
 548 }
 549
 550 .ui-btn-down-s {
 551         .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
 552         .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
 553         .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
 554         .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
 555         .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
 556         .ui-icon-down { background-image: url(images/controls/button/00_button_down_press.png); }
 557 }
 558
 559 /* Interaction cues
 560 -----------------------------------------------------------------------------------------------------------*/
 561 .ui-disabled {
 562         filter: Alpha(Opacity=30);
 563         opacity: .3;
 564         zoom: 1;
 565 }
 566 .ui-disabled,
 567 .ui-disabled a {
 568         cursor: default !important;
 569         pointer-events: none;
 570 }
 571