From 9cc3840de43922b2a42c7f96bedd1a74cae351f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Marques?= Date: Tue, 29 Aug 2017 10:10:09 +0100 Subject: [PATCH 1/4] Helper: convert filter markup into a list --- includes/admin/helper/views/html-main.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/includes/admin/helper/views/html-main.php b/includes/admin/helper/views/html-main.php index 77b5e4f7358..fd48362e4c6 100644 --- a/includes/admin/helper/views/html-main.php +++ b/includes/admin/helper/views/html-main.php @@ -12,7 +12,8 @@

Plugins screen.', 'woocommerce' ), admin_url( 'plugins.php' ) ); ?>

-
+
+ From 0585df9fe30f209cabfa8826d3b933421851d159 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Marques?= Date: Tue, 29 Aug 2017 10:11:23 +0100 Subject: [PATCH 2/4] Helper: additional styles for subscription filter --- assets/css/helper.css | 730 ++++++++++++++++++++++++++++++++++++++++- assets/css/helper.scss | 102 ++++-- 2 files changed, 796 insertions(+), 36 deletions(-) diff --git a/assets/css/helper.css b/assets/css/helper.css index 6ef4c5812f3..2aa91e6d4d8 100644 --- a/assets/css/helper.css +++ b/assets/css/helper.css @@ -1 +1,729 @@ -.wc-helper .nav-tab-wrapper{margin-bottom:22px}@media only screen and (max-width:784px){.wc-helper .nav-tab{max-width:40%;overflow:hidden;text-overflow:ellipsis}}.wc-helper .button,.wc-helper .button:active,.wc-helper .button:focus,.wc-helper .button:hover{background-color:#955a89;border-width:0;box-shadow:none;border-radius:3px;color:#fff;height:auto;padding:3px 14px;text-align:center;white-space:normal!important}@media only screen and (max-width:782px){.wc-helper .button,.wc-helper .button:active,.wc-helper .button:focus,.wc-helper .button:hover{line-height:2}}.wc-helper .button.button-secondary,.wc-helper .button:active.button-secondary,.wc-helper .button:focus.button-secondary,.wc-helper .button:hover.button-secondary{background-color:#e6e6e6;color:#3c3c3c;text-shadow:none}.wc-helper .button:hover{opacity:.8}.wc-helper .subscription-filter{color:#2e4453;font-size:13px;line-height:13px;margin:22px 0}.wc-helper .subscription-filter label{display:none;position:relative}.wc-helper .subscription-filter label .chevron{color:#e1e1e1;border-bottom-width:0;line-height:1;padding:0;position:absolute;top:12px;right:12px}.wc-helper .subscription-filter span{font-weight:700;padding-right:4px}.wc-helper .subscription-filter a{color:#0073aa;display:inline-block;padding:0 4px 0 8px;position:relative;text-decoration:none}.wc-helper .subscription-filter a:before{background-color:#979797;content:" ";position:absolute;top:0;left:0;bottom:0;width:1px}@media only screen and (max-width:600px){.wc-helper .subscription-filter{background-color:#fff;border:1px solid #e1e1e1;border-radius:2px;font-size:14px}.wc-helper .subscription-filter a,.wc-helper .subscription-filter label,.wc-helper .subscription-filter span{border-bottom:1px solid #e1e1e1;line-height:2;padding:8px 16px;margin:0}.wc-helper .subscription-filter label,.wc-helper .subscription-filter span.chevron{display:block}.wc-helper .subscription-filter a,.wc-helper .subscription-filter span{display:none}.wc-helper .subscription-filter a{cursor:pointer}.wc-helper .subscription-filter a::before{display:none}.wc-helper .subscription-filter span.chevron{-webkit-transform:rotateX(0);transform:rotateX(0)}.wc-helper .subscription-filter:focus a,.wc-helper .subscription-filter:focus span,.wc-helper .subscription-filter:hover a,.wc-helper .subscription-filter:hover span{display:block}.wc-helper .subscription-filter:focus span.chevron,.wc-helper .subscription-filter:hover span.chevron{-webkit-transform:rotateX(0);transform:rotateX(0)}}.wc-helper .subscriptions-header{margin:3em 0 0;position:relative;z-index:10}.wc-helper .subscriptions-header h2{display:inline-block;line-height:25px;margin:0 0 1.5em 0}.wc-helper .button-update,.wc-helper .button-update:hover{background-color:#e6e6e6;border-radius:4px;color:#333;font-weight:800;font-size:10px;line-height:20px;margin-left:6px;opacity:.75;padding:3px 7px;text-transform:uppercase}.wc-helper .button-update .dashicons,.wc-helper .button-update:hover .dashicons{font-size:12px;height:12px;width:12px;vertical-align:text-bottom}.wc-helper .button-update:hover{opacity:1}.wc-helper .user-info{background-color:#fff;border:1px solid #e1e1e1;border-radius:4px;font-size:12px;line-height:26px;position:absolute;top:-10px;right:0;-webkit-transition:all .1s ease-in;transition:all .1s ease-in}@media only screen and (max-width:600px){.wc-helper .user-info{position:relative;width:100%}}.wc-helper .user-info p{line-height:26px;margin:0}.wc-helper .user-info:hover{box-shadow:0 3px 5px rgba(0,0,0,.2)}.wc-helper .user-info header{color:#555;font-weight:600;padding:6px 14px;position:relative}.wc-helper .user-info header p{padding-right:26px}.wc-helper .user-info header .dashicons{opacity:.5;position:absolute;top:9px;right:14px}.wc-helper .user-info header:hover{cursor:pointer}.wc-helper .user-info section{display:none}.wc-helper .user-info section p{border-top:1px solid #e1e1e1;padding:6px 14px;text-align:center}.wc-helper .user-info section .actions{border-top:1px solid #e1e1e1;display:-webkit-box;display:-ms-flexbox;display:flex}.wc-helper .user-info section a{color:#a26897;cursor:pointer;font-weight:600;line-height:38px;padding:0 14px;text-align:center;text-decoration:none;white-space:nowrap;width:50%}.wc-helper .user-info section a .dashicons{margin-top:-3px;vertical-align:middle}.wc-helper .user-info section a:first-child{border-right:1px solid #e1e1e1}.wc-helper .user-info section a:hover{background-color:#a26897;color:#fff}.wc-helper .user-info section .avatar{border:1px solid #ece1ea;border-radius:50%;height:auto;margin-right:6px;width:24px;vertical-align:bottom}.wc-helper .user-info:active header .dashicons,.wc-helper .user-info:focus header .dashicons,.wc-helper .user-info:hover header .dashicons{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.wc-helper .user-info:active section,.wc-helper .user-info:focus section,.wc-helper .user-info:hover section{display:block}.wc-helper .alternate,.wc-helper .striped>tbody>:nth-child(odd),.wc-helper ul.striped>:nth-child(odd){background-color:#fff}.wc-helper .comment-ays,.wc-helper .feature-filter,.wc-helper .imgedit-group,.wc-helper .popular-tags,.wc-helper .stuffbox,.wc-helper .widgets-holder-wrap,.wc-helper .wp-editor-container,.wc-helper p.popular-tags,.wc-helper table.widefat{padding-top:5px}.wc-helper .widefat tfoot tr td,.wc-helper .widefat tfoot tr th,.wc-helper .widefat thead tr td,.wc-helper .widefat thead tr th{color:#32373c;padding-bottom:15px;padding-top:10px}.wc-helper .widefat td{padding-bottom:15px;padding-top:15px}.wc-helper .wp-list-table{border:0;box-shadow:none;padding-top:0!important;z-index:1}@media only screen and (max-width:782px){.wc-helper .button{font-size:11px}}.wc-helper .wp-list-table__row{background-color:transparent}.wc-helper .wp-list-table__row td{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;border:0;padding:16px 22px;vertical-align:middle}@media only screen and (max-width:782px){.wc-helper .wp-list-table__row td{padding:16px}}.wc-helper .wp-list-table__row td.color-bar{border-left:0}.wc-helper .wp-list-table__row.is-ext-header td{border-top:1px solid #e1e1e1}@media only screen and (max-width:782px){.wc-helper .wp-list-table__row.is-ext-header{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;width:100%}.wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-details{display:block;-webkit-box-flex:2;-ms-flex:2;flex:2}.wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-actions{display:block;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}}.wc-helper .wp-list-table__row:last-child td{border-bottom:24px solid #f1f1f1;box-shadow:inset 0 -1px 0 #e1e1e1}.wc-helper .wp-list-table__ext-details,.wc-helper .wp-list-table__ext-status,.wc-helper .wp-list-table__licence-container{padding-right:22px;position:relative;width:100%}.wc-helper .wp-list-table__ext-details::before,.wc-helper .wp-list-table__ext-status::before,.wc-helper .wp-list-table__licence-container::before{background-color:#e1e1e1;content:" ";position:absolute;top:0;bottom:0;left:0!important;width:1px!important}.wc-helper .wp-list-table__ext-details{display:-webkit-box;display:-ms-flexbox;display:flex}@media only screen and (max-width:782px){.wc-helper .wp-list-table__ext-details{display:table}}.wc-helper .wp-list-table__ext-title{color:#0073aa;font-size:18px;font-weight:784;width:60%}@media only screen and (max-width:782px){.wc-helper .wp-list-table__ext-title{margin-bottom:12px;width:100%}}@media only screen and (max-width:320px){.wc-helper .wp-list-table__ext-title{max-width:120px}}.wc-helper .wp-list-table__ext-description{color:#333;padding-left:12px;width:40%}@media only screen and (max-width:782px){.wc-helper .wp-list-table__ext-description{padding-left:0;width:100%}}.wc-helper .wp-list-table__ext-status{position:relative}.wc-helper .wp-list-table__ext-status.update-available:after{background-color:#ffc322;content:" ";position:absolute;top:0;left:0;bottom:0;width:5px}.wc-helper .wp-list-table__ext-status.expired:after{background-color:#b81c23;content:" ";position:absolute;top:0;left:0;bottom:0;width:5px}.wc-helper .wp-list-table__ext-status .dashicons-update{color:#ffc322}.wc-helper .wp-list-table__ext-status .dashicons-info{color:#b81c23}.wc-helper .wp-list-table__ext-status p{color:#333;margin:0}.wc-helper .wp-list-table__ext-status .dashicons{margin-right:5px}.wc-helper .wp-list-table__ext-actions{min-width:150px;position:relative;width:25%;text-align:right}.wc-helper .wp-list-table__ext-actions::after{background-color:#e1e1e1;content:" ";position:absolute;top:0;bottom:0;right:0;width:1px}.wc-helper .wp-list-table__ext-licence td,.wc-helper .wp-list-table__ext-updates td{position:relative}.wc-helper .wp-list-table__ext-licence td:before,.wc-helper .wp-list-table__ext-updates td:before{background-color:#e1e1e1;content:" ";height:1px;position:absolute;top:0;left:0;right:0}.wc-helper .wp-list-table__ext-licence td.wp-list-table__ext-status:before,.wc-helper .wp-list-table__ext-licence td.wp-list-table__licence-container:before,.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-status:before,.wc-helper .wp-list-table__ext-updates td.wp-list-table__licence-container:before{left:22px!important;width:auto!important}.wc-helper .wp-list-table__ext-licence td.wp-list-table__ext-actions:before,.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-actions:before{right:22px}@media only screen and (max-width:782px){.wc-helper .wp-list-table__ext-licence,.wc-helper .wp-list-table__ext-updates{display:-webkit-box;display:-ms-flexbox;display:flex}.wc-helper .wp-list-table__ext-licence .wp-list-table__ext-status,.wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status{-webkit-box-flex:2;-ms-flex:2;flex:2}.wc-helper .wp-list-table__ext-licence .wp-list-table__ext-status::before,.wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status::before{left:0!important;width:100%!important}.wc-helper .wp-list-table__ext-licence .wp-list-table__ext-actions,.wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.wc-helper .wp-list-table__ext-licence .wp-list-table__ext-actions::before,.wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions::before{left:0!important;right:0!important;width:100%!important}}.wc-helper .wp-list-table__licence-container{padding:0!important}.wc-helper .wp-list-table__licence-container::after{background-color:#e1e1e1;content:" ";position:absolute;top:0;bottom:0;right:0;width:1px}.wc-helper .wp-list-table__licence-form{display:-webkit-box;display:-ms-flexbox;display:flex;padding:16px 22px}@media only screen and (max-width:782px){.wc-helper .wp-list-table__licence-form{display:block}}.wc-helper .wp-list-table__licence-form::before{background-color:#e1e1e1;content:" ";height:1px;position:absolute;top:0;right:22px;left:22px}@media only screen and (max-width:782px){.wc-helper .wp-list-table__licence-form::before{right:0;left:0}}.wc-helper .wp-list-table__licence-form div{padding-right:16px;vertical-align:middle}@media only screen and (max-width:782px){.wc-helper .wp-list-table__licence-form div{padding:0}}.wc-helper .wp-list-table__licence-form p{margin:0!important}.wc-helper .wp-list-table__licence-label label{color:#23282d;font-weight:600;line-height:30px}.wc-helper .wp-list-table__licence-field input{height:32px}@media only screen and (max-width:480px){.wc-helper .wp-list-table__licence-field input{width:100%}}@media only screen and (max-width:782px){.wc-helper .wp-list-table__licence-field{padding:8px 0 16px!important}}.wc-helper .wp-list-table__licence-actions{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;padding-right:0!important}.wc-helper .wp-list-table__licence-actions .button{margin-right:8px}.wc-helper .wp-list-table__licence-actions .button-secondary{float:right;margin:0 0 0 8px}@media only screen and (max-width:480px){.wc-helper .wp-list-table__licence-actions{text-align:right}}.wc-helper td.color-bar{border-left:solid 4px transparent}.wc-helper td.color-bar.expired{border-left-color:#b81c23}.wc-helper td.color-bar.expiring{border-left-color:orange}.wc-helper td.color-bar.update-available{border-left-color:#8fae1b}.wc-helper td.color-bar.expiring.update-available{border-left-color:#8fae1b}.wc-helper .connect-wrapper{background-color:#fff;border:1px solid #e5e5e5;margin-bottom:25px;overflow:auto}.wc-helper .connected{display:-webkit-box;display:-ms-flexbox;display:flex}.wc-helper .connected .user-info{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;width:100%;vertical-align:middle}.wc-helper .connected img{border:1px solid #e5e5e5;height:34px;width:34px}.wc-helper .connected .buttons{padding:20px;white-space:nowrap}.wc-helper .connected p{-webkit-box-flex:2;-ms-flex:2;flex:2;margin:10px 0 0 20px}.wc-helper .connected .chevron{display:none}.wc-helper .connected .chevron:hover{color:#955a89;cursor:pointer}@media only screen and (max-width:784px){.wc-helper .connected{display:block}.wc-helper .connected strong{display:block;overflow:hidden;text-overflow:ellipsis}.wc-helper .connected p{margin:0;overflow:hidden;text-overflow:ellipsis;width:80%}.wc-helper .connected .user-info{padding-right:0;width:auto}.wc-helper .connected .avatar{margin-right:12px}.wc-helper .connected .chevron{color:#e1e1e1;display:block;margin:10px;-webkit-transform:rotateX(0);transform:rotateX(0)}.wc-helper .connected .buttons{display:none;border-top:1px solid #e1e1e1;padding:10px 20px}.wc-helper .connected .buttons.active{display:block}}.wc-helper .start-container{background-color:#fff;border-left:4px solid #cc99c2;padding:45px 20px 20px 30px;position:relative;overflow:hidden}.wc-helper .start-container h2,.wc-helper .start-container p{max-width:800px}.wc-helper .start-container::before{color:#eee2ec;content:"\e01C";display:block;font-family:WooCommerce;font-size:192px;line-height:1;position:absolute;top:65%;right:-3%;text-align:center;width:1em}.wc-helper .start-container h2{font-size:24px;line-height:29px;position:relative}.wc-helper .start-container p{font-size:16px;margin-bottom:30px;position:relative}.wc-helper .button-primary{height:37px;line-height:37px;min-width:124px;padding:0 13px}.wc-helper .button-primary:active,.wc-helper .button-primary:focus,.wc-helper .button-primary:hover{padding:0 13px}.form-toggle__wrapper{position:relative}.form-toggle__wrapper label{cursor:default}.form-toggle{cursor:pointer;display:block;position:absolute;top:0;bottom:-1px;left:0;right:0;text-align:left;text-indent:-100000px;z-index:2}.form-toggle:focus{box-shadow:none}.form-toggle.disabled{cursor:default}.form-toggle__switch{-ms-flex-item-align:start;align-self:flex-start;background:#c8d7e1;border-radius:12px;box-sizing:border-box;display:inline-block;padding:2px;outline:0;position:relative;width:40px;height:24px;-webkit-transition:all .4s ease,box-shadow 0s;transition:all .4s ease,box-shadow 0s;vertical-align:middle}.form-toggle__switch:after,.form-toggle__switch:before{content:"";display:block;position:relative;width:20px;height:20px}.form-toggle__switch:after{border-radius:50%;background:#fff;left:0;-webkit-transition:all .2s ease;transition:all .2s ease}.form-toggle__switch:before{display:none}.accessible-focus .form-toggle__switch:focus{box-shadow:0 0 0 2px #955a89}.form-toggle__label{vertical-align:bottom;z-index:1}.form-toggle__label .form-toggle__label-content{color:#87a6bc;-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;font-size:13px;line-height:16px;margin-left:12px;margin-right:8px;vertical-align:top;text-transform:uppercase}@media only screen and (max-width:480px){.form-toggle__label .form-toggle__label-content{display:none}}.accessible-focus .form-toggle:focus+.form-toggle__label .form-toggle__switch{box-shadow:0 0 0 2px #955a89}.accessible-focus .form-toggle:focus:checked+.form-toggle__label .form-toggle__switch{box-shadow:0 0 0 2px #bb77ae}.form-toggle+.form-toggle__label .form-toggle__switch{background:#a8bece}.form-toggle:not(:disabled)+.form-toggle__label:hover .form-toggle__switch{background:#c8d7e1}.form-toggle.active+.form-toggle__label .form-toggle__switch{background:#955a89}.form-toggle.active+.form-toggle__label .form-toggle__switch:after{left:8px}.form-toggle.active+.form-toggle__label:hover .form-toggle__switch{background:#bb77ae}.form-toggle.disabled+label.form-toggle__label span.form-toggle__switch{opacity:.25}.form-toggle.is-toggling+.form-toggle__label .form-toggle__switch{background:#955a89}.form-toggle.is-toggling:checked+.form-toggle__label .form-toggle__switch{background:#c8d7e1}.form-toggle.is-compact+.form-toggle__label .form-toggle__switch{border-radius:8px;width:24px;height:16px}.form-toggle.is-compact+.form-toggle__label .form-toggle__switch:after,.form-toggle.is-compact+.form-toggle__label .form-toggle__switch:before{height:12px;width:12px}.form-toggle.is-compact:checked+.form-toggle__label .form-toggle__switch:after{left:8px} \ No newline at end of file +/*------------------------------------------------------------------------------ + General table styling +------------------------------------------------------------------------------*/ +/*------------------------------------------------------------------------------ + Tab navigation +------------------------------------------------------------------------------*/ +.wc-helper .nav-tab-wrapper { + margin-bottom: 22px; } + +@media only screen and (max-width: 784px) { + .wc-helper .nav-tab { + max-width: 40%; + overflow: hidden; + text-overflow: ellipsis; } } + +/*------------------------------------------------------------------------------ + Buttons +------------------------------------------------------------------------------*/ +.wc-helper .button, .wc-helper .button:hover, .wc-helper .button:focus, .wc-helper .button:active { + background-color: #955a89; + border-width: 0; + box-shadow: none; + border-radius: 3px; + color: #fff; + height: auto; + padding: 3px 14px; + text-align: center; + white-space: normal !important; } + @media only screen and (max-width: 782px) { + .wc-helper .button, .wc-helper .button:hover, .wc-helper .button:focus, .wc-helper .button:active { + line-height: 2; } } + .wc-helper .button.button-secondary, .wc-helper .button:hover.button-secondary, .wc-helper .button:focus.button-secondary, .wc-helper .button:active.button-secondary { + background-color: #e6e6e6; + color: #3c3c3c; + text-shadow: none; } + +.wc-helper .button:hover { + opacity: 0.8; } + +.wc-helper .subscription-filter { + color: #2E4453; + font-size: 13px; + line-height: 13px; + margin: 22px 0; } + .wc-helper .subscription-filter label { + display: none; + position: relative; } + .wc-helper .subscription-filter label .chevron { + color: #E1E1E1; + border-bottom-width: 0; + line-height: 1; + padding: 0; + position: absolute; + top: 10px; + right: 14px; } + .wc-helper .subscription-filter li { + color: #0073AA; + display: inline-block; + padding: 0 4px 0 8px; + position: relative; } + .wc-helper .subscription-filter li::before { + background-color: #979797; + content: " "; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 1px; } + .wc-helper .subscription-filter li:first-of-type::before { + display: none; } + .wc-helper .subscription-filter a { + color: #0073AA; + text-decoration: none; } + .wc-helper .subscription-filter a.current { + color: #000; + font-weight: 600; } + .wc-helper .subscription-filter .count { + color: #555d66; + font-weight: 400; } + @media only screen and (max-width: 600px) { + .wc-helper .subscription-filter { + background-color: #fff; + border: 1px solid #E1E1E1; + border-radius: 4px; + font-size: 14px; } + .wc-helper .subscription-filter label, + .wc-helper .subscription-filter span, + .wc-helper .subscription-filter li { + line-height: 21px; + padding: 8px 16px; + margin: 0; } + .wc-helper .subscription-filter label:last-child, + .wc-helper .subscription-filter span:last-child, + .wc-helper .subscription-filter li:last-child { + border-bottom: none; } + .wc-helper .subscription-filter span, + .wc-helper .subscription-filter li { + border-bottom: 1px solid #E1E1E1; } + .wc-helper .subscription-filter label, + .wc-helper .subscription-filter span.chevron { + display: block; } + .wc-helper .subscription-filter span, + .wc-helper .subscription-filter li { + display: none; } + .wc-helper .subscription-filter li::before { + display: none; } + .wc-helper .subscription-filter a { + cursor: pointer; } + .wc-helper .subscription-filter span.chevron { + color: #555555; + opacity: 0.5; + transform: rotateX(180deg); } + .wc-helper .subscription-filter:focus, .wc-helper .subscription-filter:hover { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } + .wc-helper .subscription-filter:focus label, .wc-helper .subscription-filter:hover label { + border-bottom: 1px solid #E1E1E1; } + .wc-helper .subscription-filter:focus span, + .wc-helper .subscription-filter:focus li, .wc-helper .subscription-filter:hover span, + .wc-helper .subscription-filter:hover li { + display: block; } + .wc-helper .subscription-filter:focus span.chevron, .wc-helper .subscription-filter:hover span.chevron { + transform: rotateX(0deg); } } + +/*------------------------------------------------------------------------------ + Subscriptons Header +------------------------------------------------------------------------------*/ +.wc-helper .subscriptions-header { + margin: 3em 0 0; + position: relative; + z-index: 10; } + .wc-helper .subscriptions-header h2 { + display: inline-block; + line-height: 25px; + margin: 0 0 1.5em 0; } + +.wc-helper .button-update, .wc-helper .button-update:hover { + background-color: #E6E6E6; + border-radius: 4px; + color: #333; + font-weight: 800; + font-size: 10px; + line-height: 20px; + margin-left: 6px; + opacity: 0.75; + padding: 3px 7px; + text-transform: uppercase; } + .wc-helper .button-update .dashicons, .wc-helper .button-update:hover .dashicons { + font-size: 12px; + height: 12px; + width: 12px; + vertical-align: text-bottom; } + +.wc-helper .button-update:hover { + opacity: 1; } + +.wc-helper .user-info { + background-color: #fff; + border: 1px solid #E1E1E1; + border-radius: 4px; + font-size: 12px; + line-height: 26px; + position: absolute; + top: -10px; + right: 0; + transition: all .1s ease-in; } + @media only screen and (max-width: 600px) { + .wc-helper .user-info { + position: relative; + width: 100%; } } + .wc-helper .user-info p { + line-height: 26px; + margin: 0; } + .wc-helper .user-info:hover { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } + .wc-helper .user-info header { + color: #555555; + font-weight: 600; + padding: 6px 14px; + position: relative; } + .wc-helper .user-info header p { + padding-right: 26px; } + .wc-helper .user-info header .dashicons { + opacity: 0.5; + position: absolute; + top: 9px; + right: 14px; } + .wc-helper .user-info header:hover { + cursor: pointer; } + .wc-helper .user-info section { + display: none; } + .wc-helper .user-info section p { + border-top: 1px solid #E1E1E1; + padding: 6px 14px; + text-align: center; } + .wc-helper .user-info section .actions { + border-top: 1px solid #E1E1E1; + display: flex; } + .wc-helper .user-info section a { + color: #A26897; + cursor: pointer; + font-weight: 600; + line-height: 38px; + padding: 0 14px; + text-align: center; + text-decoration: none; + white-space: nowrap; + width: 50%; } + .wc-helper .user-info section a .dashicons { + margin-top: -3px; + vertical-align: middle; } + .wc-helper .user-info section a:first-child { + border-right: 1px solid #E1E1E1; } + .wc-helper .user-info section a:hover { + background-color: #A26897; + color: #fff; } + .wc-helper .user-info section .avatar { + border: 1px solid #ECE1EA; + border-radius: 50%; + height: auto; + margin-right: 6px; + width: 24px; + vertical-align: bottom; } + +.wc-helper .user-info:hover header .dashicons, +.wc-helper .user-info:focus header .dashicons, +.wc-helper .user-info:active header .dashicons { + transform: rotateX(180deg); } + +.wc-helper .user-info:hover section, +.wc-helper .user-info:focus section, +.wc-helper .user-info:active section { + display: block; } + +/*------------------------------------------------------------------------------ + Subscripton table +------------------------------------------------------------------------------*/ +.wc-helper .striped > tbody > :nth-child(odd), +.wc-helper ul.striped > :nth-child(odd), +.wc-helper .alternate { + background-color: #ffffff; } + +.wc-helper table.widefat, +.wc-helper .wp-editor-container, +.wc-helper .stuffbox, +.wc-helper p.popular-tags, +.wc-helper .widgets-holder-wrap, +.wc-helper .popular-tags, +.wc-helper .feature-filter, +.wc-helper .imgedit-group, +.wc-helper .comment-ays { + padding-top: 5px; } + +.wc-helper .widefat thead tr th, +.wc-helper .widefat thead tr td, +.wc-helper .widefat tfoot tr th, +.wc-helper .widefat tfoot tr td { + color: #32373c; + padding-bottom: 15px; + padding-top: 10px; } + +.wc-helper .widefat td { + padding-bottom: 15px; + padding-top: 15px; } + +.wc-helper .wp-list-table { + border: 0; + box-shadow: none; + padding-top: 0 !important; + z-index: 1; } + +@media only screen and (max-width: 782px) { + .wc-helper .button { + font-size: 11px; } } + +.wc-helper .wp-list-table__row { + background-color: transparent; } + .wc-helper .wp-list-table__row td { + align-items: center; + background-color: #fff; + border: 0px; + padding: 16px 22px; + vertical-align: middle; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__row td { + padding: 16px; } } + .wc-helper .wp-list-table__row td.color-bar { + border-left: 0; } + .wc-helper .wp-list-table__row.is-ext-header td { + border-top: 1px solid #E1E1E1; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__row.is-ext-header { + display: inline-flex; + flex-flow: row wrap; + width: 100%; } + .wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-details { + display: block; + flex: 2; } + .wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-actions { + display: block; + flex: 1; + min-width: 0; } } + .wc-helper .wp-list-table__row:last-child td { + border-bottom: 24px solid #F1F1F1; + box-shadow: inset 0 -1px 0 #E1E1E1; } + +.wc-helper .wp-list-table__ext-details, +.wc-helper .wp-list-table__ext-status, +.wc-helper .wp-list-table__licence-container { + padding-right: 22px; + position: relative; + width: 100%; } + .wc-helper .wp-list-table__ext-details::before, + .wc-helper .wp-list-table__ext-status::before, + .wc-helper .wp-list-table__licence-container::before { + background-color: #E1E1E1; + content: " "; + position: absolute; + top: 0; + bottom: 0; + left: 0 !important; + width: 1px !important; } + +.wc-helper .wp-list-table__ext-details { + display: flex; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__ext-details { + display: table; } } + +.wc-helper .wp-list-table__ext-title { + color: #0073AA; + font-size: 18px; + font-weight: 600; + width: 60%; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__ext-title { + margin-bottom: 12px; + width: 100%; } } + @media only screen and (max-width: 320px) { + .wc-helper .wp-list-table__ext-title { + max-width: 120px; } } + +.wc-helper .wp-list-table__ext-description { + color: #333; + padding-left: 12px; + width: 40%; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__ext-description { + padding-left: 0; + width: 100%; } } + +.wc-helper .wp-list-table__ext-status { + position: relative; } + .wc-helper .wp-list-table__ext-status.update-available::after { + background-color: #FFC322; + content: " "; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 5px; } + .wc-helper .wp-list-table__ext-status.expired::after { + background-color: #B81C23; + content: " "; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 5px; } + .wc-helper .wp-list-table__ext-status .dashicons-update { + color: #FFC322; } + .wc-helper .wp-list-table__ext-status .dashicons-info { + color: #B81C23; } + .wc-helper .wp-list-table__ext-status p { + color: #333333; + margin: 0; } + .wc-helper .wp-list-table__ext-status .dashicons { + margin-right: 5px; } + +.wc-helper .wp-list-table__ext-actions { + min-width: 150px; + position: relative; + width: 25%; + text-align: right; } + .wc-helper .wp-list-table__ext-actions::after { + background-color: #E1E1E1; + content: " "; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 1px; } + +.wc-helper .wp-list-table__ext-updates td, +.wc-helper .wp-list-table__ext-licence td { + position: relative; } + .wc-helper .wp-list-table__ext-updates td::before, + .wc-helper .wp-list-table__ext-licence td::before { + background-color: #E1E1E1; + content: " "; + height: 1px; + position: absolute; + top: 0; + left: 0; + right: 0; } + +.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-status::before, +.wc-helper .wp-list-table__ext-updates td.wp-list-table__licence-container::before, +.wc-helper .wp-list-table__ext-licence td.wp-list-table__ext-status::before, +.wc-helper .wp-list-table__ext-licence td.wp-list-table__licence-container::before { + left: 22px !important; + width: auto !important; } + +.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-actions::before, +.wc-helper .wp-list-table__ext-licence td.wp-list-table__ext-actions::before { + right: 22px; } + +@media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__ext-updates, + .wc-helper .wp-list-table__ext-licence { + display: flex; } + .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status, + .wc-helper .wp-list-table__ext-licence .wp-list-table__ext-status { + flex: 2; } + .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status::before, + .wc-helper .wp-list-table__ext-licence .wp-list-table__ext-status::before { + left: 0 !important; + width: 100% !important; } + .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions, + .wc-helper .wp-list-table__ext-licence .wp-list-table__ext-actions { + flex: 1; + min-width: 0; } + .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions::before, + .wc-helper .wp-list-table__ext-licence .wp-list-table__ext-actions::before { + left: 0 !important; + right: 0 !important; + width: 100% !important; } } + +.wc-helper .wp-list-table__licence-container { + padding: 0 !important; } + .wc-helper .wp-list-table__licence-container::after { + background-color: #E1E1E1; + content: " "; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 1px; } + +.wc-helper .wp-list-table__licence-form { + display: flex; + padding: 16px 22px; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__licence-form { + display: block; } } + .wc-helper .wp-list-table__licence-form::before { + background-color: #E1E1E1; + content: " "; + height: 1px; + position: absolute; + top: 0; + right: 22px; + left: 22px; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__licence-form::before { + right: 0; + left: 0; } } + .wc-helper .wp-list-table__licence-form div { + padding-right: 16px; + vertical-align: middle; } + @media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__licence-form div { + padding: 0; } } + .wc-helper .wp-list-table__licence-form p { + margin: 0 !important; } + +.wc-helper .wp-list-table__licence-label label { + color: #23282d; + font-weight: 600; + line-height: 30px; } + +.wc-helper .wp-list-table__licence-field input { + height: 32px; } + @media only screen and (max-width: 480px) { + .wc-helper .wp-list-table__licence-field input { + width: 100%; } } + +@media only screen and (max-width: 782px) { + .wc-helper .wp-list-table__licence-field { + padding: 8px 0 16px !important; } } + +.wc-helper .wp-list-table__licence-actions { + flex-grow: 2; + padding-right: 0 !important; } + .wc-helper .wp-list-table__licence-actions .button { + margin-right: 8px; } + .wc-helper .wp-list-table__licence-actions .button-secondary { + float: right; + margin: 0 0 0 8px; } + @media only screen and (max-width: 480px) { + .wc-helper .wp-list-table__licence-actions { + text-align: right; } } + +/*------------------------------------------------------------------------------ + Expired notification bar +------------------------------------------------------------------------------*/ +.wc-helper td.color-bar { + border-left: solid 4px transparent; } + +.wc-helper td.color-bar.expired { + border-left-color: #B81C23; } + +.wc-helper td.color-bar.expiring { + border-left-color: orange; } + +.wc-helper td.color-bar.update-available { + border-left-color: #8FAE1B; } + +.wc-helper td.color-bar.expiring.update-available { + border-left-color: #8FAE1B; } + +/*------------------------------------------------------------------------------ + Connected account table +------------------------------------------------------------------------------*/ +.wc-helper .connect-wrapper { + background-color: #fff; + border: 1px solid #e5e5e5; + margin-bottom: 25px; + overflow: auto; } + +.wc-helper .connected { + display: flex; } + .wc-helper .connected .user-info { + display: flex; + padding: 20px; + width: 100%; + vertical-align: middle; } + .wc-helper .connected img { + border: 1px solid #e5e5e5; + height: 34px; + width: 34px; } + .wc-helper .connected .buttons { + padding: 20px; + white-space: nowrap; } + .wc-helper .connected p { + flex: 2; + margin: 10px 0 0 20px; } + .wc-helper .connected .chevron { + display: none; } + .wc-helper .connected .chevron:hover { + color: #955a89; + cursor: pointer; } + @media only screen and (max-width: 784px) { + .wc-helper .connected { + display: block; } + .wc-helper .connected strong { + display: block; + overflow: hidden; + text-overflow: ellipsis; } + .wc-helper .connected p { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + width: 80%; } + .wc-helper .connected .user-info { + padding-right: 0; + width: auto; } + .wc-helper .connected .avatar { + margin-right: 12px; } + .wc-helper .connected .chevron { + color: #E1E1E1; + display: block; + margin: 10px; + transform: rotateX(0deg); } + .wc-helper .connected .buttons { + display: none; + border-top: 1px solid #E1E1E1; + padding: 10px 20px; } + .wc-helper .connected .buttons.active { + display: block; } } + +/*------------------------------------------------------------------------------ + Initial connection screen +------------------------------------------------------------------------------*/ +.wc-helper .start-container { + background-color: #ffffff; + border-left: 4px solid #cc99c2; + padding: 45px 20px 20px 30px; + position: relative; + overflow: hidden; } + .wc-helper .start-container h2, + .wc-helper .start-container p { + max-width: 800px; } + +.wc-helper .start-container::before { + color: #eee2ec; + content: "\e01C"; + display: block; + font-family: WooCommerce; + font-size: 192px; + line-height: 1; + position: absolute; + top: 65%; + right: -3%; + text-align: center; + width: 1em; } + +.wc-helper .start-container h2 { + font-size: 24px; + line-height: 29px; + position: relative; } + +.wc-helper .start-container p { + font-size: 16px; + margin-bottom: 30px; + position: relative; } + +.wc-helper .button-primary { + height: 37px; + line-height: 37px; + min-width: 124px; + padding: 0 13px; } + .wc-helper .button-primary:hover, .wc-helper .button-primary:active, .wc-helper .button-primary:focus { + padding: 0 13px; } + +.form-toggle__wrapper { + position: relative; } + .form-toggle__wrapper label { + cursor: default; } + +.form-toggle { + cursor: pointer; + display: block; + position: absolute; + top: 0; + bottom: -1px; + left: 0; + right: 0; + text-align: left; + text-indent: -100000px; + z-index: 2; } + .form-toggle:focus { + box-shadow: none; } + .form-toggle.disabled { + cursor: default; } + +.form-toggle__switch { + align-self: flex-start; + background: #c8d7e1; + border-radius: 12px; + box-sizing: border-box; + display: inline-block; + padding: 2px; + outline: 0; + position: relative; + width: 40px; + height: 24px; + transition: all .4s ease, box-shadow 0s; + vertical-align: middle; } + .form-toggle__switch::before, .form-toggle__switch::after { + content: ""; + display: block; + position: relative; + width: 20px; + height: 20px; } + .form-toggle__switch::after { + border-radius: 50%; + background: #ffffff; + left: 0; + transition: all .2s ease; } + .form-toggle__switch::before { + display: none; } + .accessible-focus .form-toggle__switch:focus { + box-shadow: 0 0 0 2px #955a89; } + +.form-toggle__label { + vertical-align: bottom; + z-index: 1; } + .form-toggle__label .form-toggle__label-content { + color: #87a6bc; + flex: 0 1 100%; + font-size: 13px; + line-height: 16px; + margin-left: 12px; + margin-right: 8px; + vertical-align: top; + text-transform: uppercase; } + @media only screen and (max-width: 480px) { + .form-toggle__label .form-toggle__label-content { + display: none; } } + +.accessible-focus .form-toggle:focus + .form-toggle__label .form-toggle__switch { + box-shadow: 0 0 0 2px #955a89; } + +.accessible-focus .form-toggle:focus:checked + .form-toggle__label .form-toggle__switch { + box-shadow: 0 0 0 2px #bb77ae; } + +.form-toggle + .form-toggle__label .form-toggle__switch { + background: #a8bece; } + +.form-toggle:not(:disabled) + .form-toggle__label:hover .form-toggle__switch { + background: #c8d7e1; } + +.form-toggle.active + .form-toggle__label .form-toggle__switch { + background: #955a89; } + .form-toggle.active + .form-toggle__label .form-toggle__switch::after { + left: 8px; } + +.form-toggle.active + .form-toggle__label:hover .form-toggle__switch { + background: #bb77ae; } + +.form-toggle.disabled + label.form-toggle__label span.form-toggle__switch { + opacity: 0.25; } + +.form-toggle.is-toggling + .form-toggle__label .form-toggle__switch { + background: #955a89; } + +.form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch { + background: #c8d7e1; } + +.form-toggle.is-compact + .form-toggle__label .form-toggle__switch { + border-radius: 8px; + width: 24px; + height: 16px; } + .form-toggle.is-compact + .form-toggle__label .form-toggle__switch::before, .form-toggle.is-compact + .form-toggle__label .form-toggle__switch::after { + height: 12px; + width: 12px; } + +.form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch::after { + left: 8px; } diff --git a/assets/css/helper.scss b/assets/css/helper.scss index 7e798c795cd..f05b53d1225 100644 --- a/assets/css/helper.scss +++ b/assets/css/helper.scss @@ -88,24 +88,17 @@ $color_button_secondary: $woo_pink2; line-height: 1; padding: 0; position: absolute; - top: 12px; - right: 12px; + top: 10px; + right: 14px; } } - - span { - font-weight: bold; - padding-right: 4px; - } - - a { + li { color: #0073AA; display: inline-block; padding: 0 4px 0 8px; position: relative; - text-decoration: none; - &:before { + &::before { background-color: #979797; content: " "; position: absolute; @@ -114,21 +107,50 @@ $color_button_secondary: $woo_pink2; bottom: 0; width: 1px; } + + &:first-of-type { + &::before { + display: none; + } + } + } + + a{ + color: #0073AA; + text-decoration: none; + + &.current{ + color: #000; + font-weight: 600; + } + } + + .count{ + color: #555d66; + font-weight: 400; } @media only screen and (max-width : 600px) { background-color: #fff; border: 1px solid #E1E1E1; - border-radius: 2px; + border-radius: 4px; font-size: 14px; label, span, - a { - border-bottom: 1px solid #E1E1E1; - line-height: 2; + li { + line-height: 21px; padding: 8px 16px; margin: 0; + + &:last-child { + border-bottom: none; + } + } + + span, + li { + border-bottom: 1px solid #E1E1E1; } label, @@ -137,26 +159,36 @@ $color_button_secondary: $woo_pink2; } span, - a { + li{ display: none; } - a { - cursor: pointer; - + li{ &::before { display: none; } } + a { + cursor: pointer; + } + span.chevron { - transform: rotateX(0deg); + color: #555555; + opacity: 0.5; + transform: rotateX(180deg); } &:focus, &:hover { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + + label{ + border-bottom: 1px solid #E1E1E1; + } + span, - a { + li{ display: block; } @@ -447,7 +479,7 @@ $color_button_secondary: $woo_pink2; .wp-list-table__ext-title { color: $color_text_blue; font-size: 18px; - font-weight: 784; + font-weight: 600; width: 60%; @media only screen and (max-width : 782px) { @@ -472,7 +504,7 @@ $color_button_secondary: $woo_pink2; .wp-list-table__ext-status { position: relative; - &.update-available:after { + &.update-available::after { background-color: #FFC322; content: " "; position: absolute; @@ -482,7 +514,7 @@ $color_button_secondary: $woo_pink2; width: 5px; } - &.expired:after { + &.expired::after { background-color: #B81C23; content: " "; position: absolute; @@ -532,7 +564,7 @@ $color_button_secondary: $woo_pink2; td { position: relative; - &:before { + &::before { background-color: #E1E1E1; content: " "; height: 1px; @@ -545,13 +577,13 @@ $color_button_secondary: $woo_pink2; td.wp-list-table__ext-status, td.wp-list-table__licence-container { - &:before { + &::before { left: 22px !important; width: auto !important; } } - td.wp-list-table__ext-actions:before { + td.wp-list-table__ext-actions::before { right: 22px; } @@ -896,8 +928,8 @@ $color_button_secondary: $woo_pink2; transition: all .4s ease, box-shadow 0s; vertical-align: middle; - &:before, - &:after { + &::before, + &::after { content: ""; display: block; position: relative; @@ -905,14 +937,14 @@ $color_button_secondary: $woo_pink2; height: 20px; } - &:after { + &::after { border-radius: 50%; background: $white; left: 0; transition: all .2s ease; } - &:before { + &::before { display: none; } @@ -967,7 +999,7 @@ $color_button_secondary: $woo_pink2; + .form-toggle__label .form-toggle__switch { background: $woo_pink1; - &:after { + &::after { left: 8px; } } @@ -1002,15 +1034,15 @@ $color_button_secondary: $woo_pink2; width: 24px; height: 16px; - &:before, - &:after { + &::before, + &::after { height: 12px; width: 12px; } } &:checked { + .form-toggle__label .form-toggle__switch { - &:after { + &::after { left: 8px; } } From 09ddc431712ef013d99d6f2becdf5fabe55c34ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Marques?= Date: Tue, 29 Aug 2017 10:52:57 +0100 Subject: [PATCH 3/4] Helper: removes brackets from update counter indicator --- includes/admin/helper/views/html-section-nav.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/admin/helper/views/html-section-nav.php b/includes/admin/helper/views/html-section-nav.php index 6b785a1384c..65ecd685067 100644 --- a/includes/admin/helper/views/html-section-nav.php +++ b/includes/admin/helper/views/html-section-nav.php @@ -5,7 +5,7 @@ (%d)', $count, number_format_i18n( $count ) ); + $count_html = sprintf( '%d', $count, number_format_i18n( $count ) ); if ( ! $count ) { $count_html = ''; } From bb7691255df1c6c0ab118b033f076ec7f1bf4e99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Marques?= Date: Tue, 29 Aug 2017 10:53:48 +0100 Subject: [PATCH 4/4] Helper: adds styles for update counter --- assets/css/helper.css | 12 ++++++++++++ assets/css/helper.scss | 14 ++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/assets/css/helper.css b/assets/css/helper.css index 2aa91e6d4d8..453b221e2c5 100644 --- a/assets/css/helper.css +++ b/assets/css/helper.css @@ -7,6 +7,18 @@ .wc-helper .nav-tab-wrapper { margin-bottom: 22px; } +.wc-helper .update-count { + background-color: #d54e21; + border-radius: 10px; + color: #fff; + display: inline-block; + font-size: 9px; + font-weight: 600; + line-height: 17px; + margin: 1px 0 0 2px; + padding: 0 6px; + vertical-align: text-top; } + @media only screen and (max-width: 784px) { .wc-helper .nav-tab { max-width: 40%; diff --git a/assets/css/helper.scss b/assets/css/helper.scss index f05b53d1225..827231763d6 100644 --- a/assets/css/helper.scss +++ b/assets/css/helper.scss @@ -30,6 +30,20 @@ $color_button_secondary: $woo_pink2; .nav-tab-wrapper { margin-bottom: 22px; } + + .update-count { + background-color: #d54e21; + border-radius: 10px; + color: #fff; + display: inline-block; + font-size: 9px; + font-weight: 600; + line-height: 17px; + margin: 1px 0 0 2px; + padding: 0 6px; + vertical-align: text-top; + } + @media only screen and (max-width : 784px) { .nav-tab { max-width: 40%;