diff options
Diffstat (limited to 'plugins/jetpack/scss/organisms/_banners.scss')
| -rw-r--r-- | plugins/jetpack/scss/organisms/_banners.scss | 445 |
1 files changed, 0 insertions, 445 deletions
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; - } - } -} |