tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-25 22:55:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Makes the border-radius universable editable

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Collapsable.vue
View File

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

4
src/components/Item.vue
View File

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

3
src/components/ItemGroup.vue
View File

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

5
src/styles/constants.scss Normal file
View File

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