wework / plasma Goto Github PK

View Code? Open in Web Editor NEW

47.0 47.0 11.0 70.49 MB

CSS 17.21% JavaScript 82.73% HTML 0.03% Shell 0.03%

plasma's People

Contributors

Stargazers

Watchers

Forkers

martyngroberts virginiasu datree-wework-demo basara669 orangecig tchacca illimag jamescobalt whelton jasonbarry dimagutierrez

plasma's Issues

Some longer location names do not fit in sidebar

Side bar

Preview:

CSS:

/* Side bar */
background-color: $purple100;
width: 70px;
height: 100%;

Related issues:

Side bar item #27
Brand item #28
User & settings item #29
Support item #30
Search item #31

Table header <th>

Preview:

CSS:

/* <th> */
height: 70px;
border-bottom: 1px solid $gray200;
font: $bold5;
color: $weworkblack;

/* Sorted by <th> */
border-bottom: 3px solid $weworkyellow;

Select

Related issue: Options & option groups #16

Preview:

CSS (limited):

Search CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* css arrow */
background-image: 
  linear-gradient(45deg, transparent 50%, $weworkblack 50%),
  linear-gradient(135deg, $weworkblack 50%, transparent 50%);
background-position: 
  calc(100% - 15px) 16px, 
  calc(100% - 10px) 16px;
background-size: 
  5px 5px, 
  5px 6px;
background-repeat: no-repeat;

Large:

/* css arrow */
background-position: 
  calc(100% - 20px) 21px, 
  calc(100% - 15px) 21px;

Textarea

Preview:

CSS (limited):

Search CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* Textarea */
height: none;
padding: 10px;
(minimum 4 rows)

Large:

/* Textarea */
padding: 15px;

Number input

Preview:

CSS (limited):

Number input CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* Number input */
min-width: 60px;

/* Plus/minus control (normal) */
width: 15px;
background-color: $white300;
border: 1px solid darken($white300, 10%);

/* Plus/minus (active) */
background-color: darken($white300, 10%);

/* Plus/minus control (disabled) */
border-color: $gray300;
background-color: $white;
color: $gray300;

/* Plus/minus control (error) */
border-color: $warningred;
background: $warningred;
color: $white;

Large:

/* Number input */
min-width: 70px;

Link button style

There are 5 styles for buttons in Plasma. This is the 'link' and 'link with an icon' style(s).

This button style has 4 states, including as they appear left-to-right below: normal, hover, active and disabled.

Link (with no icon) design:

Link (with icon) design:

Assets:

Refresh icon (as shown above, to test)

CSS (limited):

/* Normal */
background-color: none;
border: none;
height: 38px;
padding: 0;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* :before (link with an icon) */
content: "";
display: block;
background: url("path_to_icon.png") no-repeat;
width: 30px;
height: 30px;
float: left;
margin: 4px 0;

/* Hover */
opacity: 0.7;

/* Active */
opacity: 0.4;

/* Disabled */
opacity: 0.1;

Loading icon (on button)

Related to loading state on buttons:

I was originally recommending the 2nd top-left spinner seen in visual above (code here: http://projects.lukehaas.me/css-loaders/) ...But I wrestled with the code and it was a bitch to edit.

Thinking now to keep it simpler... What do you think of this one?http://codepen.io/roomfive/pen/XjkJmo

Other options I like at: http://tobiasahlin.com/spinkit/

Row that opens the side drawer

Rows that on-click open the side drawer behave like this:

Preview:

CSS:

/* Row on hover */
background-color: rgba(255,207,113,0.05); 
/* $weworkyellow @ 5% */

Multi-select and option tags

Related issue: Select #15

Preview:

Assets:

'x' icon

CSS (limited):

Multi-select CSS largely the same as a select (see #15).
Additions and differences below:

Regular:

/* Multi-select */
padding: 3px 0;

/* Option tag */
height: 32px;
padding: 0 30px 0 10px;
border-radius: 2px;
margin-left: 3px;
background-color: $purple200;
font: $regular2;
color: $gray600;

/* Option tag ‘x’ icon */
background-image: 
  url(path_to_icon.png);
width: 30px;
height: 30px;
background-position: center right;

Large:

/* Option tag */
height: 42px;

Inline label

Related issue: Legend & label (#22)

Preview:

CSS (limited):

Regular:

/* Inline label */
font: $bold5;
line-height: 40px;
margin-right: 20px;

Large:

/* Inline label */
font: $bold4;
line-height: 50px;

Actions <td>

Preview:

CSS:

/* Action <td> */
padding: 0 0 0 4px;

/* Icon */
height: 30px;
width: 30px;
color: $gray300;

Note:
The actions menu on-hover of the action icon still needs design spec. Will follow soon.

Field caption

'Field caption' is an optional ‘caption’ below a form field or fieldset, with three use cases:

Instruction: Provide more context to what the form field is asking.
Error: Why is this form field showing an error.
Link: A link or action related to the form field.

Preview:

CSS:

Regular:

* Instruction (text below) */
font: $regular3;
color: $gray200;
margin-top : 5px;

/* Error (text below) */
font: $bold6;
color: $warningred;
margin-top : 5px;

/* Link/action (text below) */
font: $bold6;
color: $linkblue;
margin-top : 5px;

/* Disabled state */
color: $gray300;

Large:

/* No change */

Table cell <td>

Preview:

CSS:

/* <td> */
padding: 10px 0;
min-height: 40px;
border-bottom: 1px solid $gray300;
font: $regular2;
color: $weworkblack;

/* Links */
font-weight: bold;
color: $linkblue;

/* First <td> with text */
padding-left: 20px;

Table <table>

Preview:

CSS:

/* <table> */
background: $white;
border-top: 1px solid $gray300;
border-left: 1px solid $gray300;
border-right: 1px solid $gray300;
border-radius: 2px;
border-spacing: 0;
width: 100%;

Related issues:

Table cell #47
Table header #48
Null state for a #49
Row that opens the side drawer #50

Font styles

9 font styles for Plasma:

Bold 1

/* Bold 1 */
font-family: Helvetica;
font-weight: bold;
font-size: 80px;
letter-spacing: -3px;
line-height: 80px;

Bold 2

/* Bold 2 */
font-family: Helvetica;
font-weight: Bold;
font-size: 40px;
letter-spacing: -1px;
line-height: 44px;

Bold 3

/* Bold 3 */
font-family: Helvetica;
font-weight: Bold;
font-size: 30px;
letter-spacing: -0.3px;
line-height: 30px;

Bold 4

/* Bold 4 */
font-family: Helvetica;
font-weight: Bold;
font-size: 16px;
line-height: 20px;

Bold 5

/* Bold 5 */
font-family: Helvetica;
font-weight: Bold;
font-size: 13px;
line-height: 20px;

Bold 6

/* Bold 5 */
font-family: Helvetica;
font-weight: Bold;
font-size: 11px;
line-height: 18px;

Regular 1

/* Regular 1 */
font-family: Helvetica;
font-weight: Regular;
font-size: 16px;
line-height: 20px;

Regular 2

/* Regular 2 */
font-family: Helvetica;
font-weight: Regular;
font-size: 13px;
line-height: 20px;

Regular 3

/* Regular 3 */
font-family: Helvetica;
font-weight: Regular;
font-size: 11px;
line-height: 18px;

Overflow menu

Preview:

CSS (limited):

/* Icon part of menu */
background: $white;
width: 38px; /* 4px either side of 30x30 action icon */
height: 30px;
(icon) color: $gray200;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);

/* CSS for menu part same as options for a select #16 */

Alert bar

An alert bar slides down from the top of the screen, overlaying all page content. There are three types of alert bar as seen below:

Warning:
Red with button to dismiss the alert bar

Error:
Red with button to refresh the page

Message:
Purple with button to dismiss the alert bar

CSS:

/* Alert bar */
background-color: $warningred;
opacity: 0.94;
height: 70px;
padding: 0 30px;

/* Message alert bar */
background-color: $purple200;

/* Text to the left */
font: $bold5;
color: $gray600;

/* Link + icon style button to the far right */

Icons for button:

Both .svg icons should be $gray600 color.

Legend & label

Related issue: Inline label (#32)

Preview:

CSS (limited):

Regular:

/* Label & legend */
font: $bold5;
margin-bottom: 5px;

Large:

/* Label & legend */
font: $bold4;

Tooltip

Preview:

CSS (limited):

/* Tooltip */
background-color: rgba(36,39,40,0.94); /* $weworkblack @ 94% */
padding: 15px;
min-width: 150px;
font: $bold6;
color: $gray600;
border-radius: 3px;
text-align:left;

Secondary button style

There are 5 styles for buttons in Plasma. This is the secondary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

Design:

CSS:

Hopefully the below will help :) Doesn't cover everything, but does cover off some of the core css for each state.

/* Normal */
background-color: $white300;
border: 1px solid darken($white300, 10%);
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: darken($white300, 5%);
border-color: darken($white300, 10%);

/* Active */
background-color: darken($white300, 10%);
border-color: darken($white300, 20%);

/* Loading icon */
width: 20px;
height: 20px;
color: #000;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

Search item

Preview:

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* Search side bar item */
background-color: rgba(0,0,0,0.1); /* #000 @ 10% */
/* Icon centered vertically */
/* No text on search item */

Avatar <td>

Preview:

CSS:

/* Avatar <td> */
padding: 10px 0 10px 10px;

/* Avatar */
width: 30px;
height: 30px;
border-radius: 100%;

Perhaps we could play with a subtle animation on load of the modal (also upon exiting it)... Maybe the purple overlay fades in quick, then after a very short delay the modal loads (zoomIn). Done a quick demo here: https://codepen.io/roomfive/pen/WGLdBP

CSS:

/* Modal (outer container) */
min-width: 500px;
border-radius: 10px;
background-color: $white;
box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
padding: 40px 40px 0 40px;

/* Header (above frame) */
font: $bold3;
margin-bottom: 30px;

/* Frame (inner container) */
border: 1px dashed $gray300;
border-radius: 2px;
padding: 30px;

/* Buttons (below frame) */
margin: 30px 0;

/* Fullscreen overlay */
opacity: 0.94;
Background-color: $purple100;

Spec:

Also see related issue: 'Tabs in a modal' #41

Side bar item

Preview:

CSS:

/* Side bar item */
height: 50px; /* 70px with padding */
padding: 10px 0;
font: $regular2;
color: $gray600;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.3);

/* Icon */
width: 30px;
height: 30px;
/* Icon color is $gray300 */

/* Active state (:before) */
background-color: $purple200;
width: 5px;
height: 100%;
display: block;

/* Active state */
background-color: rgba(89,105,139,0.1); /* $purple200 @ 10% */

/* Hover state */
background-color: $purple200;

Checkbox

Preview:

CSS (limited):

Search CSS largely the same as a radio button (see #20).
Additions and differences below:

Regular:

/* Input */
width: 16px;
height: 16px;
border-radius: 2px;

Support item

Preview:

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* Support side bar item */
border-bottom: none;
margin-bottom: 10px;

Hero screen

Talk to me (Andrew) about this one... Had an idea for a transition between the log in screen and the opening screen of the product (on load) that will make more sense explaining in person :)

Preview:

Outline:

CSS (limited):

/* Log in screen */

/* H1 */
font: $bold1;
color: $gray600;
margin-bottom: 40px;

/* Use the primary button */

/* H1 and button */
width: 70%;
max-width: 800px;
padding: 0 15%;
/* H1 and button vertically centered */

/* Side bar */
background-color: none;
/* Only brand item present in side bar */

/* Background */
background-size: cover;

Photos used in mocks:

Sunset
NYC (I'll need to crop this one)
Space

Text input

Preview:

Assets:

Error icon

CSS (limited):

Regular

/* Text input */
background: $white;
height: 38px;
padding: 0 10px;
border: 1px solid $gray300;
border-radius: 2px;
font: $regular2;
color: $weworkblack;

/* Placeholder */
color: $gray200;

/* Hover */
border-color: $gray200;

/* Focus */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Disabled */
color: $gray300;
cursor: not-allowed;

/* Instruction (text below) */
font: $regular3;
color: $gray200;
margin-top : 5px;

/* Error (input) */
border-color: $warningred;

/* Error (text below) */
font: $bold6;
color: $warningred;
margin-top : 5px;

Large

/* Text input */
height: 48px;
padding: 0 15px;
font: $regular1;

Empty state for a table

In the event that a table has no data, the rows are replaced with a simple message explaining why/that the table has no data.

Preview:

CSS:

/* Empty state message */
font: $bold3;
color: $gray300;
padding: 40px;

Range input

Preview:

CSS:

Regular:

/* Slider bar */
height: 3px;
border-radius: 100%;
background-color: $gray300;
margin: 7px 0 12px 0;

/* Slider */
width: 9px;
height: 9px;
border: 3px solid $purple200;
border-radius: 100%;
background-color: $white;

/* Values */
font: $regular3;
color: $gray200;

Large:

/* Slider bar */
margin: 11px 0 16px 0;

/* Values */
font: $regular2;

Tertiary button style

There are 5 styles for buttons in Plasma. This is the tertiary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

Design:

CSS (limited):

/* Normal */
background-color: none;
border: 1px solid $weworkblack;
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: rgba(0, 0, 0, 0.05);

/* Active */
background-color: rgba(0, 0, 0, 0.1);

/* Loading icon */
width: 20px;
height: 20px;
color: #000;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

See also: Tertiary (light) button style (issue #37)

Search

Preview:

Assets:

Search icon

CSS (limited):

Search CSS largely the same as a text input (see #14) and select (see #15).
Additions and differences below:

Regular:

/* Search */
text-indent: 38px;

/* Search icon (normal) */
color: $gray300;
width: 30px;
height: 30px;
margin: 4px;

/* Search icon (hover) */
color: $gray200;

Large:

/* Search */
text-indent: 48px;

/* Search icon */
margin: 9px;

Prefix and suffix (on a text input)

Preview:

CSS:

Regular:

padding: 0 10px;
font: $regular2;
color: $weworkblack;
background-color: $gray600;
border-color: $gray300;

Large:

padding: 0 15px;
font: $regular1;

Fixed left

Preview:

CSS (limited):

/* Fixed left */
height: 100%;
min-width: 200px;
padding: 0 30px;
border-right: 1px dashed $gray300;

/* Fixed left (fixed position) */
position: fixed;
margin-top: 30px;

Preview (in-situ):

Update to SASS hex colors

Note: These are aren't 'final', but well progressed, and necessary for some further issues coming up related to buttons (issues for those following shortly). Any changes to these colors will be minimal in future though.

Some tweaks to the hex color values (and naming):

WeWork Black
#252729

Gray 100
#575757

Gray 200
#C2C2C2

Gray 300
#E0E0E0

Gray 400
#EAEBEC

Gray 500
#F4F4F4

Gray 600
#FAF9F8

White
#FFFFFF

White 100
#FFFEF2

White 200
#FCF9EB

White 300
#ECE9D9

White 400
#D7D4C4

White 500
#969186

WeWork Yellow
#FFCF71

WeLive Red
#EF4822

Link Blue
#5499C3

Warning Red
#D86262

Purple 100
#2B3445

Purple 200
#59698B

Image <td>

Preview:

CSS:

/* Image <td> */
padding: 10px 0 10px 10px;

/* Image */
width: 100px;
height: 60px;
background-image: url();
background-size: cover;

Primary button style

There are 5 styles for buttons in Plasma. This is the primary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

Design:

CSS:

Hopefully the below will help :) Doesn't cover everything, but does cover off some of the core css for each state.

/* Normal */
background-color: $weworkyellow;
border: 1px solid darken($weworkyellow, 15%);
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: darken($weworkyellow, 5%);
border-color: darken($weworkyellow, 20%);

/* Active */
background-color: darken($weworkyellow, 10%);
border-color: darken($weworkyellow, 30%);

/* Loading icon */
width: 20px;
height: 20px;
color: #FFF;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

Radio buttons

Preview:

CSS (limited):

Regular:

/* Input & label */
margin: 3px 0;

/* Input */
width: 16px;
height: 16px;
border-radius: 100%;
background: $white;
border: 1px solid $gray300;

/* Label (normal) */
margin-left: 10px;
font: $regular2;
color: $weworkblack;

/* Checked (dot) */
height: 8px;
width: 8px;
border-radius: 100%;
background-color: $weworkblack;
top: 3px;
left: 3px;
transition: background 0.2s linear;

/* Hover (input) */
border-color: $gray200;

/* Hover (label) */
opacity: 0.7;

/* Focus (input) */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Focus (label) */
opacity: 0.4;

/* Error (input) */
border-color: $warningred;

/* Error (text below fieldset) */
font: $bold6;
color: $warningred;

Large:

/* Input & label */
margin: 6px 0;

/* Label (normal) */
font: $regular1;

Null state for a <td>

To signify that a table row is cancelled, complete, occupied etc.

Preview:

CSS:

/* Null <td> */
background-color: $gray600;

Segmented card

Only a small tweak.

The border-color for the left and right segment should be Gray 300 #E0E0E0

Alert overlay

Preview:

Outline:

CSS (limited):

/* Messaging */

/* Fullscreen overlay */
background-color: $purple100;
opacity: 0.94;

/* H1 and button */
width: 70%;
max-width: 800px;
padding: 0 15%;

/* H1 */
font: $bold1;
color: $gray600;
margin-bottom: 40px;

/* Use the primary button for the primary action */

/* Use the tertiary (light) button for the secondary action, if there is one */

Brand item

Preview:

.svg of we brand: https://www.dropbox.com/s/6lwe4uajvaqz54r/we-brand.svg?dl=0

CSS:

/* Brand item */
height: 70px;

/* Logo */
height: 14px;
/* logo color is $white *)
/* logo centered vertically and horizontally */

Options & option groups

Related issue: Select #15

Preview:

CSS (limited):

Regular:

/* Options */
background: $white;
padding: 10px 0;
font: $regular2;
line-height: 30px;
color: $weworkblack;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);

/* Hover (an option) */
background-color: rgba(0, 0, 0, 0.05);
(height: 30px;)

/* <optgroup> */
font: $bold6;
line-height: 30px;

Large:

/* css arrow */
/* No difference for large size inputs */

Date input

Preview:

Assets:

Date/calendar .svg icon

CSS (limited):

Search CSS largely the same as a text input (see #14) and select (see #15).
Additions and differences below:

Regular:

/* Search */
text-indent: 38px;

/* Search icon (normal) */
color: $gray300;
width: 30px;
height: 30px;
margin: 4px;

/* Search icon (hover) */
color: $gray200;

Large:

/* Search */
text-indent: 48px;

/* Search icon */
margin: 9px;

Tabs in a modal

Related to modal issue #25

CSS:

/* Tabs */
padding: 14px 0 0 14px; /* so first tab aligns with labels */
border-bottom: 1px solid $gray300;

/* Tab */
height: 38px;
padding: 0 15px;
font: $regular2;
color: $weworkblack;
background-color: rgba(255,207,113,0.05); /* $weworkyellow @ 5% opacity) */
border: 1px solid $gray300;

border-radius: 2px 2px 0 0; /* first tab */
border-radius: 0; /* middle tab(s) */
border-radius: 0 2px 0 0; /* last tab */

/* Active tab */
background-color: $white;
border-bottom: 1px solid $white;

/* Hover (non-active tab) */
background-color: rgba(0, 0, 0, 0.02);

/* Focus (non-active tab) */
background-color: rgba(0, 0, 0, 0.05);

Spec:

Pill

Preview:

CSS:

/* Pill */
font: $regular3;
color: $gray600;
padding: 0 5px;
background-color: $purple200;
border-radius: 2px;

User & settings item

Preview:

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* User & settings item */
padding: 10px 0 20px 0;

/* User avatar */
width: 34px;
height: 34px;
border: 3px solid rgba(0,0,0,0.1);
margin: 0 0 5px 0;

wework / plasma Goto Github PK

plasma's People

Contributors

Stargazers

Watchers

Forkers

plasma's Issues

Recommend Projects

Recommend Topics

Recommend Org