a type of secondary navigation scheme that reveals the user’s location in a website or Web application.
Item | Note |
---|---|
.breadcrumb | (Mandatory) main class. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<ul class="breadcrumbs">
<li class="breadcrumbs__item">
<a href="/unicorn/styleguide/template-dashboard.html" class="breadcrumbs__link">Home</a>
</li>
<li class="breadcrumbs__item">
<a href="/unicorn/styleguide/template-events.html" class="breadcrumbs__link">Events</a>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">Readcrumbs</a>
</li>
</ul>
</div>
.breadcrumbs {
align-items: center;
background-color: #ECEFF6;
border-radius: 25px;
display: inline-flex;
justify-content: flex-start;
padding: 10px;
width: auto;
}
.breadcrumbs__item {
display: flex;
}
.breadcrumbs__item:last-child .breadcrumbs__link {
color: #959CA6;
cursor: default;
}
.breadcrumbs__link {
color: #6B7C93;
margin: 0 10px;
position: relative;
text-transform: capitalize;
white-space: nowrap;
}
Item | Note |
---|---|
.search__input | (Mandatory) input class to achieve the animation effect. |
.search__icon | (Mandatory) icon class to achieve the opacity toggle. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="search ">
<input type="search" placeholder="Search Here..." class="input search__input ">
<svg class="search__icon icon icon--tiny icon--slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
</svg>
</div>
</div>
.search__input:focus + .search__icon {
opacity: 0;
transform: translateX(15px);
visibility: hidden;
}
.search__input:focus + .search__icon {
opacity: 0.5;
}
.search__icon {
margin-left: -40px;
margin-top: -2px;
pointer-events: none;
transition: all .175s linear;
transform: translateX(0);
transform-origin: right;
}
Tables allows to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
Item | Note |
---|---|
.table | (Mandatory) Main class to |
.table--striped | (Optional) It gives you an alternated color table |
.table__head | (Mandatory) add this to |
.table__body | (Mandatory) add this to |
.table__header | (Mandatory) add this to |
.table__data | (Mandatory) add this to |
$table-data-names | Update this variable if you want to add a new table row option. Also it needs to be added as a modifier on the |
.table__order | (Optional) “Just in case you need adding an order component.” |
Demo (Open in a new tab) | |
---|
<table class="table" >
<thead class="table__head">
<tr class="table__row">
<th class="table__header table__header--tiny">
<input name="checkall" id="checkall" data-checkall="default" type="checkbox" class="checkbox table__checkbox">
<label for="checkall" class="no-space-out" onclick=""></label>
</th>
<th class="table__header" >
<div class="table__icon"></div>
<span class="table__label">First Name</span>
</th>
<th class="table__header" >
<div class="table__icon"></div>
<span class="table__label">Last Name</span>
</th>
<th class="table__header" >
<div class="table__icon"></div>
<span class="table__label">Email</span>
</th>
<th class="table__header" >
<div class="table__icon"></div>
<span class="table__label">Role</span>
</th>
<th class="table__header" >
<div class="table__icon"></div>
<span class="table__label">Patrol</span>
</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check1" id="check1" type="checkbox" class="checkbox table__checkbox">
<label for="check1" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 1</td>
<td class="table__data">jj1@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">1</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check2" id="check2" type="checkbox" class="checkbox table__checkbox">
<label for="check2" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 2</td>
<td class="table__data">jj2@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">2</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check3" id="check3" type="checkbox" class="checkbox table__checkbox">
<label for="check3" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 3</td>
<td class="table__data">jj3@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">3</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check4" id="check4" type="checkbox" class="checkbox table__checkbox">
<label for="check4" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 4</td>
<td class="table__data">jj4@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">4</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check5" id="check5" type="checkbox" class="checkbox table__checkbox">
<label for="check5" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 5</td>
<td class="table__data">jj5@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">5</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check6" id="check6" type="checkbox" class="checkbox table__checkbox">
<label for="check6" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 6</td>
<td class="table__data">jj6@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">6</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check7" id="check7" type="checkbox" class="checkbox table__checkbox">
<label for="check7" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 7</td>
<td class="table__data">jj7@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">7</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check8" id="check8" type="checkbox" class="checkbox table__checkbox">
<label for="check8" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 8</td>
<td class="table__data">jj8@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">8</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check9" id="check9" type="checkbox" class="checkbox table__checkbox">
<label for="check9" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 9</td>
<td class="table__data">jj9@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">9</td>
</tr>
<tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
<td class="table__data table__data--tiny">
<input name="check10" id="check10" type="checkbox" class="checkbox table__checkbox">
<label for="check10" class="table__label no-space-out" onclick=""></label>
</td>
<td class="table__data">Jorge</td>
<td class="table__data">Junior 10</td>
<td class="table__data">jj10@mail.com</td>
<td class="table__data">Organizer</td>
<td class="table__data">10</td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
* {
transition: all .2s linear;
}
}
tr,
td,
th {
color: if($AdminSPA, $tuna, $cello);
vertical-align: middle;
}
td,
th {
padding: 15px 10px;
text-align: left;
&:first-child {
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
}
td {
border-top: 1px solid $darken-lavender;
}
th {
font-weight: bold;
text-transform: uppercase;
}
.table {
@extend table;
&__holder {
min-height: 50px;
position: relative;
}
&__order {
cursor: pointer;
display: inline-block;
max-width: 100px;
position: relative;
width: auto;
}
&__label {
margin-right: 5px;
&:hover ~ .table__icon:not(.is-visible) {
opacity: .45;
visibility: visible;
}
}
&__icon {
bottom: 0;
height: 16px;
margin: auto;
right: 0;
&,
> * {
position: absolute;
top: 0;
}
> * {
right: -15px;
}
}
&__data {
&--group {
padding-top: 25px;
}
.table--striped & {
border: 0;
}
@include media(tablet) {
&::before {
display: inline-block;
font-weight: bold;
min-width: 30%;
padding-right: 25px;
position: relative;
text-transform: uppercase;
word-wrap: nowrap;
}
@each $data-name in $table-data-names {
&--#{$data-name}::before {
content: str-replace($data-name, '-', ' ') + ':';
}
}
}
@include media(mobile) {
&::before {
display: block;
}
}
}
&__data,
&__header {
transition: width .5s, height .5s, padding .5s, transform .5s, white-space .5s, visibility .25s, opacity .25s;
&.is-invisible {
height: 0;
overflow: hidden;
padding: 0;
transform: scale(0,0) translateX(50%);
width: 0;
white-space: nowrap;
}
&.is-visible {
transform: scale(1,1) translateX(0);
}
@include media(tablet) {
display: block;
&,
&:first-child,
&:last-child {
padding: 10px;
}
}
}
&__row {
@include media(tablet) {
display: table;
width: 100%;
}
.table--striped .table__body & {
&:not(.table__row--invisible):nth-of-type(2n+1) {
background-color: $lavender;
}
}
.table--darker .table__body & {
&:not(.table__row--invisible) {
background-color: $lavender;
}
}
.table--striped .table__body &,
.table--darker .table__body & {
&:not(.table__row--invisible) {
cursor: pointer;
}
&:not(.table__row--invisible):hover {
background-color: lighten($blue-hex, 25.4);
}
}
}
&__head {
@include media(tablet) {
display: none;
}
.table--striped & {
border-bottom: 1px solid $darken-lavender;
}
}
}
Item | Note |
---|---|
.flash | (Mandatory) combine with |
.is-visible | (Mandatory) state to see the message properly. Use |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<span class="flash flash--info is-visible">Just an info message... <a href="#" class="flash__link">Some Link</a></span>
<span class="flash flash--warning is-visible">Oh! A warning message! <a href="#" class="flash__link">Some Link</a></span>
<span class="flash flash--danger is-visible">Ouch!!! A danger message!! <a href="#" class="flash__link">Some Link</a></span>
<span class="flash flash--success is-visible">Yay! A success message! <a href="#" class="flash__link">Some Link</a></span>
<span class="flash flash--info flash--top flash--full is-visible">Huge Flash <a href="#" class="flash__link">Some Link</a></span>
</div>
.flash {
color: #FFF;
left: 0;
padding: 15px;
position: fixed;
text-align: center;
top: 0;
transform-origin: top;
transition: all .3s ease-in-out;
width: 100%;
}
.flash--info {
background: #2E7FED;
}
.flash--warning {
background: #FABE58;
}
.flash--danger {
background: #EC644B;
}
.flash--success {
background: #26A65B;
}
Item | Note |
---|---|
.tooltip | (Mandatory) Default tooltip class |
.tooltip-inverse | White background on black text tooltip |
data-tooltip | Content to display |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<span class="tooltip" data-tooltip="Hello!">Hover me </span>
<span class="tooltip tooltip--inverse" data-tooltip="In Reverse!">Hover me </span>
<span class="tooltip tooltip--bottom" data-tooltip="At the bottom!">Hover me </span>
<span class="tooltip tooltip--bottom tooltip--inverse" data-tooltip="Bottom and Reverse!">Hover me </span>
</div>
.tooltip {
opacity: 1;
position: relative;
text-align: center;
}
.tooltip::before {
height: 0px;
width: 0px;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
border-top: solid 7px #2C2F30;
content: '';
top: -16px;
z-index: 1005;
}
.tooltip::after {
background: #2C2F30;
border-radius: 25px;
box-shadow: 1px 1px 10px rgba(9, 9, 9, 0.55);
color: #FFF;
content: attr(data-tooltip);
@include font-size($fs-small);
font-weight: bold;
min-width: 60px;
padding: 10px;
top: -52px;
white-space: nowrap;
z-index: 1004;
}
.tooltip::after,
.tooltip::before {
left: 50%;
opacity: 0;
position: absolute;
transform: translateX(-50%) translateY(-2px);
transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
visibility: hidden;
}
.tooltip:hover::after,
.tooltip:hover::before {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
visibility: visible;
}
.tooltip--inverse::before {
border-top-color: #FFF;
}
.tooltip--inverse::after {
background-color: #FFF;
color: #000;
}
Item | Note |
---|---|
.list | (Mandatory) Main Class. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<nav class="list">
<li class="list__item">
<a href="/unicorn/styleguide/template-account.html" class="list__link">
<div class="list__content">
<svg class="icon icon--tiny list__icon">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
</svg>
<span class="list__text">Update Info</span>
</div>
<svg class="icon icon--tiny icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
</svg>
</a>
</li>
<li class="list__item">
<a href="/unicorn/styleguide/template-billing.html" class="list__link">
<div class="list__content">
<svg class="icon icon--tiny list__icon">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-card" />
</svg>
<span class="list__text">Payment</span>
</div>
<svg class="icon icon--tiny icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
</svg>
</a>
</li>
<li class="list__item">
<a href="#" class="list__link js-sidepanel-open" data-type="plans">
<div class="list__content">
<svg class="icon icon--tiny list__icon">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-shuffle" />
</svg>
<span class="list__text">Change Plan</span>
</div>
<svg class="icon icon--tiny icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
</svg>
</a>
</li>
<li class="list__item is-active">
<a href="#" class="list__link">
<div class="list__content">
<svg class="icon icon--tiny list__icon">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-plus-circle" />
</svg>
<span class="list__text">Add User</span>
</div>
<svg class="icon icon--tiny icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
</svg>
</a>
</li>
</nav>
<div class="list">
<ul class="list list--bordered no-scroll">
<li class="list__item">
<input name="peopleSettings" id="import3rdParty" type="radio" class="list__radio" checked>
<label for="import3rdParty" class="list__toggle no-space-out" onclick="">
<div class="list__content">
<div class="list__badge card__badge badge badge--medium badge--center">
<svg class="icon icon--small icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-import" />
</svg>
</div>
</div>
<div class="list__data list__data--fit">
<span class="list__text">Import from 3rd Party Services</span>
<small class="list__subtext">Get your contacts from Google, iCloud or Microsoft</small>
</div>
</label>
</li>
<li class="list__item">
<input name="peopleSettings" id="importCsv" type="radio" class="list__radio">
<label for="importCsv" class="list__toggle no-space-out" onclick="">
<div class="list__content">
<div class="list__badge card__badge badge badge--medium badge--center">
<svg class="icon icon--small icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-upload" />
</svg>
</div>
</div>
<div class="list__data list__data--fit">
<span class="list__text">Upload a CSV File</span>
<small class="list__subtext">Import from spreadsheet</small>
</div>
</label>
</li>
<li class="list__item">
<input name="peopleSettings" id="importClipboard" type="radio" class="list__radio">
<label for="importClipboard" class="list__toggle no-space-out" onclick="">
<div class="list__content">
<div class="list__badge card__badge badge badge--medium badge--center">
<svg class="icon icon--small icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-clipboard" />
</svg>
</div>
</div>
<div class="list__data list__data--fit">
<span class="list__text">Paste from Clipboard</span>
<small class="list__subtext">CTRL + V on the way</small>
</div>
</label>
</li>
<li class="list__item">
<input name="peopleSettings" id="shareLink" type="radio" class="list__radio">
<label for="shareLink" class="list__toggle no-space-out" onclick="">
<div class="list__content">
<div class="list__badge card__badge badge badge--medium badge--center">
<svg class="icon icon--small icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-link" />
</svg>
</div>
</div>
<div class="list__data list__data--fit">
<span class="list__text">Share a Link</span>
<small class="list__subtext">Just send a link and don’t add anyone</small>
</div>
</label>
</li>
<li class="list__item">
<input name="peopleSettings" id="addManually" type="radio" class="list__radio">
<label for="addManually" class="list__toggle no-space-out" onclick="">
<div class="list__content">
<div class="list__badge card__badge badge badge--medium badge--center">
<svg class="icon icon--small icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-user" />
</svg>
</div>
</div>
<div class="list__data list__data--fit">
<span class="list__text">Add People Manually</span>
<small class="list__subtext">Start typing their names</small>
</div>
</label>
</li>
</ul>
</div>
</div>
.list {
height: auto;
position: relative;
width: 100%;
}
.list__item {
border-bottom: 1px solid #eff1f7;
display: block;
height: 70px;
}
.list__link {
align-items: center;
color: #bdbdbd;
display: flex;
flex-direction: row;
height: 100%;
padding: 0 30px;
}
.list__icon {
fill: #6B7C93;
}
.list__text {
color: #6B7C93;
margin: 0 0 0 15px;
}
Item | Note |
---|---|
.pagination | (Mandatory) Main class. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="pagination">
<div class="pagination__holder">
<a href="#" class="pagination__button is-disabled">First</a>
<a href="#" class="pagination__button pagination__button--previous"></a>
<nav class="pagination__nav">
<a href="#" class="pagination__link">1</a>
<a href="#" class="pagination__link is-active">2</a>
<a href="#" class="pagination__link">3</a>
<span class="pagination__link is-disabled">...</span>
<a href="#" class="pagination__link">10</a>
</nav>
<a href="#" class="pagination__button pagination__button--next"></a>
<a href="#" class="pagination__button">Last</a>
</div>
</div>
</div>
.pagination {
align-items: center;
display: flex;
margin: auto;
justify-content: center;
padding: 15px;
}
.pagination__nav,
.pagination__button {
background-color: #FFF;
border: 1px solid #EEE;
border-radius: 4px;
}
.pagination__button,
.pagination__link {
padding: 8px 12px;
}
.pagination__button.is-active,
.pagination__button:hover,
.pagination__link.is-active,
.pagination__link:hover {
background-color: #2E7FED;
border-color: #2E7FED;
color: #FFF;
}
.pagination__nav {
display: flex;
margin: 0 5px;
overflow: hidden;
}
.pagination__link:not(:first-of-type):not(.is-active) {
border-left: 1px solid #EEE;
}
.pagination__link.is-active {
cursor: default;
}
@media (max-width: 480px) {
.pagination__link:not(.is-active) {
display: none;
}
}
.pagination__button.is-disabled,
.pagination__button.is-disabled:hover {
background-color: #FFF;
border-color: #EEE;
color: #BEC5CF;
cursor: default;
}
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.
Item | Note |
---|---|
.dropdown | (Mandatory) Main class. |
.dropdown__list | Menu area. |
sizes |
|
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="dropdown dropdown--header">
<div class="dropdown__holder">
<a href="#" class="dropdown__button">
<div class="dropdown__content dropdown__content--auto">
<div class="dropdown__avatar">
<svg class="icon icon--small icon--gray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
</svg>
</div>
<span class="dropdown__text is-mobile-hidden"> Eventene </span>
</div>
<svg class="icon icon--tiny icon--darken-sky dropdown__icon no-space-out">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down" />
</svg>
</a>
<ul class="dropdown__list dropdown__list--big">
<li class="dropdown__item">
<div class="dropdown__row dropdown__row--first">
<svg class="icon icon--tiny icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-person" />
</svg>
<span class="dropdown__subtitle">Participant</span>
</div>
</li>
<li class="dropdown__item ">
<a href="/unicorn/styleguide/template-participant-events.html" class="dropdown__link">
<span class="dropdown__legend dropdown__legend--break">Josh Lion</span>
</a>
</li>
<li class="dropdown__item">
<div class="dropdown__row dropdown__row--tighter">
<svg class="icon icon--tiny icon--light-slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
</svg>
<span class="dropdown__subtitle">Organizations</span>
</div>
</li>
<li class="dropdown__item is-selected ">
<a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
<span class="dropdown__legend dropdown__legend--break">Eventene</span>
</a>
</li>
<li class="dropdown__item">
<a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
<span class="dropdown__legend dropdown__legend--break">Facebook</span>
</a>
</li>
<li class="dropdown__item">
<a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
<span class="dropdown__legend dropdown__legend--break">Meetup</span>
</a>
</li>
</ul>
</div>
</div>
</div>
.dropdown {
height: 60px;
width: 200px;
z-index: auto;
}
.dropdown__holder {
height: 100%;
position: relative;
width: 100%;
}
.dropdown__button {
align-items: center;
cursor: pointer;
display: flex;
height: 100%;
justify-content: space-between;
margin: 0;
min-width: 100%;
padding: 0 20px;
position: relative;
right: 0;
top: 0;
}
.dropdown__content {
align-items: center;
display: flex;
width: calc(100% - 16px);
}
.dropdown__text {
display: inline;
padding: 0 5px 0 0;
text-align: left;
text-transform: capitalize;
transition: color .3s linear;
vertical-align: middle;
}
.dropdown__icon {
margin: auto;
transform: rotate(0deg);
transition: transform .3s linear;
}
.dropdown__list {
background-color: #FFF;
opacity: 0;
overflow: auto;
padding: 0;
transition: all .375s ease-in-out 0s;
visibility: hidden;
z-index: 978;
}
.dropdown__link {
display: flex;
overflow: hidden;
padding: 20px;
width: 100%;
}
.dropdown__link:hover {
background-color: #F8F9FB;
}
.dropdown__legend {
color: #959CA6;
}
Item | Note |
---|---|
.loader | (mandatory) main area. |
.loader__holder | (mandatory) use this to keep the loader centered. |
.loader__item--outline | loader using stroke animation. |
.loader__item--fade | loader using fade animation. |
Demo (Open in a new tab) | |
---|
<div class="loader loader--full">
<div class="loader__holder">
<svg class="loader__item loader__item--outline" viewBox="0 0 1203 193" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="path_e1" fill-rule="evenodd" d="M126.501 142.452H27.43l5.073-16.35h86.063L89.791 66.863H50.897l5.086-16.35h25.873L57.323 0 44.644 40.843l-.017-.013-34.238 110.26.018.013L0 184.652c.867 3.511 3.096 6.48 6.114 8.344h144.911l-24.524-50.54"/>
<path id="path_e2" fill-rule="evenodd" d="M148.259.004H0l24.109 49.647-.044.035.412.832 53.134 109.436.044-.035 16.043 33.055 1.821-5.873 7.133-22.938 6.738-21.707H83.478l-7.948-16.35h38.938l18.385-59.238h-86.08l-7.935-16.35h99.101l13.876-44.675c-.694-2.237-1.9-4.248-3.547-5.843" transform="translate(67.56)"/>
<path id="path_event" fill-rule="evenodd" d="M0 131.546L35.924.026h93.907l-8.542 31.355H66.073l-3.88 14.157H113.4l-8.628 31.355H53.607l-6.374 23.293h55.111l-8.429 31.36H0zm144.747 0L134.817.026h39.207l4.31 79 46.266-79h41.964l-81.839 131.52h-39.991.013zm92.718 0L273.381.026h93.906l-8.529 31.355h-55.224l-3.881 14.157h51.209l-8.637 31.355h-51.166l-6.387 23.293h55.098l-8.425 31.36h-93.88zm192.032 0l-26.979-76.399-20.87 76.373h-36.271L381.301 0h39.905l22.712 62.529L460.924 0h36.367l-35.924 131.529h-31.87v.017zm78.916-.017l27.252-99.744h-36.874L507.42.013h112.565l-8.629 31.771h-36.857l-27.252 99.754h-38.808" transform="translate(217.81 46.02)"/>
<path id="path_ene" fill-rule="evenodd" d="M125.789 0l-6.729 24.737H60.956L54.605 47.89h53.876l-6.808 24.733H47.827L38.834 105.4H96.85l-6.642 24.732H0L35.538 0h90.256-.005zm104.678 130.133h-27.448L171.193 40.02l-24.603 90.113h-29.603L152.53 0h35.946l27.361 75.333L236.329 0h29.685l-35.547 130.133zM387.758 0l-6.721 24.737h-58.13l-6.352 23.154h53.876l-6.808 24.733h-53.854l-8.984 32.777h58.016l-6.643 24.732h-90.216L297.489 0h90.256" transform="translate(815.24 46.23)"/>
</svg>
<svg class="loader__item loader__item--fade" viewBox="0 0 1203 193" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="path_e1" fill-rule="evenodd" d="M126.501 142.452H27.43l5.073-16.35h86.063L89.791 66.863H50.897l5.086-16.35h25.873L57.323 0 44.644 40.843l-.017-.013-34.238 110.26.018.013L0 184.652c.867 3.511 3.096 6.48 6.114 8.344h144.911l-24.524-50.54"/>
<path id="path_e2" fill-rule="evenodd" d="M148.259.004H0l24.109 49.647-.044.035.412.832 53.134 109.436.044-.035 16.043 33.055 1.821-5.873 7.133-22.938 6.738-21.707H83.478l-7.948-16.35h38.938l18.385-59.238h-86.08l-7.935-16.35h99.101l13.876-44.675c-.694-2.237-1.9-4.248-3.547-5.843" transform="translate(67.56)"/>
<path id="path_event" fill-rule="evenodd" d="M0 131.546L35.924.026h93.907l-8.542 31.355H66.073l-3.88 14.157H113.4l-8.628 31.355H53.607l-6.374 23.293h55.111l-8.429 31.36H0zm144.747 0L134.817.026h39.207l4.31 79 46.266-79h41.964l-81.839 131.52h-39.991.013zm92.718 0L273.381.026h93.906l-8.529 31.355h-55.224l-3.881 14.157h51.209l-8.637 31.355h-51.166l-6.387 23.293h55.098l-8.425 31.36h-93.88zm192.032 0l-26.979-76.399-20.87 76.373h-36.271L381.301 0h39.905l22.712 62.529L460.924 0h36.367l-35.924 131.529h-31.87v.017zm78.916-.017l27.252-99.744h-36.874L507.42.013h112.565l-8.629 31.771h-36.857l-27.252 99.754h-38.808" transform="translate(217.81 46.02)"/>
<path id="path_ene" fill-rule="evenodd" d="M125.789 0l-6.729 24.737H60.956L54.605 47.89h53.876l-6.808 24.733H47.827L38.834 105.4H96.85l-6.642 24.732H0L35.538 0h90.256-.005zm104.678 130.133h-27.448L171.193 40.02l-24.603 90.113h-29.603L152.53 0h35.946l27.361 75.333L236.329 0h29.685l-35.547 130.133zM387.758 0l-6.721 24.737h-58.13l-6.352 23.154h53.876l-6.808 24.733h-53.854l-8.984 32.777h58.016l-6.643 24.732h-90.216L297.489 0h90.256" transform="translate(815.24 46.23)"/>
</svg>
</div>
</div>
.loader__holder {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.loader__item {
width: 50%;
}
.loader__item--outline * {
-webkit-animation: lineFill 4s infinite;
animation: lineFill 4s infinite;
fill: transparent;
stroke: #000;
-webkit-transition: stroke-dasharray 5s;
transition: stroke-dasharray 5s;
}
.loader__item--fade * {
fill: #DADCE5;
-webkit-animation: svgFade 3s infinite alternate-reverse;
animation: svgFade 3s infinite alternate-reverse;
-webkit-transition: fill-opacity 1s linear;
transition: fill-opacity 1s linear;
}
.loader__item--fade path:nth-child(1) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.loader__item--fade path:nth-child(2) {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.loader__item--fade path:nth-child(3) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.loader__item--fade path:nth-child(4) {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
@-webkit-keyframes lineFill {
from { stroke-dasharray: 250; }
to { stroke-dasharray: 1000; }
}
@keyframes lineFill {
from { stroke-dasharray: 250; }
to { stroke-dasharray: 1000; }
}
@-webkit-keyframes svgFade {
from { fill-opacity: 0; }
to { fill-opacity: 1; }
}
@keyframes svgFade {
from { fill-opacity: 0; }
to { fill-opacity: 1; }
}
Item | Note |
---|---|
.actionbar | (mandatory) main area. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<ul class="card__actions actionbar">
<li class="card__action">
<div class="search">
<input type="search" placeholder="Search Here..." class="input input--invisible search__input">
<svg class="search__icon icon icon--tiny icon--slategray">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
</svg>
</div>
</li>
<li class="card__action">
<div class="dropdown dropdown--floating">
<div class="dropdown__holder">
<a href="#" class="dropdown__button">
<div class="dropdown__content">
<span class="dropdown__label">Show</span>
<strong class="dropdown__selection">10</strong>
</div>
<svg class="icon icon--tiny icon--slategray dropdown__icon">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down"></use>
</svg>
</a>
<ul class="dropdown__list dropdown__list--floating dropdown__list--small">
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">10</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">20</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">50</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">100</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
Item | Note |
---|---|
.alert | (Mandatory) combine with |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<span class="alert" role="alert">Default Alert.</span>
<span class="alert alert--info" role="alert">Don't forget to verify your account.</span>
<span class="alert alert--warning" role="alert">Be careful on this!</span>
<span class="alert alert--danger" role="alert">Please fix the fields below!</span>
<span class="alert alert--success" role="alert">You're good to go!</span>
</div>
.alert {
border: 1px solid transparent;
border-radius: .25rem;
display: block;
margin-bottom: 1rem;
padding: .75rem 1.25rem;
position: relative;
}
.alert--info {
background-color: #eaf2fd;
border-color: #d2e4fb;
color: #0a3978;
}
.alert--warning {
background-color: #fef8ed;
border-color: #feeed4;
color: #b47305;
}
.alert--danger {
background-color: #fdefec;
border-color: #fbdbd5;
color: #8f230f;
}
.alert--success {
background-color: #eafaf1;
border-color: #d6f6e3;
color: #13532e;
}
Item | Note |
---|
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="toggle ">
<div class="toggle__item">
<input class="toggle__el" id="Create" name="view" type="radio" checked>
<label class="toggle__button" for="Create" onclick="">
<svg class="icon icon--small icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-file" />
</svg>
<strong class="toggle__text">Create from Scratch</strong>
<small class="toggle__desc">Start with a blank Event</small>
</label>
</div>
<div class="toggle__item">
<input class="toggle__el" id="Copy" name="view" type="radio" disabled>
<label class="toggle__button" for="Copy" onclick="">
<svg class="icon icon--small icon--darken-sky">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-copy" />
</svg>
<strong class="toggle__text">Copy an Existing Event</strong>
<small class="toggle__desc">Build from previous Event</small>
</label>
</div>
</div>
</div>
Item | Note |
---|
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<label onclick="" for="billingPeriod" class="switch switch--reverse">
<input id="billingPeriod" type="checkbox" class="switch__el">
<span class="switch__text switch__text--reverse switch__text--siblings">Billed Annually</span>
<span class="switch__holder switch__holder--reverse">
<a class="switch__button switch__button--reverse"></a>
</span>
<span class="switch__text switch__text--reverse switch__text--siblings">Billed Monthly</span>
</label>
</div>
Item | Note |
---|---|
.pane | (mandatory) main area. |
.pane--tighter | (Optional) In case you need adding padding. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<article class="pane pane--signed pane--draggable no-space-out has-full-width">
<span class="pane__sign pane__sign--brown"></span>
<div class="pane__content pane__content--unbreak">
<div class="pane__info has-full-width">
<p class="no-space-out pane__text pane__text--truncate">
<span class="has-truncate-text">User </span>
<small class="has-truncate-text">item 1 • item 2 • item
3</small>
</p>
</div>
</div>
<div class="pane__actions pane__actions--start">
<div class="dropdown dropdown--floating dropdown--table">
<div class="dropdown__holder">
<a href="#" class="button button--circle button--transparent no-space-out">
<svg class="icon icon--tiny">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
</svg>
</a>
<ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Action 1</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Action 2</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Action 3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</article>
<article class="pane pane--tighter">
<div class="pane__content">
<span class="pane__badge badge badge--medium badge--text"></span>
<div class="pane__info pane__info--center">
<strong>First Name</strong>
</div>
</div>
<div class="pane__actions pane__actions--start">
<div class="dropdown dropdown--floating dropdown--table">
<div class="dropdown__holder">
<a href="#" class="button button--circle button--transparent no-space-out">
<svg class="icon icon--tiny">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
</svg>
</a>
<ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Edit</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Move</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend is-danger">Delete</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</article>
<article class="pane">
<div class="pane__content">
<span class="pane__badge badge badge--medium badge--comment"></span>
<div class="pane__info">
<strong class="has-long-text">Baggage Question</strong>
<div class="pane__info">
<p class="has-long-text">Which kind of bags will you be bringing?</p>
</div>
<div class="pane__info">
<span class="tag tag--gray">People</span>
<span class="tag tag--gray">Required</span>
</div>
</div>
</div>
<div class="pane__actions pane__actions--start">
<div class="dropdown dropdown--floating dropdown--table">
<div class="dropdown__holder">
<a href="#" class="button button--circle button--transparent no-space-out">
<svg class="icon icon--tiny">
<use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
</svg>
</a>
<ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend">Move</span>
</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">
<span class="dropdown__legend is-danger">Delete</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</article>
</div>
Item | Note |
---|---|
.chart | (mandatory) main class. |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="chart chart--donut">
<div class="chart__slice chart__slice--donut chart__slice--completed"></div>
<div class="chart__slice chart__slice--donut chart__slice--incomplete"></div>
</div>
<div class="chart chart--doughnut">
<div class="chart__slice chart__slice--doughnut chart__slice--sections-master"></div>
<div class="chart__slice chart__slice--doughnut chart__slice--sections-segmented"></div>
</div>
</div>
Item | Note |
---|---|
.color-picker | (Mandatory) main class. |
.color-picker__item | Wraps the component with on-click selection border |
.color-picker__dot | Round shape default setting |
Demo (Open in a new tab) | |
---|
<div class="s-spacer">
<div class="color-picker">
<label class="color-picker__item is-selected " for="color-1">
<input class="input color-picker__input" name="color" id="color-1" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--blue" data-dot></div>
</label>
<label class="color-picker__item " for="color-2">
<input class="input color-picker__input" name="color" id="color-2" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--flamingo" data-dot></div>
</label>
<label class="color-picker__item " for="color-3">
<input class="input color-picker__input" name="color" id="color-3" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--lavender" data-dot></div>
</label>
<label class="color-picker__item " for="color-4">
<input class="input color-picker__input" name="color" id="color-4" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--yellow" data-dot></div>
</label>
<label class="color-picker__item " for="color-5">
<input class="input color-picker__input" name="color" id="color-5" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--green" data-dot></div>
</label>
<label class="color-picker__item " for="color-6">
<input class="input color-picker__input" name="color" id="color-6" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--lavender-magenta" data-dot></div>
</label>
<label class="color-picker__item " for="color-7">
<input class="input color-picker__input" name="color" id="color-7" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--selective-yellow" data-dot></div>
</label>
<label class="color-picker__item " for="color-8">
<input class="input color-picker__input" name="color" id="color-8" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--viking-blue" data-dot></div>
</label>
<label class="color-picker__item " for="color-9">
<input class="input color-picker__input" name="color" id="color-9" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--copper" data-dot></div>
</label>
<label class="color-picker__item " for="color-10">
<input class="input color-picker__input" name="color" id="color-10" type="radio" onclick=""></input>
<div class="color-picker__dot color-picker__dot--picton-blue" data-dot></div>
</label>
</div>
</div>