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

Settings! (Almost finished)

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>
This commit is contained in:
David Ralph
2020-07-15 21:06:21 +01:00
parent da5a4da97b
commit 0c6022aa2d
13 changed files with 341 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/scss/index.scss
View File

@@ -4,5 +4,7 @@
@import 'modules/quote';
@import 'modules/search';
@import 'modules/credit';
/*@import 'modules/navbar';*/
@import 'modules/miscellaneous';
@import 'modules/navbar';
@import 'modules/modal';
@import 'modules/settings';
@import 'modules/miscellaneous';

74
src/scss/modules/_modal.scss Normal file
View File

@@ -0,0 +1,74 @@
.Modal {
background-color: #fff;
width: 600px;
margin: 0 auto;
margin-top: 40px;
border: none;
opacity: 1;
z-index: -2;
height: auto;
padding: 20px;
cursor: hand;
}
.Overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

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

@@ -2,24 +2,17 @@
position: absolute;
text-align: right;
min-width: 50px;
cursor: pointer;
}
.navbar1 {
@extend navbar;
@extend %navbar;
top: 50px;
right: 0px;
}
.navbar2 {
@extend navbar;
@extend %navbar;
top: 50px;
right: 50px;
}
.PizzaIcon {
margin-right: 20px;
}
.pizza {
right: 2000px;
}

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

@@ -16,7 +16,6 @@
color: #ffff;
position: absolute;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
z-index: 1;
}
}

125
src/scss/modules/_settings.scss Normal file
View File

@@ -0,0 +1,125 @@
.Modal {
width: auto;
color: #000;
background-color: #fff;
max-width: 500px;
box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
}
.Modal:focus {
outline: 0;
}
.closeModal {
float: right;
font-size: 2em;
cursor: pointer;
}
.closeModal:hover {
color: grey;
}
.switch {
position: relative;
/* display: inline-block; */
width: 60px;
height: 34px;
float: right;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
}
input:focus + .slider {
box-shadow: 0 0 1px #e67e22;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
h4, .switch {
display: inline;
font-size: 1.4em;
}
.section {
margin-bottom: 20px;
}
.apply {
height: 45px;
width: 130px;
text-align: center;
border: none;
transition: 0.25s;
background-color: #dd3b67;
color: #fff;
cursor: pointer;
display: inline-block;
box-shadow: 20px #000;
font-size: 1.3em;
position: relative;
&:hover {
transform: translateY(-0.10em);
}
&:before {
content: '';
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
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;
}
}