|
|
@@ -11,6 +11,11 @@
|
|
|
}'
|
|
|
>{{countText}}</span>
|
|
|
</button>
|
|
|
+ <div class='notification_button__big_triangle'></div>
|
|
|
+ <div class='notification_button__small_triangle'></div>
|
|
|
+ <div class='notification_button__menu'>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -38,6 +43,41 @@
|
|
|
@import '../assets/scss/variables.scss';
|
|
|
|
|
|
.notification_button {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ @at-root #{&}__big_triangle {
|
|
|
+ width: 1rem;
|
|
|
+ height: 1rem;
|
|
|
+ background-color: #fff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ position: absolute;
|
|
|
+ box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
|
|
|
+ top: 2.4rem;
|
|
|
+ border-radius: 0.125rem 0 0 0;
|
|
|
+ border: 0.125rem solid $color__gray--primary;
|
|
|
+ left: calc(50% - 1.414rem /2);
|
|
|
+ }
|
|
|
+ @at-root #{&}__small_triangle {
|
|
|
+ width: 0;
|
|
|
+ left: calc(50% - 1.414rem / 2 - .125rem);
|
|
|
+ height: 0;
|
|
|
+ border-left: 0.625rem solid transparent;
|
|
|
+ top: 2.4rem;
|
|
|
+ border-right: 0.625rem solid transparent;
|
|
|
+ border-bottom: 0.625rem solid #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ @at-root #{&}__menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 2.9rem;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 1rem;
|
|
|
+ width: 20rem;
|
|
|
+ border-radius: 0.25rem;
|
|
|
+ border: 0.125rem solid $color__gray--darker;
|
|
|
+ box-shadow: 0 7px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
|
|
+ }
|
|
|
|
|
|
@at-root #{&}__button {
|
|
|
position: relative;
|
sbkwgh