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 //font size: 21....
  15 @checkbox-radio-all-height: (32*@unit_base);    //the biggest height.
  16
  17 @checkbox-radio-size-width: (32*@unit_base);
  18 @checkbox-radio-size-height: (32*@unit_base);
  19
  20 @favorite-size-width: (32*@unit_base);
  21 @favorite-size-height: (32*@unit_base);
  22
  23 @checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2
  24 @favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2
  25
  26 @icon-left-margin: (8*@unit_base);
  27 @checkbox-radio-label-left: (@checkbox-radio-size-width/2 + @icon-left-margin);
  28 @favorite-label-left: (@favorite-size-width/2 + @icon-left-margin);
  29
  30 .ui-checkbox, .ui-radio {
  31         height: @checkbox-radio-all-height;
  32         position: relative;
  33         margin: 0;
  34
  35         //clear btn basic setting
  36         .LESSclear-btn-basic-setting();
  37         input {
  38                 z-index: 1;
  39                 margin: 0px;
  40                 left: 10*@unit_base;
  41                 position: absolute;
  42                 outline: 0 !important;
  43         }
  44
  45         > input {
  46                 display : none;
  47         }
  48         .ui-btn {
  49                 z-index: 2;             // checkbox,radio input z-index: 1
  50                 height: 100%;
  51                 margin: 0;
  52                 text-align: left;
  53         }
  54         .ui-btn.ui-btn-icon-left {
  55                 display: inline-block;
  56                 .ui-btn-inner {
  57                         min-width: 40*@unit_base; // TODO: check this after layout done.
  58                         display: inline-block;
  59                         line-height: @checkbox-radio-all-height;
  60                         padding: 0 16*@unit_base 0 16*@unit_base;
  61                         .ui-btn-text {
  62                                 display: inline-block;
  63                                 vertical-align: middle;
  64                                 min-height: @checkbox-radio-size-height;
  65                         }
  66                         /* TODO : after button fixed, recheck! */
  67                         .ui-btn-text.ui-btn-text-padding-left {
  68                                 padding-left: @checkbox-radio-label-left; //for test
  69                         }
  70                         .ui-icon {
  71                                 position: absolute;
  72                                 top: 50%;
  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         }
  87
  88         .ui-btn.ui-btn-icon-left {
  89                 display: block;
  90                 .ui-btn-inner {
  91                         display: inline-block;
  92                         line-height: @checkbox-radio-all-height;
  93                         padding: 0 0 0 16*@unit_base;
  94                         .ui-btn-text {
  95                                 display: inline-block;
  96                                 vertical-align: middle;
  97                                 //margin-left: @favorite-label-left;
  98                         }
  99                         /* TODO : after button fixed, recheck! */
 100                         .ui-btn-text.ui-btn-text-padding-left {
 101                                 padding-left: @favorite-label-left;
 102                         }
 103                         .ui-icon {
 104                                 position: absolute;
 105                                 top: 50%;
 106                                 width: @favorite-size-width;
 107                                 height: @favorite-size-height;
 108                                 margin-top: @favorite-icon-internal-bottom;
 109                         }
 110                 }
 111         }
 112 }
 113
 114 /* put img inside of checkbox(normal, favorite style) */
 115
 116 .ui-icon-checkbox-off, .ui-icon-checkbox-on,
 117 .favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
 118 .ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
 119 .ui-icon-radio-off, .ui-icon-radio-on,
 120 .ui-icon-radio-on-press, .ui-icon-radio-off-press {
 121         background-size: 100% 100%;
 122         background-color: transparent;
 123 }
 124 .ui-icon-checkbox-off {
 125         width: @checkbox-radio-size-width;
 126         height: @checkbox-radio-size-height;
 127         background-image: url(images/00_check_bg.png);
 128 }
 129 .ui-icon-checkbox-on {
 130         width: @checkbox-radio-size-width;
 131         height: @checkbox-radio-size-height;
 132         background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
 133         background-repeat: no-repeat;
 134 }
 135 .ui-icon-checkbox-off-press {
 136         width: @checkbox-radio-size-width;
 137         height: @checkbox-radio-size-height;
 138         background-image: url(images/00_check_bg_press.png);
 139 }
 140 .ui-icon-checkbox-on-press {
 141         width: @checkbox-radio-size-width;
 142         height: @checkbox-radio-size-height;
 143         background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
 144         background-repeat: no-repeat;
 145 }
 146 .favorite {
 147         .ui-icon-checkbox-off,
 148         .ui-icon-checkbox-off-press {
 149                 width: @favorite-size-width;
 150                 height: @favorite-size-height;
 151                 background-image: url(images/controls/00_icon_favorite_off.png);
 152         }
 153         .ui-icon-checkbox-on,
 154         .ui-icon-checkbox-on-press {
 155                 width: @favorite-size-width;
 156                 height: @favorite-size-height;
 157                 background-image: url(images/controls/00_icon_favorite_on.png);
 158         }
 159 }
 160
 161 .ui-icon-radio-off {
 162         width: @checkbox-radio-size-width;
 163         height: @checkbox-radio-size-height;
 164         background-image: url(images/00_button_radio.png);
 165 }
 166 .ui-icon-radio-on {
 167         width: @checkbox-radio-size-width;
 168         height: @checkbox-radio-size-height;
 169         background-image: url(images/00_button_radio_select.png), url(images/00_button_radio.png);
 170 }
 171 .ui-icon-radio-on-press {
 172         width: @checkbox-radio-size-width;
 173         height: @checkbox-radio-size-height;
 174         background-image: url(images/00_button_radio.png);
 175 }
 176 .ui-icon-radio-off-press {
 177         width: @checkbox-radio-size-width;
 178         height: @checkbox-radio-size-height;
 179         background-image: url(images/00_button_radio.png);
 180 }