Bits of 24 ways

Search 

<form class="c-search" role="search" id="search" action="/pages/search/">
    <fieldset class="c-field">
        <legend class="u-hidden">Search 24 ways</legend>
        <label class="u-hidden" for="q">Keywords</label>
        <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research&#8230;" />
        <button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" role="img" aria-label="Search">
                <path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z" />
            </svg>
        </button>
    </fieldset>
</form>
 
<form class="c-search" role="search" id="search" action="/pages/search/">
  <fieldset class="c-field">
    <legend class="u-hidden">Search 24 ways</legend>
    <label class="u-hidden" for="q">Keywords</label>
    <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research&#8230;"/>
    <button class="c-field__button" type="submit">{% include "search.svg" %}</button>
  </fieldset>
</form>
 
{
  "site": {
    "title": "24 ways",
    "handle": "24ways",
    "description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
    "url": "https://24ways.org",
    "feed": "https://feeds.feedburner.com/24ways",
    "theme_color": "#f04"
  },
  "theme": {
    "year": [
      348,
      344,
      340,
      336,
      332,
      328,
      324,
      320,
      316,
      312,
      308,
      304,
      300,
      296,
      292,
      288
    ],
    "day": [
      360,
      353,
      346,
      339,
      332,
      325,
      318,
      311,
      304,
      297,
      290,
      283,
      276,
      269,
      262,
      255,
      248,
      241,
      234,
      227,
      220,
      213,
      206,
      199
    ]
  }
}
  • Content: 
    .c-search {
  .c-field__input {
    width: 100%;
    box-shadow: inset 0 -1px 0 $navigation-color--offset;
    padding-left: map(spaces, xlarge);
    background-color: $navigation-color--offset;

    &:not(:focus) {
      box-shadow: none;
    }

    .has-js & {
      @media (--from-medium-screen) {
        height: $banner-height--large;
      }
    }

    @media (-ms-high-contrast: active) {
      border: 1px solid;
    }
  }

  .c-field__button {
    @apply --focusable;

    position: absolute;
    top: 0;
    left: 0;
    padding: map(spaces, xsmall) map(spaces, small);

    .has-js & {
      @media (--from-medium-screen) {
        padding: map(spaces, medium) map(spaces, xsmall);
      }
    }
  }
}
  • URL: /components/raw/search/search.css
  • Filesystem Path: src/components/global/search/search.css
  • Size: 713 Bytes

There are no notes for this item.