@egovernments/digit-ui-components-css 0.0.1

package/src/digitv2/components/textInputV2.scss

@@ -0,0 +1,463 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-card-inputError {
+  @apply block w-full h-10 outline-none bg-white text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left:theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-text-input-field {
+  @apply relative w-full;
+
+  &.geolocation {
+    input {
+      @apply pointer-events-none;
+    }
+  }
+
+  &.numeric {
+    input {
+      @apply text-center overflow-hidden whitespace-no-wrap;
+      text-overflow: ellipsis;
+    }
+
+    .input-container:focus-within {
+      input {
+        border-left-style: hidden;
+        border-right-style: hidden;
+      }
+    }
+
+    &.numeric-buttons-only{
+      input{
+        pointer-events: none !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &.prefix {
+    .input-container:focus-within {
+      input {
+        border-left-style: hidden;
+      }
+    }
+  }
+
+  &.suffix {
+    .input-container:focus-within {
+      input {
+        border-right-style: hidden;
+      }
+    }
+  }
+
+  &.password {
+    input {
+      font-family: theme(digitv2.fontFamily.sans);
+      font-size: theme(digitv2.spacers.spacer4);
+      font-weight: 900;
+      line-height: theme(digitv2.spacers.spacer6);
+    }
+  }
+
+  &.disabled {
+
+    input,
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      pointer-events: none !important;
+      cursor: not-allowed;
+      background-color: theme(digitv2.lightTheme.generic-background);
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+      color: theme(digitv2.lightTheme.generic-divider);
+    }
+
+    input {
+      background-color: white;
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right-style: hidden;
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left-style: hidden;
+    }
+  }
+
+  input[type="time"]::-webkit-calendar-picker-indicator,
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
+  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
+    @apply absolute cursor-pointer w-6 h-6;
+    right: theme(digitv2.spacers.spacer3);
+  }
+
+  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
+  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
+    visibility: visible;
+    filter: invert(85%) sepia(0%) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%);
+  }
+
+  input[type="date"][value=""]::-webkit-datetime-edit,
+  input[type="time"][value=""]::-webkit-datetime-edit,
+  input[type="date"]:disabled::-webkit-datetime-edit,
+  input[type="time"]:disabled::-webkit-datetime-edit,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-clear-button {
+    display: none;
+  }
+
+  ::placeholder,
+  input[type="date"][value=""]:not(:placeholder-shown)::before,
+  input[type="time"][value=""]:not(:placeholder-shown)::before {
+    content: attr(placeholder);
+    color: theme(digitv2.lightTheme.text-disabled);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-weight: theme(digitv2.fontWeight.regular);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: theme(digitv2.spacers.spacer6);
+  }
+
+  &.noneditable {
+
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      pointer-events: none !important;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+      background: theme(digitv2.lightTheme.generic-background);
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    input {
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+      background: theme(digitv2.lightTheme.generic-background);
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right-style: hidden;
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left-style: hidden;
+    }
+
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator {
+      visibility: visible;
+      filter: invert(74%) sepia(7%) saturate(64%) hue-rotate(144deg) brightness(98%) contrast(89%);
+    }
+  }
+
+  &.error {
+
+    input,
+    .digit-prefix,
+    .digit-suffix,
+    .digit-numeric-button-prefix,
+    .digit-numeric-button-suffix {
+      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+    }
+
+    .digit-numeric-button-prefix,
+    .digit-prefix {
+      border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+    }
+
+    .digit-numeric-button-suffix,
+    .digit-suffix {
+      border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+    }
+
+    &.numeric {
+      input {
+        border-left-style: hidden;
+        border-right-style: hidden;
+      }
+    }
+
+    &.suffix {
+      input {
+        border-right-style: hidden;
+      }
+    }
+
+    &.prefix {
+      input {
+        border-left-style: hidden;
+      }
+    }
+  }
+}
+
+
+.digit-card-input-field {
+  @apply outline-none mt-sm block w-full h-10 bg-white text-form-field;
+  padding-left: theme(digitv2.spacers.spacer3);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-card-inputError {
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-employeeCard-input {
+  @extend .typography.text-body-s;
+  @apply outline-none block w-full h-10 bg-white text-form-field;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-employeeCard-input:disabled {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
+
+.digit-employeeCard-input--front {
+  @extend .typography.text-body-s;
+  @apply flex items-center;
+  width: fit-content !important;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 0.313rem;
+}
+
+.digit-employeeCard-inputError {
+  @extend .typography.text-body-s;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-inputWrapper {
+  @apply flex justify-start;
+  max-width: 31.25rem;
+
+  div {
+    max-width: 5rem;
+  }
+
+  span {
+    margin-top: theme(digitv2.spacers.spacer4);
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+}
+
+@screen dt {
+  .digit-card-input-field {
+    width: 30rem;
+  }
+
+  .digit-card-input-field-emp {
+    width: 15rem;
+  }
+
+  .digit-card-inputError {
+    width: 30rem;
+  }
+
+  .digit-employeeCard-input {
+    @apply w-full;
+  }
+
+  .digit-employeeCard-inputError {
+    @apply w-full;
+  }
+
+  .digit-card-textarea-field {
+    @apply w-full;
+    max-width: 33.75rem;
+  }
+
+  .card-input-emp {
+    width: 15rem;
+  }
+}
+
+.digit-citizenCard-input {
+  @extend .typography.text-body-s;
+  @apply outline-none block w-full h-10 bg-white;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+}
+
+.digit-citizenCard-input--front {
+  @extend .typography.text-body-s;
+  @apply flex items-center;
+  width: fit-content !important;
+  background: theme(colors.grey.mid);
+  border-right: 0;
+  padding-right: 0.313rem;
+}
+
+.digit-employeeCard-inputError {
+  @extend .typography.text-body-s;
+  @extend .light-input-border;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-style: theme(digitv2.fontStyle.normal);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height:theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+.digit-card-inputError {
+  @extend .light-input-border;
+  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
+  font-family: theme(digitv2.fontFamily.sans);
+  padding-left: theme(digitv2.spacers.spacer3);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-size: theme(digitv2.spacers.spacer4);
+  color: theme(digitv2.lightTheme.text-primary);
+  line-height: theme(digitv2.spacers.spacer6);
+  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+}
+
+
+.input-container {
+  @apply relative flex items-center h-10;
+  max-width: 37.5rem;
+
+  &.date,
+  &.time,
+  &.geolocation,
+  &.password,
+  &.search,
+  &.passwordToText,
+  &.withIcon {
+    input {
+      padding-right: theme(digitv2.spacers.spacer10);
+    }
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 20.5rem;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+  }
+
+}
+
+.input-container:focus-within {
+
+  .digit-numeric-button-prefix:not([readonly]),
+  .digit-numeric-button-suffix:not([readonly]),
+  .digit-prefix:not([readonly]),
+  .digit-suffix:not([readonly]),
+  input:not([readonly]) {
+    outline: none;
+    border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+  .digit-numeric-button-prefix,
+  .digit-prefix {
+    border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
+  }
+
+  .digit-numeric-button-suffix,
+  .digit-suffix {
+    border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
+  }
+}
+
+.digit-prefix,
+.digit-suffix,
+.digit-numeric-button-prefix,
+.digit-numeric-button-suffix {
+  @apply font-bold text-center;
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  color: theme(digitv2.lightTheme.text-secondary);
+  font-size: theme(digitv2.spacers.spacer5);
+  height: theme(digitv2.spacers.spacer10) !important;
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  line-height: 1.172rem;
+  background: theme(colors.grey.mid);
+  max-width: none !important;
+  flex: 0 0 2.5rem;
+}
+
+.digit-numeric-button-prefix,
+.digit-numeric-button-suffix {
+  width: theme(digitv2.spacers.spacer10) !important;
+  font-size: theme(digitv2.spacers.spacer6);
+}
+
+.digit-prefix,
+.digit-numeric-button-prefix {
+  border-right-style: hidden;
+}
+
+.digit-suffix,
+.digit-numeric-button-suffix {
+  border-left-style: hidden;
+}
+
+.digit-prefix,
+.digit-suffix {
+  @apply pointer-events-none;
+}
+
+.digit-text-input-customIcon {
+  @apply absolute w-6 h-6 cursor-pointer;
+  top: theme(digitv2.spacers.spacer2);
+  right: theme(digitv2.spacers.spacer3);
+
+  &.nonEditable,
+  &.disabled {
+    @apply pointer-events-none;
+  }
+}

package/src/digitv2/components/textareaV2.scss

@@ -0,0 +1,100 @@
+.digit-card-textarea-field,
+.digit-employee-card-textarea-field {
+  @apply block outline-none w-full bg-white text-form-field overflow-x-hidden overflow-y-hidden whitespace-pre-wrap;
+
+
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.regular);
+  color: theme(digitv2.lightTheme.text-primary);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  font-size: theme(digitv2.spacers.spacer4);
+  line-height: theme(digitv2.spacers.spacer6);
+  padding: theme(digitv2.spacers.spacer3) !important;
+  padding-top: theme(digitv2.spacers.spacer2) !important;
+  height: 6.25rem;
+  min-height:theme(digitv2.spacers.spacer10);
+  overflow-wrap: break-word;
+
+
+  &.disabled {
+    @apply text-grey-dark !important;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    pointer-events: none !important;
+    cursor: not-allowed;
+
+  }
+
+  &.noneditable {
+    pointer-events: none !important;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+    background: theme(digitv2.lightTheme.generic-background);
+    color: theme(digitv2.lightTheme.text-secondary);
+  }
+
+  &.error {
+    border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+  }
+
+  &:hover {
+    overflow-y: auto;
+  }
+
+  &.resize-smart {
+    min-height: 6rem;
+    overflow: hidden;
+    resize: none;
+  }
+}
+
+textarea::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}
+
+.digit-employee-card-textarea-field {
+  @apply w-full;
+  height: 6.25rem;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+    min-width: 12.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 20.5rem;
+    min-width: 9.75rem;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+    min-width: 12.5rem;
+  }
+}
+
+.digit-card-textarea-field:focus,
+.digit-employee-card-textarea-field:focus {
+  border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
+  overflow-y: auto;
+}
+
+.digit-card-textarea-field.resize-smart:focus,
+.digit-employee-card-textarea-field.resize-smart:focus,
+.digit-card-textarea-field.resize-smart:hover,
+.digit-employee-card-textarea-field.resize-smart:hover  {
+  overflow: hidden; 
+}

package/src/digitv2/components/textblock.scss

@@ -0,0 +1,47 @@
+.digit-text-block-wrap {
+
+    @apply flex flex-col;
+
+    @media (min-width: 48rem) {
+        gap: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (max-width: 30rem) {
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+
+    .digit-text-block-header-content {
+        .digit-text-block-caption {
+            @extend .typography.caption-s;
+            padding-bottom: theme(digitv2.spacers.spacer1);
+            color: theme(digitv2.lightTheme.text-secondary);
+        }
+
+        .digit-text-block-header {
+            @extend .typography.heading-xl;
+            padding-bottom: theme(digitv2.spacers.spacer2);
+            color: theme(digitv2.lightTheme.text-primary);
+            line-height: normal;
+        
+            @media (max-width: 30rem) {
+                padding-bottom: theme(digitv2.spacers.spacer1);
+            }
+        }
+
+        .digit-text-block-subheader {
+            @extend .typography.heading-m;
+            color: theme(digitv2.lightTheme.text-secondary);
+            line-height: normal;
+        }
+    }
+
+    .digit-text-block-body {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.generic-inputborder);
+    }
+}