diff options
Diffstat (limited to 'plugins/jetpack/scss/templates/_connection-landing.scss')
| -rw-r--r-- | plugins/jetpack/scss/templates/_connection-landing.scss | 881 |
1 files changed, 881 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/templates/_connection-landing.scss b/plugins/jetpack/scss/templates/_connection-landing.scss new file mode 100644 index 00000000..98cef932 --- /dev/null +++ b/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 |