src/themes/tizen/common/jquery.mobile.forms.textinput.less

   1 @import "config.less";
   2 @search-bar-padding: (13*@unit_base);
   3
   4 label.ui-input-text {
   5         font-size: 22 * @unit_base;
   6         line-height: 1.2;
   7         display: block;
   8         font-weight: normal;
   9         margin: 0 0 .3em;
  10 }
  11 input.ui-input-text, textarea.ui-input-text {
  12         background-image: none;
  13         padding: .4em;
  14         line-height: 1.4;
  15         font-size: 16 * @unit_base;
  16         display: block;
  17 }
  18 input.ui-input-text {
  19         appearance: none;
  20         -webkit-appearance: none;
  21 }
  22 textarea.ui-input-text {
  23         height: 50*@unit_base;
  24         resize: none;
  25         -webkit-transition: height 200ms linear;
  26         -moz-transition: height 200ms linear;
  27         -o-transition: height 200ms linear;
  28         -ms-transition: height 200ms linear;
  29         transition: height 200ms linear;
  30 }
  31
  32 .ui-input-search {
  33         position: relative;
  34
  35         padding-right : 36 * @unit_base;
  36         padding-left : 36 * @unit_base;
  37
  38         border : 1px solid @color_searchbar_border;
  39         -webkit-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
  40         -moz-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
  41         -o-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
  42         -ms-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
  43         box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
  44
  45         input.ui-input-text {
  46                 width : 100%;
  47                 border: none;
  48                 background: transparent none;
  49                 outline: 0 !important;
  50         }
  51         .ui-btn-down-s, .ui-btn-up-s, .ui-btn-hover-s {
  52                 border: none;
  53                 background: transparent none;
  54         }
  55         .ui-btn-icon-notext.ui-input-clear {
  56                 width: 36 * @unit_base;
  57                 height: 33 * @unit_base;
  58                 .ui-btn-inner {
  59                         padding : 6 * @unit_base;
  60                 }
  61         }
  62         .ui-btn-inner {
  63                 .ui-icon-deleteSearch {
  64                         width: 22 * @unit_base;
  65                         height: 22 * @unit_base;
  66                         margin-top : 0px;
  67                         margin-left : 0px;
  68                 }
  69         }
  70
  71         .ui-input-clear {
  72                 position: absolute;
  73                 right: 0;
  74                 top: 0;
  75                 vertical-align: middle;
  76         }
  77         .ui-input-clear-hidden { display: none; }
  78 }
  79
  80 /* code for label+inputbox : remove this code if webApp dev. controls input area */
  81 @media all and (min-width: 721*@unit_base) {
  82         label.ui-input-text:not([data-type='search']) {
  83                 vertical-align: top;
  84                 display: inline-block;
  85                 margin: 0 2% 0 0;
  86         }
  87         input.ui-input-text:not([data-type='search']), textarea.ui-input-text:not([data-type='search']){
  88                 width: 60%;
  89                 display: inline-block;
  90         }
  91         .ui-input-search input.ui-input-text:not([data-type='search']) {
  92                 width: 85%;
  93         }
  94 }
  95
  96 /* search bar */
  97 .ui-body-s > div > .ui-field-contain > .input-search-bar,
  98 .ui-body-s > .ui-field-contain > .input-search-bar {
  99         margin : -48*@unit_base -15*@unit_base -32*@unit_base -15*@unit_base;
 100 } /* Need to confirm exact concept */
 101
 102 .input-search-bar {
 103         position : relative;
 104
 105         background-color: @color_searchbar_bg;
 106         padding: @search-bar-padding;
 107         vertical-align: middle;
 108         .ui-corner-all {
 109                 .LESSborder-radius-all(.3em);
 110         }
 111
 112         .ui-input-search {
 113                 font-size : 16 * @unit_base;
 114                 display : block;
 115                 position: relative;
 116
 117                 background-color: @color_searchbar_input_field_bg;
 118                 .ui-input-text {
 119                         height: 33 * @unit_base;
 120                         padding : 0px;
 121
 122                         margin-right : 38 * @unit_base;
 123                 }
 124
 125                 .ui-image-search {
 126                         position: absolute;
 127                         top: 0px;
 128                         left: 0px;
 129                         width : 22 * @unit_base;
 130                         height : 22 * @unit_base;
 131                         margin: 6 * @unit_base;
 132                 }
 133         }
 134
 135         .ui-input-search-default {
 136                 margin-right : 75 * @unit_base;
 137                 -webkit-transition: all 400ms linear;
 138                 -moz-transition: all 400ms linear;
 139                 -o-transition: all 400ms linear;
 140                 -ms-transition: all 400ms linear;
 141                 transition: all 400ms linear;
 142         }
 143
 144         .ui-input-search-wide {
 145                 margin-right : 0 * @unit_base;
 146                 -webkit-transition: all 400ms linear;
 147                 -moz-transition: all 400ms linear;
 148                 -o-transition: all 400ms linear;
 149                 -ms-transition: all 400ms linear;
 150                 transition: all 400ms linear;
 151         }
 152
 153         .ui-btn-icon-cancel.ui-input-cancel {
 154                 display: inline-block;
 155                 position: absolute;
 156
 157                 top     : 3 * @unit_base;
 158                 right : 0 * @unit_base;
 159                 height : 33 * @unit_base;
 160                 margin-right : 10 * @unit_base;
 161
 162                 vertical-align: middle;
 163                 padding : 0px;
 164
 165                 border-color : none;
 166
 167                 width : 68 * @unit_base;
 168                 -webkit-transition: all 400ms linear;
 169                 -moz-transition: all 400ms linear;
 170                 -o-transition: all 400ms linear;
 171                 -ms-transition: all 400ms linear;
 172                 transition: all 400ms linear;
 173
 174                 .ui-btn-inner {
 175                         padding-top : 6 * @unit_base;
 176                         padding-bottom : 6 * @unit_base;
 177                         .ui-btn-text{
 178                                 font-size : 15 * @unit_base;
 179                         }
 180                 }
 181
 182                 &.ui-btn-cancel-hide {
 183                         right : -75 * @unit_base;
 184                         visibility: hidden;
 185                 }
 186                 &.ui-btn-cancel-show {
 187                         right : 0px;
 188                         visibility: visible;
 189                 }
 190         }
 191
 192         .ui-search-bar-icon {
 193                 margin-left : 42 * @unit_base;
 194         }
 195
 196         .ui-btn.ui-btn-search-front-icon {
 197                 position : absolute;
 198                 width : 35 * @unit_base;
 199                 height : 35 * @unit_base;
 200                 top : 2 * @unit_base;
 201                 border-radius : 66 * @unit_base;
 202                 >.ui-btn-inner.ui-btn-icon-only {
 203                         border-radius : 66 * @unit_base;
 204                 }
 205         }
 206 }
 207
 208 .ui-header .input-search-bar {
 209         padding-top : 4 * @unit_base;
 210         padding-bottom : 4 * @unit_base;
 211 }
 212
 213 .ui-image-search {
 214         background-image: url(images/controls/00_search_icon.png);
 215         background-repeat: no-repeat;
 216         background-size : 100% 100%;
 217 }
 218
 219 .ui-icon-deleteSearch {
 220         background-image: url(images/controls/00_field_btn_clear.png);
 221         background-repeat: no-repeat;
 222         background-size : 100% 100%;
 223 }
 224