diff options
Diffstat (limited to 'plugins/jetpack/scss/atoms')
| -rw-r--r-- | plugins/jetpack/scss/atoms/_animations.scss | 40 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/_buttons.scss | 157 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/_media.scss | 8 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/colors/_colors.scss | 9 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/icons/_automatticons.scss | 32 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/icons/_jetpack.scss | 23 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/typography/_functions.scss | 12 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/typography/_typography.scss | 112 | ||||
| -rw-r--r-- | plugins/jetpack/scss/atoms/typography/_variables.scss | 32 |
9 files changed, 425 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/atoms/_animations.scss b/plugins/jetpack/scss/atoms/_animations.scss new file mode 100644 index 00000000..2672eb75 --- /dev/null +++ b/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); + } +} diff --git a/plugins/jetpack/scss/atoms/_buttons.scss b/plugins/jetpack/scss/atoms/_buttons.scss new file mode 100644 index 00000000..53d62d6d --- /dev/null +++ b/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(24px, 28px) 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; + } +} diff --git a/plugins/jetpack/scss/atoms/_media.scss b/plugins/jetpack/scss/atoms/_media.scss new file mode 100644 index 00000000..a4e46b82 --- /dev/null +++ b/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; +} diff --git a/plugins/jetpack/scss/atoms/colors/_colors.scss b/plugins/jetpack/scss/atoms/colors/_colors.scss new file mode 100644 index 00000000..faeef5f1 --- /dev/null +++ b/plugins/jetpack/scss/atoms/colors/_colors.scss @@ -0,0 +1,9 @@ +// ========================================================================== +// Jetpack Colors +// ========================================================================== + +$green: #81a844; +$white: #fff; +$clouds: #f9f9f9; +$lightblue: #2ea2cc; +$red: #d94f4f; diff --git a/plugins/jetpack/scss/atoms/icons/_automatticons.scss b/plugins/jetpack/scss/atoms/icons/_automatticons.scss new file mode 100644 index 00000000..01eb9791 --- /dev/null +++ b/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'; diff --git a/plugins/jetpack/scss/atoms/icons/_jetpack.scss b/plugins/jetpack/scss/atoms/icons/_jetpack.scss new file mode 100644 index 00000000..b9a39c0c --- /dev/null +++ b/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"; }
\ No newline at end of file diff --git a/plugins/jetpack/scss/atoms/typography/_functions.scss b/plugins/jetpack/scss/atoms/typography/_functions.scss new file mode 100644 index 00000000..878bc05e --- /dev/null +++ b/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); +} diff --git a/plugins/jetpack/scss/atoms/typography/_typography.scss b/plugins/jetpack/scss/atoms/typography/_typography.scss new file mode 100644 index 00000000..612ab46e --- /dev/null +++ b/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; +} diff --git a/plugins/jetpack/scss/atoms/typography/_variables.scss b/plugins/jetpack/scss/atoms/typography/_variables.scss new file mode 100644 index 00000000..2b1fe017 --- /dev/null +++ b/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'; |