Form: Buttons

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="form">
    <h2>Button-based inputs</h2>
    <fieldset>
        <h3>Button Base</h3>
        <input type="button" value="Input Button">
        <button>Button Text</button>
        <a href="#" class="button">This is a link button</a>
        <input type="reset" value="Reset Form">
        <input type="submit" value="Send">
        <button disabled>Button Text</button>
    </fieldset>

    <fieldset>
        <h3>Button Primary</h3>
        <input class="button--primary" type="button" value="Input Button">
        <button class="button--primary">Button Text</button>
        <a href="#" class="button button--primary">This is a link button</a>
        <input class="button--primary" type="reset" value="Reset Form">
        <input class="button--primary" type="submit" value="Send">
        <button disabled class="button--primary">Button Text</button>
        <br>
        <br>
        <button class="button--primary button--navy">Button Text</button>
        <button class="button--primary button--yellow">Button Text</button>
        <button class="button--primary button--green">Button Text</button>
        <button class="button--primary button--purple">Button Text</button>
        <button class="button--primary button--red">Button Text</button>
    </fieldset>

    <fieldset>
        <h3>Button Secondary</h3>
        <input class="button button--secondary" type="button" value="Input Button">
        <button class="button button--secondary">Button Text</button>
        <a href="#" class="button button--secondary">This is a link button</a>
        <input class="button button--secondary" type="reset" value="Reset Form">
        <input class="button button--secondary" type="submit" value="Send">
        <button disabled class="button--secondary">Button Text</button>
        <br>
        <br>
        <button class="button--secondary button--navy">Button Text</button>
        <button class="button--secondary button--yellow">Button Text</button>
        <button class="button--secondary button--green">Button Text</button>
        <button class="button--secondary button--red">Button Text</button>
        <button class="button--secondary button--purple">Button Text</button>
    </fieldset>

    <fieldset>
        <h3>Button Unstyled</h3>
        <input class="button button--unstyled" type="button" value="Input Button">
        <button class="button button--unstyled">Button Text</button>
        <a href="#" class="button button--unstyled">This is a link button</a>
        <input class="button button--unstyled" type="reset" value="Reset Form">
        <input class="button button--unstyled" type="submit" value="Send">
        <button disabled class="button--unstyled">Button Text</button>
        <br>
        <br>
        <button class="button--unstyled button--navy">Button Text</button>
        <button class="button--unstyled button--yellow">Button Text</button>
        <button class="button--unstyled button--green">Button Text</button>
        <button class="button--unstyled button--red">Button Text</button>
        <button class="button--unstyled button--purple">Button Text</button>
    </fieldset>

    <fieldset>
        <h3>Button Sizes</h3>
        <button class="button button--large">Button Text</button>
        <button class="button button--large button--primary">Button Text</button>
        <button class="button button--large button--secondary">Button Text</button>
        <br>
        <br>
        <button class="button button--small">Button Text</button>
        <button class="button button--small button--primary">Button Text</button>
        <button class="button button--small button--secondary">Button Text</button>
    </fieldset>

    <br>
    <br>

    <br>
    <h2>Still need to </h2>
    <p>Need to add: file, color</p>
    <input type="file"><br>
    <input type="color"><br>

    <p>Need to add:</p>
    <p>Button + Icon</p>
    <p>Icon + button</p>
    <p>Icon-only button</p>
    <p>Input + Button</p>
</div>


        <div class="form">
  <h2>Button-based inputs</h2>
  <fieldset>
    <h3>Button Base</h3>
    <input type="button" value="Input Button">
    <button>Button Text</button>
    <a href="#" class="button">This is a link button</a>
    <input type="reset" value="Reset Form">
    <input type="submit" value="Send">  
    <button disabled>Button Text</button>
  </fieldset>

  <fieldset>
    <h3>Button Primary</h3>
    <input class="button--primary" type="button" value="Input Button">
    <button class="button--primary">Button Text</button>
    <a href="#" class="button button--primary">This is a link button</a>
    <input class="button--primary" type="reset" value="Reset Form">
    <input class="button--primary" type="submit" value="Send">  
    <button disabled class="button--primary">Button Text</button>
    <br>
    <br>
    <button class="button--primary button--navy">Button Text</button>
    <button class="button--primary button--yellow">Button Text</button>
    <button class="button--primary button--green">Button Text</button>
    <button class="button--primary button--purple">Button Text</button>
    <button class="button--primary button--red">Button Text</button>
  </fieldset>

  <fieldset>
    <h3>Button Secondary</h3>
    <input class="button button--secondary" type="button" value="Input Button">
    <button class="button button--secondary">Button Text</button>
    <a href="#" class="button button--secondary">This is a link button</a>
    <input class="button button--secondary" type="reset" value="Reset Form">
    <input class="button button--secondary" type="submit" value="Send">
    <button disabled class="button--secondary">Button Text</button>
    <br>
    <br>
    <button class="button--secondary button--navy">Button Text</button>
    <button class="button--secondary button--yellow">Button Text</button>
    <button class="button--secondary button--green">Button Text</button>
    <button class="button--secondary button--red">Button Text</button>
    <button class="button--secondary button--purple">Button Text</button>
  </fieldset>

  <fieldset>
    <h3>Button Unstyled</h3>
    <input class="button button--unstyled" type="button" value="Input Button">
    <button class="button button--unstyled">Button Text</button>
    <a href="#" class="button button--unstyled">This is a link button</a>
    <input class="button button--unstyled" type="reset" value="Reset Form">
    <input class="button button--unstyled" type="submit" value="Send">
    <button disabled class="button--unstyled">Button Text</button>
    <br>
    <br>
    <button class="button--unstyled button--navy">Button Text</button>
    <button class="button--unstyled button--yellow">Button Text</button>
    <button class="button--unstyled button--green">Button Text</button>
    <button class="button--unstyled button--red">Button Text</button>
    <button class="button--unstyled button--purple">Button Text</button>
  </fieldset>

  <fieldset>
    <h3>Button Sizes</h3>
    <button class="button button--large">Button Text</button>
    <button class="button button--large button--primary">Button Text</button>
    <button class="button button--large button--secondary">Button Text</button>
    <br>
    <br>
    <button class="button button--small">Button Text</button>
    <button class="button button--small button--primary">Button Text</button>
    <button class="button button--small button--secondary">Button Text</button>
  </fieldset>
  
  <br>
  <br>
  
  <br>
  <h2>Still need to </h2>
  <p>Need to add: file, color</p>
  <input type="file"><br>
  <input type="color"><br>

  <p>Need to add:</p>
  <p>Button + Icon</p>
  <p>Icon + button</p>
  <p>Icon-only button</p>
  <p>Input + Button</p>
</div>


        
            
            /* No context defined for this component. */

File:

Content:


                                .u-button {
  /* Structure */
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
  font-size: 100%;
  font-family: inherit;
  text-decoration: none;

  &:focus { outline: 0; }

  /* Firefox: Get rid of the inner focus border */
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

.u-button-reset {
  /* Structure */
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
  text-decoration: none;
  background-color: transparent;
  border: 0;

  &:focus { outline: 0; }

  /* Firefox: Get rid of the inner focus border */
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

.u-button[disabled],
.u-button[disabled]:hover,
.u-button[disabled]:focus,
.u-button[disabled]:active,
.button--disabled,
.button--disabled:hover,
.button--disabled:focus,
.button--disabled:active {
  filter: alpha(opacity=40);
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.button--hidden { display: none; }

// Resets all button-like elements.
// input[type="button"],
// input[type="submit"],
// input[type="reset"],
// button,
.button { @extend .u-button; }


input[type="button"].button--unstyled,
input[type="submit"].button--unstyled,
input[type="reset"].button--unstyled,
button.button--unstyled,
.button.button--unstyled {
  background-color: transparent;
  border: 0;
}

URL: /components/raw/form/button-structure.scss
Filesystem Path: src/components/02-elements/form/button-structure.scss
Size: 1.7 KB

Content:


                                .u-button {
  --button-hsl: var(--theme-hsl);
  border-radius: 2px;
  padding: 0.5em 1.5em 0.75em;
  font-weight: 400;
  border: 1px solid hsla(var(--button-hsl), 1);
  color: hsla(var(--button-hsl), 1);
  background-color: transparent;

  &:hover,
  &:focus { background-image: linear-gradient(hsla(var(--button-hsl), 0.05), hsla(var(--button-hsl), 0.05)); }

  &:active {
    background-image: linear-gradient(hsla(var(--button-hsl), 0.15), hsla(var(--button-hsl), 0.15));
    border-color: hsla(var(--button-hsl), 1);
  }
}

.button--navy   { --button-hsl: var(--navy-hsl); }
.button--yellow { --button-hsl: var(--yellow-hsl); }
.button--red    { --button-hsl: var(--red-hsl); }
.button--green  { --button-hsl: var(--green-hsl); }
.button--purple { --button-hsl: var(--purple-hsl); }

.button--large {
  padding: .6em .9em .7em;
  font-size: 120%;
}

.button--small {
  padding: 0.4em .8em .5em;
  font-size: 80%; 
}

input[type="button"].button--primary,
input[type="submit"].button--primary,
input[type="reset"].button--primary,
button.button--primary,
.button.button--primary {
  color: white;
  border: 1px solid hsla(var(--button-hsl), 1);
  background-color: hsla(var(--button-hsl), 1);

  &:hover,
  &:focus { background-image: linear-gradient(hsla(0,0%,0%, 0.15), hsla(0,0%,0%, 0.25)); }
}

input[type="button"].button--secondary,
input[type="submit"].button--secondary,
input[type="reset"].button--secondary,
button.button--secondary,
.button.button--secondary {
  background-color: transparent;
  color: hsla(var(--button-hsl), 1);
  border: 1px solid hsla(var(--button-hsl), 1);

  &:hover,
  &:focus { background-image: linear-gradient(hsla(var(--button-hsl), 0.15), hsla(var(--button-hsl), 0.15)); }
}

input[type="button"].button--unstyled,
input[type="submit"].button--unstyled,
input[type="reset"].button--unstyled,
button.button--unstyled,
.button.button--unstyled { color: hsla(var(--button-hsl), 1); }

URL: /components/raw/form/button-visuals.scss
Filesystem Path: src/components/02-elements/form/button-visuals.scss
Size: 1.9 KB

Content:


                                // Config Variables

.form {
  // Color variables
  --icon-color: var(--primary-hsl);
  --text-color: var(--blue-hsl);
  --border-color: var(--primary-hsl);
  --shadow-color: var(--default-hsl);
  --focus-color: var(--accent-hsl);
  --invalid-color: var(--red-hsl);
  --valid-color: var(--success-green-hsl);
  --button-color: var(--blue-hsl);

  // Visual Variables
  --border: 1px solid hsla(var(--border-color), .6);
  --shadow: none;
  --padding: 0.5em 0.6em;
  --border-radius: 2px;
  --font-weight: 100;
}

.form {
  // Resets the appearance of all inputs
  input {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    outline: 0;
  }

  // Structural styles for all text based form elements
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="week"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select,
  textarea {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
  }
  
  // Adds compatibility for IE8 (pulled from Puse-CSS)
  input:not([type]) {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
  }

  // Deletes the outline used by chorme on focus
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  select:focus,
  textarea:focus,
  input:not([type]):focus { outline: 0; }

  // Sets the cursor with a forbidden sign for when the input is disabled
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="email"][disabled],
  input[type="url"][disabled],
  input[type="date"][disabled],
  input[type="month"][disabled],
  input[type="time"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="week"][disabled],
  input[type="number"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="color"][disabled],
  select[disabled],
  textarea[disabled] { cursor: not-allowed; }
}

// Visual Styles
.form {
  // visual styles for text-based elements while disabled
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="email"][disabled],
  input[type="url"][disabled],
  input[type="date"][disabled],
  input[type="month"][disabled],
  input[type="time"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="week"][disabled],
  input[type="number"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="color"][disabled],
  select[disabled],
  textarea[disabled],
  input:not([type])[disabled] { opacity: .4; }

  input:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid { border-color: hsla(var(--invalid-color), .7); }

  input:focus:valid,
  textarea:focus:valid,
  select:focus:valid { border-color: hsla(var(--valid-color), 1); }

  // All styles for the select element. 
  // All of the visual attributes are controlled by CSS variables 
  // at the beginning of this file.
  // SEE MORE ON FORM COMPONENTS

  select {
    /* Normalizes the height; padding is not sufficient. */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    height: 2.25em;
  }
  
  select[multiple] { height: auto; }
}

.textfield,
.select {
  > label {
    width: 100%;
    display: inline-block;
  }
}

// Select component

.select {
  position: relative;
  
  &::after {
    position: absolute;
    right: 0;
    content: "keyboard_arrow_down";
    width: 1em;
    margin-right: 8px;
    margin-top: 6px;
    @extend .u-material-icons;
  }
}

// Accessibility 
.checkbox,
.radio {
  input[type=checkbox],
  input[type=radio] {
    /* Adjusts the position of the checkboxes on the text baseline */ 
    vertical-align: -5px;
    
    &::before {
      width: 1em;
      margin-right: 8px;
      @extend .u-material-icons;
    }  

    &:disabled::before {
      // Preventing the interaction in the disabled field
      pointer-events: none;
      opacity: .3;
    }

    /* Set here so that Windows' High-Contrast Mode can override */
      color: var(--icon-color);
  }

  input[type=checkbox] {
    &::before { content: "check_box_outline_blank"; }
    &:checked::before { content: "check_box_outline"; }
  }

  input[type=radio] {
    &::before { content: "radio_button_unchecked"; }
    &:checked::before { content: "radio_button_checked"; }
  }
}

.form {
  .button,
  button,
  input[type="button"] {
    @extend .u-button;
  }
}

URL: /components/raw/form/form-structure.scss
Filesystem Path: src/components/02-elements/form/form-structure.scss
Size: 5 KB

Content:


                                // Config Variables

.form {
  // Color variables
  --icon-color: var(--primary-hsl);
  --text-color: var(--blue-hsl);
  --border-color: var(--primary-hsl);
  --shadow-color: var(--default-hsl);
  --focus-color: var(--accent-hsl);
  --invalid-color: var(--red-hsl);
  --valid-color: var(--success-green-hsl);
  --button-color: var(--blue-hsl);

  // Visual Variables
  --border: 1px solid hsla(var(--border-color), .6);
  --shadow: none;
  --padding: 0.5em 0.6em;
  --border-radius: 2px;
  --font-weight: 100;
}

// Visual Styles
.form {
  // Resets the appearance of all inputs
  input { color: var(--text-color); }

  // Visual Styles for the text based elements
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="week"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select,
  textarea,
  input:not([type]) {
    padding: var(--padding);
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);

    @include placeholder {
      color: hsla(var(--text-color), .6);
      font-family: var(--fonts-primary);
      font-weight: var(--font-weight);
    }
  }
  
  // visual styles for text-based elements on focus
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  select:focus,
  textarea:focus,
  input:not([type]):focus { 
    border-color: hsla(var(--focus-color), .8);
    background-color: hsla(var(--focus-color), .03); 
  }

  // All styles for the select element. 
  // All of the visual attributes are controlled by CSS variables 
  // at the beginning of this file.
  // SEE MORE ON FORM COMPONENTS

  select {
    border: var(--border);
    background-color: white;
    font-family: var(--fonts-primary);
    font-weight: var(--font-weight);
    color: var(--text-color);
    min-height: 2.4rem;
    height: auto;
  }
}


// Starts the Form Components, where we bundle together the 
// Label and the inputs, and the .select component

.textfield,
.select {
  > label {
    padding: var(--padding);
    color: hsla(var(--text-color), 1);
  }
}

.textfield,
.select {
  > label {
    width: 100%;
    display: inline-block;
  }
}

// Select component
.select {
  --padding: var(--s-1) var(--s1);

  &::after {
    color: hsla(var(--icon-color), 1);
    margin-top: 8px; 
    pointer-events: none;
  }
}

// Accessibility 
.checkbox,
.radio {
  input[type=checkbox],
  input[type=radio] {
    &::before {
      color: hsla(var(--icon-color), 1);
    }  

    /* Set here so that Windows' High-Contrast Mode can override */
    color: var(--icon-color);
  }
}

URL: /components/raw/form/form-visual.scss
Filesystem Path: src/components/02-elements/form/form-visual.scss
Size: 3.1 KB

Handle: @form--buttons
Variants (2): Default , Buttons
Preview:
- With layout
- Component only
Filesystem Path: src/components/02-elements/form/form--buttons.njk

There are no notes for this item.

Form: Buttons

Form

Logo

Wrapper

Card

Hero

Product Card

Product Hero

Prose

Article

Product Page