pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add placeholder radio buttons

Browse Source
This commit is contained in:
luis cielak 2018-08-28 16:20:53 -04:00
parent a332d67210
commit ab828c8d4b
2 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/elements/_block_lists.scss
View File

@ -72,6 +72,11 @@
margin: -$gap 0; margin: -$gap 0;
} }
label {
margin: 0;
max-width: 100%;
}
.icon-link, .icon-link,
.label { .label {
&:first-child { &:first-child {

20
templates/member_edit.html
View File

@ -61,30 +61,49 @@
</header> </header>
<form method="post" action="">
<dl> <dl>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-1' />
<label for='radio-1'>
<dt>CCPO</dt> <dt>CCPO</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd>
</label>
</div> </div>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-2' />
<label for='radio-2'>
<dt>Security</dt> <dt>Security</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd>
</label>
</div> </div>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-3' />
<label for='radio-3'>
<dt>Audit</dt> <dt>Audit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd>
</label>
</div> </div>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-4' />
<label for='radio-4'>
<dt>Application Developer</dt> <dt>Application Developer</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd>
</label>
</div> </div>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-5' />
<label for='radio-5'>
<dt>Dev Ops</dt> <dt>Dev Ops</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd>
</label>
</div> </div>
<div class='block-list__item'> <div class='block-list__item'>
<input type='radio' name='radio' id='radio-6' />
<label for='radio-6'>
<dt>Billing</dt> <dt>Billing</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd>
</label>
</div> </div>
</dl> </dl>
@ -92,6 +111,7 @@
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Add Access</a> <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Add Access</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a> <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
</div> </div>
</form>
</div> </div>