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