feat: merge switch-view.scss with component styles
This commit is contained in:
parent
370186726a
commit
55bed2e5e8
3 changed files with 45 additions and 44 deletions
|
@ -1,7 +1,6 @@
|
|||
@import "tooltip";
|
||||
@import "labels";
|
||||
@import "list";
|
||||
@import "switch-view";
|
||||
@import "task";
|
||||
@import "taskRelations";
|
||||
@import "tasks";
|
||||
|
|
|
@ -1,43 +0,0 @@
|
|||
.switch-view {
|
||||
background: $white;
|
||||
display: inline-flex;
|
||||
border-radius: $radius;
|
||||
font-size: .75rem;
|
||||
box-shadow: $shadow-sm;
|
||||
height: $switch-view-height;
|
||||
margin-bottom: 1rem;
|
||||
padding: .5rem;
|
||||
|
||||
a {
|
||||
padding: .25rem .5rem;
|
||||
display: block;
|
||||
border-radius: $radius;
|
||||
|
||||
transition: all 100ms;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
font-weight: bold;
|
||||
box-shadow: $shadow-xs;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.switch-view-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
|
@ -150,6 +150,51 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.switch-view-container {
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-view {
|
||||
background: $white;
|
||||
display: inline-flex;
|
||||
border-radius: $radius;
|
||||
font-size: .75rem;
|
||||
box-shadow: $shadow-sm;
|
||||
height: $switch-view-height;
|
||||
margin-bottom: 1rem;
|
||||
padding: .5rem;
|
||||
|
||||
a {
|
||||
padding: .25rem .5rem;
|
||||
display: block;
|
||||
border-radius: $radius;
|
||||
|
||||
transition: all 100ms;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
font-weight: bold;
|
||||
box-shadow: $shadow-xs;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-archived .notification.is-warning {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue