Merge pull request #203 from poanetwork/remove-unnecessary-style-code
Remove unnecessary style codepull/213/head
Jimmy Lauzau
7 years ago
committed by
GitHub
commit
566f76e474
@ -1,47 +0,0 @@ |
||||
.address { |
||||
&__container { @extend %paper; } |
||||
&__header { @extend %section-header; } |
||||
&__heading { @extend %section-header__heading; } |
||||
&__subheading { @extend %section-header__subheading; } |
||||
&__attributes { |
||||
@include explorer-typography("body1"); |
||||
padding: explorer-size(-1) explorer-size(1); |
||||
} |
||||
&__item { @extend %section-list__item; } |
||||
&__item-key { @extend %section-list__item-key; } |
||||
&__item-value { @extend %section-list__item-value; } |
||||
|
||||
&__tabs { @extend %section-tabs; } |
||||
&__tab { |
||||
@extend %section-tabs__tab; |
||||
&--active { @extend %section-tabs__tab--active; } |
||||
} |
||||
|
||||
&__headline-title { |
||||
@include explorer-typography("title"); |
||||
color: explorer-color("slate", "900"); |
||||
margin: 0; |
||||
line-height: 18px; |
||||
} |
||||
|
||||
&__link { color: explorer-color("blue", "500"); } |
||||
|
||||
&__pagination { |
||||
margin: explorer-size(-1) 0 explorer-size(-2) 0; |
||||
.pagination { text-align: right; } |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $explorer-breakpoint-md) { |
||||
.address { |
||||
&__headline { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
&__headline-title { flex: 1; } |
||||
&__pagination { |
||||
margin: explorer-size(-1) 0 explorer-size(-2) 0; |
||||
} |
||||
} |
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
@import "section"; |
||||
@import "address"; |
||||
@import "block"; |
||||
@import "footer"; |
||||
@ -1,36 +0,0 @@ |
||||
.block { |
||||
&__container { @extend %paper; } |
||||
&__header { @extend %section-header; } |
||||
&__heading { @extend %section-header__heading; } |
||||
&__subheading { @extend %section-header__subheading; } |
||||
&__tabs { @extend %section-tabs; } |
||||
|
||||
&__tab { |
||||
@extend %section-tabs__tab; |
||||
&--active { @extend %section-tabs__tab--active; } |
||||
} |
||||
|
||||
&__attributes { padding: explorer-size(-1) explorer-size(1); } |
||||
&__column { @include explorer-typography("body1"); } |
||||
&__item { @extend %section-list__item; } |
||||
&__item-key { @extend %section-list__item-key; } |
||||
&__item-value { @extend %section-list__item-value; } |
||||
&__link { color: explorer-color("blue", "500"); } |
||||
} |
||||
|
||||
@media (min-width: $explorer-breakpoint-lg) { |
||||
.block { |
||||
&__attributes { |
||||
display: flex; |
||||
align-items: top; |
||||
justify-content: top; |
||||
} |
||||
|
||||
&__column { |
||||
width: explorer-size(1); |
||||
flex: 1; |
||||
margin-right: explorer-size(1); |
||||
& + & { margin-left: explorer-size(1); } |
||||
} |
||||
} |
||||
} |
||||
@ -1,55 +0,0 @@ |
||||
%section-header { |
||||
margin-top: explorer-size(-1); |
||||
margin-bottom: explorer-size(0); |
||||
} |
||||
|
||||
%section-header__heading { |
||||
@include explorer-typography("title"); |
||||
color: explorer-color("gray", "900"); |
||||
margin: 0; |
||||
} |
||||
|
||||
%section-header__subheading { |
||||
@include explorer-typography("body1"); |
||||
color: explorer-color("slate", "900"); |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
margin: 0; |
||||
} |
||||
|
||||
%section-tabs { |
||||
padding: 0 explorer-size(0); |
||||
} |
||||
|
||||
%section-tabs__tab { |
||||
@include explorer-typography("body1"); |
||||
margin: 0; |
||||
border-top: explorer-size(-4) solid transparent; |
||||
border-left: explorer-size(-4) solid transparent; |
||||
border-right: explorer-size(-4) solid transparent; |
||||
display: inline-block; |
||||
padding: explorer-size(-2) explorer-size(-2); |
||||
} |
||||
|
||||
%section-tabs__tab--active { |
||||
border-top-color: explorer-color("blue", "500"); |
||||
} |
||||
|
||||
%section-list__item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
%section-list__item-key { |
||||
color: explorer-color("black"); |
||||
min-width: explorer-size(3); |
||||
} |
||||
|
||||
%section-list__item-value { |
||||
color: explorer-color("slate", "900"); |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
} |
||||
@ -1,47 +0,0 @@ |
||||
.transaction-log { |
||||
@extend %paper; |
||||
|
||||
&__container { |
||||
padding: explorer-size(-1) explorer-size(0); |
||||
& + & { padding-top: 0; } |
||||
&--title { padding-top: explorer-size(0); } |
||||
} |
||||
|
||||
&__header { @extend %section-header; } |
||||
&__heading { @extend %section-header__heading; } |
||||
&__subheading { @extend %section-header__subheading; } |
||||
&__tabs { @extend %section-tabs; } |
||||
|
||||
&__tab { |
||||
@extend %section-tabs__tab; |
||||
&--active { @extend %section-tabs__tab--active; } |
||||
} |
||||
|
||||
&__attributes { padding: explorer-size(-1) explorer-size(1); } |
||||
&__link { color: explorer-color("blue", "500"); } |
||||
|
||||
&__table { |
||||
|
||||
@include explorer-typography("body1"); |
||||
color: explorer-color("slate", "900"); |
||||
} |
||||
|
||||
&__column-header { @include explorer-typography("body1"); } |
||||
} |
||||
|
||||
@media (min-width: $explorer-breakpoint-lg) { |
||||
.transaction { |
||||
&__attributes { |
||||
display: flex; |
||||
align-items: top; |
||||
justify-content: top; |
||||
} |
||||
|
||||
&__column { |
||||
width: explorer-size(1); |
||||
flex: 1; |
||||
margin-right: explorer-size(1); |
||||
& + & { margin-left: explorer-size(1); } |
||||
} |
||||
} |
||||
} |
||||
@ -1,51 +0,0 @@ |
||||
$explorer-colors: ( |
||||
"blue": ( |
||||
"500": #4786ff |
||||
), |
||||
"slate": ( |
||||
"50": #f5f7fa, |
||||
"100": #cfd8dc, |
||||
"200": #b0bec5, |
||||
"300": #90a4ae, |
||||
"400": #78909c, |
||||
"500": #607d8b, |
||||
"600": #546e7a, |
||||
"700": #455a64, |
||||
"800": #37474f, |
||||
"900": #263238 |
||||
), |
||||
"gray": ( |
||||
"50": #fafafa, |
||||
"100": #f5f5f5, |
||||
"200": #eeeeee, |
||||
"300": #e0e0e0, |
||||
"400": #bdbdbd, |
||||
"500": #9e9e9e, |
||||
"600": #757575, |
||||
"700": #616161, |
||||
"800": #424242, |
||||
"900": #212121 |
||||
), |
||||
"green": ( |
||||
"500": #1bb85a |
||||
), |
||||
"purple": ( |
||||
"500": #8940d5 |
||||
), |
||||
"yellow": ( |
||||
"500": #ffc547 |
||||
), |
||||
"red": ( |
||||
"500": #ff7860 |
||||
), |
||||
"white": #ffffff, |
||||
"black": #000000 |
||||
); |
||||
|
||||
@function explorer-color($color-name, $tone: null) { |
||||
@if ($tone) { |
||||
@return map-get(map-get($explorer-colors, $color-name), $tone); |
||||
} @else { |
||||
@return map-get($explorer-colors, $color-name); |
||||
} |
||||
} |
||||
@ -1,19 +0,0 @@ |
||||
$explorer-header-small: 48px; |
||||
$explorer-header-medium: 56px; |
||||
$explorer-header-large: 64px; |
||||
|
||||
%explorer-header-height { height: $explorer-header-small; } |
||||
%explorer-header-square-width { width: $explorer-header-small; } |
||||
%explorer-header-min-height { min-height: $explorer-header-small; } |
||||
|
||||
@media (orientation: landscape) and (max-height: $explorer-breakpoint-landscape) { |
||||
%explorer-header-height { height: $explorer-header-medium; } |
||||
%explorer-header-square-width { width: $explorer-header-medium; } |
||||
%explorer-header-min-height { min-height: $explorer-header-medium; } |
||||
} |
||||
|
||||
@media (min-width: $explorer-breakpoint-landscape) { |
||||
%explorer-header-height { height: $explorer-header-large; } |
||||
%explorer-header-square-width { width: $explorer-header-large; } |
||||
%explorer-header-min-height { min-height: $explorer-header-large; } |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@ |
||||
%paper { |
||||
margin-bottom: 1rem; |
||||
border-radius: explorer-size(-4); |
||||
background-color: explorer-color("white"); |
||||
box-shadow: 0 2px 2px 0 rgba(explorer-color("black"), 0.16), |
||||
0 0px 2px 0 rgba(explorer-color("black"), 0.12); |
||||
border-radius: 5px; |
||||
background-color: #fff; |
||||
box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.16), |
||||
0 0px 2px 0 rgba(0, 0, 0, 0.12); |
||||
} |
||||
|
||||
@ -1,28 +0,0 @@ |
||||
$explorer-typography-styles: ( |
||||
headline: ( |
||||
"font-weight": 400, |
||||
"font-size": 24px, |
||||
"line-height": 32px |
||||
), |
||||
title: ( |
||||
"font-weight": 400, |
||||
"font-size": 18px, |
||||
"line-height": 28px |
||||
), |
||||
body1: ( |
||||
"font-weight": 400, |
||||
"font-size": 13px, |
||||
"line-height": 36px |
||||
), |
||||
caption: ( |
||||
"font-weight": 400, |
||||
"font-size": 13px, |
||||
"line-height": 24px |
||||
) |
||||
); |
||||
|
||||
@mixin explorer-typography($style) { |
||||
font-weight: map-get(map-get($explorer-typography-styles, $style), "font-weight"); |
||||
font-size: map-get(map-get($explorer-typography-styles, $style), "font-size"); |
||||
line-height: map-get(map-get($explorer-typography-styles, $style), "line-height"); |
||||
} |
||||
@ -1,23 +1,25 @@ |
||||
<div class="address__header"> |
||||
<h1 class="address__heading"><%= gettext "Address" %></h1> |
||||
<h3 class="address__subheading" data-test="address_detail_hash"><%= @address %></h3> |
||||
<div> |
||||
<h1><%= gettext "Address" %></h1> |
||||
<h2 data-test="address_detail_hash"><%= @address %></h2> |
||||
</div> |
||||
<div class="address__container"> |
||||
<div class="address__attributes"> |
||||
<dl> |
||||
<div class="address__item"> |
||||
<dt class="address__item-key"><%= gettext "Balance" %></dt> |
||||
<dd class="address__item-value address__balance u-text-right" title="<%= @address %>" data-test="address_balance"> |
||||
<div><%= balance(@address) %> </div> |
||||
<div><%= formatted_usd(@address, @exchange_rate) %> </div> |
||||
</dd> |
||||
</div> |
||||
<div class="address__item"> |
||||
<dt class="address__item-key"><%= gettext "Number of Transactions" %></dt> |
||||
<dd class="address__item-value" data-test="transaction_count"> |
||||
<%= Cldr.Number.to_string!(@transaction_count) %> |
||||
</dd> |
||||
</div> |
||||
</dl> |
||||
<div class="panels container__subsection"> |
||||
<div class="panels__container"> |
||||
<table class="table table-responsive-sm table-font"> |
||||
<table class="table table-responsive-sm table-font"> |
||||
<tbody> |
||||
<tr> |
||||
<th scope="row"><%= gettext "Balance" %></th> |
||||
<td class="u-text-right" data-test="address_balance"> |
||||
<div><%= balance(@address) %></div> |
||||
<div><%= formatted_usd(@address, @exchange_rate) %></div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row"> <%= gettext "Number of Transactions" %></th> |
||||
<td class="u-text-right" data-test="transaction_count"><%= Cldr.Number.to_string!(@transaction_count) %></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
Loading…
Reference in new issue