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