/*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 ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
*/ /*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; } ``` */ .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } #system_messages { background-color: #fafafa; } #system_messages ul.tabs:before, #system_messages ul.tabs:after { content: ""; display: table; } #system_messages ul.tabs:after { clear: both; } #system_messages ul.tabs li { float: left; margin-right: 20px; padding: 10px 0; display: inline-block; } #system_messages ul.tabs a { color: #333; } #system_messages .panel-pane { font-size: 14px; font-size: 0.875rem; } #second-nav { display: inline-block; vertical-align: top; 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: 400; } #second-nav .nav-block { margin-top: 3px; } #second-nav .nav-block:before, #second-nav .nav-block:after { content: ""; display: table; } #second-nav .nav-block:after { clear: both; } #second-nav .nav-block li { list-style-image: none; list-style-type: none; float: left; margin-right: 15px; } #second-nav .nav-block li a { font-size: 13px; line-height: 20px; font-size: 0.8125rem; line-height: 1.25rem; color: #333; } #second-nav .nav-block li a:hover { color: #c00; } #second-nav .nav-block li.nav-selected .nav-link { opacity: .5; } #second-nav .nav-block li:last-child, #second-nav .nav-block li.last { margin-right: 0; } .section-sub-nav { position: relative; } .section-sub-nav:before, .section-sub-nav:after { content: ""; display: table; } .section-sub-nav:after { clear: both; } .section-sub-nav .container { position: relative; } .page-models-preowned .section-sub-nav .container .sub-nav { margin-right: 20px; margin-right: 1.25rem; } .tsla-header-transparent .section-sub-nav, .tsla-header-semitransparent .section-sub-nav { margin-top: 96px; margin-top: 6rem; } .section-sub-nav .section-title { font-family: Gotham Light, "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-size: 30px; font-size: 1.875rem; margin-bottom: 35px; margin-bottom: 2.1875rem; padding-bottom: 25px; padding-bottom: 1.5625rem; padding-top: 0; position: relative; top: 0; border-bottom: 1px solid #ccc; color: #000; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .section-title { font-size: 24px; font-size: 1.5rem; border-bottom: 0; } } .section-sub-nav .section-title a { color: #000; } .section-sub-nav .sub-nav { top: 9px; top: 0.5625rem; right: 20px; right: 1.25rem; position: absolute; clear: both; } .section-sub-nav .sub-nav .nav-item { display: block; float: left; margin: 0 0 0 20px; margin: 0 0 0 1.25rem; } .section-sub-nav .sub-nav .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-selected .nav-link { opacity: .5; } .section-sub-nav .sub-nav .nav-selected .nav-item { display: block; float: left; margin: 0 0 0 20px; margin: 0 0 0 1.25rem; } .section-sub-nav .sub-nav .nav-selected .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-link { 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-size: 13px; font-size: 0.8125rem; color: #333; } .section-sub-nav .sub-nav .btn-order { color: #fff; font-size: 8px; font-size: 0.5rem; } .i18n-zh_CN .section-sub-nav .sub-nav .btn-order { font-size: 13px; font-size: 0.8125rem; position: relative; top: -2px; padding: 6px 12px 5px; padding: 0.375rem 0.75rem 0.3125rem; } .section-sub-nav .separator-before { padding-left: 20px; padding-left: 1.25rem; border-left: 1px solid rgba(51, 51, 51, 0.5); } .section-sub-nav .separator-after { padding-right: 20px; padding-right: 1.25rem; border-right: 1px solid rgba(51, 51, 51, 0.5); } .alternative .section-sub-nav .section-title, .section-sub-nav.alternative .section-title { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .alternative .section-sub-nav .section-title a, .section-sub-nav.alternative .section-title a { color: #fff; } .alternative .section-sub-nav .nav-link, .section-sub-nav.alternative .nav-link { color: #fff; transition: color 0.1s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .alternative .section-sub-nav .nav-link:hover, .section-sub-nav.alternative .nav-link:hover { color: #ccc; transition: color 0.1s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .alternative .section-sub-nav .sub-nav a, .section-sub-nav.alternative .sub-nav a { color: #fff; } .alternative .section-sub-nav .separator-before, .section-sub-nav.alternative .separator-before { border-left-color: rgba(255, 255, 255, 0.5); } .alternative .section-sub-nav .separator-after, .section-sub-nav.alternative .separator-after { border-right-color: rgba(255, 255, 255, 0.5); } .no-keyline .section-sub-nav .section-title, .section-sub-nav.no-keyline .section-title { border-bottom: none; margin-bottom: 0; } .nav-left { float: left; } .nav-right { float: right; } .nav-centered { text-align: center; overflow: hidden; display: block; margin: auto; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .sub-nav { display: none; } } @media (min-width: 640px) { .nav_search { width: 65.85366%; float: right; margin-right: 0; text-align: right; margin-top: 5px; margin-bottom: 17px; } .expanded-search .nav_search { float: right; text-align: right; width: auto; } } main .nav_search { display: none; } @media (min-width: 640px) { main .nav_search { display: inline; } main .nav_search .nav-left { float: left; } main .nav_search .nav-right { float: right; } } .nav-sticky { width: 100%; max-width: 1440px; position: absolute; top: -1px; } .nav-sticky.nav-animate { transition: top 0.5s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .nav-sticky.nav-animate.is-stuck, .nav-sticky.nav-animate.nav-animate-away { transition: top 0.5s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .nav-sticky.is-stuck, .nav-sticky.nav-animate-away { width: 100%; max-width: 1440px; position: fixed; z-index: 10; } .nav-sticky.nav-animate-away { top: -100px; } .section-sub-nav .nav-sticky .sub-nav { top: 21px; top: 1.3125rem; } .nav-pill { text-align: center; } .nav-pill .nav-block { border-radius: 100px; border: 1px solid #ddd; overflow: hidden; display: inline-block; margin-bottom: 16px; margin-bottom: 1rem; } .lt-ie9 .nav-pill .nav-block { border: 1px solid #ddd; } .nav-pill .nav-link { width: 175px; width: 10.9375rem; padding: 16px 0; padding: 1rem 0; font-size: 18px; font-size: 1.125rem; 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: 100; display: block; color: #000; cursor: pointer; } .nav-pill .nav-selected { background-color: #f2f2f2; color: #000; } .nav-pill .nav-item { margin: 0; border-left: 1px solid #ccc; } .nav-pill .nav-item:first-child { border-left: 0; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav { margin-top: 33px; margin-top: 2.0625rem; } .section-sub-nav .sub-nav { display: none; } .section-sub-nav .section-title { margin-bottom: 27px; margin-bottom: 1.6875rem; } .page-about .section-sub-nav .section-title { padding-bottom: 18px; padding-bottom: 1.125rem; } .page-about-legal .section-sub-nav .section-title { padding-bottom: 22px; padding-bottom: 1.375rem; } .page-careers .section-sub-nav .section-title { margin-bottom: 31px; margin-bottom: 1.9375rem; } .header-transparent .section-sub-nav, .header-semitransparent .section-sub-nav { margin-top: 83px; margin-top: 5.1875rem; } } @media (min-width: 640px) { .nav_search { float: right; margin-top: 5px; margin-top: 0.3125rem; margin-bottom: 17px; margin-bottom: 1.0625rem; float: right; text-align: right; } main .nav_search { display: inline; } } /*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 ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
*/ /*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; } ``` */ .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } .content-constrain { max-width: 100%; } .section-image { max-height: 100%; max-width: 100%; } @media (min-width: 640px) { .section-wrap { padding: 70px 0; padding: 4.375rem 0; } } @media (min-width: 0) and (max-width: 639px) { .section-wrap { padding: 35px 0; padding: 2.1875rem 0; } } @media (min-width: 640px) { .section-wrap .section-wrap { padding: 35px 0; padding: 2.1875rem 0; } } @media (min-width: 640px) { .section-container-grid { clear: both; overflow: hidden; } .section-container-grid .section-image { width: 48.78049%; float: left; margin-right: 2.43902%; } .section-container-grid .section-content { width: 40.2439%; float: left; margin-right: 2.43902%; margin-left: 8.53659%; } .section-container-grid .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: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } } @media (min-width: 640px) and (min-width: 640px) { .section-container-grid .section-alternating { margin-left: 8.53659%; margin-left: 8.53659%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media (min-width: 640px) { .section-container [class*="section-"] { width: 48.78049%; float: left; margin-right: 2.43902%; margin-left: 25.60976%; margin-right: 25.60976%; } } .section-hero { display: block; margin: auto; } @media (min-width: 0) and (max-width: 639px) { .section-hero { max-width: 70%; } } .section-release_notes { overflow: hidden; background-color: #f7f7f7; } @media (min-width: 640px) { .section-release_notes { padding-bottom: 200px; padding-bottom: 12.5rem; } } .section-release_notes .section-title--hed { 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-size: 18px; line-height: 20px; font-size: 1.125rem; line-height: 1.25rem; padding-top: 0; color: #000; } @media (min-width: 640px) { .section-release_notes .section-title--hed { color: #666; text-align: left; width: 31.70732%; float: left; margin-right: 2.43902%; } } .section-release_notes .section-title--dek { margin-top: 10px; margin-top: 0.625rem; } @media (min-width: 0) and (max-width: 639px) { .section-release_notes .section-title--dek { text-align: center; } .i18n-zh_HK .section-release_notes .section-title--dek, .i18n-ja_JP .section-release_notes .section-title--dek, .i18n-zh_CN .section-release_notes .section-title--dek, .i18n-zh_MO .section-release_notes .section-title--dek { text-align: left; } } .section-release_notes .section-title--lede { color: #333; font-weight: bold; margin-bottom: 10px; margin-bottom: 0.625rem; } @media (min-width: 0) and (max-width: 639px) { .section-release_notes .section-title--lede { text-align: left; } } .section-release_notes .list-item { margin-bottom: 10px; margin-bottom: 0.625rem; } .release-notes--categories:before, .release-notes--categories:after { content: ""; display: table; } .release-notes--categories:after { clear: both; } @media (min-width: 0) and (max-width: 639px) { .release-notes--categories { margin-top: 22px; margin-top: 1.375rem; } } @media (min-width: 640px) { .release-notes--categories .column:nth-child(odd) { width: 31.70732%; float: left; margin-right: 2.43902%; } .release-notes--categories .column:nth-child(even) { width: 31.70732%; float: right; margin-right: 0; } } .release-notes--categories:nth-last-child(n+2) { padding-bottom: 70px; padding-bottom: 4.375rem; } @media (min-width: 640px) { .release-notes--categories:nth-last-child(n+2) { padding-bottom: 90px; padding-bottom: 5.625rem; } } @media (min-width: 640px) { .release-notes--category:first-child .section-title--lede { margin-top: 0; } } .section-autopilot .section-title--hed, .section-software--testimonial .section-title--hed { padding-top: 40px; padding-top: 2.5rem; } @media (min-width: 0) and (max-width: 639px) { .section-title--hed { padding-top: 40px; padding-top: 2.5rem; text-align: center; } } .section-title--hed + .section-title--lede { padding-top: 10px; padding-top: 0.625rem; margin-top: 10px; margin-top: 0.625rem; } .section-title--lede + .section-title--lede { margin-top: 0; } .section-title--lede:last-child { margin-bottom: 0; padding-bottom: 0; } @media (min-width: 0) and (max-width: 639px) { .section-title--lede { text-align: center; } .i18n-zh_CN .section-title--lede, .i18n-ja_JP .section-title--lede, .i18n-zh_TW .section-title--lede, .i18n-ko_KR .section-title--lede, .i18n-zh_MO .section-title--lede, .i18n-zh_HK .section-title--lede { text-align: left; } } .section-list--dek { padding-left: 20px; padding-left: 1.25rem; list-style-type: none; } .section-list--dek .list-item { margin-bottom: 10px; margin-bottom: 0.625rem; } .section-list--dek .list-item:before { left: -20px; left: -1.25rem; top: -2px; top: -0.125rem; font-size: 9px; font-size: 0.5625rem; display: block; position: relative; max-width: 0; max-height: 0; color: #ccc; content: '\25A0'; } .section-list--dek .list-item:last-child { margin-bottom: 0; } .container-icons { overflow: hidden; clear: both; } .container-icons [class*="section-title--"] { font-size: 13px; font-size: 0.8125rem; line-height: 1.25; max-width: 210px; max-width: 13.125rem; text-align: center; width: 100%; } .i18n-zh_HK .container-icons [class*="section-title--"], .i18n-ja_JP .container-icons [class*="section-title--"], .i18n-zh_CN .container-icons [class*="section-title--"], .i18n-zh_MO .container-icons [class*="section-title--"] { text-align: left; } .container-icons .section-title--lede { font-family: 'Gotham Medium'; color: #333; } .container-icons .section-title--dek { margin-top: 5px; margin-top: 0.3125rem; margin-bottom: 0; } .container-icons .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 0) and (max-width: 639px) { .container-icons .column:not(:last-child) { padding-bottom: 40px; padding-bottom: 2.5rem; } } .container-icons .icon-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 64px; width: 4rem; height: 64px; height: 4rem; margin: 30px auto 30px; margin: 1.875rem auto 1.875rem; overflow: hidden; text-align: center; } @media (min-width: 640px) { .container-icons .section-image { max-height: 100%; text-align: center; display: block; margin: auto; } .container-icons.four-up .column { width: 23.17073%; float: left; margin-right: 2.43902%; } .container-icons.four-up .column:last-child { float: right; margin-right: 0; } .container-icons.three-up .column { width: 31.70732%; float: left; margin-right: 2.43902%; } .container-icons.three-up .column:last-child { float: right; margin-right: 0; } .container-icons.two-up .column { width: 48.78049%; float: left; margin-right: 2.43902%; } .container-icons.two-up .column:last-child { float: right; margin-right: 0; } } .main-title { font-size: 34px; } @media (min-width: 0) and (max-width: 639px) { .main-title { font-size: 28px; } } .smaller-title { font-size: 30px; } @media (min-width: 0) and (max-width: 639px) { .smaller-title { font-size: 26px; } } .section-title { font-size: 34px; } @media (min-width: 0) and (max-width: 639px) { .section-title { font-size: 28px; } } .btn-transparent { background-color: rgba(0, 0, 0, 0.3); } .section-sub-nav { margin-top: 44px; } .section-sub-nav .section-title { border-bottom: 1px solid #000; } .section-sub-nav .selected .nav-link { font-family: Gotham Bold, "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; } .flex-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 0) and (max-width: 639px) { .flex-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .flex-wrapper.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section-image { line-height: 0; } .section-wrap { padding-top: 70px; padding-bottom: 70px; } @media (min-width: 0) and (max-width: 639px) { .section-wrap { padding-top: 35px; padding-bottom: 35px; } } .column { float: none !important; } @media (min-width: 640px) { .four-up .column { width: 23.17073%; float: left; margin-right: 2.43902%; } .four-up .column:last-child { float: right; margin-right: 0; } .three-up .column { width: 31.70732%; float: left; margin-right: 2.43902%; } .three-up .column:last-child { float: right; margin-right: 0; } .two-up .column { width: 48.78049%; float: left; margin-right: 2.43902%; } .two-up .column:last-child { float: right; margin-right: 0; } .one-up .column { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } .one-up .column:last-child { float: right; margin-right: 0; } } .multi-column-container, .multi-column-item { list-style: none; margin: 0; padding: 0; } .multi-column-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .multi-column-container .multi-column-item { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .multi-column-container .multi-column-item .multi-column-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .multi-column-container .multi-column-item .multi-column-content.image-content { display: block; } .multi-column-container .multi-column-item .multi-column-content .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .multi-column-container .multi-column-item .multi-column-content .container:not(.solar-roof-marketing-blurb-right):not(.solar-roof-marketing-blurb-left) { margin-left: 25%; padding-left: 0; padding-right: 50px; } .multi-column-container .multi-column-item .multi-column-content .container .section-title { margin-top: 22px; } @media (min-width: 0) and (max-width: 639px) { .multi-column-container .multi-column-item .multi-column-content .container { margin: 0 auto; padding: 20px; text-align: center; } } .multi-column-container .multi-column-item .multi-column-content .split-50-50:first-child { width: 48.78049%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item .multi-column-content .split-50-50:last-child { width: 48.78049%; float: right; margin-right: 0; } @media all and (min-width: 40em) { .multi-column-container .multi-column-item { width: 50%; } .multi-column-container .multi-column-item.no-split { width: 100%; } .multi-column-container .multi-column-item.split-33-66:first-child { width: 33.33%; } .multi-column-container .multi-column-item.split-33-66:last-child { width: 66.66%; } .multi-column-container .multi-column-item.split-40-60:first-child { width: 40%; } .multi-column-container .multi-column-item.split-40-60:last-child { width: 60%; } .multi-column-container .multi-column-item.split-60-40:first-child { width: 60%; } .multi-column-container .multi-column-item.split-60-40:last-child { width: 40%; } .multi-column-container .multi-column-item.split-66-33:first-child { width: 65.85366%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item.split-66-33:last-child { width: 31.70732%; float: right; margin-right: 0; } .multi-column-container .multi-column-item.split-75-25:first-child { width: 74.39024%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item.split-75-25:last-child { width: 23.17073%; float: right; margin-right: 0; } } .darker-background { background: #F2F2F2; } .container-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 0) and (max-width: 639px) { .container-icons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .container-icons .section-image { height: 70px; max-height: none; width: 100%; } .container-icons .column { float: none; } .container-icons .column.last-child { float: none; } .container-icons [class*="section-title--"] { max-width: 70%; } @media (min-width: 0) and (max-width: 639px) { .container-icons [class*="section-title--"] { max-width: 100%; } } .icon-wrapper { padding: 20px; } .section-divider { background: #999; height: 1px; margin: 70px 0; width: 100%; } .section-inquire_form { background-color: #F2F2F2; text-align: center; } .section-inquire_form .section-title { padding-bottom: 80px; } .section-inquire_form .stationary-storage-details { text-align: left; } .section-inquire_form .stationary-storage-details .form-item-firstname, .section-inquire_form .stationary-storage-details .form-item-email, .section-inquire_form .stationary-storage-details .form-item-country, .section-inquire_form .stationary-storage-details .form-item-company { width: 47.5%; float: left; margin-right: 5%; } .section-inquire_form .stationary-storage-details .form-item-lastname, .section-inquire_form .stationary-storage-details .form-item-phone, .section-inquire_form .stationary-storage-details .form-item-postalcode, .section-inquire_form .stationary-storage-details .form-item-role { width: 47.5%; float: right; margin-right: 0; clear: none; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .stationary-storage-details .form-item { width: 100%; } } .section-inquire_form .stationary-storage-details .form-item-businessType { clear: both; } .section-inquire_form .stationary-storage-details .form-item-additional-info { clear: both; } .section-inquire_form .stationary-storage-details .form-item-opt-in { clear: both; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item .parsley-error { color: #999; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .stationary-storage-details .additional-information-type .form-item { width: 100%; } } @media (min-width: 640px) { .section-inquire_form .stationary-storage-details .additional-information-type .form-item { width: 30%; float: left; margin-right: 5%; margin-left: 10px; margin-right: 10px; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item:first-child { margin-left: 0; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item:last-child { width: 30%; float: right; margin-right: 0; clear: none; margin-left: 0; } } .section-inquire_form .terms-and-conditions { margin: 22px auto; width: 75%; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .terms-and-conditions { width: 100%; } } @media (min-width: 640px) { .section-cta .btn, .section-cta .btn-large, .section-cta .btn-transactional { min-width: 200px; } .section-cta a:first-child { margin-right: 10px; } } .section-cta.top { border-bottom: 1px solid rgba(0, 0, 0, 0.4); text-align: center; } @media (min-width: 0) and (max-width: 639px) { .section-cta.top { padding-left: 20px; padding-right: 20px; } } .section-cta.top.btn-group { margin: 0; padding-top: 15px; padding-bottom: 15px; } .container-buttons { text-align: center; } @media (min-width: 640px) { .pane-skinny-footer { margin-top: 0; padding-top: 20px; } } /*doc --- title: Loading Widget category: Extras --- There are many times when you may want to use a loading widget: data not loading fast enough, rendering car images from Compositor, AJAX saves to the database or another service, etc. ## Overview CSS3 is very powerful and are leveraging keyframes and SVG to produce a loading animation. We are also using Base64 encoding of the image asset so that we don't have an extra HTTP request to retrieve an image from the server.
Note 1: the inline style attributes are only to be used here on the styleguide. Those should not be added when they are used on a website.
Note 2: This currently assumes you are using Modernizr for browser detection, hence the addition of class="cssanimation". If you are not using Modernizr, you'll currently need to add this class to a parent element from where you add the loader.
## Options A list of available options current to the loading widget
Options Value
section-loader Basic styling
fade-in Makes the loader appear.
fade-out Fades out the loader.
```html_example
``` ```sass_example .section-loader { top: 0; right: 0; bottom: 0; left: 0; position: fixed; z-index: 1; // opacity: 0; @include generateLoader(); } ``` */ .section-loader { top: 0; right: 0; bottom: 0; left: 0; position: fixed; z-index: 1; } .cssanimations .section-loader { z-index: -1; background-color: rgba(255, 255, 255, 0.85); } .cssanimations .section-loader:before, .cssanimations .section-loader:after { height: 64px; height: 4rem; width: 64px; width: 4rem; top: 0; right: 0; bottom: 0; left: 0; content: ""; margin: auto; overflow: hidden; position: absolute; background-position: 0 0; background-repeat: no-repeat; } .cssanimations .section-loader:before { opacity: 0.15; background-color: rgba(255, 255, 255, 0.85); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGcgZmlsbD0iIzY1NjY2NCI+PHBhdGggZD0iTTE2LjkgMTUuNGMzLjgtMy41IDguNy01LjYgMTQuMi01Ljl2LTdjLTcuNC4zLTE0LjEgMy4yLTE5LjEgOGw0LjkgNC45ek05LjYgMzFjLjItNS41IDIuNC0xMC40IDUuOS0xNC4ybC00LjktNC45Yy00LjcgNS03LjcgMTEuNy03LjkgMTkuMWg2Ljl6TTMzLjEgMi41djdjNS41LjIgMTAuNCAyLjQgMTQuMiA1LjlsNC45LTQuOWMtNS00LjgtMTEuNy03LjctMTkuMS04ek0xNS41IDQ3LjJDMTIgNDMuNCA5LjggMzguNSA5LjYgMzNoLTdjLjIgNy40IDMuMiAxNC4xIDcuOSAxOS4xbDUtNC45ek01NC42IDMzYy0uMiA1LjUtMi40IDEwLjQtNS45IDE0LjJsNC45IDQuOWM0LjctNSA3LjctMTEuNyA3LjktMTkuMWgtNi45ek00OC43IDE2LjhjMy41IDMuOCA1LjYgOC43IDUuOSAxNC4yaDdjLS4yLTcuNC0zLjItMTQuMS03LjktMTkuMWwtNSA0Ljl6TTQ3LjMgNDguNmMtMy44IDMuNS04LjcgNS42LTE0LjIgNS45djdjNy40LS4yIDE0LjEtMy4yIDE5LjEtNy45bC00LjktNXpNMzEuMSA1NC41Yy01LjUtLjItMTAuNC0yLjQtMTQuMi01LjlMMTIgNTMuNWM1IDQuNyAxMS43IDcuNyAxOS4xIDcuOXYtNi45eiIvPjwvZz48L3N2Zz4=); } .no-svg .cssanimations .section-loader:before { background-image: url("/tesla_theme/assets/img/loading-background.png"); } .cssanimations .section-loader:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iaGlnaGxpZ2h0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQ3LjMsMTUuOWw2LjUtNi41Yy01LjYtNS4zLTEzLjEtOC42LTIxLjQtOC44djkuMkMzOC4yLDEwLDQzLjMsMTIuMyw0Ny4zLDE1Ljl6Ii8+PC9zdmc+); -webkit-animation: spin 1s steps(8) infinite; animation: spin 1s steps(8) infinite; } .no-svg .cssanimations .section-loader:after { background-image: url("/tesla_theme/assets/img/loading-highlight.png"); } .cssanimations .section-loader.fade-in { z-index: 1; transition: opacity 0.25s linear; -webkit-transform: translateZ(0); transform: translateZ(0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opactiy=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .cssanimations .section-loader.fade-out { z-index: 1; transition: opacity 0.225s linear; -webkit-transform: translateZ(0); transform: translateZ(0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opactiy=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; } .no-cssanimations .section-loader { opacity: .7; } .no-cssanimations .section-loader div { height: 64px; height: 4rem; width: 64px; width: 4rem; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; position: absolute; z-index: 999; content: ""; background-position: top center; background-repeat: no-repeat; background-image: url("/tesla_theme/assets/img/loader.png"); } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } section { text-align: center; } @media (min-width: 640px) { .btn-large, .btn-transactional { min-width: 200px; } } .small-type { font-size: 9px; } .section-initial .container { width: 100%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: left; } .section-video { display: block; margin: 40px auto 0 auto; } @media (min-width: 640px) { .section-video { width: 700px; height: 390px; } } @media (min-width: 0) and (max-width: 639px) { .section-video { width: 100%; height: 50vw; } } @media (min-width: 640px) { .section-solar-roof_benefits .container-icons { margin-top: 50px; } } .section-solar-roof_benefits .btn-group { margin-top: 50px; } .section-solar-roof_power_home { background-color: #F7F7F7; padding-bottom: 0; } @media (min-width: 640px) { .section-solar-roof_power_home .container { padding-bottom: 60px; padding-left: 180px; padding-right: 180px; } } @media (min-width: 640px) { .section-invisible_obvious { text-align: left; } } @media (min-width: 640px) { .section-powerwall_integration { text-align: left; } } .section-solar_views { background-color: #F7F7F7; } .section-solar_views [class*="section-title--"] { width: 100%; } .section-solar_views .section-title--lede { color: #333; } @media (min-width: 640px) { .section-solar_views .copy-wrap { padding-left: 160px; padding-right: 160px; } .section-solar_views .section-title--dek { margin-bottom: 0; max-width: 600px; } .section-solar_views .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .section-solar_views .solar-views { 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; margin-top: 70px; } @media (min-width: 0) and (max-width: 639px) { .section-solar_views .solar-views { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } } .section-solar_views .solar-views-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 200px; } .section-solar_views .solar-views-item .section-image { margin-bottom: 10px; } .section-solar_views .solar-views-item .section-title--lede { margin: 5px 0; } .section-solar_views .solar-views-item .section-title--dek { width: 160px; margin: 0; } @media (min-width: 640px) { .section-solar_views .solar-views-item:first-of-type { margin-right: 40px; } } @media (min-width: 0) and (max-width: 639px) { .section-solar_views .solar-views-item:last-of-type { margin-top: 40px; } } .section-solar_anatomy .container { position: relative; } .section-solar_anatomy .section-image { margin: 40px auto 0 auto; width: 450px; } @media (min-width: 0) and (max-width: 639px) { .section-solar_anatomy .list-items { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } } .section-solar_anatomy .list-item .section-title--lede { color: #333; font-family: 'Gotham Light'; font-size: 20px; margin: 0 0 12px 0; } .section-solar_anatomy .list-item .section-title--dek { margin: 0; max-width: 215px; } @media (min-width: 0) and (max-width: 639px) { .section-solar_anatomy .list-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 40px; } .section-solar_anatomy .list-item [class*="section-title--"] { text-align: center; } } @media (min-width: 640px) { .section-solar_anatomy .list-item { position: absolute; } .section-solar_anatomy .list-item [class*="section-title--"] { text-align: left; } .section-solar_anatomy .list-item:after { background-color: #2CABE1; content: ""; display: none; height: 2px; width: 100px; } } @media (min-width: 640px) and (min-width: 640px) { .section-solar_anatomy .list-item:after { background-color: #2CABE1; display: block; content: ""; height: 1px; position: absolute; top: 12px; width: 75px; } } .section-solar_anatomy .list-item.list-item--cell { top: 61%; left: 0; } @media only screen and (max-width: 1045px) { .section-solar_anatomy .list-item.list-item--cell { width: 190px; left: 15px; } } .section-solar_anatomy .list-item.list-item--cell:after { right: -60px; width: 54px; } @media only screen and (max-width: 1045px) { .section-solar_anatomy .list-item.list-item--cell:after { right: -68px; width: 100px; } } @media (min-width: 640px) and (max-width: 960px) { .section-solar_anatomy .list-item.list-item--cell:after { right: -49px; width: 85px; } } .section-solar_anatomy .list-item.list-item--film { top: 22%; left: 77%; } @media (min-width: 640px) and (max-width: 960px) { .section-solar_anatomy .list-item.list-item--film:after { left: -50px; width: 40px; } } @media (min-width: 960px) { .section-solar_anatomy .list-item.list-item--film:after { left: -65px; width: 60px; } } .section-solar_anatomy .list-item.list-item--glass { left: 78%; top: 60%; } @media (min-width: 640px) and (max-width: 960px) { .section-solar_anatomy .list-item.list-item--glass:after { left: -50px; width: 40px; } } @media (min-width: 960px) { .section-solar_anatomy .list-item.list-item--glass:after { left: -65px; width: 60px; } } .section-solar_callback { margin-bottom: 0; } @media (min-width: 640px) { .section-solar_callback .main-title { margin-bottom: 70px; } } .section-solar_callback .container { margin-left: auto; margin-right: auto; max-width: 600px; } .section-solar_callback .section-title--dek { text-align: center; } @media (min-width: 640px) { .section-solar_callback .form-item-firstname, .section-solar_callback .form-item-email, .section-solar_callback .form-item-country { width: 48.78049%; float: left; margin-right: 2.43902%; } .section-solar_callback .form-item-lastname, .section-solar_callback .form-item-phone, .section-solar_callback [id="update_postalcode_wrapper"] { width: 48.78049%; float: right; margin-right: 0; } .i18n-en_AE .section-solar_callback .form-item-email, .i18n-ar_AE .section-solar_callback .form-item-email, .i18n-en_HK .section-solar_callback .form-item-email, .i18n-zh_HK .section-solar_callback .form-item-email, .i18n-en_MO .section-solar_callback .form-item-email, .i18n-zh_MO .section-solar_callback .form-item-email { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } .section-solar_callback .user-logged-in ~ .form-item-phone, .section-solar_callback .user-logged-in ~ [id="update_postalcode_wrapper"] { width: 48.78049%; float: left; margin-right: 2.43902%; } .section-solar_callback .user-logged-in ~ .form-item-country { width: 48.78049%; float: right; margin-right: 0; } } .section-solar_callback .action-btn, .section-solar_callback .thanks { text-align: center; } .stationary-storage-details { text-align: left; } .solar-roof-type { clear: both; text-align: center; } @media (min-width: 640px) { .solar-roof-type { margin-bottom: 20px; } } .solar-roof-type .form-radios { width: 100%; position: relative; } @media (min-width: 640px) { .solar-roof-type .form-radios { 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; } } .solar-roof-type .glass-type, .solar-roof-type .form-label:before { position: relative; z-index: 1; } .solar-roof-type .form-label { display: block; padding: 10px; } .solar-roof-type .form-label:before { display: block; content: " "; background-repeat: no-repeat; background-position: center; background-size: 100%; } @media (min-width: 640px) { .solar-roof-type .form-label:before { height: 100px; margin: auto; width: 100%; } } @media (min-width: 0) and (max-width: 639px) { .solar-roof-type .form-label:before { height: 40px; margin-right: 10px; width: 40px; } } .solar-roof-type .form-label[for="edit-options-tuscan-glass"]:before { background-image: url("/tesla_theme/assets/img/solar/styles-terra_cotta.jpg?20170214"); } .solar-roof-type .form-label[for="edit-options-slate-glass"]:before { background-image: url("/tesla_theme/assets/img/solar/styles-slate.jpg?20170214"); } .solar-roof-type .form-label[for="edit-options-textured-glass"]:before { background-image: url("/tesla_theme/assets/img/solar/styles-textured_glass.jpg?20170214"); } .solar-roof-type .form-label[for="edit-options-smooth-glass"]:before { background-image: url("/tesla_theme/assets/img/solar/styles-smooth_glass.jpg?20170214"); } @media (min-width: 640px) { .solar-roof-type .form-label { text-align: center; } } @media (min-width: 0) and (max-width: 639px) { .solar-roof-type .form-label { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 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; text-align: left; } } .solar-roof-type .form-item { background-color: #fff; position: static; } .solar-roof-type .form-item .parsley-error { color: #999; } @media (min-width: 0) and (max-width: 639px) { .solar-roof-type .form-item { width: 100%; } } @media (min-width: 640px) { .solar-roof-type .form-item { margin-left: 10px; margin-right: 10px; width: 25%; } .solar-roof-type .form-item:first-child { margin-left: 0; } .solar-roof-type .form-item:last-child { margin-right: 0; } } .solar-roof-type .icon-radio { transition: all 0.15s linear; -webkit-transform: translateZ(0); transform: translateZ(0); position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ccc; background-color: transparent; width: 100%; height: 100%; border-radius: 0; } .solar-roof-type .icon-radio:before { display: none; } .solar-roof-type .radio:checked + .icon-radio { transition: all 0.15s linear; -webkit-transform: translateZ(0); transform: translateZ(0); border: 2px solid #2CABE1; box-shadow: inset 0 0 0 1px #2CABE1; } .solar-roof-type .parsley-errors-list { width: 100%; } @media (min-width: 640px) { .solar-roof-type .parsley-errors-list { bottom: -4px; } } @media (min-width: 0) and (max-width: 639px) { .solar-roof-type .parsley-errors-list { bottom: -19px; } } .solar-roof-loader { top: 0; right: 0; bottom: 0; left: 0; position: relative; height: 100px; z-index: 1; } .cssanimations .solar-roof-loader { z-index: -1; background-color: rgba(255, 255, 255, 0.85); } .cssanimations .solar-roof-loader:before, .cssanimations .solar-roof-loader:after { height: 64px; height: 4rem; width: 64px; width: 4rem; top: 0; right: 0; bottom: 0; left: 0; content: ""; margin: auto; overflow: hidden; position: absolute; background-position: 0 0; background-repeat: no-repeat; } .cssanimations .solar-roof-loader:before { opacity: 0.15; background-color: rgba(255, 255, 255, 0.85); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGcgZmlsbD0iIzY1NjY2NCI+PHBhdGggZD0iTTE2LjkgMTUuNGMzLjgtMy41IDguNy01LjYgMTQuMi01Ljl2LTdjLTcuNC4zLTE0LjEgMy4yLTE5LjEgOGw0LjkgNC45ek05LjYgMzFjLjItNS41IDIuNC0xMC40IDUuOS0xNC4ybC00LjktNC45Yy00LjcgNS03LjcgMTEuNy03LjkgMTkuMWg2Ljl6TTMzLjEgMi41djdjNS41LjIgMTAuNCAyLjQgMTQuMiA1LjlsNC45LTQuOWMtNS00LjgtMTEuNy03LjctMTkuMS04ek0xNS41IDQ3LjJDMTIgNDMuNCA5LjggMzguNSA5LjYgMzNoLTdjLjIgNy40IDMuMiAxNC4xIDcuOSAxOS4xbDUtNC45ek01NC42IDMzYy0uMiA1LjUtMi40IDEwLjQtNS45IDE0LjJsNC45IDQuOWM0LjctNSA3LjctMTEuNyA3LjktMTkuMWgtNi45ek00OC43IDE2LjhjMy41IDMuOCA1LjYgOC43IDUuOSAxNC4yaDdjLS4yLTcuNC0zLjItMTQuMS03LjktMTkuMWwtNSA0Ljl6TTQ3LjMgNDguNmMtMy44IDMuNS04LjcgNS42LTE0LjIgNS45djdjNy40LS4yIDE0LjEtMy4yIDE5LjEtNy45bC00LjktNXpNMzEuMSA1NC41Yy01LjUtLjItMTAuNC0yLjQtMTQuMi01LjlMMTIgNTMuNWM1IDQuNyAxMS43IDcuNyAxOS4xIDcuOXYtNi45eiIvPjwvZz48L3N2Zz4=); } .no-svg .cssanimations .solar-roof-loader:before { background-image: url("/tesla_theme/assets/img/loading-background.png"); } .cssanimations .solar-roof-loader:after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iaGlnaGxpZ2h0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQ3LjMsMTUuOWw2LjUtNi41Yy01LjYtNS4zLTEzLjEtOC42LTIxLjQtOC44djkuMkMzOC4yLDEwLDQzLjMsMTIuMyw0Ny4zLDE1Ljl6Ii8+PC9zdmc+); -webkit-animation: spin 1s steps(8) infinite; animation: spin 1s steps(8) infinite; } .no-svg .cssanimations .solar-roof-loader:after { background-image: url("/tesla_theme/assets/img/loading-highlight.png"); } .cssanimations .solar-roof-loader.fade-in { z-index: 1; transition: opacity 0.25s linear; -webkit-transform: translateZ(0); transform: translateZ(0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opactiy=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .cssanimations .solar-roof-loader.fade-out { z-index: 1; transition: opacity 0.225s linear; -webkit-transform: translateZ(0); transform: translateZ(0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opactiy=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; } .no-cssanimations .solar-roof-loader { opacity: .7; } .no-cssanimations .solar-roof-loader div { height: 64px; height: 4rem; width: 64px; width: 4rem; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; position: absolute; z-index: 999; content: ""; background-position: top center; background-repeat: no-repeat; background-image: url("/tesla_theme/assets/img/loader.png"); }