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                         }
  68                         .ui-icon {
  69                                 position: absolute;
  70                                 top: 50%;
  71                                 left: 16 * @unit_base;
  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                 z-index: 1;
  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                         .ui-icon {
 100                                 position: absolute;
 101                                 top: 50%;
 102                                 width: @favorite-size-width;
 103                                 height: @favorite-size-height;
 104                                 margin-top: @favorite-icon-internal-bottom;
 105                         }
 106                 }
 107         }
 108 }
 109
 110 /* put img inside of checkbox(normal, favorite, on&off style) */
 111 @checkbox-radio-size-width: (42*@unit_base);
 112 @checkbox-radio-size-height: (42*@unit_base);
 113
 114 @favorite-size-width: (64*@unit_base);
 115 @favorite-size-height: (64*@unit_base);
 116
 117 .ui-icon-checkbox-off, .ui-icon-checkbox-on,
 118 .favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
 119 .ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
 120 .ui-icon-radio-off, .ui-icon-radio-on,
 121 .ui-icon-radio-on-press, .ui-icon-radio-off-press {
 122         background-size: 100% 100%;
 123         background-color: transparent;
 124 }
 125 .ui-icon-checkbox-off {
 126         width: @checkbox-radio-size-width;
 127         height: @checkbox-radio-size-height;
 128         background-image: url(images/00_check_bg.png);
 129 }
 130 .ui-icon-checkbox-on {
 131         width: @checkbox-radio-size-width;
 132         height: @checkbox-radio-size-height;
 133         background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
 134         background-repeat: no-repeat;
 135 }
 136 .ui-icon-checkbox-off-press {
 137         width: @checkbox-radio-size-width;
 138         height: @checkbox-radio-size-height;
 139         background-image: url(images/00_check_bg_press.png);
 140 }
 141 .ui-icon-checkbox-on-press {
 142         width: @checkbox-radio-size-width;
 143         height: @checkbox-radio-size-height;
 144         background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
 145         background-repeat: no-repeat;
 146 }
 147 .favorite {
 148         .ui-icon-checkbox-off,
 149         .ui-icon-checkbox-off-press {
 150                 width: @favorite-size-width;
 151                 height: @favorite-size-height;
 152                 background-image: url(images/00_winset_icon_favorite_off.png);
 153         }
 154         .ui-icon-checkbox-on,
 155         .ui-icon-checkbox-on-press {
 156                 width: @favorite-size-width;
 157                 height: @favorite-size-height;
 158                 background-image: url(images/00_winset_icon_favorite_on.png);
 159         }
 160 }
 161
 162 .ui-icon-radio-off {
 163         width: @checkbox-radio-size-width;
 164         height: @checkbox-radio-size-height;
 165         background-image: url(images/00_button_radio_normal2.png);
 166 }
 167 .ui-icon-radio-on {
 168         width: @checkbox-radio-size-width;
 169         height: @checkbox-radio-size-height;
 170         background-image: url(images/00_button_radio_normal1.png);
 171 }
 172 .ui-icon-radio-on-press {
 173         width: @checkbox-radio-size-width;
 174         height: @checkbox-radio-size-height;
 175         background-image: url(images/00_button_radio_press2.png);
 176 }
 177 .ui-icon-radio-off-press {
 178         width: @checkbox-radio-size-width;
 179         height: @checkbox-radio-size-height;
 180         background-image: url(images/00_button_radio_press1.png);
 181 }