Import pattern library #4
2
peach-patterns/.gitignore
vendored
Normal file
2
peach-patterns/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
notes
|
||||
system_usage.html
|
||||
19
peach-patterns/README.md
Normal file
19
peach-patterns/README.md
Normal 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
|
||||
177
peach-patterns/css/_variables.css
Normal file
177
peach-patterns/css/_variables.css
Normal 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
|
||||
*/
|
||||
}
|
||||
80
peach-patterns/css/css_class_names
Normal file
80
peach-patterns/css/css_class_names
Normal 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
|
||||
871
peach-patterns/css/peachcloud.css
Normal file
871
peach-patterns/css/peachcloud.css
Normal 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;
|
||||
}
|
||||
56
peach-patterns/icons/alert.svg
Normal file
56
peach-patterns/icons/alert.svg
Normal 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 |
39
peach-patterns/icons/back.svg
Normal file
39
peach-patterns/icons/back.svg
Normal 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 |
2
peach-patterns/icons/back_low.svg
Normal file
2
peach-patterns/icons/back_low.svg
Normal 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 |
7
peach-patterns/icons/book.svg
Normal file
7
peach-patterns/icons/book.svg
Normal 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 |
7
peach-patterns/icons/cog.svg
Normal file
7
peach-patterns/icons/cog.svg
Normal 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 |
5
peach-patterns/icons/devices.svg
Normal file
5
peach-patterns/icons/devices.svg
Normal 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 |
46
peach-patterns/icons/down-arrow.svg
Normal file
46
peach-patterns/icons/down-arrow.svg
Normal 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 |
6
peach-patterns/icons/envelope.svg
Normal file
6
peach-patterns/icons/envelope.svg
Normal 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 |
7
peach-patterns/icons/exit.svg
Normal file
7
peach-patterns/icons/exit.svg
Normal 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 |
BIN
peach-patterns/icons/glyph.png
Normal file
BIN
peach-patterns/icons/glyph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
8
peach-patterns/icons/heart-pulse.svg
Normal file
8
peach-patterns/icons/heart-pulse.svg
Normal 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 |
BIN
peach-patterns/icons/hermies.png
Normal file
BIN
peach-patterns/icons/hermies.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
peach-patterns/icons/peach-icon.png
Normal file
BIN
peach-patterns/icons/peach-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
7
peach-patterns/icons/power-switch.svg
Normal file
7
peach-patterns/icons/power-switch.svg
Normal 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 |
8
peach-patterns/icons/question-circle.svg
Normal file
8
peach-patterns/icons/question-circle.svg
Normal 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 |
117
peach-patterns/icons/router.svg
Normal file
117
peach-patterns/icons/router.svg
Normal 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 |
82
peach-patterns/icons/scissor.svg
Normal file
82
peach-patterns/icons/scissor.svg
Normal 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 |
68
peach-patterns/icons/signal.svg
Normal file
68
peach-patterns/icons/signal.svg
Normal 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 |
12
peach-patterns/icons/smile.svg
Normal file
12
peach-patterns/icons/smile.svg
Normal 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 |
46
peach-patterns/icons/up-arrow.svg
Normal file
46
peach-patterns/icons/up-arrow.svg
Normal 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 |
9
peach-patterns/icons/users.svg
Normal file
9
peach-patterns/icons/users.svg
Normal 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 |
1
peach-patterns/icons/wifi.svg
Normal file
1
peach-patterns/icons/wifi.svg
Normal 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
756
peach-patterns/index.html
Normal 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>
|
||||
82
peach-patterns/mobile_first
Normal file
82
peach-patterns/mobile_first
Normal 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) {
|
||||
...
|
||||
}
|
||||
```
|
||||
106
peach-patterns/wifi_alerts.html
Normal file
106
peach-patterns/wifi_alerts.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user