Chris Chen
62 lines
1.7 KiB
SCSS
62 lines
1.7 KiB
SCSS
$arrow-width: 12;
|
|
$inner-arrow-width: 11;
|
|
$border-color: #808080;
|
|
:host {
|
|
.arrow {
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: $arrow-width - 2 + px;
|
|
z-index: 50;
|
|
border-left: $arrow-width + px solid transparent;
|
|
border-right: $arrow-width + px solid transparent;
|
|
|
|
&.up {
|
|
border-bottom: $arrow-width + px solid $border-color;
|
|
}
|
|
&.down {
|
|
border-top: $arrow-width + px solid $border-color;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&:before {
|
|
height: $inner-arrow-width + px;
|
|
display: block;
|
|
width: $inner-arrow-width + px;
|
|
border-left: $inner-arrow-width + px solid transparent;
|
|
border-right: $inner-arrow-width + px solid transparent;
|
|
margin-left: -$inner-arrow-width + px;
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
|
|
&.up:before {
|
|
border-bottom: $inner-arrow-width + px solid white;
|
|
top: 1px;
|
|
}
|
|
|
|
&.down:before {
|
|
border-top: $inner-arrow-width + px solid white;
|
|
bottom: 1px;
|
|
}
|
|
}
|
|
.box {
|
|
background: white;
|
|
border-radius: 0.25rem;
|
|
-webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
|
|
border: solid $border-color;
|
|
border-width: 1px;
|
|
margin-top: -1px;
|
|
}
|
|
.symbol {
|
|
border-radius: 0.2rem;
|
|
background-color: #ffa300;
|
|
color: white;
|
|
padding: 1px 10px;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
margin-right: 10px;
|
|
}
|
|
}
|