diff --git a/CHANGELOG.md b/CHANGELOG.md index 75e8814a12..9d5eb06e74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,26 +6,35 @@ - [#1815](https://github.com/poanetwork/blockscout/pull/1815) - able to search without prefix "0x" - [#1813](https://github.com/poanetwork/blockscout/pull/1813) - add total blocks counter to the main page - [#1806](https://github.com/poanetwork/blockscout/pull/1806) - verify contracts with a post request +- [#1859](https://github.com/poanetwork/blockscout/pull/1859) - feat: show raw transaction traces ### Fixes - [#1829](https://github.com/poanetwork/blockscout/pull/1829) - Handle nil quantities in block decoding routine - [#1830](https://github.com/poanetwork/blockscout/pull/1830) - Make block size field nullable +- [#1840](https://github.com/poanetwork/blockscout/pull/1840) - Handle case when total supply is nil +- [#1838](https://github.com/poanetwork/blockscout/pull/1838) - Block counter calculates only consensus blocks +- [#1849](https://github.com/poanetwork/blockscout/pull/1849) - Improve chains menu +- [#1869](https://github.com/poanetwork/blockscout/pull/1869) - Fix output and gas extraction in JS tracer for Geth +- [#1868](https://github.com/poanetwork/blockscout/pull/1868) - fix: logs list endpoint performance ### Chore - [#1814](https://github.com/poanetwork/blockscout/pull/1814) - Clear build artefacts script +- [#1837](https://github.com/poanetwork/blockscout/pull/1837) - Add -f flag to clear_build.sh script delete static folder ## 1.3.10-beta ### Features +- [#1807](https://github.com/poanetwork/blockscout/pull/1807) - New theming capabilites. - [#1739](https://github.com/poanetwork/blockscout/pull/1739) - highlight decompiled source code - [#1696](https://github.com/poanetwork/blockscout/pull/1696) - full-text search by tokens - [#1742](https://github.com/poanetwork/blockscout/pull/1742) - Support RSK - [#1777](https://github.com/poanetwork/blockscout/pull/1777) - show ERC-20 token transfer info on transaction page - [#1770](https://github.com/poanetwork/blockscout/pull/1770) - set a websocket keepalive from config - [#1789](https://github.com/poanetwork/blockscout/pull/1789) - add ERC-721 info to transaction overview page +- [#1801](https://github.com/poanetwork/blockscout/pull/1801) - Staking pools fetching ### Fixes diff --git a/apps/block_scout_web/assets/css/_code.scss b/apps/block_scout_web/assets/css/_code.scss index a3c4f5823c..f058b69676 100644 --- a/apps/block_scout_web/assets/css/_code.scss +++ b/apps/block_scout_web/assets/css/_code.scss @@ -26,6 +26,6 @@ pre { max-height: $pre-scrollable-max-height / 7; } -.tile pre { +.tile pre { margin-bottom: 0; } diff --git a/apps/block_scout_web/assets/css/_elements.scss b/apps/block_scout_web/assets/css/_elements.scss index 99316a3255..3e71a8e1a8 100644 --- a/apps/block_scout_web/assets/css/_elements.scss +++ b/apps/block_scout_web/assets/css/_elements.scss @@ -1,7 +1,9 @@ hr { - margin: 2.75em 0; - border-style: solid; - border-color: $gray-300 transparent transparent transparent; + border-bottom: none; + border-left: none; + border-right: none; + border-top: 1px solid #f5f6fa; + margin: 30px 0; } svg { @@ -13,3 +15,15 @@ svg { text-rendering: auto; line-height: 1; } + +dl { + margin-bottom: 12px; + + &:last-child { + margin-bottom: 0; + } + + dd { + margin: 0; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/_helpers.scss b/apps/block_scout_web/assets/css/_helpers.scss new file mode 100644 index 0000000000..a7068b0b63 --- /dev/null +++ b/apps/block_scout_web/assets/css/_helpers.scss @@ -0,0 +1,23 @@ +.pr-0-md { + padding-right: 0 !important; + + @include media-breakpoint-down(md) { + padding-right: 15px !important; + } +} + +.pl-0-md { + padding-left: 0 !important; + + @include media-breakpoint-down(md) { + padding-left: 15px !important; + } +} + +.card-mr-50-md { + margin-right: $common-container-margin; + + @include media-breakpoint-down(md) { + margin-right: 0; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/_layout.scss b/apps/block_scout_web/assets/css/_layout.scss index 7431c01404..f1a4e92312 100644 --- a/apps/block_scout_web/assets/css/_layout.scss +++ b/apps/block_scout_web/assets/css/_layout.scss @@ -5,6 +5,6 @@ main { flex-grow: 1; - background-color: #FBFAFC; + background-color: #fbfafc; } } diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss new file mode 100644 index 0000000000..e7ef07f13f --- /dev/null +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -0,0 +1,201 @@ +@mixin textfield-placeholder($color: #a3a9b5) { + &::-webkit-input-placeholder { + color: $color; + } + &::-moz-placeholder { + color: $color; + } + &:-ms-input-placeholder { + color: $color; + } + &:-moz-placeholder { + color: $color; + } +} + +@mixin gradient-container() { + background-color: $primary; + background-image: linear-gradient( + to right, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + box-shadow: 0 5px 40px -5px rgba(#000, 0.25); + margin-top: -3rem; +} + +@mixin stats-item($border-color: #fff, $text-color: #fff, $value-color: #fff) { + &-item { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: calc(1rem + 4px); + padding-right: 1rem; + position: relative; + + &::before { + background-color: $border-color; + border-radius: 2px; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 4px; + } + } + + &-label { + color: $text-color; + display: block; + white-space: nowrap; + } + + &-label-item { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } + + &-value { + color: $value-color; + display: block; + font-size: 1.5rem; + font-weight: 200; + white-space: nowrap; + + @media (max-width: $breakpoint-lg) { + font-size: 1.25rem; + } + } +} + +@mixin btn-full($bg-color: $primary, $text-color: #fff) { + align-items: center; + background-color: $bg-color; + border-radius: 2px; + border: 1px solid $bg-color; + color: $text-color; + cursor: pointer; + display: flex; + font-size: 12px; + font-weight: 600; + height: 36px; + justify-content: center; + outline: none; + padding: 0 15px; + text-decoration: none; + transition: all 0.15s; + width: fit-content; + + &:hover { + background-color: darken($bg-color, 10%); + border-color: darken($bg-color, 10%); + text-decoration: none; + } + + svg { + margin-right: 12px; + } + + path { + fill: $text-color; + } + + &.full-width { + width: 100%; + } + + &[disabled] { + &, + &:hover { + background-color: $bg-color; + border-color: $bg-color; + cursor: default; + opacity: 0.5; + } + } +} + +@mixin btn-line($bg-color: #fff, $text-color: $secondary) { + align-items: center; + background-color: $bg-color; + border-radius: 2px; + border: 1px solid $text-color; + color: $text-color; + cursor: pointer; + display: flex; + font-size: 12px; + font-weight: 600; + height: 36px; + justify-content: center; + outline: none; + padding: 0 15px; + text-decoration: none; + transition: all 0.15s; + width: fit-content; + + &:hover { + background-color: $text-color; + color: $bg-color; + text-decoration: none; + + path { + fill: $bg-color; + } + } + + svg { + margin-right: 12px; + } + + path { + fill: $text-color; + } + + &.full-width { + width: 100%; + } + + &[disabled] { + &, + &:hover { + background-color: $bg-color; + border-color: $text-color; + cursor: default; + opacity: 0.5; + } + } +} + +@mixin square-icon-button($color, $dimensions) { + align-items: center; + border: 1px solid $color; + border-radius: 2px; + cursor: pointer; + display: flex; + height: $dimensions; + justify-content: center; + transition: all 0.15s; + width: $dimensions; + + svg { + display: block; + height: 100%; + width: 100%; + } + + path { + fill: $color; + } + + &:hover { + background-color: $color; + + path { + fill: #fff; + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/_tooltip.scss b/apps/block_scout_web/assets/css/_tooltip.scss deleted file mode 100644 index a660e7c4ea..0000000000 --- a/apps/block_scout_web/assets/css/_tooltip.scss +++ /dev/null @@ -1,3 +0,0 @@ -.tooltip { - min-width: 100px; -} diff --git a/apps/block_scout_web/assets/css/_typography.scss b/apps/block_scout_web/assets/css/_typography.scss index c923af5e67..963b02e978 100644 --- a/apps/block_scout_web/assets/css/_typography.scss +++ b/apps/block_scout_web/assets/css/_typography.scss @@ -1,3 +1,7 @@ +$common-link-color: $primary !default; +$blue: #4b89fb !default; +$success: #34c0ad !default; + body { font-family: $font-family-sans-serif; font-size: 12px; @@ -20,10 +24,10 @@ h3 { } h4 { + color: $gray-600; font-size: 16px; - line-height: 24px; font-weight: 300; - color: $gray-600; + line-height: 24px; margin-top: 4px; &.underline { @@ -40,16 +44,16 @@ p { @media screen and (max-width: 768px) { font-size: 14px; - } + } } a { + color: $common-link-color; text-decoration: none; - color: $tertiary; &:hover, &:focus { - color: darken($tertiary, 20%); + color: darken($common-link-color, 20%); text-decoration: underline; } @@ -59,7 +63,8 @@ a { } } -label, textarea.form-control { +label, +textarea.form-control { font-size: 13px; } @@ -72,31 +77,30 @@ label, textarea.form-control { display: inline-block; } - .text { - &-transaction { - color: $blue; - } + &-transaction { + color: $blue; + } - &-contract-call { - color: $green; - } + &-contract-call { + color: $green; + } - &-contract-creation { - color: $pink; - } + &-contract-creation { + color: $pink; + } - &-token { - color: $orange; - } + &-token { + color: $orange; + } - &-internal-transaction { - color: $teal; - } + &-internal-transaction { + color: $teal; + } - &-faded { - opacity: 0.7; - } + &-faded { + opacity: 0.7; + } } [data-transaction-status="Success"], @@ -119,4 +123,4 @@ label, textarea.form-control { [data-transaction-status^="Error"], [data-internal-transaction-type="Suicide"] { color: $danger; -} +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index a3be02359c..990583ecdf 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -1,6 +1,9 @@ +@import "./mixins"; /* Phoenix flash messages */ -.alert:empty { display: none; } +.alert:empty { + display: none; +} /* This file is for your main application css. */ @@ -13,8 +16,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; // Bootstrap Core CSS @import "node_modules/bootstrap/scss/functions"; -@import "theme/variables"; @import "node_modules/bootstrap/scss/mixins"; + +@import "theme/variables"; + @import "node_modules/bootstrap/scss/root"; @import "node_modules/bootstrap/scss/reboot"; @import "node_modules/bootstrap/scss/grid"; @@ -36,16 +41,17 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/progress"; // Bootstrap Components +@import "node_modules/bootstrap/scss/alert"; +@import "node_modules/bootstrap/scss/badge"; +@import "node_modules/bootstrap/scss/card"; @import "node_modules/bootstrap/scss/dropdown"; -@import "node_modules/bootstrap/scss/transitions"; -@import "node_modules/bootstrap/scss/tables"; +@import "node_modules/bootstrap/scss/forms"; @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/pagination"; +@import "node_modules/bootstrap/scss/tables"; @import "node_modules/bootstrap/scss/tooltip"; -@import "node_modules/bootstrap/scss/badge"; -@import "node_modules/bootstrap/scss/alert"; +@import "node_modules/bootstrap/scss/transitions"; // Code highlight @import "node_modules/highlight.js/styles/default"; @@ -56,8 +62,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; // Custom SCSS @import "layout"; @import "typography"; -@import "tooltip"; @import "code"; +@import "helpers"; @import "elements"; @import "forms"; @import "components/panels"; @@ -87,8 +93,38 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/transaction-input"; @import "components/coin-balance-tile"; @import "components/highlight"; +@import "components/copy_icon"; +@import "components/btn_full"; +@import "components/btn_line"; +@import "components/stakes"; +@import "components/check"; +@import "components/stakes_table"; +@import "components/i_tooltip"; +@import "components/check_tooltip"; +@import "components/tooltip"; +@import "components/progress_from_to"; +@import "components/stakes_empty_content"; +@import "components/stakes_btn_remove_pool"; +@import "components/modal"; +@import "components/modal_validator_info"; +@import "components/form"; +@import "components/stakes_progress"; +@import "components/modal_status"; +@import "components/modal_bottom_disclaimer"; +@import "components/modal_become_candidate"; +@import "components/modal_stake"; +@import "components/btn_copy"; +@import "components/btn_qr"; +@import "components/btn_address_card"; +@import "components/btn_dropdown_line"; +@import "components/transaction"; +@import "components/api"; +@import "components/alerts"; :export { primary: $primary; secondary: $secondary; + dashboardLineColorMarket: $dashboard-line-color-market; + dashboardLineColorPrice: $dashboard-line-color-price; + dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; } diff --git a/apps/block_scout_web/assets/css/components/_address-overview.scss b/apps/block_scout_web/assets/css/components/_address-overview.scss new file mode 100644 index 0000000000..a366688cd9 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_address-overview.scss @@ -0,0 +1,81 @@ +.address-detail-hash-title { + color: #333; + font-size: 12px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 12px; + text-align: left; +} + +.overview-title-buttons { + display: flex; +} + +.overview-title-item { + display: block; + flex-grow: 0; + flex-shrink: 0; + height: fit-content; + margin-right: 8px; + + &:last-child { + margin-right: 0; + } +} + +.address-overview { + .card-section { + margin-bottom: $common-container-margin; + + &:first-child { + + .card { + margin-right: $common-container-margin; + + @include media-breakpoint-down(md) { + margin-right: 0; + } + } + } + } + + .card { + margin-bottom: 0; + height: 100%; + } +} + +.balance-card-title { + margin-bottom: 0.5rem; +} + +.address-detail-item { + margin-right: 1em; + padding-bottom: 0.5em; +} + +.address-balance-text { + font-size: 12px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 12px; + + &:last-child { + margin-bottom: 0; + } +} + +.address-current-balance { + font-size: 12px; + font-weight: 200; + line-height: 1.2; + margin: 0 0 12px; + + small { + font-size: 11px; + } + + &:last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_address_link.scss b/apps/block_scout_web/assets/css/components/_address_link.scss index 5d6f475f9b..709c4cc3e8 100644 --- a/apps/block_scout_web/assets/css/components/_address_link.scss +++ b/apps/block_scout_web/assets/css/components/_address_link.scss @@ -1,5 +1,4 @@ .address-link { - &__font { font-family: $font-family-monospace; } @@ -18,7 +17,7 @@ border-color: transparent transparent transparent $border-color; i { - color:$gray-500 !important; + color: $gray-500 !important; } } } diff --git a/apps/block_scout_web/assets/css/components/_alerts.scss b/apps/block_scout_web/assets/css/components/_alerts.scss new file mode 100644 index 0000000000..baba3476c1 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_alerts.scss @@ -0,0 +1,9 @@ +$alert-danger-background-color: #fff3f7 !default; +$alert-danger-border-color: #fff3f7 !default; +$alert-danger-color: #ff7986 !default; + +.alert-danger { + background-color: $alert-danger-background-color; + border-color: $alert-danger-border-color; + color: $alert-danger-color; +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_animations.scss b/apps/block_scout_web/assets/css/components/_animations.scss index 57a20fd214..895d030bd7 100644 --- a/apps/block_scout_web/assets/css/components/_animations.scss +++ b/apps/block_scout_web/assets/css/components/_animations.scss @@ -82,7 +82,7 @@ will-change: transform, opacity, height; animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955); - @media (max-width: 767px) { + @media (max-width: $breakpoint-md) { max-height: 300px; animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955); } @@ -91,4 +91,4 @@ .shrink-out { transform-origin: bottom center; animation: shrink-out 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; -} \ No newline at end of file +} diff --git a/apps/block_scout_web/assets/css/components/_api.scss b/apps/block_scout_web/assets/css/components/_api.scss new file mode 100644 index 0000000000..6fc2bc9a97 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_api.scss @@ -0,0 +1,248 @@ +$api-text-monospace-color: $primary !default; +$api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default; +$api-anchors-list-background-color: #f6f7f9 !default; +$api-doc-list-item-title-color: $primary !default; +$api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; + +.api-text-monospace { + color: $api-text-monospace-color; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; +} + +.api-text-monospace-background { + background-color: $api-text-monospace-background; + border-radius: 2px; + font-weight: 300; + padding: 5px 6px; +} + +.api-anchors-list { + background-color: $api-anchors-list-background-color; + column-gap: 40px; + display: grid; + grid-auto-flow: column; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + padding: 30px; + row-gap: 25px; + + @include media-breakpoint-down(md) { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + } + + @include media-breakpoint-down(sm) { + grid-auto-flow: row; + grid-template-columns: 1fr; + grid-template-rows: none; + } +} + +.api-anchors-list-item { + display: grid; + grid-template-columns: 0.75fr minmax(0, 1.25fr); + + &:hover { + text-decoration: none; + } +} + +.api-anchors-list-item-title { + align-self: center; + color: #333; + font-size: 14px; + font-weight: 300; + line-height: 1.2; + margin: 0; +} + +.api-anchors-list-item-value { + align-self: center; + font-size: 12px; + line-height: 1.2; + white-space: nowrap; +} + +.api-text-title { + font-size: 12px; + line-height: 1.2; + margin-left: 20px; +} +.api-doc-list-item { + border-bottom: 1px solid $base-border-color; + padding: $card-vertical-padding $card-horizontal-padding; + + &:last-child { + border-bottom: none; + } +} + +.api-doc-list-item-contents { + display: flex; + justify-content: space-between; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } +} + +.api-doc-list-item-title { + color: $api-doc-list-item-title-color; + font-size: 17px; + font-weight: 700; + line-height: 1.2; + margin: 0 0 15px; +} + +.api-doc-list-item-query { + display: inline-block; + font-size: 12px; + line-height: 1.2; + margin-bottom: 20px; + word-break: break-all; + word-wrap: break-word; + + > strong { + font-weight: 700; + } +} + +.api-doc-list-item-text { + color: #aaa; + font-size: 14px; + font-weight: normal; + line-height: 1.5; + margin: 0; +} + +.api-doc-list-item-controls { + display: flex; + flex-direction: column; + flex-grow: 1; + margin-left: 50px; + + @include media-breakpoint-down(sm) { + flex-direction: row; + justify-content: space-between; + margin-left: 0; + padding-top: 25px; + } +} + +.api-doc-list-item-controls-badges { + display: flex; + justify-content: flex-end; + + .api-badge { + margin-right: 8px; + + &:last-child { + margin-right: 0; + } + } +} + +.api-doc-list-item-controls-view-more { + align-self: flex-end; + color: $api-doc-list-item-view-more-color; + cursor: pointer; + font-size: 14px; + margin-top: auto; + white-space: nowrap; + + .fa { + margin-left: 5px; + } +} + +[aria-expanded="false"] { + .api-doc-list-item-controls-view-more-open { + display: block; + } + .api-doc-list-item-controls-view-more-close { + display: none; + } +} + +[aria-expanded="true"] { + .api-doc-list-item-controls-view-more-open { + display: none; + } + .api-doc-list-item-controls-view-more-close { + display: block; + } +} + +.api-doc-parameters-container { + border-top: 1px solid $base-border-color; + margin-top: 20px; + padding-top: $card-vertical-padding; +} + +.api-doc-parameters-list { + border-bottom: 1px solid $base-border-color; + margin-bottom: $card-vertical-padding; + padding-bottom: $card-vertical-padding / 2; +} + +.api-doc-parameters-list-title { + color: #333; + font-size: 16px; + font-weight: 500; + line-height: 1.2; + margin: 0 0 15px; + white-space: nowrap; +} + +.api-doc-parameters-list-item { + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + + @include media-breakpoint-down(sm) { + margin-bottom: 30px; + + [class*="col-"] { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + } +} + +.api-doc-parameters-list-item-title { + color: #333; + font-size: 14px; + font-weight: 500; + line-height: 1.2; + margin: 0 0 8px; +} + +.api-doc-parameters-list-item-subtitle { + color: #aaa; + font-size: 13px; + font-weight: 400; + line-height: 1.2; + margin: 0; +} + +.api-doc-parameters-list-item-description { + color: #333; + font-size: 14px; + font-weight: 400; + line-height: 1.2; + margin: 0 0 8px; + + &:last-child { + margin-bottom: 0; + } + + strong { + font-weight: 700; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_badge.scss b/apps/block_scout_web/assets/css/components/_badge.scss index 7f32acab9a..2891a6e4ff 100644 --- a/apps/block_scout_web/assets/css/components/_badge.scss +++ b/apps/block_scout_web/assets/css/components/_badge.scss @@ -1,3 +1,45 @@ +$badge-success-color: #15bba6 !default; +$badge-success-background-color: rgba($badge-success-color, 0.1) !default; +$badge-danger-color: #ed9966 !default; +$badge-danger-background-color: rgba($badge-danger-color, 0.1) !default; +$badge-neutral-color: #333 !default; +$badge-neutral-background-color: #e9e9e9 !default; + .badge { color: $white; + + &.tile-badge { + font-size: 10px; + font-weight: bold; + height: 20px; + line-height: 20px; + margin: 0; + padding: 0 11px; + width: auto; + } + + &.api-badge { + font-size: 12px; + font-weight: 700; + height: 24px; + line-height: 26px; + margin: 0; + padding: 0 8px; + width: auto; + } + + &.badge-success { + background-color: $badge-success-background-color; + color: $badge-success-color; + } + + &.badge-danger { + background-color: $badge-danger-background-color; + color: $badge-danger-color; + } + + &.badge-neutral { + background-color: $badge-neutral-background-color; + color: $badge-neutral-color; + } } diff --git a/apps/block_scout_web/assets/css/components/_btn_address_card.scss b/apps/block_scout_web/assets/css/components/_btn_address_card.scss new file mode 100644 index 0000000000..d3f6f803b8 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_address_card.scss @@ -0,0 +1,11 @@ +$btn-address-card-icon-color: $primary !default; +$btn-address-card-icon-dimensions: 31px !default; + +.btn-address-card-icon { + @include square-icon-button($btn-address-card-icon-color, $btn-address-card-icon-dimensions); + + svg { + height: 10px; + width: 20px; + } +} diff --git a/apps/block_scout_web/assets/css/components/_btn_copy.scss b/apps/block_scout_web/assets/css/components/_btn_copy.scss new file mode 100644 index 0000000000..985a418a02 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_copy.scss @@ -0,0 +1,6 @@ +$btn-copy-color: $primary !default; +$btn-copy-dimensions: 31px !default; + +.btn-copy-icon { + @include square-icon-button($btn-copy-color, $btn-copy-dimensions); +} diff --git a/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss b/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss new file mode 100644 index 0000000000..8f89b0700c --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss @@ -0,0 +1,6 @@ +$btn-dropdown-line-bg: #fff !default; +$btn-dropdown-line-color: $primary !default; + +.btn-dropdown-line { + @include btn-line($btn-dropdown-line-bg, $btn-dropdown-line-color); +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_btn_full.scss b/apps/block_scout_web/assets/css/components/_btn_full.scss new file mode 100644 index 0000000000..97964adc80 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_full.scss @@ -0,0 +1,6 @@ +$btn-full-primary-bg: $primary !default; +$btn-full-primary-color: #fff !default; + +.btn-full-primary { + @include btn-full($btn-full-primary-bg, $btn-full-primary-color); +} diff --git a/apps/block_scout_web/assets/css/components/_btn_line.scss b/apps/block_scout_web/assets/css/components/_btn_line.scss new file mode 100644 index 0000000000..b62b345db3 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_line.scss @@ -0,0 +1,6 @@ +$btn-line-bg: #fff !default; +$btn-line-color: $secondary !default; + +.btn-line { + @include btn-line($btn-line-bg, $btn-line-color); +} diff --git a/apps/block_scout_web/assets/css/components/_btn_qr.scss b/apps/block_scout_web/assets/css/components/_btn_qr.scss new file mode 100644 index 0000000000..0f8fbc54f3 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_btn_qr.scss @@ -0,0 +1,6 @@ +$btn-qr-color: $primary !default; +$btn-qr-dimensions: 31px !default; + +.btn-qr-icon { + @include square-icon-button($btn-qr-color, $btn-qr-dimensions); +} diff --git a/apps/block_scout_web/assets/css/components/_button.scss b/apps/block_scout_web/assets/css/components/_button.scss index 1456259aa4..7804a01e51 100644 --- a/apps/block_scout_web/assets/css/components/_button.scss +++ b/apps/block_scout_web/assets/css/components/_button.scss @@ -1,25 +1,28 @@ +$button-primary-color: $primary !default; +$button-secondary-color: $secondary !default; + .button { + border-radius: 2px; border: none; + cursor: pointer; display: inline-block; + line-height: 1.2; + padding: 10px 16px; text-align: center; text-decoration: none; - white-space: nowrap; - padding: 8px 10px; - border-radius: 2px; - cursor: pointer; - -webkit-transition: all 0.25s; transition: all 0.25s; + white-space: nowrap; &-primary { - background-color: $primary; - color: $white; - border: 1px solid $primary; + background-color: $button-primary-color; + border: 1px solid $button-primary-color; + color: #fff; &:hover, &:focus { - color: $white; - background-color: darken($primary, 10%); - border-color: darken($primary, 10%); + background-color: darken($button-primary-color, 10%); + border-color: darken($button-primary-color, 10%); + color: #fff; text-decoration: none; } @@ -31,18 +34,18 @@ } &-secondary { - border: 1px solid $tertiary; - color: $tertiary; - background-color: $white; + background-color: #fff; + border: 1px solid $button-secondary-color; + color: $button-secondary-color; font-weight: 400; &:hover, &:focus { - background-color: darken($tertiary, 10%); - border-color: darken($tertiary, 10%); - color: $white; - text-decoration: none; + background-color: darken($button-secondary-color, 10%); + border-color: darken($button-secondary-color, 10%); + color: #fff; outline: none !important; + text-decoration: none; } } @@ -66,8 +69,8 @@ padding: 20px 60px 20px; } -// Block button -// ------------------------- + // Block button + // ------------------------- &-block { display: block; @@ -75,12 +78,11 @@ } &-disabled, - &:disabled, { + &:disabled { background-color: $gray-300; color: $gray-500; text-decoration: none; } - } // Vertically space out multiple block buttons diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 54e18e2240..2e2cba08a9 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -1,16 +1,33 @@ +$card-background-color: #fff !default; +$card-tab-active: $primary !default; +$card-default-border-radius: 10px !default; +$card-horizontal-padding: 30px; +$card-vertical-padding: 30px; +$card-background-1: $primary !default; +$card-background-1-text-color: #fff !default; + .card { + background-color: $card-background-color; + border-radius: $card-default-border-radius; border: none; - box-shadow: 0 5px 40px -5px rgba($black, 0.25); - border-radius: 0; - margin-bottom: 3rem; + box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); + margin-bottom: $common-container-margin; +} - &-primary { - background-color: $primary; +.card-background-1 { + background-color: $card-background-1; + color: $card-background-1-text-color; + + a, + a:hover { + color: $card-background-1-text-color; } } .card-header { - background-color: $white; + background: transparent; + border-bottom: 1px solid $base-border-color; + padding: $card-vertical-padding $card-horizontal-padding; &-tabs { margin: (-$card-spacer-y) (-$card-spacer-x); @@ -18,12 +35,95 @@ } .card-title { - line-height: 2.2rem; + font-size: 18px; + font-weight: normal; + line-height: 1.2rem; margin-bottom: 2rem; + + &.margin-bottom-md { + margin-bottom: 25px; + } + + &.margin-bottom-sm { + margin-bottom: 15px; + } + + &.margin-bottom-xs { + margin-bottom: 10px; + } + + &.margin-bottom-0 { + margin-bottom: 0; + } + + .card-title-container & { + line-height: 1.2; + margin: 0; + + @include media-breakpoint-down(sm) { + margin-bottom: 25px; + } + } +} + +.card-subtitle { + color: #aaa; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 30px; + + &.margin-bottom-0 { + margin-bottom: 0; + } +} + +.card-title-container { + align-items: center; + display: flex; + justify-content: space-between; + padding: 25px $card-horizontal-padding; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } +} + +.card-title-controls { + align-items: center; + display: flex; + justify-content: flex-end; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } + + .card-title-control { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + + @include media-breakpoint-down(sm) { + margin-bottom: 20px; + margin-right: 0; + + &:last-child { + margin-bottom: 0; + } + } + } } .card-body { - padding: 2.25rem 1.25rem; + padding: $card-horizontal-padding; +} + +.card-body-flex-column-space-between { + display: flex; + flex-direction: column; + justify-content: space-between; } .card-server-response-body { @@ -34,5 +134,81 @@ .card-chain-blocks { height: auto; - @include media-breakpoint-down(md) { height: 595px; } + [class*="col-"]:last-child { + .tile { + margin-bottom: 0; + } + } +} + +.card-chain-transactions { + height: auto; + + .tile { + margin-bottom: 0; + } +} + +.card-tabs { + align-items: center; + border-top-left-radius: $card-default-border-radius; + border-top-right-radius: $card-default-border-radius; + border-bottom: 1px solid $base-border-color; + display: flex; + justify-content: flex-start; + overflow: hidden; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } +} + +.card-tab { + background-color: $card-background-color; + color: #333; + cursor: pointer; + font-size: 14px; + font-weight: normal; + height: 70px; + line-height: 70px; + padding: 0 30px; + text-align: center; + + &:hover { + text-decoration: underline; + } + + @include media-breakpoint-down(sm) { + display: none; + width: 100%; + } + + &.active { + background-color: $card-tab-active; + color: #fff; + cursor: default; + text-decoration: none; + + @include media-breakpoint-down(sm) { + cursor: pointer; + display: block; + order: -1; + + &::after { + border-bottom: 0; + border-left: 0.3em solid transparent; + border-right: 0.3em solid transparent; + border-top: 0.3em solid; + content: ""; + display: inline-block; + height: 0; + margin-left: 10px; + width: 0; + } + + &.noCaret::after { + display: none; + } + } + } } diff --git a/apps/block_scout_web/assets/css/components/_check.scss b/apps/block_scout_web/assets/css/components/_check.scss new file mode 100644 index 0000000000..5a8533dee1 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_check.scss @@ -0,0 +1,47 @@ +$check-color: $primary !default; +$check-dimensions: 14px !default; + +.check { + align-items: center; + display: flex; + position: relative; + + input[type="checkbox"] { + height: 100%; + opacity: 0; + position: absolute; + width: 100%; + z-index: 5; + + &:checked + .check-icon::before { + background-color: $check-color; + content: ""; + height: 6px; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: 6px; + } + } + + .check-icon { + border: 1px solid $base-border-color; + flex-grow: 0; + flex-shrink: 0; + height: $check-dimensions; + margin: 0 10px 0 0; + position: relative; + width: $check-dimensions; + z-index: 1; + } + + .check-text { + font-size: 14px; + font-weight: normal; + line-height: 1.2; + position: relative; + white-space: nowrap; + z-index: 1; + } +} diff --git a/apps/block_scout_web/assets/css/components/_check_tooltip.scss b/apps/block_scout_web/assets/css/components/_check_tooltip.scss new file mode 100644 index 0000000000..56dfe92d93 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_check_tooltip.scss @@ -0,0 +1,26 @@ +$check-tooltip-background: #f5f6fa !default; +$check-tooltip-background-active: $primary !default; +$check-tooltip-check: #a3a9b5 !default; +$check-tooltip-check-active: #fff !default; + +.check-tooltip { + display: block; + height: 16px; + width: 16px; + + .check-tooltip-circle { + fill: $check-tooltip-background; + } + .check-tooltip-check { + fill: $check-tooltip-check; + } + + &:hover { + .check-tooltip-circle { + fill: $check-tooltip-background-active; + } + .check-tooltip-check { + fill: $check-tooltip-check-active; + } + } +} diff --git a/apps/block_scout_web/assets/css/components/_copy_icon.scss b/apps/block_scout_web/assets/css/components/_copy_icon.scss new file mode 100644 index 0000000000..73a882b5bb --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_copy_icon.scss @@ -0,0 +1,17 @@ +$copy-icon-color: $primary !default; + +.copy-icon { + cursor: pointer; + height: 18px; + width: 18px; + + svg { + display: block; + height: 100%; + width: 100%; + } + + path { + fill: $copy-icon-color; + } +} diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss index 4cedaefe3b..ada29360d6 100644 --- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss +++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss @@ -1,133 +1,184 @@ +$dashboard-banner-gradient-start: $primary !default; +$dashboard-banner-gradient-end: lighten( + $dashboard-banner-gradient-start, + 5% +) !default; +$dashboard-banner-network-plain-container-background-color: lighten($dashboard-banner-gradient-end, 5%)!default; +$dashboard-line-color-price: lighten($dashboard-banner-gradient-end, 5%) !default; +$dashboard-line-color-market: $secondary !default; +$dashboard-stats-item-label-color: #fff !default; +$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default; +$dashboard-banner-chart-legend-label-color: #fff !default; +$dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !default; +$dashboard-stats-item-border-color: $primary !default; +$dashboard-banner-network-plain-container-height: 205px; +$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default; + .dashboard-banner-container { - position: relative; - margin-top: -3rem; - background-color: $white; - box-shadow: 0 5px 40px -5px rgba($black, 0.25); + @include gradient-container(); - &:before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 68px; - background-color: $white; - box-shadow: 0 0 40px -5px rgba($black, 0.25); - } + padding: 0; + position: relative; - &:after { + &::after { + background-color: $dashboard-banner-network-plain-container-background-color; + bottom: 0; content: ""; display: block; + height: $dashboard-banner-network-plain-container-height; + left: 70%; position: absolute; - top: 3rem; right: 0; - bottom: 0; - left: 70%; - background-color: $primary; - box-shadow: 0 0 40px -5px rgba($black, 0.25); - @media (max-width: 992px) { - top: 2rem; - left: 80%; + @include media-breakpoint-down(md) { + display: none; } } } .dashboard-banner { - position: relative; - display: grid; - grid-template-rows: 3rem 2fr 1fr; - grid-template-columns: 1fr 4fr; - grid-template-areas: - "chart ." - "chart stats" - "legend stats"; - margin-top: -1rem; + display: flex; + justify-content: space-between; margin-bottom: 3rem; + position: relative; z-index: 9; - @media (max-width: 992px) { - grid-template-rows: 2rem auto; - grid-template-columns: auto; + @include media-breakpoint-down(sm) { + flex-direction: column; } } -.dashboard-banner-graphic { - position: absolute; - right: 0; - bottom: 0; - z-index: 10; +.dashboard-banner-network-graph { + flex-grow: 1; + padding: 15px 0 0 0; + + @include media-breakpoint-down(md) { + display: flex; + flex-direction: column; + padding-top: 20px; + } } .dashboard-banner-chart { - grid-area: chart; - padding: 1rem 1rem 1rem 0; - width: calc(350px + 1rem); - height: calc(152px + 1rem); + flex-grow: 1; + margin: 0 0 35px 0; + max-width: 350px; + position: relative; + + @include media-breakpoint-down(md) { + flex-grow: 0; + margin-bottom: 20px; + margin-top: auto; + max-width: 100%; + } + + > canvas { + max-height: 100%; + max-width: 100%; + width: 100%; + } } .dashboard-banner-chart-legend { - grid-area: legend; - display: flex; - padding: 1rem 0.3rem; + display: grid; + grid-template-columns: 1fr 1fr; + padding-bottom: 12px; + + .dashboard-banner-chart-legend-item { + padding-bottom: 3px; + padding-left: 12px; + padding-top: 3px; + position: relative; + + @include media-breakpoint-down(md) { + display: flex; + flex-direction: row; + } - &-item { - padding-left: 0.5rem; - flex-grow: 1; + &::before { + border-radius: 2px; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 4px; + } - &:first-of-type { - border-left: 4px solid $primary; + &:nth-child(1)::before { + background-color: $dashboard-line-color-price; } - &:last-of-type { - border-left: 4px solid $secondary; + &:nth-child(2)::before { + background-color: $dashboard-line-color-market; } } - &-label { + .dashboard-banner-chart-legend-label { + color: $dashboard-banner-chart-legend-label-color; display: block; - color: $text-muted; + font-size: 12px; + font-weight: 600; + line-height: 1.2; + margin: 0 0 5px; + + @include media-breakpoint-down(md) { + margin: 0 5px 0 0; + } } - &-value { + .dashboard-banner-chart-legend-value { + color: $dashboard-banner-chart-legend-value-color; display: block; + font-size: 12px; + font-weight: normal; + line-height: 1.2; } } -.dashboard-banner-network-stats { - grid-area: stats; - display: flex; +.dashboard-banner-network-plain-container { align-items: center; - justify-content: space-around; - padding-right: 1rem; - background-color: $primary; - box-shadow: -10px 0 15px 0 rgba($black, 0.14); - - @media (max-width: 992px) { - flex-direction: column; - align-items: flex-start; - padding: 0.5rem 2rem; + align-self: flex-end; + background-color: $dashboard-banner-network-plain-container-background-color; + border-top-left-radius: 10px; + display: flex; + height: $dashboard-banner-network-plain-container-height; + justify-content: center; + margin: 0 0 0 30px; + max-width: 100%; + padding: 30px 0 30px 60px; + width: 750px; + + @include media-breakpoint-down(md) { + border-top-right-radius: 10px; + height: auto; + justify-content: flex-start; + margin-left: 0; + margin-top: 15px; + max-width: 100%; + padding: 20px 0 20px 20px; + width: 250px; } - &-item { - padding-left: 1rem; - color: $white; - border-left: 4px solid rgba($white, 0.6); + @include media-breakpoint-down(sm) { + width: 100%; } +} - &-label { - display: block; - white-space: nowrap; - } +.dashboard-banner-network-stats { + column-gap: 25px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; - &-value { - display: block; - font-size: 1.5rem; - font-weight: 200; + @include media-breakpoint-down(md) { + grid-template-columns: 1fr; + row-gap: 20px; + } - @media (max-width: 992px) { - font-size: 1.25rem; - } + @include media-breakpoint-down(sm) { + column-gap: 10px; + grid-template-columns: 1fr 1fr; } -} + + @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color); +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_dot.scss b/apps/block_scout_web/assets/css/components/_dot.scss index 168d237e84..d9fa04631e 100644 --- a/apps/block_scout_web/assets/css/components/_dot.scss +++ b/apps/block_scout_web/assets/css/components/_dot.scss @@ -1,16 +1,23 @@ .transaction { - &__dot { display: inline-block; height: 10px; - width: 10px ; + width: 10px; border-radius: 50%; margin-left: 5px; vertical-align: baseline; - &--pending { background-color: $gray-500; } - &--success { background-color: $success; } - &--failed { background-color: $danger; } - &--out_of_gas { background-color: $warning; } + &--pending { + background-color: $gray-500; + } + &--success { + background-color: $success; + } + &--failed { + background-color: $danger; + } + &--out_of_gas { + background-color: $warning; + } } } diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss index d62e7820f2..b603d53fea 100644 --- a/apps/block_scout_web/assets/css/components/_dropdown.scss +++ b/apps/block_scout_web/assets/css/components/_dropdown.scss @@ -1,17 +1,74 @@ // These styles extend the default Bootstrap styles - .dropdown-menu { - width: 100%; + border-radius: 8px !important; + border: none; box-shadow: $box-shadow; + padding: 0; + width: 100%; + + &.right { + left: auto; + right: 0; + } + + .nav-item & { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + top: 45px; + + .dropdown-item:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } +} + +.dropdown-item { + font-size: 12px; + padding: 10px 20px; + + &:hover { + color: #fff; + } + + &:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + &:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } + + &.header { + &, + &:hover, + &:active { + padding-left: 10px; + background-color: transparent; + cursor: default; + color: #333; + font-weight: 700; + } + } + + &.division { + border-top: 1px solid $base-border-color; + } } .dropdown-search-icon { - top: 0.5rem; + color: $gray-300; left: 0.625rem; pointer-events: none; - color: $gray-300; + top: 0.5rem; } .dropdown-search-field { padding-left: 2rem; } + +.dropdown-toggle::after { + margin-left: 0.71em; +} diff --git a/apps/block_scout_web/assets/css/components/_footer.scss b/apps/block_scout_web/assets/css/components/_footer.scss index 6589f5193c..169f6608dc 100644 --- a/apps/block_scout_web/assets/css/components/_footer.scss +++ b/apps/block_scout_web/assets/css/components/_footer.scss @@ -1,27 +1,59 @@ -$footer-padding: 1em; -$footer-text-color: rgba($white, 0.7); +$footer-background-color: $secondary !default; +$footer-title-color: #fff !default; +$footer-text-color: rgba(#fff, 0.7) !default; +$footer-link-color: $footer-text-color !default; +$footer-item-disc-color: $primary !default; +$footer-social-icon-color: $footer-text-color !default; +$footer-logo-height: 2rem !default; +$footer-logo-width: auto !default; .footer { - font-size: 12px; - background: $primary; + background: $footer-background-color; color: $footer-text-color; - margin-top: $footer-padding; - padding: $footer-padding; + font-size: 12px; + line-height: 1.67; + margin: 0; + padding: 40px 0; position: relative; - - @media (max-width: 768px) { + @media (max-width: $breakpoint-md) { width: 100%; } } +.footer-logo-row { + margin-bottom: 30px; +} + .footer-logo { - height: 2rem; + height: $footer-logo-height; + width: $footer-logo-width; +} + +.footer-info-text { + margin: 0 0 25px; + padding: 0 20px 0 0; } .footer-social-icons { - // float: right; - padding-top: 0.5em; + align-items: center; + display: flex; + margin: 0 0 25px; +} + +.footer-social-icon { + color: $footer-social-icon-color; + font-size: 22px; + margin-right: 15px; + text-decoration: none; + + &:hover { + color: $footer-social-icon-color; + } + + &:last-child { + margin-right: 0; + } } .footer-info { @@ -29,37 +61,45 @@ $footer-text-color: rgba($white, 0.7); } .footer-link { - color: inherit; -} + color: $footer-link-color; -.footer-link:hover { - color: white; + &:hover { + color: $footer-link-color; + text-decoration: underline; + } } .footer-list { - padding-top: 1em; + padding-top: 0; h3 { - margin-bottom: 0; - // text-align: center; - } - - hr { - margin-top: 0; - margin-bottom: 1em; - border: 0; - height: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.3); + color: $footer-title-color; + font-size: 14px; + font-weight: 300; + line-height: 1.4; + margin: 0 0 15px; } ul { list-style-type: none; - padding-left: 0; - margin-left: 0; + margin: 0 0 25px; + padding: 0; li { - padding-bottom: 0.5em; + align-items: center; + display: flex; + line-height: 2.5; + padding: 0; + + &::before { + background-color: $footer-item-disc-color; + border-radius: 50%; + content: ""; + display: block; + height: 6px; + margin: 0 10px 0 0; + width: 6px; + } } } } diff --git a/apps/block_scout_web/assets/css/components/_form.scss b/apps/block_scout_web/assets/css/components/_form.scss new file mode 100644 index 0000000000..6eae0badb6 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_form.scss @@ -0,0 +1,46 @@ +$form-control-border-color: #e2e5ec !default; + +.form-control { + border-color: $form-control-border-color; + border-radius: 0; + font-size: 14px; + + &.n-b-r { + border-right: none; + } +} + +.form-p { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.8; + + .text-dark { + color: #333; + } + + &.m-b-0 { + margin-bottom: 0; + } +} + +.input-group-prepend.last { + .input-group-text { + background: none; + border-color: $form-control-border-color; + border-left: none; + color: #a3a9b5; + font-size: 14px; + } +} + +.form-buttons { + [class*="btn-"] { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } +} diff --git a/apps/block_scout_web/assets/css/components/_highlight.scss b/apps/block_scout_web/assets/css/components/_highlight.scss index c504be04f2..26caa3f7e3 100644 --- a/apps/block_scout_web/assets/css/components/_highlight.scss +++ b/apps/block_scout_web/assets/css/components/_highlight.scss @@ -4,16 +4,14 @@ } .line-numbers { - [data-line-number] { - &:before { content: attr(data-line-number); display: inline-block; border-right: 1px solid $gray-400; - padding: 0 .5em; - margin-right: .5em; - color: $gray-600 + padding: 0 0.5em; + margin-right: 0.5em; + color: $gray-600; } } } diff --git a/apps/block_scout_web/assets/css/components/_i_tooltip.scss b/apps/block_scout_web/assets/css/components/_i_tooltip.scss new file mode 100644 index 0000000000..edd1a9ee1c --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_i_tooltip.scss @@ -0,0 +1,18 @@ +$i-tooltip-background: #a3a9b5 !default; +$i-tooltip-background-active: $primary !default; + +.i-tooltip { + display: block; + height: 16px; + width: 16px; + + path { + fill: $i-tooltip-background; + } + + &:hover { + path { + fill: $i-tooltip-background-active; + } + } +} diff --git a/apps/block_scout_web/assets/css/components/_icon-link.scss b/apps/block_scout_web/assets/css/components/_icon-link.scss index 46c90d85b7..2666b0dbae 100644 --- a/apps/block_scout_web/assets/css/components/_icon-link.scss +++ b/apps/block_scout_web/assets/css/components/_icon-link.scss @@ -5,18 +5,18 @@ } .icon-link { - display: inline-flex; align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - margin: 0 .25rem; - color: $text-muted; background-color: $gray-200; - border: none; border-radius: 50%; + border: none; + color: $text-muted; cursor: pointer; + display: inline-flex; + height: 2rem; + justify-content: center; + margin: 0 0.25rem; transition: all 0.1s ease; + width: 2rem; &:hover { background-color: darken($primary, 20%); diff --git a/apps/block_scout_web/assets/css/components/_loading-spinner.scss b/apps/block_scout_web/assets/css/components/_loading-spinner.scss index 9a95bcc940..b335ac7e3a 100644 --- a/apps/block_scout_web/assets/css/components/_loading-spinner.scss +++ b/apps/block_scout_web/assets/css/components/_loading-spinner.scss @@ -12,7 +12,8 @@ position: relative; } -.loading-spinner-block-1, .loading-spinner-block-2 { +.loading-spinner-block-1, +.loading-spinner-block-2 { background-color: currentColor; width: 12px; height: 12px; @@ -31,13 +32,17 @@ @keyframes loading-spinner { 25% { transform: translateX(22px) rotate(-90deg) scale(0.5); - } 50% { + } + 50% { transform: translateX(22px) translateY(22px) rotate(-179deg); - } 50.1% { + } + 50.1% { transform: translateX(22px) translateY(22px) rotate(-180deg); - } 75% { + } + 75% { transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5); - } 100% { + } + 100% { transform: rotate(-360deg); } } @@ -50,7 +55,8 @@ width: 1em; height: 1em; - .loading-spinner-block-1, .loading-spinner-block-2 { + .loading-spinner-block-1, + .loading-spinner-block-2 { width: 0.5em; height: 0.5em; @@ -65,13 +71,17 @@ @keyframes loading-spinner-small { 25% { transform: translateX(10px) rotate(-90deg) scale(0.5); - } 50% { + } + 50% { transform: translateX(10px) translateY(10px) rotate(-179deg); - } 50.1% { + } + 50.1% { transform: translateX(10px) translateY(10px) rotate(-180deg); - } 75% { + } + 75% { transform: translateX(0px) translateY(10px) rotate(-270deg) scale(0.5); - } 100% { + } + 100% { transform: rotate(-360deg); } } diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss new file mode 100644 index 0000000000..627b06879c --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal.scss @@ -0,0 +1,44 @@ +$modal-overlay-color: rgba($secondary, 0.9) !default; +$modal-horizontal-padding: 30px !default; +$modal-vertical-padding: 25px !default; +$modal-border-radius: 10px !default; +$modal-gray-background: #f6f7f9 !default; + +.modal-backdrop { + background-color: $modal-overlay-color; + + &.show { + opacity: 1; + } +} + +.modal-header { + border-bottom: none; + padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; +} + +.close.close-modal { + left: auto; + opacity: 1; + position: absolute; + right: -35px; + top: -35px; +} + +.modal-body { + padding: 0 #{$modal-horizontal-padding} #{$modal-vertical-padding}; +} + +.modal-title { + color: #333; + font-size: 18px; + font-weight: normal; + text-align: left; + white-space: normal; + word-break: break-word; +} + +.modal-content { + border-radius: $modal-border-radius; + position: relative; +} diff --git a/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss b/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss new file mode 100644 index 0000000000..3fc1f468ce --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss @@ -0,0 +1,9 @@ +.modal-become-candidate { + max-width: 100%; + width: 280px; + + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } +} diff --git a/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss new file mode 100644 index 0000000000..8489576ff4 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss @@ -0,0 +1,25 @@ +.modal-bottom-disclaimer { + background-color: $modal-gray-background; + border-bottom-left-radius: $modal-border-radius; + border-bottom-right-radius: $modal-border-radius; + color: #a3a9b5; + display: flex; + font-size: 12px; + font-weight: normal; + line-height: 1.67; + padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; + text-align: left; + + &.b-b-r-0 { + border-bottom-right-radius: 0; + } + + .modal-bottom-disclaimer-graphic { + flex-shrink: 0; + padding-right: 15px; + } + + .modal-bottom-disclaimer-text { + flex-grow: 1; + } +} diff --git a/apps/block_scout_web/assets/css/components/_modal_stake.scss b/apps/block_scout_web/assets/css/components/_modal_stake.scss new file mode 100644 index 0000000000..f9b3e02176 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal_stake.scss @@ -0,0 +1,13 @@ +.modal-stake { + max-width: 100%; + width: 460px; + + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } +} + +.modal-stake-two-cols { + display: flex; +} diff --git a/apps/block_scout_web/assets/css/components/_modal_status.scss b/apps/block_scout_web/assets/css/components/_modal_status.scss new file mode 100644 index 0000000000..9c32b05c72 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal_status.scss @@ -0,0 +1,64 @@ +$modal-status-graph-error: #ff0d51 !default; +$modal-status-graph-warning: #ff8502 !default; +$modal-status-graph-success: $primary !default; + +.modal-status { + max-width: 100%; + width: 300px; + + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } +} + +.modal-status-graph { + align-items: center; + border-top-left-radius: $modal-border-radius; + border-top-right-radius: $modal-border-radius; + display: flex; + height: 135px; + justify-content: center; + + &-error { + background-color: $modal-status-graph-error; + } + + &-warning { + background-color: $modal-status-graph-warning; + } + + &-success { + background-color: $modal-status-graph-success; + } + + svg { + margin-top: 15px; + } +} + +.modal-status-body { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; +} + +.modal-status-title { + color: #333; + font-size: 18px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 15px; + text-align: center; +} + +.modal-status-text { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.5; + margin: 0 0 25px; + text-align: center; +} diff --git a/apps/block_scout_web/assets/css/components/_modal_validator_info.scss b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss new file mode 100644 index 0000000000..3df5db9001 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss @@ -0,0 +1,49 @@ +.modal-validator-info { + max-width: 100%; + width: 660px; + + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } +} + +.modal-validator-info-content { + background-color: $modal-gray-background; + border-bottom-left-radius: $modal-border-radius; + border-bottom-right-radius: $modal-border-radius; + color: #a3a9b5; + column-gap: 60px; + display: grid; + font-size: 12px; + font-weight: normal; + grid-template-columns: 1fr 1fr 1fr; + line-height: 1.67; + padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; + row-gap: 30px; + + @include media-breakpoint-down(sm) { + grid-template-columns: 1fr 1fr; + } +} + +.modal-validator-info-item { + &-title { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + margin-bottom: 15px; + padding: 0; + text-align: left; + } + + &-value { + color: #333; + font-size: 14px; + font-weight: normal; + line-height: 1.2; + margin: 0; + padding: 0; + } +} diff --git a/apps/block_scout_web/assets/css/components/_nav_tabs.scss b/apps/block_scout_web/assets/css/components/_nav_tabs.scss index 8010f4b214..af0071a0e8 100644 --- a/apps/block_scout_web/assets/css/components/_nav_tabs.scss +++ b/apps/block_scout_web/assets/css/components/_nav_tabs.scss @@ -1,20 +1,19 @@ .nav-tabs { - .nav-link { - padding: 1.25rem 2.5rem; - color: $text-muted; - font-size: 14px; border-top-left-radius: 0; border-top-right-radius: 0; + color: $text-muted; + font-size: 14px; + padding: 1.25rem 2.5rem; &:hover { color: $primary; } &.active { - color: $white; background-color: $primary; border-color: $primary; + color: $white; } &:hover { @@ -23,11 +22,10 @@ } } - .nav-tabs .nav-item.show .nav-link { - color: $white; background-color: darken($primary, 10%); border-color: darken($primary, 10%); + color: $white; } .api-doc-tab { diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index 685fbb2fec..0999ef327c 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -1,9 +1,176 @@ -.navbar { +// Default variables +$header-background-color: #fff !default; +$header-links-color: #a3a9b5 !default; +$header-links-color-active: #333 !default; +$header-icon-color: $header-links-color !default; +$header-icon-color-hover: #333 !default; +$header-icon-border-color-hover: $primary !default; +$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default; +$header-textfield-text-color: $header-links-color !default; +$header-textfield-background-color: #f5f6fa !default; +$header-textfield-magnifier-color: $header-links-color !default; +$header-link-horizontal-padding: 0.71rem; +$navbar-logo-height: 1.5em !default; +$navbar-logo-width: auto !default; + +.navbar.navbar-primary { + background-color: $header-background-color; position: relative; z-index: 100; - &-primary { - background-color: $primary; + .nav-item { + font-size: 14px; + } + .navbar-nav { + flex-grow: 1; + + .nav-link { + align-items: center; + color: $header-links-color; + display: flex; + font-size: 14px; + position: relative; + + &:before { + background-color: $header-icon-border-color-hover; + border-radius: 0 0 4px 4px; + content: ""; + display: block; + height: 0.25rem; + left: 50%; + opacity: 0; + position: absolute; + top: -10px; + transform: translateX(-50%); + transition: all 0.2s ease; + width: calc( + 100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding} + ); + } + + &.active, + &:hover { + @include media-breakpoint-up(lg) { + &:before { + opacity: 1; + } + } + } + + &.active, + &:hover, + &.active-icon { + color: $header-links-color-active; + .nav-link-icon { + path { + fill: $header-icon-color-hover; + } + } + } + + .nav-link-icon { + align-items: center; + display: flex; + margin-right: 0.71em; + position: relative; + top: -1px; + + path { + fill: $header-icon-color; + } + } + } + + .nav-item-networks { + margin-left: auto; + } + } + + .navbar-toggler { + border-color: $primary; + color: $primary; + + .navbar-toggler-icon { + background-image: url($header-toggler-icon); + } + } + .search-form { + display: flex; + + @include media-breakpoint-up(xl) { + height: 57px; + margin-bottom: -8px; + margin-top: -8px; + } + } + + .form-inline { + height: 100%; + } + + .input-group { + height: 100%; + position: relative; + } + + .form-control { + background: $header-textfield-background-color; + border-color: $header-textfield-background-color; + color: $header-textfield-text-color; + font-size: 14px; + height: 100%; + padding-left: 38px; + padding-right: 8px; + position: relative; + width: 100%; + z-index: 1; + + &[placeholder]{ + text-overflow: ellipsis !important; + } + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + text-overflow: ellipsis !important; + } + &::-moz-placeholder { /* Firefox 19+ */ + text-overflow: ellipsis !important; + } + &:-ms-input-placeholder { /* IE 10+ */ + text-overflow: ellipsis !important; + } + &:-moz-placeholder { /* Firefox 18- */ + text-overflow: ellipsis !important; + } + + &:focus { + box-shadow: none; + } + + @include media-breakpoint-up(xl) { + width: 280px; + } + } + .input-group-append { + height: 38px; + left: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 38px; + z-index: 5; + + * { + fill: $header-textfield-magnifier-color; + } + } + .input-group-text { + align-items: center; + background: none; + border-color: transparent; + display: flex; + height: 100%; + justify-content: center; + padding: 0; + width: 100%; } } @@ -13,20 +180,24 @@ flex-direction: column; .search-form { + align-items: center; order: -1; width: 100%; - align-items: center; form { flex-grow: 1; } } - .input-group { width: 100%; - } + .awesomplete { + @include media-breakpoint-down(sm) { + width: 100%; + } + } + } .navbar-nav { white-space: nowrap; } @@ -37,134 +208,14 @@ } .navbar-logo { - height: 1.5em; + height: $navbar-logo-height; + width: $navbar-logo-width; } @include media-breakpoint-up(md) { .navbar-expand-lg .navbar-nav .nav-link { - padding-left: 0.75rem; - padding-right: 0.75rem; - } -} - -.navbar .nav-item { - font-size: 14px; -} - -.navbar-dark .navbar-nav .nav-link { - color: $white; -} - -.navbar-nav .nav-link { - display: flex; - align-items: center; -} - -.nav-link-icon { - display: flex; - align-items: center; - position: relative; - top: -1px; - margin-right: 0.5em; - - path { - fill: $secondary; - } -} - -.navbar .search-form { - display: flex; -} - -.navbar .form-control { - background: transparent; - width: auto; - font-size: 12px; - border: none; - color: $white; - padding-right: 0px; - - - &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: transparentize($white, 0.5); - } - &::-moz-placeholder { /* Firefox 19+ */ - color: transparentize($white, 0.5); - } - &:-ms-input-placeholder { /* IE 10+ */ - color: transparentize($white, 0.5); - } - &:-moz-placeholder { /* Firefox 18- */ - color: transparentize($white, 0.5); - } - - &:focus { - box-shadow: none; - } - - @include media-breakpoint-up(xl) { - width: calc(41ch + #{$input-padding-x}); - } -} - -.navbar .input-group-text { - background: none; - border: none; -} - -.input-group-append { - margin-left: -0.5px; - - path { - fill: $secondary; - } -} - -.topnav-nav-link { - position: relative; - color: $white; - - &:before { - content: ""; - position: absolute; - display: block; - bottom: -10px; - left: 50%; - width: 75%; - height: 0.2rem; - background-color: $secondary; - border-radius: 4px 4px 0 0; - opacity: 0; - transform: translateX(-50%); - transition: all 0.2s ease; - } -} - -@include media-breakpoint-up(lg) { - .topnav-nav-link:hover:before { - opacity: 1; - } -} - -.dropdown-menu { - padding: 0px; -} - -.dropdown-item { - padding: 10px 20px; - font-size: 12px; - - &:hover { - background-color: $tertiary; - color: $white; - } - - &.header { - font-weight: bold; - - &.division { - border-top: 1px solid rgb(183, 185, 184); - } + padding-left: $header-link-horizontal-padding; + padding-right: $header-link-horizontal-padding; } } diff --git a/apps/block_scout_web/assets/css/components/_pagination.scss b/apps/block_scout_web/assets/css/components/_pagination.scss index ee2a1f0f56..b044e004bf 100644 --- a/apps/block_scout_web/assets/css/components/_pagination.scss +++ b/apps/block_scout_web/assets/css/components/_pagination.scss @@ -1,35 +1,42 @@ +$pagination-page-link-background: #f5f6fa !default; +$pagination-page-link-color: #a3a9b5 !default; +$pagination-page-link-background-active: $primary !default; +$pagination-page-link-color-active: #fff !default; + .pagination { - display: block; + margin: 0; + padding: 30px; - &-list { - list-style: none; - margin: 0; - padding: 0; - white-space: nowrap; - } + .page-item { + margin: 0 10px 0 0; - li { - font-size: 13px; - display: inline-block; - margin: 0; - margin-right: explorer-size(-3); - &:last-of-type { margin-right: 0; } + &:last-child { + margin-right: 0; + } } - &-link { + .page-link { + background-color: $pagination-page-link-background; + border: 1px solid $pagination-page-link-background; + color: $pagination-page-link-color; display: block; - line-height: 1; - color: $gray-400; - text-decoration: none; - padding: 7px 9px; - border: 1px solid $border-color; - border-radius: $border-radius; + line-height: 1.25; + margin: 0; + padding: 0.5rem 0.75rem; + position: relative; + + &:hover { + background-color: darken($pagination-page-link-background, 5%); + border-color: darken($pagination-page-link-background, 5%); + } - &:hover, - &.is-current { - border-color: $primary; - background: $primary; - color: $white; + .active & { + &, + &:hover { + background-color: $pagination-page-link-background-active; + border-color: $pagination-page-link-background-active; + color: $pagination-page-link-color-active; + } } } } diff --git a/apps/block_scout_web/assets/css/components/_panels.scss b/apps/block_scout_web/assets/css/components/_panels.scss index 489875b7ee..3d1a76bd60 100644 --- a/apps/block_scout_web/assets/css/components/_panels.scss +++ b/apps/block_scout_web/assets/css/components/_panels.scss @@ -1,5 +1,4 @@ .panels { - &__container { padding: 20px; } diff --git a/apps/block_scout_web/assets/css/components/_progress_from_to.scss b/apps/block_scout_web/assets/css/components/_progress_from_to.scss new file mode 100644 index 0000000000..32fdaadbf9 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_progress_from_to.scss @@ -0,0 +1,53 @@ +$progress-from-to-background: #f5f6fa !default; +$progress-from-to-progress-background: $primary !default; + +.progress-from-to { + min-width: 120px; + max-width: 100%; + + .stakes-table & { + width: 120px; + } +} + +.progress-from-to-values { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.progress-from-to-value { + color: #333; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } +} + +.progress-from-to-background { + background-color: $progress-from-to-background; + border-radius: 2px; + height: 4px; + overflow: hidden; + position: relative; + + .stakes-tr-banned & { + background-color: darken($stakes-banned-background, 5%); + } +} + +.progress-from-to-progress { + background-color: $progress-from-to-progress-background; + height: 100%; + left: 0; + max-width: 100%; + position: absolute; + top: 0; + + .stakes-tr-banned & { + background-color: $stakes-banned-color; + } +} diff --git a/apps/block_scout_web/assets/css/components/_stakes.scss b/apps/block_scout_web/assets/css/components/_stakes.scss new file mode 100644 index 0000000000..87271bc983 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -0,0 +1,142 @@ +$stakes-dashboard-copy-icon-color: $copy-icon-color !default; +$stakes-address-color: $primary !default; +$stakes-control-color: $primary !default; +$stakes-banned-color: #ff7986 !default; +$stakes-banned-background: #fff3f7 !default; +$stakes-stats-item-color: #fff !default; +$stakes-stats-item-border-color: #fff !default; + +.stakes-top { + @include gradient-container(); + + margin-bottom: 3rem; + padding: 50px 0; +} + +.stakes-top-stats { + display: flex; + justify-content: space-between; + + @include stats-item($stakes-stats-item-border-color, $stakes-stats-item-color); + + @include media-breakpoint-down(md) { + column-gap: 30px; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 30px; + } + + .stakes-top-stats-item { + @include media-breakpoint-down(md) { + &:nth-child(1), + &:nth-child(2), + &:nth-child(3) { + grid-column-start: 1; + } + &:nth-child(4) { + grid-column-start: 2; + grid-row-start: 1; + } + } + + @include media-breakpoint-down(sm) { + grid-column-start: auto !important; + grid-row-start: auto !important; + } + } + + @include media-breakpoint-down(sm) { + grid-template-columns: 1fr; + } + + .copy-icon { + margin-left: 20px; + path { + fill: $stakes-dashboard-copy-icon-color; + } + } +} + +.stakes-top-stats-value { + align-items: center; + display: flex; + + .stakes-top-stats-item-address & { + white-space: normal; + word-break: break-all; + } +} + +.stakes-top-stats-login { + color: $primary; + cursor: pointer; + margin-right: 8px; +} + +.stakes-address-container { + display: flex; + cursor: pointer; + justify-content: flex-start; + + .stakes-address { + color: $stakes-address-color; + margin-right: 10px; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } + } +} + +.stakes-controls { + align-items: center; + display: flex; + justify-content: flex-end; + padding-right: 30px; +} + +.stakes-control { + cursor: pointer; + display: flex; + justify-content: flex-start; + color: $stakes-control-color; + font-size: 14px; + font-weight: normal; + line-height: 1.2; + margin-right: 25px; + text-align: left; + + &:last-child { + margin-right: 0; + } +} + +.stakes-control-icon { + margin-right: 10px; + path { + fill: $stakes-control-color; + } +} + +.stakes-top-buttons { + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + + .btn-add-full { + margin-bottom: 10px; + } + + @include media-breakpoint-down(md) { + grid-column-start: 2; + grid-row-start: 2; + justify-self: end; + } + + @include media-breakpoint-down(sm) { + grid-column-start: auto !important; + grid-row-start: auto !important; + justify-self: center; + } +} diff --git a/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss b/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss new file mode 100644 index 0000000000..3f95220b2a --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_btn_remove_pool.scss @@ -0,0 +1,21 @@ +$stakes-btn-remove-pool-color: $primary !default; + +.stakes-btn-remove-pool { + align-items: center; + color: $stakes-btn-remove-pool-color; + cursor: pointer; + display: flex; + font-size: 12px; + font-weight: 600; + height: 36px; + justify-content: center; + text-align: center; + + svg { + margin-right: 10px; + } + + path { + fill: $stakes-btn-remove-pool-color; + } +} diff --git a/apps/block_scout_web/assets/css/components/_stakes_empty_content.scss b/apps/block_scout_web/assets/css/components/_stakes_empty_content.scss new file mode 100644 index 0000000000..4bd76a1279 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_empty_content.scss @@ -0,0 +1,35 @@ +.stakes-empty-content { + display: flex; + justify-content: center; + padding: 100px 15px; +} + +.stakes-empty-content-pic { + flex-shrink: 0; + margin: 0 50px 0 0; +} + +.stakes-empty-content-pic-svg-path { + fill: $primary; +} + +.stakes-empty-content-info { + max-width: 300px; +} + +.stakes-empty-content-title { + font-size: 18px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 15px; + text-align: left; +} + +.stakes-empty-content-text { + color: #a3a9b5; + font-size: 14px; + font-weight: normal; + line-height: 1.71; + margin: 0 0 25px; + text-align: left; +} diff --git a/apps/block_scout_web/assets/css/components/_stakes_progress.scss b/apps/block_scout_web/assets/css/components/_stakes_progress.scss new file mode 100644 index 0000000000..4159099fcd --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_progress.scss @@ -0,0 +1,74 @@ +.stakes-progress { + .modal-stake-right & { + border-left: 1px solid $base-border-color; + flex-shrink: 0; + height: 100%; + padding: $modal-vertical-padding $modal-horizontal-padding; + width: 190px; + } +} + +.stakes-progress-info { + margin-bottom: 25px; + + &:last-child { + margin-bottom: 0; + } +} + +.stakes-progress-info-title { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + margin: 0 0 12px; + text-align: left; +} + +.stakes-progress-info-value { + color: #333; + font-size: 14px; + font-weight: normal; + line-height: 1.2; + margin: 0; + text-align: left; + + &.link-color { + color: $primary; + } +} + +.stakes-progress-graph { + margin: 0 0 20px; + position: relative; +} + +.stakes-progress-graph-canvas { + position: relative; + z-index: 1; +} + +.stakes-progress-data { + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 12; +} + +.stakes-progress-data-total { + color: #a3a9b5; + font-size: 12px; + font-weight: normal; + line-height: 1.2; + text-align: center; +} + +.stakes-progress-data-progress { + color: #333; + font-size: 24px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 8px; + text-align: center; +} diff --git a/apps/block_scout_web/assets/css/components/_stakes_table.scss b/apps/block_scout_web/assets/css/components/_stakes_table.scss new file mode 100644 index 0000000000..0bbf59e69c --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss @@ -0,0 +1,75 @@ +$stakes-table-th-background: #f5f6fa !default; +$stakes-table-cell-separation: 25px !default; + +.stakes-table-container { + max-width: 100%; + overflow-x: auto; + width: 100%; +} + +.stakes-table { + min-width: fit-content; + width: 100%; +} + +.stakes-table-th { + background-color: $stakes-table-th-background; + color: #a3a9b5; + font-size: 14px; + font-weight: bold; + line-height: 1.2; + text-align: left; + + &:first-child { + min-width: 15px; + } +} + +.stakes-table-th-content { + align-items: center; + display: flex; + justify-content: flex-start; + padding: 21px $stakes-table-cell-separation 21px 0; + position: relative; + z-index: 0; +} + +.stakes-th-text { + margin-right: 10px; + white-space: nowrap; +} + +.stakes-td { + border-bottom: 1px solid #f5f6fa; + font-size: 14px; + font-weight: normal; + height: 60px; + line-height: 1.2; + padding-right: $stakes-table-cell-separation; + text-align: left; + vertical-align: middle; + white-space: nowrap; + + &:last-child { + padding-right: 0; + } + + .stakes-tr-banned & { + background-color: $stakes-banned-background; + color: $stakes-banned-color; + } +} + +.stakes-td-order { + min-width: 50px; + padding-left: 30px; + text-align: left; +} + +.stakes-td-link-style { + color: $primary; + + .stakes-tr-banned & { + color: $stakes-banned-color; + } +} diff --git a/apps/block_scout_web/assets/css/components/_table.scss b/apps/block_scout_web/assets/css/components/_table.scss index 70875b1986..837652c042 100644 --- a/apps/block_scout_web/assets/css/components/_table.scss +++ b/apps/block_scout_web/assets/css/components/_table.scss @@ -1,6 +1,7 @@ .table-font { - - thead th, td, th { + thead th, + td, + th { border-top: none; border-bottom: none; } diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index c06eb28d9f..339c42232b 100644 --- a/apps/block_scout_web/assets/css/components/_tile.scss +++ b/apps/block_scout_web/assets/css/components/_tile.scss @@ -1,200 +1,155 @@ -.tile { - font-size: 12px; - color: $text-muted; - line-height: 1.4rem; - border: 1px solid $border-color; - border-radius: 2px; - padding: 1rem; - box-shadow: 0 1px 5px rgba($black, 0.15); - - & + & { - margin-top: 1rem; - } - - @include media-breakpoint-down(md) { - margin-bottom: 1rem; - } - - &-type { - - &-block { - border-left: 4px solid $indigo; - - .tile-label { - color: $indigo; - } +$tile-type-block-color: $primary !default; +$tile-type-uncle-color: $cyan !default; +$tile-type-reorg-color: $purple !default; +$tile-type-emission-reward-color: $lilac !default; +$tile-type-transaction-color: $blue !default; +$tile-type-contract-call-color: $green !default; +$tile-type-contract-creation-color: $pink !default; +$tile-type-token-transfer-color: $orange !default; +$tile-type-unique-token-color: $orange !default; +$tile-type-unique-token-image-color: $orange !default; +$tile-type-internal-transaction-color: $teal !default; +$tile-type-api-documentation-color: $primary !default; +$tile-type-progress-bar-color: $primary !default; + +$tile-padding: 1rem; + +@mixin generate-tile-block($prefix, $color, $label-color: false) { + + a { + @if ($label-color) { + color: $label-color; } - - &-uncle { - border-left: 4px solid $cyan; - - .tile-label { - color: $cyan; - } - } - - &-reorg { - border-left: 4px solid $purple; - - .tile-label { - color: $purple; - } - } - - &-emission-reward { - border-left: 4px solid $lilac; - - .tile-label { - color: $lilac; - } - } - - &-transaction { - border-left: 4px solid $blue; - - .tile-label { - color: $blue; - } - } - - &-contract-call { - border-left: 4px solid $green; - - .tile-label { - color: $green; - } + @else { + color: $color; } + } - &-contract-creation { - border-left: 4px solid $pink; + &.tile-type-#{ $prefix } { + border-left: 4px solid $color; - .tile-label { - color: $pink; + .tile-label { + @if ($label-color) { + color: $label-color; } - - .tile-text-highlight { - text-decoration: underline; - text-decoration-style: dashed; + @else { + color: $color; } } - &-token { - border: 1px solid $border-color; - } - - &-token-transfer { - border-left: 4px solid $orange; - padding-bottom: 10px; - - .tile-label { - color: $orange; + .tile-status-label { + @if ($label-color) { + color: $label-color; } - - &-short-name { - overflow: hidden; - max-width: 45%; - vertical-align: middle; - text-overflow: ellipsis; + @else { + color: $color; } } - &-unique-token { - border-left: 4px solid $orange; - padding: 35px 0; - - .tile-label { - color: $orange; - } + .tile-transaction-type-block { + background-color: rgba($color, 0.1); + border-bottom: 1px solid $color; + border-right: 1px solid $color; + border-top: 1px solid $color; + color: $color; } + } +} - &-unique-token-image{ - border-left: 4px solid $orange; - padding: 0; +/*********************************************************************/ - .tile-label { - color: $orange; - } - - & .tile-content { - padding: 45px 0; - } - } +.tile-title { + color: #333; + font-size: 12px; - &-internal-transaction { - border-left: 4px solid $teal; + &-hash { + font-weight: 300; + } - .tile-label { - color: $teal; - } - } + &-lg { + color: $body-color; + font-size: 16px; + } +} - &-api-documentation { - border-left: 4px solid $primary; - background-color: transparent; - width: 100%; - text-align: left; - padding: 15px; - cursor: pointer; +.tile-label { + font-size: 12px; + font-weight: 700; + line-height: 1.2; + margin: 0 0 2px; - .tile-label { - color: $primary; - } - } + &:last-child { + margin-bottom: 0; } - &-status { - &--error--reason { - border-top: 2px solid lighten($danger, 10%); - border-right: 2px solid lighten($danger, 10%); - border-bottom: 2px solid lighten($danger, 10%); - - .tile-status-label { - color: $danger; - } - } - &--awaiting-internal-transactions { - border-top: 2px solid lighten($warning, 10%); - border-right: 2px solid lighten($warning, 10%); - border-bottom: 2px solid lighten($warning, 10%); + &.font-weight-400 { + font-weight: 400; + } +} - .tile-status-label { - color: $warning; - } +.tile-transaction-type-block { + align-items: center; + bottom: -17px; + justify-content: center; + margin-left: -1px; + margin-top: -34px; + padding: 0; + position: relative; + + @include media-breakpoint-down(sm) { + align-items: flex-start; + background: none !important; + border: none !important; + bottom: auto; + flex-direction: column !important; + margin: 0 0 10px; + padding-left: 1rem; + top: auto; + + .tile-status-label { + margin-left: 0 !important; } } } -.tile-title { +.tile-status-label { font-size: 12px; - font-weight: 600; - color: $gray-700; - margin-bottom: 0; + font-weight: 400; + line-height: 1.2; +} - &-hash { - font-weight: 300; - } +.tile-bottom-contents { + background-color: #f6f7f9; + font-size: 12px; + line-height: 1.2; + padding: 0.8rem 1rem; +} - &-lg { - font-size: 16px; - color: $body-color; - } +.tile-transactions { + color: #a3a9b5; + font-size: 12px; + font-weight: 400; + line-height: 1.2; + margin-bottom: 10px; + text-align: left; } .tile-badge { + line-height: 1.25rem; margin-bottom: 0.1rem; padding: 0; - width: 2.5rem; - line-height: 1.25rem; text-align: center; + width: 2.5rem; } .tile-muted { - border-left: 1px solid $border-color; background-color: $gray-100; + border-left: 1px solid $border-color; box-shadow: none; } .tile-function-response { + span.function-response-item { display: block; margin-left: 1rem; @@ -203,12 +158,132 @@ content: ","; } } + p { margin: 0; } + } .tile-image { - max-width: 140px; max-height: 140px; + max-width: 140px; } + +.tile { + border-radius: 4px; + border: 1px solid $border-color; + color: $text-muted; + flex-grow: 1; + font-size: 12px; + line-height: 1.4rem; + padding: $tile-padding; + + @include generate-tile-block('block', $tile-type-block-color, darken($tile-type-block-color, 20%)); + @include generate-tile-block('uncle', $tile-type-uncle-color); + @include generate-tile-block('reorg', $tile-type-reorg-color); + @include generate-tile-block('emission-reward', $tile-type-emission-reward-color); + @include generate-tile-block('transaction', $tile-type-transaction-color); + @include generate-tile-block('contract-call', $tile-type-contract-call-color); + @include generate-tile-block('contract-creation', $tile-type-contract-creation-color); + @include generate-tile-block('token-transfer', $tile-type-token-transfer-color); + @include generate-tile-block('unique-token', $tile-type-unique-token-color); + @include generate-tile-block('unique-token-image', $tile-type-unique-token-image-color); + @include generate-tile-block('internal-transaction', $tile-type-internal-transaction-color); + @include generate-tile-block('api-documentation', $tile-type-api-documentation-color); + + &.n-p { + padding: 0; + } + + & + & { + margin-top: 1rem; + } + + @include media-breakpoint-down(md) { + margin-bottom: 1rem; + + [data-selector="place-holder"] & { + min-height: 105px; + } + } + + &.tile-type-block { + .tile-title { + font-weight: 700; + line-height: 1.2; + margin-bottom: 12px; + padding: 1rem 1rem 0 1rem; + } + } + + &.tile-type-contract-creation { + .tile-text-highlight { + text-decoration: underline; + text-decoration-style: dashed; + } + } + + &.tile-type-token { + border: 1px solid $border-color; + } + + &.tile-type-token-transfer { + &-short-name { + max-width: 45%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + } + } + + &.tile-type-unique-token-image { + padding: 0; + + & .tile-content { + padding: 45px 0; + } + } + + &.tile-type-api-documentation { + background-color: transparent; + cursor: pointer; + padding: 15px; + text-align: left; + width: 100%; + } + + .tile-status--error--reason { + border-bottom: 2px solid lighten($danger, 10%); + border-right: 2px solid lighten($danger, 10%); + border-top: 2px solid lighten($danger, 10%); + + .tile-status-label { + color: $danger; + } + } + + .tile-status--awaiting-internal-transactions { + border-bottom: 2px solid lighten($warning, 10%); + border-right: 2px solid lighten($warning, 10%); + border-top: 2px solid lighten($warning, 10%); + + .tile-status-label { + color: $warning; + } + } + + /* Progress bar */ + .progress { + background-color: #f5f6fa; + border-radius: 2px; + height: 4px; + margin-top: 8px; + width: 120px; + + .progress-bar { + background-color: $tile-type-progress-bar-color; + border-radius: 2px; + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_token-balance-dropdown.scss b/apps/block_scout_web/assets/css/components/_token-balance-dropdown.scss index b2d591e6fc..14c42a5ebb 100644 --- a/apps/block_scout_web/assets/css/components/_token-balance-dropdown.scss +++ b/apps/block_scout_web/assets/css/components/_token-balance-dropdown.scss @@ -2,7 +2,7 @@ min-width: 14.375rem; margin-top: 1rem; background-color: $gray-100; - box-shadow: 0px 2px 3px 2px $gray-200; + box-shadow: 0 2px 3px 2px $gray-200; border: none; .dropdown-items { @@ -14,7 +14,8 @@ } } - &:after, &:before { + &:after, + &:before { bottom: 100%; right: 14%; border: solid transparent; diff --git a/apps/block_scout_web/assets/css/components/_token_tile_view_more.scss b/apps/block_scout_web/assets/css/components/_token_tile_view_more.scss index 3bcc2460a1..435dc3e235 100644 --- a/apps/block_scout_web/assets/css/components/_token_tile_view_more.scss +++ b/apps/block_scout_web/assets/css/components/_token_tile_view_more.scss @@ -2,14 +2,17 @@ line-height: 0.5; text-align: center; - &:hover, :focus { + &:hover, + :focus { text-decoration: none; } } + .token-tile-view-more span { display: inline-block; position: relative; } + .token-tile-view-more span:before, .token-tile-view-more span:after { content: ""; @@ -20,43 +23,43 @@ top: 0; width: 43%; } + .token-tile-view-more span:before { right: 55%; - margin-right: .9375rem; + margin-right: 0.9375rem; } + .token-tile-view-more span:after { left: 55%; - margin-left: .9375rem; + margin-left: 0.9375rem; } - - @include media-breakpoint-down(md) { - .token-tile-view-more span:before, .token-tile-view-more span:after { width: 40%; } + .token-tile-view-more span:before { right: 58%; } + .token-tile-view-more span:after { left: 58%; } - } @include media-breakpoint-down(sm) { - .token-tile-view-more span:before, .token-tile-view-more span:after { width: 28%; } + .token-tile-view-more span:before { right: 66%; } + .token-tile-view-more span:after { left: 66%; } - } diff --git a/apps/block_scout_web/assets/css/components/_tooltip.scss b/apps/block_scout_web/assets/css/components/_tooltip.scss new file mode 100644 index 0000000000..1cd7797785 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_tooltip.scss @@ -0,0 +1,18 @@ +$tooltip-background-color: $primary !default; +$tooltip-color: #fff !default; + +.tooltip { + max-width: 250px; + min-width: 100px; + + .tooltip-inner { + background-color: $tooltip-background-color; + border-radius: 5px; + color: $tooltip-color; + padding: 15px; + } + + .arrow::before { + border-top-color: $tooltip-background-color; + } +} diff --git a/apps/block_scout_web/assets/css/components/_transaction-input.scss b/apps/block_scout_web/assets/css/components/_transaction-input.scss index b223efa842..9f10579f8d 100644 --- a/apps/block_scout_web/assets/css/components/_transaction-input.scss +++ b/apps/block_scout_web/assets/css/components/_transaction-input.scss @@ -1,14 +1,14 @@ -.transaction-input-text{ +.transaction-input-text { white-space: pre; color: black; - pre{ - code{ + pre { + code { color: black; } } } -.transaction-input-table{ +.transaction-input-table { overflow-x: scroll; } diff --git a/apps/block_scout_web/assets/css/components/_transaction.scss b/apps/block_scout_web/assets/css/components/_transaction.scss new file mode 100644 index 0000000000..5214b0b301 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/_transaction.scss @@ -0,0 +1,6 @@ +.transaction-details-address { + font-size: 12px; + font-weight: bold; + line-height: 1.2; + margin: 0 0 12px; +} diff --git a/apps/block_scout_web/assets/css/components/address-overview.scss b/apps/block_scout_web/assets/css/components/address-overview.scss deleted file mode 100644 index 9acb7fcdfa..0000000000 --- a/apps/block_scout_web/assets/css/components/address-overview.scss +++ /dev/null @@ -1,20 +0,0 @@ -.address-overview { - .card-section { - margin-bottom: 3rem; - } - - .card { - margin-bottom: 0; - height: 100%; - } -} - -.balance-card-title { - margin-bottom: .5rem; -} - -.address-detail-item{ - display: inline-block; - padding-bottom: 0.5em; - margin-right: 1em; -} diff --git a/apps/block_scout_web/assets/css/theme/_base_variables.scss b/apps/block_scout_web/assets/css/theme/_base_variables.scss index bfc4cef23e..0d428a7194 100644 --- a/apps/block_scout_web/assets/css/theme/_base_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss @@ -4,7 +4,7 @@ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. // stylelint-disable -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -14,96 +14,104 @@ $gray-600: #cdcdcc !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; $grays: () !default; -$grays: map-merge(( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900 -), $grays); - -$blue: #4786ff !default; -$indigo: #5b389f !default; -$purple: #997fdc !default; -$pink: #e83e8c !default; -$lilac: #b38dc9 !default; -$red: #c74d39 !default; -$orange: #ef9a60 !default; -$yellow: #ffc107 !default; -$green: #20b760 !default; -$teal: #009097 !default; -$cyan: #90e1d8 !default; +$grays: map-merge( + ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 + ), + $grays +); + +$blue: #4786ff !default; +$indigo: #5b389f !default; +$purple: #997fdc !default; +$pink: #e83e8c !default; +$lilac: #b38dc9 !default; +$red: #c74d39 !default; +$orange: #ef9a60 !default; +$yellow: #ffc107 !default; +$green: #20b760 !default; +$teal: #009097 !default; +$cyan: #90e1d8 !default; $colors: () !default; -$colors: map-merge(( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 -), $colors); - -$primary: $indigo !default; -$secondary: #7dd79f !default; -$tertiary: $purple !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-400 !default; -$dark: $gray-800 !default; +$colors: map-merge( + ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 + ), + $colors +); + +$primary: $indigo !default; +$secondary: #7dd79f !default; +$tertiary: $purple !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-400 !default; +$dark: $gray-800 !default; $theme-colors: () !default; -$theme-colors: map-merge(( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark -), $theme-colors); +$theme-colors: map-merge( + ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark + ), + $theme-colors +); // stylelint-enable // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; // Spacing // @@ -114,48 +122,61 @@ $enable-print-styles: true !default; // stylelint-disable $spacer: 1rem !default; $spacers: () !default; -$spacers: map-merge(( - 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), - 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3) -), $spacers); +$spacers: map-merge( + ( + 0: 0, + 1: ( + $spacer * 0.25 + ), + 2: ( + $spacer * 0.5 + ), + 3: $spacer, + 4: ( + $spacer * 1.5 + ), + 5: ( + $spacer * 3 + ) + ), + $spacers +); // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; -$sizes: map-merge(( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100%, - auto: auto -), $sizes); +$sizes: map-merge( + ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto + ), + $sizes +); // stylelint-enable // Body // // Settings for the `
` element. -$body-bg: $white !default; -$body-color: $gray-900 !default; +$body-bg: $white !default; +$body-color: $gray-900 !default; // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken(map-get($theme-colors, primary), 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken(map-get($theme-colors, primary), 15%) !default; +$link-hover-decoration: underline !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: 1rem !default; - +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints // @@ -173,7 +194,6 @@ $grid-breakpoints: ( @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); - // Grid containers // // Define the maximum width of `.container` for different screen sizes. @@ -187,739 +207,772 @@ $container-max-widths: ( @include _assert-ascending($container-max-widths, "$container-max-widths"); - // Grid columns // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; // Components // // Define common padding and border radius sizes and more. -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; -$border-width: 1px !default; -$border-color: $gray-300 !default; +$border-width: 1px !default; +$border-color: $gray-300 !default; -$border-radius: .1rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-radius: 0.1rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; -$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; -$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default; +$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; -$caret-width: .3em !default; - -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$caret-width: 0.3em !default; +$transition-base: all 0.2s ease-in-out !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; // Fonts // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$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; +$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 -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: ($font-size-base * 1.25) !default; -$font-size-sm: ($font-size-base * .875) !default; - -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 700 !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * 0.875) !default; -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; -$h1-font-size: $font-size-base * 2.5 !default; -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.75 !default; -$h4-font-size: $font-size-base * 1.5 !default; -$h5-font-size: $font-size-base * 1.25 !default; -$h6-font-size: $font-size-base !default; +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.2 !default; -$headings-color: inherit !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; -$lead-font-size: ($font-size-base * 1.25) !default; -$lead-font-weight: 300 !default; +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; -$small-font-size: 80% !default; +$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-weight: 300 !default; -$text-muted: $gray-500 !default; +$small-font-size: 80% !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$text-muted: $gray-500 !default; -$hr-border-color: rgba($black, .1) !default; -$hr-border-width: $border-width !default; +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; -$mark-padding: .2em !default; +$hr-border-color: rgba($black, 0.1) !default; +$hr-border-width: $border-width !default; -$dt-font-weight: $font-weight-bold !default; +$mark-padding: 0.2em !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem !default; +$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; -$mark-bg: #fcf8e3 !default; +$list-inline-padding: 0.5rem !default; -$hr-margin-y: $spacer !default; +$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer !default; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding: .75rem !default; -$table-cell-padding-sm: .3rem !default; +$table-cell-padding: 0.75rem !default; +$table-cell-padding-sm: 0.3rem !default; -$table-bg: transparent !default; -$table-accent-bg: rgba($black, .05) !default; -$table-hover-bg: rgba($black, .075) !default; -$table-active-bg: $table-hover-bg !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05) !default; +$table-hover-bg: rgba($black, 0.075) !default; +$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($gray-900, 7.5%) !default; -$table-dark-color: $body-bg !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05) !default; +$table-dark-hover-bg: rgba($white, 0.075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; -$table-striped-order: odd !default; +$table-striped-order: odd !default; -$table-caption-color: $text-muted !default; +$table-caption-color: $text-muted !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: .375rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: $line-height-base !default; - -$input-btn-focus-width: .2rem !default; -$input-btn-focus-color: rgba($component-active-bg, .25) !default; -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; +$input-btn-padding-y: 0.375rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-line-height: $line-height-base !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: $line-height-sm !default; +$input-btn-focus-width: 0.2rem !default; +$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; -$input-btn-padding-y-lg: .5rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; -$input-btn-border-width: $border-width !default; +$input-btn-padding-y-lg: 0.5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-border-width: $border-width !default; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-line-height: $input-btn-line-height !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-border-width: $input-btn-border-width !default; +$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; -$btn-focus-width: $input-btn-focus-width !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; -$btn-disabled-opacity: .65 !default; -$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: 0.65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; -$btn-link-disabled-color: $gray-600 !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem !default; +$btn-block-spacing-y: 0.5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; - -$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; +$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; // Forms -$label-margin-bottom: .5rem !default; +$label-margin-bottom: 0.5rem !default; + +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; -$input-color: $gray-700 !default; -$input-border-color: $gray-400 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; +$input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-height-border: $input-border-width * 2 !default; -$input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten($component-active-bg, 25%) !default; -$input-focus-color: $input-color !default; -$input-focus-width: $input-btn-focus-width !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-placeholder-color: $gray-600 !default; -$input-plaintext-color: $body-color !default; +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc( + #{$input-height-inner-sm} + #{$input-height-border} +) !default; + +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc( + #{$input-height-inner-lg} + #{$input-height-border} +) !default; -$input-height-border: $input-border-width * 2 !default; +$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; + +$form-text-margin-top: 0.25rem !default; + +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: 0.3rem !default; +$form-check-input-margin-x: 0.25rem !default; + +$form-check-inline-margin-x: 0.75rem !default; +$form-check-inline-input-margin-x: 0.3125rem !default; + +$form-group-margin-bottom: 1rem !default; + +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; + +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; + +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 +) !default; +$custom-control-indicator-checked-box-shadow: none !default; + +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; + +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten( + $component-active-bg, + 35% +) !default; +$custom-control-indicator-active-box-shadow: none !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$custom-checkbox-indicator-border-radius: $border-radius !default; +$custom-checkbox-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; -$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; -$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; +$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; - -$form-text-margin-top: .25rem !default; - -$form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .3rem !default; -$form-check-input-margin-x: .25rem !default; - -$form-check-inline-margin-x: .75rem !default; -$form-check-inline-input-margin-x: .3125rem !default; - -$form-group-margin-bottom: 1rem !default; - -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: $gray-200 !default; -$input-group-addon-border-color: $input-border-color !default; - -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; - -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; - -$custom-control-indicator-checked-color: $component-active-color !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; -$custom-control-indicator-checked-box-shadow: none !default; - -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; - -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; -$custom-control-indicator-active-box-shadow: none !default; - -$custom-checkbox-indicator-border-radius: $border-radius !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; - -$custom-radio-indicator-border-radius: 50% !default; -$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; -$custom-select-height: $input-height !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-btn-line-height !default; -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $input-bg !default; -$custom-select-disabled-bg: $gray-200 !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: $gray-800 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; - -$custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; - -$custom-select-font-size-sm: 75% !default; -$custom-select-height-sm: $input-height-sm !default; - -$custom-select-font-size-lg: 125% !default; -$custom-select-height-lg: $input-height-lg !default; - -$custom-range-track-width: 100% !default; -$custom-range-track-height: .5rem !default; -$custom-range-track-cursor: pointer !default; -$custom-range-track-bg: $gray-300 !default; -$custom-range-track-border-radius: 1rem !default; -$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-range-thumb-width: 1rem !default; -$custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; -$custom-range-thumb-border: 0 !default; -$custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; - -$custom-file-height: $input-height !default; -$custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; - -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; -$custom-file-color: $input-color !default; -$custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; -$custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $input-border-radius !default; -$custom-file-box-shadow: $input-box-shadow !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $input-group-addon-bg !default; +$custom-select-padding-y: 0.375rem !default; +$custom-select-padding-x: 0.75rem !default; +$custom-select-height: $input-height !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-btn-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-600 !default; +$custom-select-bg: $input-bg !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: $gray-800 !default; +$custom-select-indicator: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), + 0 0 5px rgba($custom-select-focus-border-color, 0.5) !default; + +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + +$custom-range-track-width: 100% !default; +$custom-range-track-height: 0.5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; + +$custom-file-height: $input-height !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( en: "Browse" ) !default; - // Form validation -$form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-color: theme-color("danger") !default; - +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; - -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $primary !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: 0.5rem !default; +$dropdown-spacer: 0.125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, 0.15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $primary !default; -$dropdown-link-disabled-color: $gray-600 !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-header-color: $gray-600 !default; +$dropdown-item-padding-y: 0.25rem !default; +$dropdown-item-padding-x: 1.5rem !default; +$dropdown-header-color: $gray-600 !default; // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navs -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: $gray-300 !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; -$nav-tabs-link-active-color: $gray-700 !default; -$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; -$nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: ($spacer / 2) !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: ($spacer / 2) !default; // Navbar -$navbar-padding-y: ($spacer / 2) !default; -$navbar-padding-x: $spacer !default; +$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; -$navbar-nav-link-padding-x: .5rem !default; +$navbar-nav-link-padding-x: 0.5rem !default; -$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; -$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; - -$navbar-toggler-padding-y: .25rem !default; -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; -$navbar-toggler-border-radius: $btn-border-radius !default; - -$navbar-dark-color: rgba($white, .5) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; - -$navbar-light-color: $gray-200 !default; -$navbar-light-hover-color: rgba($black, .7) !default; -$navbar-light-active-color: rgba($black, .9) !default; -$navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black, .1) !default; +$nav-link-height: ( + $font-size-base * $line-height-base + $nav-link-padding-y * 2 +) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; + +$navbar-toggler-padding-y: 0.25rem !default; +$navbar-toggler-padding-x: 0.75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; + +$navbar-dark-color: rgba($white, 0.5) !default; +$navbar-dark-hover-color: rgba($white, 0.75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, 0.25) !default; +$navbar-dark-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-dark-toggler-border-color: rgba($white, 0.1) !default; + +$navbar-light-color: $gray-200 !default; +$navbar-light-hover-color: rgba($black, 0.7) !default; +$navbar-light-active-color: rgba($black, 0.9) !default; +$navbar-light-disabled-color: rgba($black, 0.3) !default; +$navbar-light-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-light-toggler-border-color: rgba($black, 0.1) !default; // Pagination -$pagination-padding-y: .5rem !default; -$pagination-padding-x: .75rem !default; -$pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-sm: .5rem !default; -$pagination-padding-y-lg: .75rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; - -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-padding-y: 0.5rem !default; +$pagination-padding-x: 0.75rem !default; +$pagination-padding-y-sm: 0.25rem !default; +$pagination-padding-x-sm: 0.5rem !default; +$pagination-padding-y-lg: 0.75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; -$pagination-focus-outline: 0 !default; +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Jumbotron -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-200 !default; - +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; // Cards -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-bg: $white !default; - -$card-img-overlay-padding: 1.25rem !default; +$card-spacer-y: 0.75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, 0.125) !default; +$card-inner-border-radius: calc( + #{$card-border-radius} - #{$card-border-width} +) !default; +$card-cap-bg: rgba($black, 0.03) !default; +$card-bg: $white !default; -$card-group-margin: ($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; +$card-img-overlay-padding: 1.25rem !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: ($font-size-sm * 0.875) !default; -$tooltip-max-width: 70ch !default; -$tooltip-color: $white !default; -$tooltip-bg: $secondary !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: 1 !default; -$tooltip-padding-y: .30rem !default; -$tooltip-padding-x: .6rem !default; -$tooltip-margin: 0 !default; - -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $secondary !default; +$tooltip-font-size: ($font-size-sm * 0.875) !default; +$tooltip-max-width: 70ch !default; +$tooltip-color: $white !default; +$tooltip-bg: $secondary !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: 1 !default; +$tooltip-padding-y: 0.3rem !default; +$tooltip-padding-x: 0.6rem !default; +$tooltip-margin: 0 !default; +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; +$tooltip-arrow-color: $secondary !default; // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; - -$popover-header-bg: darken($popover-bg, 3%) !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: .5rem !default; -$popover-header-padding-x: .75rem !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black, 0.2) !default; +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.5rem !default; +$popover-header-padding-x: 0.75rem !default; -$popover-arrow-width: 1rem !default; -$popover-arrow-height: .5rem !default; -$popover-arrow-color: $popover-bg !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: 0.5rem !default; +$popover-arrow-color: $popover-bg !default; +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .4em !default; -$badge-border-radius: $border-radius !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; +$badge-border-radius: $border-radius !default; -$badge-pill-padding-x: .6em !default; +$badge-pill-padding-x: 0.6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; - +$badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; - -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-inner-padding: 1rem !default; -$modal-title-line-height: $line-height-base !default; +$modal-dialog-margin: 0.5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; +$modal-title-line-height: $line-height-base !default; -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; +$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; -$modal-transition: transform .3s ease-out !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; +$modal-transition: transform 0.3s ease-out !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: .75rem !default; -$alert-padding-x: 1.25rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; - -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 6 !default; +$alert-padding-y: 0.75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; // Progress bars -$progress-height: 1rem !default; -$progress-font-size: ($font-size-base * .75) !default; -$progress-bg: $gray-200 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; -$progress-bar-color: $white !default; -$progress-bar-bg: $primary !default; -$progress-bar-animation-timing: 1s linear infinite !default; -$progress-bar-transition: width .6s ease !default; +$progress-height: 1rem !default; +$progress-font-size: ($font-size-base * 0.75) !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: $primary !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width 0.6s ease !default; // List group -$list-group-bg: $white !default; -$list-group-border-color: rgba($black, .125) !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-y: .75rem !default; -$list-group-item-padding-x: 1.25rem !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, 0.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-item-padding-y: 0.75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-active-color: $body-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: $gray-300 !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; - +$thumbnail-padding: 0.25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default; // Figures -$figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-600 !default; - +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; - -$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-padding-y: 0.75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: 0.5rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: quote("/") !default; +$breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-border-radius: $border-radius !default; +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: quote("/") !default; +$breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; - -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: 0.5 !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; -$carousel-control-icon-width: 20px !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-icon-width: 20px !default; -$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-control-prev-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-control-next-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-transition: transform 0.6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 87.5% !default; -$code-color: $pink !default; - -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: $gray-900 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; -$pre-color: $gray-900 !default; -$pre-scrollable-max-height: 340px !default; +$kbd-padding-y: 0.2rem !default; +$kbd-padding-x: 0.4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; // Printing -$print-page-size: a3 !default; -$print-body-min-width: map-get($grid-breakpoints, "lg") !default; +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/apps/block_scout_web/assets/css/theme/_callisto_variables.scss b/apps/block_scout_web/assets/css/theme/_callisto_variables.scss index 3e4fc4041c..60bfc0a1bc 100644 --- a/apps/block_scout_web/assets/css/theme/_callisto_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_callisto_variables.scss @@ -1,3 +1,3 @@ -$primary: #34C88A; -$secondary: #163F59; -$tertiary: #466D85; +$primary: #34c88a; +$secondary: #163f59; +$tertiary: #466d85; diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss index 84362ffcf1..e331dc725c 100644 --- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss @@ -1,6 +1,6 @@ -$primary: #fec042; -$secondary: #53546a; -$tertiary: #1755e4; +$primary: #fec042; +$secondary: #53546a; +$tertiary: #1755e4; .navbar.navbar-primary { background-color: #f2f6f8; @@ -16,25 +16,24 @@ $tertiary: #1755e4; .form-control { color: $secondary; - border-color: transparentize($secondary, 0.30); - &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + &::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ color: transparentize($secondary, 0.5); } - &::-moz-placeholder { /* Firefox 19+ */ + &::-moz-placeholder { + /* Firefox 19+ */ color: transparentize($secondary, 0.5); } - &:-ms-input-placeholder { /* IE 10+ */ + &:-ms-input-placeholder { + /* IE 10+ */ color: transparentize($secondary, 0.5); } - &:-moz-placeholder { /* Firefox 18- */ + &:-moz-placeholder { + /* Firefox 18- */ color: transparentize($secondary, 0.5); } } - - .input-group-text { - border-color: transparentize($secondary, 0.30); - } } .navbar-logo { diff --git a/apps/block_scout_web/assets/css/theme/_ellaism_variables.scss b/apps/block_scout_web/assets/css/theme/_ellaism_variables.scss index 78134769ec..a9bed3d06f 100644 --- a/apps/block_scout_web/assets/css/theme/_ellaism_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ellaism_variables.scss @@ -1,3 +1,3 @@ -$primary: #4A4A4A; -$secondary: #01C85C; -$tertiary: #466D85; +$primary: #4a4a4a; +$secondary: #01c85c; +$tertiary: #466d85; diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss index af105712d0..b04cf1234b 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss @@ -1,3 +1,8 @@ -$primary: #1b1b39; -$secondary: #4beba0; -$tertiary: #4beba0; +$primary: #1b1b39; +$secondary: #4beba0; +$tertiary: #4beba0; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss index f04ab89eee..98d2da802c 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss @@ -1,3 +1,3 @@ -$primary: #16465b; -$secondary: #5ab3ff; -$tertiary: #77a4c5; +$primary: #16465b; +$secondary: #5ab3ff; +$tertiary: #77a4c5; diff --git a/apps/block_scout_web/assets/css/theme/_expanse_variables.scss b/apps/block_scout_web/assets/css/theme/_expanse_variables.scss index 68e470fd1c..e1f0a7fcf5 100644 --- a/apps/block_scout_web/assets/css/theme/_expanse_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_expanse_variables.scss @@ -1,3 +1,3 @@ -$primary: #1F4C55; -$secondary: #E08E64; -$tertiary: #333333; +$primary: #1f4c55; +$secondary: #e08e64; +$tertiary: #333333; diff --git a/apps/block_scout_web/assets/css/theme/_gochain_variables.scss b/apps/block_scout_web/assets/css/theme/_gochain_variables.scss index 9b409fccf9..ebca5cce8e 100644 --- a/apps/block_scout_web/assets/css/theme/_gochain_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_gochain_variables.scss @@ -1,3 +1,3 @@ -$primary: #586A8F; -$secondary: #00BCD4; -$tertiary: #6F87B2; +$primary: #586a8f; +$secondary: #00bcd4; +$tertiary: #6f87b2; diff --git a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss index 3c83257b1f..9ccef987fd 100644 --- a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss @@ -1,3 +1,8 @@ -$primary: #20201A; -$secondary: #F0D96B; -$tertiary: #4A443A; \ No newline at end of file +$primary: #20201a; +$secondary: #f0d96b; +$tertiary: #4a443a; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss index b331c7e310..7a52279871 100644 --- a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss @@ -1,3 +1,8 @@ $primary: #28aca4; $secondary: #89edda; $tertiary: #997fdc; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_lukso_variables.scss b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss new file mode 100644 index 0000000000..a09049e7c8 --- /dev/null +++ b/apps/block_scout_web/assets/css/theme/_lukso_variables.scss @@ -0,0 +1,130 @@ +$primary: #1d3154; +$secondary: #fdcec4; +$tertiary: #00ff00; + +$common-link-color: #2e4d84; + +$dashboard-banner-gradient-start: #fdb8aa; +$dashboard-banner-gradient-end: #fdcec4; + +$dashboard-stats-item-label-color: $primary; +$dashboard-stats-item-value-color: $primary; +$dashboard-stats-item-border-color: $primary; + +$header-links-color-active: #333; + +$tile-type-block-color: $secondary; + +$navbar-logo-height: 18px; +$navbar-logo-width: 100px; + +$footer-background-color: $primary; +$footer-item-disc-color: $secondary; +$footer-link-color: $secondary; +$footer-social-icon-color: $secondary; +$footer-text-color: #fff; +$footer-logo-height: 18px; +$footer-logo-width: 100px; + +$btn-line-color: $primary; + +$dashboard-stats-item-color: $primary; +$dashboard-stats-item-border-color: $primary; +$stakes-stats-item-color: $primary; +$stakes-stats-item-border-color: $primary; + +$card-background-1: $secondary; +$card-background-1-text-color: $primary; + +$dashboard-banner-network-stats-static-image: "/images/lukso_dashboard_image.png"; + +// Custom home +$dashboard-banner-network-plain-container-height: 150px; + +.layout-container { + .dashboard-banner-container::after { + display: none; + } + + .dashboard-banner-network-graph { + display: none; + } + + .dashboard-banner-network-plain-container { + background-color: transparent; + height: $dashboard-banner-network-plain-container-height; + margin: 0; + padding: 0; + width: 100%; + + @include media-breakpoint-down(lg) { + height: auto; + min-height: $dashboard-banner-network-plain-container-height; + padding-bottom: 0; + padding-top: 25px; + } + + .dashboard-banner-network-stats { + align-items: center; + display: flex; + height: 100%; + justify-content: flex-start; + width: 100%; + + @include media-breakpoint-down(lg) { + flex-wrap: wrap; + justify-content: space-between; + } + + &::after { + background-color: transparent; + background-image: url($dashboard-banner-network-stats-static-image); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + bottom: auto; + content: ""; + display: block; + flex-grow: 0; + flex-shrink: 0; + height: $dashboard-banner-network-plain-container-height; + margin: 0 0 0 auto; + order: 150; + width: 301px; + + @include media-breakpoint-down(lg) { + display: none; + } + } + + .dashboard-banner-network-stats-item { + margin-right: 60px; + + @include media-breakpoint-down(lg) { + flex-grow: 1; + flex-shrink: 1; + margin-right: 0; + margin-bottom: 25px; + } + + @include media-breakpoint-down(sm) { + min-width: 50%; + } + + &.dashboard-banner-network-stats-item-1 { + order: 1; + } + &.dashboard-banner-network-stats-item-2 { + order: 2; + } + &.dashboard-banner-network-stats-item-3 { + order: 4; + margin-right: 0; + } + &.dashboard-banner-network-stats-item-4 { + order: 3; + } + } + } + } +} diff --git a/apps/block_scout_web/assets/css/theme/_musicoin_variables.scss b/apps/block_scout_web/assets/css/theme/_musicoin_variables.scss index b69d3ee463..65013a7795 100644 --- a/apps/block_scout_web/assets/css/theme/_musicoin_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_musicoin_variables.scss @@ -1,3 +1,3 @@ -$primary: #171717; -$secondary: #FF9000; -$tertiary: #727272; +$primary: #171717; +$secondary: #ff9000; +$tertiary: #727272; diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss index 1d61c621d8..515f5eafaf 100644 --- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss @@ -1,25 +1,8 @@ -// ------------------------------- // -// Neutral Theme 1: Blue Shifted -// ------------------------------- // +$primary: #262d62; +$secondary: #687bf6; +$tertiary: #687bf6; -// $primary: #254F8D; -// $secondary: #72B0FB; -// $tertiary: #72B0FB; +$dashboard-line-color-price: #8286a9 !default; - -// ------------------------------- // -// Neutral Theme 2: Black and Blue -// ------------------------------- // - -// $primary: #34373E; -// $secondary: #72B0FB; -// $tertiary: #72B0FB; - - -// ------------------------------- // -// Neutral Theme 3: Purple Shifted -// ------------------------------- // - -$primary: #262D62; -$secondary: #687BF6; -$tertiary: #687BF6; +$base-border-color: #e2e5ec !default; +$common-container-margin: 50px !default; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_pirl_variables.scss b/apps/block_scout_web/assets/css/theme/_pirl_variables.scss index 772c9092e6..8f57f79a0e 100644 --- a/apps/block_scout_web/assets/css/theme/_pirl_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_pirl_variables.scss @@ -1,3 +1,8 @@ -$primary: #343434; -$secondary: #A2D729; -$tertiary: #7F7F7F; +$primary: #343434; +$secondary: #a2d729; +$tertiary: #7f7f7f; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss index 8998e95dca..da2fe0de74 100644 --- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss @@ -1,3 +1,11 @@ -$primary: #5b389f; -$secondary: #7dd79f; -$tertiary: #997fdc; +$primary: #5b389f; +$secondary: #7dd79f; +$tertiary: #997fdc; + +$header-links-color-active: #333; +$button-secondary-color: $primary; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss new file mode 100644 index 0000000000..9d92ca2adc --- /dev/null +++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss @@ -0,0 +1,29 @@ +$primary: #15bba6; +$secondary: #17314f; +$tertiary: #00ff00; + +$header-links-color-active: #333; +$dashboard-banner-gradient-start: $secondary; +$dashboard-banner-gradient-end: #1e4168; + +$dashboard-line-color-market: $primary; + +$tile-type-block-border-color: $secondary; +$tile-type-block-color: #333; + +$footer-background-color: #173250; +$footer-text-color: #909dac; + +$navbar-logo-height: auto; +$navbar-logo-width: 100px; + +$footer-logo-height: auto; +$footer-logo-width: 100px; + +$card-background-1: $secondary; +$card-background-1-text-color: #fff; + +$btn-copy-color: $secondary; +$btn-qr-color: $secondary; + +$btn-dropdown-line-color: $secondary; \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss index fd382e450e..f916655071 100644 --- a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss @@ -1,3 +1,8 @@ -$primary: #2fa8f8; +$primary: #2fa8f8; $secondary: #a2daff; -$tertiary: #006aa7; +$tertiary: #006aa7; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_social_variables.scss b/apps/block_scout_web/assets/css/theme/_social_variables.scss index 1fe62f615d..3d878dcf10 100644 --- a/apps/block_scout_web/assets/css/theme/_social_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_social_variables.scss @@ -1,3 +1,8 @@ -$primary: #A375FF; -$secondary: #00F0BD; -$tertiary: #53A9FF; +$primary: #a375ff; +$secondary: #00f0bd; +$tertiary: #53a9ff; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss index 1b0a1972aa..6eca2ced83 100644 --- a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss @@ -1,3 +1,8 @@ -$primary: #559387; -$secondary: #add7cf; -$tertiary: #38533d; +$primary: #559387; +$secondary: #add7cf; +$tertiary: #38533d; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_tobalaba_variables.scss b/apps/block_scout_web/assets/css/theme/_tobalaba_variables.scss index d85072d17f..aa7fe7028b 100644 --- a/apps/block_scout_web/assets/css/theme/_tobalaba_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_tobalaba_variables.scss @@ -1,3 +1,8 @@ -$primary: #633D99; -$secondary: #6CC04A; -$tertiary: #A566FF; +$primary: #633d99; +$secondary: #6cc04a; +$tertiary: #a566ff; + +$footer-background-color: $primary; +$footer-title-color: #fff; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; diff --git a/apps/block_scout_web/assets/css/theme/_tomochain_variables.scss b/apps/block_scout_web/assets/css/theme/_tomochain_variables.scss index 7bf240a23d..6f7694de7d 100644 --- a/apps/block_scout_web/assets/css/theme/_tomochain_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_tomochain_variables.scss @@ -1,3 +1,3 @@ -$primary: #211841; -$secondary: #F16950; -$tertiary: #8B84BC; +$primary: #211841; +$secondary: #f16950; +$tertiary: #8b84bc; diff --git a/apps/block_scout_web/assets/css/theme/_variables.scss b/apps/block_scout_web/assets/css/theme/_variables.scss index 0db6eb41cd..01bdc463d8 100644 --- a/apps/block_scout_web/assets/css/theme/_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_variables.scss @@ -1,2 +1,29 @@ -@import "neutral_variables"; @import "theme/base_variables"; +@import "neutral_variables"; +// @import "dai_variables"; +// @import "ethereum_classic_variables"; +// @import "ethereum_variables"; +// @import "expanse_variables"; +// @import "gochain_variables"; +// @import "goerli_variables"; +// @import "kovan_variables"; +// @import "lukso_variables"; +// @import "musicoin_variables"; +// @import "pirl_variables"; +// @import "poa_variables"; +// @import "posdao_variables"; +// @import "rinkeby_variables"; +// @import "ropsten_variables"; +// @import "social_variables"; +// @import "sokol_variables"; +// @import "tobalaba_variables"; +// @import "tomochain_variables"; + +// responsive breakpoints +$breakpoint-xs: 320px; +$breakpoint-sm: 480px; +$breakpoint-md: 768px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1024px; +$breakpoint-xxl: 1280px; +$breakpoint-xxxl: 1366px; diff --git a/apps/block_scout_web/assets/css/theme/_wanchain_variables.scss b/apps/block_scout_web/assets/css/theme/_wanchain_variables.scss index 161d5e86da..f46a8da083 100644 --- a/apps/block_scout_web/assets/css/theme/_wanchain_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_wanchain_variables.scss @@ -1,3 +1,3 @@ -$primary: #3680F8; -$secondary: #2CCFC5; -$tertiary: #7289AF; +$primary: #3680f8; +$secondary: #2ccfc5; +$tertiary: #7289af; diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 4c9ac868d9..f10e3d696d 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -51,4 +51,6 @@ import './lib/token_transfers_toggle' import './lib/transaction_input_dropdown' import './lib/async_listing_load' import './lib/tooltip' +import './lib/modals' import './lib/try_api' +import './lib/card_tabs' diff --git a/apps/block_scout_web/assets/js/lib/card_tabs.js b/apps/block_scout_web/assets/js/lib/card_tabs.js new file mode 100644 index 0000000000..eed0790dc7 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/card_tabs.js @@ -0,0 +1,21 @@ +import $ from 'jquery' + +$(function () { + const activeTabCard = $('.card-tab.active') + + if (!activeTabCard.siblings().length) { + activeTabCard.addClass('noCaret') + } + + activeTabCard.on('click', function (e) { + e.preventDefault() + + const siblings = $(this).siblings() + + if (siblings.is(':hidden')) { + siblings.show() + } else { + siblings.hide() + } + }) +}) diff --git a/apps/block_scout_web/assets/js/lib/market_history_chart.js b/apps/block_scout_web/assets/js/lib/market_history_chart.js index a54ac50935..615f888d8a 100644 --- a/apps/block_scout_web/assets/js/lib/market_history_chart.js +++ b/apps/block_scout_web/assets/js/lib/market_history_chart.js @@ -25,6 +25,9 @@ const config = { time: { unit: 'day', stepSize: 14 + }, + ticks: { + fontColor: sassVariables.dashboardBannerChartAxisFontColor } }], yAxes: [{ @@ -36,7 +39,8 @@ const config = { ticks: { beginAtZero: true, callback: (value, index, values) => `$${numeral(value).format('0,0.00')}`, - maxTicksLimit: 4 + maxTicksLimit: 4, + fontColor: sassVariables.dashboardBannerChartAxisFontColor } }, { id: 'marketCap', @@ -91,8 +95,8 @@ class MarketHistoryChart { data: getPriceData(marketHistoryData), fill: false, pointRadius: 0, - backgroundColor: sassVariables.primary, - borderColor: sassVariables.primary, + backgroundColor: sassVariables.dashboardLineColorPrice, + borderColor: sassVariables.dashboardLineColorPrice, lineTension: 0 } this.marketCap = { @@ -101,8 +105,8 @@ class MarketHistoryChart { data: getMarketCapData(marketHistoryData, availableSupply), fill: false, pointRadius: 0, - backgroundColor: sassVariables.secondary, - borderColor: sassVariables.secondary, + backgroundColor: sassVariables.dashboardLineColorMarket, + borderColor: sassVariables.dashboardLineColorMarket, lineTension: 0 } this.availableSupply = availableSupply diff --git a/apps/block_scout_web/assets/js/lib/modals.js b/apps/block_scout_web/assets/js/lib/modals.js new file mode 100644 index 0000000000..fb19532540 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/modals.js @@ -0,0 +1,76 @@ +import $ from 'jquery' +import Chart from 'chart.js' + +$(function () { + $('.js-become-candidate').on('click', function () { + $('#becomeCandidateModal').modal() + }) + + $('.js-validator-info-modal').on('click', function () { + $('#validatorInfoModal').modal() + }) + + $('.js-move-stake').on('click', function () { + $('#errorStatusModal').modal() + }) + + $('.js-remove-pool').on('click', function () { + $('#warningStatusModal').modal() + }) + + $('.js-copy-address').on('click', function () { + $('#successStatusModal').modal() + }) + + $('.js-stake-stake').on('click', function () { + const modal = '#stakeModal' + const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text()) + const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text()) + + $(modal).modal() + + setupStakesProgress(progress, total, modal) + }) + + $('.js-withdraw-stake').on('click', function () { + const modal = '#withdrawModal' + const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text()) + const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text()) + + $(modal).modal() + + setupStakesProgress(progress, total, modal) + }) + + function setupStakesProgress (progress, total, modal) { + const stakeProgress = $(`${modal} .js-stakes-progress`) + const primaryColor = $('.btn-full-primary').css('background-color') + const backgroundColors = [ + primaryColor, + 'rgba(202, 199, 226, 0.5)' + ] + const progressBackground = total - progress + + // eslint-disable-next-line no-unused-vars + let myChart = new Chart(stakeProgress, { + type: 'doughnut', + data: { + datasets: [{ + data: [progress, progressBackground], + backgroundColor: backgroundColors, + hoverBackgroundColor: backgroundColors, + borderWidth: 0 + }] + }, + options: { + cutoutPercentage: 80, + legend: { + display: false + }, + tooltips: { + enabled: false + } + } + }) + } +}) diff --git a/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js b/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js index 2c8d21d7a4..dd74870a9e 100644 --- a/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js +++ b/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js @@ -1,6 +1,8 @@ import $ from 'jquery' $('.tx-input-dropdown').click(function (e) { + e.preventDefault() + var el = $(e.currentTarget) var target = $(el.attr('data-target')) diff --git a/apps/block_scout_web/assets/js/pages/blocks.js b/apps/block_scout_web/assets/js/pages/blocks.js index 39d9543b8e..2103c18a89 100644 --- a/apps/block_scout_web/assets/js/pages/blocks.js +++ b/apps/block_scout_web/assets/js/pages/blocks.js @@ -99,18 +99,18 @@ if ($blockListPage.length || $uncleListPage.length || $reorgListPage.length) { export function placeHolderBlock (blockNumber) { return ` -+ <%= gettext("Fetching tokens...") %> -
+
<%= gettext "Showing " %>
<%= Cldr.Number.to_string!(@page_address_count, format: "#,###") %>
<%= gettext " addresses of" %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
index 01b8929d58..5d0df9f6bc 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
@@ -1,32 +1,68 @@
+ <%= address_title(@address) %> <%= gettext "Details" %>
+
+
<%= address_title(@address) %> <%= gettext "Details" %>
- <%= @address %>
+
+
+ <%= if validator_metadata = primary_validator_metadata(@address) do %>
+
+
+
+ <% end %>
+
+
+
+ <%= @address %>