Added login request
This commit is contained in:
Nedim Uka
@@ -0,0 +1,30 @@
|
||||
// ==========================================================================
|
||||
// Accessibility
|
||||
// ==========================================================================
|
||||
|
||||
// Text meant only for screen readers
|
||||
.screen-reader-text {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
position: absolute !important;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000; // Above WP toolbar
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
// ==========================================================================
|
||||
// Grid styles
|
||||
// 12 column grid
|
||||
// ==========================================================================
|
||||
|
||||
.j-row {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.j-col {
|
||||
padding: 0.85em;
|
||||
width: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Small grid (Mobile first)
|
||||
@media only screen {
|
||||
// .j-sm-1 {width: 8.33333%;}
|
||||
// .j-sm-2 {width: 16.66667%;}
|
||||
// .j-sm-3 {width: 25%;}
|
||||
// .j-sm-4 {width: 33.33333%;}
|
||||
.j-sm-5 {width: 41.66667%;}
|
||||
// .j-sm-6 {width: 50%;}
|
||||
.j-sm-7 {width: 58.33333%;}
|
||||
// .j-sm-8 {width: 66.66667%;}
|
||||
// .j-sm-9 {width: 75%;}
|
||||
// .j-sm-10 {width: 83.33333%;}
|
||||
// .j-sm-11 {width: 91.66667%;}
|
||||
.j-sm-12 {width: 100%;}
|
||||
}
|
||||
|
||||
// Medium grid
|
||||
// 530px and up
|
||||
@include minbreakpoint(large-phone) {
|
||||
// .j-md-1 {width: 8.33333%;}
|
||||
// .j-md-2 {width: 16.66667%;}
|
||||
// .j-md-3 {width: 25%;}
|
||||
.j-md-4 {width: 33.33333%;}
|
||||
// .j-md-5 {width: 41.66667%;}
|
||||
.j-md-6 {width: 50%;}
|
||||
// .j-md-7 {width: 58.33333%;}
|
||||
.j-md-8 {width: 66.66667%;}
|
||||
// .j-md-9 {width: 75%;}
|
||||
// .j-md-10 {width: 83.33333%;}
|
||||
// .j-md-11 {width: 91.66667%;}
|
||||
.j-md-12 {width: 100%;}
|
||||
}
|
||||
|
||||
// Large grid
|
||||
// 782px and up
|
||||
@include minbreakpoint(tablet) {
|
||||
// .j-lrg-1 {width: 8.33333%;}
|
||||
// .j-lrg-2 {width: 16.66667%;}
|
||||
// .j-lrg-3 {width: 25%;}
|
||||
.j-lrg-4 {width: 33.33333%;}
|
||||
.j-lrg-5 {width: 41.66667%;}
|
||||
.j-lrg-6 {width: 50%;}
|
||||
.j-lrg-7 {width: 58.33333%;}
|
||||
.j-lrg-8 {width: 66.66667%;}
|
||||
// .j-lrg-9 {width: 75%;}
|
||||
// .j-lrg-10 {width: 83.33333%;}
|
||||
// .j-lrg-11 {width: 91.66667%;}
|
||||
.j-lrg-12 {width: 100%;}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
// ==========================================================================
|
||||
// Breakpoint Mixin
|
||||
//
|
||||
// Uses Sass Maps which requires Sass v3.3.0 or newer
|
||||
//
|
||||
//
|
||||
// EXAMPLE
|
||||
//
|
||||
// body {
|
||||
// @include breakpoint(tablet){
|
||||
// font-size: 14px;
|
||||
// };
|
||||
// }
|
||||
|
||||
// ==========================================================================
|
||||
|
||||
// Add or remove breakpoints as you desire
|
||||
$breakpoints:(
|
||||
phone: 320px,
|
||||
large-phone: 530px,
|
||||
phablet: 600px,
|
||||
tablet: 782px,
|
||||
desktop: 900px,
|
||||
large-desktop: 1147px,
|
||||
);
|
||||
|
||||
@mixin breakpoint($size){
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@if $size == $breakpoint {
|
||||
@media (max-width: map-get($breakpoints, $breakpoint)){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For mobile first
|
||||
@mixin minbreakpoint($size){
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@if $size == $breakpoint {
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// ==========================================================================
|
||||
// Animation for miles!
|
||||
// ==========================================================================
|
||||
|
||||
@keyframes "candy" {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
60% {
|
||||
transform: scale(.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
// ==========================================================================
|
||||
// Buttony button buttons
|
||||
// ==========================================================================
|
||||
|
||||
.button,
|
||||
.download-jetpack {
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
.jp-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: em(10px, 13px) em(19px, 13px);
|
||||
color: #efefef;
|
||||
font-weight: bold;
|
||||
font-size: 0.9285714286em; // 13/14
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
background: #6f7476;
|
||||
border-radius: 3px;
|
||||
|
||||
&:visited {
|
||||
color: #efefef;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #57972d;
|
||||
}
|
||||
&:active {
|
||||
background: #57972d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.jp-button--settings {
|
||||
@extend .jp-button;
|
||||
background: #93b45f;
|
||||
color: #e8eedf;
|
||||
|
||||
&:visited {
|
||||
color: #e8eedf
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #9fbd72;
|
||||
color: #fff;
|
||||
}
|
||||
&.current {
|
||||
background: #3c6621;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
inset 0 2px 0 #365A1F,
|
||||
inset 0 1px 3px #3c6621;
|
||||
}
|
||||
}
|
||||
.download-jetpack {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: em(18px, 28px) em(50px, 46px) em(15px, 28px);
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
background: #518d2a;
|
||||
z-index: 3;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 6px 0 #3e6c20,
|
||||
0 6px 3px rgba(0,0,0,.4);
|
||||
|
||||
&:visited {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #57972d;
|
||||
box-shadow:
|
||||
0 6px 0 #3e6c20,
|
||||
0 6px 3px rgba(0,0,0,.4);
|
||||
}
|
||||
&:active {
|
||||
top: 6px;
|
||||
box-shadow:
|
||||
0 0px 0 #3e6c20,
|
||||
0 0 0 rgba(0,0,0,.4);
|
||||
|
||||
&:after {
|
||||
// fixes buggy clicks
|
||||
top: -6px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-right: 13px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
background: url('../images/connect-plug.svg') center center no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
&:after {
|
||||
// fixes buggy clicks
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@include breakpoint(large-desktop){
|
||||
font-size: em(18px);
|
||||
|
||||
&:before {
|
||||
top: -1px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
};
|
||||
@include breakpoint(desktop){
|
||||
&:active {
|
||||
top: 0;
|
||||
}
|
||||
};
|
||||
@include breakpoint(large-phone){
|
||||
font-size: em(17px);
|
||||
font-weight: 600;
|
||||
|
||||
&:before {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// ==========================================================================
|
||||
// Jetpack Colors
|
||||
// ==========================================================================
|
||||
|
||||
$green: #81a844;
|
||||
$white: #fff;
|
||||
$red: #d94f4f;
|
||||
|
||||
// Blues
|
||||
$lightblue: #2ea2cc;
|
||||
$wpcom: #0087be;
|
||||
$blue-dark: #005082;
|
||||
|
||||
// Grays
|
||||
$clouds: #f9f9f9;
|
||||
$gray-med: #686f72;
|
||||
@@ -0,0 +1,32 @@
|
||||
// ==========================================================================
|
||||
// Automatticons
|
||||
//
|
||||
// A quick reference
|
||||
// ==========================================================================
|
||||
|
||||
$automatticons: 'automatticons';
|
||||
|
||||
// This font was graciously generated by Font Squirrel (http://www.fontsquirrel.com). We love those guys.
|
||||
@font-face {
|
||||
font-family: 'automatticons';
|
||||
src: url('../_inc/fonts/automatticons/automatticons.eot');
|
||||
src: url('../_inc/fonts/automatticons/automatticons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../_inc/fonts/automatticons/automatticons.woff') format('woff'),
|
||||
url('../_inc/fonts/automatticons/automatticons.ttf') format('truetype'),
|
||||
url('../_inc/fonts/automatticons/automatticons.svg#automatticonsregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// $automattic: 'A';
|
||||
// $code-poet: 'C';
|
||||
// $facebook: 'F';
|
||||
// $gravatar: 'G';
|
||||
// $inferno: 'I'; // Not sure what this one is
|
||||
// $jetpack: 'J';
|
||||
// $akismet: 'K';
|
||||
// $polldaddy: 'P';
|
||||
// $shield: 's'; // VaultPress shield
|
||||
// $vaultpress: 'V';
|
||||
// $vaultpress-inverted: 'v';
|
||||
// $wordpress: 'W';
|
||||
@@ -0,0 +1,12 @@
|
||||
// ==========================================================================
|
||||
// em()
|
||||
//
|
||||
// Convert px to em in a readable fashion.
|
||||
// ==========================================================================
|
||||
|
||||
// Examples:
|
||||
// 1. font-size: em(14px);
|
||||
// 2. font-size: em(30px/14px);
|
||||
@function em($value, $context: map-get($root-font, font-size)) {
|
||||
@return ($value / $context * 1em);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// ==========================================================================
|
||||
// Typography variables
|
||||
// ==========================================================================
|
||||
|
||||
$normal: normal; // Change these values when using custom fonts
|
||||
$bold: bold; // For example, bold could change to 400;
|
||||
|
||||
$root-font:(
|
||||
color: #222,
|
||||
font-size: 14px,
|
||||
line-height: 1.4
|
||||
);
|
||||
|
||||
$pre__background: #eee;
|
||||
$mark__background: #fff9c0;
|
||||
|
||||
// ==========================================================================
|
||||
// Typefaces
|
||||
// ==========================================================================
|
||||
|
||||
$monospace: 'courier new', monospace;
|
||||
$serif: Georgia, "Times New Roman", Times, serif;
|
||||
$sans: Helvetica, Arial, sans-serif; // 400i,400,600,700,800
|
||||
$calluna: 'calluna', $sans; // 400
|
||||
$gill: "Gill Sans", "Gill Sans MT", $sans;
|
||||
|
||||
// ==========================================================================
|
||||
// Icons
|
||||
// ==========================================================================
|
||||
|
||||
$genericons: 'genericons';
|
||||
@@ -0,0 +1,14 @@
|
||||
// Functions
|
||||
@import '_inc/client/scss/functions/rem';
|
||||
|
||||
// Variables
|
||||
@import '_inc/client/scss/variables/colors';
|
||||
@import '_inc/client/scss/variables/layout';
|
||||
|
||||
// Mixins
|
||||
@import '_inc/client/scss/mixins/breakpoints';
|
||||
@import '_inc/client/scss/mixins/clear-fix';
|
||||
@import '_inc/client/scss/mixins/long-content-fade';
|
||||
|
||||
// Styles
|
||||
@import "_inc/client/dashboard-widget/style";
|
||||
@@ -0,0 +1,401 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// if JITM appears directly below WordPress "help" menu adjust margins
|
||||
#screen-meta-links+.jitm-card {
|
||||
margin: rem( 40px ) 1.5385em 0 auto;
|
||||
}
|
||||
|
||||
.jitm-card {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: rem( 16px ) 0 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 );
|
||||
}
|
||||
}
|
||||
|
||||
// remove right margin for jitms in the editor
|
||||
.post-php .jitm-card {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.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 );
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "atoms/colors/colors", // Color variables
|
||||
"atoms/typography/functions",
|
||||
"atoms/typography/variables",
|
||||
"_utilities/mixins/breakpoint", // Mixins
|
||||
"_utilities/grid",
|
||||
"atoms/animations",
|
||||
"atoms/buttons",
|
||||
"atoms/icons/automatticons",
|
||||
"molecules/nav-horizontal",
|
||||
"templates/main", // Main template
|
||||
"templates/settings", // Settings page
|
||||
"pages/protect", // Protect config page
|
||||
"pages/manage", // Actiavte and confirm manage
|
||||
"templates/connection-landing"; // jetpack connection landing, main admin, jumpstart
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "_utilities/mixins/breakpoint",
|
||||
"atoms/typography/variables",
|
||||
"atoms/typography/functions",
|
||||
"organisms/banners";
|
||||
@@ -0,0 +1,34 @@
|
||||
// ==========================================================================
|
||||
// Admin nav iconx
|
||||
// ==========================================================================
|
||||
|
||||
@font-face {
|
||||
font-family: "jetpack";
|
||||
src: url("../_inc/fonts/jetpack/jetpack.eot");
|
||||
src: url("../_inc/fonts/jetpack/jetpack.eot?#iefix") format("embedded-opentype"),
|
||||
url("../_inc/fonts/jetpack/jetpack.woff") format("woff"),
|
||||
url("../_inc/fonts/jetpack/jetpack.ttf") format("truetype"),
|
||||
url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: "jetpack";
|
||||
src: url("../_inc/fonts/jetpack/jetpack.svg#jetpack") format("svg");
|
||||
}
|
||||
}
|
||||
|
||||
li.toplevel_page_jetpack .wp-menu-image:before {
|
||||
font-family: 'jetpack' !important;
|
||||
content: '\f100';
|
||||
}
|
||||
#menu-posts-feedback .wp-menu-image:before {
|
||||
font-family: dashicons !important;
|
||||
content: '\f175';
|
||||
}
|
||||
#adminmenu #menu-posts-feedback div.wp-menu-image {
|
||||
background: none !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
#wp-admin-bar-jetpack-idc.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wp-admin-bar-jetpack-idc .jp-idc-admin-bar {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
color: #23282d;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#wpadminbar #wp-admin-bar-jetpack-idc .dashicons {
|
||||
color: #23282d;
|
||||
font-family: 'dashicons';
|
||||
|
||||
&:before {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#wpadminbar #wp-admin-bar-jetpack-idc:hover {
|
||||
.ab-item {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.jp-idc-admin-bar {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
@import '../_inc/client/scss/variables/_colors.scss';
|
||||
|
||||
.jp-idc-notice,
|
||||
.jp-idc-notice * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jp-idc-notice {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 0;
|
||||
|
||||
&.is-non-admin {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and ( min-width: 783px ) {
|
||||
.jp-idc-notice {
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
&.has-help-tabs {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice {
|
||||
h3, p {
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice a:not( .dops-notice__action ) {
|
||||
color: $blue-wordpress;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: $blue-wordpress;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $link-highlight;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice .dops-button {
|
||||
align-self: flex-start;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.jp-idc-notice > div {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.jp-idc-notice__first-step {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.jp-idc-notice__second-step {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jp-idc-notice.jp-idc-show-second-step {
|
||||
.jp-idc-notice__first-step {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jp-idc-notice__second-step {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice .jp-idc-notice__header {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.jp-idc-notice__header__emblem {
|
||||
fill: $green-primary;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 1em 0 auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.jp-idc-notice__header__text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice__content-header {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice__content-header__lead {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 21px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 960px ) {
|
||||
.jp-idc-notice__content-header .jp-idc-notice__content-header__explanation {
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice__action {
|
||||
border: 1px solid lighten( $gray, 30% );
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.jp-idc-notice__action:last-child {
|
||||
margin: 16px 0 0;
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 960px ) {
|
||||
.jp-idc-notice__actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jp-idc-notice__action {
|
||||
flex: 1;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice__action:last-child {
|
||||
margin: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.jp-idc-notice__action:first-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.jp-idc-notice__action:last-child {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice .jp-idc-notice__action__explanation {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
|
||||
.jp-idc-notice__separator {
|
||||
background-color: lighten( $gray, 30% );
|
||||
margin: 0 -10px 0 -10px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.jp-idc-notice.is-dismissible .jp-idc-notice__separator {
|
||||
margin-right: -46px;
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 782px ) {
|
||||
.jp-idc-notice__separator {
|
||||
margin: 0 -12px 0 -12px;
|
||||
}
|
||||
|
||||
.jp-idc-notice.is-dismissible .jp-idc-notice__separator {
|
||||
margin-right: -38px;
|
||||
}
|
||||
}
|
||||
|
||||
.jp-idc-notice .jp-idc-notice__unsure-prompt {
|
||||
margin: 16px 0 0;
|
||||
}
|
||||
|
||||
.jp-idc-notice .jp-idc-error__notice {
|
||||
display: none;
|
||||
|
||||
.dops-notice__icon {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 683px ) {
|
||||
.jp-idc-notice .jp-idc-error__notice .dops-notice__text {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// ==========================================================================
|
||||
// Horizontal menu!
|
||||
// ==========================================================================
|
||||
|
||||
.nav-horizontal {
|
||||
&:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -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 );
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
.manage__icon {
|
||||
width: 155px;
|
||||
height: 155px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.manage-page {
|
||||
.manage__description {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #999;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.manage__button {
|
||||
font-size:16px;
|
||||
padding: 0 20px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
}
|
||||
}
|
||||
.manage__title .genericon {
|
||||
font-size: 38px;
|
||||
color: #81A944;
|
||||
}
|
||||
|
||||
.manage__link {
|
||||
font-size: 16px;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: normal;
|
||||
|
||||
.genericon{
|
||||
font-size: 28px;
|
||||
vertical-align: middle;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/* 'Pages' is a temporary location for these styles, until we can break them up into their proper atmoic locations */
|
||||
|
||||
// ==========================================================================
|
||||
// Jetpack Protect Config Page
|
||||
//==========================================================================
|
||||
|
||||
|
||||
.configure-module p {
|
||||
font-size: 14px;
|
||||
|
||||
&.success, &.error {
|
||||
color: $white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.protect-status {
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border: 1px #ddd solid;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.attn {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&.working {
|
||||
color: $green;
|
||||
}
|
||||
} // .protect-status
|
||||
|
||||
.protect-whitelist {
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* btns + inputs */
|
||||
|
||||
.configure-module {
|
||||
|
||||
input[disabled] {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input.button-primary {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* whitelist table */
|
||||
|
||||
@media only screen and (min-width : 1100px) {
|
||||
|
||||
.protect-whitelist {
|
||||
width: 65%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
} /* end > 1065px */
|
||||
|
||||
@media only screen and (max-width : 400px) {
|
||||
|
||||
.protect-status strong {
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
} /* end < 400px */
|
||||
@@ -0,0 +1,82 @@
|
||||
// ==========================================================================
|
||||
// Jetpack Connection Landing Page ('Please connect jetpack')
|
||||
//===========================================================================
|
||||
|
||||
// ==========================================================================
|
||||
// Jetpack NUX Page(s) (main jetpack admin page + jumpstart)
|
||||
//===========================================================================
|
||||
|
||||
// Needs to be cleaned. Let's remove those important tags and unneeded classes that we can utilize from core. Properly nest elements. migrate into _main.scss
|
||||
// Once everything is tested, I'll remove all the comments below as well. - @jeffgolenski
|
||||
|
||||
// wrapping these common element names temporarily until I can audit - jeff
|
||||
.jp-content {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing {
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
line-height: 1.75em;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.success {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
background-image: none;
|
||||
|
||||
&:before {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.more-info:before {
|
||||
content: none;
|
||||
}
|
||||
} //.jp-content
|
||||
|
||||
.landing {
|
||||
.wpcom-connect {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.wpcom-connect {
|
||||
.j-col {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Breakpoints
|
||||
@include breakpoint(large-desktop) {
|
||||
.jp-content {
|
||||
.landing {
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
}
|
||||
} // large-desktop
|
||||
|
||||
@include breakpoint(large-phone) {
|
||||
.jp-content {
|
||||
.landing {
|
||||
padding: 0 .5em;
|
||||
}
|
||||
}
|
||||
} // large-phone
|
||||
@@ -0,0 +1,634 @@
|
||||
// ==========================================================================
|
||||
// Main Layout
|
||||
// ==========================================================================
|
||||
|
||||
.configure .frame.top.fixed {
|
||||
@include breakpoint(tablet){
|
||||
padding-left: 0;
|
||||
};
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Main author styles
|
||||
// ==========================================================================
|
||||
|
||||
.wrap.inner,
|
||||
.page-content {
|
||||
max-width: 950px;
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@include breakpoint(large-phone){
|
||||
margin-top: 0;
|
||||
};
|
||||
}
|
||||
|
||||
.wrap.inner {
|
||||
@include breakpoint(large-desktop) {
|
||||
background: $clouds;
|
||||
padding: 15px;
|
||||
};
|
||||
@include breakpoint(large-phone) {
|
||||
margin-top: em(24px);
|
||||
};
|
||||
}
|
||||
|
||||
.page-content.about {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
@include breakpoint(large-desktop){
|
||||
background: $clouds;
|
||||
padding: 15px;
|
||||
};
|
||||
}
|
||||
|
||||
.page-content.configure {
|
||||
@include breakpoint(large-desktop){
|
||||
background: $clouds;
|
||||
};
|
||||
}
|
||||
|
||||
.footer nav {
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
// ==========================================================================
|
||||
// Main navigation
|
||||
// ==========================================================================
|
||||
|
||||
.header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $green;
|
||||
}
|
||||
.header-nav {
|
||||
li {
|
||||
line-height: 60px;
|
||||
|
||||
}
|
||||
a {
|
||||
padding: 0 em(10px);
|
||||
line-height: 24px;
|
||||
}
|
||||
.jetpack-logo {
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 214px;
|
||||
margin-right: 6px;
|
||||
background: url(../images/jetpack-logo.png) center center no-repeat;
|
||||
background: url(../images/jetpack-logo.svg) center center no-repeat, none;
|
||||
background-size: 183px auto;
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
font-weight: normal;
|
||||
|
||||
span {
|
||||
text-indent: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// needs to be cleaned up and removed - jeffgolenski
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-size: 183px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jetpack-modules + .jetpack-modules {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
float: left;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
@include breakpoint(desktop){
|
||||
font-size: 13px;
|
||||
};
|
||||
}
|
||||
|
||||
// Help tab
|
||||
.jetpack-pagestyles {
|
||||
#screen-meta {
|
||||
margin: 0;
|
||||
}
|
||||
#screen-meta-links .screen-meta-toggle {
|
||||
z-index: 2;
|
||||
}
|
||||
#screen-options-link-wrap, #contextual-help-link-wrap {
|
||||
border: none;
|
||||
}
|
||||
.update-nag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Modal
|
||||
// ==========================================================================
|
||||
|
||||
.loading {
|
||||
bottom: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
margin-left: 160px;
|
||||
display: none;
|
||||
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 500;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font: 300 em(24px) 'genericons' !important;
|
||||
color: #777;
|
||||
content: '\f405';
|
||||
display: inline-block;
|
||||
padding: em(4px) em(10px) em(6px);
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active {
|
||||
background: #eee;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
.content-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
padding: em(30px, 14px);
|
||||
}
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
text-align: left;
|
||||
}
|
||||
h2 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
color: #5d6d74;
|
||||
font-weight: 300;
|
||||
line-height: 32px;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
|
||||
@include breakpoint(large-phone){
|
||||
font-size: 26px;
|
||||
};
|
||||
}
|
||||
h5 {
|
||||
clear: left;
|
||||
}
|
||||
p {
|
||||
font-size: em(16px, 13px);
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.button-secondary,
|
||||
.button-primary:active {
|
||||
// fixing weird core bug thingy
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@include breakpoint(desktop){
|
||||
bottom: 5%;
|
||||
margin-left: 36px;
|
||||
font-size: 80%;
|
||||
|
||||
.content {
|
||||
top: 38px;
|
||||
}
|
||||
};
|
||||
@include breakpoint(tablet){
|
||||
top: 66px;
|
||||
margin-left: 0;
|
||||
};
|
||||
@include breakpoint(phablet){
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
.jp-info-img {
|
||||
float: right;
|
||||
margin: 0 0 8px 30px;
|
||||
|
||||
img {
|
||||
border: 1px solid #ddd;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@include breakpoint(tablet){
|
||||
float: none;
|
||||
margin: 0 0 15px;
|
||||
};
|
||||
}
|
||||
.content-container.modal-footer {
|
||||
bottom: 53px;
|
||||
}
|
||||
.shade {
|
||||
background: #000;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
left: 0;
|
||||
opacity: 0.2;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Footer Navigation
|
||||
// ==========================================================================
|
||||
|
||||
// NOTE: .download-jetpack is in _buttons.scss
|
||||
.footer {
|
||||
margin-top: em(20px);
|
||||
position: relative;
|
||||
padding: em(140px) 0 em(60px);
|
||||
text-align: center;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
margin-top: -1px; // Removes subpixel gap on retina landscape
|
||||
width: 100%;
|
||||
height: 195px;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
.download-jetpack {
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
@include minbreakpoint(large-desktop){
|
||||
padding-bottom: 35px;
|
||||
};
|
||||
@include breakpoint(large-desktop) {
|
||||
padding-top: 165px;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:before {
|
||||
background-size: 160% auto;
|
||||
}
|
||||
ul {
|
||||
float: none;
|
||||
overflow: hidden; // Clears the float
|
||||
}
|
||||
};
|
||||
@include breakpoint(desktop){
|
||||
padding-top: 146px;
|
||||
};
|
||||
@include breakpoint(tablet){
|
||||
margin-top: 0;
|
||||
};
|
||||
@include breakpoint(large-phone){
|
||||
margin-top: 0;
|
||||
padding-top: 135px;
|
||||
};
|
||||
@include breakpoint(phone){
|
||||
padding-top: 76px;
|
||||
};
|
||||
}
|
||||
.footer nav {
|
||||
max-width: 100%;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
padding: 4px 6px;
|
||||
color: #999;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #81A844;
|
||||
}
|
||||
}
|
||||
@include breakpoint(large-desktop){
|
||||
a,
|
||||
a:visited {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
};
|
||||
@include breakpoint(large-phone){
|
||||
li {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 16px;
|
||||
line-height: 44px;
|
||||
}
|
||||
};
|
||||
}
|
||||
.primary {
|
||||
padding: 25px 15px 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.secondary-footer {
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@include minbreakpoint(tablet){
|
||||
padding: 8px 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
};
|
||||
@include minbreakpoint(large-desktop){
|
||||
margin-bottom: 0;
|
||||
};
|
||||
@include breakpoint(tablet){
|
||||
padding: 8px 15px 8px;
|
||||
border-bottom: none;
|
||||
};
|
||||
@include breakpoint(large-phone){
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
};
|
||||
}
|
||||
.footer .a8c-attribution {
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
color: #bbb;
|
||||
font-size: em(11px);
|
||||
font-family: $gill;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
// This may look janky, but if you highlight from
|
||||
// "AN" to "TEAM," copy and paste, you'll get the whole
|
||||
// "An AUTOMATTIC TEAM" phrase.
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 4px 16px;
|
||||
right: 9999px;
|
||||
outline: 0;
|
||||
|
||||
&:after {
|
||||
content: 'A';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: -9999px;
|
||||
height: 100%;
|
||||
color: #999;
|
||||
font-size: em(17px, 11px);
|
||||
font-family: $automatticons;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
animation: candy .4s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.secondary {
|
||||
@include minbreakpoint(tablet){
|
||||
padding: 0 15px 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
@include minbreakpoint(large-desktop){
|
||||
padding: 0 15px 10px 15px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ==========================================================================
|
||||
// Messages & Errors
|
||||
// ==========================================================================
|
||||
|
||||
.jetpack-message {
|
||||
background: lighten($green, 5%);
|
||||
border: 1px solid darken($green, 5%);
|
||||
margin: 33px auto 0;
|
||||
max-width: 90%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&.is-opt-in {
|
||||
margin: 50px 0 0;
|
||||
max-width: 100%;
|
||||
padding: 10px 15px;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
|
||||
// page=jetpack specific styling
|
||||
.subhead & {
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.jp-button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #3c4549;
|
||||
}
|
||||
.jp-button {
|
||||
margin-top: 15px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.squeezer {
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.squeezer {
|
||||
padding: 23px 23px 23px 80px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
color: #fff;
|
||||
content: '\f418';
|
||||
font-family: 'Genericons';
|
||||
font-size: 33px;
|
||||
height: 33px;
|
||||
left: 25px;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
top: calc( 50% - 22px );
|
||||
}
|
||||
@include breakpoint(large-phone){
|
||||
padding: 23px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color:#FFF;
|
||||
border-bottom:1px solid #D5E4BD;
|
||||
} a:hover{
|
||||
border-bottom:1px solid #F1F6E9;
|
||||
}
|
||||
}
|
||||
&.error .squeezer:before,
|
||||
&.jetpack-err .squeezer:before {
|
||||
content: '\f414';
|
||||
}
|
||||
}
|
||||
|
||||
.configure-module .jetpack-message {
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Uncategorized
|
||||
// ==========================================================================
|
||||
|
||||
@include breakpoint(large-phone){
|
||||
.wrap.inner.jp-support { // Used anywhere?
|
||||
.jp-support-column-left {
|
||||
width: 100%;
|
||||
|
||||
.widget-text {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.jp-support-column-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Custom Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
@media screen and (max-width: 515px) {
|
||||
.jp-frame {
|
||||
.header-nav {
|
||||
padding-bottom: 10px;
|
||||
|
||||
li {
|
||||
line-height: 30px;
|
||||
}
|
||||
.jetpack-logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.jetpack-modules {
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.jetpack-modules + .jetpack-modules {
|
||||
text-align: left;
|
||||
}
|
||||
.jetpack-modules:nth-child(4) {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
a {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // max 515px
|
||||
|
||||
// ==========================================================================
|
||||
// Fix notice in IE
|
||||
// ==========================================================================
|
||||
#ie-legacy-notice .dops-notice__content {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
// ==========================================================================
|
||||
// Settings
|
||||
// ==========================================================================
|
||||
|
||||
.page-content.configure {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.configure .frame {
|
||||
|
||||
&.top {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-top: em(20px);
|
||||
position: relative;
|
||||
top: auto;
|
||||
|
||||
&.fixed {
|
||||
background: #f9f9f9;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
padding-left: 160px;
|
||||
margin-top: -6px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 32px;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
box-shadow: 0 2px 2px -2px #eee;
|
||||
|
||||
@media (max-width: 782px) {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-top: em(20px);
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jp-frame-top-fixed .configure {
|
||||
padding-top: 94px;
|
||||
}
|
||||
|
||||
.filter-search {
|
||||
display: none;
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
@media (max-width: 782px) {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 530px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered.jetpack-modules {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
tr.jetpack-module {
|
||||
|
||||
th {
|
||||
border-left: 0;
|
||||
padding: 14px 4px 0;
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.genericon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
th,
|
||||
td {
|
||||
background: #f7fcfe;
|
||||
}
|
||||
th {
|
||||
border-left: 4px solid #2ea2cc;
|
||||
padding-left: 0px;
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
border-left: 4px solid #2ea2cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.unavailable {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.deprecated {
|
||||
span {
|
||||
color: #888;
|
||||
}
|
||||
.dep-msg {
|
||||
margin-right: 10px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
th,
|
||||
td {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
|
||||
}
|
||||
td {
|
||||
padding: 10px 10px 8px 14px;
|
||||
line-height: 25px;
|
||||
|
||||
&:first-child {
|
||||
border-left: 4px solid #fff;
|
||||
}
|
||||
.row-actions {
|
||||
float: right;
|
||||
padding: 0 0 1px;
|
||||
visibility: visible;
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 530px) {
|
||||
display: none;
|
||||
}
|
||||
@include breakpoint(tablet){
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
visibility: visible;
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.with-transparency tr.jetpack-module {
|
||||
|
||||
&:hover {
|
||||
td .row-actions span a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.unavailable {
|
||||
opacity: 0.3;
|
||||
}
|
||||
td .row-actions span a {
|
||||
opacity: 0;
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>thead>tr>th {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
@include breakpoint(tablet){
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
background: #fff;
|
||||
}
|
||||
#doaction {
|
||||
margin-top: 0;
|
||||
|
||||
@media (max-width: 782px) {
|
||||
padding: 10px 7px;
|
||||
}
|
||||
}
|
||||
.checkall {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.filter-search {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.genericon {
|
||||
color: #999;
|
||||
display: none;
|
||||
margin: 7px 3px 0;
|
||||
|
||||
@include breakpoint(desktop){
|
||||
display: inline-block;
|
||||
};
|
||||
}
|
||||
.med {
|
||||
width: 70px;
|
||||
}
|
||||
.sm {
|
||||
width: 30px;
|
||||
}
|
||||
@media (max-width: 782px) {
|
||||
.check-column {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fixed-top .check-column {
|
||||
padding: 8px 10px 0 10px;
|
||||
width: 2.2em;
|
||||
}
|
||||
.wrap {
|
||||
margin: 0;
|
||||
padding: 0 1.5em 1em;
|
||||
overflow: hidden;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.manage-left {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 63%;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
th {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.manage-right {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
width: 35%;
|
||||
z-index: 1;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #bbb;
|
||||
padding-top: 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
clear: left;
|
||||
}
|
||||
.bumper {
|
||||
margin-left: 33px;
|
||||
}
|
||||
&.show {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100000; // sits on top of wp-admin bar
|
||||
}
|
||||
.search-bar {
|
||||
margin-bottom: 18px;
|
||||
max-width: 300px;
|
||||
}
|
||||
p.search-box {
|
||||
float: none;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
input[type='search'] {
|
||||
padding: 0 8px;
|
||||
width: 90%;
|
||||
line-height: initial;
|
||||
|
||||
@media (max-width: 782px) {
|
||||
float: left;
|
||||
padding: 9px 8px;
|
||||
}
|
||||
}
|
||||
input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.button-group {
|
||||
.button {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.subsubsub {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
.current{
|
||||
padding:1px 5px;
|
||||
border-radius:2px;
|
||||
margin-left:-5px;
|
||||
background: #0D72B2;
|
||||
color: #fff;
|
||||
|
||||
.count{
|
||||
color: #BCD7E7;
|
||||
font-weight:200;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
min-width: 300px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 13;
|
||||
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.bumper {
|
||||
margin: 13px;
|
||||
}
|
||||
.navbar-form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
} // < 782
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
|
||||
// Fix to override particular wp-list-table changes in core - July 2015
|
||||
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
|
||||
padding: 11px 10px;
|
||||
display: block;
|
||||
}
|
||||
.manage-right.show .subsubsub li {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
} // < 782
|
||||
|
||||
@media (max-width: 650px) {
|
||||
|
||||
.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
|
||||
float: none;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
|
||||
// Hide activate / config links on really small screens. Users can still utlize these actions by tapping on the title of the module
|
||||
.table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
|
||||
display: block;
|
||||
}
|
||||
} // < 430
|
||||
Reference in New Issue
Block a user