Molecules

Table   

Table/Grid

Name Modified Type Owened By Permissions
Costa Rica 10/1/18 Photo Me 8 People
Ea Tipene 10/1/18 Person Me
Thomas Buchi 10/1/18 Chat Me
Copy
Edit
<!-- components/Molecules/Table.php --> <div class="row-wrap"> <h4> Table/Grid </h4> <table> <thead> <tr> <th class="preview"> </th> <th class="name sortable">Name <i class="icon fa fa-angle-down"></i></th> <th class="date-modified sortable">Modified <i class="icon fa fa-angle-down"></i></th> <th class="type sortable">Type <i class="icon fa fa-angle-down"></i></th> <th class="owner sortable">Owened By <i class="icon fa fa-angle-down"></i></th> <th class="sharing sortable">Sharing <i class="icon fa fa-angle-down"></i></th> <th class="permission sortable">Permissions <i class="icon fa fa-angle-down"></i></th> <th class="add-menu"> </th> </tr> </thead> <tbody> <tr> <!-- Table Row Start --> <td class="preview"> <span class="type-icon"><img src="/atomic-core/img/resources/icon/media.svg" /></span> <span class="file-preview"> <img src="/atomic-core/img/resources/images/costa-rica.jpg" /> </span> </td> <td class="name-value">Costa Rica</td> <td class="date-modified-value">10/1/18 </td> <td class="type-value">Photo</td> <td class="owner-value">Me</td> <td class="sharing-value">Full Access</td> <td class="permission-value">8 People</td> <td class="menu-additional"><i class="icon fa fa-ellipsis-v"></i></td> </tr> <!-- /Table Row End --> <tr> <!-- Table Row Start --> <td class="preview"> <span class="type-icon"><img src="/atomic-core/img/resources/icon/contacts.svg" /></span> <span class="file-preview"> <img src="/atomic-core/img/resources/images/user-avatar-1.png" /> </span> </td> <td class="name-value">Ea Tipene</td> <td class="date-modified-value">10/1/18</td> <td class="type-value">Person</td> <td class="owner-value">Me</td> <td class="sharing-value">3 Apps</td> <td class="permission-value"></td> <td class="menu-additional"><i class="icon fa fa-ellipsis-v"></i></td> </tr> <!-- /Table Row End --> <tr> <!-- Table Row Start --> <td class="preview"> <span class="type-icon"><img src="/atomic-core/img/resources/icon/chat.svg" /></span> <span class="file-preview"> <img src="/atomic-core/img/resources/images/user-avatar-3.png" /> </span> </td> <td class="name-value">Thomas Buchi</td> <td class="date-modified-value">10/1/18</td> <td class="type-value">Chat</td> <td class="owner-value">Me</td> <td class="sharing-value">3 Apps</td> <td class="permission-value"></td> <td class="menu-additional"><i class="icon fa fa-ellipsis-v"></i></td> </tr> <!-- /Table Row End --> </tbody> </table> </div>
Copy
Copy
Edit
/* scss/Molecules/_Table.scss */ table { width: 100%; border-collapse: collapse; font-size: 0.9rem; overflow: scroll; thead { background: #fff; tr { text-align: left; color: $secondary-text-color; padding: 0 1em; th { padding: 1em; border-top: 1px solid rgba($tertiary-color-1, 0.8); border-bottom: 1px solid rgba($tertiary-color-1, 0.8); white-space: nowrap; width: 1%; &.sortable { cursor: pointer; } &.name-value { padding-left: 0; } } } } tbody { padding: 0 1em; tr { color: $secondary-text-color; cursor: pointer; transition: all 0.5s ease-in-out; padding: 0 1em; border-bottom: 1px solid rgba($tertiary-color-1, 0.8); &:hover { background: rgba($primary-color,0.2); } td { padding: 1em; white-space: nowrap; width: 1%; span { &.file-preview { text-align: center; img { display: block; margin: 0 auto; text-align: center; max-width: 30px; height: 30px; width: 100%; @include borderRadius(2px); } } } &.menu-additional { text-align: center; margin: 0 auto; min-width: 1em; i { text-align: center; margin: 0 auto; display: block; } } &.preview { width: 55px; white-space: nowrap; display: block; padding: 1em 0; span { &.type-icon { position: relative; margin-bottom: 0; top: 1em; left: .5em; width: 10px; margin-top: -21px; display: block; img { min-width: 18px; width: 100%; @include box-shadow(); } } } } &.name-value { max-width: 250px; min-width: 150px; padding-left: 0; } } } } } table.fixed-col__table { thead { tr { th { &.preview { width: 55px; border-bottom: 1px solid rgba($tertiary-color-1, 0.8); height: 45px; span { &.type-icon { position: relative; margin-bottom: 0; top: 1em; left: .5em; width: 10px; margin-top: -21px; display: block; img { min-width: 18px; width: 100%; @include box-shadow(); } } } &.fixed-col__item { position: absolute; top: auto; background: #fff; z-index: 100; } } &.name { border-right: 1px solid rgba($tertiary-color-1, 0.8); border-bottom: 1px solid rgba($tertiary-color-1, 0.8); top: auto; width: 200px; left: 55px; padding: 1em 0; &.fixed-col__item { position: absolute; top: auto; background: #fff; z-index: 100; } } } } } tbody { tr { td.fixed-col__item { position: absolute; top: auto; background: #fff; z-index: 100; &.preview { width: 55px; border-bottom: 1px solid rgba($tertiary-color-1, 0.8); height: 50px; span { &.type-icon { position: relative; margin-bottom: 0; top: 1em; left: .5em; width: 10px; margin-top: -21px; display: block; img { min-width: 18px; width: 100%; @include box-shadow(); } } } } &.name-value { width: 200px; padding-left: 1em; left: 55px; border-right: 1px solid rgba($tertiary-color-1, 0.8); border-right: 1px solid rgba($tertiary-color-1, 0.8); } } } } } .fixed-col { position: absolute; top: auto; background: #fff; z-index: 100; &__item { position: absolute; top: auto; background: #fff; z-index: 100; } } .fixed-table-wrap { max-width: 400px; /* width value for example purpose only, change or remove to suit your needs */ width: 100%; display: block; position: relative; .fixed-table-scroller { left: 350px; overflow: scroll; padding-bottom: 5px; width: 500px; } }

Notifications   

Banner Notifications

Toaster/Popup Notifications

Robust

Notification Message

This is a toaster/popup notification.

Notification Message

This is a toaster/popup notification.

Error Notification Message

This is an toaster/popup error notification.

Simple

This is a toaster/popup notification.

This is a toaster/popup notification.

This is an toaster/popup error notification.

Copy
Edit
<!-- components/Molecules/Notifications.php --> <h4>Banner Notifications</h4> <section class="banner-wrap--primary banner"> <div class="banner-wrap__content">Notification Message</div> <div class="banner-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="banner-wrap--secondary banner"> <div class="banner-wrap__content">Notification Message</div> <div class="banner-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="banner-wrap--warning banner"> <div class="banner-wrap__content"><i class="icon fa fa-exclamation-circle"> </i> Notification Message</div> <div class="banner-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="banner-wrap--error banner"> <div class="banner-wrap__content"><i class="icon fa fa-exclamation-circle"> </i> Error Notification Message</div> <div class="banner-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <h4>Toaster/Popup Notifications</h4> <h5>Robust</h5> <section class="grid grid__three-column demo"> <section class="toaster-wrap--primary toaster"> <div class="toaster-wrap__content"> <p class="content__title">Notification Message</p> <p class="content__message">This is a toaster/popup notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="toaster-wrap--warning toaster"> <div class="toaster-wrap__content"> <p class="content__title"><i class="icon fa fa-exclamation-circle"> </i> Notification Message</p> <p class="content__message">This is a toaster/popup notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="toaster-wrap--error toaster"> <div class="toaster-wrap__content"> <p class="content__title"><i class="icon fa fa-exclamation-circle"> </i> Error Notification Message</p> <p class="content__message">This is an toaster/popup error notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> </section> <h5>Simple</h5> <section class="grid grid__three-column demo"> <section class="toaster-wrap--primary toaster"> <div class="toaster-wrap__content"> <p class="content__message">This is a toaster/popup notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="toaster-wrap--warning toaster"> <div class="toaster-wrap__content"> <p class="content__message"><i class="icon fa fa-exclamation-circle"> </i> This is a toaster/popup notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> <section class="toaster-wrap--error toaster"> <div class="toaster-wrap__content"> <p class="content__message"><i class="icon fa fa-exclamation-circle"> </i> This is an toaster/popup error notification.</p> </div> <div class="toaster-wrap__dismiss"><i class="fa fa-times"></i></div> </section> </section>
Copy
Copy
Edit
/* scss/Molecules/_Notifications.scss */ /* Banner Notification Styles */ .banner-wrap { width: 100%; display: flex; padding: 1em; flex-direction: row; justify-content: space-between; margin-bottom: 1em; box-sizing: border-box; &--primary { background-color: $primary-color; color: #fff; } &--secondary { background-color: $secondary-color; color: #fff; } &--tertiary { background-color: $tertiary-color; color: #fff; } &--tertiary-1 { background-color: $tertiary-color-1; } &--tertiary-2{ background-color: $tertiary-color-2; } &--tertiary-3 { background-color: $tertiary-color-3; } &--error { background-color: $error-color; color: #fff; } &--warning { background-color: $warning-color; color: #fff; } /* Gradients */ &--primary-gradient { @include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%); } } .banner, .banner-wrap { width: 100%; display: flex; padding: 1em; flex-direction: row; justify-content: space-between; margin-bottom: 1em; box-sizing: border-box; } /* Toaster Notification Styles */ .toaster-wrap, .toaster { display: flex; padding: 1em; flex-direction: row; justify-content: space-between; margin-bottom: 1em; @include borderRadius(4px); @include box-shadow(); width: 100%; cursor: pointer; box-sizing: border-box; &:first-of-type { margin-left: 0; } } .toaster-wrap { transition: all 0.25s ease-in-out; cursor: pointer; box-sizing: border-box; &--primary { background-color: rgba($primary-color, 0.9); color: #fff; transition: all 0.25s ease-in-out; &:hover { background-color: rgba($primary-color, 1); transition: all 0.25s ease-in-out; } } &--secondary { background-color:rgba($secondary-color, .9); color: #fff; transition: all 0.25s ease-in-out; &:hover { background-color: rgba($secondary-color, 1); transition: all 0.25s ease-in-out; } } &--tertiary { background-color: rgba($tertiary-color, .9); color: #fff; transition: all 0.25s ease-in-out; &:hover { background-color: rgba($tertiary-color, 1); transition: all 0.25s ease-in-out; } } &--tertiary-1 { background-color: rgba($tertiary-color-1, .9); transition: all 0.25s ease-in-out; &:hover { background-color: rgba($tertiary-color-1, 1); transition: all 0.25s ease-in-out; } } &--tertiary-2{ background-color: rgba($tertiary-color-2, 0.9); transition: all 0.25s ease-in-out; &:hover { background-color: rgba($tertiary-color-2, 1); transition: all 0.25s ease-in-out; } } &--tertiary-3 { background-color: rgba($tertiary-color-3, 0.9); transition: all 0.25s ease-in-out; &:hover { background-color: rgba($tertiary-color-3, 1); transition: all 0.25s ease-in-out; } } &--error { background-color: $error-color; transition: all 0.25s ease-in-out; &:hover { background-color: rgba($error-color, 1); transition: all 0.25s ease-in-out; } } &--warning { background-color: $warning-color; transition: all 0.25s ease-in-out; &:hover { background-color: rgba($warning-color, 1); transition: all 0.25s ease-in-out; } } } .toaster-wrap { @include borderRadius(4px); @include box-shadow(); box-sizing: border-box; &__content { color: #fff; .content__title { font-weight: bold; text-transform: uppercase; margin: 0; margin-bottom: 0.25em; color: #fff; } .content__message { margin: 0; font-size: 0.9rem; color: #fff; } } } .banner-wrap__dismiss, .banner-wrap__dismiss i, .toaster-wrap__dismiss, .toaster-wrap__dismiss i { color: #fff; opacity: 0.7; transition: all 0.25s ease-in-out; cursor: pointer; &:hover { transition: all 0.25s ease-in-out; opacity: 1; } } /* Demo Display Styles for Toaster Wrap */ section.grid.grid__three-column.demo { grid-gap: 1%; } .banner-wrap { box-sizing: border-box; &--footer { box-sizing: border-box; position: fixed; bottom: 0; margin: 0; left: 0; background: $primary-color; color: #fff; z-index: 9999; padding: 0; box-shadow: 0 0 3px 1px rgba(0,0,0,0.1); > .banner-wrap__content { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; > i.icon { font-size: 1.5rem; margin-right: .5em; } > a { color: #fff; text-decoration: none; text-transform: uppercase; width: 100%; padding: 1em; text-align: center; margin: 0 auto; transition: all 0.25s ease-in-out; &:hover { background: darken($primary-color, 2%); transition: all 0.25s ease-in-out; } } } } }