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