first commit
This commit is contained in:
96
modules/welcome/scss/_advancement.scss
Normal file
96
modules/welcome/scss/_advancement.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
@import "settings";
|
||||
|
||||
.onboarding-advancement {
|
||||
font-family: Open Sans,sans-serif; // Forced because of old theme
|
||||
font-weight: normal; // Forced because of old theme
|
||||
position: fixed;
|
||||
background: $background-color;
|
||||
height: 6.875rem;
|
||||
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 13.125rem;
|
||||
|
||||
z-index: $minimum-z-index - 1;
|
||||
|
||||
.btn-primary {
|
||||
background: $primary-color;
|
||||
background: $primary-color !important; // Forced because of old theme
|
||||
}
|
||||
|
||||
.col-md-8 { // Forced because of old theme
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-weight: bold; // Forced because of old theme
|
||||
font-family: Open Sans,sans-serif; // Forced because of old theme
|
||||
color: $dark-color;
|
||||
font-size: 1rem;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 0.875rem; // Forced because of old theme
|
||||
line-height: 1.25rem; // Forced because of old theme
|
||||
.material-icons {
|
||||
color: $primary-color;
|
||||
font-size: 1.125rem;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-button-next {
|
||||
position: absolute;
|
||||
right: 0.625rem;
|
||||
top: 1.25rem;
|
||||
}
|
||||
|
||||
.onboarding-button-shut-down {
|
||||
position: absolute;
|
||||
right: 0.625rem;
|
||||
bottom: 1.875rem;
|
||||
color: $dark-color;
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .advancement-groups {
|
||||
width: 100%;
|
||||
|
||||
> .group {
|
||||
float: left;
|
||||
height: 0.625rem;
|
||||
background: $dark-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .group > .advancement {
|
||||
height: 0.625rem;
|
||||
background: $primary-color;
|
||||
transition: all 0.8s;
|
||||
}
|
||||
|
||||
> .group > .id {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
background-color: $dark-color;
|
||||
border: 1px solid $background-color;
|
||||
border-radius: 1.25rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1.25rem;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
right: -1px;
|
||||
top: -5px;
|
||||
z-index: 1;
|
||||
}
|
||||
> .group > .id.-done {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
83
modules/welcome/scss/_navbar.scss
Normal file
83
modules/welcome/scss/_navbar.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
.page-sidebar-closed {
|
||||
.onboarding-navbar.displayed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.onboarding-navbar.displayed {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
box-sizing: border-box;
|
||||
width: $size-navbar-width;
|
||||
padding: 0.625rem;
|
||||
padding-bottom: 2.1875rem; // Forced because of old theme
|
||||
background: $navbar-footer-color;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
font-size: 0.6875rem;
|
||||
text-align: center;
|
||||
|
||||
> .text {
|
||||
text-align: left;
|
||||
color: $navbar-text-color;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.onboarding-button-resume {
|
||||
// Forced because of old theme
|
||||
background: #1e2024;
|
||||
color: #95a7ad;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: $navbar-progress-secondary-color;
|
||||
color: $navbar-text-color;
|
||||
text-transform: uppercase; // Forced because of old theme
|
||||
margin: 0 auto;
|
||||
font-size: 0.625rem;
|
||||
padding: 0.375rem 0.9375rem;
|
||||
|
||||
&:hover {
|
||||
// Forced because of old theme
|
||||
color: #95a7ad !important; // Forced because of old theme
|
||||
}
|
||||
}
|
||||
|
||||
.btn.-small {
|
||||
margin-top: 2px;
|
||||
font-size: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
text-transform: none;
|
||||
background: $navbar-footer-color;
|
||||
font-size: 0.625rem !important; // Forced because of old theme
|
||||
text-transform: none; // Forced because of old theme
|
||||
color: #95a7ad !important; // Forced because of old theme
|
||||
|
||||
&:hover {
|
||||
// Forced because of old theme
|
||||
color: #95a7ad !important; // Forced because of old theme
|
||||
text-decoration: underline; // Forced because of old theme
|
||||
}
|
||||
}
|
||||
|
||||
> .btn.-small:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> .progress {
|
||||
border-radius: $navbar-progress-size;
|
||||
height: $navbar-progress-size;
|
||||
background: $navbar-progress-secondary-color;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
> .progress > .bar {
|
||||
border-radius: $navbar-progress-size;
|
||||
background: $navbar-progress-primary-color;
|
||||
height: $navbar-progress-size;
|
||||
}
|
||||
}
|
||||
185
modules/welcome/scss/_popup.scss
Normal file
185
modules/welcome/scss/_popup.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
.onboarding-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba($dark-color, 0.5);
|
||||
|
||||
z-index: $minimum-z-index;
|
||||
|
||||
> .content {
|
||||
position: absolute;
|
||||
|
||||
width: $popup-width;
|
||||
left: 50%;
|
||||
margin-left: -$popup-width / 2;
|
||||
top: 2.5rem;
|
||||
|
||||
padding: 0;
|
||||
|
||||
background: white;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-welcome {
|
||||
|
||||
.welcome {
|
||||
background: url('../images/preston-clouds.png') top no-repeat;
|
||||
background-size: 35rem 10.25rem;
|
||||
padding-top: 10.25rem;
|
||||
height: 3.25rem;
|
||||
color: black;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> .content {
|
||||
padding-bottom: 5.625rem;
|
||||
min-height: 12.5rem;
|
||||
font-size: 0.875rem;
|
||||
background: url('../images/balloons.png') bottom no-repeat;
|
||||
background-size: 15rem 5.0625rem;
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
width: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.started {
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
font-size: 1.0625rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .content {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
color: $background-tertiary-color;
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
right: 0.9375rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5625rem;
|
||||
}
|
||||
|
||||
.btn-primary.blue-balloon {
|
||||
background-color: $blue-balloon;
|
||||
}
|
||||
|
||||
.btn-tertiary-outline {
|
||||
background: none;
|
||||
color: $blue-balloon;
|
||||
border: 2px solid $blue-balloon;
|
||||
text-transform: uppercase;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.onboarding-popup {
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#onboarding-welcome {
|
||||
&.modal-header {
|
||||
padding: 1.5rem;
|
||||
|
||||
.close {
|
||||
color: #000;
|
||||
font-size: 2.5rem;
|
||||
margin-top: -14px;
|
||||
margin-right: -5px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: $blue-balloon;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.link-container {
|
||||
|
||||
.close {
|
||||
color: #000;
|
||||
font-size: 40px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.starter-guide,
|
||||
.video-tutorial,
|
||||
.forum,
|
||||
.training {
|
||||
width: 9.375rem;
|
||||
height: 8.125rem;
|
||||
}
|
||||
|
||||
.starter-guide {
|
||||
background: url('../images/starter-guide.png') no-repeat;
|
||||
}
|
||||
|
||||
.video-tutorial {
|
||||
background: url('../images/video-tutorial.png') no-repeat;
|
||||
}
|
||||
|
||||
.forum {
|
||||
background: url('../images/forum.png') no-repeat;
|
||||
}
|
||||
|
||||
.training {
|
||||
background: url('../images/training.png') no-repeat;
|
||||
}
|
||||
|
||||
.final-link {
|
||||
border-width: 0;
|
||||
color: #363a41;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
width: 9.375rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.link {
|
||||
bottom: 0;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
modules/welcome/scss/_settings.scss
Normal file
24
modules/welcome/scss/_settings.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
$navbar-footer-color: #292c32;
|
||||
$navbar-progress-secondary-color: #1e2024;
|
||||
$navbar-progress-primary-color: #fbb000;
|
||||
$navbar-text-color: #95a7ad;
|
||||
|
||||
$popup-width: 35rem;
|
||||
|
||||
$navbar-progress-size: 8px;
|
||||
|
||||
$minimum-z-index: 1500;
|
||||
|
||||
$background-color: #dff5f9;
|
||||
$primary-color: #25b9d7;
|
||||
$dark-color: #363a41;
|
||||
$dark-light-color: #6c868e;
|
||||
$background-secondary-color: #bbcdd2;
|
||||
$background-tertiary-color: #6c868e;
|
||||
$blue-balloon: #2eacce;
|
||||
|
||||
$tooltip-border: 1px solid;
|
||||
|
||||
$tooltip-radius: 5px;
|
||||
|
||||
$size-navbar-width: 210px;
|
||||
149
modules/welcome/scss/_tooltip.scss
Normal file
149
modules/welcome/scss/_tooltip.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
.onboarding-tooltip {
|
||||
|
||||
@mixin addTriangle($size, $color) {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
border: $size solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-left-color: $color;
|
||||
margin-top: -$size;
|
||||
}
|
||||
|
||||
@mixin addTriangleDown($size, $color) {
|
||||
@include addTriangle($size, $color);
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@mixin addPreston($url, $width, $height, $offset) {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background: url($url) no-repeat;
|
||||
background-size: $width $height;
|
||||
left: $offset;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
font-family: Open Sans,sans-serif; // Forced because of old theme
|
||||
font-size: 0.875rem; // Forced because of old theme
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
padding: 0.625rem 0.625rem 3.25rem 2.375rem;
|
||||
width: 18.125rem;
|
||||
min-height: 9.375rem;
|
||||
|
||||
z-index: $minimum-z-index + 2;
|
||||
|
||||
background: $background-color;
|
||||
border-radius: $tooltip-radius;
|
||||
border: $tooltip-border $primary-color;
|
||||
|
||||
&.-left {
|
||||
margin-left: -0.75rem;
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-right.png', 5.5rem, 9.5625rem, -3.8125rem);
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@include addTriangle(0.75rem, $background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include addTriangle(0.75rem, $primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.-right {
|
||||
margin-left: 4.3125rerm;
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-left.png', 6.5rem, 9.5625rem, -4.375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-top {
|
||||
margin-top: -2.6875rem;
|
||||
margin-left: 2.8125rem;
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-right.png', 6.5rem, 9.5625rem, -4.375rem);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include addTriangleDown(0.75rem, $dark-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include addTriangleDown(0.8125rem, $primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-primary {
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
bottom: 0.3125rem;
|
||||
right: 0.3125rem;
|
||||
padding: /* 0.1875rem */ 0 0.5rem;
|
||||
background: $primary-color; // Forced because of old theme
|
||||
color: white; // Forced because of old theme
|
||||
font-size: 0.75rem; // Forced because of old theme
|
||||
border-radius: 0.1875rem; // Forced because of old theme
|
||||
border: none; // Forced because of old theme
|
||||
vertical-align: middle; // Forced because of old theme
|
||||
height: 1.5625rem; // Forced because of old theme
|
||||
line-height: 1.5625rem; // Forced because of old theme
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-tooltipsteps {
|
||||
position: absolute;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
vertical-align: middle;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $dark-color;
|
||||
padding-left: 3.125rem;
|
||||
|
||||
> .total {
|
||||
color: $primary-color;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
> .bulls {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
> .bulls > .bull {
|
||||
height: 0.375rem;
|
||||
width: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
background: $background-secondary-color;
|
||||
display: inline-block;
|
||||
margin: 0 1px 1px 1px;
|
||||
}
|
||||
> .bulls > .bull.-current {
|
||||
background: $primary-color;
|
||||
}
|
||||
> .bulls > .bull.-done {
|
||||
background: $dark-light-color;
|
||||
}
|
||||
}
|
||||
34
modules/welcome/scss/index.php
Normal file
34
modules/welcome/scss/index.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<?php
|
||||
/**
|
||||
* Copyright since 2007 PrestaShop SA and Contributors
|
||||
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
||||
*
|
||||
* NOTICE OF LICENSE
|
||||
*
|
||||
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
|
||||
* that is bundled with this package in the file LICENSE.md.
|
||||
* It is also available through the world-wide-web at this URL:
|
||||
* https://opensource.org/licenses/AFL-3.0
|
||||
* If you did not receive a copy of the license and are unable to
|
||||
* obtain it through the world-wide-web, please send an email
|
||||
* to license@prestashop.com so we can send you a copy immediately.
|
||||
*
|
||||
* DISCLAIMER
|
||||
*
|
||||
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
||||
* versions in the future. If you wish to customize PrestaShop for your
|
||||
* needs please refer to https://devdocs.prestashop.com/ for more information.
|
||||
*
|
||||
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
||||
* @copyright Since 2007 PrestaShop SA and Contributors
|
||||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
*/
|
||||
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
|
||||
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
|
||||
|
||||
header('Cache-Control: no-store, no-cache, must-revalidate');
|
||||
header('Cache-Control: post-check=0, pre-check=0', false);
|
||||
header('Pragma: no-cache');
|
||||
|
||||
header('Location: ../');
|
||||
exit;
|
||||
65
modules/welcome/scss/module.scss
Normal file
65
modules/welcome/scss/module.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
@import "~bourbon/core/bourbon";
|
||||
@import "settings";
|
||||
|
||||
@import 'advancement';
|
||||
@import 'navbar';
|
||||
@import 'tooltip';
|
||||
@import 'popup';
|
||||
|
||||
#onboarding-welcome {
|
||||
.final-link {
|
||||
display: block;
|
||||
border: 1px solid #BBCDD2;
|
||||
border-radius: 3px;
|
||||
padding: 1.25rem;
|
||||
margin: 0.4375rem 0;
|
||||
text-decoration: none;
|
||||
|
||||
> i {
|
||||
color: #BBCDD2;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.with-spinner {
|
||||
position: relative;
|
||||
}
|
||||
&.with-spinner.animated {
|
||||
border-color: white;
|
||||
background: white;
|
||||
outline-color: white;
|
||||
|
||||
&:hover {
|
||||
border-color: white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: {
|
||||
top: -0.9375rem;
|
||||
left: -0.9375rem;
|
||||
}
|
||||
display: block;
|
||||
border: 3px solid $primary-color;
|
||||
border-top-color: transparent;
|
||||
border-radius: 3.125rem;
|
||||
background: transparent;
|
||||
content: '';
|
||||
-webkit-animation:spin 4s linear infinite;
|
||||
-moz-animation:spin 4s linear infinite;
|
||||
animation:spin 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
||||
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
||||
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
||||
Reference in New Issue
Block a user