TheCoreDev/taome
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
TheCoreDev
2020-10-07 10:37:15 +02:00
commit ce5f440392
28157 changed files with 4429172 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
modules/welcome/scss/_advancement.scss Normal file
View 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;
}
}
}

74
modules/welcome/scss/_navbar.scss Normal file
View File

@@ -0,0 +1,74 @@
.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;
}
> .progress > .bar {
border-radius: $navbar-progress-size;
background: $navbar-progress-primary-color;
height: $navbar-progress-size;
}
}

185
modules/welcome/scss/_popup.scss Normal file
View 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
View 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
View 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;
}
}

65
modules/welcome/scss/module.scss Normal file
View 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); } }