jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style and animation updates.

Browse source
This commit is contained in:
Bryan Mauger 2023-04-26 17:17:52 -04:00
parent 8af6ec853d
commit 4e87b2fd9f
2 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/digital-components/date-picker/date-picker.vue
View file

@ -54,7 +54,6 @@
</label> </label>
</div> </div>
</div> </div>
<div id="bottom-spacer"></div>
</fieldset> </fieldset>
<button <button
v-if="calendarViewDirection === 'future'" v-if="calendarViewDirection === 'future'"
@ -517,7 +516,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#tracker { #tracker {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -536,18 +534,19 @@ export default {
.date-picker { .date-picker {
// == ATTEMPT 3 // == ATTEMPT 3
overflow: hidden; overflow: hidden;
max-height: 60vh; // IS THIS NEEDED EVEN? //max-height: 60vh; // IS THIS NEEDED EVEN?
position: relative; position: relative;
height: 100%;
fieldset { fieldset {
overflow-y: scroll; overflow-y: auto;
height: 54vh; height: 88%;
} }
.calendar-grid-container { .calendar-grid-container {
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
max-width: 414px; max-width: 414px;
max-height: 500px; //max-height: 500px;
overflow: hidden; //overflow: hidden;
// transition: all ease 1s; // transition: all ease 1s;
transition: height ease 2s, opacity ease 2s; transition: height ease 2s, opacity ease 2s;
display: grid; display: grid;
@ -555,6 +554,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 0.75rem; padding: 0 0.75rem;
opacity: 1;
.grid-item { .grid-item {
text-align: center; text-align: center;
@ -617,7 +617,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
outline: none; outline: none;
height: 2rem; height: 1.35rem;
opacity: 1; opacity: 1;
transition: ease all 250ms; transition: ease all 250ms;
@ -679,9 +679,9 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 40px; width: 36px;
height: 40px; height: 36px;
min-width: 40px; min-width: 36px;
border-radius: 50%; border-radius: 50%;
span { span {
@ -771,7 +771,7 @@ export default {
} }
} }
&.month-hidden { &.month-hidden {
visibility: hidden; opacity: 0;
max-height: 0; max-height: 0;
} }
} }
@ -784,6 +784,8 @@ export default {
font-weight: 500; font-weight: 500;
text-underline-offset: 4px; text-underline-offset: 4px;
box-shadow: none !important; // TODO: FIX THIS box-shadow: none !important; // TODO: FIX THIS
position: absolute;
top: 90%;
} }
.past { .past {

6
src/layouts/demo-date-picker/demo-date-picker.vue
View file

@ -84,7 +84,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
// .page-container-grouped-styles { // .page-container-grouped-styles {
// padding: 0 .5rem !important; // padding: 0 .5rem !important;
// } // }
</style> </style>