@entit/digit-ui-css 1.5.6

package/src/components/OnGroundEventCard.scss

@@ -0,0 +1,72 @@
+.OnGroundEventCard{
+    box-shadow: 0px 1px 2px 0px #00000029;
+    @apply bg-white mx-sm mb-md p-md cursor-pointer;
+
+    .EventCalendarView{
+        width: 100px;
+        @apply inline-block mr-md;
+    }
+
+    .EventDetails{
+        width: calc( 100% - 116px );
+        @apply inline-block align-top;
+
+        h2{
+            @apply text-caption-m font-bold mb-md text-text-primary;
+        }
+
+        .EventLocation{
+            @apply flex mb-md;
+            svg{
+                @apply h-4 w-4;
+            }
+            p{
+                @apply text-body-s text-text-primary ml-sm;
+            }
+        }
+    
+        .EventTime{
+            @apply flex ;
+            svg{
+                @apply h-4 w-4;
+            }
+            p{
+                @apply text-body-s text-text-primary ml-sm;
+            }
+        }
+
+        .EventCategory{
+            p{
+                @apply text-body-s text-text-primary ;
+            }
+        }
+
+    }
+
+
+}
+
+@screen dt{
+    .OnGroundEventCard{
+        .EventDetails{
+            .EventLocation{
+                p{
+                    @apply text-body-s-dt;
+                }
+            }
+        
+            .EventTime{
+                p{
+                    @apply text-body-s-dt;
+                }
+            }
+    
+            .EventCategory{
+                p{
+                    @apply text-body-s-dt;
+                }
+            }
+    
+        }
+    }
+}

package/src/components/PageBasedInput.scss

@@ -0,0 +1,23 @@
+.PageBasedInputWrapper{
+    .SubmitBar{
+        z-index: 60;
+        @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
+    }
+    .SubmitBarInCardInDesktopView{
+        @apply hidden;
+    }
+    label{
+        margin-left: 0 !important;
+    }
+}
+
+@screen dt{
+    .PageBasedInputWrapper{
+        .SubmitBar{
+            @apply hidden;
+        }
+        .SubmitBarInCardInDesktopView{
+            @apply block;
+        }
+    }
+}

package/src/components/PopupHeadingLabel.scss

@@ -0,0 +1,15 @@
+.popupModalHeading{
+    @apply flex gap-3 mb-lg;
+    .headingIconAndLabel{
+        @apply flex gap-3 items-center;
+        svg{
+            @apply w-6 h-4;
+        }
+        h3{
+            @apply text-heading-l font-bold;
+        }
+    }
+    .popupResetFormButton{
+        @apply p-sm border border-solid border-text-primary border-opacity-25 self-center;
+    }
+}

package/src/components/PropertySearchForm.scss

@@ -0,0 +1,58 @@
+.PropertySearchForm {
+  .pt-search-action {
+    @apply w-full;
+    display: flex;
+    margin-right: 10px;
+    justify-content: end;
+    align-items: center;
+    .pt-search-action-submit button {
+      width: 100% !important;
+    }
+    .pt-search-action-reset {
+      text-align: right;
+      cursor: pointer;
+    }
+  }
+
+  .PropertySearchFormSwitcher{
+    border-bottom: 1px solid #d6d5d4;
+    cursor: pointer;
+    margin-bottom: 20px;
+    display: flex;
+    .non-selected {
+      color: #505a5f;
+      font-weight: 400;
+    }
+    .selected {
+      color: #f47738;
+      font-weight: 700;
+      padding-bottom: 10px;
+      border-bottom: 2px solid #f47738;
+    }
+    span {
+      margin-right: 20px;
+    }
+  }
+
+
+  .form-field {
+    width: 30% !important;
+    margin-bottom: 20px;
+  }
+  @media (min-width: 780px) {
+    .pt-form-field{
+      width: 30% !important;
+      margin-bottom: 20px;
+    }
+  }
+  @media (max-width: 780px) {
+  .form-field{
+    width: 100% !important;
+    margin-bottom: 15px;
+  }
+  .pt-form-field{
+    width: 100% !important;
+    margin-bottom: 15px;
+  }
+  }
+}

package/src/components/SearchForm.scss

@@ -0,0 +1,56 @@
+.search-form-wrapper{
+    @apply flex flex-wrap justify-between bg-white mb-lg py-lg pl-lg;
+    .form-field{
+        width: calc( 25% - 16px );
+        @apply inline-block mr-md align-middle;
+    }
+    .SubmitAndClearAllContainer{
+        @apply w-full;
+        .submit{
+            right: 36px;
+            margin-top: 22px;
+            margin-left: -16px !important;
+            @apply flex flex-row-reverse items-center w-full align-middle text-center !important;
+            button{
+                margin: 0;
+                @apply inline-block w-1/4 !important;
+            }
+            p{
+                @apply cursor-pointer text-link text-focus w-1/4 inline-block ;
+            }
+        }
+    }
+    .submit{
+        right: 36px;
+        margin-top: 22px;
+        @apply inline align-middle text-center !important;
+        button{
+            margin: 0;
+            @apply inline-block w-full !important;
+        }
+        p{
+            @apply cursor-pointer text-link text-focus w-full inline-block ;
+        }
+    }
+    .pt-property-search{
+        justify-content: unset;
+    }
+
+}
+
+@media (min-width: 780px) {
+    .search-form-wrapper{
+        .pt-form-field{
+            width: 30% !important;
+            margin-bottom: 20px;
+          }
+    }
+  }
+  @media (max-width: 780px) {
+    .search-form-wrapper{
+        .pt-form-field{
+            width: 100% !important;
+            margin-bottom: 15px;
+          }
+    }
+}

package/src/components/SearchOnRadioButton.scss

@@ -0,0 +1,10 @@
+.SearchOnRadioButton{
+    svg{
+        fill: #505A5F;
+        width: 24px;
+        height: 24px;
+        top: 8px;
+        right: 8px;
+        @apply absolute;
+    }
+}

package/src/components/StandaloneSearchBar.scss

@@ -0,0 +1,10 @@
+.StandaloneSearchBar{
+    @apply bg-white flex rounded-3xl px-md py-sm w-full;
+    svg{
+        fill: #505A5F;
+        @apply mr-md;
+    }
+    input{
+        @apply w-full mr-md outline-none;
+    }
+}

package/src/components/TimeLine.scss

@@ -0,0 +1,68 @@
+.timeline-container {
+  @apply flex;
+  margin: 0px 8px 15px;
+  .timeline-checkpoint {
+    @apply relative flex-1;
+    z-index: 1;
+  }
+
+  .timeline-content {
+    @apply flex flex-col items-center;
+
+    span {
+      text-align: center;
+      color: white;
+    }
+
+    .secondary-color {
+      color: #0B0C0C;
+      padding: 5px;
+      font-size: small;
+    }
+  }
+
+  .line {
+    @apply absolute;
+    top: 12px;
+    left: calc(50% + 8px);
+    right: calc(-50% + 8px);
+    border-top: 4px solid #D6D5D4;
+    z-index: -1;
+  }
+
+  .circle {
+    width: 24px;
+    height: 24px;
+    background-color: #B1B4B6;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  .active {
+    background-color: #F47738;
+    border-color: #F47738;
+  }
+} 
+
+.TLComments{
+  max-width: 360px;
+  @apply mb-sm p-sm bg-grey-light;
+  h3{
+    @apply font-bold text-caption-m;
+  }
+  p{
+    @apply text-body-l;
+  }
+}
+
+@screen dt{
+  .TLComments{
+    width: 360px;
+    h3{
+      @apply text-caption-m-dt;
+    }
+    p{
+      @apply text-body-l-dt;
+    }
+  }
+}

package/src/components/WhatsNewCard.scss

@@ -0,0 +1,13 @@
+.WhatsNewCard{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply rounded bg-white border-primary-main border-l-4 border-solid p-sm;
+    h2{
+        @apply text-body-l text-text-primary font-medium mb-xs;
+    }
+    p{
+        @apply text-form-field text-text-secondary mb-sm;
+    }
+    a{
+        @apply block text-form-field text-primary-main mb-sm
+    }
+}

package/src/components/actionLink.scss

@@ -0,0 +1,3 @@
+.action-link {
+  @apply text-primary-main text-text-btn mr-lg !important;
+}

package/src/components/actionbar.scss

@@ -0,0 +1,58 @@
+.action-bar-wrap {
+  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+  max-width: 480px;
+  z-index: 100;
+
+  @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right;
+
+  div {
+    @apply w-full;
+  }
+  .menu-wrap {
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    bottom: 45px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: calc(100% - 16px);
+    right: 8px;
+  
+    div {
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+  
+      &:hover {
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .action-bar-wrap {
+    box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+    left: 0;
+    max-width: none;
+    z-index: 999;
+
+    @apply fixed bottom-0 bg-white py-sm pr-lg text-right;
+
+    div {
+      width: calc(100% - 16px);
+    }
+
+    .menu-wrap {
+      bottom: 45px;
+      top: unset;
+      box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+      @apply absolute h-auto bg-white text-left mb-xs z-30;
+      width: 240px;
+      right: 24px;
+  
+      div {
+        @apply h-12 pl-sm py-md text-body-l text-text-primary;
+  
+        &:hover {
+          @apply bg-grey-mid w-full;
+        }
+      }
+    }
+  }
+}

package/src/components/bannercomponents.scss

@@ -0,0 +1,131 @@
+.success-wrap,
+.emp-success-wrap {
+  @apply block bg-success w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  div {
+    img {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg.payment-svg {
+      border: unset;
+      background-color: unset;
+      @apply rounded-full;
+    }
+
+    h2 {
+      @apply font-bold text-caption-m mb-sm;
+    }
+
+    p {
+      @apply font-bold text-caption-l;
+    }
+  }
+}
+
+.error-wrap,
+.emp-error-wrap {
+  @apply block bg-error w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  img {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+}
+
+@screen dt {
+  .success-wrap {
+    width: calc(100% + 284px);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+  .emp-success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .error-wrap {
+    width: calc(100% + 284px);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .emp-error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+}
+
+.photos-wrap {
+  max-width: 640px;
+  @apply flex pt-md;
+
+  img {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  svg {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  .last {
+    width: calc(33% - 9.333px);
+  }
+}
+
+.banner {
+  @apply flex justify-center items-center;
+  height: calc(100vh - 80px);
+  background: linear-gradient(rgba(11,75,102,0.8), rgba(11,75,102,0.8)), var(--banner-url) center center;
+
+  .bannerCard {
+    min-width: 400px;
+  }
+  .bannerLogo {
+    width: 80px;
+    height: 40px;
+    object-fit: contain;
+    padding-right: 10px;
+    margin-right: 10px;
+    border-right: 1px solid #0b0c0c;
+  }
+  .bannerHeader {
+    @apply flex justify-center items-center;
+    margin-bottom: 24px;
+  }
+}

package/src/components/body.scss

@@ -0,0 +1,119 @@
+body {
+  @apply bg-grey-bg;
+}
+
+.body-container {
+  @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
+}
+
+.navbar {
+  @apply text-white bg-secondary p-md w-full mb-md;
+  img {
+    height: 24px;
+  }
+}
+/* .navbar-header{
+    @apply text-navbarheader float-left px-sm
+}
+
+.navbar-subheader{
+    @apply font-light px-sm border-solid border-l border-white border-opacity-100
+}*/
+
+.h1 {
+  @apply text-heading-l text-text-primary font-bold mb-md ml-md ;
+}
+
+.link-label {
+  @apply block text-link text-primary-main mb-md ml-md cursor-pointer;
+
+  &:hover {
+    @apply text-primary-main;
+  }
+}
+
+.back-btn {
+  width: fit-content;
+  @apply block border-solid border-b border-text-primary font-rc text-text-primary text-text-btn ml-sm mt-md;
+
+  label {
+    @apply inline mr-sm align-middle;
+  }
+
+  p {
+    @apply inline float-right;
+  }
+}
+
+.bread-crumb {
+  font-size: 14px;
+  color: #505a5f;
+  display: flex;
+  margin-bottom: 10px;
+}
+.bread-crumb--item {
+  margin-left: 5px;
+
+  &:not(:last-child):after {
+    content: "  /";
+  }
+
+  button {
+    outline: none;
+  }
+
+  .last {
+    color: #0b0c0c;
+  }
+}
+
+.back-btn2 {
+  cursor: pointer;
+  width: fit-content;
+  @apply flex border-solid border-b border-text-primary font-rc text-text-primary text-text-btn ml-sm mb-md;
+
+  img {
+    @apply flex;
+  }
+
+  svg {
+    @apply flex;
+  }
+
+  p {
+    @apply flex;
+  }
+}
+
+@screen dt {
+  .employee-app-container {
+    @apply w-full;
+  }
+
+  .app-container {
+    width: 960px;
+    margin-left: 8px;
+    margin-right: auto;
+  }
+
+  .h1 {
+    margin-left: 0;
+    @apply text-heading-l-dt;
+  }
+
+  .link-label {
+    margin-left: 0;
+  }
+
+  .back-btn {
+    margin-left: 0;
+  }
+
+  .back-btn2 {
+    margin-left: 0;
+  }
+}
+
+.body-container::-webkit-scrollbar {
+  display: none;
+}

package/src/components/buttons.scss

@@ -0,0 +1,47 @@
+.selector-button-primary {
+  @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}
+
+.selector-button-border {
+  @apply h-8 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-text-primary;
+  }
+}
+
+.input-mirror-selector-button{
+  @apply h-16 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg !important;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-text-primary;
+  }
+}
+
+.selector-button-primary-disabled {
+  @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}