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: 0px;\r
  63         left: 0px;\r
  64         width : 42 * @unit_base;\r
  65         height : 42 * @unit_base;\r
  66         margin: 16 * @unit_base;\r
  67 }\r
  68 \r
  69 /* orientation adjustments - incomplete!*/\r
  70 @media all and (min-width: 721*@unit_base){\r
  71         label.ui-input-text  {\r
  72                 vertical-align: top;\r
  73                 display: inline-block;\r
  74                 margin: 0 2% 0 0\r
  75         }\r
  76         input.ui-input-text,\r
  77         textarea.ui-input-text,\r
  78         .ui-input-search { width: 60%; display: inline-block; }\r
  79         .ui-input-search input.ui-input-text { width: 85%; /*echos rule from above*/ }\r
  80 }\r
  81 \r
  82 /* search bar */\r
  83 .ui-body-s > div > .ui-field-contain > .input-search-bar,\r
  84 .ui-body-s > .ui-field-contain > .input-search-bar {\r
  85         margin : -48*@unit_base -15*@unit_base -32*@unit_base -15*@unit_base;\r
  86 } /* Need to confirm exact concept : Jinhyuk */\r
  87 \r
  88 .input-search-bar {\r
  89         position : relative;  /* In case searchbar in header : Jinhyuk */\r
  90         \r
  91         background-color: @color_searchbar_bg;\r
  92         padding: @search-bar-padding;\r
  93         vertical-align: middle;\r
  94         .ui-corner-all {\r
  95                 .LESSborder-radius-all(.3em);\r
  96         }\r
  97         .ui-input-search {\r
  98                 font-size : 32 * @unit_base;\r
  99                 display: inline-block;\r
 100                 position: relative;\r
 101                 width: 70%;\r
 102                 padding: 0;\r
 103                 background-color: @color_searchbar_input_field_bg;\r
 104                 .ui-input-text {\r
 105                         height: 74 * @unit_base;\r
 106                         padding : 0px;\r
 107                         margin-left : 74 * @unit_base;\r
 108                 }\r
 109         }\r
 110         .ui-input-search-default {\r
 111                 width: 70%;\r
 112                 -webkit-transition: width 400ms linear;\r
 113                 -moz-transition: width 400ms linear;\r
 114                 -o-transition: width 400ms linear;\r
 115                 transition: width 400ms linear;\r
 116         }\r
 117         .ui-input-search-wide {\r
 118                 width: 100%;\r
 119                 -webkit-transition: width 400ms linear;\r
 120                 -moz-transition: width 400ms linear;\r
 121                 -o-transition: width 400ms linear;\r
 122                 transition: width 400ms linear;\r
 123         }\r
 124         .ui-btn-icon-cancel {\r
 125                 display: inline-block;\r
 126                 position: absolute;\r
 127                 left: 70%;\r
 128 \r
 129                 vertical-align: middle;\r
 130                 margin-left : 10 * @unit_base;\r
 131                 margin-right : 10 * @unit_base;\r
 132                 padding : 0px;\r
 133 \r
 134                 height : 74 * @unit_base;\r
 135                 \r
 136                 border-color : none;\r
 137                 .ui-btn-text{\r
 138                         font-size : 32 * @unit_base;\r
 139                 }       \r
 140                 .ui-btn-inner {\r
 141                         padding-top : 18 * @unit_base;\r
 142                         padding-bottom : 18 * @unit_base;\r
 143                 }       \r
 144         }\r
 145         \r
 146         .ui-btn-icon-cancel.ui-input-cancel {\r
 147                 width: 26%;             \r
 148                 -webkit-transition: all 400ms linear;\r
 149                 -moz-transition: all 400ms linear;\r
 150                 -o-transition: all 400ms linear;\r
 151                 transition: all 400ms linear;\r
 152         }\r
 153         .ui-btn-cancel-hide {\r
 154                 left: 100%;\r
 155                 visibility: hidden;\r
 156         }\r
 157         .ui-btn-cancel-show {\r
 158                 left: 70%;\r
 159                 visibility: visible;\r
 160         }\r
 161 }\r
 162 \r
 163 .ui-header .input-search-bar {\r
 164         padding-top : 16 * @unit_base;\r
 165         padding-bottom : 16 * @unit_base;\r
 166 }\r
 167 \r