diff --git a/apps/explorer_web/assets/css/_content.scss b/apps/explorer_web/assets/css/_content.scss deleted file mode 100644 index 3bf4a41ac8..0000000000 --- a/apps/explorer_web/assets/css/_content.scss +++ /dev/null @@ -1,74 +0,0 @@ -.content-wrapper { - display: flex; - align-items: stretch; - min-height: 100vh; -} - -#content { - flex-grow: 1; - display: flex; - flex-direction: column; -} - -.content-container { - flex-grow: 1; - padding-top: 85px; -} - -.content-header { - display: flex; - position: fixed; - width: 100%; - z-index: 1001; -} - -.container { - - &__section { - display: block; - padding: 0 15px; - margin: 0 10px; - } -} - -@media (max-width: 768px) { - - #content { - height: 100%; - } -} - - -@media (min-width: 768px) { - - .content-header { - width: 100%; - } - - .content-container { - padding-top: 155px; - } - - .container { - - &__section { - &--partitioned { - display: flex; - justify-content: space-between; - align-items: stretch; - } - } - - &__subsection { - flex: 1; - - &-chain { - margin: 10px 5px; - } - } - } -} - -.has-error { - color: $red; -} diff --git a/apps/explorer_web/assets/css/_layout.scss b/apps/explorer_web/assets/css/_layout.scss new file mode 100644 index 0000000000..fe21d3d162 --- /dev/null +++ b/apps/explorer_web/assets/css/_layout.scss @@ -0,0 +1,9 @@ +.layout-container { + display: flex; + flex-direction: column; + min-height: 100vh; + + main { + flex-grow: 1; + } +} diff --git a/apps/explorer_web/assets/css/_tooltip.scss b/apps/explorer_web/assets/css/_tooltip.scss index 1286ebfcf9..e69de29bb2 100644 --- a/apps/explorer_web/assets/css/_tooltip.scss +++ b/apps/explorer_web/assets/css/_tooltip.scss @@ -1,115 +0,0 @@ -// Base class -.tooltip { - position: absolute; - z-index: $zindex-tooltip; - display: block; - margin: $tooltip-margin; - // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. - // So reset our font and text properties to avoid inheriting weird values. - @include reset-text(); - font-size: $tooltip-font-size; - // Allow breaking very long words so they don't overflow the tooltip's bounds - word-wrap: break-word; - opacity: 0; - - &.show { opacity: $tooltip-opacity; } - - .arrow { - position: absolute; - display: block; - width: $tooltip-arrow-width; - height: $tooltip-arrow-height; - - &::before { - position: absolute; - content: ""; - border-color: transparent; - border-style: solid; - } - } -} - -.bs-tooltip-top { - padding: $tooltip-arrow-height 0; - - .arrow { - bottom: 0; - - &::before { - top: 0; - border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; - border-top-color: $tooltip-arrow-color; - } - } -} - -.bs-tooltip-right { - padding: 0 $tooltip-arrow-height; - - .arrow { - left: 0; - width: $tooltip-arrow-height; - height: $tooltip-arrow-width; - - &::before { - right: 0; - border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; - border-right-color: $tooltip-arrow-color; - } - } -} - -.bs-tooltip-bottom { - padding: $tooltip-arrow-height 0; - - .arrow { - top: 0; - - &::before { - bottom: 0; - border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; - border-bottom-color: $tooltip-arrow-color; - } - } -} - -.bs-tooltip-left { - padding: 0 $tooltip-arrow-height; - - .arrow { - right: 0; - width: $tooltip-arrow-height; - height: $tooltip-arrow-width; - - &::before { - left: 0; - border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; - border-left-color: $tooltip-arrow-color; - } - } -} - -.bs-tooltip-auto { - &[x-placement^="top"] { - @extend .bs-tooltip-top; - } - &[x-placement^="right"] { - @extend .bs-tooltip-right; - } - &[x-placement^="bottom"] { - @extend .bs-tooltip-bottom; - } - &[x-placement^="left"] { - @extend .bs-tooltip-left; - } -} - -// Wrapper for the tooltip content -.tooltip-inner { - max-width: $tooltip-max-width; - padding: $tooltip-padding-y $tooltip-padding-x; - color: $tooltip-color; - text-align: center; - background-color: $tooltip-bg; - @include border-radius($tooltip-border-radius); -} diff --git a/apps/explorer_web/assets/css/_utilities.scss b/apps/explorer_web/assets/css/_utilities.scss deleted file mode 100644 index 95374c8222..0000000000 --- a/apps/explorer_web/assets/css/_utilities.scss +++ /dev/null @@ -1,625 +0,0 @@ -$shove-size: 100px; -$push-size: 50px; -$push-size-lg: 75px; -$push-size-md: 35px; -$u-push-this: 25px; -$push-size-sm: 15px; -$nudge-more-size: 10px; -$nudge-size: 5px; - - -$padding-lg: 50px; -$padding-md: 30px; -$padding-sm: 15px; -$padding-xs-plus: 10px; -$padding-xs: 5px; - - - -// Width --------------------------------------------------- - -.u-width { - &--half { - width: 50%; - } -} - -// Margin -------------------------------------------------- - -.u-shove { - margin: $shove-size; - @media screen and (max-width: 768px) {margin: $shove-size * 0.5;} - - &-vertical { - margin-top: $shove-size; - margin-bottom: $shove-size; - @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5; margin-bottom: $shove-size * 0.5;} - } - - &-top { - margin-top: $shove-size !important; - @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5;} - } - - &-bottom { - margin-bottom: $shove-size; - @media screen and (max-width: 768px) {margin-bottom: $shove-size * 0.5;} - } - - &-left { - margin-left: $shove-size; - @media screen and (max-width: 768px) {margin-left: $shove-size * 0.5;} - } - - &-right { - margin-right: $shove-size; - @media screen and (max-width: 768px) {margin-right: $shove-size * 0.5;} - } -} - - -.u-push { - margin: $push-size; - @media screen and (max-width: 768px) {margin: $push-size * 0.5;} - - &-vertical { - margin-top: $push-size; - margin-bottom: $push-size; - @media screen and (max-width: 768px) {margin-top: $push-size * 0.5; margin-bottom: $push-size * 0.5;} - } - &-top { - margin-top: $push-size !important; - @media screen and (max-width: 768px) {margin-top: $push-size * 0.5;} - } - - &-bottom { - margin-bottom: $push-size; - @media screen and (max-width: 768px) {margin-bottom: $push-size * 0.5;} - } - - &-left { - margin-left: $push-size !important; - @media screen and (max-width: 768px) {margin-left: $push-size * 0.5;} - } - - &-right { - margin-right: $push-size; - @media screen and (max-width: 768px) {margin-right: $push-size * 0.5;} - } -} - -.u-push-md { - margin: $push-size-md; - - &-vertical { - margin-top: $push-size-md; - margin-bottom: $push-size-md; - } - &-top { - margin-top: $push-size-md; - } - - &-bottom { - margin-bottom: $push-size-md; - } - - &-left { - margin-left: $push-size-md; - } - - &-right { - margin-right: $push-size-md; - } - -} - -.u-push-lg { - margin: $push-size-lg; - - &-vertical { - margin-top: $push-size-lg; - margin-bottom: $push-size-lg; - } - &-top { - margin-top: $push-size-lg; - } - - &-bottom { - margin-bottom: $push-size-lg; - @media screen and (max-width: 768px) {margin-bottom: $push-size-lg * 0.5;} - } - - &-left { - margin-left: $push-size-lg; - } - - &-right { - margin-right: $push-size-lg; - } - -} - -.u-push-sm { - margin: $push-size-sm; - - &-vertical { - margin-top: $push-size-sm; - margin-bottom: $push-size-sm; - } - &-top { - margin-top: $push-size-sm !important; - } - - &-bottom { - margin-bottom: $push-size-sm !important; - } - - &-left { - margin-left: $push-size-sm; - } - - &-right { - margin-right: $push-size-sm; - } - -} - -.u-nudge { - margin: $nudge-size; - - &-vertical { - margin-top: $nudge-size; - margin-bottom: $nudge-size; - } - &-top { - margin-top: $nudge-size; - } - - &-bottom { - margin-bottom: $nudge-size; - } - - &-left { - margin-left: $nudge-size; - } - - &-right { - margin-right: $nudge-size; - } -} - -.u-nudge-more { - margin: $nudge-more-size; - - &-vertical { - margin-top: $nudge-more-size; - margin-bottom: $nudge-more-size; - } - &-top { - margin-top: $nudge-more-size; - } - - &-bottom { - margin-bottom: $nudge-more-size; - } - - &-left { - margin-left: $nudge-more-size; - } - - &-right { - margin-right: $nudge-more-size; - } -} - -.u-push-this { - margin: $u-push-this; - - &-vertical { - margin-top: $u-push-this; - margin-bottom: $u-push-this; - } - &-top { - margin-top: $u-push-this; - } - - &-bottom { - margin-bottom: $u-push-this; - } - - &-left { - margin-left: $u-push-this; - } - - &-right { - margin-right: $u-push-this; - } -} - - -.u-flush { - margin: 0 !important; - - &-sm { - margin: 4px 0 4px 0; - } - - &-btm { - margin-bottom: 0 !important; - } - - &-top { - margin-top: 0 !important; - } -} - -// Padding -------------------------------------------------- - -.u-padding { - - &-none { - padding: 0px !important; - } - - &-no-left { - padding-left: 0px !important; - } - - &-no-right { - padding-right: 0px !important; - } - - &-no-bottom { - padding-bottom: 0px !important; - } - - &-xsmall { - padding: $padding-xs; - - &-vertical { - padding-top: $padding-xs; - padding-bottom: $padding-xs; - } - - &-top { - padding-top: $padding-xs; - } - - &-bottom { - padding-bottom: $padding-xs; - } - - &-left { - padding-left: $padding-xs; - } - - &-right { - padding-right: $padding-xs; - } - } - - &-xs-plus { - padding: $padding-xs-plus; - - &-vertical { - padding-top: $padding-xs-plus; - padding-bottom: $padding-xs-plus; - } - - &-top { - padding-top: $padding-xs-plus; - } - - &-bottom { - padding-bottom: $padding-xs-plus; - } - - &-left { - padding-left: $padding-xs-plus; - } - - &-right { - padding-right: $padding-xs-plus; - } - } - - &-sm { - padding: $padding-sm; - - &-vertical { - padding-top: $padding-sm; - padding-bottom: $padding-sm; - } - - &-top { - padding-top: $padding-sm; - } - - &-bottom { - padding-bottom: $padding-sm; - } - - &-left { - padding-left: $padding-sm !important; - } - - &-right { - padding-right: $padding-sm; - } - } - - &-md { - padding: $padding-md; - - &-vertical { - padding-top: $padding-md; - padding-bottom: $padding-md; - } - - &-top { - padding-top: $padding-md; - } - - &-bottom { - padding-bottom: $padding-md; - } - - &-left { - padding-left: $padding-md; - } - - &-right { - padding-right: $padding-md; - } - } - - &-lg { - padding: $padding-lg; - - &-vertical { - padding-top: $padding-lg; - padding-bottom: $padding-lg; - } - - &-top { - padding-top: $padding-lg; - } - - &-bottom { - padding-bottom: $padding-lg; - } - - &-left { - padding-left: $padding-lg; - } - - &-right { - padding-right: $padding-lg; - } - } -} - - - -// Element Alignment -------------------------------------------- - -.u-clear { - clear: both; -} - -%u-align { - display: flex; - flex-flow: row wrap; - justify-content: center; -} - -.u-align { - @extend %u-align; - - &--top { - align-self: flex-start; - } - - &--center { - align-self: center; - } - - &--bottom { - align-self: flex-end; - } - - &--stretch { - align-self: stretch; - } - - &--flex{ - display: flex; - } - - &__vertical { - display: flex; - flex-flow: column nowrap; - } - - &__order-1 { - order: 1; - } - - &__order-2 { - order: 2; - } - - &__order-3 { - order: 3; - } - - &__flex-grow { - flex-grow: 1; - } -} - -// Border -------------------------------------------------- - -.u-border { - border: 1px solid $primary; - - &-left { - border-left: 1px solid lighten($gray-300, 42%); - } - - &-right { - border-right: 1px solid lighten($gray-300, 42%); - } - - &-top { - border-top: 1px solid lighten($primary, 40%); - } - - &-bottom { - border-bottom: 1px solid lighten($primary, 40%); - - &-bold { - border-bottom: 2px solid lighten($gray-300, 32%); - } - } - - &-no-right { - border-right: none; - } - - &-no-left { - border-left: none; - } - - &-no-top { - border-top: none; - } - - &-no-bottom { - border-bottom: none !important; - } - - &-none { - border: none !important; - } -} - -// Typography -------------------------------------------------- - -.u-text { - &-center { - text-align: center; - } - - &-right { - text-align: right; - } - - &-left { - text-align: left; - - } -} - -.u-hide { - display: none; -} - -.u-italic { - font-style: italic; -} - -.u-underline { - text-decoration: underline; -} - -.u-list-style { - &--none { - list-style-type: none; - padding-left: 0; - - &> li { - margin-bottom: 1em; - } - } -} - -.u-white-space-normal { - white-space: normal; -} - -// Display ----------------------------------------------- - -.u-inline { - display: inline-block; -} - -.u-block { - display: block; -} - -.u-truncate { - height: 9em; /*line-height multiplied by the number of lines to show (6)*/ - line-height: 1.5em; - overflow: hidden; - position: relative; - - &:after { - content: ""; - position: absolute; - bottom: 0; - right: 0; - height: 50%; - width: 100%; - background: linear-gradient(to bottom, rgba($white, 0), rgba($white, 1) 100%); - } - -} - -// Float ----------------------------------------------- - -.u-float-left { - float: left !important; -} - -.u-float-right { - float: right !important; -} - -.u-float-none { - float: none; -} - -.u-margin-auto { - margin: 0px auto; -} - - -// Bootstrap Column Extension -------------------------- -// Where Lauren adds some nonsense to slap some utilities -// together to add bottom margins for mobile columns. - -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12 { - @media (max-width: 768px) { - &--mb1 { - margin-bottom: 5px; - } - &--mb2 { - margin-bottom: 15px; - } - &--mb3 { - margin-bottom: 30px; - } - } -} diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss index aadecd432b..3c2eab190e 100644 --- a/apps/explorer_web/assets/css/app.scss +++ b/apps/explorer_web/assets/css/app.scss @@ -1,4 +1,3 @@ -@import "explorer/all"; /* Phoenix flash messages */ .alert:empty { display: none; } @@ -29,30 +28,29 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/utilities/sizing"; @import "node_modules/bootstrap/scss/utilities/display"; @import "node_modules/bootstrap/scss/utilities/flex"; +@import "node_modules/bootstrap/scss/utilities/float"; @import "node_modules/bootstrap/scss/utilities/text"; @import "node_modules/bootstrap/scss/utilities/background"; +@import "node_modules/bootstrap/scss/utilities/position"; // Bootstrap Components @import "node_modules/bootstrap/scss/dropdown"; @import "node_modules/bootstrap/scss/transitions"; @import "node_modules/bootstrap/scss/tables"; @import "node_modules/bootstrap/scss/nav"; +@import "node_modules/bootstrap/scss/navbar"; @import "node_modules/bootstrap/scss/card"; @import "node_modules/bootstrap/scss/forms"; +@import "node_modules/bootstrap/scss/tooltip"; //Custom theme -@import "theme/theme_ribbon"; @import "theme/fonts"; // Custom SCSS -@import "content"; -@import "utilities"; @import "typography"; @import "tooltip"; @import "code"; @import "components/panels"; -@import "components/header"; -@import "components/sidebar"; @import "components/nav_tabs"; @import "components/chain"; @import "components/dot"; @@ -63,6 +61,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/button"; @import "components/table"; @import "components/qr-code"; +@import "components/navbar"; +@import "layout"; + :export { primary: $primary; diff --git a/apps/explorer_web/assets/css/components/_chain.scss b/apps/explorer_web/assets/css/components/_chain.scss index ca864a52b6..f42d06171e 100644 --- a/apps/explorer_web/assets/css/components/_chain.scss +++ b/apps/explorer_web/assets/css/components/_chain.scss @@ -1,5 +1,4 @@ .chain { - @extend %paper; justify-conntent: space-around; align-items: flex-start; padding: explorer-size(0) 0; @@ -61,7 +60,7 @@ } } -@media (min-width: $explorer-breakpoint-md) { +@include media-breakpoint-up(md) { .container__stats { color: $gray-500; diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss index 8b6878a608..3b40d5a8ad 100644 --- a/apps/explorer_web/assets/css/components/_footer.scss +++ b/apps/explorer_web/assets/css/components/_footer.scss @@ -1,16 +1,51 @@ +$footer-height: 4rem; +$footer-padding: 1em; +$social-link-size: 2rem; +$footer-text-color: rgba($white, 0.7); + .footer { font-size: 12px; - display: block; - bottom: 0; - background: $gray-100; - color:$gray-600; + background: $primary; + color: $footer-text-color; text-align: center; - margin-top: 15px; - padding: 14px; - height: 50px; + margin-top: $footer-padding; + padding: $footer-padding; + position: relative; + line-height: $social-link-size; @media (max-width: 768px) { width: 100%; } } + +.footer-body { + position: relative; +} + +.footer .social-links { + position: absolute; + right: 0; + display: flex; + flex-direction: row; + align-items: center; + + & > a { + display: flex; + align-items: center; + justify-content: center; + width: $social-link-size; + height: $social-link-size; + margin: 0 $footer-padding; + color: $footer-text-color; + background-color: rgba($white, 0.25); + border-radius: 50%; + transition: all 0.1s ease; + + &:hover { + background-color: $white; + color: $primary; + text-decoration: none; + } + } +} diff --git a/apps/explorer_web/assets/css/components/_header.scss b/apps/explorer_web/assets/css/components/_header.scss deleted file mode 100644 index b9aa40a64c..0000000000 --- a/apps/explorer_web/assets/css/components/_header.scss +++ /dev/null @@ -1,122 +0,0 @@ -.header { - background: $gray-100; - box-shadow: 0 2px 2px 0 rgba($gray-900, 0.16), - 0 0px 2px 0 rgba($gray-900, 0.12); - top: 0; - left: 0; - right: 0; - width: 100%; - - &__row { - vertical-align: middle; - display: flex; - - &--theme { - display: none; - } - - &--search { - background-color: $secondary; - padding: 5px; - } - } - - &__cell { - - &--links { - display: flex; - padding: 15px 25px; - - img { - height: 20px; - } - - i { - font-size: 1.55em; - color: $gray-500; - - } - } - - &--search { - font-size: 12px; - width: 75%; - height: 45px; - margin: 3px; - - &-form { - position: relative; - border: 1px solid darken($secondary, 35%); - } - - &-glass { - height: 15px; - width: 15px; - position: absolute; - top: 18px; - left: 16px; - opacity: 0.5; - color: darken($secondary, 45%); - } - - &-input { - width: 100%; - border: none; - background-color: transparent; - height: 45px; - padding-left: 45px; - - - &[placeholder] { - text-overflow: ellipsis; - } - } - } - } -} - -input::-webkit-input-placeholder { - color: darken($secondary, 75%); -} - -@media (max-width: 768px) { - .header { - &__row { - - &--topnav { - display: none; - } - - &--theme { - background-color: $primary; - padding: 5px; - } - } - - &__cell { - - &--search { - padding-left: 8px; - width: 95%; - height: 50px; - margin: 3px 0px; - } - } - } -} - -.topnav-dropdown { - background: $gray-100; - width: 85px; - border: none; - transform: translate3d(48px, 35px, 0px) !important; -} - -.topnav-dropdown-items { - padding-left: 12px; -} - -.topnav-nav-link { - margin-top: 3px; - color: $gray-800; -} diff --git a/apps/explorer_web/assets/css/components/_navbar.scss b/apps/explorer_web/assets/css/components/_navbar.scss new file mode 100644 index 0000000000..ad300ee2f5 --- /dev/null +++ b/apps/explorer_web/assets/css/components/_navbar.scss @@ -0,0 +1,78 @@ +.navbar-logo { + height: 36px; +} + +@include media-breakpoint-up(md) { + .navbar-expand-lg .navbar-nav .nav-link { + padding-left: 1.25rem; + padding-right: 1.25rem; + } +} + +.navbar .nav-link { + color: $white; +} + +.navbar .form-control { + background: transparent; + width: auto; + font-size: 12px; + border-left: none; + color: $white; + + &:focus { + border-color: $input-border-color; + box-shadow: none; + } + + @include media-breakpoint-up(xl) { + width: calc(43ch + #{$input-padding-x * 2}); + } +} + +.navbar .input-group-text { + background: none; + border-right: none; +} + +.fa-search { + color: $white; +} + +.topnav-nav-link { + position: relative; + color: $white; + + &:before { + content: ""; + position: absolute; + display: block; + bottom: -0.25rem; + left: 50%; + width: 0.25rem; + height: 0.25rem; + background-color: $white; + opacity: 0; + transform: translateX(-50%); + transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out, height 0.3s 0.1s ease-in-out; + } + + &:hover { + color: $white; + + &:before { + bottom: 0.25rem; + width: 100%; + height: 0.1rem; + opacity: 1; + } + } + + &:active { + + &:before { + width: 80%; + transition: width 0.1s ease; + } + } +} diff --git a/apps/explorer_web/assets/css/components/_panels.scss b/apps/explorer_web/assets/css/components/_panels.scss index eb30bffa0c..489875b7ee 100644 --- a/apps/explorer_web/assets/css/components/_panels.scss +++ b/apps/explorer_web/assets/css/components/_panels.scss @@ -1,5 +1,4 @@ .panels { - @extend %paper; &__container { padding: 20px; diff --git a/apps/explorer_web/assets/css/components/_sidebar.scss b/apps/explorer_web/assets/css/components/_sidebar.scss deleted file mode 100644 index c07c0d0f48..0000000000 --- a/apps/explorer_web/assets/css/components/_sidebar.scss +++ /dev/null @@ -1,180 +0,0 @@ - -/* --------------------------------------------------- - SIDEBAR STYLE ------------------------------------------------------ */ -#sidebar { - width: 200px; - background: $navbar-light-color; - top: 0px; - z-index: 9999; - height: 100%; - position: fixed; - - .sidebar-header { - background-color: $primary; - color: $gray-800; - height: 66px; - padding: 12px 12px 17px; - text-align: center; - box-shadow:0 2px 2px 0 rgba(38,50,56,.16), 0 0 2px 0 rgba(38,50,56,.12); - - img { - width: 65%; - } - } - .social-media { - display: flex; - width: 100%; - position: absolute; - bottom: 15px; - justify-content: space-evenly; - - a { - font-size: 18px; - color: $primary; - } - - } -} - -#sidebar .menu-items { - list-style: none; - padding: 0.5em 0; - margin: 0; - - div { - color: $gray-800; - padding: 24px 2px 24px 18px; - font-size: 13px; - font-weight: normal; - background-repeat: no-repeat; - background-position: left 20px center; - transition: all 0.15s linear; - cursor: pointer; - - img { - width: 33px; - height: 100%; - margin-right: 5px; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.1); - } - - &:focus { - outline: none; - } - } - - .fa-sitemap, .fa-home { - color: $gray-500; - } -} - -#sidebar li { - list-style-type: none; - padding-left: 5px; - line-height: 25px; -} - -a[data-toggle="collapse"] { - position: relative; -} - -#sidebar--container { - width: 200px; - display: none; -} - -#pageSubmenu { - margin-bottom: 5px; -} - -/* --------------------------------------------------- - CONTENT STYLE ------------------------------------------------------ */ -#sidebarCollapse { - display: none; -} - - -/* --------------------------------------------------- - MEDIAQUERIES ------------------------------------------------------ */ -@media (max-width: 768px) { - #sidebar--container { - display: block; - margin-left: -200px; - transform: rotateY(90deg); - height: 100vh; - position: fixed; - transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665); - - ~ #content { - position: absolute; - left: 0; - right: 0; - transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665); - } - } - - #sidebar--container.active { - margin-left: 0; - transform: none; - outline: none; - - ~ #content { - left: 200px; - right: -200px; - } - } - - #sidebar .menu-items div { - padding-top: 11px; - } - - #sidebarCollapse { - display: block; - width: 45px; - height: 66px; - background-image: none; - background-color: $primary; - border-color: transparent !important; - box-shadow: 0 2px 2px 0 rgba(38,50,56,.16), 0 0 2px 0 rgba(38,50,56,.12); - outline: none; - } - - #sidebarCollapse span { - width: 80%; - height: 2px; - margin: 0 auto; - display: block; - background: $white; - transition: all 0.8s; - } - - - #sidebarCollapse span:first-of-type, - #sidebarCollapse span:nth-of-type(2), - #sidebarCollapse span:last-of-type { - transform: none; - opacity: 1; - margin: 7px auto; - } - #sidebarCollapse.active span { - transform: none; - opacity: 1; - margin: 0 auto; - - } - #sidebarCollapse.active span:first-of-type { - transform: rotate(45deg) translate(2px, 2px); - } - #sidebarCollapse.active span:nth-of-type(2) { - opacity: 0; - } - #sidebarCollapse.active span:last-of-type { - transform: rotate(-45deg) translate(1px, -1px); - } -} diff --git a/apps/explorer_web/assets/css/explorer/_all.scss b/apps/explorer_web/assets/css/explorer/_all.scss deleted file mode 100644 index 110085ca79..0000000000 --- a/apps/explorer_web/assets/css/explorer/_all.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "breakpoints"; -@import "size"; -@import "paper"; diff --git a/apps/explorer_web/assets/css/explorer/_breakpoints.scss b/apps/explorer_web/assets/css/explorer/_breakpoints.scss deleted file mode 100644 index a59d8f5047..0000000000 --- a/apps/explorer_web/assets/css/explorer/_breakpoints.scss +++ /dev/null @@ -1,5 +0,0 @@ -$explorer-breakpoint-landscape: 480px; -$explorer-breakpoint-sm: 544px; -$explorer-breakpoint-md: 768px; -$explorer-breakpoint-lg: 992px; -$explorer-breakpoint-xl: 1200px; diff --git a/apps/explorer_web/assets/css/explorer/_paper.scss b/apps/explorer_web/assets/css/explorer/_paper.scss deleted file mode 100644 index 5384b4f29d..0000000000 --- a/apps/explorer_web/assets/css/explorer/_paper.scss +++ /dev/null @@ -1,7 +0,0 @@ -%paper { - margin-bottom: 1rem; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.16), - 0 0px 2px 0 rgba(0, 0, 0, 0.12); -} diff --git a/apps/explorer_web/assets/css/explorer/_size.scss b/apps/explorer_web/assets/css/explorer/_size.scss deleted file mode 100644 index 56f2255b26..0000000000 --- a/apps/explorer_web/assets/css/explorer/_size.scss +++ /dev/null @@ -1,17 +0,0 @@ -$golden-ratio: 1.61803398875; - -@function explorer-size($exponent) { - $value: $golden-ratio; - - @if $exponent > 0 { - @for $i from 1 through $exponent { - $value: $value * $golden-ratio; - } - } @elseif $exponent < 0 { - @for $i from 1 through -$exponent { - $value: $value / $golden-ratio; - } - } - - @return 1rem * $value; -} diff --git a/apps/explorer_web/assets/css/theme/_fonts.scss b/apps/explorer_web/assets/css/theme/_fonts.scss index 718e155505..8029217558 100644 --- a/apps/explorer_web/assets/css/theme/_fonts.scss +++ b/apps/explorer_web/assets/css/theme/_fonts.scss @@ -1,2 +1,2 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); +@import url('https://fonts.googleapis.com/css?family=Nunito'); @import url('https://fonts.googleapis.com/css?family=Roboto'); diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss index 51ffd7f4f6..552f04a605 100644 --- a/apps/explorer_web/assets/css/theme/_poa_variables.scss +++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss @@ -231,8 +231,8 @@ $transition-collapse: height .35s ease !default; // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$font-family-monospace: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-sans-serif: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case @@ -707,7 +707,7 @@ $card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; +$tooltip-font-size: ($font-size-sm * 0.875) !default; $tooltip-max-width: 70ch !default; $tooltip-color: $white !default; $tooltip-bg: darken($secondary, 25%) !default; diff --git a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss b/apps/explorer_web/assets/css/theme/_theme_ribbon.scss deleted file mode 100644 index 1b9b792925..0000000000 --- a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss +++ /dev/null @@ -1,145 +0,0 @@ -.theme__ribbon { - width: 155px; - height: 160px; - position: absolute; - right: 8%; - color: white; - padding: 10px; - z-index: 9999; - perspective: 800px; - backface-visibility: hidden; - outline: 1px solid transparent; - - @media (max-width: 890px) { - right: 1%; - } - - @media (max-width: 768px) { - display: none; - } - - &--logo { - width: 100%; - padding: 35px 15px; - } - - &--social { - display: flex; - position: absolute; - bottom: 0; - margin-bottom: 2px; - justify-content: center; - width: 100%; - - &-icons { - display: flex; - font-size: 15px; - padding: 8px; - color: lighten($primary, 25%); - justify-content: space-between; - } - - &-divider { - width: 1px; - padding: 0px !important; - background: lighten($primary, 25%); - } - } -} - -.flex { - display: flex; - justify-content: center; - position: absolute; - bottom: 5px; - left: 1px; - margin-left: 8px; -} - - -//Ribbon FLip Syles - -.ribbon { - width: 100%; - height: 100%; - transition: all .5s; - backface-visibility: hidden; - position: absolute; - top: 0px; - left: 0px; - outline: 1px solid transparent; - -} - -.front { - z-index: 2; - background-color: $primary; - outline: 1px solid transparent; - box-shadow: 0 2px 2px 0 rgba(#212529, 0.16), - 0 0px 2px 0 rgba(#212529, 0.12); -} - -.back { - z-index: 1; - transform: rotateY(-180deg); - background-color: $primary; - outline: 1px solid transparent; - box-shadow: 0 2px 2px 0 rgba(#212529, 0.16), - 0 0px 2px 0 rgba(#212529, 0.12); - - & .switch-network { - font-size: 12px; - padding: 3px; - background-color: lighten($primary, 25%); - width: 115px; - } - - & .switch-network-menu { - width: 115px; - } - - & .switch-network-item { - padding: 3px 5px; - } - - & .back-arrow { - position: absolute; - bottom: 0; - margin: 0px 0px 10px -10px; - } -} - -.rotatecard, .rotatecardback{ - z-index: 3; - cursor: pointer; - background: none; - border: none; - padding: 0px; - - &:focus { - outline: none; - } -} - -.flipped{ - z-index: 1; - transform: rotateY(180deg); - backface-visibility: hidden; - outline: 1px solid transparent; -} - -.backflip { - z-index: 2; - transform: rotateY(0deg); - transition: all .5s; - outline: 1px solid transparent; -} - -.change-color svg { - width: 20px; - height: 20px; - -path { - fill: $primary; - } -} diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex index d03b30fcfb..d70099cd10 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex @@ -37,8 +37,9 @@
+ <%= if Enum.count(@internal_transactions) > 0 do %> -
+
<%= if Enum.count(@transactions) > 0 do %> -
+