Atoms

Card   

Card/Tiles

This is a card.
This is a card.
Copy
Edit
<!-- components/Atoms/Card.php --> <h4>Card/Tiles</h4> <section class="grid grid__two-column demo"> <div class="card">This is a card.</div> <div class="card">This is a card.</div> </section>
Copy
Copy
Edit
/* scss/Atoms/_Card.scss */ .card { display: flex; @include borderRadius(4px); @include box-shadow(0, 1px, 5px, rgba(0,0,0,0.2)); align-items: center; flex-wrap: wrap; flex-direction: column; justify-content: center; padding: 1em 0; border: 1px solid rgba($primary-color, 0); transition: all .25s ease-in-out; width: 100%; &.interactive { cursor: pointer; &:hover { border: 1px solid rgba($primary-color, 1); transition: all .25s ease-in-out; } } }
Copy
Edit
/* js/Card.js */

Range-Slider   

Range Slider

Copy
Edit
<!-- components/Atoms/Range-Slider.php --> <h4> Range Slider </h4> <div class="input-wrap"> <input type="range" id="range1" value="25"> </div>
Copy
Copy
Edit
/* scss/Atoms/_Range-Slider.scss */ input[type="range"] { @include appearance(none); height: 2px; @include borderRadius(1px); -webkit-box-sizing: content-box; box-sizing: content-box; &::-webkit-slider-thumb { @include appearance(none); background-color: #fff; height: 20px; width: 20px; border-radius: 50em; box-shadow: 0 0 1px 1px rgba(0,0,0,0.2); } } $track-w: 100%; $track-h: .25em; $thumb-d: 1.5em; $track-c: #ccc; $fill-c: blue; @mixin track($fill: 0) { box-sizing: border-box; border: none; width: $track-w; height: $track-h; background: $track-c; @include borderRadius(1em); outline: none; @if $fill == 1 { .js & { background: transparent; } } &:focus, &:active { outline: none; border: none; } } @mixin fill() { display: block; background: rgba($secondary-color,0.8); } @mixin thumb() { box-sizing: border-box; border: 1px solid rgba(white, 0.0); width: $thumb-d; height: $thumb-d; @include borderRadius(50%); background: #fff; cursor: pointer; @include box-shadow($x-axis:0px, $y-axis:0px, $blur: 2px, $color:rgba(0,0,0,0.3)); transition: all 0.25s ease-in-out; &:hover { border: 1px solid rgba($secondary-color, 1); transition: all 0.25s ease-in-out; } &:focus { outline: none; } } [type='range'] { &, &::-webkit-slider-thumb { @include appearance(none); } --range: calc(var(--max) - var(--min)); --ratio: calc((var(--val) - var(--min))/var(--range)); --sx: calc(.5*#{$thumb-d} + var(--ratio)*(100% - #{$thumb-d})); margin: 0; padding: 0; width: $track-w; height: $thumb-d; background: transparent; font: 1em/1 arial, sans-serif; &::-webkit-slider-runnable-track { @include track(1) } &::-moz-range-track { @include track } &::-ms-track { @include track } &::-moz-range-progress { @include fill } &::-ms-fill-lower { @include fill } &::-webkit-slider-thumb { margin-top: .5*($track-h - $thumb-d); @include thumb } &::-moz-range-thumb { @include thumb } &::-ms-thumb { margin-top: 0; @include thumb } &::-ms-tooltip { display: none } }
Copy
Edit
/* js/Range-Slider.js */

Toggle   

Toggle Switch

Copy
Edit
<!-- components/Atoms/Toggle.php --> <h4> Toggle Switch </h4> <article class="row-wrap"> <label class="switch"> <input type="checkbox"><!-- Default Toggle Switch: Interactive from 'off' position --> <span class="slider round"></span> </label> <label class="switch"> <input type="checkbox" checked><!-- Checked Toggle Switch: Interactive from 'on' position --> <span class="slider round"></span> </label> <label class="switch"> <input type="checkbox" disabled checked><!-- Disabled Checked Toggle Switch: Permanently 'on' --> <span class="slider round"></span> </label> <label class="switch"> <input type="checkbox" disabled><!-- Disabled Toggle Switch: Permanently 'off' --> <span class="slider round"></span> </label> </article>
Copy
Copy
Edit
/* scss/Atoms/_Toggle.scss */ label.switch { position: relative; display: inline-block; min-width: 50px; height: 15px; margin: 1em; input[type="checkbox" i], input[type="checkbox"] { @include appearance(none); opacity: 0; width: 0; height: 0; } span.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } span.slider:before { position: absolute; content: ""; height: 1.5em; width: 1.5em; left: 0; bottom: -.3em; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1); background-color: #fff; -webkit-transition: .4s; transition: .4s; } input[type="checkbox"]:checked + .slider { background-color: $link-active-color; } input[type="checkbox"]:focus + .slider { } input[type="checkbox"]:checked + .slider:before { -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); } /* Rounded sliders */ .slider.round { @include borderRadius(34px); } .slider.round:before { @include borderRadius(34px); } } input[type="checkbox"]:disabled + .slider{ opacity: .5; cursor: initial; pointer-events: none; }
Copy
Edit
/* js/Toggle.js */

Radio   

Radio Selectors

Copy
Edit
<!-- components/Atoms/Radio.php --> <h4> Radio Selectors </h4> <div class="input-wrap"> <label class="radio" for="r1"><input type="radio" id="r1" name="group1" > Option 1</label> <label class="radio" for="r2"disabled><input type="radio" id="r2" name="group1" disabled > Option 2 Disabled</label> <label class="radio" for="r3" ><input type="radio" name="group1" id="r3"> Option 3</label> <label class="radio" for="r4" ><input type="radio" name="group1" id="r4"> Option 4</label> </div>
Copy
Copy
Edit
/* scss/Atoms/_Radio.scss */ label.radio { display: flex; align-items: center; padding: 0; input[type="radio"] { @include appearance(none); border: 1px solid $tertiary-color-1; width: 2em; height: 2em; margin-right: 1em; cursor: pointer; @include borderRadius(20em); &:hover { border-color: $link-active-color; } &:checked { border-color: $link-active-color; color: $link-active-color; font-weight: bold; &::before { content: " "; align-self: center; position: relative; display: inline-block; width: 12px; height: 12px; @include borderRadius(50em); background-color: $link-active-color; } } &:checked+label { font-weight: 700; } } &[disabled] { opacity: 0.5; cursor: initial; } } input[type="radio"] { @include appearance(none); border: 1px solid $tertiary-color-1; width: 2em; height: 2em; margin-right: 1em; cursor: pointer; @include borderRadius(20em); &:hover { border-color: $link-active-color; } &:checked { border-color: $link-active-color; color: $link-active-color; font-weight: bold; &::before { content: " "; align-self: center; position: relative; display: block; width: 12px; height: 12px; @include borderRadius(50em); background-color: $link-active-color; top: 17%; left: 19%; } } }
Copy
Edit
/* js/Radio.js */

Checkbox   

Checkboxes

Copy
Edit
<!-- components/Atoms/Checkbox.php --> <h4> Checkboxes </h4> <div class="input-wrap"> <label class="checkbox"><input type="checkbox" > Default </label> <label class="checkbox" disabled><input type="checkbox" > Disabled </label> <label class="checkbox"><input type="checkbox" checked> Checked </label> <label class="checkbox"><input type="checkbox" intermediate> Intermediate</label> </div>
Copy
Copy
Edit
/* scss/Atoms/_Checkbox.scss */ label.checkbox { display: flex; align-items: center; input[type="checkbox"] { @include appearance(none); border: 1px solid $tertiary-color-1; width: 2em; height: 2em; margin-right: 1em; cursor: pointer; @include borderRadius(1px); &:hover { border-color: $link-active-color; } &:checked { border-color: $link-active-color; color: $link-active-color; &::before { color: $link-active-color; content: "\f00c"; font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/ align-self: center; position: relative; font-size: 1.5em; display: inline-block; top: 0.1em; left: 0.1em; } } &[intermediate] { border-color: $link-active-color; color: $link-active-color; &::before { color: $link-active-color; content: "\f068"; font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/ align-self: center; position: relative; font-size: 1.5em; display: inline-block; top: 0.1em; left: .2em; } } } &[disabled] { opacity: 0.5; cursor: initial; pointer-events: none; } }

Select   

Select List

Copy
Edit
<!-- components/Atoms/Select.php --> <h4>Select List</h4> <div class="input-wrap"><label>Label:</label> <div class="select-wrap custom-select"><select type="dropdown" placeholder="Please choose..." > <option value="1" name="group1" disabled>Please choose...</option> <option value="1" name="group1" >Alabama</option> <option value="1" name="group1" >Alaska</option> <option value="1" name="group1" >Arizona</option> <option value="1" name="group1" >Arkansas</option> </select></div> </div> <div class="input-wrap"><label>Label:</label> <div class="select-wrap custom-select " readonly><select readonly="" type="dropdown" placeholder="Please choose..." > <option value="1" name="group1" disabled>Please choose...</option> <option value="1" name="group1" >Alabama</option> <option value="1" name="group1" >Alaska</option> <option value="1" name="group1" >Arizona</option> <option value="1" name="group1" >Arkansas</option> </select></div> </div>
Copy
Copy
Edit
/* scss/Atoms/_Select.scss */ .select-wrap { width: 100%; display: flex; align-content: center; background: #fff; &::after { color: $tertiary-color-1; content: "\f107"; font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/ align-self: center; position: relative; font-size: 2em; top: 0; left: -1em; } select { @include appearance(none); background: #fff; outline: none; color: #fff; &:active, &:focus { border-color: $link-active-color; } option { @include appearance(menulist); color: #fff; background: blue; } } }
Copy
Edit
/* js/Select.js */ var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML === this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt === y[i]) { arrNo.push(i); } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect);

Input   

Text Input

Copy
Edit
<!-- components/Atoms/Input.php --> <h4>Text Input</h4> <section class="grid grid__two-column demo"> <section> <div class="input-wrap"><label>Label:</label><input type="text" placeholder="First Name"/></div> <div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" active/></div> <div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" invalid/></div> <div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" readonly/></div> </section> <section> <div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-lock"></span></label><input readonly="" type="text" placeholder="Placeholder Text" /></div> <div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-lock"></span></label><input type="text" placeholder="Placeholder Text"/></div> <div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-user"></span></label><input type="text" placeholder="Placeholder Text" active/></div> <div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-file"></span></label><input type="text" placeholder="Placeholder Text" invalid/></div> </section> </section>
Copy
Copy
Edit
/* scss/Atoms/_Input.scss */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid $tertiary-color-1; background: none; font-size: .8em; padding: .5em 0; text-indent: .5em; @include borderRadius(4px); &::after { content:"\f107"; font-family: FontAwesome; font-size: 11px; color:#aaa; right:8px; top:3px; padding:0 0 1px; position:absolute; pointer-events:none; } &::before { content:"\f107"; font-family: FontAwesome; right:4px; top:0px; width:20px; height:16px; background:#fff; position:absolute; pointer-events:none; display:block; } } input, select, textarea { @include appearance(none); width: 100%; font-family: $primary-font-stack; outline: none; transition: all 0.25s ease-in-out; } /*input:read-only { border: none; &:focus { outline: none; } } */ input, textarea { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; font-family: $primary-font-stack; outline: none; transition: all 0.25s ease-in-out; &:disabled, &[disabled] { pointer-events: none; } &[type="text"] { border: 1px solid $tertiary-color-1; font-size: 0.8em; padding: 0.5em 0; text-indent: 0.75em; border-radius: 4px; &:active, &[active], &:focus { border-color: $link-active-color; } &:invalid, &[invalid] { border-color: $error-color; } &::placeholder { color: rgba(0,0,0,0.3); } } } .read-only, [readonly] { border: none; pointer-events: none; &:focus, :active { outline: none; border: none; pointer-events: none; } } .input-wrap { display: flex; flex-wrap: wrap; max-width: 95%; margin: 1em 0; &--inline { flex-wrap: nowrap !important; align-items: center; label { margin-right: .5em; line-height: 1; height: auto; span.icon, i.icon { font-size: 1rem; } } } label { font-size: .8em; color: $primary-text-color; padding-bottom: 0.3em; } input, select, textarea { @include appearance(none); width: 100%; font-family: $primary-font-stack; outline: none; transition: all 0.25s ease-in-out; &[type="text"] { border: 1px solid $tertiary-color-1; font-size: .8em; padding: .5em 0; text-indent: .5em; @include borderRadius(4px); &:active, &[active], &:focus { border-color: $link-active-color; } &:invalid, &[invalid] { border-color: $error-color; } } } } input, select, textarea, input[type="text"], input[type="email"], input[type="number"] { &.read-only, &[readonly] { border: none ; pointer-events: none; background: none; &:focus, :active { outline: none; border: none; pointer-events: none; } } } .input-wrap, .input-wrap--inline, .select-wrap, .select-wrap--inline, .custom-select { input, select, textarea, input[type="text"], input[type="email"], input[type="number"] { &.read-only, &[readonly] { border: none; pointer-events: none; &:focus, :active { outline: none; border: none; pointer-events: none; } } } &.read-only, &[readonly] { &::after { content: ""; display: none; } &::before { content: ""; display: none; } } }

Pills   

Pills can be utilized for both linked-data tags/nodes as well as for utilization within filtering components

Pills

Pill Filters

Copy
Edit
<!-- components/Atoms/Pills.php --> <h4>Pills</h4> <button type="button" class="pill"><label>Tag:</label> Default</button> <button type="button" class="pill" hover><label>Tag:</label> Hover</button> <button type="button" class="pill" active><label>Tag:</label> Active <i class="fa-icon-add-circle"></i></button> <button type="button" class="pill" disabled><label>Tag:</label> Disabled </button> <h4>Pill Filters</h4> <button type="button" class="pill filter"><img src="atomic-core/img/resources/icon/Person.svg"> People</button> <button type="button" class="pill filter" hover><img src="atomic-core/img/resources/icon/Chat.svg"> Chats</button> <button type="button" class="pill filter" active><img src="atomic-core/img/resources/icon/Calendar.svg"> Events</button> <button type="button" class="pill filter" disabled><img src="atomic-core/img/resources/icon/media.svg"> Photos</button>
Copy
Copy
Edit
/* scss/Atoms/_Pills.scss */ button { @include appearance(none); color: $primary-text-color; border: 1px solid $tertiary-color-1; cursor: pointer; font-size: .8em; padding: 0.5em 1em; transition: 0.25s all ease-in-out; outline: none; &.pill { @include borderRadius(100px); } &:hover, &[hover] { border-color: $link-active-color; transition: 0.25s all ease-in-out; color: $link-active-color; } &[disabled] { opacity: 0.5; } &:active, &[active], &.active { background: $link-active-color; border-color: $link-active-color; color: #fff; outline: none; } &.filter { align-items: center; justify-content: center; background: lighten($tertiary-color-1, 5%); @include borderRadius(4px); padding: 0.25em 1em; img { max-width: 13px; width: 100%; padding-right: 0.2em; margin-top: 1px; } &:hover, &[hover] { border-color: $link-active-color; transition: 0.25s all ease-in-out; color: $primary-text-color; } &[disabled] { opacity: 0.5; } &:active, &[active], &.active { border-color: $link-active-color; transition: 0.25s all ease-in-out; color: $link-active-color; background: lighten($link-active-color, 35%); } } }

Buttons   

The button tag defines a clickable button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.

Default/Generic Buttons

Link Button Link Button Active

Filled Color Buttons

Copy
Edit
<!-- components/Atoms/Buttons.php --> <div> <h4>Default/Generic Buttons</h4> <!-- Links styled as buttons --> <button type="button">Default</button> <button type="button" hover>Hover</button> <button type="button" active>Active</button> <button type="button" disabled>Disabled</button> <!-- Links styled as buttons --> <a href="" class="ids-link">Link Button</a> <a href="" class="ids-button" active>Link Button Active</a> </div> <div> <h4>Filled Color Buttons</h4> <div class="grid grid__two-column demo"> <a href="" class="ids-link-filled ids-link-filled--primary">Filled Button</a> <a href="" class="ids-button-filled ids-button-filled--secondary">Filled Button</a> <a href="" class="ids-link-stroke ids-link-stroke--primary">Button</a> <a href="" class="ids-button-stroke ids-button-stroke--secondary">Button</a> </div> </div>
Copy
Copy
Edit
/* scss/Atoms/_Buttons.scss */ /* Default button Styles */ button, link, .ids-button, .ids-link { @include appearance(none); font-family: $primary-font-stack; color: $primary-text-color; border: 1px solid $tertiary-color-1; @include borderRadius(4px); cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; &:hover, &[hover] { border-color: $link-active-color; transition: 0.25s all ease-in-out; color: $link-active-color; } &[disabled] { opacity: 0.5; cursor: initial; &:hover { border-color: $tertiary-color-1; transition: 0.25s all ease-in-out; color: $primary-text-color; } } &:active, &[active] { background: $link-active-color; border-color: $link-active-color; color: #fff; outline: none; } } /* Filled button Styles */ .ids-button-filled, .ids-link-filled { height: 40px; width: 100%; @include borderRadius(4px); color: #ffffff; text-transform: uppercase; font-size: 12px; letter-spacing: 1.07px; line-height: 17px; margin: 0 0 16px 0; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: all 0.5s ease-in-out; font-family: $primary-font-stack; font-weight: 700; &--primary { background: $primary-color; &:hover { background: lighten($primary-color, 5%); } } &--secondary { background-color: $secondary-color; &:hover { background: lighten($secondary-color, 5%); } } &--tertiary { background-color: $tertiary-color; &:hover { background: lighten($tertiary-color, 5%); } } &--tertiary-1 { background-color: $tertiary-color-1; &:hover { background: lighten($tertiary-color-1, 5%); } } &--tertiary-2{ background-color: $tertiary-color-2; &:hover { background: lighten($tertiary-color-2, 5%); } } &--tertiary-3 { background-color: $tertiary-color-3; &:hover { background: lighten($tertiary-color-3, 5%); } } /* Gradients */ &--primary-gradient { @include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%); } &:hover { filter: opacity(95%); text-decoration: none; cursor: pointer; transition: all 0.5s ease-in-out; } } /* Outline/Stroke Button Styles */ .ids-button-stroke, .ids-link-stroke { height: 40px; width: 100%; @include borderRadius(4px); text-transform: uppercase; font-size: 12px; letter-spacing: 1.07px; line-height: 16px; margin: 0 0 16px 0; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: all 0.5s ease-in-out; border-width: 1px; border-style: solid; border-color: $tertiary-color-1; background: rgba(255,255,255,0); font-weight: 700; &--primary { color: $primary-color; border-color: $primary-color; &:hover { background: rgba($primary-color, 1); color: #fff; } } &--secondary { color: $secondary-color; border-color: $secondary-color; &:hover { background: rgba($secondary-color, 1); color: #fff; } } &--tertiary { color: $tertiary-color; border-color: $tertiary-color; &:hover { background: rgba($tertiary-color, 1); color: #fff; } } &--tertiary-1 { background-color: $tertiary-color-1; &:hover { background: lighten($tertiary-color-1, 5%); } } &--tertiary-2{ background-color: $tertiary-color-2; &:hover { background: lighten($tertiary-color-2, 5%); } } &--tertiary-3 { background-color: $tertiary-color-3; &:hover { background: lighten($tertiary-color-3, 5%); } } /* Gradients */ &--primary-gradient { @include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%); } }