@egovernments/digit-ui-health-css 0.2.80 → 0.2.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.2.80",
+  "version": "0.2.81",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",

package/src/pages/employee/campaign.scss

@@ -257,7 +257,7 @@
   border-radius: 1rem;
   background-color: white;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-  margin: 20px auto;
+  margin: 5px auto;  /* updated margin since we added page no */
   font-family: Arial, sans-serif;
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: #d6d5d4 #fafafa; /* Firefox */
@@ -531,8 +531,29 @@
   .digit-toggle-toolbar {
     margin-top: 1rem;
     margin-bottom: 0.5rem;
+    max-width: 90%;
+    > *:first-child label {
+      border-top-left-radius: 0.5rem;
+      border-bottom-left-radius: 0.5rem;
+    }
+    > *:last-child label {
+      border-top-right-radius: 0.5rem;
+      border-bottom-right-radius: 0.5rem;      
+    }
   }
 }
+
+.digit-toggle-toolbar{&.app-config-tab{
+  max-width: 90%;
+  > *:first-child label {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+  > *:last-child label {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;      
+  }
+}}
 .module-description {
   flex-grow: 1;
   margin: 0 0 1rem 0;
@@ -540,6 +561,286 @@
   font-size: theme(digitv2.fontSize.heading-s);
   color: theme(digitv2.lightTheme.text-color-secondary);
 }
+.camp-drawer-caption{
+  font-size: 1rem !important;
+  font-weight: 400 !important;
+}
+
+.camp-app-help-tutorial-popup{
+  bottom: 0;
+  top: 62vh !important;
+  width: 100%;
+  max-width:90% !important;
+  overflow: hidden !important;
+  .digit-popup-children-wrap{
+    overflow: hidden!important;
+  }
+  .tutorial-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .tutorial-row {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    gap: 1rem;
+    padding-bottom: 1rem;
+  }
+  
+  .tutorial-card {
+    flex: 0 0 auto;
+    width: 16rem;
+    min-height: 10rem;
+    background: #ffffff;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+  
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+  
+  .tutorial-icon {
+    background-color: #f0f0f0;
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.75rem;
+    font-size: 1.5rem;
+  }
+  
+  .tutorial-title {
+    font-size: 0.95rem;
+    font-weight: 500;
+  }
+  
+}
+
+
+@keyframes fadeIn {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.tutorial-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2999;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+  &.fade-in {
+    animation-name: fadeIn;
+  }
+
+  &.fade-out {
+    animation-name: fadeOut;
+  }
+}
+
+.tutorial-drawer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: calc(100vw - 4rem);
+  border-radius:1rem 1rem 0rem 0rem;
+  background: #ffffff;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+
+  &.slide-in {
+    animation-name: slideInUp;
+  }
+
+  &.slide-out {
+    animation-name: slideOutDown;
+  }
+}
+
+.tutorial-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  color: theme(digitv2.lightTheme.primary-2);
+
+}
+
+.tutorial-close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.tutorial-row {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  gap: 1rem;
+  padding: 0.25rem;
+
+  /* Optional mobile smooth scrolling */
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width:thin;
+}
+
+.tutorial-card {
+  flex: 0 0 auto;
+  width: 18rem;
+  min-height: 10rem;
+  background: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: none;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+  box-shadow: 0px 2px 4px 0px #00000026;
+
+
+
+  &:hover {
+    transform: translateY(-4px);
+  }
+
+  .tutorial-card-image {
+    height: 5rem;
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    img{
+      max-width: 5rem;
+     max-height: 4rem;
+    }
+  }
+
+  .tutorial-card-content {
+    margin: 1rem 0rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .tutorial-card-title {
+      font-weight: 500;
+      color: theme(digitv2.lightTheme.primary-2)
+    }
+
+    .tutorial-card-subtext {
+      font-size: 0.9rem;
+      color: #555;
+    }
+
+    .tutorial-card-link {
+      margin-top: 0.5rem;
+      font-size: 0.875rem;
+      color:  theme(digitv2.lightTheme.primary);
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+
+      .arrow {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+
+.tutorial-icon {
+  background-color: #f0f0f0;
+  border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+  font-size: 1.5rem;
+
+  @media (max-width: 480px) {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+}
+
+.tutorial-title {
+  font-size: 0.95rem;
+  font-weight: 500;
+
+  @media (max-width: 480px) {
+    font-size: 0.85rem;
+  }
+}
+
+.camp-help-button-app-configuration-redesign{
+  margin-right: 24rem;
+}
 .boldLabel{
   .digit-header-content{
     font-weight: 700;

package/src/pages/employee/index.scss

@@ -1004,6 +1004,10 @@ tbody {
   display: flex;
   align-items: baseline;
   gap: 1rem;
+  .app-config-header-group{
+    display: flex;
+    column-gap:inherit;
+  }
 }
 .appConfigLabelField-label-container {
   width: 100%;
@@ -1088,5 +1092,7 @@ tbody {
 }
 .app-config-drawer-subheader{
   @extend .typography.caption-s;
-  color: theme(digitv2.lightTheme.primary-2)
+  color: theme(digitv2.lightTheme.primary-2);
+  display: flex;
+  align-items: baseline;
 }