src/themes/tizen/common/jquery.mobile.tizen.tabbar.less

   1 @import "config.less";
   2
   3 /***************************************************************************
   4                     Tabbar
   5 ***************************************************************************/
   6 .ui-tabbar {
   7         background : @color_bg;
   8         z-index : 1000;
   9         &.ui-portrait-tabbar {
  10                 /* portrait style */
  11         }
  12         &.ui-landscape-tabbar {
  13                 /* landscape style */
  14         }
  15
  16         a.ui-btn {
  17                 background : @color_bg;
  18                 color : @color_tabbar_btn_normal;
  19
  20                 padding-top : 19 * @unit_base;
  21                 padding-bottom : 19 * @unit_base;
  22                 .ui-btn-inner {
  23                         padding-top : 0px;
  24                         padding-bottom : 0px;
  25                         border-left : 2px solid;
  26                         border-color : @color_bar_divider_line;
  27                         border-radius : 0px;
  28                         -0-border-radius : 0px;
  29                         -ms-border-radius : 0px;
  30                         -webkit-border-radius : 0px;
  31
  32                         &:not(.ui-btn-icon-only) .ui-btn-text {
  33                                 display: block;
  34                                 vertical-align: middle;
  35                                 padding-bottom : 6 * @unit_base;
  36                                 margin-left: 6 * @unit_base;
  37                                 margin-right: 6 * @unit_base;
  38                         }
  39                 }
  40
  41                 .ui-icon {
  42                         width: 32 * @unit_base;
  43                         height: 32 * @unit_base;
  44
  45                         background-repeat: no-repeat;
  46                         background-size: 100% 100%;
  47                 }
  48         }
  49
  50         &.ui-tabbar-persist {
  51                 a.ui-btn {
  52                         background: @color_bg;
  53                 }
  54                 a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
  55                         color : @color_tabbar_btn_pressed;
  56
  57                         .ui-btn-text {
  58                                 border-bottom-width: 3 * @unit_base;
  59                                 border-bottom-color: @color_tabbar_btn_pressed;
  60                                 border-bottom-style: solid;
  61                         }
  62                 }
  63                 a.ui-btn-hover-s.ui-btn-down-s {
  64                         &:not(.ui-state-persist) {
  65                                 background: @color_tabbar_btn_tab_press;
  66                         }
  67                 }
  68         }
  69
  70         &:not(.ui-tabbar-persist) {
  71                 a.ui-btn {
  72                         background: @color_bg;
  73                 }
  74                 a.ui-btn-active, .ui-btn-show-style {
  75                         color : @color_tabbar_btn_pressed;
  76                         .ui-btn-text {
  77                                 border-bottom-width: 3 * @unit_base;
  78                                 border-bottom-color: @color_tabbar_btn_pressed;
  79                                 border-bottom-style: solid;
  80                         }
  81                 }
  82                 a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
  83                         background: @color_tabbar_btn_tab_press;
  84                 }
  85         }
  86
  87         .ui-btn-inner {
  88                 font-size : 15 * @unit_base;
  89                 font-weight : bold;
  90
  91                 .ui-icon {
  92                         top : 10 * @unit_base;
  93                         left : 50%;
  94                         margin-left : -16 * @unit_base;
  95                 }
  96         }
  97
  98         &.ui-tabbar-notext {
  99                 a.ui-btn {
 100                         padding-top : 11 * @unit_base;
 101                         padding-bottom : 10 * @unit_base;
 102
 103                 }
 104                 .ui-btn-inner {
 105                         height : 34 * @unit_base;
 106                         .ui-icon {
 107                                 top : 0px;
 108                         }
 109                 }
 110         }
 111 }
 112
 113 /* title font size when title tabbar */
 114 .ui-header.ui-bar-s.ui-title-tabbar {
 115         .ui-title {
 116                 font-size : 22 * @unit_base;
 117                 margin-top : 8 * @unit_base;
 118                 margin-bottom : 0 * @unit_base;
 119         }
 120
 121         .ui-tabbar {
 122                 &.ui-tabbar-noicons {
 123                         a.ui-btn {
 124                                 padding-top : 15 * @unit_base;
 125                                 padding-bottom : 13 * @unit_base;
 126                         }
 127                 }
 128
 129                 &.ui-tabbar-notext {
 130                         a.ui-btn {
 131                                 padding-top : 7 * @unit_base;
 132                                 padding-bottom : 5 * @unit_base;
 133                         }
 134                 }
 135
 136                 &.ui-portrait-tabbar {
 137                         /* portrait style */
 138                 }
 139                 &.ui-landscape-tabbar {
 140                         /* landscape style */
 141                 }
 142         }
 143 }
 144
 145 .ui-header.ui-bar-s {
 146         &.ui-title-tabbar-multiline {
 147                 .ui-tabbar {
 148                         a.ui-btn {
 149                                 padding-top : 11 * @unit_base;
 150                                 padding-bottom : 10 * @unit_base;
 151                                 .ui-btn-inner {
 152                                         height : 54 * @unit_base;
 153                                         .ui-btn-text {
 154                                                 padding-bottom: 1 * @unit_base;
 155                                         }
 156                                         .ui-icon {
 157                                                 top : 0px;
 158                                         }
 159                                 }
 160                         }
 161                 }
 162         }
 163
 164         li:first-child {
 165                 .ui-btn-inner {
 166                         border-left-width : 0px;
 167                 }
 168         }
 169 }
 170
 171
 172 .ui-footer.ui-bar-s {
 173         .ui-tabbar {
 174                 height : 49 * @unit_base;
 175
 176                 margin-left : auto;
 177                 margin-right : auto;
 178
 179                 a.ui-btn {
 180                         padding-top : 16 * @unit_base;
 181                         padding-bottom : 16 * @unit_base;
 182                 }
 183                 .ui-btn-inner {
 184                         .ui-icon {
 185                                 top : 0px;
 186                         }
 187                 }
 188                 &.ui-tabbar-notext {
 189                         a.ui-btn {
 190                                 padding-top : 8 * @unit_base;
 191                                 padding-bottom : 7 * @unit_base;
 192                         }
 193                 }
 194                 li:first-child {
 195                         .ui-btn-inner {
 196                                 border-left-width : 0px;
 197                         }
 198                 }
 199         }
 200
 201         .ui-tabbar.ui-tabbar-margin-back {
 202                 margin-right : 56 * @unit_base;
 203         }
 204
 205         .ui-tabbar.ui-tabbar-margin-more {
 206                 margin-left : 56 * @unit_base;
 207         }
 208
 209         .ui-btn-back ~ .ui-tabbar {
 210                 li:last-child {
 211                         .ui-btn-inner {
 212                                 border-right : 1px solid;
 213                                 border-right-color : @color_bar_divider_line;
 214                         }
 215                 }
 216         }
 217         [data-icon="naviframe-more"] ~ .ui-tabbar {
 218                 li:first-child {
 219                         .ui-btn-inner {
 220                                 border-left : 1px solid;
 221                                 border-left-color : @color_bar_divider_line;
 222                         }
 223                 }
 224         }
 225 }
 226
 227 .ui-tabbar-s.ui-navbar-noicons {
 228         font-size : 22 * @unit_base;
 229 }
 230
 231 /* Scrollable tabbar */
 232
 233 .ui-tabbar {
 234         .tabbar-scroll-ul {
 235                 margin-top : 0px;
 236                 margin-bottom : 0px;
 237                 padding-left : 0px;
 238
 239                 .tabbar-scroll-li {
 240                         position : relative;
 241                         display : inline-block;
 242                         margin-left : -8 * @unit_base;
 243                         a {
 244                                 width : 100%;
 245                         }
 246                 }
 247                 li.tabbar-scroll-li:first-child {
 248                         margin-left : 0px;
 249                 }
 250         }
 251 }
 252
 253 .ui-tabbar-divider {
 254         position : absolute;
 255
 256         top : 0px;
 257         width : 81 * @unit_base;
 258         height : 55 * @unit_base;
 259
 260         background-repeat: no-repeat;
 261         background-size: 100% 100%;
 262 }
 263
 264 .ui-tabbar-divider-left {
 265         left : 0px;
 266         background-image: url(images/00_effect_title_tab_bounce_left.png);
 267 }
 268
 269 .ui-tabbar-divider-right {
 270         right : 0px;
 271         background-image: url(images/00_effect_title_tab_bounce_right.png);
 272 }