src/themes/tizen/common/jquery.mobile.forms.checkboxradio.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 @import "config.less";
   7
   8 .ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
   9 //.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 2.313em; }
  10 //.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 2.313em; }
  11 //.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
  12 //.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
  13
  14 .ui-icon-radio-off {
  15         background-color: transparent;
  16 }
  17
  18 //font size: 42....
  19 @checkbox-icon-left: (16*@unit_base);   //16
  20
  21 @checkbox-radio-all-height: (80*@unit_base);    //on-off style is the biggest.
  22
  23 @checkbox-radio-size-width: (42*@unit_base);
  24 @checkbox-radio-size-height: (42*@unit_base);
  25
  26 @favorite-size-width: (64*@unit_base);
  27 @favorite-size-height: (64*@unit_base);
  28
  29 @checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2 (42/2)
  30 @favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2 (64/2)
  31
  32 @icon-left-margin: (16*@unit_base);
  33 @checkbox-radio-label-left: (@checkbox-radio-size-width + 2*@icon-left-margin); //16+42+16
  34 @favorite-label-left: (@favorite-size-width + 2*@icon-left-margin);     //16+64+16
  35
  36 .ui-checkbox, .ui-radio {
  37         height: @checkbox-radio-all-height;
  38         position: relative;
  39         margin: 0;
  40         z-index: 1;
  41
  42         //clear btn basic setting
  43         .LESSclear-btn-basic-setting();
  44         input {
  45                 position: absolute;
  46                 left: -10000px;
  47                 height: 100%;
  48                 outline: 0 !important;
  49                 z-index: 0;
  50         }
  51         .ui-btn {
  52                 height: 100%;
  53                 margin: 0;
  54                 text-align: left;
  55                 z-index: 2;
  56         }
  57         .ui-btn.ui-btn-icon-left {
  58                 display: block;
  59                 .ui-btn-inner {
  60                         display: inline-block;
  61                         line-height: @checkbox-radio-all-height;
  62                         padding: 0 16*@unit_base 0 16*@unit_base;
  63                         .ui-btn-text {
  64                                 display: inline-block;
  65                                 vertical-align: middle;
  66                                 margin-left: 40 * @unit_base;
  67                                 min-height: @checkbox-radio-size-height;
  68                         }
  69                         .ui-icon {
  70                                 position: absolute;
  71                                 top: 50%;
  72                                 left: 16 * @unit_base;
  73                                 width: @checkbox-radio-size-width;
  74                                 height: @checkbox-radio-size-height;
  75                                 margin-top: @checkbox-radio-icon-internal-bottom;
  76                         }
  77                 }
  78         }
  79 }
  80 .ui-checkbox.favorite {
  81         input {
  82                 position: absolute;
  83                 left: -10000px;
  84                 height: 100%;
  85                 outline: 0 !important;
  86                 z-index: 1;
  87         }
  88
  89         .ui-btn.ui-btn-icon-left {
  90                 display: block;
  91                 .ui-btn-inner {
  92                         display: inline-block;
  93                         line-height: @checkbox-radio-all-height;
  94                         padding: 0 0 0 16*@unit_base;
  95                         .ui-btn-text {
  96                                 display: inline-block;
  97                                 vertical-align: middle;
  98                                 margin-left: @favorite-label-left;
  99                         }
 100                         .ui-icon {
 101                                 position: absolute;
 102                                 top: 50%;
 103                                 width: @favorite-size-width;
 104                                 height: @favorite-size-height;
 105                                 margin-top: @favorite-icon-internal-bottom;
 106                         }
 107                 }
 108         }
 109 }
 110
 111 /* put img inside of checkbox(normal, favorite, on&off style) */
 112 @checkbox-radio-size-width: (42*@unit_base);
 113 @checkbox-radio-size-height: (42*@unit_base);
 114
 115 @favorite-size-width: (64*@unit_base);
 116 @favorite-size-height: (64*@unit_base);
 117
 118 .ui-icon-checkbox-off, .ui-icon-checkbox-on,
 119 .favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
 120 .ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
 121 .ui-icon-radio-off, .ui-icon-radio-on,
 122 .ui-icon-radio-on-press, .ui-icon-radio-off-press {
 123         background-size: 100% 100%;
 124         background-color: transparent;
 125 }
 126 .ui-icon-checkbox-off {
 127         width: @checkbox-radio-size-width;
 128         height: @checkbox-radio-size-height;
 129         background-image: url(images/00_check_bg.png);
 130 }
 131 .ui-icon-checkbox-on {
 132         width: @checkbox-radio-size-width;
 133         height: @checkbox-radio-size-height;
 134         background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
 135         background-repeat: no-repeat;
 136 }
 137 .ui-icon-checkbox-off-press {
 138         width: @checkbox-radio-size-width;
 139         height: @checkbox-radio-size-height;
 140         background-image: url(images/00_check_bg_press.png);
 141 }
 142 .ui-icon-checkbox-on-press {
 143         width: @checkbox-radio-size-width;
 144         height: @checkbox-radio-size-height;
 145         background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
 146         background-repeat: no-repeat;
 147 }
 148 .favorite {
 149         .ui-icon-checkbox-off,
 150         .ui-icon-checkbox-off-press {
 151                 width: @favorite-size-width;
 152                 height: @favorite-size-height;
 153                 background-image: url(images/00_winset_icon_favorite_off.png);
 154         }
 155         .ui-icon-checkbox-on,
 156         .ui-icon-checkbox-on-press {
 157                 width: @favorite-size-width;
 158                 height: @favorite-size-height;
 159                 background-image: url(images/00_winset_icon_favorite_on.png);
 160         }
 161 }
 162
 163 .ui-icon-radio-off {
 164         width: @checkbox-radio-size-width;
 165         height: @checkbox-radio-size-height;
 166         background-image: url(images/00_button_radio_normal2.png);
 167 }
 168 .ui-icon-radio-on {
 169         width: @checkbox-radio-size-width;
 170         height: @checkbox-radio-size-height;
 171         background-image: url(images/00_button_radio_normal1.png);
 172 }
 173 .ui-icon-radio-on-press {
 174         width: @checkbox-radio-size-width;
 175         height: @checkbox-radio-size-height;
 176         background-image: url(images/00_button_radio_press2.png);
 177 }
 178 .ui-icon-radio-off-press {
 179         width: @checkbox-radio-size-width;
 180         height: @checkbox-radio-size-height;
 181         background-image: url(images/00_button_radio_press1.png);
 182 }