diff --git a/src/assets/styles/_components.scss b/src/assets/styles/_components.scss index 257c0f2..1e98f8f 100644 --- a/src/assets/styles/_components.scss +++ b/src/assets/styles/_components.scss @@ -1,6 +1,8 @@ +@import './components/common'; @import './components/footer'; @import './components/header'; +@import './components/policy'; @import './components/sidebar'; @import './components/swap'; @import './components/transfer'; -@import './components/tokenSelect'; \ No newline at end of file +@import './components/tokenSelect'; diff --git a/src/assets/styles/components/_common.scss b/src/assets/styles/components/_common.scss new file mode 100644 index 0000000..5ab7d4d --- /dev/null +++ b/src/assets/styles/components/_common.scss @@ -0,0 +1,14 @@ +.main-block { + padding: 54px 0 50px; + + @media (max-width: $breakpoint-xs) { + padding: 24px 0 24px; + } + + border-bottom: 1px solid #aabec8; +} + +.title { + font-size: 18px; + font-weight: 500; +} diff --git a/src/assets/styles/components/_header.scss b/src/assets/styles/components/_header.scss index 2532dad..24c7e9a 100644 --- a/src/assets/styles/components/_header.scss +++ b/src/assets/styles/components/_header.scss @@ -71,54 +71,6 @@ } .app-header { - .certificate { - display: flex; - align-items: flex-end; - gap: 10px; - - &-text { - font-size: 18px; - } - - &-loading { - position: relative; - width: 27px; - height: 27px; - - .q-inner-loading { - background: none; - } - } - - &-status { - font-size: 16px; - - &__proved { - position: relative; - display: flex; - align-items: flex-end; - gap: 8px; - - a { - width: 27px; - height: 27px; - } - - svg { - position: absolute; - bottom: -10px; - width: 22px; - height: 38px; - - path { - fill: $yellow; - } - } - - } - } - } - .notification { margin-left: auto; margin-right: 20px; diff --git a/src/assets/styles/components/_policy.scss b/src/assets/styles/components/_policy.scss new file mode 100644 index 0000000..a8d4771 --- /dev/null +++ b/src/assets/styles/components/_policy.scss @@ -0,0 +1,25 @@ +.policy-card { + .certificate { + display: flex; + align-items: flex-end; + &-status { + &__proved { + display: flex; + align-items: center; + a { + height: 64px; + display: inline-block; + text-align: center; + svg { + height: 64px; + width: 64px; + + path { + fill: $yellow; + } + } + } + } + } + } +} diff --git a/src/assets/styles/components/_swap.scss b/src/assets/styles/components/_swap.scss index f68a14f..595a257 100644 --- a/src/assets/styles/components/_swap.scss +++ b/src/assets/styles/components/_swap.scss @@ -38,12 +38,8 @@ $swap-input-focused-color: rgba($secondary, 0.7) !important; overflow: hidden; border: 1px solid $swap-card-border-color; max-width: 460px; + width: 100%; box-shadow: $swap-shadow; - margin: 80px auto 66px; - - @media (max-width: $breakpoint-xs) { - margin: 40px 0 56px; - } &__header { height: 48px; @@ -296,23 +292,6 @@ $swap-input-focused-color: rgba($secondary, 0.7) !important; margin: 0 auto; } - &::before { - content: ""; - height: 1px; - position: absolute; - top: -5px; - width: 100%; - background-color: #aabec8; - - @media (max-width: $breakpoint-md) { - width: 98%; - } - - @media (max-width: $breakpoint-xs) { - width: 100%; - } - } - &__title { padding: 20px 0; font-weight: 600; diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index e9a3801..3466d79 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -1,9 +1,9 @@