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         width: 95%;\r
  18 }\r
  19 input.ui-input-text { -webkit-appearance: none; }\r
  20 textarea.ui-input-text {\r
  21         height: 50*@unit_base;\r
  22         -webkit-transition: height 200ms linear;\r
  23         -moz-transition: height 200ms linear;\r
  24         -o-transition: height 200ms linear;\r
  25         transition: height 200ms linear;\r
  26 }\r
  27 \r
  28 .ui-input-search {\r
  29         padding: 0 0;\r
  30         position: relative;\r
  31         input.ui-input-text {\r
  32                 border: none;\r
  33                 background: transparent none;\r
  34                 outline: 0 !important;\r
  35         }\r
  36         .ui-btn-down-s, .ui-btn-up-s, .ui-btn-hover-s {\r
  37                 border: none;\r
  38                 background: transparent none;\r
  39         }\r
  40         .ui-btn-icon-notext.ui-input-clear {\r
  41                 width: 38 * @unit_base;\r
  42                 height: 38 * @unit_base;\r
  43                 .ui-btn-inner { padding: 0; }\r
  44         }\r
  45         .ui-icon-deleteSearch {\r
  46                 width: 38 * @unit_base;\r
  47                 height: 38 * @unit_base;\r
  48         }\r
  49 \r
  50         .ui-input-clear {\r
  51                 position: absolute;\r
  52                 right: 0;\r
  53                 top: 0;\r
  54                 vertical-align: middle;\r
  55                 margin: 16 * @unit_base;\r
  56         }\r
  57         .ui-input-clear-hidden { display: none; }\r
  58 }\r
  59 \r
  60 .ui-image-search {\r
  61         position: absolute;\r
  62         top: 0;\r
  63         left: 0;\r
  64         width : 100%;\r
  65         margin: 16 * @unit_base;\r
  66 }\r
  67 \r
  68 .ui-image-searchfield:after {\r
  69         margin-left: 58 * @unit_base;\r
  70         content: "Search";\r
  71         color: @color_searchbar_default_text;\r
  72 }\r
  73 \r
  74 /* orientation adjustments - incomplete!*/\r
  75 @media all and (min-width: 720*@unit_base){\r
  76         label.ui-input-text  {\r
  77                 vertical-align: top;\r
  78                 display: inline-block;\r
  79                 width: 20%;\r
  80                 margin: 0 2% 0 0\r
  81         }\r
  82         input.ui-input-text,\r
  83         textarea.ui-input-text,\r
  84         .ui-input-search { width: 60%; display: inline-block; }\r
  85         .ui-input-search input.ui-input-text { width: 85%; /*echos rule from above*/ }\r
  86 }\r
  87 \r
  88 /* search bar */\r
  89 .ui-body-s > div > .ui-field-contain > .input-search-bar,\r
  90 .ui-body-s > .ui-field-contain > .input-search-bar {\r
  91         margin : -48*@unit_base -15*@unit_base -32*@unit_base -15*@unit_base;\r
  92 } /* Need to confirm exact concept : Jinhyuk */\r
  93 \r
  94 .input-search-bar {\r
  95         position : relative;  /* In case searchbar in header : Jinhyuk */\r
  96         \r
  97         background-color: @color_searchbar_bg;\r
  98         padding: @search-bar-padding;\r
  99         vertical-align: middle;\r
 100         .ui-corner-all {\r
 101                 .LESSborder-radius-all(.3em);\r
 102         }\r
 103         .ui-input-search {\r
 104                 font-size : 32 * @unit_base;\r
 105                 display: inline-block;\r
 106                 position: relative;\r
 107                 width: 70%;\r
 108                 padding: 0;\r
 109                 background-color: @color_searchbar_input_field_bg;\r
 110                 .ui-input-text {\r
 111                         height: 74 * @unit_base;\r
 112                         padding : 0px;\r
 113                         margin-left : 10 * @unit_base;\r
 114                 }\r
 115         }\r
 116         .ui-input-search-default {\r
 117                 width: 70%;\r
 118                 -webkit-transition: width 400ms linear;\r
 119                 -moz-transition: width 400ms linear;\r
 120                 -o-transition: width 400ms linear;\r
 121                 transition: width 400ms linear;\r
 122         }\r
 123         .ui-input-search-wide {\r
 124                 width: 100%;\r
 125                 -webkit-transition: width 400ms linear;\r
 126                 -moz-transition: width 400ms linear;\r
 127                 -o-transition: width 400ms linear;\r
 128                 transition: width 400ms linear;\r
 129         }\r
 130         .ui-btn-icon-cancel {\r
 131                 display: inline-block;\r
 132                 position: absolute;\r
 133                 left: 70%;\r
 134 \r
 135                 vertical-align: middle;\r
 136                 margin-left : 10 * @unit_base;\r
 137                 margin-right : 10 * @unit_base;\r
 138                 padding : 0px;\r
 139 \r
 140                 height : 74 * @unit_base;\r
 141                 \r
 142                 border-color : none;\r
 143                 .ui-btn-text{\r
 144                         font-size : 32 * @unit_base;\r
 145                 }       \r
 146                 .ui-btn-inner {\r
 147                         padding-top : 18 * @unit_base;\r
 148                         padding-bottom : 18 * @unit_base;\r
 149                 }       \r
 150         }\r
 151         \r
 152         .ui-btn-icon-cancel.ui-input-cancel {\r
 153                 width: 26%;             \r
 154                 -webkit-transition: all 400ms linear;\r
 155                 -moz-transition: all 400ms linear;\r
 156                 -o-transition: all 400ms linear;\r
 157                 transition: all 400ms linear;\r
 158         }\r
 159         .ui-btn-cancel-hide {\r
 160                 left: 100%;\r
 161                 visibility: hidden;\r
 162         }\r
 163         .ui-btn-cancel-show {\r
 164                 left: 70%;\r
 165                 visibility: visible;\r
 166         }\r
 167 }\r
 168 \r
 169 .ui-header .input-search-bar {\r
 170         padding-top : 16 * @unit_base;\r
 171         padding-bottom : 16 * @unit_base;\r
 172 }\r
 173 \r