Component Library
Sign out

Button Group: Multi Select 

<div class="demo-container">
    <div class="acl-button-group">
        <input type="checkbox" class="acl-button-group__item" name="demoValue1" value="1" id="demoValue1" />
        <label for="demoValue1"><i class="aforza-icons acl-button-group__item-icon--medium">acl_targets</i></label>
        <input type="checkbox" class="acl-button-group__item" name="demoValue2" value="2" id="demoValue2" />
        <label for="demoValue2"><i class="aforza-icons acl-button-group__item-icon--medium">acl_notifications</i></label>
        <input type="checkbox" class="acl-button-group__item" name="demoValue3" value="3" id="demoValue3" checked />
        <label for="demoValue3"><i class="aforza-icons acl-button-group__item-icon--medium">acl_invoice</i></label>
        <input type="checkbox" class="acl-button-group__item" name="demoValue4" value="4" id="demoValue4" />
        <label for="demoValue4"><i class="aforza-icons acl-button-group__item-icon--medium">acl_nav_sync</i></label>
    </div>
</div>
 
<div class="demo-container">
    <div class="acl-button-group">
        <input type="checkbox" class="acl-button-group__item" name="demoValue1" value="1" id="demoValue1" />
        <label for="demoValue1"><i class="aforza-icons acl-button-group__item-icon--medium">acl_targets</i></label>
        <input type="checkbox" class="acl-button-group__item" name="demoValue2" value="2" id="demoValue2" />
        <label for="demoValue2"><i class="aforza-icons acl-button-group__item-icon--medium">acl_notifications</i></label>
          <input type="checkbox" class="acl-button-group__item" name="demoValue3" value="3" id="demoValue3" checked/>
        <label for="demoValue3"><i class="aforza-icons acl-button-group__item-icon--medium">acl_invoice</i></label>
          <input type="checkbox" class="acl-button-group__item" name="demoValue4" value="4" id="demoValue4"/>
        <label for="demoValue4"><i class="aforza-icons acl-button-group__item-icon--medium">acl_nav_sync</i></label>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .acl-button-group {
	display: flex;

	&__item {
		position: absolute;
		left: -9999em;
		top: -9999em;

		& + label {
			padding: 9px 12px;
			cursor: pointer;
			border: 2px solid #f0f0f0;
			margin-right: -1px;
			color: #9f9f9f;
			background-color: $white;
			display: flex;

			&:first-of-type {
				border-radius: 6px 0 0 6px;
			}

			&:last-of-type {
				border-radius: 0 6px 6px 0;
			}
		}

		&:checked + label {
			background-color: #f8f8f8;
		}
	}

	&__item-icon {
		user-select: none;
		font-size: 16px;

		&--small {
			font-size: 14px;
		}

		&--medium {
			font-size: 18px;
		}

		&--large {
			font-size: 20px;
		}
	}
}
  • URL: /components/raw/button-group/button-group.scss
  • Filesystem Path: src/components/button-group/button-group.scss
  • Size: 637 Bytes
  • Handle: @button-group--multi-select
  • Preview:
  • Filesystem Path: src/components/button-group/button-group--multi-select.hbs

No notes defined.