Initial commit

plugins/jetpack/scss/_utilities/_accessibility.scss

@@ -0,0 +1,30 @@
+// ==========================================================================
+// Accessibility
+// ==========================================================================
+
+// Text meant only for screen readers
+.screen-reader-text {
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute !important;
+
+	&:hover,
+	&:active,
+	&:focus {
+		background-color: #f1f1f1;
+		border-radius: 3px;
+		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+		clip: auto !important;
+		color: #21759b;
+		display: block;
+		font-size: 14px;
+		font-weight: bold;
+		height: auto;
+		left: 5px;
+		line-height: normal;
+		padding: 15px 23px 14px;
+		text-decoration: none;
+		top: 5px;
+		width: auto;
+		z-index: 100000; // Above WP toolbar
+	}
+}

plugins/jetpack/scss/_utilities/_clearings.scss

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Clearings
+//
+// You can either use the mixin or @extend .clear.
+// ==========================================================================
+
+
+// The mixin
+@mixin clearfix() {
+	&:before, &:after {
+		content: "";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+%clearfix {
+	@include clearfix;
+}

plugins/jetpack/scss/_utilities/_grid.scss

@@ -0,0 +1,75 @@
+// ==========================================================================
+// Grid styles
+// 12 column grid
+// ==========================================================================
+
+.j-row {
+	width: 100%;
+	margin: 0 auto;
+	&:before, 
+	&:after {
+		content: " ";
+		display: table; 
+	}
+
+	&:after {
+		clear: both;
+	}
+}
+
+.j-col {
+	padding: 0.85em;
+	width: 100%;
+	float: left; 
+	position: relative;
+}
+
+// Small grid (Mobile first)
+@media only screen {
+	.j-sm-1		{width: 8.33333%;}
+	.j-sm-2		{width: 16.66667%;}
+	.j-sm-3		{width: 25%;}
+	.j-sm-4		{width: 33.33333%;}
+	.j-sm-5		{width: 41.66667%;}
+	.j-sm-6		{width: 50%;}
+	.j-sm-7		{width: 58.33333%;}
+	.j-sm-8		{width: 66.66667%;}
+	.j-sm-9		{width: 75%;}
+	.j-sm-10	{width: 83.33333%;}
+	.j-sm-11	{width: 91.66667%;}
+	.j-sm-12	{width: 100%;}
+}
+
+// Medium grid
+// 530px and up
+@include minbreakpoint(large-phone) {
+	.j-md-1		{width: 8.33333%;}
+	.j-md-2		{width: 16.66667%;}
+	.j-md-3		{width: 25%;}
+	.j-md-4		{width: 33.33333%;}
+	.j-md-5		{width: 41.66667%;}
+	.j-md-6		{width: 50%;}
+	.j-md-7		{width: 58.33333%;}
+	.j-md-8		{width: 66.66667%;}
+	.j-md-9		{width: 75%;}
+	.j-md-10	{width: 83.33333%;}
+	.j-md-11	{width: 91.66667%;}
+	.j-md-12	{width: 100%;}
+}
+
+// Large grid
+// 782px and up
+@include minbreakpoint(tablet) {
+	.j-lrg-1	{width: 8.33333%;}
+	.j-lrg-2	{width: 16.66667%;}
+	.j-lrg-3	{width: 25%;}
+	.j-lrg-4	{width: 33.33333%;}
+	.j-lrg-5	{width: 41.66667%;}
+	.j-lrg-6	{width: 50%;}
+	.j-lrg-7	{width: 58.33333%;}
+	.j-lrg-8	{width: 66.66667%;}
+	.j-lrg-9	{width: 75%;}
+	.j-lrg-10	{width: 83.33333%;}
+	.j-lrg-11	{width: 91.66667%;}
+	.j-lrg-12	{width: 100%;}
+}

plugins/jetpack/scss/_utilities/_ie.scss

@@ -0,0 +1,48 @@
+// ==========================================================================
+// Internet Explorer
+// ==========================================================================
+
+// ==========================================================================
+// IE9
+// ==========================================================================
+
+// .lt-ie10 {
+// 	.masthead {
+// 		@include ie-gradient($green, lighten($green, 12%));
+// 	}
+// 	.footer {
+// 		@include ie-gradient(lighten($green, 12%), $green);
+// 	}
+// 	@media screen and (max-width: 768px) {
+// 		$menu_width: 260px;
+//
+// 		.drawer-checkbox:checked ~ .header .drawer-nav {
+// 			left: 0;
+// 		}
+// 		.drawer-checkbox:checked ~ .wrapper{
+// 			margin-left: $menu_width;
+// 			margin-right:-($menu_width);
+// 		}
+// 	}
+// }
+
+// ==========================================================================
+// IE8
+// ==========================================================================
+
+.lt-ie9 {
+}
+
+// ==========================================================================
+// IE7
+// ==========================================================================
+
+.lt-ie8 {
+}
+
+// ==========================================================================
+// IE6
+// ==========================================================================
+
+.lt-ie7 {
+}

plugins/jetpack/scss/_utilities/_normalize.scss

@@ -0,0 +1,322 @@
+// ==========================================================================
+// Normalize
+// ==========================================================================
+
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+html {
+	font-family: sans-serif; // 1
+	-ms-text-size-adjust: 100%; // 2
+	-webkit-text-size-adjust: 100%; // 2
+}
+
+// Remove default margin.
+body {
+	margin: 0;
+}
+*,
+*:before,
+*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+	-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
+	-moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
+	box-sizing:         border-box;
+}
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+// Correct `block` display not defined in IE 8/9.
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+	display: block;
+}
+
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+audio,
+canvas,
+progress,
+video {
+	display: inline-block; // 1
+	vertical-align: baseline; // 2
+}
+
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+audio:not([controls]) {
+	display: none;
+	height: 0;
+}
+
+// Address `[hidden]` styling not present in IE 8/9.
+// Hide the `template` element in IE, Safari, and Firefox < 22.
+[hidden],
+template {
+	display: none;
+}
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+// Remove the gray background color from active links in IE 10.
+a {
+	background: transparent;
+}
+
+// Improve readability when focused and also mouse hovered in all browsers.
+a:active,
+a:hover {
+	outline: 0;
+}
+
+// ==========================================================================
+// Text-level semantics
+// ==========================================================================
+
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+b,
+strong {
+	font-weight: bold;
+}
+
+// Address styling not present in Safari 5 and Chrome.
+dfn {
+	font-style: italic;
+}
+
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+// Address styling not present in IE 8/9.
+mark {
+	background: #ff0;
+	color: #000;
+}
+
+// Address inconsistent and variable font size in all browsers.
+small {
+	font-size: 80%;
+}
+
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+sup {
+	top: -0.5em;
+}
+sub {
+	bottom: -0.25em;
+}
+
+// ==========================================================================
+// Embedded content
+// ==========================================================================
+
+// Remove border when inside `a` element in IE 8/9.
+img {
+	border: 0;
+}
+
+// Correct overflow displayed oddly in IE 9.
+svg:not(:root) {
+	overflow: hidden;
+}
+
+// ==========================================================================
+// Grouping content
+// ==========================================================================
+
+// Address margin not present in IE 8/9 and Safari 5.
+figure {
+	margin: 1em 40px;
+}
+
+// Address differences between Firefox and other browsers.
+hr {
+	box-sizing: content-box;
+	height: 0;
+}
+
+// Contain overflow in all browsers.
+pre {
+	overflow: auto;
+}
+
+// Address odd `em`-unit font size rendering in all browsers.
+code,
+kbd,
+pre,
+samp {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+button,
+input,
+optgroup,
+select,
+textarea {
+	color: inherit; // 1
+	font: inherit; // 2
+	margin: 0; // 3
+}
+
+// Address `overflow` set to `hidden` in IE 8/9/10.
+button {
+	overflow: visible;
+}
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8+, and Opera
+// Correct `select` style inheritance in Firefox.
+button,
+select {
+	text-transform: none;
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+	-webkit-appearance: button; // 2
+	cursor: pointer; // 3
+}
+
+// Re-set default cursor for disabled elements.
+button[disabled],
+html input[disabled] {
+	cursor: default;
+}
+
+// Remove inner padding and border in Firefox 4+.
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+input {
+	line-height: normal;
+}
+
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box; // 1
+	padding: 0; // 2
+}
+
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  box-sizing: content-box;
+}
+
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+// Define consistent border, margin, and padding.
+fieldset {
+	border: 1px solid #c0c0c0;
+	margin: 0 2px;
+	padding: 0.35em 0.625em 0.75em;
+}
+
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+legend {
+	border: 0; // 1
+	padding: 0; // 2
+}
+
+// Remove default vertical scrollbar in IE 8/9.
+textarea {
+	overflow: auto;
+}
+
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+optgroup {
+	font-weight: bold;
+}
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+// Remove most spacing between table cells.
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+td,
+th {
+	padding: 0;
+}

plugins/jetpack/scss/_utilities/_print.scss

@@ -0,0 +1,67 @@
+// ==========================================================================
+// Print styles.
+// Inlined to avoid required HTTP connection: h5bp.com/r
+// ==========================================================================
+@media print {
+	* {
+		background: transparent !important;
+		color: #000 !important; // Black prints faster: h5bp.com/s
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+
+	a,
+	a:visited {
+		text-decoration: underline;
+	}
+
+	a[href]:after {
+		content: " (" attr(href) ")";
+	}
+
+	abbr[title]:after {
+		content: " (" attr(title) ")";
+	}
+
+	// Don't show links for images, or javascript/internal links
+	.ir a:after,
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+
+	pre,
+	blockquote {
+		border: 1px solid #999;
+		page-break-inside: avoid;
+	}
+
+	thead {
+		display: table-header-group; // h5bp.com/t
+	}
+
+	tr,
+	img {
+		page-break-inside: avoid;
+	}
+
+	img {
+		max-width: 100% !important;
+	}
+
+	@page {
+		margin: 0.5cm;
+	}
+
+	p,
+	h2,
+	h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2,
+	h3 {
+		page-break-after: avoid;
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_arrows.scss

@@ -0,0 +1,64 @@
+// ==========================================================================
+// Arrows
+//
+// Use this to generate most of the code for your CSS arrows.
+//
+//
+// EXAMPLE
+//
+// .tooltip {
+// 	&:before {
+// 		@include arrow--up(7px, #333);
+// 		left: 50%;
+// 		margin-left: -7px;
+// 	}
+// }
+//
+// ==========================================================================
+
+@mixin arrow--base(){
+	position: absolute;
+	content: '';
+	width: 0;
+	height: 0;
+}
+
+@mixin arrow--top($size: 10px, $color: #ccc){
+	@include arrow--base;
+	bottom: 100%;
+	border-left: $size solid transparent;
+	border-right: $size solid transparent;
+	border-bottom: $size solid $color;
+}
+
+@mixin arrow--up($size: 10px, $color: #ccc){
+	@include arrow--top($size, $color);
+}
+
+@mixin arrow--right($size: 10px, $color: #ccc){
+	@include arrow--base;
+	left: 100%;
+	border-top: $size solid transparent;
+	border-bottom: $size solid transparent;
+	border-left: $size solid $color;
+}
+
+@mixin arrow--bottom($size: 10px, $color: #ccc){
+	@include arrow--base;
+	top: 100%;
+	border-left: $size solid transparent;
+	border-right: $size solid transparent;
+	border-top: $size solid $color;
+}
+
+@mixin arrow--down($size: 10px, $color: #ccc){
+	@include arrow--bottom($size, $color);
+}
+
+@mixin arrow--left($size: 10px, $color: #ccc){
+	@include arrow--base;
+	right: 100%;
+	border-top: $size solid transparent;
+	border-bottom: $size solid transparent;
+	border-right:$size solid $color;
+}

plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss

@@ -0,0 +1,46 @@
+// ==========================================================================
+// Breakpoint Mixin
+//
+// Uses Sass Maps which requires Sass v3.3.0 or newer
+//
+//
+// EXAMPLE
+//
+// body {
+// 	@include breakpoint(tablet){
+// 		font-size: 14px;
+// 	};
+// }
+
+// ==========================================================================
+
+// Add or remove breakpoints as you desire
+$breakpoints:(
+	phone: 320px,
+	large-phone: 530px,
+	phablet: 600px,
+	tablet: 782px,
+	desktop: 900px,
+	large-desktop: 1147px,
+);
+
+@mixin breakpoint($size){
+	@each $breakpoint, $value in $breakpoints {
+		@if $size == $breakpoint {
+			@media (max-width: map-get($breakpoints, $breakpoint)){
+				@content;
+			}
+		}
+	}
+}
+
+// For mobile first
+@mixin minbreakpoint($size){
+	@each $breakpoint, $value in $breakpoints {
+		@if $size == $breakpoint {
+			@media (min-width: map-get($breakpoints, $breakpoint)){
+				@content;
+			}
+		}
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_button.scss

@@ -0,0 +1,45 @@
+// Taken from core `wp-admin/css/colors/_mixins.scss`
+
+/*
+ * Button mixin- creates 3d-ish button effect with correct
+ * highlights/shadows, based on a base color.
+ */
+@mixin button( $button-color, $text-color: white ) {
+	background: $button-color;
+	border-color: darken( $button-color, 10% );
+	color: $text-color;
+	box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
+
+	&:hover,
+	&:focus {
+		background: darken( $button-color, 5% );
+		border-color: darken( $button-color, 15% );
+		color: $text-color;
+		box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
+	}
+
+	&:focus {
+		box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba( 30, 140, 190, .8 );
+	}
+
+	&:active {
+		background: darken( $button-color, 10% );
+		border-color: darken( $button-color, 15% );
+		color: $text-color;
+		box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba( 30, 140, 190, .8 );
+	}
+
+	&[disabled],
+	&:disabled,
+	&.button-primary-disabled,
+	&.disabled {
+		color: hsl( hue( $button-color ), 10%, 80% ) !important;
+		background: darken( $button-color, 8% ) !important;
+		border-color: darken( $button-color, 15% ) !important;
+		text-shadow: none !important;
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_custom-scrollbar.scss

@@ -0,0 +1,16 @@
+// ==========================================================================
+// Custom scrollbars
+// ==========================================================================
+
+@mixin custom-scrollbar($width: .8em, $track: rgba(217, 217, 217, .5), $thumb: rgba(184, 184, 184, .5)){
+	::-webkit-scrollbar {
+		width: $width;
+	}
+	::-webkit-scrollbar-track {
+		background-color: $track;
+	}
+	::-webkit-scrollbar-thumb {
+		background: $thumb;
+		box-shadow: inset .05em .05em 0 rgba(0, 0, 0, .1), inset 0 -.05em 0 rgba(0, 0, 0, .07);
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_full-width-bars.scss

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Full-width bars
+// ==========================================================================
+
+@mixin full-width-bars() {
+	// Still testing this one
+	position: relative;
+	z-index: 1;
+
+	&:before {
+		position: absolute;
+		content: "";
+		display: block;
+		top: 0;
+		left: -5000px;
+		height: 100%;
+		width: 15000px;
+		z-index: -1;
+		@content;
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_gradient--vertical.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// Vertical gradient
+// ==========================================================================
+
+@mixin gradient--vertical($start, $end){
+	background-color: $end;
+	background-image: linear-gradient(top, $start, $end); // Chrome 26, Firefox 16+, IE 10+, Opera 12.10+
+}

plugins/jetpack/scss/_utilities/mixins/_ie__gradient--vertical.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// ie__gradient--vertical
+// ==========================================================================
+
+@mixin ie__gradient--vertical($start, $end){
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$start}', EndColorStr='#{$end}');
+}

plugins/jetpack/scss/_utilities/mixins/_image-replacement.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Image replacement
+// ==========================================================================
+
+@mixin image-replacement($url, $width, $height) {
+	// I totally stole this idea from Marcel Shields.
+	// Read his article: http://css-tricks.com/replace-the-image-in-an-img-with-css/
+	display: block;
+	width: $width; // Width of new image
+	height: $height; // Height of new image
+	padding-left: $width; // Equal to width of new image
+	background: url($url) no-repeat;
+}

plugins/jetpack/scss/_utilities/mixins/_mixins.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Mixins
+// ==========================================================================
+
+@import
+	"arrows",
+	"breakpoint",
+	"custom-scrollbar",
+	"gradient--vertical",
+	"ie__gradient--vertical",
+	"image-replacement",
+	"retina-background",
+	"sections";

plugins/jetpack/scss/_utilities/mixins/_retina-background.scss

@@ -0,0 +1,17 @@
+// ==========================================================================
+// Retina background
+// ==========================================================================
+
+@mixin retina-background ($url, $file-type, $width: auto, $repeat: repeat, $ratio: 1.5, $suffix: "@2x") {
+	background: url($url + "." + $file-type);
+	background-repeat: $repeat;
+	// Media queries from http://git.io/k-x0wA
+	@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+		only screen and (min--moz-device-pixel-ratio: $ratio),
+		only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+		only screen and (min-resolution: #{round($ratio*96)}dpi),
+		only screen and (min-resolution: #{$ratio}dppx) {
+		background: url($url + $suffix + "." + $file-type);
+		background-size: $width auto;
+	}
+}

plugins/jetpack/scss/_utilities/mixins/_sections.scss

@@ -0,0 +1,25 @@
+// ==========================================================================
+// Retina background
+// ==========================================================================
+
+@mixin section($section, $sub: false) {
+	// Creates value to be used as section numbers
+	@if variable-exists(toc-value){} @else {
+		$toc-value: 0 !global;
+	}
+
+	// Sets index numbering
+	@if $sub == false { // increments by 1 (rounding down)
+		$toc-value: floor($toc-value) + 1 !global;
+	} @else { // increments by .1
+		$toc-value: $toc-value + .1  !global;
+	}
+
+	$spacing: ' ';
+	@for $i from 1 to (6 - str-length('#{$toc-value}')) {
+		$spacing: $spacing + ' ';
+	}
+	/*--------------------------------------------------------------
+	#{$toc-value}#{$spacing}#{$section}
+	--------------------------------------------------------------*/
+}

plugins/jetpack/scss/atoms/_animations.scss

@@ -0,0 +1,40 @@
+// ==========================================================================
+// Animation for miles!
+// ==========================================================================
+
+
+@keyframes "grow" {
+	0% {
+		transform: scale(.3);
+	}
+	60% {
+		transform: scale(1.15);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes "candy" {
+	0% {
+		transform: scale(1);
+	}
+	20% {
+		transform: scale(1.15);
+	}
+	60% {
+		transform: scale(.95);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes "flyer" {
+	 0% {
+		transform: translate3d(0px, 0px, 0px);
+	}
+	100% {
+		transform: translate3d(680px, -680px, 0px);
+	}
+}

plugins/jetpack/scss/atoms/_buttons.scss

@@ -0,0 +1,157 @@
+// ==========================================================================
+// Buttony button buttons
+// ==========================================================================
+
+.button,
+.download-jetpack {
+	transition: all .1s ease-in-out;
+}
+.jp-button {
+	display: inline-block;
+	position: relative;
+	padding: em(10px, 13px) em(19px, 13px);
+	color: #efefef;
+	font: 800 0.9285714286em/1 'Open Sans', Helvetica, sans-serif; // 13/14
+	text-shadow: 0 1px 1px rgba(0,0,0,.2);
+	background: #6f7476;
+	border-radius: 3px;
+
+	&:visited {
+		color: #efefef;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+	}
+	&:active {
+		background: #57972d;
+		opacity: 0.8;
+	}
+}
+.jp-button--settings {
+	@extend .jp-button;
+	background: #93b45f;
+	color: #e8eedf;
+
+	&:visited {
+		color: #e8eedf
+	}
+	&:hover,
+	&:focus {
+		background: #9fbd72;
+		color: #fff;
+	}
+	&.current {
+		background: #3c6621;
+		color: #fff;
+		box-shadow:
+			inset 0 2px 0 #365A1F,
+			inset 0 1px 3px #3c6621;
+	}
+}
+.download-jetpack {
+	display: inline-block;
+	position: relative;
+	padding: em(18px, 28px) em(50px, 46px) em(15px, 28px);
+	color: #fff;
+	font: 400 20px/1 "proxima-nova", 'Open Sans', Helvetica, sans-serif; // 28/14
+	background: #518d2a;
+	z-index: 3;
+	border-radius: 6px;
+	box-shadow:
+		0 6px 0 #3e6c20,
+		0 6px 3px rgba(0,0,0,.4);
+
+	&:visited {
+		color: #fff;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+		box-shadow:
+			0 6px 0 #3e6c20,
+			0 6px 3px rgba(0,0,0,.4);
+	}
+	&:active {
+		top: 6px;
+		box-shadow:
+			0 0px 0 #3e6c20,
+			0 0 0 rgba(0,0,0,.4);
+
+		&:after {
+			// fixes buggy clicks
+			top: -6px;
+		}
+	}
+	&:before {
+		content: '';
+		display: inline-block;
+		position: relative;
+		top: -2px;
+		margin-right: 13px;
+		width: 30px;
+		height: 30px;
+		vertical-align: middle;
+		background: url('../images/connect-plug.svg') center center no-repeat;
+		background-size: 100%;
+	}
+	&:after {
+		// fixes buggy clicks
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	@include breakpoint(large-desktop){
+		font-size: em(18px);
+
+		&:before {
+			top: -1px;
+			width: 23px;
+			height: 23px;
+		}
+	};
+	@include breakpoint(desktop){
+		&:active {
+			top: 0;
+		}
+	};
+	@include breakpoint(large-phone){
+		font-size: em(17px);
+		font-weight: 600;
+
+		&:before {
+			width: 19px;
+			height: 19px;
+			margin-right: 9px;
+		}
+	};
+}
+#searchsubmit {
+	display: inline-block;
+	border: none;
+	position: relative;
+	padding: em(5px, 7px) em(9px, 6px);
+	color: #efefef;
+	font: 800 0.8em/1 'Open Sans', Helvetica, sans-serif; // 13/14
+	text-shadow: 0 1px 1px rgba(0,0,0,.2);
+	background: #6f7476;
+	outline: none;
+	border-radius: 3px;
+
+	&:visited {
+		color: #efefef;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #2aa0d5;
+	}
+	&:active {
+		opacity: 0.7;
+	}
+}

plugins/jetpack/scss/atoms/_media.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// Media elements
+// ==========================================================================
+
+// Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+img {
+	vertical-align: middle;
+}

plugins/jetpack/scss/atoms/colors/_colors.scss

@@ -0,0 +1,16 @@
+// ==========================================================================
+// Jetpack Colors
+// ==========================================================================
+
+$green: #81a844;
+$white: #fff;
+$red: #d94f4f;
+
+// Blues
+$lightblue: #2ea2cc;
+$wpcom: #0087be;
+$blue-dark: #005082;
+
+// Grays
+$clouds: #f9f9f9;
+$gray-med: #686f72;

plugins/jetpack/scss/atoms/icons/_automatticons.scss

@@ -0,0 +1,32 @@
+// ==========================================================================
+// Automatticons
+//
+// A quick reference
+// ==========================================================================
+
+$automatticons: 'automatticons';
+
+// This font was graciously generated by Font Squirrel (http://www.fontsquirrel.com). We love those guys.
+@font-face {
+	font-family: 'automatticons';
+	src: url('../_inc/fonts/automatticons/automatticons.eot');
+	src: url('../_inc/fonts/automatticons/automatticons.eot?#iefix') format('embedded-opentype'),
+		url('../_inc/fonts/automatticons/automatticons.woff') format('woff'),
+		url('../_inc/fonts/automatticons/automatticons.ttf') format('truetype'),
+		url('../_inc/fonts/automatticons/automatticons.svg#automatticonsregular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+// $automattic: 'A';
+// $code-poet: 'C';
+// $facebook: 'F';
+// $gravatar: 'G';
+// $inferno: 'I'; // Not sure what this one is
+// $jetpack: 'J';
+// $akismet: 'K';
+// $polldaddy: 'P';
+// $shield: 's'; // VaultPress shield
+// $vaultpress: 'V';
+// $vaultpress-inverted: 'v';
+// $wordpress: 'W';

plugins/jetpack/scss/atoms/icons/_jetpack.scss

@@ -0,0 +1,23 @@
+//
+// Icon Font: jetpack
+//
+
+@font-face {
+	font-family: "jetpack";
+	src: url("../_inc/fonts/jetpack/jetpack.eot");
+	src: url("../_inc/fonts/jetpack/jetpack.eot?#iefix") format("embedded-opentype"),
+		url("../_inc/fonts/jetpack/jetpack.woff") format("woff"),
+		url("../_inc/fonts/jetpack/jetpack.ttf") format("truetype"),
+		url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	@font-face {
+		font-family: "jetpack";
+		src: url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
+	}
+}
+
+// .jetpack-icon-20:before { content: "\f102"; }

plugins/jetpack/scss/atoms/typography/_functions.scss

@@ -0,0 +1,12 @@
+// ==========================================================================
+// em()
+//
+// Convert px to em in a readable fashion.
+// ==========================================================================
+
+// Examples:
+// 1. font-size: em(14px);
+// 2. font-size: em(30px/14px);
+@function em($value, $context: map-get($root-font, font-size)) {
+	@return ($value / $context * 1em);
+}

plugins/jetpack/scss/atoms/typography/_typography.scss

@@ -0,0 +1,112 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+@import
+	"variables",
+	"functions";
+
+body,
+button,
+input,
+select,
+textarea {
+	color: map-get($root-font, color);
+	font-family: $sans;
+	font-size: map-get($root-font, font-size);
+	line-height: map-get($root-font, line-height);
+	-webkit-font-smoothing: antialiased;
+}
+
+
+// ==========================================================================
+// Headings
+// ==========================================================================
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: #222;
+	clear: both;
+}
+
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+a {
+	color: #0d72b2;
+	transition: color .2s;
+	text-decoration: none;
+
+	&:visited {
+		color: #0d72b2;
+	}
+	&:hover {
+		color: #0f92e5;
+	}
+	&:focus {
+		outline: thin dotted;
+	}
+}
+
+
+// ==========================================================================
+// Basic block-level elements
+// ==========================================================================
+
+address {
+	margin: 0 0 1.5em;
+}
+
+// ==========================================================================
+// Text-level markup
+// ==========================================================================
+
+abbr[title],
+acronym {
+	cursor: help;
+}
+
+ins {
+	background: #eee;
+	text-decoration: none;
+}
+
+// ==========================================================================
+// Lists
+// ==========================================================================
+
+dt {
+	font-weight: $bold;
+}
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+// Remove default fieldset styles.
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
+// Allow only vertical resizing of textareas.
+textarea {
+	resize: vertical;
+}
+
+// A better looking default horizontal rule
+hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid #ccc;
+	margin: 1em 0;
+	padding: 0;
+}

plugins/jetpack/scss/atoms/typography/_variables.scss

@@ -0,0 +1,32 @@
+// ==========================================================================
+// Typography variables
+// ==========================================================================
+
+$normal: 400; // Change these values when using custom fonts
+$bold: 700; // For example, bold could change to 400;
+
+$root-font:(
+	color: #222,
+	font-size: 14px,
+	line-height: 1.4
+);
+
+$pre__background: #eee;
+$mark__background: #fff9c0;
+
+// ==========================================================================
+// Typefaces
+// ==========================================================================
+
+$monospace: 'courier new', monospace;
+$serif: Georgia, "Times New Roman", Times, serif;
+$sans: 'Open Sans', Helvetica, Arial, sans-serif; // 400i,400,600,700,800
+$calluna: 'calluna', $sans; // 400
+$gill: "Gill Sans", "Gill Sans MT", $sans;
+$proxima: "proxima-nova", $sans; // 300,400,600
+
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+$genericons: 'genericons';

plugins/jetpack/scss/dashboard-widget.scss

@@ -0,0 +1,5 @@
+@import "atoms/colors/colors",
+	"_utilities/mixins/mixins",
+	"_utilities/mixins/button",
+	"templates/dashboard-widget",
+	"_utilities/clearings";

plugins/jetpack/scss/jetpack-admin-jitm.scss

@@ -0,0 +1,170 @@
+// Just in Time Messaging - message prompts
+
+.jp-jitm {
+	border-radius: 2px;
+	max-width: 100%;
+	margin: 2em auto 1em auto;
+	padding: .85em;
+	background: #fcfcfc;
+	border: 1px solid #dedede;
+	text-align: center;
+
+	// clear hack
+	&:before, &:after {
+		content: "";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+
+	#screen-meta-links + & {
+	  margin: 3em 1.5385em 0 auto;
+	}
+
+	.activate {
+		margin-top: .5em;
+	} 
+	.jp-emblem {
+		width: 25px;
+		height: 25px; // for ie svg
+		margin: .40em 1em 0 auto;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	path {
+		fill: #8cc258;
+	}
+
+	.dismiss {
+		margin: 0;
+		text-decoration: none;
+		float: right;
+		&:before {
+			color: #666;
+			font: 400 15px/1 dashicons;
+			content: '\f158';
+		}
+	}
+
+	p {
+		font-size: 1em;
+		line-height: 165%;
+	}
+
+	.j-spinner {
+		margin: 8px 0 0;
+		height: 17px;
+		width: 17px;
+	}
+
+	.hide {
+		display: none;
+	}
+
+	form[name=post] > &:first-of-type {
+		margin-top: 1em;
+	}
+
+	@media (min-width: 800px) {
+		.jp-emblem, p {
+			float: left;
+			/* margin: .5em 1em 0 .5em;
+			padding-top: 4px; */
+		}
+		.jp-emblem {
+			width: 20px;
+			height: 20px; // for ie svg
+			margin-right: .5em;
+		}
+		p {
+			margin: .40em 1em 0 0;
+		}
+		p + p {
+			margin: 0;
+			padding: 0;
+		}
+		.activate {
+			margin-top: 0;
+		}
+	} // > 1100px
+
+	@media (max-width: 1100px) {
+		margin: 2.5em .75em .5em .5em;
+
+		form[name=post] > &:first-of-type {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+
+	@media (max-width: 800px) {
+		.jp-emblem {
+			margin: .40em auto 0 auto;
+		}
+	}
+
+} // .jp-jitm
+
+// update core page
+.update-core-php .jp-jitm {
+	@media (min-width: 1100px) { margin: 3em 2em 0 auto; }
+}
+
+// when jetpack is connected, we need to move up the upload prompt content so the photo JITM can fit properly.
+.jetpack-connected .media-modal-content .uploader-inline-content {
+	top: 20%;
+}
+
+.media-menu {
+
+	@media only screen and (min-width: 800px) {
+
+		.jp-jitm {
+			margin: 10px 0;
+			padding: 5px 5px 15px;
+			border-width: 1px 0;
+
+			.jp-emblem {
+				margin: 20px 10px 0 15px;
+			}
+
+			.msg {
+				width: 75%;
+				text-align: left;
+				margin: 0 0 10px;
+			}
+
+			.msg + p {
+				text-align: center;
+				width: 100%;
+			}
+		}
+	}
+
+
+	@media only screen and (max-width: 900px) {
+
+		.jp-jitm {
+			display: none;
+			margin: .5em 3%;
+			border-width: 1px;
+
+			.msg {
+				margin-top: 20px;
+				width: 88%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		&.visible .jp-jitm {
+			display: block;
+		}
+	}
+
+}

plugins/jetpack/scss/jetpack-admin.scss

@@ -0,0 +1,17 @@
+@import "atoms/colors/colors", // Color variables
+	"_utilities/mixins/mixins", // Mixins
+	"_utilities/grid",
+	"atoms/typography/typography",
+	"atoms/media",
+	"atoms/animations",
+	"atoms/buttons",
+	"atoms/icons/automatticons",
+	"atoms/icons/jetpack",
+	"molecules/nav-horizontal",
+	"templates/main", // Main template
+	"templates/settings", // Settings page
+	"pages/protect", // Protect config page
+	"pages/connection-settings", // Connection settings page
+	"pages/manage", // Actiavte and confirm manage
+	"templates/connection-landing", // jetpack connection landing, main admin, jumpstart
+	"_utilities/clearings";

plugins/jetpack/scss/jetpack-banners.scss

@@ -0,0 +1,4 @@
+@import "_utilities/mixins/mixins",
+	"atoms/typography/variables",
+	"atoms/typography/functions",
+	"organisms/banners";

plugins/jetpack/scss/jetpack-icons.scss

@@ -0,0 +1,27 @@
+@import "atoms/icons/jetpack"; // Jetpack logo and icons
+
+// ==========================================================================
+// Admin nav iconx
+// ==========================================================================
+
+li.toplevel_page_jetpack .wp-menu-image:before {
+	font-family: 'jetpack' !important;
+	content: '\f102';
+}
+#menu-posts-feedback .wp-menu-image:before {
+	font-family: dashicons !important;
+	content: '\f175';
+}
+#adminmenu #menu-posts-feedback div.wp-menu-image {
+	background: none !important;
+	background-repeat: no-repeat;
+}
+@media (max-width:900px) {
+	.auto-fold #adminmenu a.toplevel_page_jetpack {
+		height: auto ;
+	}
+}
+
+// ==========================================================================
+// Protect Widget Icons
+// ==========================================================================

plugins/jetpack/scss/molecules/_nav-horizontal.scss

@@ -0,0 +1,19 @@
+// ==========================================================================
+// Horizontal menu!
+// ==========================================================================
+
+.nav-horizontal {
+	@extend %clearfix;
+
+	a {
+		display: inline-block;
+	}
+	li {
+		position: relative;
+		float: left;
+	}
+	ul {
+		margin: 0;
+		padding: 0;
+	}
+}

plugins/jetpack/scss/organisms/_banners.scss

@@ -0,0 +1,350 @@
+#message.jp-identity-crisis {
+	display: table;
+	padding: 0;
+	background: #d94f4f;
+	border: none;
+	color: #fff;
+
+	.service-mark {
+		display: table-cell;
+		vertical-align: middle;
+		padding: 0 20px;
+		&:before {
+			font-family: "jetpack" !important;
+			content: "\f102";
+			font-size: 40px;
+			line-height: 1;
+			color: #fff;
+	    }
+	}
+	.jp-id-banner__content {
+		display: table;
+		padding: 10px 10px 10px 0;
+
+		.success-notice {
+			color: #fff;
+		}
+
+		.banner-content {
+			display: table-row;
+
+			p {
+				margin: 0;
+				font-size: 13px;
+				color: #fff;
+				opacity: 1.0;
+
+				strong {
+					text-decoration: none;
+					font-weight: 600;
+					color: #fff;
+					opacity: 1.0;
+				}
+			}
+
+			a {
+				display: inline-block;
+				color: rgba(255, 255, 255, 0.80);
+				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+				text-decoration: none;
+				-webkit-transform: all 1s ease;
+			}
+		}
+		.jp-btn-group {
+			display: table-row;
+
+			a {
+				display: inline-block;
+				margin: 10px 0 0 0;
+				padding: 0 0 1px 0;
+				color: rgba(255, 255, 255, 0.80);
+				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+				text-decoration: none;
+				-webkit-transform: all 1s ease;
+
+				&:hover {
+					color: rgba(255, 255, 255, 1.0);
+					border-bottom: 1px solid rgba(255, 255, 255, 0.80);
+				}
+			}
+
+			.idc-separator {
+				margin: 0 6px;
+			}
+		}
+	}
+}
+
+#message.jp-banner {
+	position: relative;
+	margin-bottom: 26px;
+	padding: 17px 44px 17px 0;
+	border: none;
+	background: #81a844;
+	color: #fff;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	&:after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		right: -100px;
+		width: 100%;
+		height: 50px;
+		background: url('../images/the-footcloud.svg') right bottom no-repeat;
+		pointer-events: none;
+		z-index: 1;
+
+		@media ( max-width: 830px ) {
+			display: none;
+		}
+	}
+	a {
+		color: #fff;
+	}
+	h2 {
+		display: block;
+		margin: 0;
+		padding: 0;
+		color: #fff;
+		font-size: 20px;
+		line-height: 1.3;
+		font-weight: normal;
+
+		+ p {
+			margin-top: 10px;
+		}
+	}
+}
+
+.jp-banner a {
+	padding: 0;
+}
+
+#message .jp-banner__content {
+	color: #dfffcc;
+	padding: 0 0 0 20px;
+	box-sizing: border-box;
+	width: 50%;
+
+	@media ( max-width: 768px ) {
+		width: 100%;
+
+		&.is-connection {
+			width: 100%;
+		}
+	}
+
+	a {
+		text-decoration: underline;
+		/* Medium.com text underline hack - doesn't work well on small mobile devices... reverting to traditional underline
+		background-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #fff 50%);
+		background-repeat: repeat-x;
+		background-size: 2px 2px;
+		background-position: 0 95%;
+		display: inline-block;
+
+		@media not all, only screen and (min-resolution: 2dppx), only screen and (-webkit-min-device-pixel-ratio: 2) {
+			background-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #fff 75%);
+			background-repeat: repeat-x;
+		}
+		*/
+	}
+	p {
+		margin: 0;
+		padding: 0;
+		line-height: 1.5;
+	}
+}
+
+#message .jp-banner__action-container {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding-left: 20px;
+	width: 50%;
+	height: 100%;
+	box-sizing: border-box;
+
+	@media ( max-width: 768px ) {
+		position: static;
+		margin: 14px 0 9px;
+		width: 100%;
+	}
+	&.is-full-width {
+		position: static;
+		margin: 14px 0 9px;
+		width: 100%;
+		height: auto;
+	}
+	&.is-connection {
+
+		@media ( max-width: 768px ) {
+			width: 100%;
+		}
+	}
+}
+
+// 'activate now' banner displayed on dashboard
+#message {
+	&.is-opt-in {
+		.jp-banner__content {
+			width: 60%;
+		}
+		.jp-banner__action-container {
+			width: 40%;
+		}
+
+		@media ( max-width: 768px ) {
+			.jp-banner__content, .jp-banner__action-container {
+				width: 100%;
+			}
+		}
+	}
+}
+
+#message .jp-banner__button {
+	display: inline-block;
+	position: absolute;
+		top: 50%;
+		right: 125px;
+	margin-top: -23px;
+	padding: em(12px, 21px) em(18px, 21px) em(8px, 21px) em(12px, 21px);
+	border-radius: 6px;
+	box-sizing: border-box;
+	background: #518d2a;
+	box-shadow:
+		0 4px 0 #3e6c20,
+		0 2px 3px rgba(0,0,0,.2);
+	font: 400 1.5em/1 'Open Sans', Helvetica, sans-serif;
+	transition: all .1s ease-in-out;
+
+	@media ( max-width: 1175px ){
+		font-size: 1.25em;
+		right: 110px;
+	}
+
+	@media ( max-width: 830px ){
+		right: 45px;
+	}
+
+	@media ( max-width: 768px ) {
+		position: static;
+		margin: 0;
+	}
+	@media ( max-width: 420px ) {
+		display: block;
+		width: 100%;
+		text-align: center;
+		font-size: 1.1em;
+		right: 0;
+	}
+	&:hover,
+	&:focus {
+		box-shadow:
+			0 4px 0 #3e6c20,
+			0 2px 3px rgba(0,0,0,.2);
+	}
+	&:active {
+		outline: none;
+		transform: translateY(2px);
+		box-shadow:
+			0 0px 0 #3e6c20,
+			0 0 0 rgba(0,0,0,.2);
+
+		&:after {
+			// fixes buggy clicks
+			top: -2px;
+		}
+	}
+	&:before {
+		content: '';
+		display: inline-block;
+		position: relative;
+		vertical-align: middle;
+		background: url('../images/connect-plug.svg') center center no-repeat;
+		background-size: 100%;
+		top: -2px;
+		margin-right: 13px;
+		width: 22px;
+		height: 22px;
+
+		@media ( max-width: 420px ) {
+			display: none;
+		}
+	}
+}
+
+#message .is-full-width .jp-banner__button {
+	position: static;
+	margin: 0;
+}
+
+// Changes icon for opt-in message
+#message .is-opt-in .jp-banner__button:before {
+	content: "\f147";
+	width: 20px;
+	height: 20px;
+	background: none;
+	font: normal 20px/1 Dashicons;
+}
+
+#message .jp-banner__dismiss {
+	position: absolute;
+		top: 0;
+		right: 0;
+	width: 44px;
+	height: 44px;
+	text-align: center;
+	z-index: 99;
+
+	&:before {
+		color: #a7c979;
+		content: '\f158';
+		font: normal 20px/44px 'dashicons';
+	}
+	&:hover {
+		opacity: 0.8;
+	}
+	&:active {
+		opacity: 1;
+		outline: none;
+	}
+}
+
+// temporary styles for protect module error. banners to be rebuilt soon. - Jeff Golenski
+
+#message.jp-banner.protect-error {
+	background: #fff;
+	border-left: 4px #d94f4f solid;
+
+	.jp-banner__content {
+		color: #444;
+		h2, a {
+			color: #d94f4f;
+		}
+		a:hover {
+			color: darken(#d94f4f, 5%);
+		}
+	}
+
+	.jp-banner__button {
+		background: #d94f4f;
+		box-shadow: none;
+		color: #fff;
+
+		&:hover,
+		&:focus,
+		&:active {
+			box-shadow: none;
+		}
+		&:hover {
+			background: darken(#d94f4f, 5%);
+		}
+	}
+
+	.jp-banner__dismiss:before {
+		color: #a0a5aa;
+	}
+}

plugins/jetpack/scss/pages/_connection-settings.scss

@@ -0,0 +1,160 @@
+// ==========================================================================
+// Jetpack Connection Settings (located under 'My Jetpack')
+//===========================================================================
+
+.my-jetpack-actions {
+	margin: 0 0 40px 0;
+
+	.j-col {
+		padding: 0;
+		text-align: center;
+	}
+
+	#user-list {
+		height: 30px;
+		margin-top: -1px;
+		margin-left: -3px;
+	}
+}
+
+#jetpack-disconnect-content {
+	display: none;
+	text-align: center;
+	.cancel-disconnect {
+		display: block;
+		margin-top: 10px;
+	}
+}
+
+.connection-details {
+	border: 1px #ddd solid;
+
+	&.local-user {
+		margin-bottom: 10px;
+	}
+
+	.user-01,
+	.wpuser-02,
+	.action-btns {
+		padding: 10px;
+
+		.button, select {
+			margin-top: 5px;
+		}
+	}
+
+	.wpuser-02 {
+		margin-top: 10px;
+	}
+
+	h3 {
+		padding: 10px;
+		margin: 0;
+		background: #eee;
+		border-bottom: 1px #ddd solid;
+		font-size: 14px;
+	}
+} // .connection-details
+
+.jp-user {
+	img {
+		margin-right: 10px;
+		border-radius: 50%;
+	}
+}
+
+.jp-user,
+.wp-user,
+.wp-action {
+	div {
+		display: inline-block;
+		width: 100%;
+	}
+}
+
+.j-col.jp-user,
+.j-col.wp-user,
+.j-col.wp-action {
+	padding: 0;
+}
+
+.my-jetpack-actions select {
+	max-width: 150px;
+}
+
+.j-actions .button:nth-child(3) {
+	margin-right: 5px;
+}
+
+.j-row.disconnect {
+	text-align: center;
+	.button {
+		margin: 0 auto;
+	}
+}
+
+a.what-is-primary {
+	color: #b4b9be;
+	margin-left: 4px;
+}
+
+@include breakpoint(tablet){
+	.wp-action {
+		border-top: 1px #ddd solid;
+		h3 {
+			display: none;
+		}
+	}
+};
+
+@media screen and (max-width: 500px) {
+
+	.connection-details {
+		font-size: 11px;
+
+		h3 {
+			font-size: 12px;
+			padding: 5px;
+		}
+
+		.user-01,
+		.wpuser-02 {
+			padding: 6px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 200px;
+		}
+
+		.action-btns {
+			text-align: center;
+		}
+	} // .connection-details
+}
+
+@include breakpoint(large-phone){
+	.connection-details .wpuser-02 {
+		margin-top: 0;
+		padding: 12px;
+	}
+};
+
+@media screen and (max-width: 450px) {
+
+	.j-actions .button {
+		width: 100%;
+		margin-bottom: 5px;
+		text-align: center;
+
+		&.alignright {
+			float: none;
+		}
+	}
+}
+
+@media screen and (max-width: 350px) {
+	.user-01,
+	.wpuser-02 {
+		max-width: 100px;
+	}
+}

plugins/jetpack/scss/pages/_manage.scss

@@ -0,0 +1,40 @@
+
+.manage__icon {
+	width: 155px;
+	height: 155px;
+	margin: 20px auto;
+}
+
+.manage-page {
+	.manage__description {
+		max-width: 600px;
+		text-align: center;
+		font-size: 22px;
+		color: #999;
+		margin: 20px auto;
+	}
+	.manage__button {
+		font-size:16px;
+		padding: 0 20px;
+		height:40px;
+		line-height:40px;
+	}
+}
+.manage__title .genericon {
+	font-size: 38px;
+	color: #81A944;
+}
+
+.manage__link {
+	font-size: 16px;
+	padding: 0 20px;
+	height: 40px;
+	line-height: 40px;
+	font-weight: normal;
+
+	 .genericon{
+		font-size: 28px;
+		vertical-align: middle;
+		margin-top: -6px;
+	}
+}

plugins/jetpack/scss/pages/_protect.scss

@@ -0,0 +1,261 @@
+/* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
+ 
+// ==========================================================================
+// Jetpack Protect Config Page
+//==========================================================================
+
+
+.configure-module p {
+	font-size: 14px;
+
+	&.success, &.error {
+		color: $white;
+		padding: 10px;
+	}
+
+	&.success {
+		background-color: $green;
+	}
+
+	&.error {
+		background-color: $red;
+	}
+}
+
+.protect-status {
+
+	p {
+		font-size: 16px;
+	}
+
+	strong {
+		display: inline-block;
+		margin-top: 10px;
+		background: #fff;
+		padding: 10px;
+		border: 1px #ddd solid;
+		font-size: 16px;
+		color: #000;
+		max-width: 100%;
+	}
+
+	&.attn {
+		color: $red;
+	}
+
+	&.working {
+		color: $green;
+	}
+} // .protect-status
+
+/* Whitelisting */
+#non-editable-whitelist {
+	margin-top: 15px;
+}
+
+.protect-whitelist {
+
+	textarea {
+		width: 100%; 
+		min-height: 150px;
+	}
+}
+
+#editable-whitelist .whitelist-table {
+	width: 100%;
+}
+
+/* btns + inputs */
+
+.configure-module {
+
+	input[disabled] {
+		opacity: .5;
+	}
+
+	input.button-primary {
+		font-weight: bold;
+	}	
+}
+
+/* whitelist table */
+
+.whitelist-table {
+	border-top: 1px solid;
+	border-right: 1px solid;
+	border-color: #ddd;
+	background-color: #fff;
+
+	td, th {
+		padding: 10px;
+		margin: 0;
+		border-bottom: 1px solid;
+		border-left: 1px solid;
+		border-color: #ddd;
+		font-size: 14px;
+	}
+
+	th.heading {
+		font-weight: bold;
+		color: #5d6d74;
+		text-align: left;
+		background-color: #eee;
+	}
+
+	td.item-actions {
+		border-left: none;
+		text-align: right;
+	}
+
+	.toolbar {
+		padding: 0;
+	}
+
+	.add-btn {
+		text-align: center;
+		width: 10%;
+		border-left: 1px #ddd solid;
+	}
+} // whitelist-table
+
+.ip-address, .enter-ip {
+	width: 90%;
+	text-align: left;
+	vertical-align: middle;
+}
+
+.delete-ip-address {
+	text-align: center;
+	border: 0;
+	background: transparent;
+	color: #6f7476;
+	box-shadow: none;
+	font-size: 20px;
+	margin: 0;
+	padding: 0;
+	cursor: pointer;
+	border-radius: 2px;
+
+	&:hover {
+		background: #eee;
+	}
+}
+
+.toolbar div {
+	float: left;
+	padding: 10px;
+}
+
+@media only screen and (min-width : 1100px) {
+
+	#non-editable-whitelist {
+		width: 28%;
+		float: right;
+		margin-top: 0;
+	}
+
+	.protect-whitelist {
+		width: 65%;
+		float: left;
+	}
+
+} /* end > 1065px */
+
+@media only screen and (max-width : 1130px) {
+
+	.enter-ip input[type="text"] {
+		max-width: 175px;
+	}
+
+} /* end < 1130px */
+
+@media only screen and (max-width : 1250px) and (min-width : 1065px), (max-width : 730px) and (min-width : 600px) {
+
+	.enter-ip {
+		width: 85%;
+	}
+
+	.add-btn {
+		width: 15%;
+	}
+
+} /* end < 1250px & > 1065px */
+
+@media only screen and (max-width : 782px) {
+
+	.add-btn {
+		text-align: right;
+	}
+
+	.add-btn .ip-add {
+		margin-top: 4px;
+		margin-bottom: 3px;
+	}
+
+} /* end < 782px */
+
+@media only screen and (max-width : 730px) {
+
+	.add-btn {
+		text-align: center;
+	}
+
+} /* end < 730px */
+
+@media only screen and (max-width : 665px) and (min-width : 600px) {
+
+	.enter-ip input[type="text"] {
+		max-width: 165px;
+	}
+
+} /* end < 665px & > 600px */
+
+@media only screen and (max-width : 600px) {
+
+	.toolbar div {
+		width: 100%;
+	}
+
+	.add-btn {
+		border-top: 1px #ddd solid;
+	}
+
+	.enter-ip {
+		text-align: center;
+	}
+
+	.enter-ip strong {
+		display: block;
+		margin-bottom: 5px;
+	}
+
+	.enter-ip input[type="text"] {
+		width: 100%;
+		max-width: 100%;
+	}
+
+	.add-btn input,
+	.enter-ip .button {
+		width: 50%;
+		margin: 0 auto;
+	}
+
+	.enter-ip .button {
+		margin-top: 10px;
+	}
+
+} /* end > 600px */
+
+@media only screen and (max-width : 400px) {
+
+	.protect-status strong {
+		font-size: 12px;
+		overflow: auto;
+	}
+
+	.add-btn input,
+	.enter-ip .button {
+		width: 100%;
+	}
+
+} /* end < 400px */

plugins/jetpack/scss/templates/_connection-landing.scss

@@ -0,0 +1,881 @@
+// ==========================================================================
+// Jetpack Connection Landing Page ('Please connect jetpack')
+//===========================================================================
+
+// Variables specific to connection landing page
+
+// layout
+$j-gutter: em(20px);
+
+// color
+$landing-bdr: #D9D9D9;
+$gray-light: #f4f4f4;
+
+@mixin jp-card {
+	background: $white;
+	border: 1px $landing-bdr solid;
+	text-align: center;
+	p {
+		font-size: em(16px);
+	}
+}
+
+@mixin jp-card-cta {
+	text-align: center;
+	p {
+		font-size: em(16px);
+	}
+}
+
+.connection-landing {
+	text-align: center;
+
+	h1 {
+		margin-bottom: 0;
+	}
+	h2 {
+		margin: 0;
+		padding: $j-gutter*.8 0;
+		font-size: em(22px);
+		line-height: 160%;
+		font-weight: 400;
+	}
+	h2 + p {
+		margin-top: 0;
+	}
+	p {
+		color: $gray-med;
+	}
+} // connection-landing
+
+.connect-card {
+	@include jp-card-cta;
+	margin: $j-gutter*1.5 auto $j-gutter;
+	padding: 0 $j-gutter*3 $j-gutter;
+	@include breakpoint(tablet) { padding: 0 $j-gutter $j-gutter; }
+}
+
+.jp-card {
+	@include jp-card;
+	margin-bottom: $j-gutter*2;
+	.j-int {
+		padding: 0 $j-gutter*3;
+	}
+}
+
+/* ==================
+The following header part is a little hacky. Certain versions of IE were having a difficult time processing multiple svg BG images.
+So I moved to stack the svgs as actual imgs instead. IE also had a hard time dealing with em(px) conversions for sizing. - golenski 
+*/
+
+.feature-container {
+	background: $gray-light;
+
+	.j-int {
+		background: $white;
+		padding: 0;
+	}
+
+	.first-header {
+		position: relative;
+
+		@include breakpoint(desktop) { 
+			border-bottom: 1px $landing-bdr solid;
+			background-image: none;
+
+			.j-header-img {
+				display: none;
+			}
+		} // < desktop
+
+		@include minbreakpoint(desktop) {
+			background:
+				url('../images/connection-landing/stars-right.svg') no-repeat,
+				url('../images/connection-landing/stars-left.svg') no-repeat,
+				$white;
+			background-position: 90% 50%, 10% 50%;
+			background-size: 100px, 125px;
+		} // > desktop
+
+		.j-header-img {
+			position: absolute;
+			left: 0; right: 0; bottom: 0;
+
+			img {
+				margin: 0 auto;
+				max-width: 100%;
+				z-index: 1001;
+				position: absolute;
+				left: 0; right: 0; bottom: 0;
+				&:first-of-type {
+					@include minbreakpoint(desktop) { bottom: -12px; }
+					@include minbreakpoint(large-desktop) { bottom: -10px; }
+				}
+			}
+
+			img + img {
+				z-index: 999;
+			}
+		}
+	}
+	.secondary-header {
+		background: transparent;
+		padding: 0 $j-gutter*7;
+		@include breakpoint(tablet) { padding: 0 $j-gutter; }
+	}
+	.j-feature-img {
+		padding: 0 $j-gutter;
+		margin-bottom: $j-gutter*2;
+		img {
+			width: 100%;
+		}
+		&:last-of-type {
+			margin-bottom: $j-gutter;
+		}
+	}
+}
+
+// Adjust the padding for each specific header img
+.j-traffic {
+	.first-header {
+		@include minbreakpoint(desktop) { padding-bottom: 200px; }
+	}
+}
+
+.j-security {
+	.first-header {
+		@include minbreakpoint(desktop) { padding-bottom: 225px; }
+	}
+} // .j-security
+
+// ================== End hacky stuff
+
+.three-feature {
+	margin: $j-gutter 0;
+	padding: 0 $j-gutter;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	@include breakpoint(tablet) { flex-wrap: wrap; }
+	@include breakpoint(large-phone) { padding: 0; }
+
+	.j-col {
+		border: 1px $landing-bdr solid;
+		text-align: left;
+		padding: 0;
+		background: $clouds;
+		@include breakpoint(tablet) { margin-bottom: $j-gutter; }
+		@include breakpoint(large-phone) { border-left: none; border-right: none; }
+	}
+	.j-col:nth-of-type(2) {
+		border-left: none;
+		border-right: none;
+		@include breakpoint(tablet) { border: 1px $landing-bdr solid; }
+		@include breakpoint(large-phone) { border-left: none; border-right: none; }
+	}
+	h3 {
+		font-weight: 600;
+		font-size: em(16px);
+		min-width: em(215px);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		@include breakpoint(tablet) { font-size: em(14px); }
+	}
+	.feature-img {
+		background: $white;
+		border-bottom: 1px $landing-bdr solid;
+		text-align: center;
+		img {
+			width: 100%;
+			max-width: 500px;
+			margin: 0 auto;
+		}
+	}
+	p {
+		line-height: 150%;
+		padding-bottom: 0;
+		font-size: em(14px);
+	}
+	h3, p {
+		margin: 0;
+		padding: $j-gutter;
+		@include breakpoint(tablet) { font-size: em(13px); }
+	}
+	h3 {
+		padding-bottom: 0;
+	}
+}
+
+
+// ==========================================================================
+// Jetpack NUX Page(s) (main jetpack admin page + jumpstart)
+//===========================================================================
+
+// Needs to be cleaned. Let's remove those important tags and unneeded classes that we can utilize from core. Properly nest elements. migrate into _main.scss
+// Once everything is tested, I'll remove all the comments below as well. - @jeffgolenski
+
+// wrapping these common element names temporarily until I can audit - jeff
+.jp-content {
+	.hide {
+		display: none;
+	}
+	.pointer {
+		cursor: pointer;
+	}
+	.landing {
+		margin: 0 auto;
+		z-index: 2;
+		position: relative;
+	}
+	h1 {
+		font: 400 1.75em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
+		position: relative;
+		z-index: 3;
+		width: 100%;
+		text-align: center;
+		&.success {
+			color: $green;
+		}
+	}
+	.footer {
+		padding-top: 0;
+		margin-top: 0;
+		background-image: none;
+		&:before {
+			height: inherit;
+		}
+	}
+	.more-info:before {
+		content: none;
+	}
+} //.jp-content
+
+.landing {
+	.wpcom-connect {
+		min-height: 400px;
+	}
+}
+
+.wpcom-connect {
+	.j-col {
+		padding: 0;
+	}
+	.connect-desc {
+		padding-right: 25px;
+	}
+	.connect-btn {
+		text-align: center;
+	}
+}
+
+.module-grid h2 {
+	color: #000;
+	font: 300 2.57143em/1em "proxima-nova","Open Sans",Helvetica,Arial,sans-serif;
+}
+
+// place button styles in _button.scss
+.download-jetpack {
+	margin-top: 1em!important;
+}
+
+
+.jump-start-area {
+	@include jp-card;
+	padding: 0 $j-gutter;
+
+	h1 {
+		margin: 1em auto 0;
+	}
+}
+
+.jumpstart-message {
+	p {
+		padding-right: 25px;
+	}
+}
+
+.jumpstart-desc {
+	text-align: left;
+}
+
+#jumpstart-cta {
+	text-align: center;
+	display:inline-block;
+	float:none
+}
+
+.dismiss-jumpstart {
+	color: #999;
+	font-size: 14px;
+}
+
+// place button styles in _button.scss
+#jumpstart-cta .button,
+#jumpstart-cta .button-primary {
+	margin: 1em;
+	font-size: 18px;
+	height: 45px!important;
+	padding: 8px 15px 1px;
+}
+
+#jumpstart-cta .button-primary {
+	display: block;
+	margin: 20px 20px 5px 20px;
+}
+
+#jp-config-list {
+	position: relative;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	margin-left: -15px;
+	margin-right: -15px;
+
+	.j-col {
+		padding: 15px;
+	}
+	strong {
+		display: inline-block;
+	}
+	small {
+		display: block;
+		margin-top: 5px;
+		line-height: 150%;
+	}
+	.close {
+		position: absolute;
+		top: 10px;
+		right: 0;
+		text-transform: uppercase;
+		font-weight: bold;
+		display: block;
+		z-index: 5;
+	}
+}
+
+.jp-config-status {
+	text-transform: uppercase;
+	font-size: 10px;
+	font-weight: bold;
+	line-height: 100%;
+	color: #fff;
+	background: #9fbd72;
+	border-radius: 2px;
+	padding: 2px 4px;
+	display: inline-block;
+}
+
+// Nux landing page 2015
+
+@mixin vertalign { // vertical center this div
+		position: absolute;
+		top: 50%;
+		-ms-transform: translate(0,-50%);
+		-webkit-transform: translate(0,-50%);
+		transform: translate(0,-50%);
+}
+
+.nux-intro {
+
+	h3 {
+		background: $green;
+		color: $white;
+		font-weight: 600;
+		padding: .75em;
+		margin: 0;
+	}
+
+	h4 {
+		margin: 0 0 2px 0;
+	}
+
+	p {
+		text-align: center;
+		font-size: 1.24em;
+		line-height: 175%;
+	}
+
+	a {
+		transition: all .4s ease;
+	}
+
+	.j-col {
+		padding: 0 0.5em;
+		&:first-of-type {
+			padding-left: 0;
+		}
+		&:last-of-type {
+			padding-right: 0;
+		}
+	}
+
+	.nux-in {
+		background: darken($clouds, 5%);
+		-webkit-border-bottom-right-radius: 6px;
+		-webkit-border-bottom-left-radius: 6px;
+		-moz-border-radius-bottomright: 6px;
+		-moz-border-radius-bottomleft: 6px;
+		border-bottom-right-radius: 6px;
+		border-bottom-left-radius: 6px;
+
+		h3 {
+			font-size: 1.10em;
+			-webkit-border-top-left-radius: 6px;
+			-webkit-border-top-right-radius: 6px;
+			-moz-border-radius-topleft: 6px;
+			-moz-border-radius-topright: 6px;
+			border-top-left-radius: 6px;
+			border-top-right-radius: 6px;
+
+			.dashicons {
+				float: right;
+				color: darken($green, 10%);
+				font-size: 1.25em;
+				padding-left: 0;
+				&:hover {
+					color: darken($green, 15%);
+				}
+			}
+		}
+
+		p {
+			font-size: .9em;
+			line-height: 150%;
+			margin: 0;
+			text-align: left;
+			color: $gray-med;
+		}
+
+		.j-row {
+			border-bottom: 1px $clouds solid;
+			padding: 5px 0;
+			position: relative;
+			min-height: 70px; // moderating consistent heights w/o JS
+			&:hover {
+				background: darken($clouds, 10%);
+			}
+		}
+
+		.unavailable {
+			opacity: 0.5;
+
+			.act {
+				display: none;
+			}
+		}
+
+		.paid {
+			top: 4px;
+			margin-left: 12px;
+		}
+
+		.dashicons {
+			color: $green;
+			font-size: 1em;
+			position: relative;
+			top: 3px;
+			padding-left: 6px;
+			&:hover {
+				color: darken($green, 15%);
+			}
+		}
+
+		.dashicons-external {
+			font-size: 1.5em;
+			top: 2px;
+			padding-left: 3px;
+		}
+
+		.lmore {
+			font-size: 11px;
+			color: $green;
+			&:hover {
+				color: darken($green, 15%);
+			}
+		}
+
+	} // nux-in
+
+	.feat {
+		&.j-col {
+			padding: 10px 2px 10px 10px;
+		}
+		.dashicons {
+			display: none;
+		}
+	}
+
+	.activated .feat {
+		.dashicons {
+			display: inline-block;
+		}
+	}
+
+	.act {
+		@include vertalign;
+		right: 8px;
+		float: right;
+
+		&.j-col {
+			padding: 5px;
+			text-align: right;
+		}
+	}
+
+	.module-action {
+		text-transform: uppercase;
+		font-size: .85em;
+    	font-weight: 600;
+	}
+
+	.wpcom {
+
+		h3 {
+			background: $wpcom;
+			.dashicons {
+				color: darken($wpcom, 10%);
+				&:hover {
+					color: darken($wpcom, 15%);
+				}
+			}
+		}
+
+		.j-col {
+			padding: 10px;
+		}
+
+		.goto {
+			text-align: center;
+			padding: 1em;
+
+			&:hover {
+				background: darken($clouds, 5%);
+			}
+
+			.j-col {
+				padding: 0 5px;
+			}
+
+			 a {
+			 	width: 100%;
+				padding: .25em;
+				height: auto;
+			}
+
+			.button {
+				height: auto;
+				min-height: 28px;
+				line-height: 18px;
+				white-space: normal;
+				max-width: 200px;
+				margin-bottom: 0;
+				padding-top: 4px;
+				padding-bottom: 5px;
+			}
+			.feat {
+				@include vertalign;
+			}
+		} // go-to
+	}
+
+	.nux-foot {
+		.j-col {
+			padding: 1em;
+		}
+	}
+
+} // nux-intro
+
+.nux-foot {
+	margin-top: 2em;
+	background: darken($clouds, 5%);
+	border-radius: 6px;
+
+	.j-col {
+		min-height: 75px;
+		padding: 1em;
+		@media (max-width: 650px) { width: 100%; }
+	}
+
+	.j-col + .j-col {
+		border-left: 1px $clouds solid;
+		@media (max-width: 650px) { border-left: none; border-top: 1px $clouds solid; }
+	}
+
+	.actions {
+		margin-top: 1em;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	img {
+		float: right;
+		margin-left: 1em;
+		width: 75px;
+		border-radius: 4px;
+	}
+
+	p {
+		font-size: .9em;
+		text-align: left;
+		font-weight: 600;
+		margin-top: 0;
+	}
+
+	p + p {
+		font-weight: 400;
+		margin-bottom: 0;
+	}
+
+	ul {
+		font-size: .9em;
+		margin-bottom: 0;
+
+		li {
+			margin-right: .875em;
+			margin-bottom: 0;
+			line-height: 175%;
+			display: inline-block;
+			vertical-align: middle;
+		}
+	}
+} // nux-foot
+
+// Activate toggle - replicated from WordPress.com
+.form-toggle[type="checkbox"] {
+	opacity: 0;
+	position: absolute;
+}
+
+.form-toggle__switch {
+	position: relative;
+	display: inline-block;
+	border-radius: 12px;
+	box-sizing: border-box;
+	padding: 2px;
+	width: 40px;
+	height: 24px;
+	background: darken($clouds, 25%);
+	vertical-align: middle;
+	outline: 0;
+	cursor: pointer;
+	transition: all .4s ease;
+
+	&:before, &:after {
+		position: relative;
+		display: block;
+		content: "";
+		width: 20px;
+		height: 20px;
+	}
+
+	&:after {
+		left: 0;
+		border-radius: 50%;
+		background: #fff;
+		transition: all .2s ease;
+	}
+
+	&:before {
+		display: none;
+	}
+
+	&:hover {
+		background: lighten($green, 25%);
+	}
+} // __switch
+
+.form-toggle__label {
+	cursor: pointer;
+}
+
+.plugin-action__label {
+	padding-right: 5px;
+	top: -1px;
+    position: relative;
+    color: lighten($gray-med, 15%);
+}
+
+.activated .plugin-action__label {
+		color: $green;
+	}
+
+.form-toggle:focus + .form-toggle__label .form-toggle__switch,
+.form-toggle:focus:checked + .form-toggle__label .form-toggle__switch {
+	box-shadow: 0 0 0 2px $wpcom;
+}
+
+.form-toggle:checked + .form-toggle__label .form-toggle__switch {
+	background: $green;
+		&:after {
+			left: 16px;
+		}
+}
+
+.form-toggle:checked:hover + .form-toggle__label .form-toggle__switch {
+	background: lighten($green, 25%);
+}
+
+
+.form-toggle:disabled + .form-toggle__label .form-toggle__switch,
+.form-toggle:disabled:hover + .form-toggle__label .form-toggle__switch {
+	background: #e9eff3;
+}
+
+.form-toggle.is-toggling + .form-toggle__label .form-toggle__switch {
+	background: $green;
+}
+
+.form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch {
+	background: lighten($green, 25%);
+}
+
+.form-toggle.is-compact + .form-toggle__label .form-toggle__switch {
+	border-radius: 8px;
+	width: 24px;
+	height: 16px;
+	&:before, &:after {
+		width: 12px;
+		height: 12px;
+	}
+}
+
+.form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch:after {
+	left: 8px;
+}
+// end toggle
+
+
+// Breakpoints
+
+
+@include breakpoint(large-desktop) {
+
+	.jp-content {
+		.landing {
+			padding: 0 2em;
+		}
+		.footer {
+			padding-top: 1.5em;
+		}
+	}
+
+	.nux-intro {
+		.main-col {
+			width: 50%;
+			margin-bottom: 2em;
+			&.wpcom {
+				width: 100%;
+			}
+		}
+		.main-col + .main-col {
+			padding-right: 0;
+		}
+		.wpcom {
+			padding: 0;
+
+			.j-row {
+				width: 50%;
+				float: left;
+				border-bottom: 1px $clouds solid;
+				border-right: 1px $clouds solid;
+				&:last-of-type {
+					width: 100%;
+					float: none;
+					clear: both;
+					border: none;
+					border-top: 1px $clouds solid;
+					position: relative; // hides border of 2nd to last j-row
+					top: -1px;
+				}
+			}
+			.goto {
+				.feat a {
+					float: left;
+				}
+			}
+		}
+	}	// nux-intro
+
+	.nux-foot {
+		.j-col {
+			border: none;
+		}
+	}
+
+} // large-desktop
+
+
+@include breakpoint(desktop) {
+
+	.nux-intro {
+		.main-col {
+			width: 100%;
+			padding: 0;
+			margin-bottom: 2em;
+		}
+		.wpcom {
+			.j-row {
+				width: 100%;
+				float: none;
+			}
+		}
+	}
+
+} // desktop
+
+@include breakpoint(tablet) {
+
+	#jumpstart-cta .button-primary {
+		margin: 10px 0 5px 0;
+	}
+
+	#jump-start-area .spinner {
+		background-position: 50% 35%;
+	}
+
+} // tablet
+
+@include breakpoint(phablet) {
+
+	.nux-intro {
+		h1 {
+			font-size: 1.75em;
+		}
+		p {
+			font-size: 1em;
+		}
+	}
+
+} // phablet
+
+@include breakpoint(large-phone) {
+
+	.jp-content {
+		.landing {
+			padding: 0 .5em;
+		}
+	}
+
+	#jump-start-area {
+		padding: 0 1em;
+	}
+
+	.jumpstart-message {
+		p {
+			padding-right: 0;
+		}
+	}
+
+	#jumpstart-cta .button-primary {
+		margin: 0 0 5px 0;
+		padding-bottom: 10px;
+	}
+
+	.footer .a8c-attribution a:after {
+		top: 6px;
+	}
+
+} // large-phone

plugins/jetpack/scss/templates/_dashboard-widget.scss

@@ -0,0 +1,99 @@
+
+#jetpack_summary_widget {
+	* {
+		box-sizing: border-box;
+	}
+
+	.inside {
+		margin: 0;
+		padding: 0;
+		font-family: "proxima-nova", "Open Sans", Helvetica, Arial, sans-serif;
+	}
+
+	.stats,
+	.widgets,
+	.wpcom-connect {
+		padding: .75em;
+	}
+
+	.wpcom-connect {
+		background: #fafafa;
+		text-align: center;
+
+		.jp-emblem {
+			padding: 5px 0 0 0;
+		}
+
+		svg {
+			width: 40px;
+			height: 40px;
+			path {
+				fill: $green;
+			}
+		}
+
+		.jp-emblem,
+		h3,
+		p {
+			width: 100%;
+		}
+
+		h3 {
+			font-size: 1.25em;
+			font-weight: 400;
+		}
+
+		p {
+			color: #777;
+			margin-top: 0;
+			padding: 0 15px;
+		}
+
+		.actions {
+			text-align: center;
+			padding: 15px 0 10px 0;
+			small {
+				display: block;
+				a {
+					color: #999;
+				}
+			}
+		}
+	}
+
+	.button-jetpack {
+		@include button( $green );
+	}
+
+	footer {
+		background: #fafafa;
+		padding: .75em;
+		overflow: hidden;
+		border-top: 1px solid #ccc;
+
+		.protect,
+		.akismet {
+			width: 50%;
+			float: left;
+			text-align: left;
+		}
+
+		h3 {
+			font-size: 1.5em;
+			font-weight: normal;
+			margin: 0;
+			padding: 0;
+		}
+
+		p {
+			margin: 0;
+			padding: 0;
+		}
+
+		section {
+			margin: 0;
+			padding: 0;
+			text-align: center;
+		}
+	}
+}

plugins/jetpack/scss/templates/_id-crisis.scss

@@ -0,0 +1,9 @@
+// styles are inline for now - line 5073 - class.jetpack.php, move here.
+.jp-identity-crisis {
+	.jp-btn-group {
+		margin-top: 15px;
+	}
+	strong {
+		color: $green;
+	}
+}

plugins/jetpack/scss/templates/_settings.scss

@@ -0,0 +1,417 @@
+// ==========================================================================
+// Settings
+// ==========================================================================
+
+.jetpack_page_jetpack_modules {
+	.wrap {
+		@include breakpoint(phone){
+			padding: 0 0 1em;
+		}
+	}
+}
+
+.page-content.configure {
+	margin-top: 0;
+}
+
+.configure .frame {
+
+	&.top {
+		border: none;
+		box-shadow: none;
+		padding-top: em(20px);
+		position: relative;
+		top: auto;
+
+		&.fixed {
+			background: #f9f9f9;
+			border-bottom: 1px solid #e9e9e9;
+			padding-left: 160px;
+			margin-top: -6px;
+			position: fixed;
+			right: 0;
+			top: 32px;
+			width: 100%;
+			z-index: 4;
+			box-shadow: 0 2px 2px -2px #eee;
+
+			@media (max-width: 782px) {
+				border: none;
+				box-shadow: none;
+				padding-top: em(20px);
+				position: relative;
+				top: auto;
+			}
+			@media (max-width: 600px) {
+				top: 0;
+			}
+		}
+
+		.tablenav.top {
+			float: left;
+
+			.actions {
+				@media (max-width: 900px) {
+					display: block;
+				}
+				@media (max-width: 782px) {
+					margin-top: 6px;
+				}
+			}
+		}
+	}
+}
+
+.jp-frame-top-fixed .configure {
+	padding-top: 94px;
+}
+
+.filter-search {
+	display: none;
+	float: right;
+	margin-top: 10px;
+	@media (max-width: 782px) {
+		display: block;
+	}
+	@media (max-width: 530px) {
+		display: none;
+	}
+}
+
+.module-actions.landing-page {
+	float: right;
+	margin-right: 15px;
+
+	a {
+		font-size: 0.6em;
+	}
+}
+
+.table-bordered.jetpack-modules {
+	border: none;
+	margin-bottom: 0;
+	tr.jetpack-module {
+
+		th {
+			border-left: 0;
+			padding: 14px 4px 0;
+			input {
+				display: block;
+			}
+		}
+		&:hover {
+			.genericon {
+				display: inline-block;
+			}
+			td .row-actions span a {
+				opacity: 1;
+			}
+		}
+		&.active {
+			th,
+			td {
+				background: #f7fcfe;
+			}
+			th {
+				border-left: 4px solid #2ea2cc;
+				padding-left: 0px;
+			}
+			td {
+				&:first-child {
+					border-left: 4px solid #2ea2cc;
+				}
+			}
+		}
+		&.unavailable {
+			opacity: 0.3;
+			input {
+				display: none;
+			}
+		}
+		&#vaultpress {
+			opacity: 1;
+		}
+		&.deprecated {
+			span {
+				color: #888;
+			}
+			.dep-msg {
+				margin-right: 10px;
+				color: #555;
+			}
+		}
+		th,
+		td {
+			background: #fff;
+			margin: 0;
+			-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+			box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+
+		}
+		td {
+			padding: 10px 10px 8px 14px;
+			line-height: 25px;
+
+			&:first-child {
+				border-left: 4px solid #fff;
+			}
+			.row-actions {
+				float: right;
+				padding: 0 0 1px;
+				visibility: visible;
+
+				span {
+					margin-left: 5px;
+					a {
+						opacity: 0;
+						&:focus {
+							opacity: 1;
+						}
+					}
+				}
+
+				@media (max-width: 530px) {
+					display: none;
+				}
+				@include breakpoint(tablet){
+					display: block;
+					padding-left: 10px;
+					visibility: visible;
+				};
+
+			}
+		}
+	}
+	&>thead>tr>th {
+		border: 0;
+		vertical-align: middle;
+
+		&:last-child {
+			padding-right: 0;
+
+			@include breakpoint(tablet){
+				padding-left: 0;
+			}
+		}
+	}
+	td {
+		background: #fff;
+	}
+	#doaction {
+		margin-top: 0;
+
+		@media (max-width: 782px) {
+			padding: 10px 7px;
+		}
+	}
+	.checkall {
+		margin-top: 1px;
+	}
+	.filter-search {
+		margin-top: 8px;
+	}
+	.genericon {
+		color: #999;
+		display: none;
+		margin: 7px 3px 0;
+
+		@include breakpoint(desktop){
+			display: inline-block;
+		};
+	}
+	.med {
+		width: 70px;
+	}
+	.sm {
+		width: 30px;
+	}
+	@media (max-width: 782px) {
+		.check-column {
+			width: 50px;
+		}
+	}
+}
+.fixed-top .check-column {
+	padding: 8px 10px 0 10px;
+	width: 2.2em;
+}
+.wrap {
+	margin: 0;
+	padding: 0 1.5em 1em;
+	overflow: hidden;
+
+	h2 {
+		font-size: 24px;
+		font-weight: 400;
+	}
+	.manage-left {
+		float: left;
+		margin: 0;
+		padding: 0;
+		width: 63%;
+
+		table {
+			width: 100%;
+		}
+		th {
+			font-weight: 400;
+		}
+
+		@media (max-width: 782px) {
+			width: 100%;
+		}
+	}
+	.manage-right {
+		margin: 0;
+		padding: 0;
+		/*position: absolute;
+		right: 0;*/
+		float: right;
+		width: 35%;
+		z-index: 1;
+
+		p {
+			font-size: 12px;
+			font-weight: bold;
+			color: #bbb;
+			padding-top: 2px;
+			text-transform: uppercase;
+			letter-spacing: 1px;
+			clear: left;
+		}
+		.bumper {
+			margin-left: 33px;
+		}
+		&.show {
+			display: block;
+			// position: fixed;
+			overflow-y: auto;
+			overflow-x: hidden;
+			position: absolute;
+			z-index: 100000; // sits on top of wp-admin bar
+		}
+		.search-bar {
+			margin-bottom: 18px;
+			max-width: 300px;
+		}
+		p.search-box {
+			float: none;
+			height: auto;
+			margin-bottom: 0;
+			position: relative;
+
+			input[type='search'] {
+				padding: 0 8px;
+				width: 90%;
+				line-height: initial;
+
+				@media (max-width: 782px) {
+					float: left;
+					padding: 9px 8px;
+				}
+			}
+			input[type="submit"] {
+				display: none;
+			}
+		}
+		.button-group {
+			.button {
+				outline: none;
+			}
+		}
+		.subsubsub {
+			margin: 0;
+			padding: 0;
+
+			a {
+				padding: 0;
+				line-height: inherit;
+			}
+			.current{
+				padding:1px 5px;
+				border-radius:2px;
+				margin-left:-5px;
+				background: #0D72B2;
+				color: #fff;
+
+				.count{
+					color: #BCD7E7;
+					font-weight:200;
+				}
+			}
+
+			li {
+				display: block;
+				text-align: left;
+			}
+		}
+
+		@media (max-width: 782px) {
+			background: #fff;
+			bottom: 0;
+			display: none;
+			min-width: 300px;
+			position: fixed;
+			right: 0;
+			top: 0;
+			z-index: 13;
+			box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
+
+			.bumper {
+				margin: 13px;
+			}
+			.navbar-form {
+				margin: 0;
+				padding: 0;
+			}
+		} // < 782
+	}
+}
+
+@media (max-width: 782px) {
+
+		// Fix to override particular wp-list-table changes in core - July 2015
+		.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
+			padding: 11px 10px;
+			display: block;
+		}
+
+		.jetpack_page_jetpack_modules {
+			#doaction {
+				padding: 7px 14px;
+			}
+			.fixed-top thead .check-column {
+				padding: 28px 10px 0 10px;
+			}
+			.filter-search {
+				margin-top: 28px;
+				.button {
+					padding: 7px 14px;
+				}
+			}
+		}
+		.manage-right.show .subsubsub li {
+				padding: 5px;
+			}
+
+} // < 782
+
+@media (max-width: 650px) {
+
+	.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
+		float: none;
+		padding-left: 18px;
+	}
+}
+
+@media (max-width: 430px) {
+
+		// Hide activate / config links on really small screens. Users can still utlize these actions by tapping on the title of the module
+		.table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
+			display: none;
+		}
+
+		.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
+			display: block;
+		}
+} // < 430