Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Input 

<!-- Default -->
<input class=" input " id="text" name="text" type="text">


<!-- Disabled -->
<input class=" input " id="text" name="text" type="text" value="This field is disabled" disabled="">


<!-- Invalid Or Required -->
<input class=" input -invalid" id="emailInvalid" name="emailInvalid" type="email" value="test.rehau.com">


<!-- Date -->
<input class=" input " id="date" name="date" type="date">


<!-- Email -->
<input class=" input " id="email" name="email" type="email">


<!-- Number -->
<input class=" input " id="number" name="number" type="number">


<!-- Password -->
<input class=" input " id="password" name="password" type="password">


<!-- Tel -->
<input class=" input " id="tel" name="tel" type="tel">


<!-- Hidden -->
<input class=" input " id="hidden" name="hidden" type="hidden">


<!-- Security Field Honeypot -->
<input class=" input -secure-field" id="security" name="security" type="text">


<!-- File Upload -->
<label class=" input input--file-upload " for="file-upload">
    <span class="input__file-btn">Browse Files</span>
    <span class="input__file-info">No file choosen</span>
</label>
<input type="file" id="file-upload" multiple data-multiselect-label="{count} files selected" />


<!-- Default -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Disabled -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Invalid Or Required -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Date -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Email -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Number -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Password -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Tel -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Hidden -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- Security Field Honeypot -->
<input class="{{mixes}} input {{modifiers}}"
  {{# id }} id="{{ . }}" {{/ id }}
  {{# name }} name="{{ . }}" {{/ name }}
  {{# type }} type="{{ . }}" {{/ type }}
  {{# value }} value="{{ . }}" {{/ value }}
  {{# disabled }} disabled="" {{/ disabled }}
  {{# readonly }} readonly="" {{/ readonly }}
>

<!-- File Upload -->
<label class="{{mixes}} input input--file-upload {{modifiers}}" for="{{id}}">
  <span class="input__file-btn">{{fileBtn}}</span>
  <span class="input__file-info">{{fileInfo}}</span>
</label>
<input type="file" id="{{id}}" {{#if multiselect}}multiple data-multiselect-label="{count} {{multiselectLabel}}"
  {{/if}} />
 
/* Default */
{
  "id": "text",
  "name": "text",
  "type": "text"
}


/* Disabled */
{
  "id": "text",
  "name": "text",
  "type": "text",
  "value": "This field is disabled",
  "disabled": true
}


/* Invalid Or Required */
{
  "id": "emailInvalid",
  "name": "emailInvalid",
  "type": "email",
  "value": "test.rehau.com",
  "modifiers": "-invalid"
}


/* Date */
{
  "id": "date",
  "name": "date",
  "type": "date"
}


/* Email */
{
  "id": "email",
  "name": "email",
  "type": "email"
}


/* Number */
{
  "id": "number",
  "name": "number",
  "type": "number"
}


/* Password */
{
  "id": "password",
  "name": "password",
  "type": "password"
}


/* Tel */
{
  "id": "tel",
  "name": "tel",
  "type": "tel"
}


/* Hidden */
{
  "id": "hidden",
  "name": "hidden",
  "type": "hidden"
}


/* Security Field Honeypot */
{
  "id": "security",
  "name": "security",
  "type": "text",
  "modifiers": "-secure-field"
}


/* File Upload */
{
  "id": "file-upload",
  "fileBtn": "Browse Files",
  "fileInfo": "No file choosen",
  "multiselect": true,
  "multiselectLabel": "files selected"
}
  • Content: 
    /* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  position: relative;
  display: block;
  margin: 2px 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
  cursor: pointer;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  overflow: auto;
  border-top: 0;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  /* support: IE10, see #8844 */
  list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
  cursor: pointer;
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  height: 0;
  margin: 5px 0;
  border-width: 1px 0 0;
  font-size: 0;
  line-height: 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  right: 0;
  left: auto;
}

.ui-button {
  position: relative;
  display: inline-block;
  margin-right: 0.1em;
  padding: 0.4em 1em;

  /* Support: IE <= 11 */
  overflow: visible;

  vertical-align: middle;
  line-height: normal;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
  box-sizing: border-box;
  width: 2em;
  text-indent: -9999px;
  white-space: nowrap;
}

/* no icon support for input elements */
.ui-button.ui-button-icon-only {
  text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  text-indent: -9999px;
  white-space: nowrap;
}

.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  padding: 0.4em 1em;
  text-indent: 0;
  white-space: normal;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
.ui-button::-moz-focus-inner,
.ui-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.ui-controlgroup {
  display: inline-block;
  vertical-align: middle;
}

.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  margin-right: 0;
  margin-left: 0;
}

.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
  z-index: 9999;
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

// .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
//   border-left: none;
// }

// .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
//   border-top: none;
// }

// .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
//   border-right: none;
// }

// .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
//   border-bottom: none;
// }

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
  /* Support: IE8 only, Android < 4.4 only */
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  border: unset;
  border-radius: 0.12em;
  box-shadow: inset 1px 1px 1px #ccc;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  overflow: visible;
  border: unset;
  border-radius: 1em;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
  background-image: none;
}

.ui-checkboxradio-disabled {
  pointer-events: none;
}

.ui-datepicker {
  display: none;
  width: 17em;
  padding: 0.2em 0.2em 0;

  .ui-datepicker-header {
    position: relative;
    padding: 0.2em 0;
  }

  .ui-datepicker-prev,
  .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 2.6em;
    height: 2.6em;
  }

  .ui-datepicker-prev-hover,
  .ui-datepicker-next-hover {
    top: 1px;
  }

  .ui-datepicker-prev {
    left: 2px;
  }

  .ui-datepicker-next {
    right: 2px;
  }

  .ui-datepicker-prev-hover {
    left: 1px;
  }

  .ui-datepicker-next-hover {
    right: 1px;
  }

  .ui-datepicker-prev span,
  .ui-datepicker-next span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin-top: -8px;
    margin-left: -8px;
  }

  .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
  }

  .ui-datepicker-title select {
    margin: 1px 0;
    font-size: 1em;
  }

  .ui-datepicker-month,
  .ui-datepicker-year {
    width: 45%;
  }

  table {
    width: 100%;
    margin: 0 0 0.4em;
    border-collapse: collapse;
    font-size: 0.9em;
  }

  th {
    padding: 0.7em 0.3em;
    border: 0;
    font-weight: bold;
    text-align: center;
  }

  td {
    padding: 1px;
    border: 0;

    span,
    a {
      display: block;
      padding: 0.2em;
      text-align: right;
      text-decoration: none;
    }
  }

  .ui-datepicker-buttonpane {
    margin: 0.7em 0 0;
    padding: 0 0.2em;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background-image: none;

    .ui-datepicker-current {
      float: left;
    }
  }

  .ui-datepicker-buttonpane button {
    float: right;
    width: auto;
    margin: 0.5em 0.2em 0.4em;
    padding: 0.2em 0.6em 0.3em;
    overflow: visible;
    cursor: pointer;
  }

  .ui-icon {
    text-indent: -99999px;
  }

  .ui-datepicker-prev {
    $symbol: map-get($icons, 'chevron-left');

    &::before {
      @include icon-content-extended($symbol);
      position: absolute;
      top: 30%;
      left: 40%;
    }
  }

  .ui-datepicker-next {
    $symbol: map-get($icons, 'chevron-right');

    &::before {
      @include icon-content-extended($symbol);
      position: absolute;
      top: 30%;
      left: 40%;
    }
  }
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  right: auto;
  left: 2px;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  right: auto;
  left: 1px;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane .ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #ddd;
  background: $white;
  color: #333;
}

.ui-widget-content a {
  color: #333;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #e9e9e9;
  font-weight: bold;
  color: #333;
}

.ui-widget-header a {
  color: #333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #ccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-button:hover,
.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: $white;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: $white;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: $white;
  text-decoration: none;
}
  • URL: /components/raw/atoms-input/_datepicker.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/08-form/02-input/_datepicker.scss
  • Size: 10.8 KB
  • Content: 
    .input {
  &[type='number'] {
    appearance: textfield;
  }

  &[type='number']::-webkit-inner-spin-button,
  &[type='number']::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  &[type='date']::-webkit-inner-spin-button {
    display: none;
    appearance: none;
  }

  &.-secure-field {
    position: absolute;
    left: -6666px;
  }

  .-w-auto {
    width: auto;
  }
}

//File Upload Input
$size: 4.2rem;
$border-width: 0.1rem;

.input--file-upload {
  display: flex;
  flex-wrap: nowrap;
  height: $size + 2 * $border-width;
  max-height: $size + 2 * $border-width;
  padding-left: 0;

  + [type='file'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
  }
}

.input__file-info,
.input__file-btn {
  padding: 0 $base-padding;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input__file-btn {
  height: 100%;
  border: 0 none;
  background: $black;
  color: $white;
}

.input__file-btn:hover {
  background: $gray-darker;
  cursor: pointer;
}
  • URL: /components/raw/atoms-input/_input.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/08-form/02-input/_input.scss
  • Size: 1.1 KB

JS code snippet required for uploaded file name update:

(function() {
  var labels = document.querySelectorAll('.input--file-upload');

  Array.prototype.forEach.call(labels, function(label) {
    var fileInfo = label.querySelector('.input__file-info');
    var input = label.nextElementSibling;

    input.addEventListener('change', function(e) {
      var fileName = '';
      if (this.files && this.files.length > 1) {
        fileName = (this.getAttribute('data-multiselect-label') || '').replace('{count}', this.files.length);
      } else {
        fileName = e.target.value ? e.target.value.split('\\').pop() : this.getAttribute('placeholder');
      }
      fileInfo.innerHTML = fileName;
    });
  });
})();