add generic scss

This commit is contained in:
Axolotle 2020-09-11 14:20:48 +02:00
parent 1837e3874c
commit 1284237019
4 changed files with 30 additions and 52 deletions

View file

@ -22,6 +22,20 @@ body {
font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
} }
.menu-list {
.list-group-item {
padding: 0.75rem 0;
display: flex;
align-items: center;
}
h2 {
font-size: 1.25rem;
font-weight: 400;
margin: 0;
}
}
.list-group-item { .list-group-item {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
@ -53,11 +67,24 @@ body {
} }
} }
.card + .card {
margin-top: 2rem;
}
.card-header h2 { .card-header h2 {
margin: 0; margin: 0;
font-size: 1.75rem; font-size: 1.75rem;
} }
// collapse icon
.not-collapsed .icon {
transform: rotate(-90deg);
}
.collapsed .icon {
transform: rotate(90deg);
position: relative;
top: 2px;
}
// Fork-awesome overrides // Fork-awesome overrides
.fa-fw { .fa-fw {

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="home"> <div class="home">
<b-list-group> <b-list-group class="menu-list">
<b-list-group-item <b-list-group-item
v-for="item in menu" v-for="item in menu"
:key="item.id" :key="item.id"
@ -36,18 +36,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-group-item {
padding: 0.75rem 0;
display: flex;
align-items: center;
}
h2 {
font-size: 1.25rem;
font-weight: 400;
margin: 0;
}
.home { .home {
margin-top: 2rem; margin-top: 2rem;
} }

View file

@ -301,33 +301,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card + .card {
margin-top: 2rem;
}
.card-header {
h2 .icon {
font-size: 1.5rem;
width: 1.5rem;
margin-right: 1.25rem;
}
}
// collapse icon
.not-collapsed .icon {
transform: rotate(-90deg);
}
.collapsed .icon {
transform: rotate(90deg);
position: relative;
top: 2px;
}
.row > div:first-child { .row > div:first-child {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
// delete modal
#delete-modal .modal-body {
display: none;
}
</style> </style>

View file

@ -1,7 +1,7 @@
<!-- FIXME make a component shared with Home.vue ? --> <!-- FIXME make a component shared with Home.vue ? -->
<template> <template>
<div class="tools-menu"> <div class="tools-menu">
<b-list-group> <b-list-group class="menu-list">
<b-list-group-item <b-list-group-item
v-for="item in menu" v-for="item in menu"
:key="item.id" :key="item.id"
@ -35,15 +35,4 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-group-item {
padding: 0.75rem 0;
display: flex;
align-items: center;
}
h2 {
font-size: 1.25rem;
font-weight: 400;
margin: 0;
}
</style> </style>