feat: add transparent ::after element, refactor styles (atomiks#727)

* feat: add transparent ::after element, refactor styles

* test: upload snaphot diff

* test: fix functional tests

* refactor: move ::after element to separate file

* feat: make ::after element inherit box border-color

* refactor: make ::after element separate import

* feat: change default box border-width to 1px, add after.css to tests,

build/css/after.js

@@ -0,0 +1 @@
+import '../../src/scss/after.scss';

src/scss/after.scss

@@ -0,0 +1,55 @@
+@import './_vars.scss';
+
+.#{$namespace-prefix}-box {
+  border: 1px transparent;
+
+  &[data-placement^='top'] > .#{$namespace-prefix}-arrow {
+    &::after {
+      border-top-color: inherit;
+      border-width: 8px 8px 0;
+      bottom: -8px;
+      left: 0;
+    }
+  }
+
+  &[data-placement^='bottom'] > .#{$namespace-prefix}-arrow {
+    &::after {
+      border-bottom-color: inherit;
+      border-width: 0 8px 8px;
+      top: -8px;
+      left: 0;
+    }
+  }
+
+  &[data-placement^='left'] > .#{$namespace-prefix}-arrow {
+    &::after {
+      border-left-color: inherit;
+      border-width: 8px 0 8px 8px;
+      right: -8px;
+      top: 0;
+    }
+  }
+
+  &[data-placement^='right'] > .#{$namespace-prefix}-arrow {
+    &::after {
+      border-width: 8px 8px 8px 0;
+      left: -8px;
+      top: 0;
+      border-right-color: inherit;
+    }
+  }
+}
+
+.#{$namespace-prefix}-arrow {
+  & {
+    border-color: inherit;
+  }
+
+  &::after {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+}

src/scss/index.scss

@@ -29,7 +29,7 @@ $color: #333;
       bottom: -7px;
       left: 0;
       border-width: 8px 8px 0;
-      border-top-color: $color;
+      border-top-color: initial;
       transform-origin: center top;
     }
   }
@@ -41,7 +41,7 @@ $color: #333;
       top: -7px;
       left: 0;
       border-width: 0 8px 8px;
-      border-bottom-color: $color;
+      border-bottom-color: initial;
       transform-origin: center bottom;
     }
   }
@@ -51,7 +51,7 @@ $color: #333;
 
     &::before {
       border-width: 8px 0 8px 8px;
-      border-left-color: $color;
+      border-left-color: initial;
       right: -7px;
       transform-origin: center left;
     }
@@ -63,7 +63,7 @@ $color: #333;
     &::before {
       left: -7px;
       border-width: 8px 8px 8px 0;
-      border-right-color: $color;
+      border-right-color: initial;
       transform-origin: center right;
     }
   }
@@ -77,6 +77,7 @@ $color: #333;
   & {
     width: $arrow-size;
     height: $arrow-size;
+    color: $color;
   }
 
   &::before {

test/utils.js

@@ -38,8 +38,8 @@ export async function screenshotTest(page, name) {
   // Remove container border so the image is clean
   await page.addStyleTag({
     content: `
-    * {
-      color: transparent !important;
+    * { 
+      color: transparent; 
     }
 
     .container {

test/visual/tests.js

@@ -8,6 +8,7 @@ import animateFill from '../../src/plugins/animateFill';
 import createSingleton from '../../src/addons/createSingleton';
 
 import '../../src/scss/index.scss';
+import '../../src/scss/after.scss';
 import '../../src/scss/svg-arrow.scss';
 import '../../src/scss/backdrop.scss';