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                 position: absolute;
  39                 left: -10000px;
  40                 height: 100%;
  41                 outline: 0 !important;
  42         }
  43         .ui-btn {
  44                 height: 100%;
  45                 margin: 0;
  46                 text-align: left;
  47         }
  48         .ui-btn.ui-btn-icon-left {
  49                 display: block;
  50                 .ui-btn-inner {
  51                         min-width: 40*@unit_base; // TODO: check this after layout done.
  52                         display: inline-block;
  53                         line-height: @checkbox-radio-all-height;
  54                         padding: 0 16*@unit_base 0 16*@unit_base;
  55                         .ui-btn-text {
  56                                 display: inline-block;
  57                                 vertical-align: middle;
  58                                 min-height: @checkbox-radio-size-height;
  59                         }
  60                         /* TODO : after button fixed, recheck! */
  61                         .ui-btn-text.ui-btn-text-padding-left {
  62                                 padding-left: @checkbox-radio-label-left; //for test
  63                         }
  64                         .ui-icon {
  65                                 position: absolute;
  66                                 top: 50%;
  67                                 width: @checkbox-radio-size-width;
  68                                 height: @checkbox-radio-size-height;
  69                                 margin-top: @checkbox-radio-icon-internal-bottom;
  70                         }
  71                 }
  72         }
  73 }
  74 .ui-checkbox.favorite {
  75         input {
  76                 position: absolute;
  77                 left: -10000px;
  78                 height: 100%;
  79                 outline: 0 !important;
  80         }
  81
  82         .ui-btn.ui-btn-icon-left {
  83                 display: block;
  84                 .ui-btn-inner {
  85                         display: inline-block;
  86                         line-height: @checkbox-radio-all-height;
  87                         padding: 0 0 0 16*@unit_base;
  88                         .ui-btn-text {
  89                                 display: inline-block;
  90                                 vertical-align: middle;
  91                                 //margin-left: @favorite-label-left;
  92                         }
  93                         /* TODO : after button fixed, recheck! */
  94                         .ui-btn-text.ui-btn-text-padding-left {
  95                                 padding-left: @favorite-label-left;
  96                         }
  97                         .ui-icon {
  98                                 position: absolute;
  99                                 top: 50%;
 100                                 width: @favorite-size-width;
 101                                 height: @favorite-size-height;
 102                                 margin-top: @favorite-icon-internal-bottom;
 103                         }
 104                 }
 105         }
 106 }
 107
 108 /* put img inside of checkbox(normal, favorite style) */
 109
 110 .ui-icon-checkbox-off, .ui-icon-checkbox-on,
 111 .favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
 112 .ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
 113 .ui-icon-radio-off, .ui-icon-radio-on,
 114 .ui-icon-radio-on-press, .ui-icon-radio-off-press {
 115         background-size: 100% 100%;
 116         background-color: transparent;
 117 }
 118 .ui-icon-checkbox-off {
 119         width: @checkbox-radio-size-width;
 120         height: @checkbox-radio-size-height;
 121         background-image: url(images/00_check_bg.png);
 122 }
 123 .ui-icon-checkbox-on {
 124         width: @checkbox-radio-size-width;
 125         height: @checkbox-radio-size-height;
 126         background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
 127         background-repeat: no-repeat;
 128 }
 129 .ui-icon-checkbox-off-press {
 130         width: @checkbox-radio-size-width;
 131         height: @checkbox-radio-size-height;
 132         background-image: url(images/00_check_bg_press.png);
 133 }
 134 .ui-icon-checkbox-on-press {
 135         width: @checkbox-radio-size-width;
 136         height: @checkbox-radio-size-height;
 137         background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
 138         background-repeat: no-repeat;
 139 }
 140 .favorite {
 141         .ui-icon-checkbox-off,
 142         .ui-icon-checkbox-off-press {
 143                 width: @favorite-size-width;
 144                 height: @favorite-size-height;
 145                 background-image: url(images/00_winset_icon_favorite_off.png);
 146         }
 147         .ui-icon-checkbox-on,
 148         .ui-icon-checkbox-on-press {
 149                 width: @favorite-size-width;
 150                 height: @favorite-size-height;
 151                 background-image: url(images/00_winset_icon_favorite_on.png);
 152         }
 153 }
 154
 155 .ui-icon-radio-off {
 156         width: @checkbox-radio-size-width;
 157         height: @checkbox-radio-size-height;
 158         background-image: url(images/00_button_radio.png);
 159 }
 160 .ui-icon-radio-on {
 161         width: @checkbox-radio-size-width;
 162         height: @checkbox-radio-size-height;
 163         background-image: url(images/00_button_radio_select.png), url(images/00_button_radio.png);
 164 }
 165 .ui-icon-radio-on-press {
 166         width: @checkbox-radio-size-width;
 167         height: @checkbox-radio-size-height;
 168         background-image: url(images/00_button_radio.png);
 169 }
 170 .ui-icon-radio-off-press {
 171         width: @checkbox-radio-size-width;
 172         height: @checkbox-radio-size-height;
 173         background-image: url(images/00_button_radio.png);
 174 }