From bda2c23e044e52ce29316dd60cb3de329da147f8 Mon Sep 17 00:00:00 2001 From: brandon Date: Sat, 9 Sep 2023 21:54:17 +0800 Subject: [PATCH] Replace PNG arrows with CSS only arrows and run SCSS (#7161) --- ui/styles/dist/pods-wizard.css | 2 +- ui/styles/src/base/_wizard.scss | 64 +++++++++++++++++++++------------ 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/ui/styles/dist/pods-wizard.css b/ui/styles/dist/pods-wizard.css index ac569afe87..6c121fa98e 100644 --- a/ui/styles/dist/pods-wizard.css +++ b/ui/styles/dist/pods-wizard.css @@ -1 +1 @@ -#pods-wizard-box{width:782px;color:#555;margin:20px}#pods-wizard-box.pods-wizard-steps-1 #pods-wizard-heading ul li{width:780px}#pods-wizard-box.pods-wizard-steps-2 #pods-wizard-heading ul li{width:390px}#pods-wizard-box.pods-wizard-steps-3 #pods-wizard-heading ul li{width:260px}#pods-wizard-box.pods-wizard-steps-4 #pods-wizard-heading ul li{width:195px}#pods-wizard-box.pods-wizard-steps-5 #pods-wizard-heading ul li{width:156px}#pods-wizard-box #pods-wizard-heading ul{margin:0;padding:0}#pods-wizard-box #pods-wizard-heading ul li{list-style:none;display:block;float:left;height:30px;padding-top:5px;color:#ababab;margin-bottom:0;font:18px "Garamond, Georgia";position:relative;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;background:linear-gradient(#f9f9f9, #ededed)}#pods-wizard-box #pods-wizard-heading ul li i{display:block;width:11px;height:35px;position:absolute;top:0;left:0;background:url(../../images/arrow_next.png)}#pods-wizard-box #pods-wizard-heading ul li span{display:inline-block;margin:0 5px 0 20px;width:25px;height:25px;line-height:25px;text-align:center;background:#ababab;color:#f2f2f2;box-shadow:none;font-size:20px;font-weight:bold;-webkit-border-top-left-radius:30px;-webkit-border-top-right-radius:30px;-webkit-border-bottom-right-radius:30px;-webkit-border-bottom-left-radius:30px;-moz-border-radius-topleft:30px;-moz-border-radius-topright:30px;-moz-border-radius-bottomright:30px;-moz-border-radius-bottomleft:30px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-right-radius:30px;border-bottom-left-radius:30px}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-current{color:#fff;border-bottom:1px solid #6e6e6e;border-top:1px solid gray;text-shadow:1px 1px 1px rgba(0,0,0,.2);background:linear-gradient(#808080, #6e6e6e)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-current span{text-shadow:none;background:#fff;color:#6f6f6f;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);box-shadow:1px 1px 2px rgba(0,0,0,.2)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-current+li>i{background:url(../../images/arrow_current.png)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete{color:#6f9472;border-bottom:1px solid #bbddbd;background:linear-gradient(#d4f4d6, #bbddbd)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete+li>i{background:url(../../images/arrow_complete.png)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete+li.pods-wizard-menu-complete>i{background:url(../../images/arrow_complete_previous.png)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete span{background:#6f9472;color:#caebcc}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete em{display:block;top:10px;right:5px;background:url(../../images/tick.png) no-repeat right center;width:17px;height:17px;position:absolute}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete:last-child em{right:15px}#pods-wizard-box #pods-wizard-heading ul li:first-child{border-left:1px solid #dfdfdf;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:8px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-top-left-radius:8px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-heading ul li:first-child i{background:none}#pods-wizard-box #pods-wizard-heading ul li:last-child{border-right:1px solid #dfdfdf;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-top-right-radius:8px;border-bottom-right-radius:0;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-main{clear:both;overflow:auto}#pods-wizard-box #pods-wizard-main p{font-size:13px;line-height:22px}#pods-wizard-box #pods-wizard-main p.padded{padding:0 20px 20px}#pods-wizard-box #pods-wizard-main #pods-wizard-choices{margin:15px 20px 25px 20px}#pods-wizard-box #pods-wizard-main .pods-advanced-toggle{display:inline-block;text-decoration:underline;padding-left:15px}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content .pods-package-import-group .pods-field-option-group{padding-top:0}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content .pods-package-import-group .pods-field-option-group p{margin-top:0}#pods-wizard-box #pods-wizard-main .stuffbox{margin:15px 15px 0 15px;padding:0 10px 10px 10px}#pods-wizard-box #pods-wizard-main .stuffbox h3{font-size:15px;font-weight:normal;line-height:1;padding:7px 10px;font-family:Georgia,"Times New Roman","Bitstream Charter",Times,serif}#pods-wizard-box #pods-wizard-main .stuffbox .inside{padding:0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container{background:#fcfcfc;border-bottom:1px solid #ccd0d4;padding:15px 0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container label{padding-top:4px;float:left;width:30%;max-width:150px;margin:0 2%}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field-option{padding:0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field-option__field{width:100%;max-width:25rem}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container input[type=text],#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container select,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container textarea,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field.pods-boolean,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-pick-values,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-form-ui-field-type-file,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-slider-field{width:100%}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content h3{margin:1.33em 20px;font-size:1.35em}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content h4{margin:1.33em 20px;font-size:1.2em}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content ul.normal{margin:15px 20px;list-style:circle}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content ul.normal li{margin:0 0 8px 30px;padding-left:4px;line-height:22px;font-size:14px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel{display:none;border-left:1px solid #dfdfdf;border-right:1px solid #dfdfdf;padding-bottom:25px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel:first-child{display:block}#pods-wizard-box #pods-wizard-main .pods-wizard-panel a.button-primary,#pods-wizard-box #pods-wizard-main .pods-wizard-panel a.button-secondary{padding:8px 15px;border-radius:14px 14px 14px 14px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content{padding:20px;margin-bottom:25px;background:#fff}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content.pods-wizard-grey{background:#f9f9f9}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content p{margin-top:0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content ul.normal{margin:15px 20px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content ul.normal li{margin:0 0 8px 30px;padding-left:4px;line-height:22px;font-size:14px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table{width:100%}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table th,#pods-wizard-box #pods-wizard-main .pods-wizard-panel table td{height:47px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table th{text-align:left;background:#f9f9f9;text-transform:uppercase;padding-left:53px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td{font-size:20px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-right{text-align:right}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name{padding-left:20px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name em{color:#777;font-style:normal;font-size:14px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name .pods-wizard-info{float:right;text-align:right;font-size:12px;padding-right:15px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td img{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-complete td{background:#e6f9e6;color:#6f9472;border-top:1px solid #fff}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-complete td i{display:inline-block;width:17px;height:17px;background:url(../../images/tick.png)}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td{background:#ffffe0;border-top:1px solid #e7dd5f;border-bottom:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td:first-child{border-left:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td:last-child{border-right:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td{background:#ffebe8;border-top:1px solid #c00;border-bottom:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td:first-child{border-left:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td:last-child{border-right:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-active td{background:#fff4e0;border-top:1px solid #fff;border-bottom:1px solid #dfdfdf;color:#eba600}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-active td img{display:inline}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-pending td{border-top:1px solid #fff;border-bottom:1px solid #dfdfdf;color:#ababab}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options{text-align:center}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-options-list{display:flex;justify-content:space-evenly}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-options-list .pods-wizard-option:first-child{margin-right:0 !important}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option{width:290px;display:inline-block;vertical-align:top}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option:first-child{margin-right:40px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a{min-height:140px;padding:10px 0;display:block;background:#f9f9f9;position:relative;text-decoration:none;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 4px rgba(0,0,0,.3);box-shadow:0px 0px 4px rgba(0,0,0,.3)}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a h2{color:#21759b;font-weight:bold;font-size:1.5em;padding-right:0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a p{font-style:normal;font-size:14px;color:#555;margin:7px;line-height:17px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:hover{background:#feffe0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:hover h2{color:#d54e21}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a span{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a.pods-wizard-option-active{background:#feffe0;color:#d54e21}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a.pods-wizard-option-active span{width:290px;height:30px;background:#d54e21;display:block;position:absolute;bottom:0;left:0;text-align:center;color:#fff;font:13px/30px bold Garamond,Georgia;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:visited p{color:#555}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option p{font-size:12px;line-height:17px;font-style:italic}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option p em{margin:0;padding:0}#pods-wizard-box #pods-wizard-actions{height:35px;border:1px solid #dfdfdf;position:relative;clear:both;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;background:linear-gradient(#ededed, #f9f9f9)}#pods-wizard-box #pods-wizard-actions.pods-wizard-button-interface{height:45px}#pods-wizard-box #pods-wizard-actions.pods-wizard-button-interface #pods-wizard-toolbar{height:45px;padding:0 15px;display:flex;justify-content:space-between;align-content:center;align-items:center}#pods-wizard-box #pods-wizard-actions input.button,#pods-wizard-box #pods-wizard-actions a.button{position:absolute;top:2px}#pods-wizard-box #pods-wizard-actions input.button.button-primary{right:2px}#pods-wizard-box #pods-wizard-actions input.button.button-secondary{left:2px}#pods-wizard-box #pods-wizard-actions a.button{display:block;height:35px;width:110px;line-height:35px;text-align:center;font-weight:bold;font-size:15px;padding:0;border:none !important}#pods-wizard-box #pods-wizard-actions a.button.button-primary{right:0;color:#fff;background:linear-gradient(#278ab8, #22789f);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-actions a.button.button-primary:hover{background:#22789f}#pods-wizard-box #pods-wizard-actions a.button.button-secondary{left:0;color:#7b7b7b;background:linear-gradient(#dfdfdf, #b2b2b2);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-actions a.button.button-secondary:hover{background:#b2b2b2}#pods-wizard-box #pods-wizard-actions #pods-wizard-finished{display:none;height:35px;line-height:35px;text-align:center;padding-right:142px;text-transform:uppercase;color:#fff;font-weight:bold;text-shadow:1px 1px 1px rgba(0,0,0,.2);background:linear-gradient(#808080, #6e6e6e);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-actions #pods-wizard-next.finished{width:150px}#pods-wizard-box.pods-wizard-hide-first #pods-wizard-main{border-bottom:1px solid #dfdfdf;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box.pods-wizard-hide-first #pods-wizard-actions{display:none} +#pods-wizard-box{width:782px;color:#555;margin:20px}#pods-wizard-box.pods-wizard-steps-1 #pods-wizard-heading ul li{width:780px}#pods-wizard-box.pods-wizard-steps-2 #pods-wizard-heading ul li{width:390px}#pods-wizard-box.pods-wizard-steps-3 #pods-wizard-heading ul li{width:260px}#pods-wizard-box.pods-wizard-steps-4 #pods-wizard-heading ul li{width:195px}#pods-wizard-box.pods-wizard-steps-5 #pods-wizard-heading ul li{width:156px}#pods-wizard-box #pods-wizard-heading ul{margin:0;padding:0}#pods-wizard-box #pods-wizard-heading ul li{list-style:none;display:block;float:left;height:37px;padding-top:6px;box-sizing:border-box;color:#ababab;margin-bottom:0;font:18px "Garamond, Georgia";position:relative;background:linear-gradient(#f9f9f9, #ededed)}#pods-wizard-box #pods-wizard-heading ul li i{position:absolute;top:0}#pods-wizard-box #pods-wizard-heading ul li:last-child i{border:solid rgba(0,0,0,0);border-color:rgba(194,225,245,0);border-left-color:#6e6e6e;border-width:18.5px;border-left-width:12px}#pods-wizard-box #pods-wizard-heading ul li:last-child.pods-wizard-menu-current i{border-left-color:#bbddbd}#pods-wizard-box #pods-wizard-heading ul li span{display:inline-block;margin:0 5px 0 20px;width:25px;height:25px;line-height:25px;text-align:center;background:#ababab;color:#f2f2f2;box-shadow:none;font-size:20px;font-weight:bold;-webkit-border-top-left-radius:30px;-webkit-border-top-right-radius:30px;-webkit-border-bottom-right-radius:30px;-webkit-border-bottom-left-radius:30px;-moz-border-radius-topleft:30px;-moz-border-radius-topright:30px;-moz-border-radius-bottomright:30px;-moz-border-radius-bottomleft:30px;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-right-radius:30px;border-bottom-left-radius:30px}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-current{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.2);background:#6e6e6e}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-current span{text-shadow:none;background:#fff;color:#6f6f6f;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);box-shadow:1px 1px 2px rgba(0,0,0,.2)}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete{color:#6f9472;border-bottom:1px solid #bbddbd;background:#bbddbd}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete span{background:#6f9472;color:#caebcc}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete em{display:block;top:10px;right:5px;background:url(../../images/tick.png) no-repeat right center;width:17px;height:17px;position:absolute}#pods-wizard-box #pods-wizard-heading ul li.pods-wizard-menu-complete:last-child em{right:15px}#pods-wizard-box #pods-wizard-heading ul li:first-child{border-left:1px solid #dfdfdf;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:8px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-top-left-radius:8px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-heading ul li:first-child i{background:none}#pods-wizard-box #pods-wizard-heading ul li:last-child{border-right:1px solid #dfdfdf;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-top-right-radius:8px;border-bottom-right-radius:0;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-main{clear:both;overflow:auto}#pods-wizard-box #pods-wizard-main p{font-size:13px;line-height:22px}#pods-wizard-box #pods-wizard-main p.padded{padding:0 20px 20px}#pods-wizard-box #pods-wizard-main #pods-wizard-choices{margin:15px 20px 25px 20px}#pods-wizard-box #pods-wizard-main .pods-advanced-toggle{display:inline-block;text-decoration:underline;padding-left:15px}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content .pods-package-import-group .pods-field-option-group{padding-top:0}#pods-wizard-box #pods-wizard-main .pods-wizard-option-content .pods-package-import-group .pods-field-option-group p{margin-top:0}#pods-wizard-box #pods-wizard-main .stuffbox{margin:15px 15px 0 15px;padding:0 10px 10px 10px}#pods-wizard-box #pods-wizard-main .stuffbox h3{font-size:15px;font-weight:normal;line-height:1;padding:7px 10px;font-family:Georgia,"Times New Roman","Bitstream Charter",Times,serif}#pods-wizard-box #pods-wizard-main .stuffbox .inside{padding:0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container{background:#fcfcfc;border-bottom:1px solid #ccd0d4;padding:15px 0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container label{padding-top:4px;float:left;width:30%;max-width:150px;margin:0 2%}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field-option{padding:0}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field-option__field{width:100%;max-width:25rem}#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container input[type=text],#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container select,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container textarea,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-field.pods-boolean,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-pick-values,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-form-ui-field-type-file,#pods-wizard-box #pods-wizard-main .stuffbox .inside .pods-field__container .pods-slider-field{width:100%}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content h3{margin:1.33em 20px;font-size:1.35em}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content h4{margin:1.33em 20px;font-size:1.2em}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content ul.normal{margin:15px 20px;list-style:circle}#pods-wizard-box #pods-wizard-main .stuffbox .inside div.pods-wizard-content ul.normal li{margin:0 0 8px 30px;padding-left:4px;line-height:22px;font-size:14px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel{display:none;border-left:1px solid #dfdfdf;border-right:1px solid #dfdfdf;padding-bottom:25px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel:first-child{display:block}#pods-wizard-box #pods-wizard-main .pods-wizard-panel a.button-primary,#pods-wizard-box #pods-wizard-main .pods-wizard-panel a.button-secondary{padding:8px 15px;border-radius:14px 14px 14px 14px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content{padding:20px;margin-bottom:25px;background:#fff}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content.pods-wizard-grey{background:#f9f9f9}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content p{margin-top:0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content ul.normal{margin:15px 20px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel .pods-wizard-content ul.normal li{margin:0 0 8px 30px;padding-left:4px;line-height:22px;font-size:14px;list-style:circle}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table{width:100%}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table th,#pods-wizard-box #pods-wizard-main .pods-wizard-panel table td{height:47px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table th{text-align:left;background:#f9f9f9;text-transform:uppercase;padding-left:53px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td{font-size:20px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-right{text-align:right}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name{padding-left:20px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name em{color:#777;font-style:normal;font-size:14px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td.pods-wizard-name .pods-wizard-info{float:right;text-align:right;font-size:12px;padding-right:15px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr td img{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-complete td{background:#e6f9e6;color:#6f9472;border-top:1px solid #fff}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-complete td i{display:inline-block;width:17px;height:17px;background:url(../../images/tick.png)}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td{background:#ffffe0;border-top:1px solid #e7dd5f;border-bottom:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td:first-child{border-left:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-warning td:last-child{border-right:1px solid #e7dd5f}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td{background:#ffebe8;border-top:1px solid #c00;border-bottom:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td:first-child{border-left:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-error td:last-child{border-right:1px solid #c00}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-active td{background:#fff4e0;border-top:1px solid #fff;border-bottom:1px solid #dfdfdf;color:#eba600}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-active td img{display:inline}#pods-wizard-box #pods-wizard-main .pods-wizard-panel table tr.pods-wizard-table-pending td{border-top:1px solid #fff;border-bottom:1px solid #dfdfdf;color:#ababab}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options{text-align:center}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-options-list{display:flex;justify-content:space-evenly}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-options-list .pods-wizard-option:first-child{margin-right:0 !important}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option{width:290px;display:inline-block;vertical-align:top}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option:first-child{margin-right:40px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a{min-height:140px;padding:10px 0;display:block;background:#f9f9f9;position:relative;text-decoration:none;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 4px rgba(0,0,0,.3);box-shadow:0px 0px 4px rgba(0,0,0,.3)}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a h2{color:#21759b;font-weight:bold;font-size:1.5em;padding-right:0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a p{font-style:normal;font-size:14px;color:#555;margin:7px;line-height:17px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:hover{background:#feffe0}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:hover h2{color:#d54e21}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a span{display:none}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a.pods-wizard-option-active{background:#feffe0;color:#d54e21}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a.pods-wizard-option-active span{width:290px;height:30px;background:#d54e21;display:block;position:absolute;bottom:0;left:0;text-align:center;color:#fff;font:13px/30px bold Garamond,Georgia;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option a:visited p{color:#555}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option p{font-size:12px;line-height:17px;font-style:italic}#pods-wizard-box #pods-wizard-main .pods-wizard-panel #pods-wizard-options .pods-wizard-option p em{margin:0;padding:0}#pods-wizard-box #pods-wizard-actions{height:35px;border:1px solid #dfdfdf;position:relative;clear:both;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;background:linear-gradient(#ededed, #f9f9f9)}#pods-wizard-box #pods-wizard-actions.pods-wizard-button-interface{height:45px}#pods-wizard-box #pods-wizard-actions.pods-wizard-button-interface #pods-wizard-toolbar{height:45px;padding:0 15px;display:flex;justify-content:space-between;align-content:center;align-items:center}#pods-wizard-box #pods-wizard-actions input.button,#pods-wizard-box #pods-wizard-actions a.button{position:absolute;top:2px}#pods-wizard-box #pods-wizard-actions input.button.button-primary{right:2px}#pods-wizard-box #pods-wizard-actions input.button.button-secondary{left:2px}#pods-wizard-box #pods-wizard-actions a.button{display:block;height:35px;width:110px;line-height:35px;text-align:center;font-weight:bold;font-size:15px;padding:0;border:none !important}#pods-wizard-box #pods-wizard-actions a.button.button-primary{right:0;color:#fff;background:linear-gradient(#278ab8, #22789f);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:0}#pods-wizard-box #pods-wizard-actions a.button.button-primary:hover{background:#22789f}#pods-wizard-box #pods-wizard-actions a.button.button-secondary{left:0;color:#7b7b7b;background:linear-gradient(#dfdfdf, #b2b2b2);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-actions a.button.button-secondary:hover{background:#b2b2b2}#pods-wizard-box #pods-wizard-actions #pods-wizard-finished{display:none;height:35px;line-height:35px;text-align:center;padding-right:142px;text-transform:uppercase;color:#fff;font-weight:bold;text-shadow:1px 1px 1px rgba(0,0,0,.2);background:linear-gradient(#808080, #6e6e6e);-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box #pods-wizard-actions #pods-wizard-next.finished{width:150px}#pods-wizard-box.pods-wizard-hide-first #pods-wizard-main{border-bottom:1px solid #dfdfdf;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-topleft:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}#pods-wizard-box.pods-wizard-hide-first #pods-wizard-actions{display:none} diff --git a/ui/styles/src/base/_wizard.scss b/ui/styles/src/base/_wizard.scss index c993526cd2..e1b3075fd8 100644 --- a/ui/styles/src/base/_wizard.scss +++ b/ui/styles/src/base/_wizard.scss @@ -26,23 +26,41 @@ list-style:none; display: block; float: left; - height: 30px; - padding-top: 5px; + /* #7161 */ + height: 37px; + padding-top: 6px; + box-sizing: border-box; color: #ababab; margin-bottom: 0; font: 18px 'Garamond, Georgia'; position: relative; - border-top: 1px solid $grey-border; - border-bottom: 1px solid $grey-border; + // border-top: 1px solid $grey-border; + // border-bottom: 1px solid $grey-border; @include vertical-gradient(#f9f9f9, #ededed); i { - display: block; - width: 11px; - height: 35px; + // display: block; + // width: 11px; + // height: 35px; position: absolute; top: 0; - left: 0; - background: url(#{$ImagesPath}/arrow_next.png); + // left: 0; + // background: url(#{$ImagesPath}/arrow_next.png); + } + &:last-child i { + /* + #7161 + Replace png arrow with CSS only arrow. + So for step 1 and step 2, we just need to update border color, + doing this we can remove the need of two PNG arrow iamges. + */ + border: solid transparent; + border-color: rgba(194, 225, 245, 0); + border-left-color: #6e6e6e; + border-width: 18.5px; + border-left-width: 12px; + } + &:last-child.pods-wizard-menu-current i { + border-left-color: #bbddbd; } span { display: inline-block; @@ -60,30 +78,32 @@ } &.pods-wizard-menu-current { color: #fff; - border-bottom: 1px solid #6e6e6e; - border-top: 1px solid #808080; + // border-bottom: 1px solid #6e6e6e; + // border-top: 1px solid #808080; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); - @include vertical-gradient(#808080, #6e6e6e); + background: #6e6e6e; + // @include vertical-gradient(#808080, #6e6e6e); span { text-shadow: none; background: #fff; color: #6f6f6f; @include box-shadow(1px, 1px, 2px, 0.2); } - &+ li > i { - background: url(#{$ImagesPath}/arrow_current.png); - } + // &+ li > i { + // background: url(#{$ImagesPath}/arrow_current.png); + // } } &.pods-wizard-menu-complete { color: $green-dark; border-bottom: 1px solid #bbddbd; - @include vertical-gradient(#d4f4d6, #bbddbd); - &+ li > i { - background: url(#{$ImagesPath}/arrow_complete.png); - } - &+ li.pods-wizard-menu-complete > i { - background: url(#{$ImagesPath}/arrow_complete_previous.png); - } + background: #bbddbd; + // @include vertical-gradient(#d4f4d6, #bbddbd); + // &+ li > i { + // background: url(#{$ImagesPath}/arrow_complete.png); + // } + // &+ li.pods-wizard-menu-complete > i { + // background: url(#{$ImagesPath}/arrow_complete_previous.png); + // } span { background: $green-dark; color: $green-mid;