local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: merge datepicker.scss styles with component

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:20:16 +02:00
parent 46ebd45a74
commit 3cb68c945f
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
3 changed files with 76 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/input/datepicker.vue
View file

@ -243,3 +243,79 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped>
// FIXME: should be @use so that classes dont get imported twice
@import "bulma/sass/components/card.sass";
// needed for
// - $card-shadow
.datepicker {
input.input {
display: none;
}
&.disabled a {
cursor: default;
}
.datepicker-popup {
position: absolute;
z-index: 99;
width: 320px;
background: $white;
border-radius: $radius;
box-shadow: $card-shadow;
@media screen and (max-width: ($tablet)) {
width: calc(100vw - 5rem);
}
a:not(.button) {
display: flex;
align-items: center;
padding: 0 .5rem;
width: 100%;
height: 2.25rem;
color: $text;
transition: all $transition;
&:first-child {
border-radius: $radius $radius 0 0;
}
&:hover {
background: $light;
}
.text {
width: 100%;
font-size: .85rem;
display: flex;
justify-content: space-between;
padding-right: .25rem;
.weekday {
color: $text-light;
text-transform: capitalize;
}
}
.icon {
width: 2rem;
text-align: center;
}
}
a.button {
margin: 1rem;
width: calc(100% - 2rem);
}
::v-deep .flatpickr-calendar {
margin: 0 auto 8px;
box-shadow: none;
}
}
}
</style>

1
src/styles/components/_index.scss
View file

@ -15,6 +15,5 @@
@import "namespaces"; @import "namespaces";
@import "legal"; @import "legal";
@import "keyboard-shortcuts"; @import "keyboard-shortcuts";
@import "datepicker";
@import "notifications"; @import "notifications";
@import "quick-actions"; @import "quick-actions";

68
src/styles/components/datepicker.scss
View file

@ -1,68 +0,0 @@
.datepicker {
input.input {
display: none;
}
&.disabled a {
cursor: default;
}
.datepicker-popup {
position: absolute;
z-index: 99;
width: 320px;
background: $white;
border-radius: $radius;
box-shadow: $card-shadow;
a:not(.button) {
display: flex;
align-items: center;
padding: 0 .5rem;
width: 100%;
height: 2.25rem;
color: $text;
transition: all $transition;
&:first-child {
border-radius: $radius $radius 0 0;
}
&:hover {
background: $light;
}
.text {
width: 100%;
font-size: .85rem;
display: flex;
justify-content: space-between;
padding-right: .25rem;
.weekday {
color: $text-light;
text-transform: capitalize;
}
}
.icon {
width: 2rem;
text-align: center;
}
}
a.button {
margin: 1rem;
width: calc(100% - 2rem);
}
.flatpickr-calendar {
margin: 0 auto 8px;
box-shadow: none;
}
@media screen and (max-width: ($tablet)) {
width: calc(100vw - 5rem);
}
}
}