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

   1 @import "config.less";
   2
   3 /***************************************************************************
   4                     Controlbar
   5 ***************************************************************************/
   6 .ui-controlbar {
   7         background : @color_bg;
   8         z-index : 1000;
   9         &.ui-portrait-controlbar {
  10                 height : 55 * @unit_base;
  11         }
  12         &.ui-landscape-controlbar {
  13                 height : 55 * @unit_base;
  14         }
  15
  16         a.ui-btn {
  17                 background : @color_bg;
  18                 color : @color_controlbar_btn_normal;
  19
  20                 .ui-icon {
  21                         width: 32 * @unit_base;
  22                         height: 32 * @unit_base;
  23
  24                         background-repeat: no-repeat;
  25                         background-size: 100% 100%;
  26                 }
  27         }
  28
  29         &.ui-controlbar-persist {
  30                 a.ui-btn {
  31                         background: @color_bg;
  32                 }
  33                 a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
  34                         color : @color_controlbar_btn_pressed;
  35                 }
  36                 a.ui-btn-hover-s.ui-btn-down-s {
  37                         &:not(.ui-state-persist) {
  38                                 color : @color_controlbar_btn_pressed;
  39                                 background: @color_controlbar_btn_tab_press;
  40                         }
  41                 }
  42         }
  43
  44         &:not(.ui-controlbar-persist) {
  45                 a.ui-btn {
  46                         background: @color_bg;
  47                 }
  48                 a.ui-btn-active, .ui-btn-show-style {
  49                         color : @color_controlbar_btn_pressed;
  50                 }
  51                 a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
  52                         color : @color_controlbar_btn_pressed;
  53                         background: @color_controlbar_btn_tab_press;
  54                 }
  55         }
  56
  57         .ui-btn-inner {
  58                 padding-top : 44 * @unit_base;
  59                 padding-bottom : 3 * @unit_base;
  60
  61                 font-size : 15 * @unit_base;
  62                 font-weight : bold;
  63
  64                 .ui-icon {
  65                         top : 10 * @unit_base;
  66                         left : 50%;
  67                         margin-left : -16 * @unit_base;
  68                 }
  69         }
  70
  71         &.ui-controlbar-noicons {
  72                 .ui-btn-inner {
  73                         padding-top : 19 * @unit_base;
  74                         padding-bottom : 18 * @unit_base;
  75                 }
  76         }
  77
  78         &.ui-controlbar-notext {
  79                 .ui-btn-inner {
  80                         padding-top : 50 * @unit_base;
  81                         padding-bottom : 5 * @unit_base;
  82
  83                         .ui-icon {
  84                                 top : 11 * @unit_base;
  85                         }
  86                 }
  87         }
  88 }
  89
  90 /* title font size when title controlbar */
  91 .ui-header.ui-bar-s.ui-title-controlbar {
  92         .ui-title {
  93                 font-size : 22 * @unit_base;
  94                 margin-top : 8 * @unit_base;
  95                 margin-bottom : 0 * @unit_base;
  96         }
  97
  98         .ui-controlbar {
  99                 &.ui-controlbar-noicons {
 100                         .ui-btn-inner {
 101                                 padding-top : 15 * @unit_base;
 102                                 padding-bottom : 13 * @unit_base;
 103                         }
 104                 }
 105
 106                 &.ui-controlbar-notext {
 107                         .ui-btn-inner {
 108                                 padding-top : 47 * @unit_base;
 109                                 padding-bottom : 0 * @unit_base;
 110                         }
 111                 }
 112
 113                 &.ui-portrait-controlbar {
 114                         height : 47 * @unit_base;
 115                 }
 116
 117                 &.ui-landscape-controlbar {
 118                         height : 40 * @unit_base;
 119                 }
 120         }
 121 }
 122
 123 .ui-header.ui-bar-s {
 124         &.ui-title-controlbar-multiline {
 125                 height : 75 * @unit_base;
 126                 .ui-controlbar {
 127                         height : 75 * @unit_base;
 128                         .ui-btn-inner {
 129                                 padding-top : 45 * @unit_base;
 130                                 padding-bottom : 10 * @unit_base;
 131                         }
 132                 }
 133         }
 134 }
 135
 136
 137 .ui-footer.ui-bar-s {
 138         .ui-controlbar {
 139                 height : 49 * @unit_base;
 140
 141                 margin-left : auto;
 142                 margin-right : auto;
 143
 144                 .ui-btn-inner {
 145                         .ui-icon {
 146                                 top : 7 * @unit_base;
 147                         }
 148                 }
 149         }
 150
 151         .ui-controlbar.ui-controlbar-margin-back {
 152                 margin-right : 56 * @unit_base;
 153         }
 154
 155         .ui-controlbar.ui-controlbar-margin-more {
 156                 margin-left : 56 * @unit_base;
 157         }
 158
 159 }
 160
 161 .ui-controlbar-s.ui-navbar-noicons {
 162         font-size : 22 * @unit_base;
 163 }
 164
 165 .ui-btn-up-s {
 166         .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit.png); }
 167
 168 }
 169
 170 .ui-btn-down-s, .ui-btn-hover-s, .ui-btn-active {
 171         .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit_press.png); }
 172 }
 173