Internetstiftelsen Styleguide

Input Group: With Before And After 

<div class="m-input-group">
    <span class="m-input-group__label" id="$">$</span>
    <input type="number" placeholder="Amount" class="a-input" aria-label="Amount" aria-describedby="$ .00.00">
    <span class="m-input-group__label" id=".00">.00</span>
</div>
 
{{#unless multipleInputs}}
<div class="m-input-group">
	{{#if before}}
		<span class="m-input-group__label" id="{{before}}">{{before}}</span>
	{{/if}}
		<input type="{{type}}" placeholder="{{placeholder}}" class="a-input" aria-label="{{placeholder}}" aria-describedby="{{#if before}}{{before}}{{#if after}} {{after}}{{/if}}{{/if}}{{#if after}}{{after}}{{/if}}">
	{{#if after}}
		<span class="m-input-group__label" id="{{after}}">{{after}}</span>
	{{/if}}
</div>
{{/unless}}
{{#if multipleInputs}}
<div class="m-input-group">
	<input type="text" placeholder="Name" class="a-input" aria-label="Name" aria-describedby="@">
	<span class="m-input-group__label" id="@">@</span>
	<input type="text" placeholder="Server" class="a-input" aria-label="Server">
</div>
{{/if}}
 
{
  "type": "number",
  "placeholder": "Amount",
  "before": "$",
  "after": ".00",
  "multipleInputs": false
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;


@include mixin.molecule(input-group) {
	display: flex;
	align-items: stretch;

	@include bem.e(label) {
		display: flex;
		align-items: center;
		padding: 0 func.rhythm(1);
		background: colors.$color-concrete;
		border: 1px solid colors.$color-granit;
		font-size: func.to_rem(16px);

		&:first-child {
			border-radius: var.$border-radius 0 0 var.$border-radius;
			border-right: none;
		}

		&:last-child {
			border-radius: 0 var.$border-radius var.$border-radius 0;
			border-left: none;
		}

		&:not(:first-child):not(:last-child) {
			border-left: none;
			border-right: none;
		}
	}

	@include mixin.atom(input) {
		&:first-child {
			border-radius: var.$border-radius 0 0 var.$border-radius;
		}

		&:last-child {
			border-radius: 0 var.$border-radius var.$border-radius 0;
		}

		&:not(:first-child):not(:last-child) {
			border-radius: 0;
		}
	}
}
  • URL: /components/raw/input-group/_input-group.scss
  • Filesystem Path: src/molecules/input-group/_input-group.scss
  • Size: 1.3 KB

No notes defined.