From 21eae3dcd2377678036e03646e9c5d1fa382aac9 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 24 Feb 2020 22:22:51 +0100
Subject: [PATCH] refactor ribbon css

---
 webapp/assets/_new/styles/tokens.scss |  2 ++
 webapp/components/Ribbon/index.vue    | 35 +++++++++------------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 4ab30177b..9e86b3c70 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -132,6 +132,7 @@ $border-size-x-large: 6px;
 $border-radius-x-large: 5px;
 $border-radius-large: 4px;
 $border-radius-base: 4px;
+$border-radius-small: 2px;
 $border-radius-rounded: 2em;
 $border-radius-circle: 50%;
 
@@ -240,6 +241,7 @@ $size-height-large: 50px;
 $size-height-xlarge: 60px;
 $size-height-footer: 64px;
 $size-tappable-square: 44px;
+$size-ribbon: 6px;
 
 /**
  * @tokens Size Width
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
index 7be3b040d..f54b456e5 100644
--- a/webapp/components/Ribbon/index.vue
+++ b/webapp/components/Ribbon/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="ribbon">
-    <small>{{ text }}</small>
-  </div>
+  <aside class="ribbon">
+    <p>{{ text }}</p>
+  </aside>
 </template>
 
 <script>
@@ -18,30 +18,19 @@ export default {
 
 <style scoped lang="scss">
 .ribbon {
-  $card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1);
-  //position: absolute;
-  position: relative;
-  right: -31px;
-  top: -31px;
-
-  font-size: 0.9em;
-  font-weight: bold;
-  padding: 6px 6px;
-  color: #fff;
+  padding: $size-ribbon $size-ribbon;
+  border-radius: $border-radius-small 0 0 $border-radius-small;
+  color: $color-neutral-100;
   background-color: $background-color-secondary-active;
-  float: right;
-  border-radius: 2px 0 0 2px;
-  box-shadow: $card-shadow;
-  z-index: 11;
-  // border:           1px solid #ccc;
-  &:before {
+  font-size: $font-size-x-small;
+  font-weight: $font-weight-bold;
+
+  &::before {
     content: ' ';
     position: absolute;
-    width: 0;
-    height: 0;
     right: 0;
-    bottom: -6px;
-    border-width: 3px 4px 3px 3px;
+    bottom: -$size-ribbon;
+    border-width: $border-size-large 4px $border-size-large $border-size-large;
     border-style: solid;
     border-color: $background-color-secondary transparent transparent $background-color-secondary;
   }