67 lines
1.3 KiB
SCSS
67 lines
1.3 KiB
SCSS
|
@import 'common/sass/variables';
|
||
|
|
@import 'common/sass/mixins';
|
||
|
|
|
||
|
|
$hover-speed: 150ms;
|
||
|
|
$identicon-size: 36px;
|
||
|
|
$identicon-size-mobile: 24px;
|
||
|
|
|
||
|
|
.RecentTx {
|
||
|
|
line-height: $identicon-size;
|
||
|
|
border: 1px solid $gray-lighter;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: box-shadow $hover-speed ease;
|
||
|
|
box-shadow: 0 0 $brand-primary inset;
|
||
|
|
|
||
|
|
&-to {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 0;
|
||
|
|
@include mono;
|
||
|
|
@include ellipsis;
|
||
|
|
|
||
|
|
.Identicon {
|
||
|
|
display: inline-block;
|
||
|
|
width: $identicon-size !important;
|
||
|
|
height: $identicon-size !important;
|
||
|
|
margin-right: $space-md;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-time {
|
||
|
|
opacity: 0.88;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-arrow {
|
||
|
|
padding-left: $space-md;
|
||
|
|
font-size: 22px;
|
||
|
|
opacity: 0.3;
|
||
|
|
transition-property: opacity, color, transform;
|
||
|
|
transition-duration: $hover-speed;
|
||
|
|
transition-timing-function: ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
box-shadow: 3px 0 $brand-primary inset;
|
||
|
|
|
||
|
|
.RecentTx-arrow {
|
||
|
|
opacity: 1;
|
||
|
|
color: $brand-primary;
|
||
|
|
transform: translateX(3px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Responsive handling
|
||
|
|
@media (max-width: $screen-md) {
|
||
|
|
font-size: $font-size-xs;
|
||
|
|
line-height: $identicon-size-mobile;
|
||
|
|
|
||
|
|
&-to .Identicon {
|
||
|
|
width: $identicon-size-mobile !important;
|
||
|
|
height: $identicon-size-mobile !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-arrow .fa {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|