skins/vector/components/search.less

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3
   4 /* Search */
   5 #p-search {
   6         /* @noflip */
   7         float: left;
   8         margin-right: 0.5em;
   9         margin-left: 0.5em;
  10
  11         h3 {
  12                 .mixin-screen-reader-text;
  13         }
  14
  15         form,
  16         input {
  17                 margin: 0;
  18                 margin-top: 0.4em;
  19         }
  20 }
  21
  22 div#simpleSearch {
  23         display: block;
  24         width: 12.6em;
  25         width: 20vw; /* responsive width */
  26         min-width: 5em;
  27         max-width: 20em;
  28         padding-right: 1.4em;
  29         height: 1.4em;
  30         margin-top: 0.65em;
  31         position: relative;
  32         min-height: 1px; /* Gotta trigger hasLayout for IE7 */
  33         border: solid 1px #aaa;
  34         color: #000;
  35         background-color: #fff;
  36         .background-image( 'images/search-fade.png' );
  37         background-position: top left;
  38         background-repeat: repeat-x;
  39
  40         // Styles for both the search input and the button
  41         input {
  42                 margin: 0;
  43                 padding: 0;
  44                 border: 0;
  45                 background-color: transparent;
  46                 color: #000;
  47         }
  48
  49         // The search input
  50         #searchInput {
  51                 width: 100%;
  52                 padding: 0.2em 0 0.2em 0.2em;
  53                 font-size: 13px;
  54                 direction: ltr;
  55
  56                 &:focus {
  57                         outline: 0;
  58                 }
  59
  60                 /* stylelint-disable indentation */
  61                 .mixin-placeholder( {
  62                         color: @colorGray7;
  63                         opacity: 1;
  64                 } );
  65                 /* stylelint-enable indentation */
  66
  67                 // Undo the styles Webkit browsers apply to type=search fields,
  68                 // we provide our own
  69                 -webkit-appearance: textfield;
  70
  71                 &::-webkit-search-decoration,
  72                 &::-webkit-search-cancel-button,
  73                 &::-webkit-search-results-button,
  74                 &::-webkit-search-results-decoration {
  75                         -webkit-appearance: textfield;
  76                 }
  77         }
  78
  79         // The buttons. They are displayed in the same position, and if both are
  80         // present the fulltext search one obscures the 'Go' one.
  81         #searchButton,
  82         #mw-searchButton {
  83                 position: absolute;
  84                 top: 0;
  85                 right: 0;
  86                 width: 1.65em;
  87                 height: 100%;
  88                 cursor: pointer;
  89                 /* Hide button text and replace it with the image. */
  90                 text-indent: -99999px;
  91                 /* Needed to make IE6 respect the text-indent. */
  92                 line-height: 1;
  93                 /* Opera 12 on RTL flips the text in a funny way without this. */
  94                 /* @noflip */
  95                 direction: ltr;
  96                 white-space: nowrap;
  97                 overflow: hidden;
  98         }
  99
 100         #searchButton {
 101                 .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
 102                 background-position: center center;
 103                 background-repeat: no-repeat;
 104         }
 105
 106         #mw-searchButton {
 107                 z-index: 1;
 108         }
 109 }