<label for="inputid">URL</label>
<input type="url" id="inputid" name="input" value="" placeholder="https://example.com" />
{{#unless labelAfter }}{{> @label label }}{{/unless}}
<input 
  type="{{ type }}" 
  id="{{ id }}" 
  name="{{ name }}" 
  value="{{ value }}" 
  placeholder="{{ placeholder }}"
  {{#if ariaDescribedby }}aria-describedby="{{ ariaDescribedby }}"{{/if}}
  {{#if ariaInvalid }}aria-invalid="{{ ariaInvalid }}"{{/if}}
  {{#if disabled }}disabled{{/if}}
  {{#if pattern }}pattern="{{ pattern }}"{{/if}}
  {{#if required }}required{{/if}}
  {{#if min }}min="{{ min }}"{{/if}} 
  {{#if max }}max="{{ max }}"{{/if}} 
  {{#if step }}step={{ step }}{{/if}} /> {{#if labelAfter }}{{> @label label }}{{/if}}
{
  "name": "input",
  "value": null,
  "type": "url",
  "id": "inputid",
  "label": {
    "for": "inputid",
    "text": "URL"
  },
  "placeholder": "https://example.com"
}
  • Content:
    input[type="text"], 
    input[type="password"], 
    input[type="file"], 
    input[type="datetime-local"], 
    input[type="date"], 
    input[type="month"], 
    input[type="time"], 
    input[type="week"], 
    input[type="number"], 
    input[type="email"], 
    input[type="url"], 
    input[type="search"], 
    input[type="tel"] {
      @extend %input;
    }
    
    input::placeholder {
      font-style: italic;
      color: #999;
    }
    
    input[type="color"], 
    input[type="range"] {
      font-size: inherit;
      font-family: $font-stack-form-ui;
      outline: 0;
      display: inline-block;
      width: 100%;
      box-shadow: none;
    }
    
    /*
    Make sure date/time fields are as tall as empty text fields for consistency.
    Mobile Safari collapses them.
    line height + vertical padding + border widths
    */
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
      min-height: calc(#{$line-height} + 1.5em + 2px); 
    }
    
    input[type="text"]:focus, 
    input[type="password"]:focus, 
    input[type="file"]:focus, 
    input[type="datetime-local"]:focus, 
    input[type="date"]:focus, 
    input[type="time"]:focus, 
    input[type="number"]:focus, 
    input[type="email"]:focus, 
    input[type="url"]:focus, 
    input[type="search"]:focus, 
    input[type="tel"]:focus {
      @extend %inputfocus;
    }
    
    input[type="color"]:focus, 
    input[type="range"]:focus {
      outline: 0;
    }
    
    input[type="color"] {
      /*Ensure height matches text input height*/
      height: calc(#{$font-size-base/2} + #{$line-height});
      width: calc(#{$font-size-base/2} + #{$line-height});
      background: transparent;
      appearance: none;
      border: solid 1px #fff;
      outline: solid 1px #ccc;
    }
    
    input[type="radio"] {
      border: solid 1px #999;
      font-size: 1em;
      height: 1em;
      width: 1em;
      border-radius: 50%;
      vertical-align: middle;
      appearance: none;
    
      &:checked, 
      &:active, 
      &:focus {
        outline: 0;
      }
    }
    
    input[type="checkbox"] {
      border: solid 1px #999;
      border-radius: .2em;
      font-size: 1.1em;
      height: 1em;
      width: 1em;
      line-height: 1;
      vertical-align: middle;
      appearance: none;
    
      &:checked, 
      &:active, 
      &:focus {
        outline: 0;
      }
    }
    
    input[type="radio"],
    input[type="checkbox"] {
      transition: 
        background-color 100ms ease-in-out, 
        background-image 100ms ease-in-out, 
        border 100ms ease-in-out;
      margin: 0 0 .15em;
    }
    
    input[type="checkbox"]:checked {
      background: 
        $color-selected-box 
        url('data:image/svg+xml;utf8,<svg width="19" height="19" xmlns="http://www.w3.org/2000/svg"><path d="M3.58 10.936l1.86-1.71L7.5 12l6.848-7.407 1.484 1.736L7.5 15.46l-3.92-4.524z" fill="white"/></svg>')
        50% 50%
        no-repeat;
      border-color: $color-selected-box;
    }
    
    input[type="radio"]:checked {
      border-color: $color-selected-box;
      background: $color-selected-box;
      box-shadow: inset 0 0 0 3px #fff;
    }
    
    // Show valid styling only if a value is present
    input[type="text"]:not(:placeholder-shown):valid,
    input[type="url"]:not(:placeholder-shown):valid,
    input[type="tel"]:not(:placeholder-shown):valid,
    input[type="email"]:not(:placeholder-shown):valid {
      outline: 0;
      border-color: green;
      background: lighten(green, 65%);
    }
     
    input[type="text"]:not(:placeholder-shown):invalid,
    input[type="url"]:not(:placeholder-shown):invalid,
    input[type="tel"]:not(:placeholder-shown):invalid,
    input[type="email"]:not(:placeholder-shown):invalid {
      border-color: $color-error;
      outline: 0;
      box-shadow: none;
      background: lighten($color-error, 40%);
    }
    
    input[disabled] {
      background: #eee;
      color: #888;
      box-shadow: none;
    }
    
    input[aria-invalid] {
      border-color: $color-error !important;
      background: #fee !important;
    }
  • URL: /components/raw/input/_sass.scss
  • Filesystem Path: components/01-elements/03-form-controls/input/_sass.scss
  • Size: 3.5 KB

There are no notes for this item.