@vrembem/input

    1.37.0 • Public • Published

    Input

    A component for displaying form input elements.

    npm version

    Documentation

    Installation

    npm install @vrembem/input

    Styles

    @use "@vrembem/input";

    Markup

    The most basic implementation of the input component consists of the input class applied to an <input> element.

    <input class="input" type="text">

    disabled

    Adding the boolean disabled attribute to the input will provide visual indication that the input is not available for use.

    <input class="input" type="text" disabled>

    readonly

    Adding the boolean readonly attribute to the input will provide visual indication that the user should not be able to edit the value of the input.

    <input class="input" type="text" readonly>

    Modifiers

    input_auto

    Sets the width of an input to auto instead of the base component width of 100%.

    <input class="input input_auto" type="text">

    input_size_[value]

    Adjust the size of an input by increasing or decreasing its padding and font-size. By default, the input scale will provide an input height of 30px (small input_size_sm), 40px (default) and 50px (large input_size_lg).

    <input class="input input_size_sm" type="text">
    <input class="input input_size_lg" type="text">

    Available Variations

    • input_size_sm
    • input_size_lg

    input_state_[value]

    Adds styles for changing the look and feel of an input to better reflect the urgency or status.

    <input class="input input_state_danger" type="text">

    Available Variations

    • input_state_info
    • input_state_success
    • input_state_caution
    • input_state_danger

    input_type_[value]

    Adds unique styles for various form input types. These form controls share styles with the basic form input such as <select> and <textarea> HTML elements.

    <select class="input input_type_select" name="">
      <option value="">Select one</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    
    <textarea class="input input_type_textarea" rows="3"></textarea>

    Available Variations

    • input_type_select
    • input_type_textarea

    Customization

    Sass Variables

    Variable Default Description
    $prefix-block null String to prefix blocks with.
    $prefix-element "__" String to prefix elements with.
    $prefix-modifier "_" String to prefix modifiers with.
    $prefix-modifier-value "_" String to prefix modifier values with.
    $size core.$form-control-size Sets the height property on input and min-height property of the input_type_textarea modifier.
    $padding calc(0.5em - 1px) Sets the padding property.
    $transition-property box-shadow, outline, outline-offset Sets the transition-property property.
    $transition-duration core.$transition-duration-short Sets the transition-duration property.
    $transition-timing-function core.$transition-timing-function Sets the transition-timing-function property.
    $border-radius core.$border-radius Sets the border-radius property.
    $color-placeholder core.$color-subtle Sets the color property for the placeholder pseudo-element.
    $font-size core.$font-size Sets the font-size property.
    $line-height core.$line-height Sets the line-height property.
    $border 1px solid core.$border-color-dark Sets the border property.
    $border-color-hover core.$border-color-darker Sets the border-color property on :hover state.
    $border-color-focus core.$primary Sets the border-color property on :focus state.
    $background core.$white Sets the background property.
    $background-hover null Sets the background-color property on :hover state.
    $background-focus null Sets the background-color property on :focus state.
    $box-shadow inset 0 1px 3px rgba(core.$black, 0.1) Sets the box-shadow property.
    $box-shadow-hover null Sets the box-shadow property on :hover state.
    $box-shadow-focus none Sets the box-shadow property on :focus state.
    $color core.$color Sets the color property.
    $color-hover null Sets the color property on :hover state.
    $color-focus null Sets the color property on :focus state.
    $outline none Sets the outline property.
    $outline-hover null Sets the outline property on :hover state.
    $outline-focus null Sets the outline property on :focus state.
    $outline-offset null Sets the outline-offset property.
    $outline-offset-hover null Sets the outline-offset property on :hover state.
    $outline-offset-focus null Sets the outline-offset property on :focus state.
    $disabled-background core.$shade Sets the background-color property of the disabled state.
    $readonly-background core.$shade Sets the background-color property of the readonly state.
    $size-sm core.$form-control-size-sm Sets the height property on input and min-height property of the input_type_textarea and input_size_sm modifier combination.
    $size-sm-padding calc(0.25rem - 1px) 0.5rem Sets the padding property of the input_size_sm modifier.
    $size-sm-font-size core.$font-size-sm Sets the font-size property of the input_size_sm modifier.
    $size-sm-line-height core.$line-height-sm Sets the line-height property of the input_size_sm modifier.
    $size-lg core.$form-control-size-lg Sets the height property on input and min-height property of the input_type_textarea and input_size_lg modifier combination.
    $size-lg-padding calc(0.648rem - 1px) Sets the padding property of the input_size_lg modifier.
    $size-lg-font-size core.$font-size-lg Sets the font-size property of the input_size_lg modifier.
    $size-lg-line-height core.$line-height-lg Sets the line-height property of the input_size_lg modifier.
    $type-select-icon-color core.$color Sets the fill property for the svg data:image of the input_type_select modifier.
    $type-select-icon 'data:image/svg...' Ref ↓ The data:image/svg string used as the background-image property of the input_type_select modifier.
    $type-textarea-min-width 100% Sets the min-width property of the input_type_textarea modifier.

    $type-select-icon

    $type-select-icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="#{core.encodecolor($type-select-icon-color)}"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>' !default;

    Install

    npm i @vrembem/input

    DownloadsWeekly Downloads

    3

    Version

    1.37.0

    License

    MIT

    Unpacked Size

    37.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • sebnitu