| Dir : /home/trave494/hyperhost.kerihosting.com/wp-content/plugins/jetpack/scss/ |
| 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/jetpack-admin-jitm.scss |
// 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: 3rem 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;
}