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