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