@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
outline: 0 none; }
ol,
ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q,
blockquote {
quotes: "“" "”" "‘" "’"; }
q:before,
blockquote:before {
content: open-quote; }
q:after,
blockquote:after {
content: close-quote; }
a img {
border: none; }
menu,
summary,
main,
picture,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block; }
img {
height: auto; }
picture img {
width: 100%; }
picture img {
width: 100%; }
img,
object,
embed,
video,
iframe {
max-width: 100%; }
sub {
top: 6px;
vertical-align: bottom; }
sup {
top: -6px;
vertical-align: top; }
small {
font-size: smaller; }
/*doc
---
categories: Variables
title: Locale Variables
name: 00_localevarsintro
---
Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic.
## Example
Here are a couple examples of how you can use the locale variables in your code.
### Basic Usage
```sass_example
.i18n-ja_JP {
background-color: #f00;
}
```
```css_example
.i18n-jp {
background-color: #f00;
}
```
### Parent selector usage
```sass_example
.someclass {
color: red;
.i18n-ja_JP & {
color: purple;
}
}
```
```css_example
.someclass {
color: red;
}
.i18n-jp .someclass {
color: purple;
}
```
## Let's talk about CSS specificity
As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package.
**YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things.
When writing Sass, keep asking yourself this question:
> What will this selector look like when it is rendered in plain CSS?
If you start seeing a lot of nesting ask yourself:
> Can this become less specfiic without messing up styles downstream?
If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using
Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables.
*/
/*doc
---
categories: Variables
title: All available locale variables
name: 02_localevarexample
parent: 00_localevarsintro
---
Here are all the variables that are currently available
```sass_example
// Super regions
$region-na: superregion-north-america;
$region-eu: superregion-europe;
$region-apac: superregion-apac;
$region-me: superregion-middle-east;
// North America
$locale-canada_english: i18n-en_CA; // en_CA
$locale-canada_french: i18n-fr_CA; // fr_CA
$locale-mexico_spanish: i18n-es_MX; // es_MX
$locale_us: i18n-en; // US
// Europe
$locale-belgium_french: i18n-fr_BE; // fr_BE
$locale-belgium_dutch: i18n-nl_BE; // nl_BE
$locale-denmark: i18n-da; // da_DK
$locale-germany: i18n-de; // de_DE
$locale-france: i18n-fr; // fr_FR
$locale-great_britain: i18n-en_GB; // en_GB
$locale-italy: i18n-it; // it_IT
$locale-ireland: i18n-en_IE; // en_IE
$locale-netherlands: i18n-nl; // nl_NL
$locale-norway: i18n-no; // no_NO
$locale-austria: i18n-de_AT; // de_AT
$locale-switzerland_german: i18n-de_CH; // de_CH
$locale-switzerland_french: i18n-fr_CH; // fr_CH
$locale-switzerland_italian: i18n-it_CH; // it_CH
$locale-sweden: i18n-sv_SE; // sv_SE
$locale-other_europe: i18n-en_EU; // en_EU
$locale-finland: i18n-fi_FI; // fi_FI
$locale-luxembourg_french: i18n-fr_LU; // fr_LU
$locale-luxembourg_german: i18n-de_LU; // de_LU
$locale-portugal: i18n-pt_PT; // pt_PT
$locale-spain: i18n-es_ES; // es_ES
// Asia-Pacific
$locale-australia: i18n-en_AU; // en_AU
$locale-china: i18n-zh_CN; // zh_CN
$locale-hongkong: i18n-en_HK; // en_HK
$locale-hongkong_chinese: i18n-zh_HK; // zh_HK
$locale-macau: i18n-en_MO; // en_MO
$locale-macau_chinese: i18n-zh_MO; // zh_MO
$locale-japan: i18n-ja_JP; // Japan
$locale-new_zealand: i18n-en_NZ; // en_NZ
$locale-taiwan: i18n-zh_TW; // zh_TW
$locale-south_korea: i18n-ko_KR; // ko_KR
// Middle-East
$locale-jordan_english: i18n-en_JO; // en_JO
$locale-jordan_arabic: i18n-ar_JO; // ar_JO
$locale-uae_english: i18n-en_AE; // en_AE
$locale-uae_arabic: i18n-ar_AE; // ar_AE
// Africa
$locale-south_africa: i18n-en_ZA; // not in Drupal language list default
```
*/
/*doc
---
title: Introduction
category: Colors
name: 00_colors
---
The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature.
An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work.
*/
/*doc
---
title: Primary Colors
category: Colors
name: 01_colors
---
*/
/*doc
---
title: Base "T-shirt" Sizes
category: Variables for Sizing
name: 00_intro
---
These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added.
```sass_example
$tsla-size--xsmall: 10px !default;
$tsla-size--small: 20px !default;
$tsla-size--medium: 30px !default;
$tsla-size--large: 40px !default;
$tsla-size--xlarge: 50px !default;
$tsla-size--xxlarge: 60px !default;
$tsla-size--jumbo: 70px !default;
```
*/
/*doc
---
title: Media Queries
name: 00_mediaqueries
category: Layout
---
When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens.
Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system.
*/
/*doc
---
title: Available Media Queries
category: Layout
name: 01_mediaqueries
---
We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name
Value
Sample Devices
Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only
0-639px
HTC One, Galaxy S3/S4/S5 (639px)
iPhone 5/5S (568px)
iPhone 4 (480px)
Legacy
$small-desktop-only
640px-940px
Small screens only (640px - 960px)
Legacy
$small-desktop
640px+
Small devices (640px+)
Legacy
$large-desktop
960px+
Large desktop screens (960px+)
Legacy
$mobile-phone-only
0-736px
HTC One (639px)
Galaxy S3/S4/S5 (639px)
iPhone 5/5S (568px)
iPhone 4 (480px)
iPhone 6 (667px)
iPhone 6+ (736px)
New
$tablet-only
601-1280px
iPad (768px - 1024px)
Galaxy (800px - 1280px)
Nexus (601px - 906px)
Kindle (800px - 1280px)
New
$large-devices
1200px+
gigantic screens?
New
*/
/*doc
---
title: Transitions
name: Transitions
category: Animations
---
When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users.
Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition:
1. `.{custom}-enter`
2. `.{custom}-enter-active`
3. `.{custom}-leave`
4. `.{custom}-leave-active`
- [ReactJS Animation](https://facebook.github.io/react/docs/animation.html)
- [AngularJS Animation](https://docs.angularjs.org/guide/animations)
## Default Animations
The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations:
1. Animated element starts off with opacity: 0.01,
2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function,
3. when leaving the DOM the element starts with opacity: 1,
4. and transitions to opacity: 0.01 in its leave-active state with 300ms transition on all properties with no transition timing function.
```sass_example
@include enter-leave-animation-default(ng)
```
The above sass @include example produces the following css:
```sass_example
.ng-enter {
opacity: 0.01;
}
.ng-enter.ng-enter-active {
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.ng-leave {
opacity: 1;
}
.ng-leave.ng-leave-active {
opacity: 0.01;
-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
}
```
The included mixin in use:
```sass_example
@mixin enter-leave-animation-default($classname: general) {
@include enter-animation($classname)
@include enter-active-animation($classname, opacity, 500ms, ease-in)
@include leave-animation($classname)
@include leave-active-animation($classname, opacity, 300ms, ease-in)
}
```
## Custom Variations
We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one:
```sass_example
@include enter-animation(ng)
@include enter-active-animation(ng, opacity, 500ms, ease-in)
@include leave-animation(ng)
@include leave-active-animation(ng, opacity, 300ms, ease-in)
```
The parameters passed are:
1. `$classname` - Optional. Defaults to "general"
2. `$property` - Optional. Defaults to "all"
3. `$duration` - Optional. Defaults to "500ms"
4. `$function` - Optional. Defaults to "false"
Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows:
```sass_example
@include enter-animation(general) {
width: 100%;
}
@include enter-active-animation(general, width, 2s, ease-in) {
width: 50%;
}
```
The above mixin will produce the following css:
```sass_example
.general-enter {
width: 100%;
}
.general-enter.general-enter-active {
width: 50%;
-webkit-transition: width 2s ease-in;
-moz-transition: width 2s ease-in;
-o-transition: width 2s ease-in;
transition: width 2s ease-in;
}
```
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
outline: 0 none; }
ol,
ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q,
blockquote {
quotes: "“" "”" "‘" "’"; }
q:before,
blockquote:before {
content: open-quote; }
q:after,
blockquote:after {
content: close-quote; }
a img {
border: none; }
menu,
summary,
main,
picture,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block; }
img {
height: auto; }
picture img {
width: 100%; }
picture img {
width: 100%; }
img,
object,
embed,
video,
iframe {
max-width: 100%; }
sub {
top: 6px;
vertical-align: bottom; }
sup {
top: -6px;
vertical-align: top; }
small {
font-size: smaller; }
/*doc
---
categories: Variables
title: Locale Variables
name: 00_localevarsintro
---
Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic.
## Example
Here are a couple examples of how you can use the locale variables in your code.
### Basic Usage
```sass_example
.i18n-ja_JP {
background-color: #f00;
}
```
```css_example
.i18n-jp {
background-color: #f00;
}
```
### Parent selector usage
```sass_example
.someclass {
color: red;
.i18n-ja_JP & {
color: purple;
}
}
```
```css_example
.someclass {
color: red;
}
.i18n-jp .someclass {
color: purple;
}
```
## Let's talk about CSS specificity
As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package.
**YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things.
When writing Sass, keep asking yourself this question:
> What will this selector look like when it is rendered in plain CSS?
If you start seeing a lot of nesting ask yourself:
> Can this become less specfiic without messing up styles downstream?
If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using
Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables.
*/
/*doc
---
categories: Variables
title: All available locale variables
name: 02_localevarexample
parent: 00_localevarsintro
---
Here are all the variables that are currently available
```sass_example
// Super regions
$region-na: superregion-north-america;
$region-eu: superregion-europe;
$region-apac: superregion-apac;
$region-me: superregion-middle-east;
// North America
$locale-canada_english: i18n-en_CA; // en_CA
$locale-canada_french: i18n-fr_CA; // fr_CA
$locale-mexico_spanish: i18n-es_MX; // es_MX
$locale_us: i18n-en; // US
// Europe
$locale-belgium_french: i18n-fr_BE; // fr_BE
$locale-belgium_dutch: i18n-nl_BE; // nl_BE
$locale-denmark: i18n-da; // da_DK
$locale-germany: i18n-de; // de_DE
$locale-france: i18n-fr; // fr_FR
$locale-great_britain: i18n-en_GB; // en_GB
$locale-italy: i18n-it; // it_IT
$locale-ireland: i18n-en_IE; // en_IE
$locale-netherlands: i18n-nl; // nl_NL
$locale-norway: i18n-no; // no_NO
$locale-austria: i18n-de_AT; // de_AT
$locale-switzerland_german: i18n-de_CH; // de_CH
$locale-switzerland_french: i18n-fr_CH; // fr_CH
$locale-switzerland_italian: i18n-it_CH; // it_CH
$locale-sweden: i18n-sv_SE; // sv_SE
$locale-other_europe: i18n-en_EU; // en_EU
$locale-finland: i18n-fi_FI; // fi_FI
$locale-luxembourg_french: i18n-fr_LU; // fr_LU
$locale-luxembourg_german: i18n-de_LU; // de_LU
$locale-portugal: i18n-pt_PT; // pt_PT
$locale-spain: i18n-es_ES; // es_ES
// Asia-Pacific
$locale-australia: i18n-en_AU; // en_AU
$locale-china: i18n-zh_CN; // zh_CN
$locale-hongkong: i18n-en_HK; // en_HK
$locale-hongkong_chinese: i18n-zh_HK; // zh_HK
$locale-macau: i18n-en_MO; // en_MO
$locale-macau_chinese: i18n-zh_MO; // zh_MO
$locale-japan: i18n-ja_JP; // Japan
$locale-new_zealand: i18n-en_NZ; // en_NZ
$locale-taiwan: i18n-zh_TW; // zh_TW
$locale-south_korea: i18n-ko_KR; // ko_KR
// Middle-East
$locale-jordan_english: i18n-en_JO; // en_JO
$locale-jordan_arabic: i18n-ar_JO; // ar_JO
$locale-uae_english: i18n-en_AE; // en_AE
$locale-uae_arabic: i18n-ar_AE; // ar_AE
// Africa
$locale-south_africa: i18n-en_ZA; // not in Drupal language list default
```
*/
/*doc
---
title: Introduction
category: Colors
name: 00_colors
---
The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature.
An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work.
*/
/*doc
---
title: Primary Colors
category: Colors
name: 01_colors
---
*/
/*doc
---
title: Base "T-shirt" Sizes
category: Variables for Sizing
name: 00_intro
---
These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added.
```sass_example
$tsla-size--xsmall: 10px !default;
$tsla-size--small: 20px !default;
$tsla-size--medium: 30px !default;
$tsla-size--large: 40px !default;
$tsla-size--xlarge: 50px !default;
$tsla-size--xxlarge: 60px !default;
$tsla-size--jumbo: 70px !default;
```
*/
/*doc
---
title: Media Queries
name: 00_mediaqueries
category: Layout
---
When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens.
Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system.
*/
/*doc
---
title: Available Media Queries
category: Layout
name: 01_mediaqueries
---
We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name
Value
Sample Devices
Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only
0-639px
HTC One, Galaxy S3/S4/S5 (639px)
iPhone 5/5S (568px)
iPhone 4 (480px)
Legacy
$small-desktop-only
640px-940px
Small screens only (640px - 960px)
Legacy
$small-desktop
640px+
Small devices (640px+)
Legacy
$large-desktop
960px+
Large desktop screens (960px+)
Legacy
$mobile-phone-only
0-736px
HTC One (639px)
Galaxy S3/S4/S5 (639px)
iPhone 5/5S (568px)
iPhone 4 (480px)
iPhone 6 (667px)
iPhone 6+ (736px)
New
$tablet-only
601-1280px
iPad (768px - 1024px)
Galaxy (800px - 1280px)
Nexus (601px - 906px)
Kindle (800px - 1280px)
New
$large-devices
1200px+
gigantic screens?
New
*/
/*doc
---
title: Transitions
name: Transitions
category: Animations
---
When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users.
Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition:
1. `.{custom}-enter`
2. `.{custom}-enter-active`
3. `.{custom}-leave`
4. `.{custom}-leave-active`
- [ReactJS Animation](https://facebook.github.io/react/docs/animation.html)
- [AngularJS Animation](https://docs.angularjs.org/guide/animations)
## Default Animations
The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations:
1. Animated element starts off with opacity: 0.01,
2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function,
3. when leaving the DOM the element starts with opacity: 1,
4. and transitions to opacity: 0.01 in its leave-active state with 300ms transition on all properties with no transition timing function.
```sass_example
@include enter-leave-animation-default(ng)
```
The above sass @include example produces the following css:
```sass_example
.ng-enter {
opacity: 0.01;
}
.ng-enter.ng-enter-active {
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.ng-leave {
opacity: 1;
}
.ng-leave.ng-leave-active {
opacity: 0.01;
-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
}
```
The included mixin in use:
```sass_example
@mixin enter-leave-animation-default($classname: general) {
@include enter-animation($classname)
@include enter-active-animation($classname, opacity, 500ms, ease-in)
@include leave-animation($classname)
@include leave-active-animation($classname, opacity, 300ms, ease-in)
}
```
## Custom Variations
We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one:
```sass_example
@include enter-animation(ng)
@include enter-active-animation(ng, opacity, 500ms, ease-in)
@include leave-animation(ng)
@include leave-active-animation(ng, opacity, 300ms, ease-in)
```
The parameters passed are:
1. `$classname` - Optional. Defaults to "general"
2. `$property` - Optional. Defaults to "all"
3. `$duration` - Optional. Defaults to "500ms"
4. `$function` - Optional. Defaults to "false"
Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows:
```sass_example
@include enter-animation(general) {
width: 100%;
}
@include enter-active-animation(general, width, 2s, ease-in) {
width: 50%;
}
```
The above mixin will produce the following css:
```sass_example
.general-enter {
width: 100%;
}
.general-enter.general-enter-active {
width: 50%;
-webkit-transition: width 2s ease-in;
-moz-transition: width 2s ease-in;
-o-transition: width 2s ease-in;
transition: width 2s ease-in;
}
```
*/
/*doc
---
categories: Header
title: Default Header
name: defaultheader
---
## Default Header
The default header is created using with the following structure:
```html_example
```
There is a snippet of Javascript that is needed to make the headers show and hide when the user moves their browser from desktop to mobile views. This Javascript is written without a framework to help Particles make as few exceptions as possible. This snippet of Javascript can live anywhere in your environment.
```js_example
window.onload = function() {
var tslaMenuHeader = document.getElementById('tsla-header-main'),
tslaMenuCheckbox = document.getElementById('tsla-header-main--trigger'),
tslaMenuMask = document.getElementById('tsla-header-mask'),
tslaBodyTag = document.getElementsByTagName('body')[0];
window.addEventListener('resize', tslaResize);
function tslaResize() {
if (window.innerWidth >= 640) { tslaMenuCheckbox.checked = false; }
}
tslaMenuMask.onclick = function() {
if (tslaMenuCheckbox.checked === true) {
tslaMenuCheckbox.checked = false;
tslaBodyTag.classList.remove('tsla-prevent-scroll');
}
}
tslaMenuCheckbox.onclick = function() {
if (tslaMenuCheckbox.checked === true) {
tslaBodyTag.classList.add('tsla-prevent-scroll');
} else {
tslaBodyTag.classList.remove('tsla-prevent-scroll');
}
}
}
```
*/
/*doc
---
categories: Header
title: Header variations
name: headervariations
---
There are a few different variations on headers: Default (seen above and the header styling for Particles), a semi-transparent variation, and a fully transparent variation.
To achieve these different styles, you simply need to have a wrapper class (in the case of [tesla.com](https://www.tesla.com) we have added them as a class on the `` tag), with one of the following class names:
Variant name
Class name
Usage
Default
n/a. The default styling does not require any classes to display the correct UI.
```
*/
/*doc
---
categories: Forms
title: Checkboxes on right
name: 08a_checkboxesonright
parent: 08_checkboxinput
---
Maybe you want to put a checkbox on the right side of the label instead of the left?
```html_example
```
*/
/*doc
---
categories: Forms
title: Compact Checkboxes
name: 08b_compactcheckboxes
parent: 08_checkboxinput
---
Sometimes you want a small, or compact checkbox. Here is how you do such things
```html_example
```
*/
/*doc
---
categories: Forms
title: Compact Checkboxes on right
name: 08c_compactcheckboxesonright
parent: 08_checkboxinput
---
You can even combine them for a compact checkbox on the right side of the label! o_0
```html_example
```
*/
/*doc
---
categories: Forms
title: Radio Input
name: 09_radioinput
parent: 00_formsintro
---
```html_example
```
*/
/*doc
---
categories: Forms
title: Text Area
name: 10_textareas
parent: 00_formsintro
---
```html_example
```
*/
/*doc
---
categories: Forms
title: Customization Options
name: formcustomization
---
There are several options available to you as the developer to customize your form elements.
*/
/*doc
---
categories: Forms
title: Rounded Input
name: 01_roundedinput
parent: formcustomization
---
This is usually combined with the `btn-navigate` class on a submit. You can find example of this button style on the [buttons](/buttons.html) page. See the [/supercharger](http://teslamotors.com/supercharger) page for an example.
```html_example
```
*/
/*doc
---
categories: Forms
title: Large Input Fields
name: 02_largeinputs
parent: formcustomization
---
Sometimes the design calls for a large form input. Example of this woule be on [Tesla Energy's Powerpack Features](//www.teslaenergy.com/powerpack/features) page. Generally speaking, these types of inputs will be used in conjunction with the `.form-inline` helper class.
```html_example
```
```html_example
```
*/
.form-large .form-label {
font-size: 24px;
line-height: 30px;
font-size: 1.5rem;
line-height: 1.875rem; }
.form-large .form-text,
.form-large [type="text"],
.form-large [type="select"] {
padding-left: 20px;
padding-left: 1.25rem;
padding-top: 20px;
padding-top: 1.25rem;
padding-bottom: 20px;
padding-bottom: 1.25rem; }
.form-large.form-inline .input-prepend {
padding: 14px;
padding: 0.875rem; }
/*doc
---
categories: Forms
title: Inline Form Field Helpers
name: 03_inlineformhelpers
parent: formcustomization
---
Inline forms helpers would appear something like what you see below. Generally, they will be used in conjunction with the `.form-large` helper class as seen above.
```html_example
```
```html_example
```
*/
.form-inline .form-label {
padding-bottom: 0;
text-transform: inherit; }
.form-inline .form-text,
.form-inline [type="text"],
.form-inline [type="select"] {
background-color: #fff; }
.form-inline .input-prepend {
font-weight: 300;
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
top: 0;
right: 0;
position: absolute;
height: 100%;
z-index: 1;
color: #333; }
.form-inline .input-prepend + .form-text {
padding-right: 90px;
padding-right: 5.625rem; }
/*doc
---
categories: Forms
title: Form Errors
name: 04_formerrors
parent: formcustomization
---
teslamotors.com is currently using [ParsleyJS](http://parsleyjs.org/) for error handling on forms. If you are able to use it, you'll get a bunch of added benefits. If not, you'll have to use your own error handling, but if you use these classes, you'll get the form styling you desire.
```html_example
required
```
*/
/*doc
---
categories: Forms
title: Customization Options
name: 05_alternateforms
parent: formcustomization
---
Sometimes you'll want a form that is on a background color. Simply add `form-alternate` to any wrapper element to your form (example the `form` tag if you have one).
```html_example
This message is on the right of the input element.
```
*/
.flyout {
top: -54px;
top: -3.375rem;
max-width: 200px;
max-width: 12.5rem;
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
width: 100%;
display: block;
position: absolute;
border: 1px solid #c00;
background-color: #fff;
text-align: left; }
.flyout:before, .flyout:after {
width: 0;
height: 0;
display: block;
position: absolute;
border-style: solid;
content: "";
-webkit-transform: rotate(360deg); }
.flyout:before {
z-index: 20; }
.flyout:after {
z-index: 10; }
.flyout.is-left {
right: -210px;
right: -13.125rem; }
.flyout.is-left:before {
left: -7px;
left: -0.4375rem;
top: 10px;
top: 0.625rem;
border-width: 8px 7px 8px 0;
border-color: transparent #fff transparent transparent; }
.flyout.is-left:after {
left: -8px;
left: -0.5rem;
top: 10px;
top: 0.625rem;
border-width: 8px 7px 8px 0;
border-color: transparent #c00 transparent transparent; }
.flyout.is-right {
left: -210px;
left: -13.125rem; }
.flyout.is-right:before {
right: -7px;
right: -0.4375rem;
top: 10px;
top: 0.625rem;
border-width: 8px 0 8px 7px;
border-color: transparent transparent transparent #fff; }
.flyout.is-right:after {
right: -8px;
right: -0.5rem;
top: 10px;
top: 0.625rem;
border-width: 8px 0 8px 7px;
border-color: transparent transparent transparent #c00; }
/*doc
---
categories: Forms
title: Number Input Spinner
name: 04_numberinputspinner
parent: formcustomization
---
**NOTE:** You will need to write some Javascript to add `is-focused` to the `form-item` when someone clicks into the input. This class will generate the borders around the element so it looks like a normal input.
TODO:
* `is-centered` styling for input without a prepended helper
* Disabling arrows when they have reached the `min` / `max` value.
#### Simple number input spinner
```html_example
```
#### Simple number input spinner with `is-focused`
```html_example
```
#### Number input spinner with helper prepend value
If you want to have a small little helper text, you just need to add a class to the wrapper, and a `span` next to the input. See the markup for an example.
```html_example
```
#### Backup
If you are not comfortable using the number spinner given what you have to support from a browser capabilities standpoint, the same can be achieved with the following:
**NOTE:** if you are using this version, you will also need to wire up the clicks on the spinner arrows.
```html_example
```
*/
.form-spinner--container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
background-color: white;
border: 1px solid #ccc;
padding: 10px; }
.is-focused .form-spinner--container {
border-color: #333; }
.form-spinner--container .form-spinner--value {
text-align: center;
height: 30px;
position: relative;
margin: 0 0 0 0;
padding: 0;
border: 0;
text-align: right;
background-color: transparent;
overflow: visible; }
.form-item--with-prepend .form-spinner--container .form-spinner--value {
width: 50%; }
.form-spinner--container ::-webkit-textfield-decoration-container {
margin: 0;
padding: 0;
position: absolute;
width: calc(100% - 30px); }
.form-item--with-prepend .form-spinner--container ::-webkit-textfield-decoration-container {
right: -30px;
height: 100%; }
.form-spinner--container ::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
margin: 0;
padding: 0;
opacity: 1;
position: relative;
height: 100%;
width: 30px;
top: -1px;
right: -30px; }
.form-item--with-prepend .form-spinner--container ::-webkit-inner-spin-button {
right: -100%; }
.form-spinner--container ::-webkit-inner-spin-button:before, .form-spinner--container ::-webkit-inner-spin-button:after {
margin: 0;
padding: 0;
content: " ";
display: block;
width: 26px;
height: 16px;
background-size: 81%;
background-color: transparent;
background-repeat: no-repeat;
background-position: bottom center;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIGZpbGw9IiMxODkzRkMiIHBvaW50cz0iNjAsMi43IDMwLDMyIDAsMi43IDIuOCwwIDMwLDI2LjYgNTcuMiwwIAkiLz4KPC9nPgo8L3N2Zz4="); }
.form-spinner--container ::-webkit-inner-spin-button:before {
border-top: 1px solid #ccc;
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.form-item--prepend {
padding: 5px;
width: 50%;
text-align: left;
text-transform: initial; }
.form-spinner--extras {
position: absolute;
right: 15px;
bottom: 6px; }
.form-spinner--extras .form-spinner--increase,
.form-spinner--extras .form-spinner--decrease {
margin: 0;
padding: 0;
content: " ";
display: block;
width: 26px;
height: 25px;
overflow: hidden;
text-indent: -999px;
background-size: 80%;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIGZpbGw9IiMxODkzRkMiIHBvaW50cz0iNjAsMi43IDMwLDMyIDAsMi43IDIuOCwwIDMwLDI2LjYgNTcuMiwwIAkiLz4KPC9nPgo8L3N2Zz4="); }
.form-spinner--extras .form-spinner--increase {
border-top: 1px solid #ccc;
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
/*doc
---
title: Tables
name: Tables
category: Tables
---
Tables are integral. Tables are good. Tables need love too.
## Rules for Tables
1. *Never* use tables for anything other than tabular data. If you need something to look like a table, use `display: table;` (and it's related display attributes).
2. To get default styling, all classes should get `class="table"`. We style the class and not the DOM attribute to keep the specificity low.
3. While it is true that ``, ``, and `` are optional, they give you an extra set of hooks to get at your content for styling purposes. As such, Particles assumes you will be entering a `` and ``.
4. `
`s default to 100% the width of their containing element. This provides sanity.
## Types of Tables
The sample markup listed above is a representation of how each of the following tables should be structured.
## Examples
### Default Table:
An example of this style can be found above:
```html_example
Last reply: June 23, 2015 by tmdcqa2jeff@gmail.com
4,156
56,512
```
## TODO list
* `.table-striped` -- zebras! This will use the `:nth-child()` selector as well as `.odd`/`.even` classes (for those projects that still need to support IE8). New projects are encouraged to use the `:nth-child()` approach.
* `.table-compact` -- a more compact version of the table. this is largely comeplete in `table-data`, but it should/could be extracted to be more generic so it can be used without the style overhead of `data-table`.
*/
.table {
width: 100%; }
.table-head th {
font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-weight: 500;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase;
color: #333; }
.table-row td,
.table-row th {
vertical-align: top;
padding: 15px 0;
padding: 0.9375rem 0;
border-top: 1px solid #ccc; }
.table-head .table-row td, .table-head
.table-row th {
border-top: 0; }
.table-row p {
margin: 0; }
.table-compact .table-row td,
.table-compact .table-row th {
padding-top: 0;
padding-bottom: 0; }
.table-forum .table-head th {
padding: 3px 0;
padding: 0.1875rem 0; }
.table-forum .table-head th:first-child {
width: 200px;
width: 12.5rem; }
.table-forum .forum-threads,
.table-forum .forum-posts,
.table-forum .forum-post-meta {
color: #666; }
.table-forum .forum-threads,
.table-forum .forum-posts {
width: 170px; }
.table-forum .forum-title a:hover,
.table-forum .forum-topic a:hover {
color: #c00; }
.table-forum .forum-title {
font-size: 15px;
line-height: 18px;
font-size: 0.9375rem;
line-height: 1.125rem;
margin: 0 0 5px;
margin: 0 0 0.3125rem;
color: #000; }
.table-forum .forum-title a {
color: #000; }
.table-forum .forum-post-meta {
font-size: 12px;
line-height: 15px;
font-size: 0.75rem;
line-height: 0.9375rem; }
.table-forum .forum-topic a {
color: #333; }
.table-data {
border: 1px solid #ddd; }
.table-data .table-row th,
.table-data .table-row td {
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
border: 1px solid #ddd; }
.table-data .table-row th:first-child,
.table-data .table-row td:first-child {
border-right: 0; }
.table-data .table-row th:last-child,
.table-data .table-row td:last-child {
border-left: 0; }
.table-data .table-row th {
border: 1px solid #ddd; }
.table-data .table-row th:first-child {
border-right: 0; }
.table-data .table-row th:last-child {
border-left: 0; }
.table-data .table-head th {
background-color: #eee; }
.table-accounting {
font-family: "Menlo", "Monaco", "Courier New", monospace;
margin-bottom: 20px;
margin-bottom: 1.25rem;
border: 0;
width: auto; }
.table-accounting .table-row td, .table-accounting .table-row th {
border: 0; }
.table-accounting .cell-currency {
text-align: right; }
.table-accounting th, .table-accounting td {
font-size: 10px;
line-height: 12px;
font-size: 0.625rem;
line-height: 0.75rem; }
/*doc
---
title: Buttons
name: Buttons
category: Buttons
name: 00_buttonsintro
---
There are 4 (possibly 5) button styles in use across Particles.
Throughout this file, you're going to see some background colors behind some of the buttons. You can ignore this wrapper div. It is simply there to help you understand what is happening with the buttons.
The basic structure of a button consists of the following CSS:
```sass_example
.btn {
@include fontstack-primary('Gotham Medium');
@include scale(min-width, 175px);
@include single-transition(all 0.3s linear);
@include no-select;
@include scale(margin, 2px);
display: inline-block;
white-space: nowrap;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: 0;
color: $white;
appearance: none;
&:hover {
@include single-transition(
all
0.3s
linear
);
}
&:hover,
&:active,
&:focus,
&:visited,
&:disabled {
text-decoration: none;
color: $white;
}
@include susy-breakpoint($mobile-only) {
width: 100%;
display: block;
float: none;
margin-left: 0;
margin-right: 0;
white-space: initial;
}
}
```
By default, buttons on mobile will span 100% the width of their containing element. This is intentional to allow for a bigger click area for the end-user.
Because we are styling based on classes and not on DOM elements, a button can be any HTML element you choose. This documentation will default to `