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