Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating the setup Wizard #895

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Updating the setup Wizard #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
45fb754
Initial commit
BrunoPavlinic98 Oct 25, 2024
20dc68e
Generate minified JS and CSS files
BrunoPavlinic98 Oct 25, 2024
16d314f
Merge remote-tracking branch 'origin/main' into 857-setup-wizard-update
BrunoPavlinic98 Nov 4, 2024
e989a6e
Enhanced select
BrunoPavlinic98 Nov 6, 2024
87c668c
Merge remote-tracking branch 'origin/main' into 857-setup-wizard-update
BrunoPavlinic98 Nov 6, 2024
99ea730
Small fix
BrunoPavlinic98 Nov 6, 2024
163315c
Test
BrunoPavlinic98 Nov 6, 2024
57868a3
Generate minified JS and CSS files
BrunoPavlinic98 Nov 6, 2024
884931d
Test 2
BrunoPavlinic98 Nov 6, 2024
d9d5f33
Generate minified JS and CSS files
BrunoPavlinic98 Nov 6, 2024
fa15e02
Merge branch 'main' into 857-setup-wizard-update
alexmigf Nov 22, 2024
fa334ce
Styling adjustments
Terminator-Barbapapa Nov 29, 2024
965a739
Generate minified JS and CSS files
Terminator-Barbapapa Nov 29, 2024
d4099cf
Merge branch 'main' into 857-setup-wizard-update
alexmigf Dec 4, 2024
387f14c
Merge branch 'main' into 857-setup-wizard-update
alexmigf Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 83 additions & 33 deletions assets/css/setup-wizard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,11 @@ body.wpo-wcpdf-setup {
background-attachment: fixed!important;
font-size: 14px;
line-height: 22px;
background: #771787;
background: -webkit-linear-gradient(10deg, #3c105d, #771787);
background: -o-linear-gradient(10deg, #3c105d, #771787);
background: linear-gradient(100deg, #3c105d, #771787);
background: #fcfbfe;
}

body.wpo-wcpdf-setup a:link, body.wpo-wcpdf-setup a:visited {
color: #771787;
color: #6e1edc;
text-decoration: none;
}

Expand All @@ -34,12 +31,17 @@ body.wpo-wcpdf-setup a:hover {
body.wpo-wcpdf-setup input:focus,
body.wpo-wcpdf-setup textarea:focus,
body.wpo-wcpdf-setup select:focus {
border-color: #239bb9!important;
box-shadow: 0 0 0 1px #239bb9!important;
border-color: #6e1edc!important;
box-shadow: 0 0 0 1px #6e1edc!important;
outline: 2px solid transparent!important;
color: black!important;
}

body.wpo-wcpdf-setup .select2-search__field:focus {
border-color: none!important;
box-shadow: none!important;
}

body.wpo-wcpdf-setup select:hover {
color: #666!important;
}
Expand All @@ -64,16 +66,18 @@ body.wpo-wcpdf-setup form {
background-color: #fff;
padding: 0;
overflow: hidden;
box-shadow: 0 20px 50px 20px rgba(0,0,0,0.2);
border-radius: 20px;
box-shadow: 10px 10px 30px rgba(43, 12, 86, 0.1), -10px -10px 30px rgba(43, 12, 86, 0.02);
}

.wpo-plugin-title {
width: 100%;
padding: 40px 0 30px 0;
padding: 50px 0 30px 0;
margin: 0;
text-align: center;
display: block;
font-weight: 200;
font-size: 1.5em;
}

.wpo-progress-bar {
Expand All @@ -93,6 +97,10 @@ body.wpo-wcpdf-setup form {
margin: 0;
}

.wpo-progress-bar li a {
box-shadow: none;
}

.wpo-progress-bar li:first-child {
width: calc( ( 12.5% - ( 12.5% - 35px ) ) / 2 + 12.5% );
}
Expand All @@ -114,7 +122,7 @@ body.wpo-wcpdf-setup form {

.wpo-progress-bar li.active::after,
.wpo-progress-bar li.completed::after {
background-color: #771787;
background-color: #6e1edc;
}

.wpo-progress-marker {
Expand All @@ -131,6 +139,7 @@ body.wpo-wcpdf-setup form {

.wpo-progress-bar {
counter-reset: section;
padding-bottom: 25px;
}

.wpo-progress-marker::before {
Expand All @@ -144,20 +153,20 @@ body.wpo-wcpdf-setup form {
}

li.active .wpo-progress-marker::before {
color: #771787;
color: #6e1edc;
}

li.completed .wpo-progress-marker::before {
color: #fff;
}

.wpo-progress-bar li.completed .wpo-progress-marker {
background-color: #771787;
border-color: #771787;
background-color: #6e1edc;
border-color: #6e1edc;
}

.wpo-progress-bar li.active .wpo-progress-marker {
border-color: #771787;
border-color: #6e1edc;
background-color: #fff;
}

Expand All @@ -168,22 +177,36 @@ li.completed .wpo-progress-marker::before {
}

.wpo-step-description {
width: 50%;
width: 40%;
float: left;
padding: 50px;
padding: 30px 40px 30px 50px;
box-sizing: border-box;
}

.wpo-step-description h2 {
color: #444;
font-family: serif;
letter-spacing: -0.25px;
font-size: 2.4em;
font-style: italic;
line-height: 0.9;
}

.wpo-step-description p {
font-size: 16px;
}

.wpo-step-description ul {
padding-left: 16px;
}

.wpo-setup-input {
width: 50%;
width: 60%;
float: left;
padding: 50px 50px 50px 0;
padding: 30px 50px;
box-sizing: border-box;
position: relative;
border-left: 1px solid #eaeaea;
}

.wpo-setup-input select {
Expand Down Expand Up @@ -212,33 +235,40 @@ li.completed .wpo-progress-marker::before {
}

.wpo-setup-card .wpo-button-next {
background-color: #1c6c8b;
border: 1px solid #1c6c8b;
background-color: #6e1edc;
border: 1px solid #6e1edc;
color: #fff!important;
}

.wpo-setup-card .wpo-button-previous,
.wpo-setup-input span.button {
background-color: transparent;
border: 1px solid #1c6c8b;
color: #1c6c8b;
border: 1px solid #6e1edc;
color: #6e1edc;
}

.wpo-setup-card .wpo-button-next:hover,
.wpo-setup-card .wpo-button-previous:hover,
.wpo-setup-input span.button:hover {
background-color: #239bb9;
background-color: #6e1edc;
color: #fff!important;
text-decoration: none;
border-color: #239bb9;
border-color: #6e1edc;
}

.wpo-setup-card .wpo-button-next:hover {
background-color: transparent;
color: #6e1edc!important;
text-decoration: none;
border-color: #6e1edc;
}

.wpo-setup-card .wpo-button-next:focus,
.wpo-setup-card .wpo-button-previous:focus,
.wpo-setup-input span.button:focus {
background-color: #239bb9;
box-shadow: none;
background-color: #6e1edc;
color: #fff!important;
border-color: #239bb9;
border-color: #6e1edc;
}

.wpo-setup-card .wpo-button-next,
Expand All @@ -249,7 +279,7 @@ li.completed .wpo-progress-marker::before {

.wpo-setup-card .wpo-button-previous {
float: left;
color: #1c6c8b!important;
color: #6e1edc!important;
}

.wpo-setup-card .wpo-skip-step {
Expand All @@ -264,6 +294,10 @@ li.completed .wpo-progress-marker::before {
text-decoration: none;
}

.wpo-setup-card .wpo-skip-step:focus {
box-shadow: none;
}

/* Shop address */

.wpo-setup-input .shop-name {
Expand Down Expand Up @@ -340,9 +374,9 @@ li.completed .wpo-progress-marker::before {
color: #666;
}

.wpo-setup-input table th,
.wpo-setup-input table td {
padding-bottom: 5px;
.wpo-setup-input table th {
width: 40%;
padding-bottom: 20px;
}

.wpo-setup-input input[type=checkbox] {
Expand All @@ -362,12 +396,28 @@ li.completed .wpo-progress-marker::before {
.wpo-final {
text-align: center;
width: 100%;
padding: 50px;
padding: 25px 50px 30px;
}

.wpo-final h1 {
font-size: 3em;
font-size: 6em;
line-height: 1em;
font-family: serif;
letter-spacing: -4px;
font-style: italic;
}

.wpo-final h2 {
letter-spacing: -1px;
font-size: 2em;
font-weight: lighter;
padding-top: 0.8em;
font-family: sans-serif;
font-style: normal;
}

.wpo-final p {
font-size: 1.3em;
}

.wpo-final a:hover {
Expand Down
2 changes: 1 addition & 1 deletion assets/css/setup-wizard.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 40 additions & 0 deletions assets/css/toggle-switch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
label.slider {
display: inline-block;
background: #ccc;
border: 2px solid #ccc;
width: 34px;
height: 20px;
margin: 0 30px 0 5px;
border-radius: 10px;
vertical-align: middle!important;
box-sizing: border-box;
transition: 0.05s 0.05s;
cursor: pointer;
position: relative;
}

label.slider::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: #f9f9f9;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 50%;
transition: 0.1s;
transform: translateX(0);
}

input[type="checkbox"] {
display: none;
}

input[type="checkbox"]:checked + label.slider {
background: #6e1edc;
border-color: #6e1edc;
}

input[type="checkbox"]:checked + label.slider::before {
transform: translateX(14px);
}
Loading
Loading