contentoh-components-library 21.2.29 → 21.2.31

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -1,4 +1,6 @@
 import styled from "styled-components";
+import { BrowserRouter as Router, NavLink } from "react-router-dom";
+import { createGlobalStyle } from "styled-components";
 
 export const Container = styled.div`
   height: 98%;
@@ -6,8 +8,8 @@ export const Container = styled.div`
   padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
-  overflow: auto;
-  width: ${({ bar }) => (bar ? 270 : 58)}px;
+  overflow: none;
+  width: ${({ bar }) => (bar ? 260 : 58)}px;
   border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
@@ -24,86 +26,152 @@ export const Container = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
-      padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
+      margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
+      padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
       .active {
         background: #e33aa9;
       }
       & + div {
         margin-top: 5px;
       }
-      a {
-        height: ${({ bar }) => (bar ? 32 : 38)}px;
-        display: flex;
-        justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
-        border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
-        align-items: center;
-        font-family: sans-serif;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 21px;
-        letter-spacing: -0.015em;
-        color: #fafafa;
-        text-decoration: none;
-        &.option-link {
-          cursor: pointer;
-          width: ${({ bar }) => (bar ? "160" : "38")}px;
-          margin: 5px 0;
-          padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
-        }
-        p {
-          cursor: pointer;
-          margin: 0%;
-          pointer-events: none;
-        }
-        img {
-          width: 22px;
-          & + * {
-            margin-left: 12px;
-          }
-        }
-      }
-      .option-link:hover {
-        background: #e33aa9;
-      }
       .sub-option {
         display: flex;
         flex-direction: column;
         padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
         height: auto;
         width: auto;
-        a {
-          display: flex;
-          justify-content: flex-start;
-          text-decoration: none;
-          position: relative;
-          font-size: 13px;
-          border-left: 1px solid #f0eef2;
-          border-radius: 0;
-          color: #f0eef2;
-          padding-top: 14px;
-          padding-left: 12px;
-          height: 25px;
-          &::before {
-            border-left: 1px solid #e33aa9;
-            width: 10px;
-            content: "";
-            border-radius: 50%;
-            height: 10px;
-            background-color: white;
-            position: absolute;
-            bottom: 0;
-            left: ${({ bar }) => (bar ? -4 : -34)}%;
-          }
-          &.active {
-            background: none;
-            &::before {
-              background-color: #e33aa9;
-            }
-          }
-        }
       }
     }
   }
 `;
+
+export const NavLinkOption = styled(NavLink)`
+  height: ${({ bar }) => (bar ? 32 : 38)}px;
+  display: flex;
+  justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
+  border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
+  align-items: center;
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 21px;
+  margin: 5px 0;
+  letter-spacing: -0.015em;
+  color: #fafafa;
+  text-decoration: none;
+  cursor: pointer;
+  width: ${({ bar }) => (bar ? "163" : "38")}px;
+  padding: 0 17px;
+  &:hover {
+    background: #e33aa9;
+  }
+  p {
+    cursor: pointer;
+    margin: 0%;
+    pointer-events: none;
+  }
+  img {
+    width: 22px;
+    & + * {
+      margin-left: 12px;
+    }
+  }
+  &.sub-option-link {
+    display: flex;
+    justify-content: flex-start;
+    text-decoration: none;
+    position: relative;
+    font-size: 13px;
+    border-left: 1px solid #f0eef2;
+    border-radius: 0;
+    color: #f0eef2;
+    padding-top: 14px;
+    height: 25px;
+    margin: 0;
+    padding-left: 12px;
+    &::before {
+      border-left: 1px solid #e33aa9;
+      width: 10px;
+      content: "";
+      border-radius: 50%;
+      height: 10px;
+      background-color: white;
+      position: absolute;
+      bottom: 0;
+      left: ${({ bar }) => (bar ? -4 : -16)}%;
+    }
+    &.active {
+      background: none !important;
+      &::before {
+        background-color: #e33aa9;
+      }
+    }
+    &:hover {
+      background: none;
+    }
+  }
+`;
+
+export const ContainerPrincipal = styled.div`
+  width: 100%;
+  display: flex;
+  height: 100vh;
+`;
+
+export const GlobalStyle = createGlobalStyle`
+@font-face {
+  font-family: 'Avenir Next';
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),
+    url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, figure, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+:focus {
+  outline: 0;
+}
+ins {
+  text-decoration: none;
+}
+del {
+  text-decoration: line-through;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+`;