Input Group

<div class="kx-inputgroup">
    <!-- FIELD Component -->
    <div class="kx-form__element">
        <input class="kx-field kx-field--size-large" id="--99009" type="text" />
        <label class="kx-label" for="--99009">
        
    </label>
    </div>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
</div>
<br>
<div class="kx-inputgroup">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
    <!-- FIELD Component -->
    <div class="kx-form__element">
        <input class="kx-field kx-field--size-large" id="--41060" type="text" />
        <label class="kx-label" for="--41060">
        
    </label>
    </div>

</div>
<br>
<div class="kx-inputgroup">
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
    <!-- FIELD Component -->
    <div class="kx-form__element">
        <input class="kx-field kx-field--size-large" id="--26094" type="text" />
        <label class="kx-label" for="--26094">
        
    </label>
    </div>
    <!-- FIELD Component -->
    <div class="kx-form__element">
        <input class="kx-field kx-field--size-large" id="--2800" type="text" />
        <label class="kx-label" for="--2800">
        
    </label>
    </div>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
    <!-- FIELD Component -->
    <div class="kx-form__element">
        <input class="kx-field kx-field--size-large" id="--33806" type="text" />
        <label class="kx-label" for="--33806">
        
    </label>
    </div>
    <!-- SELECT Component -->
    <div class="kx-form__element">
        <select class="kx-field kx-field--size-large" id="--97372">
        <option value="1">Tiny</option>
        <option value="2">Foo</option>
        <option value="3">Bar</option>
    </select>
        <label class="kx-label kx-is-vishidden" for="--97372">
        Select Label
    </label>
    </div>
    <!-- BUTTON Component -->
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
</div>
<div class="kx-inputgroup">
    {% render '@field', {
        element: 'input',
        type: 'text',
        size: 'large'
    }%}
    {% render '@button', {
        text: 'Search',
        skin: 'primary',
        size: 'large',
        hideText: true,
        icon: {
            symbol: 'search',
            size: 'base'
        }
    }%}
</div>
<br>
<div class="kx-inputgroup">
    {% render '@button', {
    text: 'Search',
    skin: 'primary',
    size: 'large',
    hideText: true,
    icon: {
    symbol: 'search',
    size: 'base'
    }
    }%}
    {% render '@field', {
        element: 'input',
        type: 'text',
        size: 'large'
    }%}

</div>
<br>
<div class="kx-inputgroup">
    {% render '@button', {
    text: 'Search',
    skin: 'primary',
    size: 'large',
    hideText: true,
    icon: {
    symbol: 'search',
    size: 'base'
    }
    }%}
    {% render '@field', {
    element: 'input',
    type: 'text',
    size: 'large'
    }%}
    {% render '@field', {
    element: 'input',
    type: 'text',
    size: 'large'
    }%}
    {% render '@button', {
    text: 'Search',
    skin: 'primary',
    size: 'large',
    hideText: true,
    icon: {
    symbol: 'search',
    size: 'base'
    }
    }%}
    {% render '@field', {
    element: 'input',
    type: 'text',
    size: 'large'
    }%}
    {% render '@select', { labelTxt: 'Select Label', hideLabel: true, options: [ { txt: 'Tiny', value: 1 }, { txt: 'Foo', value: 2 }, { txt: 'Bar', value: 3 } ], size: 'large'} %}
    {% render '@button', {
    text: 'Search',
    skin: 'primary',
    size: 'large',
    hideText: true,
    icon: {
    symbol: 'search',
    size: 'base'
    }
    }%}
</div>
/* No context defined for this component. */
  • Content:
    // ==========================================================================
    // Component: input-group
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    // Block (parent)
    // ==========================================================================
    
    .kx-inputgroup {
        @include flex;
        @include align-items-end;
    
        > .kx-form__element {
            flex: 1 1 auto;
    
            &:not(:first-child):not(:last-child) {
                .kx-field {
                    border-radius: 0;
                }
            }
    
            &:first-child {
                .kx-field {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }
    
            &:last-child {
                .kx-field {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
    
            + .kx-form__element {
                margin-left: rem-calc(-1);
            }
        }
    
        > .kx-btn {
            &:not(:first-of-type):not(:last-of-type) {
                border-radius: 0;
            }
    
            &:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
    
            &:last-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }
    
    // Modifiers
    // ==========================================================================
    
    
  • URL: /components/raw/input-group/_input-group.scss
  • Filesystem Path: src\components\01-form\input-group\_input-group.scss
  • Size: 1.5 KB

There are no notes for this item.