@pmidc/upyog-css 1.0.1 → 1.0.3

package/src/pages/employee/surveys.scss

@@ -1,304 +1,413 @@
-.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;
-}
-
-
-
-.survey-grid-container {
-  display: grid;
-  gap: 16px;
-}
-.survey-grid-container-input {
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-@media (min-width: 320px) {
-  .survey-grid-container {
-      grid-template-columns: repeat(1, 1fr);
-  }
-}
-@media (min-width: 480px) {
- .survey-grid-container {
-      grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 768px) {
-  .survey-grid-container  {
-      grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media (min-width: 1024px) {
-  .survey-grid-container  {
-      grid-template-columns: repeat(4, 1fr);
-  }
+.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;
+}
+
+
+
+.survey-grid-container {
+  display: grid;
+  gap: 16px;
+}
+.survey-grid-container-input {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+@media (min-width: 320px) {
+  .survey-grid-container {
+      grid-template-columns: repeat(1, 1fr);
+  }
+}
+@media (min-width: 480px) {
+ .survey-grid-container {
+      grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .survey-grid-container  {
+      grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .survey-grid-container  {
+      grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+
+
+
+
+.section-card {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #f9f9f9;
+}
+
+.section-card h3 {
+  margin-top: 0;
+}
+
+.section-card input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.section-card button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+}
+
+.section-card button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+
+
+
+.category-card {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #f0f8ff;
+}
+
+.category-card h3 {
+  margin-top: 0;
+}
+
+.category-card input,
+.category-card select {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.category-card button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+}
+
+.category-card button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.category-card table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.category-card table, .category-card th, .category-card td {
+  border: 1px solid #ccc;
+}
+.category-card thead{
+  background-color: #6f98b8;
+}
+.category-card th, .category-card td {
+  padding: 10px;
+  text-align: left;
+}
+
+.category-card label {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+}
+
+.category-card label:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
 }