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

Add notes feature and improved navbar

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2020-10-17 18:46:27 +01:00
parent c12091c5f0
commit 93edb489f7
6 changed files with 326 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/scss/modules/_buttons.scss
View File

@@ -2,7 +2,7 @@
text-align: center;
border: none;
transition: ease 0.33s;
color: map-get($theme-colours, "main");
color: map-get($theme-colours, 'main');
cursor: pointer;
display: inline-block;
position: relative;
@@ -23,25 +23,25 @@
.apply {
@extend %settingsButton;
margin-right: 20px;
background-color: map-get($button-colours, "confirm");
border: 2px solid map-get($button-colours, "confirm");
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");
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");
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");
border: 2px solid map-get($button-colours, 'reset');
color: map-get($button-colours, 'reset');
background: none;
}
}
@@ -49,24 +49,24 @@
.close {
@extend %settingsButton;
padding: 10px 50px 10px 50px;
background-color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
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");
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
background: none;
}
}
.add {
@extend %settingsButton;
background-color: map-get($button-colours, "other");
border: 2px solid map-get($button-colours, "other");
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");
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
background: none;
}
}
@@ -76,7 +76,7 @@
border-radius: 50%;
background: none;
border: 2px solid rgba(0,0,0,0);
color: map-get($button-colours, "reset");
color: map-get($button-colours, 'reset');
text-align: center;
vertical-align: sub;
height: 60px;
@@ -85,8 +85,8 @@
font-size: 30px;
&:hover {
color: map-get($button-colours, "background");
border: 2px solid map-get($button-colours, "reset");
color: map-get($button-colours, 'background');
border: 2px solid map-get($button-colours, 'reset');
background: none;
}
}
@@ -95,13 +95,13 @@
.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");
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");
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
background: none;
}
}
@@ -128,19 +128,19 @@
&:hover {
background: #2d3436;
color: map-get($theme-colours, "main");;
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");
border: 2px solid map-get($theme-colours, 'main');
color: map-get($theme-colours, 'main');
&:hover {
background: map-get($theme-colours, "main");
background: map-get($theme-colours, 'main');
color: #2d3436;
border: 2px solid map-get($theme-colours, "main");
border: 2px solid map-get($theme-colours, 'main');
}
}
@@ -150,7 +150,7 @@
&:hover {
background: #ff4757;
color: map-get($theme-colours, "main");;
color: map-get($theme-colours, 'main');;
border: 2px solid #ff4757;
}
@@ -190,7 +190,7 @@
.stop {
outline: none;
border-image-slice: 1;
border-image-source: map-get($theme-colours, "gradient");
border-image-source: map-get($theme-colours, 'gradient');
font-size: 1.2em;
padding-left: 7px;
vertical-align: middle;
@@ -200,4 +200,48 @@ input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
outline: none;
}
.pinNote {
@extend %settingsButton;
background-color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
color: map-get($theme-colours, 'main');
transition: 0s;
&:hover {
color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
background: none;
}
svg {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
}
}
.saveNote {
@extend %settingsButton;
background-color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
color: map-get($theme-colours, 'main');
transition: 0s;
&:hover {
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
background: none;
}
}
.saveNote {
display: inline;
margin: 5px;
}