Makes the border-radius universable editable

This commit is contained in:
Alicia Sykes 2021-03-01 18:57:00 +00:00
parent a2023fcb4b
commit d32ac02f26
4 changed files with 13 additions and 6 deletions

View File

@ -71,12 +71,13 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
.collapsable {
// width: 310px;
padding: 5px;
margin: 10px;
border-radius: 10px;
border-radius: $curve-factor;
background: $ascent;
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
@ -104,7 +105,7 @@ export default {
display: block;
padding: 0.25rem;
cursor: pointer;
border-radius: 7px;
border-radius: $curve-factor;
transition: all 0.25s ease-out;
text-align: left;
color:$bg-with-opacity;
@ -142,7 +143,7 @@ export default {
overflow: hidden;
transition: max-height .25s ease-in-out;
background: $bg-with-opacity;
border-radius: 0 0 10px 10px;
border-radius: 0 0 $inner-radius $inner-radius;
}
.toggle:checked + .lbl-toggle + .collapsible-content {

View File

@ -59,6 +59,7 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
.item {
flex-grow: 1;
@ -70,7 +71,7 @@ export default {
text-align: center;
padding: 2px;
border: 2px solid transparent;
border-radius: 10px;
border-radius: $curve-factor;
box-shadow: 1px 1px 2px #373737;
cursor: pointer;
&:hover {
@ -82,7 +83,6 @@ export default {
outline: none;
}
&.short {
border-radius: 30px;
height: 18px;
}
}

View File

@ -40,6 +40,7 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
.no-items {
width: 100px;
@ -47,7 +48,7 @@ export default {
padding: 0.8rem;
text-align: center;
cursor: default;
border-radius: 10px;
border-radius: $curve-factor;
background: #607d8b33;
color: $ascent;
box-shadow: 1px 1px 2px #373737;

View File

@ -0,0 +1,5 @@
// Used as constant border radius
$curve-factor: 5px;
$inner-radius: $curve-factor - 2;