Component Library
Sign out

Button Group: Single Select 

<div class="demo-container">
    <div class="acl-button-group">
        <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="1" id="button1" />
        <label for="button1"><i class="aforza-icons acl-button-group__item-icon--small">acl_list_view</i></label>
        <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="2" id="button2" checked />
        <label for="button2"><i class="aforza-icons acl-button-group__item-icon--small">acl_grid_view</i></label>
    </div>
</div>
 
<div class="demo-container">
    <div class="acl-button-group">
        <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="1" id="button1" />
        <label for="button1"><i class="aforza-icons acl-button-group__item-icon--small">acl_list_view</i></label>
        <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="2" id="button2" checked/>
        <label for="button2"><i class="aforza-icons acl-button-group__item-icon--small">acl_grid_view</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

No notes defined.