mue/src/scss/modules/_buttons.scss

114 lines
2.0 KiB
SCSS

/*%settingsButton {
transition: ease 0.33s;
color: map-get($theme-colours, 'main');
cursor: pointer;
padding: 10px 30px;
font-size: 20px;
border-radius: 24px;
box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
&:hover,
&:active {
outline: none;
background: none;
}
&:disabled {
cursor: not-allowed;
color: grey !important;
background: none;
border: 2px solid grey !important;
}
}
.dark %settingsButton {
box-shadow: 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');
}
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;
}
}
.copyNote {
@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;
display: inline;
margin: 5px;
&:hover {
color: map-get($button-colours, 'other');
}
}
.upload {
width: 100%;
height: 100%;
border-radius: 20px;
border: none;
outline: none;
padding: 50px;
background: var(--sidebar);
color: var(--modal-text);
cursor: pointer;
&:hover {
background: var(--tab-active);
}
svg {
font-size: 4em;
}
span {
font-size: 2em;
}
}
.cleanButton {
background: none;
border: none;
vertical-align: middle;
svg {
fill: #ff4757;
border-radius: 100%;
background-color: var(--background);
height: 1.2em;
width: 1.2em;
cursor: pointer;
transition: ease 0.5s;
&:hover {
border-radius: 100%;
background: #ff4757;
fill: var(--background);
transition: ease 0.5s;
}
}
}
*/