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