Add styles for new tooltips

laCour · Oct 8, 2017 · f50ba8e · f50ba8e
1 parent 7bea561
commit f50ba8e
Showing 1 changed file with 75 additions and 0 deletions.
diff --git a/scss/modules/tooltips/_base.scss b/scss/modules/tooltips/_base.scss
@@ -46,3 +46,78 @@
     }
   }
 }
+
+.c-tooltip__tip {
+  background-color: $color-shade-light;
+  color: $base-font-color;
+
+  &--top {
+    .c-tooltip__tip__arrow {
+      border-top-color: $color-shade-light;
+    }
+
+    &-left .c-tooltip__tip__arrow {
+      border-top-color: $color-shade-light;
+    }
+
+    &-right .c-tooltip__tip__arrow {
+      border-top-color: $color-shade-light;
+    }
+  }
+
+  &--right {
+    .c-tooltip__tip__arrow {
+      border-right-color: $color-shade-light;
+    }
+  }
+
+  &--bottom {
+    .c-tooltip__tip__arrow {
+      border-bottom-color: $color-shade-light;
+    }
+
+    &-left .c-tooltip__tip__arrow {
+      border-bottom-color: $color-shade-light;
+    }
+
+    &-right .c-tooltip__tip__arrow {
+      border-bottom-color: $color-shade-light;
+    }
+  }
+
+  &--left {
+    .c-tooltip__tip__arrow {
+      border-left-color: $color-shade-light;
+    }
+  }
+
+  &--success {
+    background-color: $color-green;
+
+    &.c-tooltip__tip {
+      &--top {
+        &::after,
+        &-left::after,
+        &-right::after {
+          border-top-color: $color-green;
+        }
+      }
+
+      &--right::after {
+        border-right-color: $color-green;
+      }
+
+      &--bottom {
+        &::after,
+        &-left::after,
+        &-right::after {
+          border-bottom-color: $color-green;
+        }
+      }
+
+      &--left::after {
+        border-left-color: $color-green;
+      }
+    }
+  }
+}