Added login request
This commit is contained in:
Nedim Uka
@@ -0,0 +1,399 @@
|
||||
@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( 12px ) 0 0;
|
||||
}
|
||||
|
||||
.jp-banner__tos-blurb {
|
||||
display: block;
|
||||
padding: rem( 6px ) 0;
|
||||
line-height: 1.5;
|
||||
font-size: rem( 11px );
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.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: 0;
|
||||
left: 0;
|
||||
z-index: 9999; // to sit over other elements
|
||||
background: rgba($gray-light, .95);
|
||||
text-align: center;
|
||||
padding: rem( 32px );
|
||||
|
||||
@include minbreakpoint(tablet) {
|
||||
left: -20px; // fill gap of wp-admin sidebar right margin on large screens
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Planet + star svgs for decoration only
|
||||
.jp-connect-full__svg-jupiter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: rem( 80px );
|
||||
opacity: .90;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
display: none;
|
||||
};
|
||||
}
|
||||
|
||||
.jp-connect-full__svg-stars {
|
||||
position: absolute;
|
||||
left: rem( 100px );
|
||||
top: rem( 100px );
|
||||
opacity: .90;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
display: none;
|
||||
};
|
||||
}
|
||||
|
||||
// dismiss
|
||||
.jp-connect-full__svg-dismiss {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
fill: $gray;
|
||||
padding: rem( 16px );
|
||||
height: rem( 24px );
|
||||
width: rem( 24px );
|
||||
|
||||
@include breakpoint(phablet) {
|
||||
top: rem( 50px );
|
||||
};
|
||||
}
|
||||
|
||||
.jp-connect-full__step-header-logos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.jp-connect-full__svg-jetpack,
|
||||
.jp-connect-full__svg-jetpack {
|
||||
fill: $gray;
|
||||
}
|
||||
|
||||
.jp-connect-full__svg-sync {
|
||||
fill: $gray-dark;
|
||||
margin: 0 rem( 16px );
|
||||
}
|
||||
|
||||
@include breakpoint(phablet) {
|
||||
padding-top: rem( 32px );
|
||||
};
|
||||
}
|
||||
|
||||
.jp-connect-full__step-header-title {
|
||||
padding: rem( 16px );
|
||||
font-size: rem( 24px );
|
||||
line-height: 1.25;
|
||||
color: $gray-dark;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.jp-connect-full__card {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
|
||||
background: $white;
|
||||
max-width: rem( 550px );
|
||||
}
|
||||
|
||||
.jp-connect-full__card-inner {
|
||||
padding: rem( 16px );
|
||||
}
|
||||
|
||||
.jp-connect-full__card-description {
|
||||
font-size: rem( 14px );
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.jp-connect-full__card-footer {
|
||||
background: $gray-light;
|
||||
padding: rem( 16px );
|
||||
box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
|
||||
}
|
||||
|
||||
.jp-connect-full__tos-blurb {
|
||||
font-size: rem( 11px );
|
||||
margin: 0 auto rem( 16px );
|
||||
max-width: rem( 385px );
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.jp-connect-full__tos-a {
|
||||
text-decoration: none;
|
||||
color: $blue-wordpress;
|
||||
}
|
||||
|
||||
.jp-connect-full__button-container {
|
||||
margin: 0;
|
||||
.dops-button.is-primary {
|
||||
background: $green-primary;
|
||||
border-color: $green-secondary;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $green-secondary;
|
||||
border-color: $green-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jp-connect-full__help-button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: $gray;
|
||||
padding: rem( 16px );
|
||||
|
||||
.gridicon {
|
||||
width: rem( 18px );
|
||||
height: rem( 18px );
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-connect-full__dismiss {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Plugin List Connection Banners
|
||||
// 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;
|
||||
}
|
||||
// end overrides
|
||||
|
||||
.jp-wpcom-connect__container {
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__content-container {
|
||||
width: 1250px;
|
||||
position: relative;
|
||||
padding: rem( 32px );
|
||||
z-index: 0;
|
||||
|
||||
@include minbreakpoint(tablet) {
|
||||
padding: rem( 32px ) rem( 32px ) rem( 96px ) rem( 32px );
|
||||
};
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__content-container p {
|
||||
color: darken( $gray, 20% );
|
||||
font-size: rem( 14px );
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__content-container h2 {
|
||||
margin-top: 0;
|
||||
color: #4F748E;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__content-icon {
|
||||
float: right;
|
||||
margin: 0 rem( 24px ) 0 rem( 36px );
|
||||
|
||||
&.jp-connect-illo {
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: rem( 36px ) 0 rem( 24px );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__slide {
|
||||
display: none;
|
||||
|
||||
&.jp__slide-is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__content-container .jp-banner__button-container {
|
||||
@include minbreakpoint(tablet) {
|
||||
position: absolute;
|
||||
bottom: rem( 8px );
|
||||
};
|
||||
}
|
||||
|
||||
.jp-banner__button-container .dops-button {
|
||||
margin: rem( 5px ) 0;
|
||||
|
||||
&.is-primary {
|
||||
background: $green-primary;
|
||||
border-color: $green-secondary;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $green-secondary;
|
||||
border-color: $green-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Connection Banner Vertical Menu
|
||||
.jp-wpcom-connect__vertical-nav {
|
||||
background-color: #F3F6F8;
|
||||
|
||||
@include minbreakpoint(phablet) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
};
|
||||
|
||||
@include breakpoint(phablet) {
|
||||
display: none; // hide nav on sm screens. becomes a linear tutorial
|
||||
};
|
||||
}
|
||||
|
||||
.jp-wpcom-connect__vertical-nav-container {
|
||||
width: rem( 240px );
|
||||
}
|
||||
|
||||
.vertical-menu__feature-item-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include minbreakpoint(phablet) {
|
||||
|
||||
.vertical-menu__feature-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: rem( 8px );
|
||||
border-bottom: 1px solid #c8d7e1;
|
||||
border-right: 1px solid #c8d7e1;
|
||||
border-left: 3px solid #F3F6F8;
|
||||
background-color: #F3F6F8;
|
||||
color: #87a6bc;
|
||||
cursor: pointer;
|
||||
|
||||
// trick to hide the bottom border of the last menu item when the menu is the tallest element,
|
||||
// but display the border when the overall container is taller than the menu
|
||||
&:last-of-type {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu__feature-item-is-selected {
|
||||
border-left: 3px solid #0087be;
|
||||
border-right: 1px solid #fff;
|
||||
background-color: #fff;
|
||||
color: #2e4453;
|
||||
|
||||
&.jp-feature-intro {
|
||||
border-left: 3px solid $green-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu__feature-item-icon {
|
||||
width: rem( 20px );
|
||||
height: rem( 20px );
|
||||
padding: rem( 4px );
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// svg fill swaps
|
||||
.vertical-menu__feature-item {
|
||||
svg {
|
||||
fill: #86A6BD;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu__feature-item-is-selected {
|
||||
|
||||
svg {
|
||||
fill: #3D596D;
|
||||
}
|
||||
|
||||
&.jp-feature-intro {
|
||||
svg {
|
||||
fill: $green-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.wp-app-logo {
|
||||
svg path {
|
||||
fill: #3D596D;
|
||||
}
|
||||
}
|
||||
}
|
||||
// end svg fill swaps
|
||||
|
||||
.vertical-menu__feature-item-label {
|
||||
display: block;
|
||||
padding: rem( 8px );
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user