Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Merge branch 'text-input-clear-btn'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Nov 20, 2012
2 parents 3e34506 + 1c22f1d commit d538941
Show file tree
Hide file tree
Showing 7 changed files with 504 additions and 39 deletions.
47 changes: 26 additions & 21 deletions css/structure/jquery.mobile.forms.textinput.css
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; display: block; width: 100%; outline: 0; }
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 0; }
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text { margin: 0; }
input.ui-input-text, textarea.ui-input-text, .ui-input-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
.ui-input-search { padding: 0 30px; }
div.ui-input-text input.ui-input-text { padding: .4em 30px .4em .4em; }
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
input.ui-input-text, textarea.ui-input-text, .ui-input-search, div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
.ui-input-search { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
.ui-input-search.ui-mini { margin: .25em 0; }
.ui-field-contain .ui-input-search { margin: 0; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { right: -3px; }

.ui-input-search .ui-input-clear-hidden { display: none; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-mini .ui-input-clear { margin-top: -14px; right: -3px; }
.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }

/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
input:-moz-placeholder { color: #aaa; }
Expand All @@ -24,12 +26,15 @@ input:-moz-placeholder { color: #aaa; }
input[type=number]::-webkit-outer-spin-button { margin: 0; }

@media all and (min-width: 28em){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search { width: 100%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search,
.ui-field-contain div.ui-input-text { width: 78%; display: inline-block; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search,
.ui-hide-label div.ui-input-text,
.ui-input-search input.ui-input-text,
div.ui-input-text input.ui-input-text { width: 100%; }
}
2 changes: 2 additions & 0 deletions docs/demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ <h2>Demos</h2>
<li data-role="list-divider">Selects</li>
<li><a href="selects/index.html" data-ajax="false">Selects</a></li>
<li><a href="selects/custom-multiple-selects.html" data-ajax="false">Custom multiple selects</a></li>
<li data-role="list-divider">Textinput</li>
<li><a href="textinput/index.html" data-ajax="false">Textinput</a></li>
<li data-role="list-divider">Collapsibles</li>
<li><a href="collapsibles/index.html" data-ajax="false">Collapsible</a></li>
<li><a href="collapsibles/collapsible-set.html" data-ajax="false">Collapsible Set</a></li>
Expand Down
Loading

0 comments on commit d538941

Please sign in to comment.