diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss new file mode 100644 index 00000000..47034ccd --- /dev/null +++ b/src/assets/scss/_animations.scss @@ -0,0 +1,17 @@ +// Animations on load +@media screen and (prefers-reduced-motion: no-preference) { + .appear-from-top { + animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86); + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-1rem); + } + to { + opacity: 1; + transform: translateY(0); + } + } +} diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss index 8433d535..2f9e80ab 100644 --- a/src/assets/scss/_buttons.scss +++ b/src/assets/scss/_buttons.scss @@ -78,4 +78,48 @@ &.btn-shadow { box-shadow: rgba(0, 0, 0, 0.15) 0 .2rem .3rem; } +} + +.btn-round { + display: grid; + place-items: center; + height: 45px; + aspect-ratio: 1; + background-color: var(--white); + border: 1px solid var(--slate-400); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + border-radius: 100vmax; + pointer-events: all; + cursor: pointer; + outline: .2rem solid transparent; + transition-property: color, background-color, border-color, outline-color; + transition-duration: .15s; + transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); + + svg { + width: 1.15em; + transition-property: fill; + transition-duration: .15s; + transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + + &:hover, + &:focus-visible { + outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent); + border-color: var(--blue-500); + + svg { + fill: var(--blue-500); + } + } + + &.active { + color: var(--white); + background-color: var(--blue-500); + border-color: var(--blue-700); + + svg { + fill: var(--white); + } + } } \ No newline at end of file diff --git a/src/assets/scss/_card.scss b/src/assets/scss/_card.scss index 5c823f35..efe9f39b 100644 --- a/src/assets/scss/_card.scss +++ b/src/assets/scss/_card.scss @@ -3,9 +3,16 @@ padding-inline: .75rem; border-radius: 8px; background-color: var(--white); + border: 1px solid var(--slate-100); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; min-width: 15rem; .card-arrow { fill: var(--white); } + + &.p-sm { + min-width: fit-content; + padding: .5rem .25rem; + } } diff --git a/src/assets/scss/_map.scss b/src/assets/scss/_map.scss new file mode 100644 index 00000000..c647af20 --- /dev/null +++ b/src/assets/scss/_map.scss @@ -0,0 +1,3 @@ +// :root { +// --sidebar-size: 3rem; +// } diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index a85a0ea3..2711edb5 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -4,8 +4,10 @@ @use 'leaflet'; @use 'forms'; +@use 'animations'; @use 'buttons'; @use 'card'; +@use 'map'; :root { --white: #fff; diff --git a/src/components/maps/Map.astro b/src/components/maps/Map.astro index 5891ad65..2e3c6f98 100644 --- a/src/components/maps/Map.astro +++ b/src/components/maps/Map.astro @@ -4,6 +4,7 @@ import type { MapProps } from '@/types/Map'; import MarkerCreator from './overlay/MarkerCreator.vue'; import { t } from '@/i18n/store'; import { getLangFromUrl } from '@/i18n/utils'; +import MapActions from './MapActions.astro'; interface Props extends MapProps {} @@ -26,10 +27,12 @@ const byText = t('common.by', lang) const seeMapText = t('maps.go-to-map', lang) --- -
-
- - +
+
+
+ + +
+ + + + diff --git a/src/components/maps/overlay/LangSwitcherButton.vue b/src/components/maps/overlay/LangSwitcherButton.vue new file mode 100644 index 00000000..93893938 --- /dev/null +++ b/src/components/maps/overlay/LangSwitcherButton.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue index bafbb941..6d0f8279 100644 --- a/src/components/maps/overlay/SearchMapSwitch.vue +++ b/src/components/maps/overlay/SearchMapSwitch.vue @@ -96,7 +96,7 @@ const menus: Menu[] = [ - +