From f3d2d61d9550dfe7a7203e9c0998a8aa8168908d Mon Sep 17 00:00:00 2001
From: Ram Reddy <ram.n.reddy15@gmail.com>
Date: Mon, 12 Jul 2021 21:03:13 -0400
Subject: [PATCH] Stupid tabs

---
 src/components/About.js               |  2 +-
 src/components/assets/react-tabs.scss | 57 +++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/components/assets/react-tabs.scss

diff --git a/src/components/About.js b/src/components/About.js
index e5124cc..b1fcac6 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -22,7 +22,7 @@ import './assets/About.scss'
 
 import { Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, Container } from 'reactstrap'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
-import 'react-tabs/style/react-tabs.scss';
+import './assets/react-tabs.scss';
 // import {Tabs, Tab} from 'react-bootstrap-tabs';
 
 // Leadership
diff --git a/src/components/assets/react-tabs.scss b/src/components/assets/react-tabs.scss
new file mode 100644
index 0000000..5e9ba84
--- /dev/null
+++ b/src/components/assets/react-tabs.scss
@@ -0,0 +1,57 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+
+  &__tab-list {
+    border-bottom: 1px solid #98C1D9;
+    margin: 0 0 10px;
+    padding: 0;
+  }
+
+  &__tab {
+    display: inline-block;
+    border: 1px solid transparent;
+    border-bottom: none;
+    bottom: -1px;
+    position: relative;
+    list-style: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    background-color:#98C1D9;
+
+    &--selected {
+      background: #EE6C4D;
+      border-color: #aaa;
+      color: #E0FBFC;
+      border-radius: 5px 5px 0 0;
+    }
+
+    &--disabled {
+      color: #E0FBFC;
+      cursor: default;
+    }
+
+    &:focus {
+      box-shadow: 0 0 5px hsl(208, 99%, 50%);
+      border-color: hsl(208, 99%, 50%);
+      outline: none;
+
+      &:after {
+        content: "";
+        position: absolute;
+        height: 5px;
+        left: -4px;
+        right: -4px;
+        bottom: -5px;
+        background: #fff;
+      }
+    }
+  }
+
+  &__tab-panel {
+    display: none; 
+
+    &--selected {
+      display: block;
+    }
+  }
+}