first
This commit is contained in:
1375
wp-content/plugins/wp-smushit/_src/scss/modules/_admin.scss
Normal file
1375
wp-content/plugins/wp-smushit/_src/scss/modules/_admin.scss
Normal file
File diff suppressed because it is too large
Load Diff
72
wp-content/plugins/wp-smushit/_src/scss/modules/_cdn.scss
Normal file
72
wp-content/plugins/wp-smushit/_src/scss/modules/_cdn.scss
Normal file
@ -0,0 +1,72 @@
|
||||
@import "variables";
|
||||
|
||||
/**
|
||||
* CDN styles
|
||||
*
|
||||
* @since 3.0
|
||||
*/
|
||||
|
||||
@include body-class {
|
||||
|
||||
.sui-wrap {
|
||||
|
||||
.sui-box-settings-row .sui-box-settings-col-1 {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.wrap-smush-cdn {
|
||||
.sui-block-content-center p {
|
||||
max-width: 600px;
|
||||
margin: 20px auto 30px;
|
||||
}
|
||||
.sui-box-header .sui-actions-right .sui-icon-info{
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sui-cdn {
|
||||
form p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.wp-smush-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
|
||||
.sui-tooltip {
|
||||
line-height: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Filename Extensions Icons */
|
||||
.smush-filename-extension {
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
height: 30px;
|
||||
margin: 0 5px 0 0;
|
||||
width: 30px;
|
||||
|
||||
&.smush-extension-jpeg,
|
||||
&.smush-extension-jpg { background-color: #F7E100; }
|
||||
&.smush-extension-png { background-color: #FFB694; }
|
||||
&.smush-extension-gif { background-color: #72D5D4; }
|
||||
&.smush-extension-webp { background-color: #72ADD5; }
|
||||
&.smush-extension-svg { background-color: #88D572; }
|
||||
&.smush-extension-iframe {
|
||||
background-color: #8772D5;
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,338 @@
|
||||
/* ****************************************************************************
|
||||
* MODULE: Directory Smush styles.
|
||||
*/
|
||||
|
||||
@include body-class {
|
||||
|
||||
.wp-smush-progress-dialog,
|
||||
.wp-smush-list-dialog {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sui-directory.sui-message {
|
||||
text-align: left;
|
||||
|
||||
.sui-message-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sui-directory .smush-final-log {
|
||||
margin-top: 30px;
|
||||
|
||||
.sui-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.fancytree-container {
|
||||
color: #666;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.25px;
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0 solid transparent;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-left: 13px;
|
||||
width: 15px;
|
||||
|
||||
&:before {
|
||||
font-family: wpmudev-plugin-icons, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-exp-c span.fancytree-expander,
|
||||
.fancytree-exp-cd:not(.fancytree-unselectable) span.fancytree-expander,
|
||||
.fancytree-exp-cf:not(.fancytree-unselectable) span.fancytree-expander {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
// --- End nodes (use connectors instead of expanders)
|
||||
|
||||
.fancytree-expanded.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-expanded.fancytree-exp-nl span.fancytree-expander {
|
||||
width: 13px;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fancytree-exp-nl span.fancytree-expander:before {
|
||||
content: "\131";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span.fancytree-ico-c span.fancytree-expander:before {
|
||||
content: '';
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// --- Collapsed
|
||||
|
||||
.fancytree-exp-c span.fancytree-expander:before,
|
||||
.fancytree-exp-cl span.fancytree-expander:before,
|
||||
.fancytree-exp-cd span.fancytree-expander:before,
|
||||
.fancytree-exp-cdl span.fancytree-expander:before,
|
||||
.fancytree-exp-e span.fancytree-expander:before,
|
||||
.fancytree-exp-ed span.fancytree-expander:before,
|
||||
.fancytree-exp-el span.fancytree-expander:before,
|
||||
.fancytree-exp-edl span.fancytree-expander:before {
|
||||
color: #888888;
|
||||
content: "\2DC";
|
||||
}
|
||||
|
||||
// --- Expanded
|
||||
|
||||
.fancytree-exp-e span.fancytree-expander:before,
|
||||
.fancytree-exp-ed span.fancytree-expander:before,
|
||||
.fancytree-exp-el span.fancytree-expander:before,
|
||||
.fancytree-exp-edl span.fancytree-expander:before {
|
||||
content: "\131";
|
||||
}
|
||||
|
||||
// --- Unselectable
|
||||
|
||||
.fancytree-unselectable span.fancytree-expander:before {
|
||||
content: "9";
|
||||
}
|
||||
|
||||
/* Fade out expanders, when container is not hovered or active */
|
||||
.fancytree-fade-expander {
|
||||
span.fancytree-expander:before {
|
||||
transition: opacity 1.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover span.fancytree-expander:before,
|
||||
&.fancytree-treefocus span.fancytree-expander:before,
|
||||
.fancytree-treefocus span.fancytree-expander:before,
|
||||
[class*='fancytree-statusnode-'] span.fancytree-expander:before {
|
||||
transition: opacity 0.6s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-checkbox {
|
||||
margin-right: 5px;
|
||||
margin-left: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #e6e6e6;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
position: relative;
|
||||
transition: .2s;
|
||||
|
||||
@include icon( before, check );
|
||||
&:before {
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
border: 1px solid #17a8e3;
|
||||
background-color: #17a8e3;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fancytree-expanded span.fancytree-checkbox {
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
// Unselectable is dimmed, without hover effects
|
||||
.fancytree-unselectable {
|
||||
background-color: transparent !important;
|
||||
|
||||
// Fix for bug in library.
|
||||
&.fancytree-selected {
|
||||
margin-left: -9px;
|
||||
|
||||
span.fancytree-expander {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span.fancytree-checkbox {
|
||||
border: 1px solid #ddd;
|
||||
background-color: #e6e6e6;
|
||||
|
||||
&:before {
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-title {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-title {
|
||||
opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
|
||||
&:before {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-icon:before { // Default icon
|
||||
margin-left: 10px;
|
||||
font-family: wpmudev-plugin-icons, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #AAA;
|
||||
content: 'D';
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:before { // Collapsed folder (empty)
|
||||
content: 'D';
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:before { // Collapsed folder (not empty)
|
||||
content: 'D';
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:before { // Expanded folder
|
||||
content: '\BB';
|
||||
}
|
||||
|
||||
/* Folders */
|
||||
.fancytree-exp-n.fancytree-ico-ef span.fancytree-icon:before,
|
||||
.fancytree-exp-nl.fancytree-ico-ef span.fancytree-icon:before,
|
||||
.fancytree-ico-cf span.fancytree-icon:before { // Collapsed folder (empty)
|
||||
content: '\2D8';
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:before { // Collapsed folder (not empty)
|
||||
content: '\2D8';
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:before { // Expanded folder
|
||||
content: '\BB';
|
||||
}
|
||||
|
||||
// 'Loading' status overrides all others
|
||||
.fancytree-loading span.fancytree-expander:before,
|
||||
.fancytree-statusnode-loading span.fancytree-icon:before {
|
||||
content: 'N';
|
||||
display: inline-block;
|
||||
animation: spin 1.3s linear infinite;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
|
||||
span.fancytree-node {
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
min-height: 40px;
|
||||
|
||||
&:not(.fancytree-unselectable):hover {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
}
|
||||
span.fancytree-title {
|
||||
color: #666; // inherit doesn't work on IE
|
||||
cursor: pointer;
|
||||
display: inline-block; // Better alignment, when title contains <br>
|
||||
vertical-align: top;
|
||||
min-height: 20px;
|
||||
padding: 0 3px 0 3px; // Otherwise italic font will be outside right bounds
|
||||
margin: 0 0 0 5px;
|
||||
border: 1px solid transparent; // avoid jumping, when a border is added on hover
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
//color: @fancy-font-error-color;
|
||||
}
|
||||
|
||||
span.fancytree-expanded,
|
||||
span.fancytree-selected {
|
||||
border-radius: 4px;
|
||||
background-color: #F8F8F8;
|
||||
color: #17A8E3;
|
||||
|
||||
span.fancytree-title {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-selected {
|
||||
background-color: #E1F6FF;
|
||||
|
||||
span.fancytree-expander:before,
|
||||
span.fancytree-icon:before,
|
||||
span.fancytree-title {
|
||||
color: #17A8E3;
|
||||
}
|
||||
}
|
||||
|
||||
span.fancytree-focused {
|
||||
background-color: #e1e1e1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
216
wp-content/plugins/wp-smushit/_src/scss/modules/_media.scss
Normal file
216
wp-content/plugins/wp-smushit/_src/scss/modules/_media.scss
Normal file
@ -0,0 +1,216 @@
|
||||
/* ****************************************************************************
|
||||
* MEDIA AREA SCSS FILE
|
||||
*/
|
||||
@import "~@wpmudev/shared-ui/scss/functions";
|
||||
@import "~@wpmudev/shared-ui/scss/colors";
|
||||
@import "~@wpmudev/shared-ui/scss/variables";
|
||||
// Override body class
|
||||
$sui-version: 'smush-media';
|
||||
$sui-wrap-class: false;
|
||||
@import "~@wpmudev/shared-ui/scss/mixins";
|
||||
@import "~@wpmudev/shared-ui/scss/tooltips";
|
||||
|
||||
/* ****************************************************************************
|
||||
* MEDIA AREA STYLES
|
||||
*/
|
||||
|
||||
// Set column width.
|
||||
.manage-column.column-smushit {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
// Margin for buttons.
|
||||
.sui-smush-media {
|
||||
.button {
|
||||
margin-right: 5px;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Smush button loading icon.
|
||||
#ngg-listimages,
|
||||
.column-smushit {
|
||||
.spinner {
|
||||
float: none;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.smush-status-links{
|
||||
.smush-upgrade-link {
|
||||
color: #8D00B1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.smush-ignore-utm,.smush-revert-utm{
|
||||
display: block;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
float: none !important;;
|
||||
}
|
||||
.smush-cdn-notice {
|
||||
color: #50575E;
|
||||
a {
|
||||
color:#2271B1;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.smush-status {
|
||||
&.smush-warning,&.smush-ignored,&.smush-success{
|
||||
padding-left:17px;
|
||||
position: relative;
|
||||
&:before{
|
||||
content:"";
|
||||
background: url('../images/icon-warning.png' ) no-repeat 0 0;
|
||||
position: absolute;
|
||||
width:12px;
|
||||
height:12px;
|
||||
background-size: contain;
|
||||
left: 0;
|
||||
top:3px;
|
||||
}
|
||||
}
|
||||
&.smush-ignored{
|
||||
&:before{
|
||||
background-image: url('../images/icon-ignored.png' ) !important;
|
||||
}
|
||||
}
|
||||
&.smush-success{
|
||||
&:before{
|
||||
background-image: url('../images/icon-success.png' ) !important;
|
||||
}
|
||||
}
|
||||
.sui-icon-warning-media-lib {
|
||||
margin-right:4px;
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
}
|
||||
.column-smushit .smush-status{
|
||||
color:#50575E;
|
||||
}
|
||||
// Stats table.
|
||||
.sui-smush-media {
|
||||
table.wp-smush-stats-holder {
|
||||
width: 100%;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 4px;
|
||||
margin-top: 6px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
thead {
|
||||
th.smush-stats-header {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #E6E6E6 !important;
|
||||
color: #32373D;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.23px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
border: 1px solid #E6E6E6;
|
||||
}
|
||||
td {
|
||||
overflow-wrap: break-word;
|
||||
vertical-align: middle;
|
||||
padding: 8px 10px;
|
||||
color: #555555;
|
||||
font-size: 11px;
|
||||
letter-spacing: -0.21px;
|
||||
line-height: 16px;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
&:first-of-type {
|
||||
max-width: 110px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override !important set from WordPress.
|
||||
#the-list {
|
||||
.sui-smush-media {
|
||||
thead {
|
||||
th.smush-stats-header {
|
||||
border-bottom: 1px solid #E6E6E6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive table for list mode.
|
||||
@media screen and (max-width: 1024px) {
|
||||
.wp-list-table .smushit {
|
||||
table.wp-smush-stats-holder {
|
||||
th {
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
tr td {
|
||||
word-wrap: break-word;
|
||||
display: table-cell !important;
|
||||
&:first-child {
|
||||
border-right: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&:last-child {
|
||||
box-sizing: border-box;
|
||||
float: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NextGen Integration.
|
||||
.iedit .wp-smush-action,
|
||||
.iedit .smush-stats-details {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/*NextGen Gallery stats*/
|
||||
#ngg-listimages {
|
||||
table.wp-smush-stats-holder {
|
||||
table-layout: fixed;
|
||||
border: 1px solid lightgray;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #CECECE;
|
||||
}
|
||||
}
|
||||
.column-7 {
|
||||
width: 300px;
|
||||
}
|
||||
.spinner {
|
||||
width: auto;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/** NextGen Gallery tr height, to show the progress bar properly for alternate rows **/
|
||||
.alternate.iedit {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/** Allows to click on button, otherwise row-actions from NextGen interferes **/
|
||||
.wp-smush-nextgen-send {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
/* ****************************************************************************
|
||||
* MODULE: VARIABLES
|
||||
*/
|
||||
|
||||
$font--path: "../fonts" !default;
|
||||
$img--path: "../images" !default;
|
||||
|
||||
$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';
|
||||
|
||||
$summary-image: '#{$img--path}/smush-graphic-dashboard-summary.svg';
|
||||
|
||||
// Promo banners for free footer
|
||||
$cross-sell-1: 'hummingbird';
|
||||
$cross-sell-2: 'defender';
|
||||
$cross-sell-3: 'smartcrawl';
|
||||
|
||||
$main-color: #17A8E3;
|
||||
$text-color: #333;
|
||||
$border-radius: 4px;
|
||||
|
||||
$upgrade-image: '../../app/assets/images/hero@2x.png';
|
||||
$upgrade-image-mobile: '../../app/assets/images/hero.png';
|
||||
212
wp-content/plugins/wp-smushit/_src/scss/modules/_webp.scss
Normal file
212
wp-content/plugins/wp-smushit/_src/scss/modules/_webp.scss
Normal file
@ -0,0 +1,212 @@
|
||||
/**
|
||||
* Webp styles
|
||||
*
|
||||
* @since 3.8.0
|
||||
*/
|
||||
|
||||
@include body-class(true) {
|
||||
|
||||
#smush-box-webp-webp {
|
||||
|
||||
.smush-webp-supported-browser {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #F2F2F2;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#smush-box-webp-wizard {
|
||||
.sui-row-with-sidenav {
|
||||
margin-bottom: 0;
|
||||
|
||||
.sui-sidenav {
|
||||
padding: 30px;
|
||||
border-top-left-radius: $border-radius;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.smush-wizard-bar-subtitle {
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
color: #AAAAAA;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.smush-sidenav-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 33px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-steps-container {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
@include media(max-width, lg) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-bar-step {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: #AAAAAA;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
|
||||
.smush-wizard-bar-step-number {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
background-color: #F2F2F2;
|
||||
border: 1px solid #DDDDDD;
|
||||
|
||||
@include media(max-width, lg) {
|
||||
display: block;
|
||||
margin: 0 auto 5px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #DDDDDD;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: #333333;
|
||||
|
||||
.smush-wizard-bar-step-number {
|
||||
background-color: #FFFFFF;
|
||||
border-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.done .smush-wizard-bar-step-number {
|
||||
background-color: #1ABC9C;
|
||||
border-color: #1ABC9C;
|
||||
|
||||
.sui-icon-check::before {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include media(max-width, lg) {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
line {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
&.smush-svg-desktop {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-svg-mobile {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
display: block;
|
||||
margin-bottom: -14px;
|
||||
padding: 0 35px;
|
||||
|
||||
@include media(min-width, lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media(max-width, sm) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.smush-wizard-steps-content-wrapper {
|
||||
padding: 20px;
|
||||
|
||||
.smush-wizard-steps-content {
|
||||
padding: 0 70px;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.smush-step-indicator {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media(max-width, sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-wizard-step-1 {
|
||||
|
||||
.sui-box-selectors {
|
||||
padding-left: 115px;
|
||||
padding-right: 115px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.smush-wizard-step-2 {
|
||||
|
||||
.smush-wizard-rules-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sui-tabs-menu {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(min-width, sm) {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user