skins/vector/components/search.less

   1 /* Search */
   2 #p-search {
   3         /* @noflip */
   4         float: left;
   5         margin-right: 0.5em;
   6         margin-left: 0.5em;
   7
   8         h3 {
   9                 display: none;
  10         }
  11
  12         form,
  13         input {
  14                 margin: 0;
  15                 margin-top: 0.4em;
  16         }
  17 }
  18
  19 div#simpleSearch {
  20         display: block;
  21         width: 14em;
  22         height: 1.4em;
  23         margin-top: 0.65em;
  24         position: relative;
  25         min-height: 1px; /* Gotta trigger hasLayout for IE7 */
  26         border: solid 1px #aaa;
  27         color: black;
  28         background-color: white;
  29         .background-image('images/search-fade.png');
  30         background-position: top left;
  31         background-repeat: repeat-x;
  32
  33         input {
  34                 color: black;
  35                 &:focus {
  36                         outline: none;
  37                 }
  38
  39                 &.placeholder {
  40                         color: #999;
  41                 }
  42
  43                 &:-ms-input-placeholder,
  44                 &:-moz-placeholder,
  45                 &::-webkit-input-placeholder {
  46                         color: #999;
  47                 }
  48
  49                 &#searchInput {
  50                         position: absolute;
  51                         top: 0;
  52                         left: 0;
  53                         width: 90%;
  54                         margin: 0;
  55                         padding: 0;
  56                         padding-left: 0.2em;
  57                         padding-top: 0.2em;
  58                         padding-bottom: 0.2em;
  59                         outline: none;
  60                         border: none;
  61                         /*
  62                          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
  63                          * this from ever being shown anyways.
  64                         */
  65                         font-size: 13px;
  66                         background-color: transparent;
  67                         direction: ltr;
  68                 }
  69         }
  70
  71         button#searchButton {
  72                 position: absolute;
  73                 width: 10%;
  74                 right: 0;
  75                 top: 0;
  76                 padding: 0;
  77                 padding-top: 0.3em;
  78                 padding-bottom: 0.2em;
  79                 padding-right: 0.4em;
  80                 margin: 0;
  81                 border: none;
  82                 cursor: pointer;
  83                 background-color: transparent;
  84                 background-image: none;
  85
  86                 /* OVERRIDDEN BY COMPLIANT BROWSERS */
  87                 img {
  88                         border: none;
  89                         margin: 0;
  90                         margin-top: -3px;
  91                         padding: 0;
  92                 }
  93                 /* IGNORED BY IE6 */
  94                 > img {
  95                         margin: 0;
  96                 }
  97         }
  98 }