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

   1 /*
   2 * jQuery Mobile Framework
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
   5 */
   6
   7 @import "config.less";
   8
   9 /* Button colors are defined in config.less
  10
  11 /* Edit button size */
  12 @height_buttonEdit:     74 * @unit_base;
  13 @width_buttonEdit:      @height_buttonEdit;
  14
  15 .ui-btn { display: block; text-align: center; cursor:pointer;  position: relative; /*margin: .2em 0px; padding: 0; */ vertical-align: middle; } /* wongi_1018 : For button align. */
  16 .ui-btn:focus, .ui-btn:active { outline: none; }
  17 .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
  18 .ui-btn-inline { display: inline-block; }
  19 .ui-btn-inner { padding: .5em 9 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
  20 .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 0 0.7em; }  /* wongi_1024 : Button text middle align */
  21 .ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only
  22 {
  23         padding: .4em 8 * @unit_base .5em;
  24 }       /* wongi_1024 : Button text middle align */
  25
  26 .ui-btn-icon-notext { width: 36 * @unit_base; height: 36 * @unit_base; }
  27 .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
  28 .ui-btn-icon-notext .ui-btn-inner .ui-icon { margin-left: -16 * @unit_base; margin-top: -16 * @unit_base; }
  29 .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999 * @unit_base; }
  30 .ui-btn-icon-left .ui-btn-inner { padding-left: 33 * @unit_base; }
  31 .ui-header .ui-btn-icon-left .ui-btn-inner,
  32 .ui-footer .ui-btn-icon-left .ui-btn-inner,
  33 .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27 * @unit_base; }
  34 .ui-btn-icon-right .ui-btn-inner { padding-right: 33 * @unit_base; }
  35 .ui-header .ui-btn-icon-right .ui-btn-inner,
  36 .ui-footer .ui-btn-icon-right .ui-btn-inner,
  37 .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; }
  38 .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
  39 .ui-header .ui-btn-icon-top .ui-btn-inner,
  40 .ui-footer .ui-btn-icon-top .ui-btn-inner,
  41 .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
  42 .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33 * @unit_base; }
  43 .ui-header .ui-btn-icon-bottom .ui-btn-inner,
  44 .ui-footer .ui-btn-icon-bottom .ui-btn-inner,
  45 .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27 * @unit_base; }
  46
  47 /*btn icon positioning*/
  48 .ui-btn-icon-notext .ui-icon { display: block; }
  49 .ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon, .ui-btn-icon-circle .ui-icon { position: absolute; /*top: 50%; margin-top: -9px;*/ } /* wongi_1018 : do not use. No more use 18px default icons. */
  50
  51
  52 .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%;  margin-left: -9px; }
  53 .ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
  54 .ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
  55 .ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
  56 .ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
  57 .ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
  58 .ui-header .ui-btn-icon-right .ui-icon,
  59 .ui-footer .ui-btn-icon-right .ui-icon,
  60 .ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
  61 .ui-header .ui-btn-icon-top .ui-icon,
  62 .ui-footer .ui-btn-icon-top .ui-icon,
  63 .ui-bar .ui-btn-icon-top .ui-icon { top: 4 * @unit_base; }
  64 .ui-header .ui-btn-icon-bottom .ui-icon,
  65 .ui-footer .ui-btn-icon-bottom .ui-icon,
  66 .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4 * @unit_base; }
  67
  68 /*hiding native button,inputs */
  69 .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: transparent; font-size: 1 * @unit_base; border: none; line-height: 999 * @unit_base; }
  70
  71 .ui-btn-text
  72 {
  73         /*padding-left : 80px;*/        //wongi_1017
  74         margin-left: auto;
  75         margin-right: auto;
  76         padding:0 1px; /* Webkit width(ellipsis) problem workaround */
  77 }
  78
  79 .ui-li .ui-btn.ui-btn-icon_only
  80 {
  81         top: 50%;
  82         margin-top:  (-32 * 1/2)   * @unit_base;
  83 }
  84
  85 .ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
  86 {
  87         padding: 0.2em 0.5em;
  88 }
  89 .ui-btn-icon-nobg.ui-btn-down-s .ui-btn-inner
  90 {
  91         background: transparent ! important;
  92 }
  93 .ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner
  94 {
  95         .LESSbutton_inner_pressstyle;
  96 }
  97
  98 .ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon),
  99 .ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
 100 .ui-header .ui-btn.ui-btn-box-s.ui-btn-down-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
 101 .ui-btn.ui-btn-back.ui-btn-up-s .ui-btn-inner,
 102 .ui-btn.ui-btn-back.ui-btn-hover-s .ui-btn-inner,
 103 .ui-btn.ui-btn-back.ui-btn-down-s .ui-btn-inner
 104 {
 105         background: transparent;
 106         border: none;
 107         box-shadow: none;
 108 }
 109
 110 .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
 111 {
 112         padding-top: 52 * @unit_base;
 113 }
 114 .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
 115 {
 116         padding-bottom: 52 * @unit_base;
 117 }
 118
 119 /* wongi_1017 : Icons */
 120 /* icons sizing */
 121 .ui-btn .ui-icon { width: 32 * @unit_base ; height: 32 * @unit_base; }
 122 .ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
 123
 124 /* Padding for Icon with text */
 125 .ui-btn .ui-btn-text.ui-btn-text-padding-left { padding-left: 44 * @unit_base; }
 126 .ui-btn .ui-btn-text.ui-btn-text-padding-right { padding-right: 48 * @unit_base; }
 127 .ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;}
 128 .ui-icon
 129 {
 130         z-index: 10;
 131         background-repeat: no-repeat;
 132         vertical-align: middle;
 133         background-position: 0% 0%;
 134         background-size: 100%;
 135 }
 136 .ui-btn-box.s .ui-icon
 137 {
 138         position: absolute;
 139 }
 140 .ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
 141 {
 142         margin-top: -32 * @unit_base / 2;
 143         top: 50%;
 144 }
 145 .ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
 146 {
 147         margin-left: -64 * @unit_base / 2;
 148         left: 50%;
 149 }
 150 .tizen-icon-common
 151 {
 152         /* Overlap original property */
 153         width: 32 * @unit_base; height: 32 * @unit_base;
 154         /* margin-top : 50 */
 155         /* top : -32 * @unit_base; */
 156 }
 157 .tizen-smallicon-common
 158 {
 159         width: 20 * @unit_base ! important;
 160         height: 20 * @unit_base ! important;
 161         top: 50% ! important;
 162         left: 50% ! important;
 163         margin-top: -20 * @unit_base / 2 ! important;
 164         margin-left: -20 * @unit_base / 2 ! important;
 165 }
 166
 167 .ui-icon-bg                     {.tizen-icon-common;    background-image: url(images/00_btn_circle_bg_normal.png);      z-index:0; }
 168 .ui-icon-arrow-l                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_left.png);       }
 169 .ui-icon-arrow-r                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_right.png);      }
 170 .ui-icon-arrow-u                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened.png);       }
 171 .ui-icon-arrow-d                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed.png);       }
 172 .ui-icon-delete                 {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_cancel.png);       }
 173 .ui-icon-plus                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_plus.png);        }
 174 .ui-icon-minus                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_minus.png);        }
 175 .ui-icon-check                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_check.png);      }
 176 .ui-icon-gear                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_gear.png);       }
 177 .ui-icon-refresh                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_refresh.png);    }
 178 .ui-icon-forward                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_send.png);         }
 179 .ui-icon-back                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_back.png);       }
 180 .ui-icon-grid                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_grid.png);       }
 181 .ui-icon-star                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_star.png);       }
 182 .ui-icon-alert                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_warning.png);     }
 183 .ui-icon-info                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_info.png);        }
 184 .ui-icon-home                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_home.png);       }
 185 .ui-icon-search                 {.tizen-icon-common;    background-image: url(images/controls/button/00_button_search.png);     }
 186 .ui-icon-call                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_call.png);        }
 187 .ui-icon-rename                 {.tizen-icon-common;    background-image: url(images/controls/button/00_button_rename.png);      }
 188 .ui-icon-scrolltop                      {.tizen-smallicon-common;       background-image: url(images/controls/button/00_icon_jump.png);  }
 189 .ui-icon-scrollleft                     {.tizen-smallicon-common;       background-image: url(images/controls/button/00_icon_jump_left.png);     }
 190
 191 .ui-icon-expandable-divider-opened {
 192         width: 42 * @unit_base;
 193         height: 42 * @unit_base;
 194
 195         position : absolute;
 196         right : 28 * @unit_base;
 197         top      : 0 * @unit_base;
 198
 199         background-repeat: no-repeat;
 200         background-size: 100% 100%;
 201
 202         background-image: url(images/00_indexlist_icon_opened.png);
 203
 204 }
 205
 206 .ui-icon-expandable-divider-closed {
 207         width: 42 * @unit_base;
 208         height: 42 * @unit_base;
 209
 210         position : absolute;
 211         right : 28 * @unit_base;
 212         top      : 0 * @unit_base;
 213
 214         background-repeat: no-repeat;
 215         background-size: 100% 100%;
 216
 217         background-image: url(images/00_indexlist_icon_closed.png);
 218
 219 }
 220
 221
 222 /* Pressed images */
 223 .ui-btn-down-s .ui-icon-bg, .ui-btn-down-s.ui-tizen-icon-bg     {.tizen-icon-common;    background-image: url(images/00_btn_circle_bg_press.png); z-index:0;     }
 224 .ui-btn-down-s .ui-icon-arrow-l         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_left_press.png); }
 225 .ui-btn-down-s .ui-icon-arrow-r         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_right_press.png);        }
 226 .ui-btn-down-s .ui-icon-arrow-u         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened_press.png);         }
 227 .ui-btn-down-s .ui-icon-arrow-d         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed_press.png);         }
 228 .ui-btn-down-s .ui-icon-delete                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_cancel_press.png);         }
 229 .ui-btn-down-s .ui-icon-plus                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_plus_press.png);  }
 230 .ui-btn-down-s .ui-icon-minus                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_minus_press.png);  }
 231 .ui-btn-down-s .ui-icon-check                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_check_press.png);        }
 232 .ui-btn-down-s .ui-icon-gear                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_gear_press.png); }
 233 .ui-btn-down-s .ui-icon-refresh         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_refresh_press.png);      }
 234 .ui-btn-down-s .ui-icon-forward         {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_send_press.png);   }
 235 .ui-btn-down-s .ui-icon-back                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_back_press.png); }
 236 .ui-btn-down-s .ui-icon-grid                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_grid_press.png); }
 237 .ui-btn-down-s .ui-icon-star                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_star_press.png); }
 238 .ui-btn-down-s .ui-icon-alert                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_warning_press.png);       }
 239 .ui-btn-down-s .ui-icon-info                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_info_press.png);  }
 240 .ui-btn-down-s .ui-icon-home                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_home_press.png); }
 241 .ui-btn-down-s .ui-icon-search                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_search_press.png);       }
 242 .ui-btn-down-s .ui-icon-call                    {.tizen-icon-common;    background-image: url(images/controls/button/00_button_call_press.png);  }
 243 .ui-btn-down-s .ui-icon-rename                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_rename_press.png);        }
 244 .ui-btn-down-s .ui-icon-scrolltop                       {.tizen-smallicon-common;       background-image: url(images/controls/button/00_icon_jump.png);  }
 245 .ui-btn-down-s .ui-icon-scrollleft                      {.tizen-smallicon-common;       background-image: url(images/controls/button/00_icon_jump_left.png);     }
 246
 247 .ui-btn-inner.ui-btn-icon-only
 248 {
 249         padding: 16 * @unit_base 16 * @unit_base;
 250 }
 251
 252 .ui-btn-icon-only .ui-btn-text
 253 {
 254         left: -9999px;
 255         display: none;
 256 }
 257
 258 .ui-btn.ui-btn-corner-all
 259 {
 260         .LESSborder-radius-allimportant(1.2em);
 261 }
 262
 263 /* No BG button : data-iconbg = "nobg" */
 264 .ui-btn.ui-btn-icon-nobg
 265 {
 266         box-shadow: none;
 267 }
 268
 269 .ui-btn-corner-circle
 270 {
 271         .LESSborder-radius-allimportant( 1em );
 272 }
 273 .ui-btn-round
 274 {
 275         .LESSborder-radius-allimportant( 1.2em );
 276 }
 277 .ui-btn-round .ui-btn-inner
 278 {
 279         .LESSborder-radius-allimportant( 1.2em );
 280 }
 281 .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
 282 {
 283         background: transparent;
 284         background-color: transparent;
 285         border: none;
 286 }
 287
 288 /* Contact Edit Style */
 289 .ui-btn.ui-btn-edit .ui-btn-text
 290 {
 291         color: @color_button_EditText;
 292 }
 293 .ui-btn.ui-btn-edit .ui-btn-inner
 294 {
 295         .LESSbutton_edit_style;
 296 }
 297
 298 .ui-btn-box-s
 299 {
 300         .LESSbutton_box_style;
 301 }
 302