diff options
Diffstat (limited to 'plugins/jetpack/scss/organisms/_banners.scss')
| -rw-r--r-- | plugins/jetpack/scss/organisms/_banners.scss | 445 |
1 files changed, 445 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/organisms/_banners.scss b/plugins/jetpack/scss/organisms/_banners.scss new file mode 100644 index 00000000..eb440817 --- /dev/null +++ b/plugins/jetpack/scss/organisms/_banners.scss @@ -0,0 +1,445 @@ +@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; + } + } +} |