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

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