diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index 4ed5bc6515..99dd85006e 100644 --- a/apps/block_scout_web/assets/css/components/_tile.scss +++ b/apps/block_scout_web/assets/css/components/_tile.scss @@ -11,22 +11,25 @@ $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-status-error-reason: #ff7986 !default; +$tile-status-awaiting-internal-transactions: $warning !default; $tile-padding: 1rem; @mixin generate-tile-block($prefix, $color, $label-color: false) { + &.tile-#{ $prefix } { + border-left: 4px solid $color; - a { - @if ($label-color) { - color: $label-color; - } - @else { - color: $color; + .tile-transaction-type-block { + a { + @if ($label-color) { + color: $label-color; + } + @else { + color: $color; + } + } } - } - - &.tile-type-#{ $prefix } { - border-left: 4px solid $color; .tile-label { @if ($label-color) { @@ -182,18 +185,20 @@ $tile-padding: 1rem; 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); + @include generate-tile-block('type-block', $tile-type-block-color, darken($tile-type-block-color, 20%)); + @include generate-tile-block('type-uncle', $tile-type-uncle-color); + @include generate-tile-block('type-reorg', $tile-type-reorg-color); + @include generate-tile-block('type-emission-reward', $tile-type-emission-reward-color); + @include generate-tile-block('type-transaction', $tile-type-transaction-color); + @include generate-tile-block('type-contract-call', $tile-type-contract-call-color); + @include generate-tile-block('type-contract-creation', $tile-type-contract-creation-color); + @include generate-tile-block('type-token-transfer', $tile-type-token-transfer-color); + @include generate-tile-block('type-unique-token', $tile-type-unique-token-color); + @include generate-tile-block('type-unique-token-image', $tile-type-unique-token-image-color); + @include generate-tile-block('type-internal-transaction', $tile-type-internal-transaction-color); + @include generate-tile-block('type-api-documentation', $tile-type-api-documentation-color); + @include generate-tile-block('status--error--reason', $tile-status-error-reason); + @include generate-tile-block('status--awaiting-internal-transactions', $tile-status-awaiting-internal-transactions); &.n-p { padding: 0; @@ -256,26 +261,6 @@ $tile-padding: 1rem; 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;