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