contentoh-components-library 21.5.3 → 21.5.4

package/src/components/pages/MultipleEdition/styles.js

@@ -0,0 +1,201 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: 75% 25%;
+  grid-template-rows: 75px 1fr;
+  grid-template-areas:
+    "tabs action_buttons"
+    "table table";
+  margin: 0 30px;
+  body{
+    font-family: Roboto;
+  }
+
+  .tabs {
+    grid-area: tabs;
+    display: flex;
+    align-items: center;
+    gap: 0 10px;
+  }
+  .action_buttons {
+    grid-area: action_buttons;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 0 10px;
+    & > * {
+      cursor: pointer;
+    }
+  }
+  .table {
+    grid-area: table;
+    background: red;
+    height: 100%;
+    font-family: Raleway;
+  }
+  
+  .buttons-container{
+    display: flex;
+    flex-direction: column;
+    background: white;
+    width: max-content;
+    padding: 8px;
+    border: 1px solid ${GlobalColors.s3};
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 3px;
+    position: absolute;
+    top: 0;
+    left: 50px;
+    z-index: 100;
+  }
+
+  .validation-button{
+    width: 30px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    color: black;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    background-color: white;
+    margin-right:5px;
+    img {
+      & + p {
+        margin-left: 7px;
+      }
+    }
+
+    &:hover {
+      border-radius: 10px;
+    }
+  }
+
+  .validation-option {
+    display: flex;
+    width: 82px;
+    height: 20px;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    color: black;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    background-color: white;
+    left: 7px;
+
+    img {
+      & + p {
+        margin-left: 7px;
+      }
+    }
+
+    &:hover {
+      border-radius: 10px;
+    }
+
+    & + * {
+      margin-top: 8px;
+    }
+  }
+
+  td{
+    margin:0;
+    background: #ffffff !important;
+  }
+
+  th{
+    border-radius: 0 0 0 0 !important;
+    padding: 15px !important;
+  }
+  
+  textarea {
+    width: 100%;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.deep_gray};
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+    padding: 10px;
+    outline: none;
+    border-radius: 5px;
+    resize: none;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  .general-input {
+    width: 100%;
+    height:27px;
+    max-height:100px;
+  }
+
+  .select-edition-multiple {
+    padding: 5px 10px;
+    border-radius: 5px;
+    gap: 10px;
+    border:1px solid ${GlobalColors.gray_light};
+    border-width: 1px 2px 1px 1px;
+    outline: none;
+    border-image: initial;
+    width: 100%;
+    min-height:27px;
+    cursor: pointer;
+    color: ${GlobalColors.deep_gray};
+    font-size: 12px;
+    line-height: 21px;
+    overflow:hidden; 
+    white-space:nowrap; 
+    text-overflow:ellipsis;
+    :focus{
+      border:1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #ffffff;
+    color: #000000;
+    text-align: center;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 6 important!;
+    bottom: 100%;
+    left: 20%;
+    margin-left: -80px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0px 2px 4px 0px #00000040;
+    font-family: Roboto;
+    font-size: 12px;
+    padding: 10px;
+    text-align: justify;
+  }
+  
+
+  
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+
+
+