<div class="acl-demo-documentation">
<div class="acl-documentation-intro">
<h2>How to use?</h2>
<p>The skeleton loader component is a flexible component that can be modified to your needs by the use of
modifer classes, see the examples above and the table below on how this can be used to comprise your
required skeleton loader.</p>
</div>
<div class="acl-documentation-table">
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Class</th>
<th class="text-left">Use Case</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">.acl-skeleton-loader__card</td>
<td class="text-left">This forms the card component of the skeleton loader.</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--left</td>
<td class="text-left">This aligns the card component content to the left</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--center</td>
<td class="text-left">This aligns the card component content in the center</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--right</td>
<td class="text-left">This aligns the card component content to the right</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row</td>
<td class="text-left">This allows child components to be rendered in a flex row format</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-center</td>
<td class="text-left">This positions child components of a row to be vertically aligned in the
center</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-top</td>
<td class="text-left">This positions child components of a row to be vertically aligned to the top
</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-bottom</td>
<td class="text-left">This positions child components of a row to be vertically aligned to the
bottom</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--left</td>
<td class="text-left">This positions child components of a row to be left aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--center</td>
<td class="text-left">This positions child components of a row to be center aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--right</td>
<td class="text-left">This positions child components of a row to be right aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--wrap</td>
<td class="text-left">This allows child components of a row to wrap onto the next line</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--space-between</td>
<td class="text-left">This allows child components of a row to position themselves with space
inbetween</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--space-evenly</td>
<td class="text-left">This allows child components of a row to position themselves evenly</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column</td>
<td class="text-left">This allows child components of a column to be rendered in a flex column
format</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-center</td>
<td class="text-left">This allows child components of a column to be vertically aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-top</td>
<td class="text-left">This allows child components of a column to be top aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-bottom</td>
<td class="text-left">This allows child components of a column to be bottom aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--center</td>
<td class="text-left">This positions child components of a column to be center aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--left</td>
<td class="text-left">This positions child components of a column to be left aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--right</td>
<td class="text-left">This positions child components of a column to be right aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--small</td>
<td class="text-left">This adds a small left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--medium</td>
<td class="text-left">This adds a medium left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--large</td>
<td class="text-left">This adds a large left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--small</td>
<td class="text-left">This adds a small right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--medium</td>
<td class="text-left">This adds a medium right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--large</td>
<td class="text-left">This adds a large right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder</td>
<td class="text-left">This adds a circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder</td>
<td class="text-left">This adds a square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder</td>
<td class="text-left">This adds a text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--rounded</td>
<td class="text-left">This adds rounded edged to the text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large text rectangle placeholder</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding: 5px;
width: 100%;
}
.table-title h3 {
color: #fafafa;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-transform: uppercase;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius: 3px;
border-collapse: collapse;
height: 320px;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
}
th {
color: #FFFFFF;
;
background: #46ccc2;
border-right: 1px solid #FFFF;
font-size: 18px;
font-weight: 100;
padding: 24px;
text-align: left;
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
color: #666B85;
font-size: 14px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #244b5a;
color: #FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #244b5a;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 14px;
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
</style>
<div class="acl-demo-documentation">
<div class="acl-documentation-intro">
<h2>How to use?</h2>
<p>The skeleton loader component is a flexible component that can be modified to your needs by the use of
modifer classes, see the examples above and the table below on how this can be used to comprise your
required skeleton loader.</p>
</div>
<div class="acl-documentation-table">
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Class</th>
<th class="text-left">Use Case</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">.acl-skeleton-loader__card</td>
<td class="text-left">This forms the card component of the skeleton loader.</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--left</td>
<td class="text-left">This aligns the card component content to the left</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--center</td>
<td class="text-left">This aligns the card component content in the center</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__card--right</td>
<td class="text-left">This aligns the card component content to the right</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row</td>
<td class="text-left">This allows child components to be rendered in a flex row format</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-center</td>
<td class="text-left">This positions child components of a row to be vertically aligned in the
center</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-top</td>
<td class="text-left">This positions child components of a row to be vertically aligned to the top
</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--vertical-bottom</td>
<td class="text-left">This positions child components of a row to be vertically aligned to the
bottom</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--left</td>
<td class="text-left">This positions child components of a row to be left aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--center</td>
<td class="text-left">This positions child components of a row to be center aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--right</td>
<td class="text-left">This positions child components of a row to be right aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--wrap</td>
<td class="text-left">This allows child components of a row to wrap onto the next line</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--space-between</td>
<td class="text-left">This allows child components of a row to position themselves with space
inbetween</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__row--space-evenly</td>
<td class="text-left">This allows child components of a row to position themselves evenly</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column</td>
<td class="text-left">This allows child components of a column to be rendered in a flex column
format</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-center</td>
<td class="text-left">This allows child components of a column to be vertically aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-top</td>
<td class="text-left">This allows child components of a column to be top aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--vertical-bottom</td>
<td class="text-left">This allows child components of a column to be bottom aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--center</td>
<td class="text-left">This positions child components of a column to be center aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--left</td>
<td class="text-left">This positions child components of a column to be left aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__column--right</td>
<td class="text-left">This positions child components of a column to be right aligned</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--small</td>
<td class="text-left">This adds a small left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--medium</td>
<td class="text-left">This adds a medium left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-left--large</td>
<td class="text-left">This adds a large left margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--small</td>
<td class="text-left">This adds a small right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--medium</td>
<td class="text-left">This adds a medium right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__margin-right--large</td>
<td class="text-left">This adds a large right margin to an element</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder</td>
<td class="text-left">This adds a circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__circle-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large sized circle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder</td>
<td class="text-left">This adds a square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__square-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large sized square placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder</td>
<td class="text-left">This adds a text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--rounded</td>
<td class="text-left">This adds rounded edged to the text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--small</td>
<td class="text-left">This adjusts the placeholder to a small text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--medium</td>
<td class="text-left">This adjusts the placeholder to a medium text rectangle placeholder</td>
</tr>
<tr>
<td class="text-left">.acl-skeleton-loader__text-placeholder--large</td>
<td class="text-left">This adjusts the placeholder to a large text rectangle placeholder</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding: 5px;
width: 100%;
}
.table-title h3 {
color: #fafafa;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-transform: uppercase;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius: 3px;
border-collapse: collapse;
height: 320px;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
}
th {
color: #FFFFFF;
;
background: #46ccc2;
border-right: 1px solid #FFFF;
font-size: 18px;
font-weight: 100;
padding: 24px;
text-align: left;
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
color: #666B85;
font-size: 14px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #244b5a;
color: #FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #244b5a;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 14px;
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
</style>
/* No context defined. */
%animate {
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0),
rgba(#fff, 0.6) 30%,
rgba(#fff, 0.5) 70%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
$background-colour: #f0f0f0; // To be considered for ACL styleguide variable
$element-colour: $light-grey;
.acl-skeleton-loader {
position: relative;
overflow: hidden;
&__card {
background-color: $background-colour;
padding: 10px;
display: flex;
flex-direction: column;
opacity: 1;
border-radius: 8px;
@extend %animate;
width: calc(100% - 20px);
height: calc(100% - 20px);
&--center {
align-items: center;
}
&--right {
align-items: flex-end;
}
&--left {
align-items: flex-start;
}
&--straight-corners {
border-radius: 0px;
}
}
&__card-content {
padding: 10px;
}
&__row {
flex-direction: row;
display: flex;
&--vertical-center {
align-items: center;
}
&--vertical-top {
align-items: flex-start;
}
&--vertical-bottom {
align-items: flex-end;
}
&--center {
justify-content: center;
}
&--left {
justify-content: flex-start;
}
&--right {
justify-content: flex-end;
}
&--wrap {
flex-wrap: wrap;
}
&--space-between {
justify-content: space-between;
}
&--space-evenly {
justify-content: space-evenly;
}
}
&__column {
flex-direction: column;
&--vertical-center {
align-items: center;
}
&--vertical-top {
align-items: flex-start;
}
&--vertical-bottom {
align-items: flex-end;
}
&--center {
justify-content: center;
}
&--left {
align-items: flex-start;
}
&--right {
align-items: flex-end;
}
}
&__margin-left {
&--small {
margin-left: 5px !important;
}
&--medium {
margin-left: 15px !important;
}
&--large {
margin-left: 20px !important;
}
}
&__margin-right {
&--small {
margin-right: 5px !important;
}
&--medium {
margin-right: 15px !important;
}
&--large {
margin-right: 20px !important;
}
}
&__circle-placeholder {
height: 50px;
width: 50px;
background-color: $element-colour;
border-radius: 50%;
display: inline-block;
margin: 5px 0;
&--small {
height: 25px;
width: 25px;
}
&--medium {
height: 50px;
width: 50px;
}
&--large {
height: 75px;
width: 75px;
}
}
&__square-placeholder {
background-color: $element-colour;
height: 50px;
width: 50px;
border-radius: 8px;
margin: 5px 0;
&--small {
height: 25px;
width: 25px;
}
&--medium {
height: 50px;
width: 50px;
}
&--large {
height: 75px;
width: 75px;
}
}
&__text-placeholder {
background-color: $element-colour;
margin: 5px 0;
height: 20px;
&--rounded {
border-radius: 4px;
}
&--small {
height: 10px;
}
&--medium {
height: 25px;
}
&--large {
height: 30px;
}
}
&__divider {
border-bottom: 1px solid $element-colour;
margin: 5px 0;
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
No notes defined.