diff --git a/src/styles/global.scss b/src/styles/global.scss index 5b5a04f..72bd537 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,5 @@ @import "./media-queries.scss"; +@import "./variables.scss"; @font-face { font-family: "knowit"; @@ -41,3 +42,102 @@ body { font-size: 1.15rem; } } + +.label-div { + display: flex; + flex-direction: column; + justify-content: space-between; + + label { + margin-bottom: 0.25rem; + font-weight: 600; + text-transform: uppercase; + } + + input { + margin: 0; + margin-bottom: auto; + height: 2rem; + padding: 0.5rem; + min-width: 0; + width: 98%; + padding: 1%; + } +} + +.button-container { + display: flex; + justify-content: center; + flex-direction: row; + + > *:not(:last-child) { + margin-right: 2rem; + } + + @include mobile &:not(.row) { + flex-direction: column; + align-items: center; + + > *:not(:last-child) { + margin-right: unset; + margin-bottom: .75rem; + } + } +} + +input, textarea { + border-radius: 0; + box-shadow: none; + -webkit-appearance: none; + font-size: 1.1rem; + border: 1px solid rgba(#333333, 0.3); +} + +.vin-button { + font-family: Arial; + $color: #b7debd; + position: relative; + display: inline-block; + background: $color; + color: #333; + padding: 10px 30px; + margin: 0; + border: 0; + width: fit-content; + font-size: 1.3rem; + height: 4rem; + max-height: 4rem; + cursor: pointer; + font-weight: 500; + transition: transform 0.5s ease; + -webkit-font-smoothing: antialiased; + + // disable-dbl-tap-zoom + touch-action: manipulation; + + &::after { + content: ''; + position: absolute; + transition: opacity 0.3s ease-in-out; + z-index: -1; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.07), + 0 2px 4px rgba(0,0,0,0.07), + 0 4px 8px rgba(0,0,0,0.07), + 0 8px 16px rgba(0,0,0,0.07), + 0 16px 32px rgba(0,0,0,0.07), + 0 32px 64px rgba(0,0,0,0.07); + } + + &:hover { + transform: scale(1.02) translateZ(0); + + &::after { + opacity: 1; + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e70104d..5dc5d05 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,3 +1,5 @@ +$primary: #dbeede; + $light-green: #c8f9df; $green: #0be881; $dark-green: #0ed277; diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue index ba10ad9..1463c49 100644 --- a/src/ui/Banner.vue +++ b/src/ui/Banner.vue @@ -101,6 +101,7 @@ export default {