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