1 @import "config.less";
\r
2 @search-bar-padding: (13*@unit_base);
\r
4 label.ui-input-text {
\r
5 font-size: 22 * @unit_base;
\r
11 input.ui-input-text, textarea.ui-input-text {
\r
12 background-image: none;
\r
15 font-size: 16 * @unit_base;
\r
18 input.ui-input-text {
\r
20 -webkit-appearance: none;
\r
22 textarea.ui-input-text {
\r
23 height: 50*@unit_base;
\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
35 padding-right : 36 * @unit_base;
\r
36 padding-left : 36 * @unit_base;
\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
45 input.ui-input-text {
\r
48 background: transparent none;
\r
49 outline: 0 !important;
\r
51 .ui-btn-down-s, .ui-btn-up-s, .ui-btn-hover-s {
\r
53 background: transparent none;
\r
55 .ui-btn-icon-notext.ui-input-clear {
\r
56 width: 36 * @unit_base;
\r
57 height: 33 * @unit_base;
\r
59 padding : 6 * @unit_base;
\r
62 .ui-icon-deleteSearch {
\r
63 width: 22 * @unit_base;
\r
64 height: 22 * @unit_base;
\r
71 vertical-align: middle;
\r
73 .ui-input-clear-hidden { display: none; }
\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
83 input.ui-input-text:not([data-type='search']), textarea.ui-input-text:not([data-type='search']){
\r
85 display: inline-block;
\r
87 .ui-input-search input.ui-input-text:not([data-type='search']) {
\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
99 position : relative;
\r
101 background-color: @color_searchbar_bg;
\r
102 padding: @search-bar-padding;
\r
103 vertical-align: middle;
\r
105 .LESSborder-radius-all(.3em);
\r
109 font-size : 16 * @unit_base;
\r
111 position: relative;
\r
113 background-color: @color_searchbar_input_field_bg;
\r
115 height: 33 * @unit_base;
\r
118 margin-right : 38 * @unit_base;
\r
122 position: absolute;
\r
125 width : 22 * @unit_base;
\r
126 height : 22 * @unit_base;
\r
127 margin: 6 * @unit_base;
\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
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
150 .ui-btn-icon-cancel.ui-input-cancel {
\r
151 display: inline-block;
\r
152 position: absolute;
\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
159 vertical-align: middle;
\r
162 border-color : none;
\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
172 padding-top : 6 * @unit_base;
\r
173 padding-bottom : 6 * @unit_base;
\r
175 font-size : 15 * @unit_base;
\r
179 &.ui-btn-cancel-hide {
\r
180 right : -75 * @unit_base;
\r
181 visibility: hidden;
\r
183 &.ui-btn-cancel-show {
\r
185 visibility: visible;
\r
189 .ui-search-bar-icon {
\r
190 margin-left : 42 * @unit_base;
\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
205 .ui-header .input-search-bar {
\r
206 padding-top : 4 * @unit_base;
\r
207 padding-bottom : 4 * @unit_base;
\r
211 background-image: url(images/00_search_icon.png);
\r
212 background-repeat: no-repeat;
\r
213 background-size : 100% 100%;
\r
216 .ui-icon-deleteSearch {
\r
217 background-image: url(images/00_Edit_Field_clear.png);
\r
218 background-repeat: no-repeat;
\r
219 background-size : 100% 100%;
\r