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 36 * @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 { padding: .4em 8 * @unit_base .5em; }     /* wongi_1024 : Button text middle align */
  22 .ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
  23 .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
  24 .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999 * @unit_base; }
  25 .ui-btn-icon-left .ui-btn-inner { padding-left: 33 * @unit_base; }
  26 .ui-header .ui-btn-icon-left .ui-btn-inner,
  27 .ui-footer .ui-btn-icon-left .ui-btn-inner,
  28 .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27 * @unit_base; }
  29 .ui-btn-icon-right .ui-btn-inner { padding-right: 33 * @unit_base; }
  30 .ui-header .ui-btn-icon-right .ui-btn-inner,
  31 .ui-footer .ui-btn-icon-right .ui-btn-inner,
  32 .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; }
  33 .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
  34 .ui-header .ui-btn-icon-top .ui-btn-inner,
  35 .ui-footer .ui-btn-icon-top .ui-btn-inner,
  36 .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
  37 .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33 * @unit_base; }
  38 .ui-header .ui-btn-icon-bottom .ui-btn-inner,
  39 .ui-footer .ui-btn-icon-bottom .ui-btn-inner,
  40 .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27 * @unit_base; }
  41
  42 /*btn icon positioning*/
  43 .ui-btn-icon-notext .ui-icon { display: block; }
  44
  45 .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. */
  46
  47
  48 .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%;  margin-left: -9px; }
  49 .ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
  50 .ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
  51 .ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
  52 .ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
  53 .ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
  54 .ui-header .ui-btn-icon-left .ui-icon,
  55 .ui-footer .ui-btn-icon-left .ui-icon,
  56 .ui-bar .ui-btn-icon-left .ui-icon { left: @style-back-btn-left; } /* SLP Default Footer : Jinhyuk */
  57 .ui-header .ui-btn-icon-right .ui-icon,
  58 .ui-footer .ui-btn-icon-right .ui-icon,
  59 .ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
  60 .ui-header .ui-btn-icon-top .ui-icon,
  61 .ui-footer .ui-btn-icon-top .ui-icon,
  62 .ui-bar .ui-btn-icon-top .ui-icon { top: 4 * @unit_base; }
  63 .ui-header .ui-btn-icon-bottom .ui-icon,
  64 .ui-footer .ui-btn-icon-bottom .ui-icon,
  65 .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4 * @unit_base; }
  66
  67 /*hiding native button,inputs */
  68 .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; }
  69
  70 .ui-btn-text
  71 {
  72         /*padding-left : 80px;*/        //wongi_1017
  73         margin-left: auto;
  74         margin-right: auto;
  75         padding:0 1px; /* Webkit width(ellipsis) problem workaround */
  76 }
  77
  78 .ui-li .ui-btn.ui-btn-icon_only
  79 {
  80         top: 50%;
  81         margin-top:  -32  * @unit_base;
  82 }
  83
  84 .ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
  85 {
  86         padding: 0.2em 0.5em;
  87 }
  88 .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
  89 {
  90         padding-top: 52 * @unit_base;
  91 }
  92 .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
  93 {
  94         padding-bottom: 52 * @unit_base;
  95 }
  96 /* white theme, delete button padding */
  97 .ui-li .ui-btn.ui-btn-edit .ui-btn-inner.ui-btn-hastxt
  98 {
  99         .LESSbutton_edit_padding;
 100 }
 101
 102 /* wongi_1017 : Icons */
 103 /* icons sizing */
 104 .ui-btn .ui-icon { width: 64 * @unit_base; height: 64 * @unit_base; }
 105 .ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
 106
 107 /* Padding for Icon with text */
 108 .ui-btn .ui-btn-text.ui-btn-text-padding-left { padding-left: 44 * @unit_base; }
 109 .ui-btn .ui-btn-text.ui-btn-text-padding-right { padding-right: 48 * @unit_base; }
 110 .ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;}
 111 .ui-icon
 112 {
 113         z-index: 10;
 114         background-repeat: no-repeat;
 115         vertical-align: middle;
 116         background-position: 0% 0%;
 117         background-size: 100%;
 118 }
 119 .ui-btn-box.s .ui-icon
 120 {
 121         position: absolute;
 122 }
 123 .ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
 124 {
 125         margin-top: -64 * @unit_base / 2;
 126         top: 50%;
 127 }
 128 .ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
 129 {
 130         margin-left: -64 * @unit_base / 2;
 131         left: 50%;
 132 }
 133 .tizen-icon-common
 134 {
 135         /* Overlap original property */
 136         width: 64 * @unit_base; height: 64 * @unit_base;
 137         /* margin-top : 50 */
 138         /* top : -32 * @unit_base; */
 139 }
 140
 141 .ui-icon-bg                     {.tizen-icon-common;    background-image: url(images/00_btn_circle_bg_normal.png);      z-index:0; }
 142 .ui-icon-reveal                 {.tizen-icon-common;    background-image: url(images/00_button_reveal.png);      }
 143 .ui-icon-reveal-left    {.tizen-icon-common;    background-image: url(images/00_button_reveal_left.png);         }
 144 .ui-icon-closed                 {.tizen-icon-common;    background-image: url(images/00_button_expand_closed.png);       }
 145 .ui-icon-opened                 {.tizen-icon-common;    background-image: url(images/00_button_expand_opened.png);       }
 146 .ui-icon-info                   {.tizen-icon-common;    background-image: url(images/00_button_info.png);        }
 147 .ui-icon-rename                 {.tizen-icon-common;    background-image: url(images/00_button_rename.png);      }
 148 .ui-icon-call                   {.tizen-icon-common;    background-image: url(images/00_button_call.png);        }
 149 .ui-icon-warning                {.tizen-icon-common;    background-image: url(images/00_button_warning.png);     }
 150 .ui-icon-plus                   {.tizen-icon-common;    background-image: url(images/00_button_plus_normal.png);         }
 151 .ui-icon-minus                  {.tizen-icon-common;    background-image: url(images/00_button_minus_normal.png);        }
 152 .ui-icon-cancel                 {.tizen-icon-common;    background-image: url(images/00_button_cancel.png);      }
 153 .ui-icon-send                   {.tizen-icon-common;    background-image: url(images/00_button_send.png);        }
 154 .ui-icon-favorite               {.tizen-icon-common;    background-image: url(images/00_winset_icon_favorite_on.png);    }
 155 .ui-icon-editexpand             {.tizen-icon-common;    background-image: url(images/00_button_icon_expand.png); top : -@height_buttonEdit/2; }
 156 .ui-icon-editminus              {.tizen-icon-common;    background-image: url(images/00_button_icon_minus.png); top : -@height_buttonEdit/2;}
 157 .ui-icon-editplus               {.tizen-icon-common;    background-image: url(images/00_button_icon_plus.png); top : -@height_buttonEdit/2;}
 158
 159 /* Header back btn : Jinjyuk */
 160 .ui-btn-up-s .ui-icon-header-back-btn{
 161         width: 56 * @unit_base;
 162         height: 56 * @unit_base;
 163
 164         background-repeat: no-repeat;
 165         background-size: 100% 100%;
 166
 167         .LESSbtn-arrow-position;
 168         background-image: url(images/00_winset_Back.png);
 169 }
 170
 171 .ui-btn-down-s, .ui-btn-hover-s {
 172         .ui-icon-header-back-btn{
 173                 width: 56 * @unit_base;
 174                 height: 56 * @unit_base;
 175
 176                 background-repeat: no-repeat;
 177                 background-size: 100% 100%;
 178
 179                 .LESSbtn-arrow-position;
 180                 background-image: url(images/00_winset_Back.png);
 181         }
 182 }
 183
 184 .ui-header {
 185         .ui-btn-down-s, .ui-btn-hover-s, .ui-btn-up-s {
 186                 .ui-icon-header-back-btn {
 187                         top : @style-back-btn-arrow-top;
 188                 }
 189         }
 190 }
 191
 192 .ui-icon-header-back-btn{
 193         .LESSbackground-size(48 * @unit_base, 38 * @unit_base);
 194         width: 48 * @unit_base;
 195         height: 38 * @unit_base;
 196 }
 197
 198 .ui-icon-expandable-divider-opened {
 199         width: 42 * @unit_base;
 200         height: 42 * @unit_base;
 201
 202         position : absolute;
 203         right : 28 * @unit_base;
 204         top      : 0 * @unit_base;
 205
 206         background-repeat: no-repeat;
 207         background-size: 100% 100%;
 208
 209         background-image: url(images/00_indexlist_icon_opened.png);
 210
 211 }
 212
 213 .ui-icon-expandable-divider-closed {
 214         width: 42 * @unit_base;
 215         height: 42 * @unit_base;
 216
 217         position : absolute;
 218         right : 28 * @unit_base;
 219         top      : 0 * @unit_base;
 220
 221         background-repeat: no-repeat;
 222         background-size: 100% 100%;
 223
 224         background-image: url(images/00_indexlist_icon_closed.png);
 225
 226 }
 227
 228
 229 /* Pressed images */
 230 .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;     }
 231 .ui-btn-down-s .ui-icon-reveal                  {.tizen-icon-common;    background-image: url(images/00_button_reveal_press.png);        }
 232 .ui-btn-down-s .ui-icon-reveal-left             {.tizen-icon-common;    background-image: url(images/00_button_reveal_left_press.png);   }
 233 .ui-btn-down-s .ui-icon-closed                  {.tizen-icon-common;    background-image: url(images/00_button_expand_closed_press.png);         }
 234 .ui-btn-down-s .ui-icon-opened                  {.tizen-icon-common;    background-image: url(images/00_button_expand_opened_press.png);         }
 235 .ui-btn-down-s .ui-icon-info                    {.tizen-icon-common;    background-image: url(images/00_button_info_press.png);  }
 236 .ui-btn-down-s .ui-icon-rename                  {.tizen-icon-common;    background-image: url(images/00_button_rename_press.png);        }
 237 .ui-btn-down-s .ui-icon-call                    {.tizen-icon-common;    background-image: url(images/00_button_call_press.png);  }
 238 .ui-btn-down-s .ui-icon-warning                 {.tizen-icon-common;    background-image: url(images/00_button_warning_press.png);       }
 239 .ui-btn-down-s .ui-icon-plus                    {.tizen-icon-common;    background-image: url(images/00_button_plus_press.png);  }
 240 .ui-btn-down-s .ui-icon-minus                   {.tizen-icon-common;    background-image: url(images/00_button_minus_press.png);         }
 241 .ui-btn-down-s .ui-icon-cancel                  {.tizen-icon-common;    background-image: url(images/00_button_cancel_press.png);        }
 242 .ui-btn-down-s .ui-icon-send                    {.tizen-icon-common;    background-image: url(images/00_button_send_press.png);  }
 243 .ui-btn-down-s .ui-icon-favorite                {.tizen-icon-common;    background-image: url(images/00_winset_icon_favorite_off.png);   }
 244 .ui-btn-down-s .ui-icon-editexpand              {.tizen-icon-common;    background-image: url(images/00_button_icon_expand_press.png); top : -@height_buttonEdit/2;}
 245 .ui-btn-down-s .ui-icon-editminus               {.tizen-icon-common;    background-image: url(images/00_button_icon_minus_press.png); top : -@height_buttonEdit/2;}
 246 .ui-btn-down-s .ui-icon-editplus                {.tizen-icon-common;    background-image: url(images/00_button_icon_plus_press.png); top : -@height_buttonEdit/2;}
 247
 248 .ui-btn-inner.ui-btn-icon-only
 249 {
 250         padding: 32 * @unit_base 32 * @unit_base;
 251 }
 252
 253 .ui-btn-icon-only .ui-btn-text
 254 {
 255         left: -9999px;
 256         display: none;
 257 }
 258
 259 .ui-btn-edit .ui-btn-inner.ui-btn-icon-only
 260 {
 261         padding: @width_buttonEdit/2 @height_buttonEdit/2;
 262 }
 263
 264 /* Circle Icon BG : data-iconbg = "circle" */
 265 .ui-btn-corner-all.ui-btn-corner-circle
 266 {
 267         .LESSborder-radius-all(1.0em);  //wongi_1018
 268 }
 269
 270 /* No BG button : data-iconbg = "nobg" */
 271 .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
 272 {
 273         background: transparent;
 274         background-color: transparent;
 275         border: none;
 276 }
 277
 278 /* Contact Edit Style */
 279 .ui-btn.ui-btn-edit .ui-btn-text
 280 {
 281         color: @color_button_EditText;
 282 }
 283
 284 .ui-btn.ui-btn-edit.ui-btn-hover-s, .ui-btn.ui-btn-edit.ui-btn-up-s, .ui-btn.ui-btn-edit.ui-btn-down-s
 285 {       font-size: 0.6em;       }
 286
 287 .ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text
 288 {
 289         color: @color_button_EditTextPress;
 290 }
 291
 292 .ui-btn.ui-btn-edit
 293 {
 294         .LESSbutton_edit_style;
 295         position: absolute;
 296         top: 0 * @unit_base;
 297         margin-top: 0 * @unit_base;
 298 }
 299
 300 .ui-btn.ui-btn-edit.ui-btn-down-s
 301 {
 302         .LESSbutton_editpress_style;
 303 }
 304
 305 .ui-btn-box-s
 306 {
 307         .LESSbutton_box_style;
 308 }
 309