From c20d518413e433bf07534254d68a52030816860f Mon Sep 17 00:00:00 2001 From: Danil Kovtonyuk Date: Tue, 13 Oct 2020 17:49:08 +1000 Subject: [PATCH] update header scroll top steps --- assets/styles/app.scss | 10 ++------ assets/styles/components/_base.scss | 5 ++++ assets/styles/components/_button.scss | 4 +-- assets/styles/components/_header.scss | 4 +++ assets/styles/components/_icons.scss | 8 ++++++ assets/styles/components/_step.scss | 9 +++++++ components/Navbar.vue | 34 +++++++++++++++++++++++++ components/Step.vue | 2 +- components/Steps.vue | 36 +++++++++++++++++++++++++++ pages/index.vue | 23 +++++++++++++++-- 10 files changed, 122 insertions(+), 13 deletions(-) diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 04d5399..219f4be 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -3,9 +3,8 @@ flex-direction: column; min-height: 100vh; - @media print { - background: none; - } + background: linear-gradient(180deg, #181818 0%, #000000 100%); + background-attachment: fixed; > .main-content { flex: 1; @@ -19,11 +18,6 @@ @import 'components/step'; @import 'components/header'; -html { - background: linear-gradient(180deg, #181818 0%, #000000 100%); - background-attachment: fixed; -} - .title { span { color: $primary; diff --git a/assets/styles/components/_base.scss b/assets/styles/components/_base.scss index 6a1f29f..c75729a 100644 --- a/assets/styles/components/_base.scss +++ b/assets/styles/components/_base.scss @@ -1,3 +1,8 @@ +$control-height: 2.438rem; +$control-border-width: 1px; +$control-padding-vertical: calc(0.375rem - #{$control-border-width}); +$control-padding-horizontal: calc(1.063rem - #{$control-border-width}); + $primary: #44F1A6; $primary-invert: #000000; diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss index ca1897e..56babea 100644 --- a/assets/styles/components/_button.scss +++ b/assets/styles/components/_button.scss @@ -25,11 +25,11 @@ .icon { &:first-child:not(:last-child) { - margin-left: -0.25em; + margin-left: -0.15em; margin-right: 0.5em; } &:last-child:not(:first-child) { margin-left: 0.5em; - margin-right: -0.25em; } + margin-right: -0.15em; } &:first-child:last-child { margin-left: 0; margin-right: 0; } diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss index 236ef19..5636872 100644 --- a/assets/styles/components/_header.scss +++ b/assets/styles/components/_header.scss @@ -23,4 +23,8 @@ .logo { height: 40px; } + + .navbar-item { + font-size: 0.875rem + } } diff --git a/assets/styles/components/_icons.scss b/assets/styles/components/_icons.scss index 854fffc..8b2e1cb 100644 --- a/assets/styles/components/_icons.scss +++ b/assets/styles/components/_icons.scss @@ -18,4 +18,12 @@ &-check { mask-image: url('../images/icons/check.svg'); } + + &-wallet { + mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12H13C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H11Z' fill='%230E1633'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H14C16.2092 18 18 16.2091 18 14V8C18 5.79086 16.2092 4 14 4H12C12 1.79086 10.2092 0 8 0H4ZM2 6V14C2 15.1046 2.89545 16 4 16H14C15.1046 16 16 15.1046 16 14V8C16 6.89543 15.1046 6 14 6H2ZM2 4C2 2.89543 2.89545 2 4 2H8C9.10455 2 10 2.89543 10 4H2Z' fill='%230E1633'/%3E%3C/svg%3E"); + } + + &-logout { + mask-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H10C10.5523 18 11 17.5523 11 17C11 16.4477 10.5523 16 10 16H4C2.89545 16 2 15.1046 2 14V4C2 2.89543 2.89545 2 4 2H10C10.5523 2 11 1.55228 11 1C11 0.447716 10.5523 0 10 0H4Z' fill='%230E1633'/%3E%3Cpath d='M15.1213 5.70708C14.7308 5.31655 14.0976 5.31655 13.7071 5.70708C13.3165 6.0976 13.3165 6.73077 13.7071 7.12129L14.5858 7.99997H6C5.44769 7.99997 5 8.44769 5 8.99997C5 9.55225 5.44769 9.99997 6 9.99997H14.6406L13.707 10.9336C13.3165 11.3241 13.3165 11.9571 13.707 12.3476C14.0975 12.7381 14.7306 12.7381 15.1211 12.3476L17.7148 9.75388C17.9575 9.51125 18.0494 9.17508 17.9905 8.86153C17.9597 8.63882 17.8555 8.43955 17.7031 8.28889L15.1213 5.70708Z' fill='%230E1633'/%3E%3C/svg%3E%0A"); + } } diff --git a/assets/styles/components/_step.scss b/assets/styles/components/_step.scss index bcf53b5..3dc8f4e 100644 --- a/assets/styles/components/_step.scss +++ b/assets/styles/components/_step.scss @@ -1,3 +1,7 @@ +.steps { + padding-top: 1.25rem; +} + .step { margin: 1.25rem 0; background: #1F1F1F; @@ -7,6 +11,11 @@ align-items: center; overflow: hidden; + &:first-child { + margin-top: 0; + } + + .diamond { margin-right: 1.25rem; } diff --git a/components/Navbar.vue b/components/Navbar.vue index 0659442..d6d31f3 100644 --- a/components/Navbar.vue +++ b/components/Navbar.vue @@ -5,6 +5,31 @@ + + @@ -15,5 +40,14 @@ export default { components: { Logo, }, + data() { + return { + isLoggedIn: false, + } + }, + methods: { + onLogIn() {}, + onLogOut() {}, + }, } diff --git a/components/Step.vue b/components/Step.vue index 925168f..45e6289 100644 --- a/components/Step.vue +++ b/components/Step.vue @@ -1,6 +1,6 @@ @@ -25,5 +32,17 @@ export default { components: { Steps, }, + methods: { + scrollTo(element) { + window.scrollTo({ + behavior: 'smooth', + left: 0, + top: element.getBoundingClientRect().top, + }) + }, + onStart() { + this.scrollTo(this.$refs.steps.$el) + }, + }, }