| Dir : /home/trave494/hyperhost.kerihosting.com/wp-content/plugins/jetpack/scss/organisms/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : /home/trave494/hyperhost.kerihosting.com/wp-content/plugins/jetpack/scss/organisms/_banners.scss |
@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;
&: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;
}
}
}