socialhose/socialhose-php
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

at the end of the day, it was inevitable

Browse Source
This commit is contained in:
Mo Elzubeir
2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/styles/components/notifications/toastify/_closeButton.scss
Executable
+28
View File
@@ -0,0 +1,28 @@
.#{$rt-namespace}__close-button {
color: $white;
font-size: 14px;
background: transparent;
outline: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: 0.3s ease;
position: absolute;
top: 5px;
right: 9px;
&--default {
color: #000;
opacity: 0.3;
}
&:hover,
&:focus {
opacity: 1;
}
}
[dir='rtl'] .#{$rt-namespace}__close-button {
left: 9px;
right: unset;
}
frontend/app/styles/components/notifications/toastify/_progressBar.scss
Executable
+33
View File
@@ -0,0 +1,33 @@
@keyframes #{$rt-namespace}__trackProgress {
0%{
width: 96%;
}
100%{
width: 0;
}
}
.#{$rt-namespace}__progress-bar {
position: absolute;
bottom: 9%;
left: 2%;
width: 0;
height: 5px;
z-index: $rt-z-index;
animation: #{$rt-namespace}__trackProgress linear 1;
background-color: rgba(255,255,255,.3);
@include border-radius($border-radius);
&--rtl {
right: 0;
left: initial;
}
&--default{
background: $rt-color-progress-default;
}
&--info{}
&--success{}
&--warning{}
&--error{}
}
frontend/app/styles/components/notifications/toastify/_toast.scss
Executable
+50
View File
@@ -0,0 +1,50 @@
.#{$rt-namespace}__toast {
position: relative;
min-height: $rt-toast-min-height;
box-sizing: border-box;
margin-bottom: 1rem;
padding: $spacer;
@include border-radius($border-radius);
box-shadow: $box-shadow-default;
display: flex;
justify-content: space-between;
max-height: $rt-toast-max-height;
overflow: hidden;
font-family: $rt-font-family;
cursor: pointer;
direction: ltr;
&--rtl {
direction: rtl;
}
&--default {
background: $rt-color-default;
color: $gray-700;
@include box-shadow-architect($primary);
}
&--info {
background: $rt-color-info;
@include box-shadow-architect($info);
}
&--success {
background: $rt-color-success;
@include box-shadow-architect($success);
}
&--warning {
background: $rt-color-warning;
@include box-shadow-architect($warning);
}
&--error {
background: $rt-color-error;
@include box-shadow-architect($danger);
}
&-body {
margin: auto 0;
padding: 0 0 ($spacer / 2.5);
}
}
@media #{$rt-mobile} {
.#{$rt-namespace}__toast{
margin-bottom: 0;
}
}
frontend/app/styles/components/notifications/toastify/_toastContainer.scss
Executable
+59
View File
@@ -0,0 +1,59 @@
.#{$rt-namespace}__toast-container {
z-index: $rt-z-index;
position: fixed;
padding: 0;
width: $rt-toast-width;
box-sizing: border-box;
color: $white;
word-break: break-word;
&--top-left {
top: $spacer;
left: $spacer;
}
&--top-center {
top: $spacer;
left: 50%;
margin-inline-start: -($rt-toast-width / 2);
}
&--top-right {
top: $spacer;
right: $spacer;
}
&--bottom-left {
bottom: $spacer;
left: $spacer;
}
&--bottom-center {
bottom: $spacer;
left: 50%;
margin-inline-start: -($rt-toast-width / 2);
}
&--bottom-right {
bottom: $spacer;
right: $spacer;
}
}
@media #{$rt-mobile} {
.#{$rt-namespace}__toast-container {
width: 100vw;
padding: 0;
left: 0;
margin: 0;
&--top-left,
&--top-center,
&--top-right {
top: 0;
}
&--bottom-left,
&--bottom-center,
&--bottom-right {
bottom: 0;
}
&--rtl{
right: 0;
left: initial;
}
}
}
frontend/app/styles/components/notifications/toastify/_variables.scss
Executable
+19
View File
@@ -0,0 +1,19 @@
$rt-namespace: 'Toastify';
$rt-toast-width: 320px !default;
$rt-toast-background: #ffffff !default;
$rt-toast-min-height: 54px !default;
$rt-toast-max-height: 800px !default;
$rt-color-default: #fff !default;
$rt-color-info: $info !default;
$rt-color-success: $success !default;
$rt-color-warning: $warning !default;
$rt-color-error: $danger !default;
$rt-color-progress-default: $primary !default;
$rt-mobile: "only screen and (max-width : 480px)" !default;
$rt-font-family: sans-serif !default;
$rt-z-index: 9999 !default;
frontend/app/styles/components/notifications/toastify/animations/_bounce.scss
Executable
+197
View File
@@ -0,0 +1,197 @@
@mixin timing-function {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@keyframes #{$rt-namespace}__bounceInRight {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceInLeft {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceInUp {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes #{$rt-namespace}__bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes #{$rt-namespace}__bounceInDown {
from,
60%,
75%,
90%,
to {
@include timing-function;
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes #{$rt-namespace}__bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.#{$rt-namespace}__bounce-enter {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__bounceInLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__bounceInRight;
}
&--top-center {
animation-name: #{$rt-namespace}__bounceInDown;
}
&--bottom-center {
animation-name: #{$rt-namespace}__bounceInUp;
}
}
.#{$rt-namespace}__bounce-exit {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__bounceOutLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__bounceOutRight;
}
&--top-center {
animation-name: #{$rt-namespace}__bounceOutUp;
}
&--bottom-center {
animation-name: #{$rt-namespace}__bounceOutDown;
}
}
frontend/app/styles/components/notifications/toastify/animations/_flip.scss
Executable
+43
View File
@@ -0,0 +1,43 @@
@keyframes #{$rt-namespace}__flipIn {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes #{$rt-namespace}__flipOut {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0
}
}
.#{$rt-namespace}__flip-enter {
animation-name: #{$rt-namespace}__flipIn;
}
.#{$rt-namespace}__flip-exit {
animation-name: #{$rt-namespace}__flipOut;
}
frontend/app/styles/components/notifications/toastify/animations/_slide.scss
Executable
+117
View File
@@ -0,0 +1,117 @@
@mixin transform {
transform: translate3d(0, 0, 0);
}
@keyframes #{$rt-namespace}__slideInRight {
from {
transform: translate3d(110%, 0, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInLeft {
from {
transform: translate3d(-110%, 0, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInUp {
from {
transform: translate3d(0, 110%, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideInDown {
from {
transform: translate3d(0, -110%, 0);
visibility: visible;
}
to {
@include transform;
}
}
@keyframes #{$rt-namespace}__slideOutRight {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(110%, 0, 0);
}
}
@keyframes #{$rt-namespace}__slideOutLeft {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(-110%, 0, 0);
}
}
@keyframes #{$rt-namespace}__slideOutDown {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(0, 500px, 0);
}
}
@keyframes #{$rt-namespace}__slideOutUp {
from {
@include transform;
}
to {
visibility: hidden;
transform: translate3d(0, -500px, 0);
}
}
.#{$rt-namespace}__slide-enter {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__slideInLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__slideInRight;
}
&--top-center {
animation-name: #{$rt-namespace}__slideInDown;
}
&--bottom-center {
animation-name: #{$rt-namespace}__slideInUp;
}
}
.#{$rt-namespace}__slide-exit {
&--top-left,
&--bottom-left {
animation-name: #{$rt-namespace}__slideOutLeft;
}
&--top-right,
&--bottom-right {
animation-name: #{$rt-namespace}__slideOutRight;
}
&--top-center {
animation-name: #{$rt-namespace}__slideOutUp;
}
&--bottom-center {
animation-name: #{$rt-namespace}__slideOutDown;
}
}
frontend/app/styles/components/notifications/toastify/animations/_zoom.scss
Executable
+30
View File
@@ -0,0 +1,30 @@
@keyframes #{$rt-namespace}__zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes #{$rt-namespace}__zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0
}
}
.#{$rt-namespace}__zoom-enter {
animation-name: #{$rt-namespace}__zoomIn;
}
.#{$rt-namespace}__zoom-exit {
animation-name: #{$rt-namespace}__zoomOut;
}