@pmidc/upyog-css 0.0.1

package/src/pages/employee/oldMobileInbox.scss

@@ -0,0 +1,5 @@
+.linksWrapperForMobileInbox{
+    .header{
+        justify-content: initial;
+    }
+}

package/src/pages/employee/popupmodule.scss

@@ -0,0 +1,47 @@
+.popup-module {
+  width: 480px;
+  margin: 0 auto;
+  @apply bg-white;
+
+  .popup-module-main {
+    @apply px-lg pb-lg;
+  }
+
+  .popup-module-action-bar {
+    gap: 16px;
+    @apply flex flex-row justify-end;
+  }
+}
+
+@screen dt {
+  .popup-module {
+    width: 480px;
+    margin: auto;
+    @apply bg-white;
+
+    .popup-module-main {
+      @apply px-lg pb-lg;
+    }
+    .popup-module-main {
+      @apply w-full p-sm h-full;
+    }
+
+    .popup-module-action-bar {
+      gap: 16px;
+      @apply flex flex-row justify-end;
+    }
+  }
+}
+
+.popup-module-main {
+  iframe #page-container div {
+    width: 99% !important;
+    margin: 5px !important;
+  }
+
+  iframe #page-container {
+    ::-webkit-scrollbar {
+      width: 0px !important;
+    }
+  }
+}

package/src/pages/employee/response.scss

@@ -0,0 +1,3 @@
+.secondary-action{
+    @apply inline float-right;
+}

package/src/pages/employee/scroll-table.scss

@@ -0,0 +1,114 @@
+.scroll-table-wrapper{
+    &::-webkit-scrollbar {
+        display: none;
+    }  
+    -ms-overflow-style: none;
+    scrollbar-width: none; 
+    @apply relative overflow-x-scroll overflow-y-visible pb-sm text-center;
+
+    .scroll-table-width-wrapper{
+        &::-webkit-scrollbar {
+            display: none;
+        }  
+        -ms-overflow-style: none;
+        scrollbar-width: none; 
+        width: calc(100% - 110px);
+        margin: auto;
+        @apply overflow-x-scroll;
+        table{
+             margin: auto;
+         }
+    }
+    
+    .first-col{
+        width:110px; 
+        @apply absolute left-0;
+    }
+    
+    .last-col{
+        width:110px; 
+        @apply absolute right-0;
+    }
+}
+
+@screen dt{
+    .scroll-table-wrapper{
+        width: 60%;
+    }
+}
+.table-switch-card-chip{
+    display: flex;
+    cursor: pointer;
+    padding-right: 10px;
+    width: 100%;
+}
+
+.table-search-wrapper{
+    display:flex;
+    width:100%;
+    align-items:center;
+}
+.table-switch-card-inactive{
+    /* Frame 58 */
+
+
+/* Auto layout */
+
+display: flex;
+flex-direction: row;
+align-items: flex-start;
+padding: 8px;
+
+position: static;
+height: 40px;
+left: 84px;
+top: 0px;
+
+/* Light Theme / Paper */
+
+background: #FFFFFF;
+box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+
+/* Inside auto layout */
+
+flex: none;
+flex-grow: 0;
+margin: 0px 0px;
+color: #B1B4B6;
+}
+.table-switch-card-inactive:hover{
+    background: #fffffc;
+    font-size: 17px;
+    color: #505A5F;
+}
+
+.table-switch-card-active{/* Frame 57 */
+
+
+    /* Auto layout */
+    
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 8px;
+    
+    position: static;
+    height: 40px;
+    left: 0px;
+    top: 0px;
+    
+    /* Light Theme / Paper */
+    
+    background: #FFFFFF;
+    /* Light Theme / Primary */
+    
+    border: 1px solid #a82227;
+    box-sizing: border-box;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+    
+    /* Inside auto layout */
+    
+    flex: none;
+    flex-grow: 0;
+    margin: 0px 0px;
+}

package/src/pages/employee/surveys.scss

@@ -0,0 +1,272 @@
+.surveydetailsform-wrapper {
+  @apply grid gap-6 py-md;
+
+  label {
+    @apply font-medium;
+  }
+  .surveyformfield {
+    @apply grid gap-4;
+  }
+
+  .employee-select-wrap,
+  .employee-card-input {
+    margin-bottom: 0;
+  }
+}
+
+.newSurveyForm_wrapper {
+  @apply grid p-md bg-grey-light border border-border rounded gap-6 ;
+  .newSurveyForm_questions {
+  }
+  .newSurveyForm_answer {
+  }
+  .newSurveyForm_actions {
+    @apply flex justify-end  gap-4 py-md;
+    .checkbox-wrap .label {
+      margin-left: 40px;
+    }
+  }
+  .newSurveyForm_seprator {
+    @apply w-px h-6 border border-border;
+  }
+}
+
+.surveyformslist_wrapper,
+.surveydetailsform-wrapper {
+  .heading {
+    @apply text-heading-l font-medium py-md;
+  }
+}
+
+.surveyformslist_wrapper {
+  @apply grid gap-6 py-md;
+}
+
+.options_checkboxes {
+  @apply flex flex-col gap-4;
+}
+
+.optioncheckboxwrapper {
+  @apply flex;
+}
+
+.simple_editable-input {
+  outline-width: 0;
+  border: 0;
+  border-bottom: 2px solid black;
+}
+
+.simple_readonly-input {
+  outline-width: 0;
+  border: 0;
+  background: transparent;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.disabled-btn {
+  @apply pointer-events-none cursor-not-allowed;
+}
+
+.optionradiobtnwrapper {
+  @apply flex gap-2;
+
+  .customradiobutton {
+    @apply w-6 h-6;
+  }
+}
+
+.edit-action-btn {
+  @apply flex justify-end;
+}
+
+.surveyQuestion-wrapper{
+  @apply grid gap-6;
+}
+
+.question-title {
+  font-size: 18px;
+  line-height: 21px;
+  color: #0b0c0c;
+  font-weight: 700;
+}
+
+.responses-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 4px; 
+  background-color: #FAFAFA;
+  border: 1px solid #D6D5D4;
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.responses-container-date {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 8px 0px 8px;
+  position: static;
+  left: 0px;
+  top: 41px;
+  background: #FAFAFA;
+  border: 1px solid #D6D5D4;
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.responses-container-line {
+  width: 100%;
+  margin-bottom: -12px;
+}
+
+.date-time{
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.response-result {
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  margin: 0px 0px -20px;
+  display: inline-block;
+}
+
+.date-container {
+  display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 16px 8px;
+background: #FAFAFA;
+border: 1px solid #D6D5D4;
+box-sizing: border-box;
+border-radius: 4px;
+@apply gap-y-6;
+}
+
+.date-response {
+display: flex;
+flex-direction: row;
+font-weight: bold;
+@apply gap-10 ;
+}
+.divide {
+  --tw-divide-x-reverse: 0;
+border-right-width: calc(2px * var(--tw-divide-x-reverse));
+border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.circle {
+    background-color:red;
+    height:40px;
+    border-radius:50%;
+    -moz-border-radius:50%;
+    -webkit-border-radius:50%;
+    width:40px;
+}
+
+.align-columns{
+  @apply grid gap-4;
+}
+
+
+@screen dt {
+  .surveydetailsform-wrapper {
+    .surveyformfield {
+      @apply items-center;
+      grid-template-columns: 1fr 2fr 1fr;
+
+      .radio-wrap {
+        @apply flex gap-20;
+        margin-bottom: 0;
+      }
+      .radio-wrap div {
+        @apply flex items-center;
+      }
+
+      .radio-btn {
+        @apply w-6 h-6;
+      }
+
+      .radio-btn-checkmark {
+        height: 1.75rem;
+        width: 1.75rem;
+        --border-opacity: 1;
+        border: 1px solid #464646;
+        border-color: rgba(70, 70, 70, var(--border-opacity));
+        border-radius: 9999px;
+        display: block;
+      }
+
+      .radio-wrap .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
+        display: block;
+        --bg-opacity: 1;
+        background-color: #a82227;
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: 9999px;
+        position: absolute;
+        top: 4px;
+        left: 4px;
+      }
+    }
+  }
+
+  .newSurveyForm_wrapper {
+    @apply grid p-md bg-grey-light border border-border rounded;
+    grid-template-columns: 33% 1fr;
+
+    .newSurveyForm_quesno {
+      @apply text-heading-m font-medium;
+    }
+
+    .newSurveyForm_mainsection {
+    }
+    .newSurveyForm_questions {
+      @apply flex gap-4;
+
+      .text-input {
+        @apply w-3/4;
+      }
+      .employee-select-wrap {
+        @apply flex-1;
+      }
+    }
+    .newSurveyForm_answer {
+    }
+    .newSurveyForm_actions {
+      @apply flex justify-end gap-2;
+      .checkbox-wrap {
+        @apply items-center;
+        margin-bottom: 0;
+      }
+      .checkbox-wrap .label {
+        margin-left: 40px;
+      }
+    }
+    .newSurveyForm_seprator {
+      @apply w-px h-6 border border-border;
+    }
+  }
+
+  .surveyformslist_wrapper {
+    @apply w-3/4 grid gap-6 py-md;
+  }
+}
+
+.unstyled-button {
+  border: none;
+  padding: 0;
+  background: none;
+}

package/src/pages/employee/tooltip.scss

@@ -0,0 +1,36 @@
+.tooltip {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .tooltip .tooltiptext::after {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+  }
+
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+    cursor: pointer;
+  }

package/src/pages/employee/updateNumber.scss

@@ -0,0 +1,13 @@
+.updateNumberEmployee{
+    width: 100%;
+    .employee-data-table .row h2{
+        font-weight:500;
+        width: 100%;
+    }
+    .submit-bar {
+        position: relative;
+    }
+    .search-form-wrapper {
+        justify-content: initial;
+    }
+}

package/svg/arrowdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>

package/svg/arrowleft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="19px"><path d="M24 0v24H0V0h24z" fill="none" opacity=".87"/><path d="M14 7l-5 5 5 5V7z"/></svg>

package/svg/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>

package/svg/camera.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="46px" height="42px">
+<rect fill="none" height="24" width="24"/>
+<path d="M3,4V1h2v3h3v2H5v3H3V6H0V4H3z M6,10V7h3V4h7l1.83,2H21c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2V10H6z M13,19c2.76,0,5-2.24,5-5s-2.24-5-5-5s-5,2.24-5,5S10.24,19,13,19z M9.8,14c0,1.77,1.43,3.2,3.2,3.2s3.2-1.43,3.2-3.2 s-1.43-3.2-3.2-3.2S9.8,12.23,9.8,14z"/>
+</svg>

package/svg/check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a82227" >
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>

package/svg/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
+<path d="M0 0h24v24H0V0z" fill="#d4351c"/>
+<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
+</svg>

package/svg/error.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" >
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+</svg>

package/svg/error2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4351c">
+<path d="M0 0h24v24H0V0z" fill="none"/>
+<circle cx="12" cy="19" r="2"/>
+<path d="M10 3h4v12h-4z"/>
+</svg>

package/svg/searchicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#505A5F" width="48px" height="48px" >
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+</svg>

package/svg/starempty.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a82227" width="48px" height="48px">
+    <path d="M0 0h24v24H0V0z" fill="none"/>
+    <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
+</svg>

package/svg/starfilled.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" fill="#a82227" width="48px" height="48px" >
+    <g><path d="M0,0h24v24H0V0z" fill="none"/>
+    <path d="M0,0h24v24H0V0z" fill="none"/></g>
+    <g><path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z"/></g>
+</svg>

package/svg/success.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00703C" >
+    <path d="M0 0h24v24H0V0z" fill="none"/>
+    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
+</svg>

package/tailwind.config.js

@@ -0,0 +1,105 @@
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  purge: { enabled: true, content: ["./example/index.html"] },
+  theme: {
+    screens: {
+      dt: "780px",
+    },
+    colors: {
+      primary: {
+        light: "#F18F5E",
+        main: "#a82227",
+        dark: "#C8602B",
+      },
+      secondary: "#22394D",
+      text: {
+        primary: "#0B0C0C",
+        secondary: "#505A5F",
+      },
+      link: {
+        normal: "#1D70B8",
+        hover: "#003078",
+      },
+      border: "#D6D5D4",
+      "input-border": "#464646",
+      focus: "#a82227",
+      error: "#D4351C",
+      success: "#00703C",
+      black: "#000000",
+      grey: {
+        dark: "#9E9E9E",
+        mid: "#EEEEEE",
+        light: "#FAFAFA",
+        bg: "#E3E3E3",
+      },
+      white: "#FFFFFF",
+    },
+    fontFamily: {
+      sans: ["Noto Sans", "sans-serif"],
+      // sans: ["Roboto", "sans-serif"],
+      rc: ['"Roboto Condensed"', "sans-serif"],
+    },
+    fontSize: {
+      "heading-xl-dt": ["48px", "56px"],
+      "heading-xl": ["32px", "40px"],
+      "heading-l-dt": ["36px", "40px"],
+      "heading-l": ["24px", "32px"],
+      "heading-m-dt": ["24px", "32px"],
+      "heading-m": ["18px", "28px"],
+      "heading-s": ["16px", "24px"],
+      "caption-xl-dt": ["27px", "32px"],
+      "caption-xl": ["18px", "26px"],
+      "caption-l-dt": ["24px", "28px"],
+      "caption-l": ["18px", "21px"],
+      "caption-m-dt": ["19px", "23px"],
+      "caption-m": ["16px", "19px"],
+      "form-field": ["16px", "20px"],
+      "body-l-dt": ["19px", "28px"],
+      "body-l": ["16px", "24px"],
+      "body-s-dt": ["16px", "24px"],
+      "body-s": ["14px", "16px"],
+      legend: ["19px", "23px"],
+      link: ["16px", "24px"],
+      "text-btn": ["16px", "24px"],
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      bold: 700,
+    },
+    padding: {
+      sm: "8px",
+      md: "16px",
+      lg: "24px",
+      xl: "36px",
+    },
+    margin: {
+      xs: "4px",
+      sm: "8px",
+      md: "16px",
+      lg: "24px",
+      xl: "64px",
+    },
+    borderWidth: {
+      default: "1px",
+      0: "0",
+      2: "1px",
+      4: "4px",
+      10: "10px",
+    },
+    boxShadow: {
+      card: "0 1px 2px 0 rgba(0, 0, 0, 0.16)",
+      radiobtn: "0 0 0 5px #a82227",
+    },
+    inset: {
+      0: 0,
+      10: "10px",
+    },
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};