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

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