FEATURE: Make tab borders cut off

Author: mhsdesign

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/Tabs/Tabs.scss

@@ -1,6 +1,3 @@
-// @use "../../../../public/Frontend/scss/helpers";
-// TODO border, TODO css variables
-
 .tabs {
     position: relative;
     overflow-x: auto;
@@ -18,7 +15,6 @@
         flex-shrink: 0;
         padding: 0;
         margin: 0;
-        text-transform: uppercase;
         background: none;
         appearance: none;
         border: none;
@@ -53,6 +49,7 @@
 
 .tabs {
     display: flex;
+    justify-content: center;
     padding: 0;
 }
 
@@ -62,6 +59,7 @@
 
 .tabs-content__wrapper {
     position: relative;
+    padding-top: 48px;
 
     &::after {
         bottom: -1px;
@@ -79,83 +77,62 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    // @include helpers.neos-borders(0px, 12px);
-    border: 1px solid #e7e7e8;
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 15px;
-    background: rgba(242, 242, 242, 0.5);
-    border-top: none;
 }
 
 .tab-item:not([hidden]){
     display: inline-block;
     width: 100%;
 }
 
-.tabs .tab {
-    &:focus,
-    &:active,
-    &[aria-selected="true"] {
-        &:before {
-            content: "";
-            width: 18px;
-            border-top: 1px solid #e7e7e8;
-            position: absolute;
-            left: -7px;
-            transform-origin: right top;
-            transform: rotateZ(-45deg);
-            z-index: 1;
-        }
-    }
-}
+.tabs {
+  .tab {
+    @include clippedForm;
 
-.tabs .tab {
     position: relative;
-    color: var(--c-brand);
+    color: $headingsColor;
 
     .tab-link__inner {
-        pointer-events: none;
-        display: grid;
-
-        border: 1px solid transparent;
-        border-bottom-color: #e7e7e8;
-
-        font-weight: 540;
-        // @include helpers.neos-borders(12px, 0px);
-
-        &:empty::after {
-            content: "Tab title";
-            color: #ccc;
-        }
+      pointer-events: none;
+      display: grid;
+      font-weight: bold;
+      font-family: $brand-font-family;
+
+      &:empty::after {
+        content: "Tab title";
+        color: #ccc;
+      }
     }
 
     &[aria-selected="true"] {
-        .tab-link__inner {
-            background-color: rgba(242, 242, 242, 0.5);
-            border: 1px solid #e7e7e8;
-            border-bottom: none;
-        }
+      .tab-link__inner {
+        background-color: brand('primary');
+      }
 
-        color: var(--c-accent);
+      color: #fff;
     }
 
     &:focus, &:active, &:focus[aria-selected="true"] {
-        &::before {
-            border-top-color: var(--c-accent);
-        }
-
-        .tab-link__inner {
-            background-color: rgba(242, 242, 242, 0.5);
-            border-left-color: var(--c-accent);
-            border-right-color: var(--c-accent);
-            border-top-color: var(--c-accent);
-        }
+      .tab-link__inner {
+        background-color: brand('primary');
+      }
     }
-}
 
-.tabs .spacer {
-    display: flex;
-    flex-grow: 1;
-    border-bottom: 1px solid #e7e7e8;
+    &:focus,
+    &:active,
+    &[aria-selected="true"] {
+      &:before {
+        content: "";
+        width: 18px;
+        border-top: 1px solid #e7e7e8;
+        position: absolute;
+        left: -7px;
+        transform-origin: right top;
+        transform: rotateZ(-45deg);
+        z-index: 1;
+      }
+    }
+  }
 }

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Button.scss

@@ -83,11 +83,7 @@ $btn-horizontal-padding: 40px;
 
 @mixin btnClippedBorder() {
 	.btn__content {
-		$clip-path: polygon(var(--btn-clip-width) 0px, 0 var(--btn-clip-height), 0 100%, calc(100% - var(--btn-clip-width)) 100%, 100% calc(100% - var(--btn-clip-height)), 100% 0);
-
-		// Autoprefixer doesn't add the required webkit prefix for some reason
-		-webkit-clip-path: #{$clip-path};
-		clip-path: #{$clip-path};
+    @include clippedForm;
 	}
 }
 

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/_Framework/_Mixins.scss

@@ -87,3 +87,13 @@
 		}
 	}
 }
+
+@mixin clippedForm() {
+  $btn-clip-width: 14px;
+  $btn-clip-height: 10px;
+  $clip-path: polygon($btn-clip-width 0px, 0 $btn-clip-height, 0 100%, calc(100% - #{$btn-clip-width}) 100%, 100% calc(100% - #{$btn-clip-height}), 100% 0);
+
+  // Autoprefixer doesn't add the required webkit prefix for some reason
+  -webkit-clip-path: #{$clip-path};
+  clip-path: #{$clip-path};
+}