diff options
Diffstat (limited to 'plugins/jetpack/scss')
23 files changed, 0 insertions, 2792 deletions
diff --git a/plugins/jetpack/scss/_utilities/_accessibility.scss b/plugins/jetpack/scss/_utilities/_accessibility.scss deleted file mode 100644 index b21c12d3..00000000 --- a/plugins/jetpack/scss/_utilities/_accessibility.scss +++ /dev/null @@ -1,30 +0,0 @@ -// ========================================================================== -// 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 - } -} diff --git a/plugins/jetpack/scss/_utilities/_grid.scss b/plugins/jetpack/scss/_utilities/_grid.scss deleted file mode 100644 index 788a377a..00000000 --- a/plugins/jetpack/scss/_utilities/_grid.scss +++ /dev/null @@ -1,75 +0,0 @@ -// ========================================================================== -// 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%;} -} diff --git a/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss b/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss deleted file mode 100644 index 80cf50f5..00000000 --- a/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss +++ /dev/null @@ -1,46 +0,0 @@ -// ========================================================================== -// 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; - } - } - } -} diff --git a/plugins/jetpack/scss/atoms/_animations.scss b/plugins/jetpack/scss/atoms/_animations.scss deleted file mode 100644 index 8f032271..00000000 --- a/plugins/jetpack/scss/atoms/_animations.scss +++ /dev/null @@ -1,18 +0,0 @@ -// ========================================================================== -// Animation for miles! -// ========================================================================== - -@keyframes "candy" { - 0% { - transform: scale(1); - } - 20% { - transform: scale(1.15); - } - 60% { - transform: scale(.95); - } - 100% { - transform: scale(1); - } -} diff --git a/plugins/jetpack/scss/atoms/_buttons.scss b/plugins/jetpack/scss/atoms/_buttons.scss deleted file mode 100644 index 45825f97..00000000 --- a/plugins/jetpack/scss/atoms/_buttons.scss +++ /dev/null @@ -1,137 +0,0 @@ -// ========================================================================== -// 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-weight: bold; - font-size: 0.9285714286em; // 13/14 - line-height: 1; - 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-weight: 400; - font-size: 20px; - line-height: 1; - 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; - } - }; -} diff --git a/plugins/jetpack/scss/atoms/colors/_colors.scss b/plugins/jetpack/scss/atoms/colors/_colors.scss deleted file mode 100644 index 63b869f8..00000000 --- a/plugins/jetpack/scss/atoms/colors/_colors.scss +++ /dev/null @@ -1,16 +0,0 @@ -// ========================================================================== -// Jetpack Colors -// ========================================================================== - -$green: #81a844; -$white: #fff; -$red: #d94f4f; - -// Blues -$lightblue: #2ea2cc; -$wpcom: #0087be; -$blue-dark: #005082; - -// Grays -$clouds: #f9f9f9; -$gray-med: #686f72; diff --git a/plugins/jetpack/scss/atoms/icons/_automatticons.scss b/plugins/jetpack/scss/atoms/icons/_automatticons.scss deleted file mode 100644 index 01eb9791..00000000 --- a/plugins/jetpack/scss/atoms/icons/_automatticons.scss +++ /dev/null @@ -1,32 +0,0 @@ -// ========================================================================== -// 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/typography/_functions.scss b/plugins/jetpack/scss/atoms/typography/_functions.scss deleted file mode 100644 index 878bc05e..00000000 --- a/plugins/jetpack/scss/atoms/typography/_functions.scss +++ /dev/null @@ -1,12 +0,0 @@ -// ========================================================================== -// 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/_variables.scss b/plugins/jetpack/scss/atoms/typography/_variables.scss deleted file mode 100644 index e1a912b1..00000000 --- a/plugins/jetpack/scss/atoms/typography/_variables.scss +++ /dev/null @@ -1,31 +0,0 @@ -// ========================================================================== -// Typography variables -// ========================================================================== - -$normal: normal; // Change these values when using custom fonts -$bold: bold; // 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: Helvetica, Arial, sans-serif; // 400i,400,600,700,800 -$calluna: 'calluna', $sans; // 400 -$gill: "Gill Sans", "Gill Sans MT", $sans; - -// ========================================================================== -// Icons -// ========================================================================== - -$genericons: 'genericons'; diff --git a/plugins/jetpack/scss/dashboard-widget.scss b/plugins/jetpack/scss/dashboard-widget.scss deleted file mode 100644 index ee6e1796..00000000 --- a/plugins/jetpack/scss/dashboard-widget.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Functions -@import '_inc/client/scss/functions/rem'; - -// Variables -@import '_inc/client/scss/variables/colors'; -@import '_inc/client/scss/variables/layout'; - -// Mixins -@import '_inc/client/scss/mixins/breakpoints'; -@import '_inc/client/scss/mixins/clear-fix'; -@import '_inc/client/scss/mixins/long-content-fade'; - -// Styles -@import "_inc/client/dashboard-widget/style"; diff --git a/plugins/jetpack/scss/jetpack-admin-jitm.scss b/plugins/jetpack/scss/jetpack-admin-jitm.scss deleted file mode 100644 index 5ce675b4..00000000 --- a/plugins/jetpack/scss/jetpack-admin-jitm.scss +++ /dev/null @@ -1,417 +0,0 @@ -// Just in Time Messaging - message prompts - -@import '_inc/client/scss/functions/rem'; -@import '_inc/client/scss/variables/colors'; -@import '_inc/client/scss/mixins/breakpoints'; - -@mixin clear-fix { - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } -} - -@mixin jitm-banner-color( $color ) { - border-left-color: $color; - .jitm-banner__icon { - color: $color; - } - .jitm-banner__icon-circle { - background-color: $color; - } -} - -// New JITMS - modified calypso banner styles - -.jitm-button { - background: $white; - border-color: lighten( $gray, 20% ); - border-style: solid; - border-width: 1px 1px 2px; - color: $gray-dark; - cursor: pointer; - display: inline-block; - margin: 0; - outline: 0; - overflow: hidden; - font-weight: 500; - text-overflow: ellipsis; - text-decoration: none; - vertical-align: top; - box-sizing: border-box; - font-size: rem( 14px ); - line-height: rem( 21px ); - border-radius: rem( 4px ); - padding: rem( 7px ) rem( 14px ) rem( 9px ); - appearance: none; - - &:hover { - border-color: lighten( $gray, 10% ); - color: $gray-dark; - } - &:active { - border-width: 2px 1px 1px; - } - &:visited { - color: $gray-dark; - } - &[disabled], - &:disabled { - color: lighten( $gray, 30% ); - background: $white; - border-color: lighten( $gray, 30% ); - cursor: default; - - &:active { - border-width: 1px 1px 2px; - } - } - &:focus { - outline: 0; - border-color: $blue-medium; - box-shadow: 0 0 0 2px $blue-light; - } - &.is-compact { - padding: rem( 7px ); - color: darken( $gray, 10% ); - font-size: rem( 12px ); - line-height: 1; - - &:disabled { - color: lighten( $gray, 30% ); - } - } - - &.hidden { - display: none; - } -} - -// Primary buttons -.jitm-button.is-primary { - background: $blue-medium; - border-color: $blue-wordpress; - color: $white; - - &:hover, - &:focus { - border-color: $blue-dark; - color: $white; - } - &[disabled], - &:disabled { - background: tint( $blue-light, 50% ); - border-color: tint( $blue-wordpress, 55% ); - color: $white; - } - &.is-compact { - color: $white; - } -} - - -.jitm-card { - display: block; - clear: both; - position: relative; - margin: rem( 48px ) rem( 20px ) 0 auto; - padding: rem( 16px ); - box-sizing: border-box; - background: $white; - box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ), - 0 1px 2px lighten( $gray, 30% ); - - @include clear-fix; - - @include breakpoint( ">480px" ) { - margin-bottom: rem( 16px ); - padding: rem( 24px ); - } - - // Compact Card - &.is-compact { - margin-bottom: rem( 1px ); - - @include breakpoint( ">480px" ) { - margin-bottom: 1px; - padding: rem( 16px ) rem( 24px ); - } - } - - &.is-card-link { - padding-right: rem( 48px ); - } -} - -// if JITM appears directly below WordPress "help" menu adjust margins -#screen-meta-links+.jitm-card { - margin: rem( 40px ) 1.5385em 0 auto; -} - -// if JITM appears directly below WordPress hello dolly adjust margins -#dolly+.jitm-card { - margin: 3rem 1rem 0 auto; -} - -// remove right margin for jitms in the editor -.post-php .jitm-card { - margin-right: 0; -} - - // if JITM appears inside of the jetpack dashboard adjust margins - .jp-lower .jitm-card { - margin: 0 0 rem( 24px ); - } - -.jitm-banner.jitm-card { - border-left: 4px solid; - display: flex; - padding: rem( 12px ) rem( 6px ) rem( 12px ) rem( 12px ); - position: relative; - z-index: 2; - - @include breakpoint( "<480px" ) { - display: block; - } - - &.is-card-link { - padding: rem( 12px ) rem( 48px ) rem( 12px ) rem( 16px ); - } - &.is-dismissible { - padding-right: rem( 48px ); - } - - @include jitm-banner-color( $alert-green ); - - &.is-upgrade-personal { - @include jitm-banner-color( $alert-yellow ); - } - &.is-upgrade-premium { - @include jitm-banner-color( $alert-green ); - } - &.is-upgrade-business, - &.woo-jitm { - @include jitm-banner-color( $alert-purple ); - } - - .jitm-card__link-indicator { - align-items: center; - color: $blue-wordpress; - display: flex; - } - - &:hover { - transition: all 100ms ease-in-out; - &.is-card-link { - box-shadow: 0 0 0 1px $gray, 0 2px 4px lighten( $gray, 20% ); - } - .jitm-card__link-indicator { - color: $blue-dark; - } - } - - @include breakpoint( ">480px" ) { - padding: rem( 12px ) rem( 16px ); - - &.is-dismissible { - padding-right: rem( 16px ); - } - } -} - -.jitm-banner__icons { - display: flex; - - .jitm-banner__icon, - .jitm-banner__icon-circle { - border-radius: 50%; - flex-shrink: 0; - height: rem( 24px ); - width: rem( 24px ); - margin-right: rem( 16px ); - margin-top: rem( -2px ); - text-align: center; - top: rem( 4px ); - } - - .jitm-banner__icon { - align-self: center; - color: $white; - display: block; - } - - .jitm-banner__icon-circle { - color: white; - display: none; - padding: rem( 3px ) rem( 4px ) rem( 4px ) rem( 3px ); - } - - @include breakpoint( ">480px" ) { - align-items: center; - - .jitm-banner__icon { - display: none; - } - .jitm-banner__icon-circle { - display: block; - } - } -} - -.jitm-banner__icon-plan { - display: flex; - margin-right: rem( 16px ); - - .dops-plan-icon { - height: rem( 32px ); - width: rem( 32px ); - } - - .jp-emblem { - position: relative; - top: rem( 2px ); - - @include breakpoint( "<480px" ) { - margin-bottom: rem( 12px ); - } - - svg { - height: rem( 32px ); - width: rem( 32px ); - fill: $green-primary; - } - } - - @include breakpoint( ">480px" ) { - align-items: center; - } -} - -.jitm-banner__content { - align-items: center; - display: flex; - flex-grow: 1; - flex-wrap: wrap; - - @include breakpoint( ">480px" ) { - flex-wrap: nowrap; - } -} - -.jitm-banner__info { - flex-grow: 1; - line-height: 1.4; - - @include breakpoint( ">480px" ) { - flex-basis: 50%; - } - - @include breakpoint( ">960px" ) { - flex-basis: 70%; - } - - .jitm-banner__title, - .jitm-banner__description { - color: $gray-dark; - } - - .jitm-banner__title { - font-size: 14px; - font-weight: 500; - } - - .jitm-banner__description { - font-size: rem( 12px ); - line-height: 1.5; - margin-top: rem( 6px ); - } - - .banner__list { - font-size: 12px; - list-style: none; - margin: 10px 0; - li { - margin: 6px 0; - .gridicon { - fill: $gray; - display: inline; - margin-right: 12px; - vertical-align: bottom; - } - } - } -} - -.jitm-banner__action { - align-self: center; - font-size: rem( 12px ); - margin: rem( 8px ) 0 0; - text-align: left; - width: 100%; - - .jitm-banner__prices { - display: flex; - justify-content: flex-start; - - .dops-plan-price { - margin-bottom: 0; - } - - .dops-plan-price.is-discounted, - .dops-plan-price.is-discounted .dops-plan-price__currency-symbol { - color: $gray-dark; - } - - .has-call-to-action & .dops-plan-price { - margin-bottom: rem( 8px ); - } - } - - @include breakpoint( ">480px" ) { - margin: 0 rem( 4px ) 0 rem( 8px ); - text-align: center; - width: auto; - - .is-dismissible { - margin-top: rem( 40px ); - } - - .jitm-banner__prices { - justify-content: flex-end; - text-align: right; - } - } -} - -.jitm-banner__dismiss { - display: block; - text-decoration: none; - line-height: .5; - - &:before { - color: darken($gray, 20%); - font: 400 16px/1 dashicons; - content: '\f158'; - } - - @include breakpoint( ">660px" ) { - margin-right: rem( -8px ); - } - - @include breakpoint( "<480px" ) { - position: absolute; - top: rem( 14px ); - right: rem( 14px ); - } -} - -.jitm-banner__action + .jitm-banner__dismiss { - margin-left: rem( 10px ); -} - -#dolly + .jitm-card { - margin: 3rem 1rem 0 auto; -} diff --git a/plugins/jetpack/scss/jetpack-admin.scss b/plugins/jetpack/scss/jetpack-admin.scss deleted file mode 100644 index e213d34c..00000000 --- a/plugins/jetpack/scss/jetpack-admin.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "atoms/colors/colors", // Color variables - "atoms/typography/functions", - "atoms/typography/variables", - "_utilities/mixins/breakpoint", // Mixins - "_utilities/grid", - "atoms/animations", - "atoms/buttons", - "atoms/icons/automatticons", - "molecules/nav-horizontal", - "templates/main", // Main template - "templates/settings", // Settings page - "pages/protect", // Protect config page - "pages/manage", // Actiavte and confirm manage - "templates/connection-landing"; // jetpack connection landing, main admin, jumpstart -
\ No newline at end of file diff --git a/plugins/jetpack/scss/jetpack-banners.scss b/plugins/jetpack/scss/jetpack-banners.scss deleted file mode 100644 index 0621410a..00000000 --- a/plugins/jetpack/scss/jetpack-banners.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "_utilities/mixins/breakpoint", - "atoms/typography/variables", - "atoms/typography/functions", - "organisms/banners"; diff --git a/plugins/jetpack/scss/jetpack-icons.scss b/plugins/jetpack/scss/jetpack-icons.scss deleted file mode 100644 index 3dae89d3..00000000 --- a/plugins/jetpack/scss/jetpack-icons.scss +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// Admin nav iconx -// ========================================================================== - -@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"); - } -} - -li.toplevel_page_jetpack .wp-menu-image:before { - font-family: 'jetpack' !important; - content: '\f100'; -} diff --git a/plugins/jetpack/scss/jetpack-idc-admin-bar.scss b/plugins/jetpack/scss/jetpack-idc-admin-bar.scss deleted file mode 100644 index 4091488f..00000000 --- a/plugins/jetpack/scss/jetpack-idc-admin-bar.scss +++ /dev/null @@ -1,30 +0,0 @@ -#wp-admin-bar-jetpack-idc.hide { - display: none; -} - -#wp-admin-bar-jetpack-idc .jp-idc-admin-bar { - background: #fff; - border-radius: 2px; - color: #23282d; - padding: 4px 8px; - font-size: 12px; -} - -#wpadminbar #wp-admin-bar-jetpack-idc .dashicons { - color: #23282d; - font-family: 'dashicons'; - - &:before { - font-size: 16px; - } -} - -#wpadminbar #wp-admin-bar-jetpack-idc:hover { - .ab-item { - background: inherit; - } - - .jp-idc-admin-bar { - background: #eee; - } -} diff --git a/plugins/jetpack/scss/jetpack-idc.scss b/plugins/jetpack/scss/jetpack-idc.scss deleted file mode 100644 index 792851a0..00000000 --- a/plugins/jetpack/scss/jetpack-idc.scss +++ /dev/null @@ -1,206 +0,0 @@ -@import '../_inc/client/scss/variables/_colors.scss'; - -.jp-idc-notice, -.jp-idc-notice * { - box-sizing: border-box; -} - -.jp-idc-notice { - margin-left: 0; - margin-right: 10px; - margin-top: 10px; - overflow: hidden; - padding-bottom: 16px; - padding-top: 0; - - &.is-non-admin { - padding-bottom: 0; - } -} - -@media all and ( min-width: 783px ) { - .jp-idc-notice { - margin-right: 20px; - margin-top: 20px; - - &.has-help-tabs { - margin-top: 48px; - } - } -} - -.jp-idc-notice p { - margin: 0; - padding: 0; -} - -.jp-idc-notice { - h3, p { - color: $gray-dark; - } -} - -.jp-idc-notice a:not( .dops-notice__action ) { - color: $blue-wordpress; - text-decoration: none; - - &:visited { - color: $blue-wordpress; - } - - &:hover, - &:focus, - &:active { - color: $link-highlight; - } -} - -.jp-idc-notice .dops-button { - align-self: flex-start; - margin-top: auto; -} - -.jp-idc-notice > div { - padding: 0 8px; -} - -.jp-idc-notice__first-step { - display: inline-block; -} - -.jp-idc-notice__second-step { - display: none; -} - -.jp-idc-notice.jp-idc-show-second-step { - .jp-idc-notice__first-step { - display: none; - } - - .jp-idc-notice__second-step { - display: inline-block; - } -} - -.jp-idc-notice .jp-idc-notice__header { - padding-top: 8px; - padding-bottom: 8px; -} - -.jp-idc-notice__header__emblem { - fill: $green-primary; - width: 25px; - height: 25px; - margin: 0 1em 0 auto; - float: left; -} - -.jp-idc-notice__header__text { - font-size: 14px; - font-weight: 600; - line-height: 25px; - margin: 0; -} - -.jp-idc-notice__content-header { - margin: 16px 0; -} - -.jp-idc-notice__content-header__lead { - font-size: 16px; - font-weight: 600; - line-height: 21px; - margin: 0; -} - -.jp-idc-notice__content-header .jp-idc-notice__content-header__explanation { - font-size: 14px; - font-weight: 400; - margin: 8px 0 0; -} - -@media only screen and ( min-width: 960px ) { - .jp-idc-notice__content-header .jp-idc-notice__content-header__explanation { - margin: 4px 0 0; - } -} - -.jp-idc-notice__action { - border: 1px solid lighten( $gray, 30% ); - border-radius: 4px; - display: flex; - padding: 16px; - flex-direction: column; - margin-top: auto; -} - -.jp-idc-notice__action:last-child { - margin: 16px 0 0; -} - -@media only screen and ( min-width: 960px ) { - .jp-idc-notice__actions { - display: flex; - } - - .jp-idc-notice__action { - flex: 1; - margin: 0 8px 0 0; - } - - .jp-idc-notice__action:last-child { - margin: 0 0 0 8px; - } - - .jp-idc-notice__action:first-child { - padding-right: 24px; - } - - .jp-idc-notice__action:last-child { - padding-left: 24px; - } -} - -.jp-idc-notice .jp-idc-notice__action__explanation { - margin: 0 0 16px 0; -} - - -.jp-idc-notice__separator { - background-color: lighten( $gray, 30% ); - margin: 0 -10px 0 -10px; - height: 1px; -} - -.jp-idc-notice.is-dismissible .jp-idc-notice__separator { - margin-right: -46px; -} - -@media only screen and ( min-width: 782px ) { - .jp-idc-notice__separator { - margin: 0 -12px 0 -12px; - } - - .jp-idc-notice.is-dismissible .jp-idc-notice__separator { - margin-right: -38px; - } -} - -.jp-idc-notice .jp-idc-notice__unsure-prompt { - margin: 16px 0 0; -} - -.jp-idc-notice .jp-idc-error__notice { - display: none; - - .dops-notice__icon { - height: auto; - width: auto; - } -} - -@media only screen and ( min-width: 683px ) { - .jp-idc-notice .jp-idc-error__notice .dops-notice__text { - line-height: 24px; - } -} diff --git a/plugins/jetpack/scss/molecules/_nav-horizontal.scss b/plugins/jetpack/scss/molecules/_nav-horizontal.scss deleted file mode 100644 index 0591531d..00000000 --- a/plugins/jetpack/scss/molecules/_nav-horizontal.scss +++ /dev/null @@ -1,25 +0,0 @@ -// ========================================================================== -// Horizontal menu! -// ========================================================================== - -.nav-horizontal { - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } - - a { - display: inline-block; - } - li { - position: relative; - float: left; - } - ul { - margin: 0; - padding: 0; - } -}
\ No newline at end of file diff --git a/plugins/jetpack/scss/organisms/_banners.scss b/plugins/jetpack/scss/organisms/_banners.scss deleted file mode 100644 index eb440817..00000000 --- a/plugins/jetpack/scss/organisms/_banners.scss +++ /dev/null @@ -1,445 +0,0 @@ -@import '_inc/client/scss/functions/rem'; -@import '_inc/client/scss/variables/colors'; - -.updated { // utlizes some core styles, overrides some others - &.jp-banner { - position: relative; - padding: 0; - } - - .jp-banner__header { - font-size: rem( 18px ) ; - font-weight: 400; - margin-top: 0; - } - - .jp-banner__button-container { - padding: rem( 32px ) 0 0; - flex-direction: row-reverse; - align-items: center; - justify-content: flex-end; - - @include minbreakpoint(phablet) { - display: flex; - } - } - - .jp-banner__tos-blurb { - display: block; - padding: rem( 6px ) 0; - line-height: 1.5; - font-size: rem( 11px ); - color: $gray-dark; - @include minbreakpoint(phablet) { - margin-left: rem(18px); - } - - a { - color: inherit; - } - } -} - -.jp-banner .notice-dismiss { - text-decoration: none; -} - -.jp-banner__description { - font-size: rem( 14px ); -} - -.jp-banner__description-container { - padding: rem( 16px ); -} - -// Full Page Connection Banner -// only show when Jetpack is disconnected -.jetpack-disconnected { - .jp-connect-full__container { - box-sizing: border-box; - position: absolute; - top: 0; - right: 0; - bottom: rem( 20px ); - left: 0; - z-index: 999; // to sit over other elements - background: rgb( 241, 241, 241 ); - text-align: center; - - @include breakpoint(large-phone) { - top: 42px; - }; - - @include minbreakpoint(tablet) { - left: -20px; // fill gap of wp-admin sidebar right margin on large screens - }; - - .jp-connect-full__container-card { - padding: rem( 64px ) rem( 64px ) rem( 96px ); - background: white; - margin: 1em; - - img.jetpack-logo { - width: 160px; - } - - img.support-characters { - margin-top: rem( 24px ); - width: 50%; - } - } - - h4 { - line-height: 1.25; - font-size: rem( 22px ); - font-weight: normal; - margin: 1em 0; - } - - } - - // Full page connection banner in the Jetpack dashboard. - &.toplevel_page_jetpack .jp-connect-full__container { - position: relative; - bottom: 0; - box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ), - 0 1px 2px lighten( $gray, 30% ); - - .jp-connect-full__container-card { - margin: 0; - } - - @include minbreakpoint(tablet) { - left: 0; - }; - - @include breakpoint(tablet) { - top: 46px; - }; - - // hide the notice by default. Only display it when it is injected in the middle of the page. - display: none; - } - - // Only display the banner when it is injected in the middle of the page. - &.toplevel_page_jetpack .jp-jetpack-connect__container { - .jp-connect-full__container { - display: block; - } - } -} - -// dismiss -.jp-connect-full__svg-dismiss { - position: absolute; - right: 0; - top: 0; - fill: $gray; - padding: rem( 16px ); - height: rem( 24px ); - width: rem( 24px ); -} - -.jp-connect-full__step-header { - max-width: 700px; - margin: 0 auto; - line-height: 1.5; - - h2 { - margin: rem( 24px ) 10% 0; - font-size: rem( 22px ); - font-weight: bold; - color: black; - - @include breakpoint(large-phone) { - margin: rem( 24px ) 0 0; - }; - } - - h3 { - color: $gray-text-min; - font-size: rem( 16px ); - font-weight: normal; - margin: rem( 10px ) 0 rem( 24px ); - } - - &.bottom { - margin-top: rem( 80px ); - } -} - -.jp-connect-full__button-container { - margin: 0; - .dops-button.is-primary { - background: $green-primary; - border-color: $green-secondary; - padding-left: rem( 24px ); - padding-right: rem( 24px ); - - &:hover, &:focus { - background: $green-secondary; - border-color: $green-dark; - } - } -} - -.jp-connect-full__tos-blurb { - font-size: rem( 11px ); - margin: 0 auto rem( 16px ); -} - -.jp-connect-full__dismiss { - cursor: pointer; -} - -.jp-connect-full__dismiss-paragraph { - font-size: .6875rem; -} - -.jp-connect-full__tos-blurb a, -.jp-connect-full__dismiss-paragraph a { - cursor: pointer; - color: inherit; - text-decoration: underline; -} - -.jp-connect-full__row { - display: flex; - justify-content: space-evenly; - text-align: left; - align-items: baseline; - margin: 0 auto; - max-width: 1000px; -} - -.jp-connect-full__slide { - max-width: 35%; - margin: rem(48px) 0; - - @include breakpoint(tablet) { - margin: rem(30px) 0; - } - - p { - font-size: rem(14px); - } - - .illustration { - padding: rem(12px); - - @include minbreakpoint(phablet) { - margin-bottom: rem(42px); - }; - } -} - -.jp-connect-full__step-support { - max-width: 700px; - margin: 0 auto; - line-height: 1.25; - - h2 { - margin: rem( 16px ) 0 0; - font-size: rem( 22px ); - font-weight: normal; - color: black; - } - - h3 { - color: $gray-text-min; - font-size: rem( 16px ); - font-weight: normal; - margin: rem( 10px ) 0 rem( 24px ); - } -} - -@media screen and (max-width: 480px) { - .jp-connect-full__row { - display: block; - } - .jp-connect-full__slide { - margin: 2em 0; - max-width: 100%; - } - .jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card { - padding: rem(48px) rem(32px); - } -} - - -// Plugin List + wp-admin dashboard Connection Banners (displayed after plugin activation) -// Written in the style of React to stay consistent with the Jetpack interior - -// wp-admin overrides -.updated.jp-wpcom-connect__container { - border-left: none; - padding: 0; - box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; - - @media screen and (max-width: 782px) { - padding: 0 !important; // override core cascades - } -} - -.updated.jp-wpcom-connect__container .dops-button { - padding: 7px 14px 9px; // override wp-admin .updated a padding -} - -.updated .notice-dismiss { - z-index: 1; - text-decoration: none; -} - -.jp-wpcom-connect__container-top-text + .jp-wpcom-connect__inner-container .notice-dismiss::before { - color: $white; -} - -// end overrides - -.jp-wpcom-connect__container-top-text { - padding: 15px 35px 25px 15px; - background-color: $green-primary; - color: $white; - display: flex; - align-items: baseline; - - svg { - width: 24px; - height: 24px; - margin-right: 10px; - position: relative; - top: 7px; - @include breakpoint(large-phone) { - flex: 1; - } - - path { - fill: #fff; - } - } - - span { - display: inline-block; - @include breakpoint(large-phone) { - flex: 9; - } - } -} - -.jp-wpcom-connect__container { - display: block; - position: relative; - box-sizing: border-box; - background-color: $green-primary; -} - -.jp-wpcom-connect__inner-container > a:first-child { - z-index: 1; -} - -.jp-wpcom-connect__inner-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: left; - // border: 4px $green-primary solid; - background: #fff; -} - -.jp-wpcom-connect__content-container { - width: 1250px; - position: relative; - padding: rem( 32px ); - z-index: 0; -} - -.jp-wpcom-connect__content-container p { - color: darken( $gray, 20% ); - font-size: rem( 14px ); -} - -.jp-wpcom-connect__content-container h2 { - margin-top: 0; - line-height: 1.6; - display: block; - margin-bottom: rem(24px); -} - -.jp-wpcom-connect__hide-phone-and-smaller { - @include breakpoint(large-phone) { - display: none !important; - } -} - -.jp-wpcom-connect__content-icon { - margin: 0 rem( 24px ); - display: flex; - flex-direction: column; -} - -.jp-connect-illo { - img { - display: block; - margin: 0 auto; - - &.jetpack-logo { - margin-bottom: rem(36px); - - @include breakpoint(large-phone) { - margin-left: 0; - } - } - } - - @include breakpoint(tablet) { - width: 100%; - margin: rem( 8px ) 0; - display: block; - } -} - -.jp-wpcom-connect__slide-text { - @include minbreakpoint(desktop) { - padding-left: rem( 45px ); - } -} - -.jp-wpcom-connect__slide { - display: none; - - &.jp__slide-is-active { - display: flex; - align-items: flex-start; - - @include breakpoint(tablet) { - display: block; - } - } -} - -.jp-wpcom-connect__slide ul { - list-style: disc; - padding: 0 0 0 rem( 15px ); -} - -.jp-wpcom-connect__slide ul li { - color: darken( $gray, 20% ); - font-size: rem( 12px ); -} - -.jp-banner__button-container .dops-button { - margin: rem( 5px ) 0; - - &.is-primary { - background: $green-primary; - border-color: $green-secondary; - padding-left: rem( 24px ); - padding-right: rem( 24px ); - flex-shrink: 0; - - &:hover, &:focus { - background: $green-secondary; - border-color: $green-dark; - } - } -} diff --git a/plugins/jetpack/scss/pages/_manage.scss b/plugins/jetpack/scss/pages/_manage.scss deleted file mode 100644 index 0825429b..00000000 --- a/plugins/jetpack/scss/pages/_manage.scss +++ /dev/null @@ -1,40 +0,0 @@ - -.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; - } -} diff --git a/plugins/jetpack/scss/pages/_protect.scss b/plugins/jetpack/scss/pages/_protect.scss deleted file mode 100644 index 51120335..00000000 --- a/plugins/jetpack/scss/pages/_protect.scss +++ /dev/null @@ -1,90 +0,0 @@ -/* '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 - -.protect-whitelist { - - textarea { - width: 100%; - min-height: 150px; - } -} - -/* btns + inputs */ - -.configure-module { - - input[disabled] { - opacity: .5; - } - - input.button-primary { - font-weight: bold; - } -} - -/* whitelist table */ - -@media only screen and (min-width : 1100px) { - - .protect-whitelist { - width: 65%; - float: left; - } - -} /* end > 1065px */ - -@media only screen and (max-width : 400px) { - - .protect-status strong { - font-size: 12px; - overflow: auto; - } - -} /* end < 400px */ diff --git a/plugins/jetpack/scss/templates/_connection-landing.scss b/plugins/jetpack/scss/templates/_connection-landing.scss deleted file mode 100644 index 95a3d663..00000000 --- a/plugins/jetpack/scss/templates/_connection-landing.scss +++ /dev/null @@ -1,82 +0,0 @@ -// ========================================================================== -// Jetpack Connection Landing Page ('Please connect jetpack') -//=========================================================================== - -// ========================================================================== -// 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; - } - - .landing { - margin: 0 auto; - z-index: 2; - position: relative; - } - - h1 { - font-weight: 400; - line-height: 1.75em; - 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; - } -} - -// Breakpoints -@include breakpoint(large-desktop) { - .jp-content { - .landing { - padding: 0 2em; - } - - .footer { - padding-top: 1.5em; - } - } -} // large-desktop - -@include breakpoint(large-phone) { - .jp-content { - .landing { - padding: 0 .5em; - } - } -} // large-phone diff --git a/plugins/jetpack/scss/templates/_main.scss b/plugins/jetpack/scss/templates/_main.scss deleted file mode 100644 index 6aa2b7c2..00000000 --- a/plugins/jetpack/scss/templates/_main.scss +++ /dev/null @@ -1,634 +0,0 @@ -// ========================================================================== -// Main Layout -// ========================================================================== - -.configure .frame.top.fixed { - @include breakpoint(tablet){ - padding-left: 0; - }; -} - -// ========================================================================== -// Main author styles -// ========================================================================== - -.wrap.inner, -.page-content { - max-width: 950px; - margin: 0 auto; - - li { - line-height: 23px; - } -} - -.page-content { - @include breakpoint(large-phone){ - margin-top: 0; - }; -} - -.wrap.inner { - @include breakpoint(large-desktop) { - background: $clouds; - padding: 15px; - }; - @include breakpoint(large-phone) { - margin-top: em(24px); - }; -} - -.page-content.about { - position: relative; - z-index: 10; - - @include breakpoint(large-desktop){ - background: $clouds; - padding: 15px; - }; -} - -.page-content.configure { - @include breakpoint(large-desktop){ - background: $clouds; - }; -} - -.footer nav { - max-width: 550px; - margin: 0 auto; -} - - -// ========================================================================== -// Main navigation -// ========================================================================== - -.header { - left: 0; - right: 0; - background: $green; -} -.header-nav { - li { - line-height: 60px; - - } - a { - padding: 0 em(10px); - line-height: 24px; - } - .jetpack-logo { - a { - display: inline-block; - position: relative; - width: 214px; - margin-right: 6px; - background: url(../images/jetpack-logo.png) center center no-repeat; - background: url(../images/jetpack-logo.svg) center center no-repeat, none; - background-size: 183px auto; - color: #fff; - line-height: 60px; - font-weight: normal; - - span { - text-indent: -9999px; - visibility: hidden; - } - - // needs to be cleaned up and removed - jeffgolenski - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - background-size: 183px 32px; - } - } - } - .jetpack-modules + .jetpack-modules { - margin-left: 15px; - } -} - -.main-nav { - float: left; - - li { - margin: 0; - } - @include breakpoint(desktop){ - font-size: 13px; - }; -} - -// Help tab -.jetpack-pagestyles { - #screen-meta { - margin: 0; - } - #screen-meta-links .screen-meta-toggle { - z-index: 2; - } - #screen-options-link-wrap, #contextual-help-link-wrap { - border: none; - } - .update-nag { - display: none; - } -} - -// ========================================================================== -// Modal -// ========================================================================== - -.loading { - bottom: 50%; - position: absolute; - top: 50%; - width: 100%; - - span { - color: #999; - } -} -.modal { - background: #fff; - position: fixed; - top: 52px; - bottom: 20px; - right: 20px; - left: 20px; - margin-left: 160px; - display: none; - box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); - z-index: 500; - - .close { - position: absolute; - top: 0; - right: 0; - font: 300 em(24px) 'genericons' !important; - color: #777; - content: '\f405'; - display: inline-block; - padding: em(4px) em(10px) em(6px); - z-index: 5; - - &:hover { - background: #eee; - opacity: 0.8; - } - &:active { - background: #eee; - opacity: 0.4; - } - } - .content-container { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - padding: em(30px, 14px); - } - .content { - margin: 0 auto; - max-width: 900px; - text-align: left; - } - h2 { - text-align: left; - margin-top: 0; - color: #5d6d74; - font-weight: 300; - line-height: 32px; - text-shadow: 0 1px 1px #fff; - - @include breakpoint(large-phone){ - font-size: 26px; - }; - } - h5 { - clear: left; - } - p { - font-size: em(16px, 13px); - } - footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - padding: 12px 20px; - border-top: 1px solid #ddd; - background: #fff; - text-align: right; - - ul { - margin: 0; - } - li { - display: inline-block; - margin: 0; - } - } - .button-secondary, - .button-primary:active { - // fixing weird core bug thingy - vertical-align: baseline; - } - @include breakpoint(desktop){ - bottom: 5%; - margin-left: 36px; - font-size: 80%; - - .content { - top: 38px; - } - }; - @include breakpoint(tablet){ - top: 66px; - margin-left: 0; - }; - @include breakpoint(phablet){ - top: 10px; - right: 10px; - bottom: 10px; - left: 10px; - } -} -.jp-info-img { - float: right; - margin: 0 0 8px 30px; - - img { - border: 1px solid #ddd; - max-width: 100%; - height: auto; - - &:first-child { - margin-top: 0; - } - } - @include breakpoint(tablet){ - float: none; - margin: 0 0 15px; - }; -} -.content-container.modal-footer { - bottom: 53px; -} -.shade { - background: #000; - bottom: 0; - cursor: pointer; - display: none; - left: 0; - opacity: 0.2; - position: fixed; - right: 0; - top: 0; - z-index: 11; -} - -// ========================================================================== -// Footer Navigation -// ========================================================================== - -// NOTE: .download-jetpack is in _buttons.scss -.footer { - margin-top: em(20px); - position: relative; - padding: em(140px) 0 em(60px); - text-align: center; - - &:before, - &:after { - content: ''; - position: absolute; - left: 0; - pointer-events: none; - } - &:before { - top: 0; - margin-top: -1px; // Removes subpixel gap on retina landscape - width: 100%; - height: 195px; - } - &:after { - display: none; - } - .download-jetpack { - margin-bottom: 33px; - } - @include minbreakpoint(large-desktop){ - padding-bottom: 35px; - }; - @include breakpoint(large-desktop) { - padding-top: 165px; - padding-bottom: 0; - - &:before { - background-size: 160% auto; - } - ul { - float: none; - overflow: hidden; // Clears the float - } - }; - @include breakpoint(desktop){ - padding-top: 146px; - }; - @include breakpoint(tablet){ - margin-top: 0; - }; - @include breakpoint(large-phone){ - margin-top: 0; - padding-top: 135px; - }; - @include breakpoint(phone){ - padding-top: 76px; - }; -} -.footer nav { - max-width: 100%; - - a, - a:visited { - padding: 4px 6px; - color: #999; - - &:hover, - &:focus { - color: #81A844; - } - } - @include breakpoint(large-desktop){ - a, - a:visited { - &:hover, - &:focus { - color: $green; - } - } - }; - @include breakpoint(large-phone){ - li { - display: block; - float: none; - margin: 0; - text-align: left; - } - a { - display: block; - padding: 0 16px; - line-height: 44px; - } - }; -} -.primary { - padding: 25px 15px 10px 15px; - border-bottom: 1px solid #eee; -} -.secondary-footer { - margin: 0 auto; - - li { - margin-right: 5px; - } - @include minbreakpoint(tablet){ - padding: 8px 15px 10px; - margin-bottom: 30px; - border-bottom: 1px solid #eee; - }; - @include minbreakpoint(large-desktop){ - margin-bottom: 0; - }; - @include breakpoint(tablet){ - padding: 8px 15px 8px; - border-bottom: none; - }; - @include breakpoint(large-phone){ - margin: 0; - padding: 0; - border: none; - font-weight: 400; - - a { - border-top: 1px solid #eee; - } - }; -} -.footer .a8c-attribution { - margin: 0; - padding: 0 6px; - color: #bbb; - font-size: em(11px); - font-family: $gill; - text-transform: uppercase; - - a { - // This may look janky, but if you highlight from - // "AN" to "TEAM," copy and paste, you'll get the whole - // "An AUTOMATTIC TEAM" phrase. - display: inline-block; - position: relative; - padding: 4px 16px; - right: 9999px; - outline: 0; - - &:after { - content: 'A'; - position: absolute; - top: 2px; - right: -9999px; - height: 100%; - color: #999; - font-size: em(17px, 11px); - font-family: $automatticons; - text-align: center; - } - &:hover { - &:after { - animation: candy .4s ease-in-out; - } - } - } -} -.secondary { - @include minbreakpoint(tablet){ - padding: 0 15px 10px 15px; - border-bottom: 1px solid #eee; - } - @include minbreakpoint(large-desktop){ - padding: 0 15px 10px 15px; - border-bottom: none; - } -} - - -// ========================================================================== -// Messages & Errors -// ========================================================================== - -.jetpack-message { - background: lighten($green, 5%); - border: 1px solid darken($green, 5%); - margin: 33px auto 0; - max-width: 90%; - position: relative; - z-index: 2; - - &.is-opt-in { - margin: 50px 0 0; - max-width: 100%; - padding: 10px 15px; - background: #fff; - border: 0; - box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); - font-size: 13px; - text-align: center; - - // page=jetpack specific styling - .subhead & { - margin: 0; - padding-bottom: 0; - background: transparent; - box-shadow: none; - - .jp-button { - display: inline-block; - } - } - p { - color: #3c4549; - } - .jp-button { - margin-top: 15px; - display: none; - } - } - .squeezer { - h2 { - font-size: 1em; - } - } - h2 { - color: #fff; - margin: 0; - } - p { - color: #fff; - margin: 0; - opacity: 0.7; - } - .squeezer { - padding: 23px 23px 23px 80px; - position: relative; - text-align: left; - - &:before { - color: #fff; - content: '\f418'; - font-family: 'Genericons'; - font-size: 33px; - height: 33px; - left: 25px; - opacity: 0.6; - position: absolute; - top: 23px; - top: calc( 50% - 22px ); - } - @include breakpoint(large-phone){ - padding: 23px; - - &:before { - display: none; - } - } - a { - color:#FFF; - border-bottom:1px solid #D5E4BD; - } a:hover{ - border-bottom:1px solid #F1F6E9; - } - } - &.error .squeezer:before, - &.jetpack-err .squeezer:before { - content: '\f414'; - } -} - -.configure-module .jetpack-message { - max-width:100%; -} - -// ========================================================================== -// Uncategorized -// ========================================================================== - -@include breakpoint(large-phone){ - .wrap.inner.jp-support { // Used anywhere? - .jp-support-column-left { - width: 100%; - - .widget-text { - margin-right: 0; - width: 100%; - } - } - .jp-support-column-right { - width: 100%; - } - } -}; - -// ========================================================================== -// Custom Breakpoints -// ========================================================================== - -@media screen and (max-width: 515px) { - .jp-frame { - .header-nav { - padding-bottom: 10px; - - li { - line-height: 30px; - } - .jetpack-logo { - width: 100%; - text-align: center; - } - .jetpack-modules { - margin: 0; - width: 50%; - text-align: right; - padding: 0 5px; - } - .jetpack-modules + .jetpack-modules { - text-align: left; - } - .jetpack-modules:nth-child(4) { - text-align: center; - margin: 0 auto; - width: 100%; - a { - padding: 0 10px; - } - } - } - } -} // max 515px - -// ========================================================================== -// Fix notice in IE -// ========================================================================== -#ie-legacy-notice .dops-notice__content { - display: inline-block; - margin-left: 10px; -} diff --git a/plugins/jetpack/scss/templates/_settings.scss b/plugins/jetpack/scss/templates/_settings.scss deleted file mode 100644 index eacbac22..00000000 --- a/plugins/jetpack/scss/templates/_settings.scss +++ /dev/null @@ -1,367 +0,0 @@ -// ========================================================================== -// Settings -// ========================================================================== - -.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; - } - } - } -} - -.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; - } -} - -.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; - } - } - &.active { - th, - td { - background: #f7fcfe; - } - th { - border-left: 4px solid #2ea2cc; - padding-left: 0px; - } - td { - &:first-child { - border-left: 4px solid #2ea2cc; - } - } - } - &.unavailable { - input { - display: none; - } - } - &.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; - position: static; - - span { - margin-left: 5px; - } - - @media (max-width: 530px) { - display: none; - } - @include breakpoint(tablet){ - display: block; - padding-left: 10px; - visibility: visible; - }; - } - } - } - &.with-transparency tr.jetpack-module { - - &:hover { - td .row-actions span a { - opacity: 1; - } - } - &.unavailable { - opacity: 0.3; - } - } - &>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; - 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; - 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; - } - .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 |