Initial commit
This commit is contained in:
Ben Goldsworthy
commit
28e6ddf404
1083 changed files with 191734 additions and 0 deletions
40
plugins/jetpack/scss/atoms/_animations.scss
Normal file
40
plugins/jetpack/scss/atoms/_animations.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
157
plugins/jetpack/scss/atoms/_buttons.scss
Normal file
157
plugins/jetpack/scss/atoms/_buttons.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
8
plugins/jetpack/scss/atoms/_media.scss
Normal file
8
plugins/jetpack/scss/atoms/_media.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
16
plugins/jetpack/scss/atoms/colors/_colors.scss
Normal file
16
plugins/jetpack/scss/atoms/colors/_colors.scss
Normal file
|
|
@ -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;
|
||||
32
plugins/jetpack/scss/atoms/icons/_automatticons.scss
Normal file
32
plugins/jetpack/scss/atoms/icons/_automatticons.scss
Normal file
|
|
@ -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';
|
||||
23
plugins/jetpack/scss/atoms/icons/_jetpack.scss
Normal file
23
plugins/jetpack/scss/atoms/icons/_jetpack.scss
Normal file
|
|
@ -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"; }
|
||||
12
plugins/jetpack/scss/atoms/typography/_functions.scss
Normal file
12
plugins/jetpack/scss/atoms/typography/_functions.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
112
plugins/jetpack/scss/atoms/typography/_typography.scss
Normal file
112
plugins/jetpack/scss/atoms/typography/_typography.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
32
plugins/jetpack/scss/atoms/typography/_variables.scss
Normal file
32
plugins/jetpack/scss/atoms/typography/_variables.scss
Normal file
|
|
@ -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';
|
||||
Reference in a new issue