mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 23:14:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

4.0

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>
Co-authored-by: Isaac Saunders <contact@eartharoid.me>
This commit is contained in:
David Ralph
2020-08-26 14:32:52 +01:00
parent 21ae1ff461
commit 91fefbf73c
54 changed files with 2044 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/scss/_mixins.scss Normal file
View File

@@ -0,0 +1,28 @@
// credit: https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ', '};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}

31
src/scss/_variables.scss Normal file
View File

@@ -0,0 +1,31 @@
@use 'sass:map';
$theme-colours: (
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
'main': rgba(242, 243, 244, 1),
'secondary': rgba(0, 0, 0, 1),
'main-text-color': rgba(242, 243, 244, 1),
);
$modal: (
'background': #fff,
'text': rgba(0, 0, 0, 1),
'tab-underline': rgba(204, 204, 204, 1),
'tab-underline-active': rgba(0, 0, 0, 1),
'border-radius': 12px,
);
$marketplace: (
'item-background': rgba(242, 243, 244, 1),
'product-information-backgroud': rgba(242, 243, 244, 1),
);
$button-colours: (
'confirm': rgba(46, 213, 115, 1),
'reset': rgba(255, 71, 87, 1),
'other': rgba(83, 82, 237, 1),
);
$main-parts: (
'shadow': 0 0 1rem 0 rgba(0, 0, 0, .2),
);

57
src/scss/index.scss
View File

@@ -1,4 +1,6 @@
/* Imports */
@import 'variables';
@import 'mixins';
@import 'modules/clock';
@import 'modules/greeting';
@import 'modules/quote';
@@ -8,6 +10,10 @@
@import 'modules/modal';
@import 'modules/settings';
@import 'modules/toast';
@import 'modules/marketplace';
@import 'modules/checkbox';
@import 'modules/buttons';
@import 'modules/welcome';
body {
background: #2f3640;
@@ -18,6 +24,16 @@ body {
overflow: hidden;
}
* {
font-family: 'Lexend Deca' !important;
outline: none;
}
@font-face {
font-family: 'Lexend Deca';
src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
}
#center {
margin-left: 2vw;
margin-right: 2vw;
@@ -36,14 +52,14 @@ body {
}
::placeholder {
color: #ffffff;
color: map-get($theme-colours, 'main');
opacity: 1;
}
#root {
min-height: 100vh;
display: grid;
color: white;
color: map-get($theme-colours, 'main-text-color');
}
#backgroundImage {
@@ -52,37 +68,17 @@ body {
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
z-index: 0;
border: none;
transform: scale(1.1);
}
.fade-in {
-webkit-animation: fadein 2s;
animation: fadein 2s;
-moz-animation: fadein 2s;
@include animation('fadein 2s');
}
@-webkit-keyframes fadein {
@include keyframes(fadein) {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@font-face {
font-family: 'Lexend Deca';
src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
}
.backgroundEffects {
opacity: .7;
transition: ease 0.6s;
@@ -90,15 +86,4 @@ body {
#searchEngine {
width: 130px;
}
.select-css {
background: none;
backdrop-filter: blur(10em);
height: 34px;
width: 100px;
border-image-slice: 1;
border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
border-left: 10px solid;
font-weight: 400;
}

160
src/scss/modules/_buttons.scss Normal file
View File

@@ -0,0 +1,160 @@
%settingsButton {
text-align: center;
border: none;
transition: ease 0.33s;
color: map-get($theme-colours, "main");
cursor: pointer;
display: inline-block;
position: relative;
padding: 10px 30px;
font-size: 20px;
border-radius: 24px;
background: none;
&:hover {
outline: none;
}
&:active {
outline: none;
}
}
.apply {
@extend %settingsButton;
margin-right: 20px;
background-color: map-get($button-colours, "confirm");
border: 2px solid map-get($button-colours, "confirm");
&:hover {
border: 2px solid map-get($button-colours, "confirm");
color: map-get($button-colours, "confirm");
background: none;
}
}
.reset {
@extend %settingsButton;
background-color: map-get($button-colours, "reset");
border: 2px solid map-get($button-colours, "reset");
margin-left: 5px;
&:hover {
border: 2px solid map-get($button-colours, "reset");
color: map-get($button-colours, "reset");
background: none;
}
}
.close {
@extend %settingsButton;
padding: 10px 50px 10px 50px;
background-color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
&:hover {
color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
background: none;
}
}
.export,
.uploadbg,
.import {
@extend %settingsButton;
background-color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
color: map-get($theme-colours, "main");
&:hover {
color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
background: none;
}
}
.export,
.import {
float: right;
margin-left: 20px;
}
.storebutton {
cursor: pointer;
font-size: 18px;
float: right;
vertical-align: middle;
padding: 5px 30px;
background: none;
outline: none;
border: none;
border: 2px solid #2d3436;
border-radius: 24px;
font-family: 'Lexend Deca', sans-serif;
transition: ease 0.33s;
&:hover {
background: #2d3436;
color: map-get($theme-colours, "main");;
border: 2px solid #2d3436;
}
}
.dark .storebutton {
border: 2px solid map-get($theme-colours, "main");
color: map-get($theme-colours, "main");
&:hover {
background: map-get($theme-colours, "main");
color: #2d3436;
border: 2px solid map-get($theme-colours, "main");
}
}
#item >.removeFromMue {
border: 2px solid #ff4757;
color: #ff4757;
&:hover {
background: #ff4757;
color: map-get($theme-colours, "main");;
border: 2px solid #ff4757;
}
@extend .storebutton;
}
#item .addToMue,
#item .removeFromMue {
margin-top: 5px;
}
.addToMue {
@extend .storebutton;
}
.goToMarket {
float: none;
@extend .storebutton;
}
.sideload {
margin-top: 12px;
}
.seemore {
margin-top: 12px;
}
.seemore {
@extend %settingsButton;
background-color: #2d3436;
border: 2px solid #2d3436;
&:hover {
color: #2d3436;
border: 2px solid #2d3436;
background: none;
}
}

3
src/scss/modules/_checkbox.scss Normal file
View File

@@ -0,0 +1,3 @@
.MuiCheckbox-colorPrimary.Mui-checked {
color: map-get($button-colours, "reset") !important;
}

25
src/scss/modules/_clock.scss
View File

@@ -1,39 +1,20 @@
.clock {
font-size: 4em;
//text-shadow: 5px 2px rgba(0, 0, 0, 0.8);
margin: 0;
// text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.ampm {
font-size: 0.5em;
}
.analogclock {
font-size: 4em;
.analogclock, .react-clock__face {
margin: 0 auto;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
border-radius: 100%;
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
border: 1px solid map-get($theme-colours, "main");
}
.react-clock__face {
border: none;
outline: none;
border: 3px #fff solid;
transition: 2s;
}
.react-clock__second-hand__body {
background: #e84118;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
transition: 2s;
}
.react-clock__hand__body {
background: #fff;
background: map-get($theme-colours, "main");;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
transition: 2s;
}
.react-clock__mark__body {
display: none;
}

13
src/scss/modules/_credit.scss
View File

@@ -21,7 +21,7 @@
cursor: pointer;
}
.MuiSvgIcon-root {
.navbar-container > svg, #backgroundCredits > svg {
font-size: calc(10px + 1.5vmin) !important;
position: absolute;
bottom: 2px;
@@ -45,12 +45,13 @@
left: 10px;
-webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
.tooltiptext {
width: 200px;
display: inline-block;
visibility: hidden;
border-radius: 12px;
background-color: #fff;
background-color: map-get($theme-colours, "main");;
color: #000;
font-size: calc(10px + 1.2vmin);
position: absolute;
@@ -63,11 +64,11 @@
transition: opacity 1s;
box-sizing: border-box;
}
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
&:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
}
#photographer, .locationicon {

287
src/scss/modules/_marketplace.scss Normal file
View File

@@ -0,0 +1,287 @@
.tab,
button.tablinks {
margin-top: -10px;
font-size: 24px;
background: none;
border: none;
outline: none;
color: map-get($modal, "text");
}
button.tablinks {
cursor: pointer;
padding: 6px;
border-radius: 12px;
padding: 10px 30px 10px 30px;
&:hover {
background: rgba(189, 195, 199, .075);
}
&:after {
content: "";
display: block;
margin: 0 auto;
width: 50%;
padding-top: 10px;
border-bottom: 3px solid map-get($modal, "tab-underline");
}
}
#item a {
color: map-get($button-colours, "other");
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
#active:after {
content: "";
display: block;
margin: 0 auto;
width: 50%;
padding-top: 10px;
border-bottom: 3px solid map-get($modal, "tab-underline-active");
}
.dark {
.tab,
button.tablinks {
color: white;
}
#active:after {
border-image-slice: 1;
border-image-source: map-get($theme-colours, "gradient");
border-bottom: 3px solid;
}
}
.tab {
margin-left: -3px;
}
.items {
display: flex;
flex-flow: wrap;
align-items: left;
justify-content: left;
margin-top: -10px;
.item {
position: relative;
border-radius: 12px;
height: 80px;
width: 270px;
background: map-get($marketplace, "item-background");
transition: 0.5s;
cursor: pointer;
margin-right: 20px;
margin-bottom: 20px;
overflow: none;
img {
height: 100%;
width: auto;
border-radius: 12px 0 0 12px;
background: white;
}
h4 {
font-size: 20px;
line-height: 20px;
font-weight: 600;
}
img,
.details {
display: inline;
}
.details {
position: absolute;
left: 90px;
top: 15px;
img {
margin-left: 10px;
height: 15px;
}
}
p {
margin-top: 5px;
}
p.desc {
margin-top: -14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
transform: scale(1.1);
}
}
}
.dark .items .item {
background: #2d3436;
}
p.author {
margin-top: -5px;
}
#item {
display: none;
h1 {
font-size: 40px;
}
}
#item>h1,
#item>.MuiSvgIcon-root {
display: inline;
font-size: 35px !important;
}
p.description {
margin-top: 0px;
}
.emptyMessage {
margin: 0 auto;
text-align: center;
transform: translateY(30%);
svg {
font-size: 50px;
line-height: 0px;
margin: 0;
margin-bottom: -20px;
}
}
.backArrow {
position: relative;
cursor: pointer;
&:hover {
color: grey;
}
}
.informationContainer {
float: right;
}
.productInformation {
margin-bottom: 20px;
padding: 20px;
background: map-get($marketplace, "product-information-backgroud");
width: 200px;
border-radius: 12px;
li {
margin-left: -4px;
list-style: none;
}
li.header {
text-transform: uppercase;
color: #787878;
list-style: none;
margin-left: -5px;
}
}
.dark .productInformation {
background: #2d3436;
}
#item>img {
border-radius: 24px;
height: 200px;
width: auto;
}
#marketplace {
-webkit-animation: content 0.5s;
-moz-animation: content 0.5s;
-ms-animation: content 0.5s;
-o-animation: content 0.5s;
animation: content 0.5s;
}
@keyframes content {
from {
opacity: 0;
transform: translateY(5%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
.banner {
text-align: center;
background: #54a0ff;
border-radius: 24px;
padding: 10px;
margin: 0;
color: map-get($theme-colours, "main");
display: none !important;
}
.featured {
background: #2d3436;
margin-top: 20px;
border-radius: 24px;
padding: 50px;
color: map-get($theme-colours, "main");
button {
float: left;
margin-top: -20px;
border: 2px solid map-get($theme-colours, "main");
color: map-get($theme-colours, "main");
&:hover {
border: 2px solid map-get($theme-colours, "main");
background: map-get($theme-colours, "main");
color: #2d3436;
}
}
h1 {
margin-top: -20px;
}
}
.dark .featured {
background: black;
color: white;
}
.requires {
float: right;
}
#seemore {
display: none;
}
#seemore svg {
font-size: 35px !important;
margin-bottom: -30px;
}

54
src/scss/modules/_modal.scss
View File

@@ -1,6 +1,6 @@
.Modal {
color: #000;
background-color: #fff;
color: map-get($modal, "text");
background-color: map-get($modal, "background");
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
border: none;
opacity: 1;
@@ -9,12 +9,17 @@
cursor: hand;
transition: 0.6s;
transition-timing-function: ease-in;
border-radius: 12px;
border-radius: map-get($modal, "border-radius");
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
&:focus {
outline: 0;
}
}
.modalLink {
color: #5352ed;
cursor: pointer;
@@ -42,7 +47,6 @@
.ReactModal__Html--open,
.ReactModal__Body--open {
overflow: hidden;
/* prevents background page from scrolling when the modal is open */
}
@-webkit-keyframes zoom-in {
@@ -73,11 +77,9 @@
}
}
.Overlay {
position: fixed;
z-index: 999999;
z-index: 100;
top: 0;
left: 0;
right: 0;
@@ -96,25 +98,44 @@
}
.ReactModal__Content {
width: 500px;
max-width: 600px;
min-height: calc(100vh - 30vh);
max-height: calc(100vh - 10vh);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
overflow-y: auto;
position: relative;
}
@media only screen and (max-height: 700px) {
.ReactModal__Content {
min-height: 500px;
max-height: calc(100vh - 30vh);
}
}
@media only screen and (min-height: 700px){
.ReactModal__Content {
min-height: 600px;
}
}
.content {
margin-top: -20px;
width: 900px;
h1 {
font-size: 35px;
}
p {
margin-top: -20px;
font-size: 16px;
}
.columns {
font-size: 15px;
li {
padding-left: 10px;
}
}
}
@@ -149,4 +170,17 @@
100% {
-webkit-transform: scale(0);
}
}
.updateContent {
width: 400px;
padding: 5px;
.closeModal {
margin-top: 10px;
font-size: 45px;
}
img {
width: 100%;
height: auto;
}
}

11
src/scss/modules/_navbar.scss
View File

@@ -5,21 +5,24 @@
cursor: pointer;
-webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
top: 50px;
top: 20px;
svg {
transition: ease 0.2s;
font-size: calc(10px + 1.5vmin) !important;
}
&:hover {
svg {
transform: scale(1.1);
color: #fff;
color: map-get($theme-colours, "main");;
}
}
}
.navbar1 {
@extend %navbar;
right: 0px;
right: 20px;
svg {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
@@ -30,7 +33,7 @@
.navbar2 {
@extend %navbar;
right: 50px;
right: 60px;
}
.navbar3 {

9
src/scss/modules/_quote.scss
View File

@@ -1,6 +1,6 @@
.quote {
font-size: 0.8em;
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 600px) {
@@ -30,7 +30,10 @@
float: middle;
margin: 0 auto;
text-align: right;
// transform: rotate(45deg);
transition: ease 0.2s !important;
&:hover {
transform: scale(1.1);
}
}
i.material-icons,
@@ -41,7 +44,7 @@ h1.quoteauthor {
button.copyButton {
background: transparent;
border: none;
color: #fff;
color: map-get($theme-colours, "main");;
padding: 20px 20px;
text-align: center;
text-decoration: none;

33
src/scss/modules/_search.scss
View File

@@ -5,26 +5,35 @@
display: flex;
flex-direction: row;
display: block;
color: #ffff;
font-family: 'Lexend Deca', sans-serif;;
color: map-get($theme-colours, "main-text-color");
input[type=text] {
width: 140px;
margin-left: 12px;
border-radius: 24px;
font-size: calc(5px + 1.2vmin);
background: transparent;
border: 2px solid #ffff;
padding: 10px;
color: #ffff;
border: none;
color: map-get($theme-colours, "main-text-color");
position: absolute;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.1);
-webkit-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
&:focus {
width: 400px;
background-color: rgba(0, 0, 0, .3);
}
}
.MuiSvgIcon-root {
margin-top: 4px;
font-size: 30px;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
cursor: pointer;
}
}
.input.searchtext {
border: none;
}
.searchbarform {
display: flex;
flex-direction: row;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

149
src/scss/modules/_settings.scss
View File

@@ -1,8 +1,5 @@
$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
.switch {
position: relative;
/* display: inline-block; */
width: 60px;
height: 34px;
float: right;
@@ -35,7 +32,7 @@ $gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
background-color: #fff;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
@@ -52,14 +49,13 @@ input {
padding: 0.5rem 1rem;
box-sizing: border-box;
border-image-slice: 1;
border-image-source: $gradient;
border-image-source: map-get($theme-colours, "gradient");
outline: none;
font-family: 'Lexend Deca', sans-serif;
background: transparent;
}
&:checked + .slider {
background: $gradient;
&:checked+.slider {
background: map-get($theme-colours, "gradient");
&:before {
-webkit-transform: translateX(26px);
@@ -68,7 +64,7 @@ input {
}
}
&:focus + .slider {
&:focus+.slider {
box-shadow: 0 0 1px #e67e22;
}
}
@@ -83,13 +79,16 @@ input {
background: #34495e;
}
h4, .switch, .expandIcons {
h4,
.switch,
.expandIcons {
display: inline;
font-size: 1.4em;
font-weight: 100;
}
h4, #engines {
h4,
#engines {
display: inline;
}
@@ -97,101 +96,15 @@ h4, #engines {
margin-bottom: 20px;
}
%settingsButton {
text-align: center;
border: none;
transition: 0.25s;
color: #fff;
cursor: pointer;
display: inline-block;
box-shadow: 20px #000;
position: relative;
padding: 15px;
width: 120px;
font-size: 1.1em;
font-family: 'Lexend Deca', sans-serif;
&:hover {
transform: translateY(-0.10em);
outline: none;
}
&:before {
content: '';
position: absolute;
width: 0%;
top: 0;
left: 0;
height: 100%;
transition: 0.3s linear;
z-index: -1;
color: #fff;
}
&:hover:before {
width: 100%;
}
&:active {
outline: none;
}
}
.apply {
@extend %settingsButton;
background-color: #dd3b67;
&:before {
background: $gradient;
}
}
.import {
float: right;
@extend %settingsButton;
background-color: #dd3b67;
margin-right: 5px;
&:before {
background: $gradient;
}
}
.export {
float: right;
@extend %settingsButton;
background-color: #dd3b67;
&:before {
background: $gradient;
}
}
.uploadbg {
@extend %settingsButton;
background-color: #dd3b67;
width: auto;
height: auto;
padding: 5px 18px;
&:before {
background: $gradient;
}
}
.reset {
@extend %settingsButton;
background-color: #ffb032;
margin-left: 5px;
&:before {
background: linear-gradient(90deg, #dd3b67 0%, #ffb032 100%);
}
}
.expandIcons {
position: relative;
font-size: 25px;
vertical-align: middle;
display: inline-flex;
}
h4,
.expandIcons {
cursor: pointer;
}
@@ -202,17 +115,28 @@ h4, #engines {
border-width: 5px;
border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
> p {
p {
margin: 0;
padding: 0;
}
select {
margin-left: 20px;
}
input[type=text],
input[type=range],
p,
button {
margin-top: 10px;
}
}
ul {
padding-left: 5px;
margin: 0;
> label {
>label {
vertical-align: middle;
}
}
@@ -238,7 +162,7 @@ li {
width: 25px;
height: 25px;
border-radius: 12px;
background: $gradient;
background: map-get($theme-colours, "gradient");
cursor: pointer;
}
@@ -246,7 +170,7 @@ li {
width: 25px;
height: 25px;
border-radius: 12px;
background: $gradient;
background: map-get($theme-colours, "gradient");
cursor: pointer;
}
}
@@ -255,7 +179,7 @@ input[type=color] {
border-radius: 100%;
height: 30px;
width: 30px;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
box-shadow: map-get($main-parts, "shadow");
border: none;
outline: none;
-webkit-appearance: none;
@@ -280,15 +204,16 @@ input[type=checkbox] {
padding-left: 7px;
}
select#language {
float: right;
select {
background: none;
backdrop-filter: blur(10em);
height: 34px;
width: 100px;
width: 120px;
border-image-slice: 1;
border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
border-left: 10px solid;
font-weight: 400;
font-family: 'Lexend Deca', sans-serif;
color: map-get($modal, "text");
}
select#language {
float: right;
}

1
src/scss/modules/_toast.scss
View File

@@ -1,5 +1,4 @@
.Toastify__toast-body {
font-family: 'Lexend Deca', sans-serif !important;
color: #000 !important;
font-size: 16px !important;
padding: 15px 20px !important;

42
src/scss/modules/_welcome.scss Normal file
View File

@@ -0,0 +1,42 @@
.welcomeModalText {
line-height: 2px;
h2.subtitle {
font-size: 24px;
color: #535353;
text-transform: uppercase;
}
h1.welcometitle {
font-size: 50px;
}
}
.welcomeContent {
text-align: center;
padding: 25px;
a {
text-decoration: none;
line-height: 20px !important;
color: #5352ED;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
img.icon, svg {
margin-top: -12px;
padding: 10px;
cursor: pointer;
transition: ease 0.2s;
&:hover {
transform: scale(1.1);
}
}
p {
margin-top: 0.7rem;
line-height: 1em;
}
img, svg {
height: 24px;
width: auto;
}
}