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';

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

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

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

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

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

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

		&:last-child {
			border-radius: 0 $border-radius $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: 804 Bytes

No notes defined.