Bits of 24 ways

Field 

<!-- Default -->
<p class="c-field c-field--input">
    <label class="c-field__label" for="commentName">Name</label>
    <input class="c-field__input" id="commentName" name="commentName" type="text" autocorrect="off" required="required" />
</p>


<!-- Combined -->
<p class="c-field c-field--combined">
    <label class="c-field__label c-field__label--icon" for="q"><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>
    </label>
    <input class="c-field__input" type="search" name="q" placeholder="e.g. CSS, Design, Research&#8230;" />
    <button class="c-button" type=&quot;submit&quot;>Search</button>
</p>


<!-- Textarea -->
<p class="c-field c-field--textarea">
    <label class="c-field__label" for="commentHTML">Message</label>
    <textarea class="c-field__input" id="commentHTML" name="commentHTML" cols="25" rows="12" required="required"></textarea>
</p>


<!-- Default -->
<p class="c-field c-field--input">
  <label class="c-field__label" for="commentName">Name</label>
  <input class="c-field__input" id="commentName" name="commentName" type="text" autocorrect="off" required="required"/>
</p>

<!-- Combined -->
<p class="c-field c-field--combined">
  <label class="c-field__label c-field__label--icon" for="q">{% include "search.svg" %}</label>
  <input class="c-field__input" type="search" name="q" placeholder="e.g. CSS, Design, Research&#8230;"/>
  {% render "@button", { label: "Search", submit: true } %}
</p>

<!-- Textarea -->
<p class="c-field c-field--textarea">
  <label class="c-field__label" for="commentHTML">Message</label>
  <textarea class="c-field__input" id="commentHTML" name="commentHTML" cols="25" rows="12" required="required"></textarea>
</p>
 
/* Default */
{
  "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
    ]
  }
}


/* Combined */
{
  "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
    ]
  }
}


/* Textarea */
{
  "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-field {
  @apply --typeset-ui;

  position: relative;

  &:not(:last-of-type) {
    margin-bottom: map(spaces, medium);
  }

  @media print {
    display: none;
  }
}

.c-field__icon {
  height: 2.5rem;
  width: 2.5rem;
}

.c-field__input {
  width: 100%;
  border: 1px solid $prose-color--rule;
  border-radius: 0;
  padding: map(spaces, medium);
}

.c-field__label {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: map(sizes, xlarge);
  padding: map(spaces, medium);
  font-weight: 700;

  + .c-field__input {
    padding-left: calc(map(sizes, xlarge) + map(spaces, medium));
  }
}

.c-field__label--icon {
  padding: map(spaces, small);

  + .c-field__input {
    padding-left: map(sizes, large);
  }
}

.c-field--combined {
  display: flex;
}
  • URL: /components/raw/field/field.css
  • Filesystem Path: src/components/common/field/field.css
  • Size: 785 Bytes

There are no notes for this item.