MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / skins / vector / components / search.less

diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
new file mode 100644 (file)
index 0000000..50bfe13
--- /dev/null
+++ b/skins/vector/components/search.less
@@ -0,0 +1,109 @@
+@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+
+/* Search */
+#p-search {
+       /* @noflip */
+       float: left;
+       margin-right: 0.5em;
+       margin-left: 0.5em;
+
+       h3 {
+               .mixin-screen-reader-text;
+       }
+
+       form,
+       input {
+               margin: 0;
+               margin-top: 0.4em;
+       }
+}
+
+div#simpleSearch {
+       display: block;
+       width: 12.6em;
+       width: 20vw; /* responsive width */
+       min-width: 5em;
+       max-width: 20em;
+       padding-right: 1.4em;
+       height: 1.4em;
+       margin-top: 0.65em;
+       position: relative;
+       min-height: 1px; /* Gotta trigger hasLayout for IE7 */
+       border: solid 1px #aaa;
+       color: #000;
+       background-color: #fff;
+       .background-image( 'images/search-fade.png' );
+       background-position: top left;
+       background-repeat: repeat-x;
+
+       // Styles for both the search input and the button
+       input {
+               margin: 0;
+               padding: 0;
+               border: 0;
+               background-color: transparent;
+               color: #000;
+       }
+
+       // The search input
+       #searchInput {
+               width: 100%;
+               padding: 0.2em 0 0.2em 0.2em;
+               font-size: 13px;
+               direction: ltr;
+
+               &:focus {
+                       outline: 0;
+               }
+
+               /* stylelint-disable indentation */
+               .mixin-placeholder( {
+                       color: @colorGray7;
+                       opacity: 1;
+               } );
+               /* stylelint-enable indentation */
+
+               // Undo the styles Webkit browsers apply to type=search fields,
+               // we provide our own
+               -webkit-appearance: textfield;
+
+               &::-webkit-search-decoration,
+               &::-webkit-search-cancel-button,
+               &::-webkit-search-results-button,
+               &::-webkit-search-results-decoration {
+                       -webkit-appearance: textfield;
+               }
+       }
+
+       // The buttons. They are displayed in the same position, and if both are
+       // present the fulltext search one obscures the 'Go' one.
+       #searchButton,
+       #mw-searchButton {
+               position: absolute;
+               top: 0;
+               right: 0;
+               width: 1.65em;
+               height: 100%;
+               cursor: pointer;
+               /* Hide button text and replace it with the image. */
+               text-indent: -99999px;
+               /* Needed to make IE6 respect the text-indent. */
+               line-height: 1;
+               /* Opera 12 on RTL flips the text in a funny way without this. */
+               /* @noflip */
+               direction: ltr;
+               white-space: nowrap;
+               overflow: hidden;
+       }
+
+       #searchButton {
+               .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+               background-position: center center;
+               background-repeat: no-repeat;
+       }
+
+       #mw-searchButton {
+               z-index: 1;
+       }
+}