Import pattern library #4

Merged
glyph merged 1 commits from add_pattern_library into main 2021-10-26 13:33:21 +00:00
30 changed files with 2626 additions and 0 deletions
Showing only changes of commit c809c536d9 - Show all commits

2
peach-patterns/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
notes
system_usage.html

19
peach-patterns/README.md Normal file
View File

@ -0,0 +1,19 @@
# peach-patterns
A pattern library for building and maintaining PeachCloud user interfaces.
`index.html` currently serves as the primary aggregator and displayer of patterns in the form of atoms and molecules (see [Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/) for more information on this approach to building design systems).
`css/css_class_names` contains a simple list of all the custom css class names used in the PeachCloud design system. This list builds on `css/_variables.css`, which contains css variables drawn from the [Tachyons](http://tachyons.io/) library.
`css/peachcloud.css` contains all the custom css class definitions used in the PeachCloud design system.
_Note: This is a work-in-progress._
### Setup
For now you can simply clone the repo and open the `index.html` file in your browser to view the pattern library.
### Licensing
AGPL-3.0

View File

@ -0,0 +1,177 @@
/*
VARIABLES
*/
@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);
:root {
--sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
--serif: georgia, serif;
--code: consolas, monaco, monospace;
--font-size-headline: 6rem;
--font-size-subheadline: 5rem;
--font-size-1: 3rem;
--font-size-2: 2.25rem;
--font-size-3: 1.5rem;
--font-size-4: 1.25rem;
--font-size-5: 1rem;
--font-size-6: .875rem;
--font-size-7: .75rem;
--letter-spacing-tight:-.05em;
--letter-spacing-1:.1em;
--letter-spacing-2:.25em;
--line-height-solid: 1;
--line-height-title: 1.25;
--line-height-copy: 1.5;
--measure: 30em;
--measure-narrow: 20em;
--measure-wide: 34em;
--spacing-none: 0;
--spacing-extra-small: .25rem;
--spacing-small: .5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;
--spacing-copy-separator: 1.5em;
--height-1: 1rem;
--height-2: 2rem;
--height-3: 4rem;
--height-4: 8rem;
--height-5: 16rem;
--width-1: 1rem;
--width-2: 2rem;
--width-3: 4rem;
--width-4: 8rem;
--width-5: 16rem;
--max-width-1: 1rem;
--max-width-2: 2rem;
--max-width-3: 4rem;
--max-width-4: 8rem;
--max-width-5: 16rem;
--max-width-6: 32rem;
--max-width-7: 48rem;
--max-width-8: 64rem;
--max-width-9: 96rem;
--border-radius-none: 0;
--border-radius-1: .125rem;
--border-radius-2: .25rem;
--border-radius-3: .5rem;
--border-radius-4: 1rem;
--border-radius-circle: 100%;
--border-radius-pill: 9999px;
--border-width-none: 0;
--border-width-1: .125rem;
--border-width-2: .25rem;
--border-width-3: .5rem;
--border-width-4: 1rem;
--border-width-5: 2rem;
--box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );
--box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );
--black: #000;
--near-black: #111;
--dark-gray:#333;
--mid-gray:#555;
--gray: #777;
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
--white: #fff;
--transparent: transparent;
--black-90: rgba(0,0,0,.9);
--black-80: rgba(0,0,0,.8);
--black-70: rgba(0,0,0,.7);
--black-60: rgba(0,0,0,.6);
--black-50: rgba(0,0,0,.5);
--black-40: rgba(0,0,0,.4);
--black-30: rgba(0,0,0,.3);
--black-20: rgba(0,0,0,.2);
--black-10: rgba(0,0,0,.1);
--black-05: rgba(0,0,0,.05);
--black-025: rgba(0,0,0,.025);
--black-0125: rgba(0,0,0,.0125);
--white-90: rgba(255,255,255,.9);
--white-80: rgba(255,255,255,.8);
--white-70: rgba(255,255,255,.7);
--white-60: rgba(255,255,255,.6);
--white-50: rgba(255,255,255,.5);
--white-40: rgba(255,255,255,.4);
--white-30: rgba(255,255,255,.3);
--white-20: rgba(255,255,255,.2);
--white-10: rgba(255,255,255,.1);
--white-05: rgba(255,255,255,.05);
--white-025: rgba(255,255,255,.025);
--white-0125: rgba(255,255,255,.0125);
--dark-red: #e7040f;
--red: #ff4136;
--light-red: #ff725c;
--orange: #ff6300;
--gold: #ffb700;
--yellow: #ffd700;
--light-yellow: #fbf1a9;
--purple: #5e2ca5;
--light-purple: #a463f2;
--dark-pink: #d5008f;
--hot-pink: #ff41b4;
--pink: #ff80cc;
--light-pink: #ffa3d7;
--dark-green: #137752;
--green: #19a974;
--light-green: #9eebcf;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fffceb;
--washed-red: #ffdfdf;
/* PEACHCLOUD-SPECIFIC VARIABLES */
--primary: var(--light-green);
--secondary: var(--near-white);
--success: var(--green);
--info: var(--blue);
--warning: var(--orange);
--danger: var(--red);
--light: var(--light-gray);
--dark: var(--near-black);
/* we need to add shades for each accent colour
*
* --info-100
* --info-200
* --info-300 -> var(--blue)
* --info-400
* --info-500
*/
}

View File

@ -0,0 +1,80 @@
bottom-left
bottom-rightcard
button
card
card-container
card-grid
card-text
center
center-text
center-vert
circle
circle-success
circle-warning
circle-error
degree-0
degree-45
degree-90
degree-135
degree-180
degree-225
degree-270
degree-315
flash-message
flex-grid
font-failure
font-gray
font-light-gray
font-near-black
font-success
font-warning
form
grid-column-1
grid-column-2
grid-column-3
icon
icon-100
icon-active
icon-inactive
input
label-small
label-medium
label-large
link
list
list-container
list-icon
list-item
list-label
list-text
meter-gauge
nav-bar
nav-icon
nav-icon-left
nav-icon-right
nav-item
push-right
radial-center-circle
radial-circle
radial-link-position
radial-menu
stack
switch
switch-icon-left
switch-icon-right
slider
title-medium
three-grid
three-grid-icon-1
three-grid-icon-2
three-grid-icon-3
three-grid-label-1
three-grid-label-2
three-grid-label-3
top-left
top-right
two-grid
quarter
quartered-circle
quarter-icon
quarter-link

View File

@ -0,0 +1,871 @@
@import url('_variables.css');
/* ------------------------------ *\
* peachcloud.css
*
* Index
* - ALIGNMENT
* - BUTTONS
* - CARDS
* - CAPSULES
* - CIRCLES
* - COLORS
* - GRIDS
* - HTML
* - FLASH MESSAGE
* - FONTS
* - ICONS
* - INPUTS
* - LABELS
* - LINKS
* - LISTS
* - METERS
* - NAVIGATION
* - RADIAL MENU
* - SWITCHES / SLIDERS
* - PARAGRAPHS
*
\* ------------------------------ */
/*
* ALIGNMENT
*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.center-text {
text-align: center;
}
.center-vert {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.push-right {
margin-left: auto;
padding-right: 0;
}
.top-left {
/* place-self combines align-self and justify-self */
place-self: end center;
}
@media only screen and (min-width: 600px) {
.top-left {
place-self: end;
}
}
.top-right {
place-self: end center;
}
@media only screen and (min-width: 600px) {
.top-right {
place-self: end start;
}
}
.top-middle {
place-self: center;
}
@media only screen and (min-width: 600px) {
.top-middle {
padding-bottom: 2rem;
place-self: center;
}
}
.middle {
place-self: center;
grid-column-start: 1;
grid-column-end: 4;
}
.bottom-middle {
place-self: center;
}
@media only screen and (min-width: 600px) {
.bottom-middle {
padding-top: 2rem;
place-self: center;
}
}
.bottom-left {
place-self: start center;
}
@media only screen and (min-width: 600px) {
.bottom-left {
place-self: start end;
}
}
.bottom-right {
place-self: start center;
}
@media only screen and (min-width: 600px) {
.bottom-right {
place-self: start;
}
}
/*
* BUTTONS
*/
.button {
border: 1px solid var(--near-black);
border-radius: var(--border-radius-2);
/* Needed to render inputs & buttons of equal width */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: var(--near-black);
cursor: pointer;
padding: 10px;
text-align: center;
text-decoration: none;
font-size: var(--font-size-5);
font-family: var(--sans-serif);
width: 80%;
margin-top: 5px;
margin-bottom: 5px;
}
.button-primary {
background-color: var(--light-gray);
}
.button-primary:hover {
background-color: var(--primary);
}
.button-primary:focus {
background-color: var(--primary);
outline: none;
}
.button-secondary {
background-color: var(--light-gray);
}
.button-secondary:hover {
background-color: var(--light-silver);
}
.button-secondary:focus {
background-color: var(--light-silver);
outline: none;
}
.button-warning {
background-color: var(--light-gray);
}
.button-warning:hover {
background-color: var(--light-red);
}
.button-warning:focus {
background-color: var(--light-red);
outline: none;
}
/*
* CAPSULES
*/
.capsule {
padding: 1rem;
border: var(--border-width-1) solid;
border-radius: var(--border-radius-3);
background-color: var(--light-gray);
margin-top: 1rem;
margin-bottom: 1rem;
}
/*
* CARDS
*/
.card {
min-height: 50vh;
max-height: 90vh;
position: relative;
width: 100%;
}
@media only screen and (min-width: 600px) {
.card {
min-height: 50vh;
max-height: 90vh;
width: 20rem;
}
}
.card-container {
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
.card-text {
margin: 0;
font-size: var(--font-size-5);
padding-bottom: 0.3rem;
}
.container {
display: grid;
grid-template-columns: 2fr 5fr 2fr;
grid-template-rows: auto;
grid-row-gap: 1rem;
align-items: center;
justify-items: center;
margin-bottom: 1rem;
margin-top: 1rem;
}
/*
* CIRCLES
*/
.circle {
align-items: center;
border-radius: 50%;
box-shadow: var(--box-shadow-3);
display: flex;
justify-content: center;
position: relative;
}
.circle-small {
height: 5rem;
width: 5rem;
}
.circle-medium {
height: 8rem;
width: 8rem;
}
.circle-large {
height: 13rem;
width: 13rem;
}
.circle-success {
background-color: var(--success);
color: var(--white);
font-size: var(--font-size-4);
}
.circle-warning {
background-color: var(--warning);
color: var(--white);
font-size: var(--font-size-4);
}
.circle-error {
background-color: var(--danger);
color: var(--white);
font-size: var(--font-size-4);
}
/* quartered-circle: circle for the center of radial-menu */
.quartered-circle {
width: 100px;
height: 100px;
}
.quarter {
width: 50%;
height: 50%;
}
.quarter-link {
left: 50%;
margin: -2em;
top: 50%;
}
.quarter-icon {
position: absolute;
bottom: 1em;
left: 1.5em;
}
/*
* COLORS
*/
.primary-bg {
background-color: var(--primary);
}
.secondary-bg {
background-color: var(--secondary);
}
.success-bg {
background-color: var(--success);
}
.info-bg {
background-color: var(--info);
}
.warning-bg {
background-color: var(--warning);
}
.danger-bg {
background-color: var(--danger);
}
.light-bg {
background-color: var(--light);
}
.primary-border {
border-color: var(--primary);
}
.success-border {
border-color: var(--success);
}
.info-border {
border-color: var(--info);
}
.warning-border {
border-color: var(--warning);
}
.danger-border {
border-color: var(--danger);
}
.dark-gray-border {
border-color: var(--dark-gray);
}
/*
* GRIDS
*/
.grid {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: 2fr 1fr 2fr;
height: 80vh;
}
.flex-grid {
display: flex;
align-content: space-between;
align-items: baseline;
justify-content: center;
}
.two-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
align-items: center;
justify-content: center;
justify-items: center;
margin-right: 2rem;
margin-left: 2rem;
padding-top: 1.5rem;
padding-bottom: 1rem;
}
.three-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
align-items: center;
justify-content: center;
}
.stack {
display: grid;
align-items: flex-end;
justify-items: center;
justify-content: center;
}
.three-grid-icon-1 {
align-self: center;
grid-column: 1;
grid-row: 1;
justify-self: center;
margin-bottom: 10px;
max-width: 55%;
text-align: center;
}
.three-grid-icon-2 {
align-self: center;
grid-column: 2;
grid-row: 1;
justify-self: center;
margin-bottom: 10px;
max-width: 55%;
text-align: center;
}
.three-grid-icon-3 {
align-self: center;
grid-column: 3;
grid-row: 1;
justify-self: center;
margin-bottom: 10px;
max-width: 55%;
text-align: center;
}
.three-grid-label-1 {
align-self: center;
grid-column: 1;
grid-row: 1;
justify-self: center;
text-align: center;
}
.three-grid-label-2 {
align-self: center;
grid-column: 2;
grid-row: 1;
justify-self: center;
text-align: center;
}
.three-grid-label-3 {
align-self: center;
grid-column: 3;
grid-row: 1;
justify-self: center;
text-align: center;
}
.grid-column-1 {
grid-column: 1;
}
.grid-column-2 {
grid-column: 2;
justify-self: left;
}
.grid-column-3 {
grid-column: 3;
}
/*
* HTML
*/
/* Push bottom nav bar to bottom of screen on larger displays */
@media only screen and (min-width: 600px) {
html {
height: 100%;
}
}
/*
* FLASH MESSAGE
*/
.flash-message {
display: block;
font-family: var(--sans-serif);
font-size: var(--font-size-7);
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
/*
* FONTS
*/
.font-near-black {
color: var(--near-black);
}
.font-gray {
color: var(--mid-gray);
}
.font-light-gray {
color: var(--silver);
}
.font-success {
color: var(--success);
}
.font-warning {
color: var(--warning);
}
.font-failure {
color: var(--danger);
}
/*
* ICONS
*/
.icon {
width: 3rem;
}
.icon-small {
width: 1rem;
}
.icon-medium {
width: 2rem;
}
.icon-large {
width: 3rem;
}
.icon-100 {
width: 100%;
}
/* icon-active: sets color of icon svg to near-black */
.icon-active {
filter: invert(0%) sepia(1%) saturate(4171%) hue-rotate(79deg) brightness(86%) contrast(87%);
}
/* icon-inactive: sets color of icon svg to gray */
.icon-inactive {
filter: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
}
/*
* INPUTS
*/
.input {
/* Needed to render inputs & buttons of equal width */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 0.5rem;
margin-bottom: 1rem;
padding-left: 5px;
line-height: 1.5rem;
width: 80%;
}
.alert-input {
/* Needed to render inputs & buttons of equal width */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 0.25rem;
padding-right: 0.25rem;
text-align: right;
width: 7rem;
}
/*
* LABELS
*/
.label-small {
font-family: var(--sans-serif);
font-size: var(--font-size-7);
display: block;
}
.label-medium {
font-size: var(--font-size-3);
display: block;
}
.label-large {
font-size: var(--font-size-2);
display: block;
}
/*
* LINKS
*/
.link {
text-decoration: none;
color: var(--font-near-black);
}
/*
* LISTS
*/
.list {
padding-left: 0;
margin-left: 0;
max-width: var(--max-width-6);
border: 1px solid var(--light-silver);
border-radius: var(--border-radius-2);
list-style-type: none;
font-family: var(--sans-serif);
}
.list-container {
width: var(--max-width-5);
}
.list-icon {
align-self: center;
justify-self: right;
grid-column: 2;
grid-row: 1/3;
}
.list-item {
display: grid;
padding: 1rem;
border-bottom-color: var(--light-silver);
border-bottom-style: solid;
border-bottom-width: 1px;
}
.list-text {
justify-self: left;
grid-column: 1;
grid-row: 1;
margin: 0;
font-size: var(--font-size-5);
}
.list-label {
justify-self: left;
grid-column: 1;
grid-row: 2;
}
/*
* METERS
*/
meter {
border: 1px solid #ccc;
border-radius: 3px;
display: block;
/* height: 1rem; */
margin: 0 auto;
margin-bottom: 1rem;
width: 100%;
/* remove default styling */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Firefox */
background: none; /* remove default background */
background-color: var(--near-white);
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-bar {
background: none; /* remove default background */
background-color: var(--near-white);
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-optimum-value {
background-size: 100% 100%;
box-shadow: 0 5px 5px -5px #999 inset;
transition: width .5s;
}
/* Firefox styling */
meter::-moz-meter-bar {
background: var(--mid-gray);
background-size: 100% 100%;
box-shadow: 0 5px 5px -5px #999 inset;
}
.meter-gauge {
background-color: var(--near-white);
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 5px 5px -5px #333 inset;
display: block;
}
/* Chrome styling */
.meter-gauge > span {
background: var(--mid-gray);
background-size: 100% 100%;
box-shadow: 0 5px 5px -5px #999 inset;
display: block;
height: inherit;
text-indent: -9999px;
}
/*
* NAVIGATION
*/
.nav-bar {
background-color: var(--moon-gray);
display: flex;
align-items: center;
width: 100%;
height: 2em;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
justify-content: space-between;
}
.nav-title {
font-family: var(--sans-serif);
font-size: var(--font-size-4);
font-weight: normal;
margin: 0;
}
.nav-icon {
width: auto;
height: 90%;
cursor: pointer;
}
.nav-icon-left {
float: left;
padding-left: 10px;
}
.nav-icon-right {
float: right;
padding-right: 10px;
}
.nav-item {
display: inline-block;
list-style-type: none;
}
/*
* SWITCHES / SLIDERS
*/
/* switch: the box around the slider */
.switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
/* hide default HTML checkbox */
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.switch-icon-left {
align-self: center;
grid-column: 1;
grid-row: 1;
justify-self: center;
}
.switch-icon-right {
align-self: center;
grid-column: 3;
grid-row: 1;
justify-self: center;
}
.slider {
background-color: var(--moon-gray);
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
-webkit-transition: .4s;
}
.slider:before {
background-color: var(--white);
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
-webkit-transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: var(--near-black);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--near-black);
}
input:checked + .slider:before {
-ms-transform: translateX(26px);
transform: translateX(26px);
-webkit-transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*
* TITLES
*/
.title-medium {
font-size: var(--font-size-4);
font-family: var(--sans-serif);
max-width: var(--max-width-6);
}
/*
* PARAGRAPHS
*/
p {
font-family: var(--sans-serif);
overflow-wrap: anywhere;
}

View File

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<g>
<path d="M503.839,395.379l-195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102
L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398
c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586
c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208
L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962
C483.321,419.836,483.321,431.128,477.861,440.586z"/>
</g>
</g>
<g>
<g>
<rect x="241.001" y="176.01" width="29.996" height="149.982"/>
</g>
</g>
<g>
<g>
<path d="M256,355.99c-11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998
S267.027,355.99,256,355.99z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
<g>
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 768 B

View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 50.000001 50.000001" height="50" width="50" version="1.1" y="0px" x="0px"><g transform="matrix(.10478 0 0 .10478 -.0059483 .0032017)"><path d="m145.19 238.58 215.5-215.5c5.3-5.3 5.3-13.8 0-19.1s-13.8-5.3-19.1 0l-225.1 225.1c-5.3 5.3-5.3 13.8 0 19.1l225.1 225c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.3-5.3 5.3-13.8 0-19.1z"/></g></svg>

After

Width:  |  Height:  |  Size: 460 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M14.5 18h-10c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
<path fill="#000000" d="M16.5 3c-0.276 0-0.5 0.224-0.5 0.5v15c0 0.276-0.224 0.5-0.5 0.5h-11c-0.827 0-1.5-0.673-1.5-1.5s0.673-1.5 1.5-1.5h9c0.827 0 1.5-0.673 1.5-1.5v-12c0-0.827-0.673-1.5-1.5-1.5h-10c-0.827 0-1.5 0.673-1.5 1.5v15c0 1.378 1.122 2.5 2.5 2.5h11c0.827 0 1.5-0.673 1.5-1.5v-15c0-0.276-0.224-0.5-0.5-0.5zM3.5 2h10c0.276 0 0.5 0.224 0.5 0.5v12c0 0.276-0.224 0.5-0.5 0.5h-9c-0.562 0-1.082 0.187-1.5 0.501v-13.001c0-0.276 0.224-0.5 0.5-0.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 916 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M7.631 19.702c-0.041 0-0.083-0.005-0.125-0.016-0.898-0.231-1.761-0.587-2.564-1.059-0.233-0.137-0.315-0.434-0.186-0.671 0.159-0.292 0.243-0.622 0.243-0.957 0-1.103-0.897-2-2-2-0.334 0-0.665 0.084-0.957 0.243-0.237 0.129-0.534 0.047-0.671-0.186-0.472-0.804-0.828-1.666-1.059-2.564-0.065-0.254 0.077-0.515 0.325-0.598 0.814-0.274 1.362-1.036 1.362-1.895s-0.547-1.621-1.362-1.895c-0.248-0.084-0.39-0.344-0.325-0.598 0.231-0.898 0.587-1.761 1.059-2.564 0.137-0.233 0.434-0.315 0.671-0.186 0.291 0.159 0.622 0.243 0.957 0.243 1.103 0 2-0.897 2-2 0-0.334-0.084-0.665-0.243-0.957-0.129-0.237-0.047-0.534 0.186-0.671 0.804-0.472 1.666-0.828 2.564-1.059 0.254-0.065 0.515 0.077 0.598 0.325 0.274 0.814 1.036 1.362 1.895 1.362s1.621-0.547 1.895-1.362c0.084-0.248 0.345-0.39 0.598-0.325 0.898 0.231 1.761 0.587 2.564 1.059 0.233 0.137 0.315 0.434 0.186 0.671-0.159 0.292-0.243 0.622-0.243 0.957 0 1.103 0.897 2 2 2 0.334 0 0.665-0.084 0.957-0.243 0.237-0.129 0.534-0.047 0.671 0.186 0.472 0.804 0.828 1.666 1.059 2.564 0.065 0.254-0.077 0.515-0.325 0.598-0.814 0.274-1.362 1.036-1.362 1.895s0.547 1.621 1.362 1.895c0.248 0.084 0.39 0.344 0.325 0.598-0.231 0.898-0.587 1.761-1.059 2.564-0.137 0.233-0.434 0.315-0.671 0.186-0.292-0.159-0.622-0.243-0.957-0.243-1.103 0-2 0.897-2 2 0 0.334 0.084 0.665 0.243 0.957 0.129 0.237 0.047 0.534-0.186 0.671-0.804 0.472-1.666 0.828-2.564 1.059-0.254 0.065-0.515-0.077-0.598-0.325-0.274-0.814-1.036-1.362-1.895-1.362s-1.621 0.547-1.895 1.362c-0.070 0.207-0.264 0.341-0.474 0.341zM10 17c1.127 0 2.142 0.628 2.655 1.602 0.52-0.161 1.026-0.369 1.51-0.622-0.108-0.314-0.164-0.646-0.164-0.98 0-1.654 1.346-3 3-3 0.334 0 0.666 0.056 0.98 0.164 0.253-0.484 0.462-0.989 0.622-1.51-0.974-0.512-1.602-1.527-1.602-2.655s0.628-2.142 1.602-2.655c-0.161-0.52-0.369-1.026-0.622-1.51-0.314 0.108-0.646 0.164-0.98 0.164-1.654 0-3-1.346-3-3 0-0.334 0.056-0.666 0.164-0.98-0.484-0.253-0.989-0.462-1.51-0.622-0.512 0.974-1.527 1.602-2.655 1.602s-2.142-0.628-2.655-1.602c-0.52 0.16-1.026 0.369-1.51 0.622 0.108 0.314 0.164 0.646 0.164 0.98 0 1.654-1.346 3-3 3-0.334 0-0.666-0.056-0.98-0.164-0.253 0.484-0.462 0.989-0.622 1.51 0.974 0.512 1.602 1.527 1.602 2.655s-0.628 2.142-1.602 2.655c0.16 0.52 0.369 1.026 0.622 1.51 0.314-0.108 0.646-0.164 0.98-0.164 1.654 0 3 1.346 3 3 0 0.334-0.056 0.666-0.164 0.98 0.484 0.253 0.989 0.462 1.51 0.622 0.512-0.974 1.527-1.602 2.655-1.602z"></path>
<path fill="#000000" d="M10 13c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM10 8c-1.103 0-2 0.897-2 2s0.897 2 2 2c1.103 0 2-0.897 2-2s-0.897-2-2-2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,5 @@
<?xml version='1.0' encoding='iso-8859-1'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.68 457.68" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 457.68 457.68">
<path d="m439.48,167.086v-111.249c0-17.81-14.49-32.3-32.3-32.3h-374.88c-17.811,0-32.3,14.49-32.3,32.3v226.63c0,17.81 14.49,32.3 32.3,32.3h106.243l-12.162,13.09h-18.221c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5 7.5,7.5h104.361v72.334c0,10.449 8.501,18.951 18.951,18.951h80.627c10.449,0 18.951-8.501 18.951-18.951v-15.234h100.94c14.166,0 25.69-11.529 25.69-25.7v-182.59c0-11.563-7.674-21.364-18.2-24.581zm3.2,24.581v2.049h-172.49v-2.049c0-5.9 4.8-10.7 10.7-10.7h151.1c5.895,0.001 10.69,4.801 10.69,10.7zm-130.581,63.364h-41.909v-46.315h172.49v148.491h-111.63v-83.226c0-10.449-8.502-18.95-18.951-18.95zm3.951,28.809h-88.528v-9.858c0-2.178 1.772-3.951 3.951-3.951h80.627c2.178,0 3.951,1.772 3.951,3.951v9.858zm108.429-220.503v102.63h-143.59c-14.171,0-25.7,11.529-25.7,25.7v63.364h-23.718c-10.441,0-18.936,8.488-18.949,18.926h-197.523v-210.62h409.48zm-196.959,235.503h88.528v91.495h-88.528v-91.495zm-195.221-260.303h374.88c6.85,2.13163e-14 12.765,4.012 15.565,9.8h-406.011c2.801-5.788 8.716-9.8 15.566-9.8zm-16.025,250.421h196.247v10.81h-180.222c-7.243-0.001-13.452-4.48-16.025-10.81zm130.582,38.899l12.162-13.09h53.503v13.09h-65.665zm165.242,91.286h-80.627c-2.178,0-3.951-1.772-3.951-3.951v-9.857h88.528v9.857c0.001,2.178-1.772,3.951-3.95,3.951zm119.891-34.185h-100.94v-12.75h111.63v2.05c0,5.899-4.795,10.7-10.69,10.7z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M441.156,322.876l-48.666-47.386c-3.319-3.243-8.619-3.234-11.93,0.017l-81.894,80.299V8.533
c0-4.71-3.823-8.533-8.533-8.533h-68.267c-4.71,0-8.533,3.823-8.533,8.533v347.273l-81.894-80.299
c-3.311-3.243-8.602-3.251-11.921-0.017l-48.666,47.386c-1.655,1.604-2.586,3.806-2.586,6.11c0,2.304,0.939,4.506,2.586,6.11
l179.2,174.481c1.655,1.613,3.806,2.423,5.948,2.423c2.15,0,4.292-0.811,5.956-2.423l179.2-174.481
c1.647-1.604,2.577-3.806,2.577-6.11C443.733,326.682,442.803,324.48,441.156,322.876z M255.991,491.563L89.028,328.986
l36.412-35.456l90.445,88.695c2.449,2.406,6.11,3.115,9.276,1.775c3.174-1.331,5.231-4.429,5.231-7.868V17.067h51.2v359.066
c0,3.439,2.065,6.537,5.231,7.868c3.166,1.34,6.818,0.631,9.276-1.775l90.445-88.695l36.42,35.456L255.991,491.563z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M17.5 6h-16c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.827 0.673 1.5 1.5 1.5h16c0.827 0 1.5-0.673 1.5-1.5v-9c0-0.827-0.673-1.5-1.5-1.5zM17.5 7c0.030 0 0.058 0.003 0.087 0.008l-7.532 5.021c-0.29 0.193-0.819 0.193-1.109 0l-7.532-5.021c0.028-0.005 0.057-0.008 0.087-0.008h16zM17.5 17h-16c-0.276 0-0.5-0.224-0.5-0.5v-8.566l7.391 4.927c0.311 0.207 0.71 0.311 1.109 0.311s0.798-0.104 1.109-0.311l7.391-4.927v8.566c0 0.276-0.224 0.5-0.5 0.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 777 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M11.5 8c0.276 0 0.5-0.224 0.5-0.5v-4c0-0.827-0.673-1.5-1.5-1.5h-9c-0.827 0-1.5 0.673-1.5 1.5v12c0 0.746 0.537 1.56 1.222 1.853l5.162 2.212c0.178 0.076 0.359 0.114 0.532 0.114 0.213-0 0.416-0.058 0.589-0.172 0.314-0.207 0.495-0.575 0.495-1.008v-1.5h2.5c0.827 0 1.5-0.673 1.5-1.5v-4c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v4c0 0.276-0.224 0.5-0.5 0.5h-2.5v-9.5c0-0.746-0.537-1.56-1.222-1.853l-3.842-1.647h7.564c0.276 0 0.5 0.224 0.5 0.5v4c0 0.276 0.224 0.5 0.5 0.5zM6.384 5.566c0.322 0.138 0.616 0.584 0.616 0.934v12c0 0.104-0.028 0.162-0.045 0.173s-0.081 0.014-0.177-0.027l-5.162-2.212c-0.322-0.138-0.616-0.583-0.616-0.934v-12c0-0.079 0.018-0.153 0.051-0.22l5.333 2.286z"></path>
<path fill="#000000" d="M18.354 9.146l-3-3c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l2.146 2.146h-6.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h6.293l-2.146 2.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l3-3c0.195-0.195 0.195-0.512 0-0.707z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M9.5 19c-0.084 0-0.167-0.021-0.243-0.063-0.116-0.065-2.877-1.611-5.369-4.082-0.196-0.194-0.197-0.511-0.003-0.707s0.511-0.197 0.707-0.003c1.979 1.962 4.186 3.346 4.908 3.776 0.723-0.431 2.932-1.817 4.908-3.776 0.196-0.194 0.513-0.193 0.707 0.003s0.193 0.513-0.003 0.707c-2.493 2.471-5.253 4.017-5.369 4.082-0.076 0.042-0.159 0.063-0.243 0.063z"></path>
<path fill="#000000" d="M1.279 11c-0.188 0-0.368-0.106-0.453-0.287-0.548-1.165-0.826-2.33-0.826-3.463 0-2.895 2.355-5.25 5.25-5.25 0.98 0 2.021 0.367 2.931 1.034 0.532 0.39 0.985 0.86 1.319 1.359 0.334-0.499 0.787-0.969 1.319-1.359 0.91-0.667 1.951-1.034 2.931-1.034 2.895 0 5.25 2.355 5.25 5.25 0 1.133-0.278 2.298-0.826 3.463-0.118 0.25-0.415 0.357-0.665 0.24s-0.357-0.415-0.24-0.665c0.485-1.031 0.731-2.053 0.731-3.037 0-2.343-1.907-4.25-4.25-4.25-1.703 0-3.357 1.401-3.776 2.658-0.068 0.204-0.259 0.342-0.474 0.342s-0.406-0.138-0.474-0.342c-0.419-1.257-2.073-2.658-3.776-2.658-2.343 0-4.25 1.907-4.25 4.25 0 0.984 0.246 2.006 0.731 3.037 0.118 0.25 0.010 0.548-0.24 0.665-0.069 0.032-0.141 0.048-0.212 0.048z"></path>
<path fill="#000000" d="M10.515 15c-0.005 0-0.009-0-0.013-0-0.202-0.004-0.569-0.109-0.753-0.766l-1.217-4.334-0.807 3.279c-0.158 0.643-0.525 0.778-0.73 0.8s-0.592-0.027-0.889-0.62l-0.606-1.211c-0.029-0.058-0.056-0.094-0.076-0.117-0.003 0.004-0.007 0.009-0.011 0.015-0.37 0.543-1.192 0.953-1.913 0.953h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.421 0 0.921-0.272 1.087-0.516 0.223-0.327 0.547-0.501 0.891-0.478 0.374 0.025 0.708 0.279 0.917 0.696l0.445 0.89 0.936-3.803c0.158-0.64 0.482-0.779 0.726-0.783s0.572 0.125 0.751 0.76l1.284 4.576 1.178-3.608c0.205-0.628 0.582-0.736 0.788-0.745s0.59 0.068 0.847 0.677l0.724 1.719c0.136 0.322 0.578 0.616 0.927 0.616h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5c-0.747 0-1.559-0.539-1.849-1.228l-0.592-1.406-1.274 3.9c-0.207 0.634-0.566 0.733-0.771 0.733z"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M9.5 12c-0.276 0-0.5-0.224-0.5-0.5v-9c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v9c0 0.276-0.224 0.5-0.5 0.5z"></path>
<path fill="#000000" d="M9.5 19c-2.003 0-3.887-0.78-5.303-2.197s-2.197-3.3-2.197-5.303c0-1.648 0.525-3.212 1.517-4.523 0.96-1.268 2.324-2.215 3.84-2.666 0.265-0.079 0.543 0.072 0.622 0.337s-0.072 0.543-0.337 0.622c-2.733 0.814-4.643 3.376-4.643 6.231 0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5c0-2.855-1.909-5.417-4.643-6.231-0.265-0.079-0.415-0.357-0.337-0.622s0.357-0.415 0.622-0.337c1.517 0.451 2.88 1.398 3.84 2.666 0.993 1.311 1.517 2.875 1.517 4.523 0 2.003-0.78 3.887-2.197 5.303s-3.3 2.197-5.303 2.197z"></path>
</svg>

After

Width:  |  Height:  |  Size: 984 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M16.218 3.782c-1.794-1.794-4.18-2.782-6.718-2.782s-4.923 0.988-6.718 2.782-2.782 4.18-2.782 6.717 0.988 4.923 2.782 6.718 4.18 2.782 6.718 2.782 4.923-0.988 6.718-2.782 2.782-4.18 2.782-6.718-0.988-4.923-2.782-6.717zM9.5 19c-4.687 0-8.5-3.813-8.5-8.5s3.813-8.5 8.5-8.5c4.687 0 8.5 3.813 8.5 8.5s-3.813 8.5-8.5 8.5z"></path>
<path fill="#000000" d="M9.5 15c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5 1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5-3.5 1.57-3.5 3.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5c0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 2.312-1.753 4.223-4 4.472v1.528c0 0.276-0.224 0.5-0.5 0.5z"></path>
<path fill="#000000" d="M9.5 18c-0 0 0 0 0 0-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5 0 0 0 0 0 0 0.276 0 0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,117 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M458.667,301.24H53.333C23.936,301.24,0,325.176,0,354.573v42.667c0,29.397,23.936,53.333,53.333,53.333h405.333
c29.397,0,53.333-23.915,53.333-53.333v-42.667C512,325.176,488.064,301.24,458.667,301.24z M490.667,397.24
c0,17.643-14.357,32-32,32H53.333c-17.643,0-32-14.357-32-32v-42.667c0-17.643,14.357-32,32-32h405.333c17.643,0,32,14.357,32,32
V397.24z"/>
</g>
</g>
<g>
<g>
<path d="M373.333,151.907c-5.888,0-10.667,4.779-10.667,10.667v149.333c0,5.888,4.779,10.667,10.667,10.667
c5.888,0,10.667-4.757,10.667-10.667V162.573C384,156.685,379.221,151.907,373.333,151.907z"/>
</g>
</g>
<g>
<g>
<circle cx="74.667" cy="375.907" r="10.667"/>
</g>
</g>
<g>
<g>
<circle cx="138.667" cy="375.907" r="10.667"/>
</g>
</g>
<g>
<g>
<circle cx="202.667" cy="375.907" r="10.667"/>
</g>
</g>
<g>
<g>
<circle cx="266.667" cy="375.907" r="10.667"/>
</g>
</g>
<g>
<g>
<path d="M437.333,365.24H330.667c-5.888,0-10.667,4.779-10.667,10.667c0,5.888,4.779,10.667,10.667,10.667h106.667
c5.888,0,10.667-4.779,10.667-10.667C448,370.019,443.221,365.24,437.333,365.24z"/>
</g>
</g>
<g>
<g>
<path d="M341.333,162.573c0-8.555,3.328-16.576,9.365-22.635c4.16-4.16,4.16-10.923,0-15.083c-4.16-4.16-10.923-4.16-15.083,0
C325.547,134.925,320,148.323,320,162.573c0,14.251,5.547,27.648,15.616,37.717c2.091,2.069,4.821,3.115,7.552,3.115
c2.731,0,5.461-1.024,7.531-3.115c4.16-4.16,4.16-10.923,0-15.083C344.661,179.149,341.333,171.128,341.333,162.573z"/>
</g>
</g>
<g>
<g>
<path d="M411.051,124.856c-4.16-4.16-10.923-4.16-15.083,0c-4.16,4.16-4.16,10.923,0,15.083c6.037,6.059,9.365,14.08,9.365,22.635
c0,8.555-3.328,16.597-9.387,22.635c-4.16,4.16-4.16,10.923,0,15.083c2.091,2.069,4.821,3.115,7.552,3.115
c2.731,0,5.461-1.024,7.552-3.115c10.069-10.069,15.616-23.467,15.616-37.717C426.667,148.323,421.12,134.925,411.051,124.856z"/>
</g>
</g>
<g>
<g>
<path d="M320.512,109.795c4.16-4.16,4.16-10.923,0-15.083c-4.16-4.16-10.923-4.16-15.083,0c-37.419,37.44-37.419,98.325,0,135.765
c2.091,2.069,4.821,3.115,7.552,3.115s5.461-1.045,7.531-3.115c4.16-4.16,4.16-10.923,0-15.083
C291.413,186.275,291.413,138.915,320.512,109.795z"/>
</g>
</g>
<g>
<g>
<path d="M441.216,94.712c-4.16-4.16-10.923-4.16-15.083,0c-4.16,4.16-4.16,10.923,0,15.083c29.099,29.12,29.099,76.48,0,105.6
c-4.16,4.16-4.16,10.923,0,15.083c2.091,2.069,4.821,3.115,7.552,3.115s5.44-1.045,7.531-3.115
C478.635,193.037,478.635,132.152,441.216,94.712z"/>
</g>
</g>
<g>
<g>
<path d="M290.347,79.629c4.16-4.16,4.16-10.923,0-15.083c-4.16-4.16-10.923-4.16-15.083,0
c-54.059,54.059-54.059,142.037,0,196.096c2.091,2.069,4.821,3.115,7.552,3.115c2.731,0,5.461-1.045,7.531-3.115
c4.16-4.16,4.16-10.923,0-15.083C244.587,199.821,244.587,125.389,290.347,79.629z"/>
</g>
</g>
<g>
<g>
<path d="M471.381,64.547c-4.16-4.16-10.923-4.16-15.083,0c-4.16,4.16-4.16,10.923,0,15.083c45.76,45.739,45.76,120.171,0,165.931
c-4.16,4.16-4.16,10.923,0,15.083c2.091,2.069,4.821,3.115,7.552,3.115c2.731,0,5.461-1.045,7.531-3.115
C525.44,206.584,525.44,118.605,471.381,64.547z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.998 511.998" style="enable-background:new 0 0 511.998 511.998;" xml:space="preserve">
<g>
<g>
<path d="M106.342,266.716c-6.611-6.61-15.4-10.251-24.749-10.251s-18.138,3.641-24.748,10.251
c-6.611,6.61-10.252,15.399-10.252,24.748s3.641,18.139,10.251,24.748c6.61,6.611,15.4,10.251,24.749,10.251
s18.138-3.641,24.748-10.251c6.61-6.61,10.251-15.399,10.251-24.749C116.592,282.114,112.951,273.325,106.342,266.716z
M92.199,302.071c-2.833,2.833-6.6,4.393-10.606,4.393c-4.006,0-7.773-1.56-10.607-4.394c-2.833-2.832-4.393-6.599-4.393-10.605
c0-4.006,1.56-7.772,4.394-10.606c2.833-2.833,6.6-4.394,10.606-4.394c4.006,0,7.773,1.56,10.606,4.394
c2.833,2.832,4.393,6.599,4.393,10.605C96.592,295.471,95.032,299.237,92.199,302.071z"/>
</g>
</g>
<g>
<g>
<path d="M509.015,133.452c-2.598-2.561-6.386-3.505-9.882-2.461l-168.392,50.26l50.261-168.392
c1.044-3.496,0.101-7.283-2.462-9.881c-2.561-2.597-6.331-3.593-9.846-2.601l-43.658,12.366c-2.838,0.804-5.176,2.819-6.389,5.508
L231.738,210.8l-88.673,26.466c-20.645-24.538-53.972-34.731-85.176-25.415C15.06,224.635-9.385,269.879,3.398,312.709
c10.484,35.126,42.802,57.886,77.716,57.886c7.657,0,15.439-1.095,23.143-3.394c29.942-8.937,51.731-34.055,56.782-64.247
l43.711,4.289l4.289,43.71c-30.192,5.05-55.311,26.839-64.249,56.782c-12.783,42.83,11.663,88.075,54.492,100.858
c7.569,2.259,15.379,3.405,23.212,3.405c17.091,0,34.128-5.596,47.974-15.756c14.32-10.508,24.581-25.08,29.673-42.14
c9.313-31.204-0.878-64.531-25.416-85.176l26.466-88.672l192.551-86.909c2.688-1.213,4.703-3.551,5.507-6.389l12.366-43.657
C512.61,139.787,511.613,136.015,509.015,133.452z M202.895,274.702c-0.72,1.594-1.009,3.349-0.838,5.09l0.702,7.158
l-49.673-4.872c-2.749-0.268-5.485,0.609-7.563,2.427s-3.311,4.414-3.408,7.173c-0.921,26.205-18.434,48.854-43.578,56.358
c-32.266,9.629-66.346-8.786-75.975-41.047c-9.628-32.263,8.785-66.344,41.048-75.974c25.29-7.549,52.427,1.906,67.527,23.526
c2.47,3.535,6.929,5.088,11.058,3.855l78.656-23.477L202.895,274.702z M253.594,369.796c-1.233,4.131,0.321,8.588,3.856,11.057
c21.62,15.102,31.075,42.24,23.527,67.528c-7.665,25.68-31.714,43.616-58.483,43.616c-5.895,0-11.78-0.865-17.492-2.569
c-32.262-9.629-50.676-43.711-41.047-75.974c7.505-25.145,30.154-42.658,56.359-43.579c2.759-0.097,5.356-1.33,7.174-3.408
c0.972-1.11,1.665-2.411,2.068-3.798c0.146-0.29,0.284-0.585,0.404-0.893l23.889-61.474c2-5.148-0.551-10.942-5.699-12.943
c-5.149-2.003-10.943,0.551-12.943,5.699l-9.383,24.145l-3.601-36.707l112.74-249.779l21.669-6.138L253.594,369.796z
M481.274,177.029L308.76,254.895l15.142-50.731l163.51-48.802L481.274,177.029z"/>
</g>
</g>
<g>
<g>
<path d="M247.206,406.197c-6.61-6.61-15.399-10.25-24.748-10.25s-18.138,3.64-24.748,10.251
c-6.611,6.61-10.251,15.399-10.251,24.748s3.64,18.138,10.251,24.748c6.61,6.611,15.399,10.251,24.748,10.251
s18.138-3.64,24.749-10.251C260.852,442.048,260.852,419.844,247.206,406.197z M233.066,441.552
c-2.834,2.833-6.601,4.394-10.607,4.394c-4.006,0-7.773-1.561-10.607-4.393c-2.832-2.833-4.393-6.6-4.393-10.606
s1.561-7.773,4.393-10.606c2.833-2.833,6.6-4.393,10.607-4.393c4.007,0,7.774,1.56,10.607,4.393
C238.913,426.188,238.913,435.704,233.066,441.552z"/>
</g>
</g>
<g>
<g>
<path d="M259.025,259.351c-5.151-1.997-10.943,0.559-12.939,5.709l-0.117,0.302c-1.997,5.149,0.56,10.942,5.709,12.938
c1.188,0.46,2.41,0.679,3.612,0.679c4.008,0,7.791-2.427,9.326-6.388l0.117-0.302C266.73,267.14,264.174,261.348,259.025,259.351z
"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M185.379,185.379h-70.621c-4.873,0-8.828,3.955-8.828,8.828v211.862c0,4.873,3.955,8.828,8.828,8.828h70.621
c4.873,0,8.828-3.955,8.828-8.828V194.207C194.207,189.334,190.252,185.379,185.379,185.379z M176.552,397.241h-52.966V203.034
h52.966V397.241z"/>
</g>
</g>
<g>
<g>
<path d="M291.31,97.103H220.69c-4.873,0-8.828,3.955-8.828,8.828v300.138c0,4.873,3.955,8.828,8.828,8.828h70.621
c4.873,0,8.828-3.955,8.828-8.828V105.931C300.138,101.058,296.183,97.103,291.31,97.103z M282.483,397.241h-52.966V114.759
h52.966V397.241z"/>
</g>
</g>
<g>
<g>
<path d="M397.241,397.241h-70.621c-4.873,0-8.828,3.955-8.828,8.828s3.955,8.828,8.828,8.828h70.621
c4.873,0,8.828-3.955,8.828-8.828S402.114,397.241,397.241,397.241z"/>
</g>
</g>
<g>
<g>
<path d="M503.172,397.241h-70.621c-4.873,0-8.828,3.955-8.828,8.828s3.955,8.828,8.828,8.828h70.621
c4.873,0,8.828-3.955,8.828-8.828S508.045,397.241,503.172,397.241z"/>
</g>
</g>
<g>
<g>
<path d="M79.448,273.655H8.828c-4.873,0-8.828,3.955-8.828,8.828v123.586c0,4.873,3.955,8.828,8.828,8.828h70.621
c4.873,0,8.828-3.955,8.828-8.828V282.483C88.276,277.61,84.321,273.655,79.448,273.655z M70.621,397.241H17.655V291.31h52.966
V397.241z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,12 @@
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="64" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
<g>
<g fill="#1D1D1B">
<path d="M32,0C14.355,0,0,14.355,0,32s14.355,32,32,32s32-14.355,32-32S49.645,0,32,0z M32,60 C16.561,60,4,47.439,4,32S16.561,4,32,4s28,12.561,28,28S47.439,60,32,60z"/>
<circle cx="20.518" cy="21.361" r="4.338"/>
<circle cx="43.48" cy="21.361" r="4.338"/>
<path d="m52.541,36.568c-1.053-0.316-2.172,0.287-2.488,1.344-0.035,0.119-3.739,11.947-18.053,11.947-14.219,0-17.904-11.467-18.055-11.955-0.32-1.055-1.441-1.65-2.486-1.336-1.059,0.317-1.66,1.432-1.344,2.489 0.045,0.148 4.627,14.802 21.885,14.802s21.84-14.654 21.885-14.803c0.316-1.056-0.285-2.171-1.344-2.488z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 958 B

View File

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.996 511.996" style="enable-background:new 0 0 511.996 511.996;" xml:space="preserve">
<g>
<g>
<path d="M441.154,176.9L261.954,2.419c-3.311-3.226-8.593-3.226-11.904,0L70.85,176.9c-1.655,1.604-2.586,3.806-2.586,6.11
c0,2.304,0.939,4.506,2.586,6.11l48.666,47.386c3.319,3.243,8.61,3.234,11.921-0.017l81.894-80.299v347.273
c0,4.71,3.823,8.533,8.533,8.533h68.267c4.71,0,8.533-3.823,8.533-8.533V156.19l81.894,80.299c3.311,3.251,8.61,3.243,11.93,0.017
l48.666-47.386c1.647-1.604,2.577-3.806,2.577-6.11C443.731,180.706,442.801,178.505,441.154,176.9z M386.549,218.466
l-90.445-88.695c-2.449-2.406-6.11-3.115-9.276-1.775c-3.166,1.331-5.231,4.429-5.231,7.868v359.066h-51.2V135.863
c0-3.439-2.057-6.536-5.231-7.868c-3.166-1.34-6.818-0.631-9.276,1.775l-90.445,88.695L89.035,183.01L255.998,20.433
L422.97,183.01L386.549,218.466z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M18.5 18h-11c-0.827 0-1.5-0.673-1.5-1.5 0-0.048 0.011-1.19 0.924-2.315 0.525-0.646 1.241-1.158 2.128-1.522 1.071-0.44 2.4-0.662 3.948-0.662s2.876 0.223 3.948 0.662c0.887 0.364 1.603 0.876 2.128 1.522 0.914 1.125 0.924 2.267 0.924 2.315 0 0.827-0.673 1.5-1.5 1.5zM7 16.503c0.001 0.275 0.225 0.497 0.5 0.497h11c0.275 0 0.499-0.223 0.5-0.497-0.001-0.035-0.032-0.895-0.739-1.734-0.974-1.157-2.793-1.768-5.261-1.768s-4.287 0.612-5.261 1.768c-0.707 0.84-0.738 1.699-0.739 1.734z"></path>
<path fill="#000000" d="M13 11c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4c0 2.206-1.794 4-4 4zM13 4c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z"></path>
<path fill="#000000" d="M4.5 18h-3c-0.827 0-1.5-0.673-1.5-1.5 0-0.037 0.008-0.927 0.663-1.8 0.378-0.505 0.894-0.904 1.533-1.188 0.764-0.34 1.708-0.512 2.805-0.512 0.179 0 0.356 0.005 0.527 0.014 0.276 0.015 0.487 0.25 0.473 0.526s-0.25 0.488-0.526 0.473c-0.153-0.008-0.312-0.012-0.473-0.012-3.894 0-3.997 2.379-4 2.503 0.001 0.274 0.225 0.497 0.5 0.497h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
<path fill="#000000" d="M5 12c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM5 7c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2c0-1.103-0.897-2-2-2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1 @@
<svg height="507pt" viewBox="0 -62 507.2 507" width="507pt" xmlns="http://www.w3.org/2000/svg"><path d="m219.46875 302.011719c-18.75 18.746093-18.753906 49.140625-.007812 67.886719 18.746093 18.746093 49.140624 18.746093 67.886718 0 18.742188-18.746094 18.742188-49.140626-.007812-67.886719-18.746094-18.738281-49.128906-18.738281-67.871094 0zm0 0"/><path d="m140.265625 238.8125c-4.15625 4.015625-5.824219 9.964844-4.363281 15.558594 1.464844 5.597656 5.835937 9.964844 11.429687 11.429687 5.59375 1.464844 11.542969-.203125 15.558594-4.363281 50.023437-49.902344 131-49.902344 181.023437 0 6.28125 6.0625 16.257813 5.976562 22.429688-.195312 6.171875-6.171876 6.257812-16.152344.195312-22.429688-62.523437-62.386719-163.746093-62.386719-226.273437 0zm0 0"/><path d="m253.402344 95.949219c-67.929688-.1875-133.113282 26.816406-181.007813 74.992187-5.808593 6.3125-5.605469 16.082032.460938 22.148438 6.066406 6.066406 15.835937 6.269531 22.148437.460937 87.480469-87.488281 229.320313-87.488281 316.800782 0 4.015624 4.15625 9.964843 5.824219 15.558593 4.359375 5.59375-1.460937 9.964844-5.832031 11.425781-11.425781 1.464844-5.59375-.203124-11.542969-4.363281-15.558594-47.898437-48.175781-113.085937-75.175781-181.023437-74.976562zm0 0"/><path d="m502.316406 103.035156c-137.5625-137.246094-360.261718-137.246094-497.824218 0-6.0625 6.28125-5.976563 16.257813.195312 22.429688s16.148438 6.257812 22.429688.195312c125.070312-124.738281 327.5-124.738281 452.574218 0 4.015625 4.160156 9.964844 5.828125 15.558594 4.363282 5.59375-1.464844 9.964844-5.832032 11.429688-11.425782 1.464843-5.59375-.203126-11.542968-4.363282-15.5625zm0 0"/></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

756
peach-patterns/index.html Normal file
View File

@ -0,0 +1,756 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>peach-patterns</title>
<meta name="description" content="PeachCloud Pattern Library">
<meta name="author" content="glyph">
<link rel="stylesheet" href="css/peachcloud.css">
<style>@import url("css/_variables.css");</style>
</head>
<body style="background-color: var(--near-white);">
<div style="max-width: var(--max-width-6);">
<h1>PeachCloud Pattern Library</h1>
<br>
<h3>Buttons</h3>
<!-- BUTTONS -->
<p>Standard button</p>
<button class="button">Standard button</button>
<br>
<hr style="width: 100%;">
<h3>Meters</h3>
<!-- METERS -->
<p>Standard meter</p>
<meter min="0" max="100" value="70" title="70%">70%</meter>
<p>Meter with range (value outside of range)</p>
<meter min="0" max="100" low="0" high="80" value="90" title="90%">90%</meter>
<p>Meter with fallback styling</p>
<meter value="55.93" min="0" max="120.47" title="Disk Usage - 55.93 GB out of 120 GB">
<div class="meter-gauge">
<span style="width: 46.42%;">Disk Usage - 55.93GB out of 120GB</span>
</div>
</meter>
<p>Labeled meter with fallback styling</p>
<div class="flex-grid">
<span class="card-text">Disk</span>
<span class="label-small push-right">25% (48 GB available)</span>
</div>
<meter value="16" min="0" max="64" title="Disk Usage - 16 GB out of 64 GB">
<div class="meter-gauge">
<span style="width: 25%;">Disk Usage - 16 GB out of 120 GB</span>
</div>
</meter>
<hr style="width: 100%;">
<h3>Switches</h3>
<p>Rounded switch</p>
<!-- ROUNDED SWITCH -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<br>
<hr style="width: 100%;">
<h3>Circles</h3>
<!-- CIRCLES -->
<div style="width: 250px;">
<!-- STANDARD CIRCLE -->
<p>Standard circle</p>
<div class="circle circle-medium"></div>
<br>
<!-- SUCCESS CIRCLE -->
<p>Success circle</p>
<div class="circle circle-medium circle-success">Success</div>
<br>
<!-- WARNING CIRCLE -->
<p>Warning circle</p>
<div class="circle circle-medium circle-warning">Warning</div>
<br>
<!-- ERROR CIRCLE -->
<p>Error circle</p>
<div class="circle circle-medium circle-error">Error</div>
<!-- STANDARD CIRCLE WITH ACTIVE ICON -->
<p>Standard circle with active icon</p>
<div class="circle circle-medium">
<!-- NETWORK STATUS ICON -->
<img class="icon" style="position: absolute;" src="icons/router.svg">
</div>
<br>
<!-- QUARTERED CIRCLE -->
<!-- TODO: remove links from basic atom, rather add to molecule -->
<p>Quartered circle</p>
<div class="quartered-circle">
<a href="#">
<div class="quarter top-left"></div>
</a>
<a href="#">
<div class="quarter top-right"></div>
</a>
<a href="#">
<div class="quarter bottom-left"></div>
</a>
<a href="#">
<div class="quarter bottom-right"></div>
</a>
</div>
</div>
<br>
<hr style="width: 100%;">
<h3>Icons</h3>
<!-- ICONS -->
<!-- SMALL ICON -->
<p>Small icon</p>
<img class="icon icon-small" src="icons/cog.svg">
<!-- MEDIUM ICON -->
<p>Medium icon</p>
<img class="icon icon-medium" src="icons/router.svg">
<!-- LARGE ICON -->
<p>Large icon</p>
<img class="icon icon-large" src="icons/heart-pulse.svg">
<!-- ACTIVE ICON -->
<p>Active icon</p>
<img class="icon-active" style="width: 50%" src="icons/wifi.svg">
<!-- INACTIVE ICON -->
<p>Inactive icon</p>
<img class="icon-inactive" style="width: 50%" src="icons/wifi.svg">
<br>
<hr style="width: 100%;">
<h3>Inputs</h3>
<!-- INPUTS -->
<p>Standard input with button</p>
<!-- Standard input with button -->
<div class="card-container">
<input class="input" type="password" placeholder="Password" title="Password for access point">
<button class="button">Connect</button>
</div>
<p>Standard input with label and unit</p>
<!-- Standard input with label and unit -->
<div class="card-container">
<label class="label-small">WARNING THRESHOLD</label>
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 150px; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
</div>
<hr style="width: 100%;">
<h3>Labels</h3>
<!-- LABELS -->
<!-- SMALL LABEL -->
<p>Small label</p>
<label class="label-small font-gray">Small label</label>
<label class="label-small font-gray">SMALL LABEL</label>
<br>
<!-- MEDIUM LABEL -->
<p>Medium label</p>
<label class="label-medium">Medium label</label>
<label class="label-medium">MEDIUM LABEL</label>
<br><br>
<!-- LARGE LABEL -->
<p>Large label</p>
<label class="label-large">Large label</label>
<label class="label-large">LARGE LABEL</label>
<br>
<hr style="width: 100%;">
<h3>Grids</h3>
<p>Three-across icon grid</p>
<!-- THREE-ACROSS ICON GRID -->
<div class="three-grid">
<img class="three-grid-icon-1 icon" title="Devices" src="icons/devices.svg">
<img class="three-grid-icon-2 icon" title="Download" src="icons/down-arrow.svg">
<img class="three-grid-icon-3 icon" title="Upload" src="icons/up-arrow.svg">
</div>
<p>Three-across label grid</p>
<!-- THREE-ACROSS LABEL GRID -->
<div class="three-grid">
<label class="three-grid-label-1 label-medium">Label 1</label>
<label class="three-grid-label-2 label-medium">Label 2</label>
<label class="three-grid-label-3 label-medium">Label 3</label>
</div>
<p>Three-across switch and icons grid</p>
<!-- THREE-ACROSS SWITCH AND ICONS GRID -->
<div class="three-grid">
<!-- LEFT SWITCH ICON -->
<img class="icon-inactive switch-icon-left" style="width: 50%" src="icons/wifi.svg">
<!-- ROUNDED SWITCH -->
<div class="center">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<!-- RIGHT SWITCH ICON -->
<img class="icon-active switch-icon-right" style="width: 50%" src="icons/router.svg">
</div>
<p>Stack with icon and value</p>
<!-- STACK WITH ICON AND VALUE -->
<div class="stack">
<img class="icon" title="Download" src="icons/devices.svg">
<label class="label-medium" title="Number of connected devices" style="padding-top: 0.5rem;">4</label>
</div>
<p>Stack with icon, value and unit</p>
<!-- STACK WITH ICON, VALUE AND UNIT -->
<div class="stack">
<img class="icon" title="Download" src="icons/down-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">21.7</label>
<label class="label-small font-near-black">GB</label>
</div>
</div>
<p>Stack with icon, value, unit and label</p>
<!-- STACK WITH ICON, VALUE, UNIT AND LABEL -->
<div class="stack">
<img class="icon" title="Download" src="icons/down-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">DOWNLOAD</label>
</div>
<p>Three-across stack</p>
<!-- THREE-ACROSS STACK -->
<div class="three-grid">
<div class="stack">
<img class="icon" title="Download" src="icons/down-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">DOWNLOAD</label>
</div>
<div class="stack">
<img class="icon" title="Upload" src="icons/up-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
<label class="label-small font-near-black">GB</label>
</div>
<label class="label-small font-gray">UPLOAD</label>
</div>
<div class="stack">
<img class="icon" title="Connected devices" src="icons/devices.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
</div>
<label class="label-small font-gray">DEVICES</label>
</div>
</div>
<p>Three-across stack with capules</p>
<!-- THREE-ACROSS STACK WITH CAPSULES -->
<div class="three-grid">
<div class="stack capsule">
<img class="icon" title="Download" src="icons/down-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">DOWNLOAD</label>
</div>
<div class="stack capsule success-border">
<img class="icon" title="Upload" src="icons/up-arrow.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
<label class="label-small font-near-black">GB</label>
</div>
<label class="label-small font-gray">UPLOAD</label>
</div>
<div class="stack capsule warning-border">
<img class="icon" title="Connected devices" src="icons/devices.svg">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
</div>
<label class="label-small font-gray">DEVICES</label>
</div>
</div>
<hr style="width: 100%;">
<h3>Lists</h3>
<!-- LISTS -->
<p>Standard list</p>
<!-- Standard list -->
<div>
<ul class="list">
<li class="list-item">Guest</li>
<li class="list-item">TRYPTYCH</li>
<li class="list-item">JustAnInnocentAP</li>
<li class="list-item">77712345</li>
<li class="list-item">MountainViewCafe</li>
<li class="list-item">portal</li>
</ul>
</div>
<br>
<p>Titled list</p>
<!-- Titled list -->
<div>
<h1 class="bold title-medium">WiFi Networks</h1>
<ul class="list">
<li class="list-item">Guest</li>
<li class="list-item">TRYPTYCH</li>
<li class="list-item">JustAnInnocentAP</li>
<li class="list-item">77712345</li>
<li class="list-item">MountainViewCafe</li>
<li class="list-item">portal</li>
</ul>
</div>
<br>
<p>Labeled list</p>
<!-- Labeled list -->
<div>
<ul class="list">
<li class="list-item">
<p class="list-text">Cottage</p>
<label class="label-small font-gray" title="Status">Connected</label>
</li>
<li class="list-item">
<p class="list-text">Home</p>
<label class="label-small font-gray" title="Status"></label>
</li>
<li class="list-item">
<p class="list-text">RadNet23432</p>
<label class="label-small font-gray" title="Status">Not in range</label>
</li>
<li class="list-item">
<p class="list-text">TPLink-2374</p>
<label class="label-small font-gray" title="Status">Not in range</label>
</li>
<li class="list-item">
<p class="list-text">DASHAUS</p>
<label class="label-small font-gray" title="Status">Not in range</label>
</li>
</ul>
</div>
<br>
<p>Labeled list with icon right</p>
<!-- Labeled list with icon right -->
<div>
<ul class="list">
<li class="list-item">
<img class="icon icon-active icon-medium list-icon" src="icons/wifi.svg">
<p class="list-text">Cottage</p>
<label class="label-small list-label font-gray" title="Status">Connected</label>
</li>
<li class="list-item">
<img class="icon icon-inactive icon-medium list-icon" src="icons/wifi.svg">
<p class="list-text">Home</p>
<label class="label-small list-label font-gray" title="Status">Not in range</label>
</li>
</ul>
</div>
<br>
<hr style="width: 100%;">
<h3>Navigation Bars</h3>
<!-- NAV BARS -->
<p>Top nav bar</p>
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<p>Bottom nav bar</p>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/">
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
<hr style="width: 100%;">
<h3>Network Card</h3>
<!-- NETWORK CARD -->
<!-- NETWORK INFO BOX -->
<div class="card">
<div class="two-grid" title="PeachCloud network mode and status">
<!-- NETWORK STATUS ICON -->
<!-- icon with label molecule -->
<!-- left column -->
<div class="grid-column-1">
<img class="center icon" src="icons/router.svg">
<label class="center label-small font-gray" title="Access Point Status">ONLINE</label>
</div>
<!-- right column -->
<div class="grid-column-2">
<label class="label-small font-gray" title="Network Mode">MODE</label>
<p class="card-text" title="Network Mode">Access Point</p>
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
<p class="card-text" title="SSID">peach</p>
<label class="label-small font-gray" title="Access Point IP Address">IP</label>
<p class="card-text" title="IP">11.11.11.10</p>
</div>
</div>
<button class="button center">Enable WiFi</button>
<button class="button center">Add WiFi Network</button>
<!-- CARD GRID -->
<div class="card-container">
<div class="three-grid">
<div class="stack">
<img class="icon icon-medium" title="Connected devices" src="icons/devices.svg">
<div class="flex-grid" style="padding-top: 1rem;">
<label class="label-medium" style="padding-right: 3px;" title="Number of connected devices">3</label>
</div>
<label class="label-small font-gray">DEVICES</label>
</div>
<div class="stack">
<img class="icon icon-medium" title="Download" src="icons/down-arrow.svg">
<div class="flex-grid" style="padding-top: 1rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="label-small font-gray">DOWNLOAD</label>
</div>
<div class="stack">
<img class="icon icon-medium" title="Upload" src="icons/up-arrow.svg">
<div class="flex-grid" style="padding-top: 1rem;">
<label class="label-medium" style="padding-right: 3px;" title="Data upload total in GB">16</label>
<label class="label-small font-near-black">GB</label>
</div>
<label class="label-small font-gray">UPLOAD</label>
</div>
</div>
</div>
</div>
<hr style="width: 100%;">
<h3>Network Card with Nav Bars</h3>
<div style="background-color: var(--moon-gray);">
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<h1 class="nav-title">Network Configuration</h1>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<!-- NETWORK CARD -->
<div class="card center">
<!-- NETWORK INFO BOX -->
<div class="two-grid capsule success-border" title="PeachCloud network mode and status">
<!-- NETWORK STATUS ICON -->
<!-- icon with label molecule -->
<!-- left column -->
<div class="grid-column-1">
<img class="center icon" src="icons/router.svg">
<label class="center label-small font-gray" title="Access Point Status">ONLINE</label>
</div>
<!-- right column -->
<div class="grid-column-2">
<label class="label-small font-gray" title="Network Mode">MODE</label>
<p class="card-text" title="Network Mode">Access Point</p>
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
<p class="card-text" title="SSID">peach</p>
<label class="label-small font-gray" title="Access Point IP Address">IP</label>
<p class="card-text" title="IP">11.11.11.10</p>
</div>
</div>
<button class="button button-primary center">Enable WiFi</button>
<button class="button button-primary center">Add WiFi Network</button>
<!-- CARD GRID -->
<div class="card-container">
<!-- row of icons representing network statistics -->
<div class="three-grid">
<img class="three-grid-icon-1 icon" title="Devices" src="icons/devices.svg">
<img class="three-grid-icon-2 icon" title="Download" src="icons/down-arrow.svg">
<img class="three-grid-icon-3 icon" title="Upload" src="icons/up-arrow.svg">
</div>
<!-- row of values representing current network state -->
<div class="three-grid">
<label class="three-grid-label-1 label-medium" title="Number of connected devices">6</label>
<label class="three-grid-label-2 label-medium" title="Data download total in MB">21.7</label>
<label class="three-grid-label-3 label-medium" title="Data upload total in MB">3.4</label>
</div>
<!-- row of labels for each network statistic column -->
<div class="three-grid">
<label class="three-grid-label-1 label-small font-gray">DEVICES</label>
<label class="three-grid-label-2 label-small font-gray">DOWNLOAD</label>
<label class="three-grid-label-3 label-small font-gray">UPLOAD</label>
</div>
</div>
</div>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
</div>
<hr style="width: 100%;">
<h3>Network List with Nav Bars</h3>
<!-- Network list with nav bars -->
<div style="background-color: var(--moon-gray);">
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<h1 class="nav-title">WiFi Networks</h1>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<!-- NETWORK CARD -->
<!-- NETWORK INFO BOX -->
<div class="card center">
<div class="list-container center">
<ul class="list">
<li class="list-item primary-bg">
<img class="icon icon-active icon-medium list-icon" src="icons/wifi.svg">
<p class="list-text">Cottage</p>
<label class="label-small list-label font-gray" title="Status">Connected</label>
</li>
<li class="list-item secondary-bg">
<img class="icon icon-inactive icon-medium list-icon" src="icons/wifi.svg">
<p class="list-text">TranquilGarden</p>
<label class="label-small list-label font-gray" title="Status">Available</label>
</li>
<li class="list-item">
<p class="list-text">Deli @TheVillage</p>
<label class="label-small list-label font-gray" title="Status">Not in range</label>
</li>
<li class="list-item">
<p class="list-text">H ⅄ P H Λ L</p>
<label class="label-small list-label font-gray" title="Status">Not in range</label>
</li>
</ul>
</div>
</div>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
</div>
<hr style="width: 100%;">
<h3>Network Details with Nav Bars</h3>
<!-- Network details with nav bars -->
<div style="background-color: var(--moon-gray);">
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<h1 class="nav-title">WiFi Network</h1>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<!-- NETWORK CARD -->
<!-- NETWORK INFO BOX -->
<div class="card center">
<!-- status -->
<!-- signal strength -->
<!-- ip of client (if connected) -->
<!-- input for password -->
<!-- connect button -->
<!-- cancel button -->
<div class="two-grid capsule" title="PeachCloud network mode and status">
<!-- NETWORK STATUS ICON -->
<!-- icon with label molecule -->
<!-- left column -->
<div class="grid-column-1">
<img class="center icon icon-active" src="icons/wifi.svg">
<label class="center label-small font-gray" title="Access Point Status">AVAILABLE</label>
</div>
<!-- right column -->
<div class="grid-column-2">
<label class="label-small font-gray" title="Access Point SSID">SSID</label>
<p class="card-text" title="SSID">ZenGarden</p>
<label class="label-small font-gray" title="Access Point key management protocol">SECURITY</label>
<p class="card-text" title="Key management protocol of WiFi access point">WPA2-PSK</p>
<label class="label-small font-gray" title="Signal Strength">SIGNAL</label>
<p class="card-text" title="Signal strength of WiFi access point">73%</p>
</div>
</div>
<!-- Standard input with button -->
<div class="card-container" style="padding-top: 0;">
<button class="center button button-primary">Connect</button>
<button class="center button button-secondary">Modify</button>
<button class="center button button-warning">Forget</button>
</div>
</div>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/">
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
</div>
<hr style="width: 100%;">
<h3>Network Add Credentials with Nav Bars</h3>
<!-- Network add credentials with nav bars -->
<div style="background-color: var(--moon-gray);">
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<h1 class="nav-title">Add WiFi Network</h1>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<!-- NETWORK CARD -->
<!-- NETWORK ADD CREDENTIALS FORM -->
<div class="card center">
<!-- Standard input with button -->
<div class="card-container">
<input class="center input" type="text" placeholder="SSID" title="Network name (SSID) for WiFi access point">
<input class="center input" type="password" placeholder="Password" title="Password for WiFi access point">
<button class="center button button-primary">Connect</button>
<button class="center button button-secondary">Cancel</button>
<!-- NOTE : used to share ux information with the user -->
<div class="center capsule info-border" style="width: 70%;">
<p class="label-small font-gray" style="padding-left: 5px;">This website will be unresponsive while the access point is disabled and the WiFi connection attempt is made.</p>
</div>
</div>
</div>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/">
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
</div>
<hr style="width: 100%;">
<h3>WiFi Data Total and Alerts with Nav Bars</h3>
<!-- WiFi data alerts with nav bars -->
<div style="background-color: var(--moon-gray);">
<!-- Top nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="" title="Back">
<img class="icon-medium nav-icon-left icon-active" src="icons/back.svg" alt="Greater-than symbol or backward-facing arrow">
</a>
<h1 class="nav-title">Network Data Usage</h1>
<a class="nav-item" href="/logout" title="Logout">
<img class="icon-medium nav-icon-right icon-active" src="icons/exit.svg" alt="Exit icon: an arrow pointing out from an open door">
</a>
</nav>
<!-- NETWORK CARD -->
<!-- WIFI DATA ALERTS -->
<div class="card center card-container">
<div class="center stack capsule" style="width: 70%;">
<div class="flex-grid">
<label class="label-large" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
<label class="center-text label-small font-gray">USAGE TOTAL</label>
</div>
<div class="card-container container">
<div>
<img class="icon" title="Warning" src="icons/alert.svg">
</div>
<div>
<label class="label-small font-near-black"><input class="alert-input" placeholder="0" type="text" title="Warning threshold value">MB</label>
<label class="label-small font-gray" style="padding-top: 0.25rem;">WARNING THRESHOLD</label>
</div>
<div>
<input title="Activate download warning" type="checkbox">
</div>
<div>
<img class="icon" title="Cutoff" src="icons/scissor.svg">
</div>
<div>
<label class="label-small font-near-black"><input class="alert-input" placeholder="0" type="text" title="Cutoff threshold value">MB</label>
<label class="label-small font-gray" style="padding-top: 0.25rem;">CUTOFF THRESHOLD</label>
</div>
<div>
<input title="Activate download cutoff" type="checkbox">
</div>
</div>
<div>
<div style="grid-column-start: 1; grid-column-end: 4;">
<button class="center button button-primary">Update</button>
<button class="center button button-secondary">Cancel</button>
</div>
</div>
</div>
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="icons/hermies.png" alt="Logo for Secure Scuttlebutt: Hermies the Hermit Crab contained within a hexagon">
</a>
<a class="nav-item" href="/">
<img class="icon nav-icon-left" src="icons/peach-icon.png" alt="PeachCloud logo consisting of a peach with green leaves on the left and two overlapping clouds to the right" title="Home">
</a>
<a class="nav-item" href="/help">
<img class="icon-medium nav-icon-right icon-active" title="Help" src="icons/question-circle.svg" alt="Question symbol inside of a circle">
</a>
</nav>
</div>
<hr style="width: 100%;">
<h3>Radial Menu</h3>
<!-- RADIAL MENU -->
<div class="grid">
<!-- top-left -->
<!-- SYSTEM STATUS LINK AND ICON -->
<a class="top-left" href="/hello">
<div class="circle circle-small">
<img class="icon-medium" src="icons/heart-pulse.svg">
</div>
</a>
<!-- top-middle -->
<!-- CURRENT USER LINK AND ICON -->
<a class="top-middle" href="/hello">
<div class="circle circle-small">
<img class="icon-100" src="icons/glyph.png">
</div>
</a>
<!-- top-right -->
<!-- PEERS LINK AND ICON -->
<a class="top-right" href="/hello">
<div class="circle circle-small">
<img class="icon-medium" src="icons/users.svg">
</div>
</a>
<!-- middle of menu -->
<a class="middle" href="/hello">
<div class="circle circle-large">
</div>
</a>
<!-- bottom-left -->
<!-- SYSTEM SETTINGS LINK AND ICON -->
<a class="bottom-left" href="/hello">
<div class="circle circle-small">
<img class="icon-medium" src="icons/cog.svg">
</div>
</a>
<!-- bottom-middle -->
<!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->
<a class="bottom-middle" href="/hello">
<div class="circle circle-small">
<img class="icon-medium" src="icons/book.svg">
</div>
</a>
<!-- bottom-right -->
<!-- MESSAGES LINK AND ICON -->
<a class="bottom-right" href="/hello">
<div class="circle circle-small">
<img class="icon-medium" src="icons/envelope.svg">
</div>
</a>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,82 @@
list of attributes to be removed from `peachcloud.css` for mobile
[ tested on Galaxy S5, iPhone 5 ]
@media only screen and (min-width: 350px)
main {
align-items: center;
}
main {
width
}
card {
background-color
border-radius
/* needed on network_list: maybe set on list-container instead */
width: var(--max-width-5);
box-shadow
margin-top
margin-bottom
}
/* for network_add: may or may not be necessary */
card-container {
padding
}
list-container {
padding
}
/* network_add: inputs and buttons look nice with this */
card-container {
width: var(--max-width-5);
}
/* network_add: inputs and buttons look nice with this */
button {
width: 70%;
min-width
max-width
padding
}
/* needed for desktop (to place bottom nav at bottom of window) */
html {
height: 100%; /* wrecks bottom nav placement on my phone */
}
/* ADD THIS */
input {
width: 80%;
}
-----
testing with peach-web on laptop:
network_card | looks good
network_list | looks good
network_add | too small & buttons (best without card-container class)
network_detail | buttons different sizes
look at the .input attributes
- we need to have consistency between button & input (esp. widths)
network_detail
- sometimes the background colour is white on my phone
-----
breakpoints:
600px, 900px, 1200px, 1800px
"if you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up"
```
@media only screen (min-width: 600px) {
...
}
```

View File

@ -0,0 +1,106 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>peach-patterns</title>
<meta name="description" content="PeachCloud Pattern Library">
<meta name="author" content="glyph">
<link rel="stylesheet" href="css/peachcloud.css">
<style>@import url("css/_variables.css");</style>
</head>
<style>
.container {
display: grid;
grid-template-columns: 2fr 3fr 2fr;
grid-template-rows: auto;
grid-row-gap: 0.5rem;
align-items: center;
margin-bottom: 1rem;
}
.input {
margin-bottom: 0;
}
</style>
<body style="background-color: var(--near-white);">
<main>
<div class="card center" style="width: 100%; margin-top: 1rem;">
<div class="card-container container" style="border: 1px solid #111;">
<div class="center">
<img class="icon" title="Download" src="icons/down-arrow.svg">
</div>
<div>
<p class="card-text label-medium" style="padding-bottom: 0;">WiFi</p>
<label class="label-small">DOWNLOAD TOTAL</label>
</div>
<div style="justify-self: left;">
<div class="flex-grid">
<label class="label-large" title="Data download total in MB">158</label>
<label class="label-small font-near-black">MB</label>
</div>
</div>
<div class="center">
<img class="icon" title="Warning" src="icons/alert.svg">
</div>
<div>
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 7rem; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
<label class="label-small" style="padding-top: 0.25rem;">WARNING THRESHOLD</label>
</div>
<div>
</div>
<div class="center">
<img class="icon" title="Critical" src="icons/scissor.svg">
</div>
<div>
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 7rem; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
<label class="label-small" style="padding-top: 0.25rem;">CRITICAL THRESHOLD</label>
</div>
<div>
</div>
</div>
<div class="card-container container" style="border: solid 1px #111;">
<div class="center">
<img class="icon" title="Upload" src="icons/up-arrow.svg">
</div>
<div>
<p class="card-text label-medium" style="padding-bottom: 0;">WiFi</p>
<label class="label-small">UPLOAD TOTAL</label>
</div>
<div style="justify-self: left;">
<div class="flex-grid">
<label class="label-large" title="Data upload total in MB">715</label>
<label class="label-small font-near-black">MB</label>
</div>
</div>
<div class="center">
<img class="icon" title="Warning" src="icons/alert.svg">
</div>
<div>
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 7rem; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
<label class="label-small" style="padding-top: 0.25rem;">WARNING THRESHOLD</label>
</div>
<div>
</div>
<div class="center">
<img class="icon" title="Critical" src="icons/scissor.svg">
</div>
<div>
<label class="list-text font-near-black"><input class="input" style="text-align: right; width: 7rem; margin-right: 5px;" placeholder="0" type="text" title="Warning threshold value">MB</label>
<label class="label-small" style="padding-top: 0.25rem;">CRITICAL THRESHOLD</label>
</div>
<div>
</div>
</div>
<div>
<div style="grid-column-start: 1; grid-column-end: 4;">
<button class="center button">Update</button>
<button class="center button">Cancel</button>
</div>
</div>
</div>
</main>
</body>
</html>