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: rem(110px);
|
||||
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: rem(210px);
|
||||
|
||||
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: rem(15px);
|
||||
}
|
||||
|
||||
.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: rem(16px);
|
||||
margin-top: rem(10px);
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: rem(14px); // Forced because of old theme
|
||||
line-height: rem(20px); // Forced because of old theme
|
||||
.material-icons {
|
||||
color: $primary-color;
|
||||
font-size: rem(18px);
|
||||
vertical-align: bottom;
|
||||
margin-bottom: rem(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-button-next {
|
||||
position: absolute;
|
||||
right: rem(10px);
|
||||
top: rem(20px);
|
||||
}
|
||||
|
||||
.onboarding-button-shut-down {
|
||||
position: absolute;
|
||||
right: rem(10px);
|
||||
bottom: rem(30px);
|
||||
color: $dark-color;
|
||||
font-size: rem(11px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .advancement-groups {
|
||||
width: 100%;
|
||||
|
||||
> .group {
|
||||
float: left;
|
||||
height: rem(10px);
|
||||
background: $dark-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .group > .advancement {
|
||||
height: rem(10px);
|
||||
background: $primary-color;
|
||||
@include transition(all 0.8s);
|
||||
}
|
||||
|
||||
> .group > .id {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
background-color: $dark-color;
|
||||
border: rem(1px) solid $background-color;
|
||||
border-radius: rem(20px);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: rem(20px);
|
||||
height: rem(20px);
|
||||
width: rem(20px);
|
||||
color: white;
|
||||
font-size: rem(12px);
|
||||
right: rem(-1px);
|
||||
top: rem(-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: rem(10px);
|
||||
padding-bottom: rem(35px); // Forced because of old theme
|
||||
background: $navbar-footer-color;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
font-size: rem(11px);
|
||||
text-align: center;
|
||||
|
||||
> .text {
|
||||
text-align: left;
|
||||
color: $navbar-text-color;
|
||||
padding-bottom: rem(10px);
|
||||
}
|
||||
|
||||
.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: rem(10px);
|
||||
padding: rem(6px) rem(15px);
|
||||
|
||||
&:hover {
|
||||
// Forced because of old theme
|
||||
color: #95a7ad !important; // Forced because of old theme
|
||||
}
|
||||
}
|
||||
|
||||
.btn.-small {
|
||||
margin-top: rem(2px);
|
||||
font-size: rem(8px);
|
||||
padding: rem(4px);
|
||||
text-transform: none;
|
||||
background: $navbar-footer-color;
|
||||
font-size: rem(10px) !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: rem(2px) rem(2px) rem(3px) 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-welcome {
|
||||
|
||||
.welcome {
|
||||
background: url('../images/preston-clouds.png') top no-repeat;
|
||||
background-size: rem(560px) rem(164px);
|
||||
padding-top: 164px;
|
||||
height: rem(52px);
|
||||
color: black;
|
||||
font-size: rem(24px);
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> .content {
|
||||
padding-bottom: rem(90px);
|
||||
min-height: rem(200px);
|
||||
font-size: rem(14px);
|
||||
background: url('../images/balloons.png') bottom no-repeat;
|
||||
background-size: rem(240px) rem(81px);
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
width: rem(400px);
|
||||
}
|
||||
}
|
||||
|
||||
.started {
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
font-size: rem(17px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .content {
|
||||
margin-bottom: rem(20px);
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
color: $background-tertiary-color;
|
||||
position: absolute;
|
||||
top: rem(10px);
|
||||
right: rem(15px);
|
||||
cursor: pointer;
|
||||
font-size: rem(30px);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: rem(25px);
|
||||
}
|
||||
|
||||
.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: rem(24px);
|
||||
}
|
||||
|
||||
#onboarding-welcome {
|
||||
&.modal-header {
|
||||
padding: rem(24px);
|
||||
|
||||
.close {
|
||||
color: #000;
|
||||
font-size: 2.5rem;
|
||||
margin-top: -14px;
|
||||
margin-right: -5px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: $blue-balloon;
|
||||
font-size: rem(15px);
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.link-container {
|
||||
|
||||
.close {
|
||||
color: #000;
|
||||
font-size: 40px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.starter-guide,
|
||||
.video-tutorial,
|
||||
.forum,
|
||||
.training {
|
||||
width: rem(150px);
|
||||
height: rem(130px);
|
||||
}
|
||||
|
||||
.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: rem(150px);
|
||||
|
||||
&:hover {
|
||||
box-shadow: rem(2px) rem(2px) rem(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: rem(560px);
|
||||
|
||||
$navbar-progress-size: rem(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: rem(1px) solid;
|
||||
|
||||
$tooltip-radius: rem(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: rem(10px);
|
||||
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: rem(14px); // Forced because of old theme
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
padding: rem(10px) rem(10px) rem(50px) rem(38px);
|
||||
width: rem(290px);
|
||||
min-height: rem(150px);
|
||||
|
||||
z-index: $minimum-z-index + 2;
|
||||
|
||||
background: $background-color;
|
||||
border-radius: $tooltip-radius;
|
||||
border: $tooltip-border $primary-color;
|
||||
|
||||
&.-left {
|
||||
margin-left: rem(-12px);
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-right.png', rem(88px), rem(153px), rem(-61px));
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@include addTriangle(rem(12px), $background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include addTriangle(rem(13px), $primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.-right {
|
||||
margin-left: rem(69px);
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-left.png', rem(104px), rem(153px), rem(-70px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-top {
|
||||
margin-top: rem(-43px);
|
||||
margin-left: rem(45px);
|
||||
> .content {
|
||||
&:before {
|
||||
@include addPreston('../images/preston-right.png', rem(104px), rem(153px), rem(-70px));
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include addTriangleDown(rem(12px), $dark-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include addTriangleDown(rem(13px), $primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-primary {
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
bottom: rem(5px);
|
||||
right: rem(5px);
|
||||
padding: /* rem(3px) */ 0 rem(8px);
|
||||
background: $primary-color; // Forced because of old theme
|
||||
color: white; // Forced because of old theme
|
||||
font-size: rem(12px); // Forced because of old theme
|
||||
border-radius: rem(3px); // Forced because of old theme
|
||||
border: none; // Forced because of old theme
|
||||
vertical-align: middle; // Forced because of old theme
|
||||
height: rem(25px); // Forced because of old theme
|
||||
line-height: rem(25px); // Forced because of old theme
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-tooltipsteps {
|
||||
position: absolute;
|
||||
height: rem(40px);
|
||||
line-height: rem(40px);
|
||||
vertical-align: middle;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $dark-color;
|
||||
padding-left: rem(50px);
|
||||
|
||||
> .total {
|
||||
color: $primary-color;
|
||||
font-size: rem(10px);
|
||||
}
|
||||
|
||||
> .bulls {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
> .bulls > .bull {
|
||||
height: rem(6px);
|
||||
width: rem(6px);
|
||||
border-radius: rem(6px);
|
||||
background: $background-secondary-color;
|
||||
display: inline-block;
|
||||
margin: 0 rem(1px) rem(1px) rem(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/app/assets/stylesheets/bourbon";
|
||||
@import "settings";
|
||||
|
||||
@import 'advancement';
|
||||
@import 'navbar';
|
||||
@import 'tooltip';
|
||||
@import 'popup';
|
||||
|
||||
#onboarding-welcome {
|
||||
.final-link {
|
||||
display: block;
|
||||
border: 1px solid #BBCDD2;
|
||||
border-radius: rem(3px);
|
||||
padding: rem(20px);
|
||||
margin: rem(7px) 0;
|
||||
text-decoration: none;
|
||||
|
||||
> i {
|
||||
color: #BBCDD2;
|
||||
font-size: rem(64px);
|
||||
margin-bottom: rem(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: rem(30px);
|
||||
height: rem(30px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: {
|
||||
top: rem(-15px);
|
||||
left: rem(-15px);
|
||||
}
|
||||
display: block;
|
||||
border: 3px solid $primary-color;
|
||||
border-top-color: transparent;
|
||||
border-radius: rem(50px);
|
||||
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