@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.11

package/src/digitv2/components/buttonsV2.scss

@@ -1,407 +1,451 @@
-@import url("../index.scss");
-
-.icon-label-container {
-  @apply flex max-w-full items-center;
-  gap: theme(digitv2.spacers.spacer2);
-
-  &.small,
-  &.medium {
-    gap: theme(digitv2.spacers.spacer1);
-  }
-
-  .digit-button-customIcon {
-    @apply flex-shrink-0 w-6 h-6;
-
-    &.medium {
-      @apply w-5 h-5;
-    }
-
-    &.small {
-      width: 0.875rem;
-      height: 0.875rem;
-    }
-  }
-
-  &.link {
-    @apply items-start;
-    gap: theme(digitv2.spacers.spacer1);
-
-    .digit-button-customIcon {
-      @apply w-5 h-5 flex-shrink-0;
-
-      &.small {
-        width: 0.875rem;
-        height: 0.875rem;
-        margin-top:theme(digitv2.spacers.spacer1);
-      }
-    }
-  }
-}
-
-.digit-button-label {
-  @extend .typography.button.large;
-  @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
-  text-overflow: ellipsis;
-}
-
-.digit-button-default {
-  @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
-  height: fit-content;
-  width: fit-content;
-  gap: theme(digitv2.spacers.spacer2);
-  border: 0.063rem solid #000000;
-  padding-left: theme(digitv2.spacers.spacer6);
-  padding-right: theme(digitv2.spacers.spacer6);
-  min-width: 6.5625rem;
-  min-height: theme(digitv2.spacers.spacer10);
-
-  h2 {
-    @extend .typography.button.large;
-    @apply text-black h-5;
-    margin: 0;
-  }
-}
-
-.digit-button-primary {
-  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
-  width: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer6);
-  padding-right:  theme(digitv2.spacers.spacer6);
-  gap:  theme(digitv2.spacers.spacer2);
-  min-width: 6.5625rem;
-  background-color: theme(digitv2.lightTheme.primary-1);
-
-  h2 {
-    @extend .typography.button.large;
-    @apply text-white;
-    margin: 0;
-  }
-
-  &.disabled {
-    @apply opacity-50;
-    background: theme(digitv2.lightTheme.text-disabled);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:hover {
-    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
-  }
-
-  &:active {
-    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
-
-    h2 {
-      font-weight: theme(digitv2.fontWeight.bold);
-    }
-  }
-
-  &.large{
-    h2{
-      @apply h-5;
-      margin-top: 0.125rem;
-    }
-  }
-
-  &.medium {
-    @apply h-8;
-
-    h2 {
-      @extend .typography.button.medium;
-    }
-  }
-
-  &.small {
-    @apply h-6;
-
-    h2 {
-      @extend .typography.button.small;
-    }
-  }
-
-}
-
-.digit-button-secondary {
-  @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
-  padding-left:  theme(digitv2.spacers.spacer6);
-  padding-right:  theme(digitv2.spacers.spacer6);
-  gap:  theme(digitv2.spacers.spacer2);
-  min-width: 6.5625rem;
-  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
-  width: fit-content;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:hover {
-    @apply bg-white;
-    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
-  }
-
-  &:active {
-    @apply bg-white;
-    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
-
-  }
-
-  h2 {
-    @extend .typography.button.large;
-    margin: 0;
-    color: theme(digitv2.lightTheme.primary-1);
-  }
-
-  &.disabled {
-    @apply opacity-50;
-    border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
-
-    h2 {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-  }
-
-  &.large{
-    h2{
-      @apply h-5;
-      margin-top: 0.125rem;
-    }
-  }
-
-  &.medium {
-    @apply h-8;
-
-    h2 {
-      @extend .typography.button.medium;
-    }
-  }
-
-  &.small {
-    @apply h-6;
-
-    h2 {
-      @extend .typography.button.small;
-    }
-  }
-}
-
-.digit-button-teritiary {
-  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
-  background: none;
-  width: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
-  gap:  theme(digitv2.spacers.spacer2);
-  min-width: 6.5625rem;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply w-auto;
-    @extend .typography.button.large;
-    margin: 0;
-    color: theme(digitv2.lightTheme.primary-1);
-  }
-
-  &.disabled {
-    @apply opacity-50;
-
-    h2 {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-  }
-
-  &.large{
-    h2{
-      @apply h-5;
-      margin-top: 0.125rem;
-    }
-  }
-
-  &.medium {
-    @apply h-8;
-
-    h2 {
-      @extend .typography.button.medium;
-    }
-  }
-
-  &.small {
-    @apply h-6;
-
-    h2 {
-      @extend .typography.button.small;
-    }
-  }
-
-  &:active{
-    h2{
-      font-weight: theme(digitv2.fontWeight.bold);
-    }
-  }
-}
-
-.digit-button-link {
-  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
-  background: none;
-  width: fit-content;
-  height: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
-  gap: theme(digitv2.spacers.spacer2);
-  min-width: 4.875rem;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @extend .typography.link-L;
-    @apply h-auto whitespace-normal text-left w-auto;
-    margin: 0;
-    word-break: break-word;
-    color: theme(digitv2.lightTheme.primary-1);
-    height: fit-content;
-  }
-
-  &:hover {
-    h2 {
-      @extend .typography.link-L;
-      @apply h-auto whitespace-normal text-left;
-      margin: 0;
-      word-break: break-word;
-      color: theme(digitv2.lightTheme.primary-1);
-      height: fit-content;
-      text-decoration-thickness: 0.125rem;
-    }
-  }
-
-  &.disabled {
-    @apply opacity-50;
-
-    h2 {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-  }
-
-  &.medium {
-
-    h2 {
-      @extend .typography.link-S;
-    }
-  }
-
-  &.small {
-
-    h2 {
-      @extend .typography.link-XS;
-    }
-  }
-}
-
-.digit-button-digit-action-cancel {
-  @apply bg-border text-center outline-none px-lg text-center;
-  border-color: #464646;
-  border-bottom: 0.063rem;
-  border-style: solid;
-  min-width: 5.2rem;
-
-  &.disabled {
-    @apply opacity-50;
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-medium text-black flex justify-center items-center;
-    margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
-  }
-}
-
-.digit-submit-bar {
-  /* @extend .light-primary-button;*/
-  @apply h-10 text-center w-full outline-none cursor-pointer;
-  box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
-  background-color: theme(digitv2.lightTheme.primary-1);
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-medium text-legend text-white leading-normal;
-    margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
-  }
-}
-
-.digit-submit-bar-disabled {
-  @apply h-10 text-center w-full outline-none opacity-50;
-  background-color: theme(digitv2.lightTheme.primary-1);
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-medium text-legend text-white leading-normal;
-    margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
-  }
-}
-
-.digit-selector-button-primary {
-  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
-  background-color: theme(digitv2.lightTheme.primary-1);
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-rc font-medium text-legend text-white;
-  }
-}
-
-.digit-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;
-  }
-}
-
-.digit-selector-button-primary-disabled {
-  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
-  background-color: theme(digitv2.lightTheme.primary-1);
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-rc font-medium text-legend text-white;
-  }
-}
-
-@screen dt {
-
-  .digit-submit-bar,
-  .digit-submit-bar-disabled {
-    width: 15rem;
-  }
-}
-
-.digit-submit-bar:focus {
-  @apply outline-none !important;
-}
+@import url("../index.scss");
+
+.icon-label-container {
+  @apply flex max-w-full items-center;
+  gap: theme(digitv2.spacers.spacer2);
+
+  &.small,
+  &.medium {
+    gap: theme(digitv2.spacers.spacer1);
+  }
+
+  .digit-button-customIcon {
+    @apply flex-shrink-0 w-6 h-6;
+
+    &.medium {
+      @apply w-5 h-5;
+    }
+
+    &.small {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  &.link {
+    @apply items-start;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-button-customIcon {
+      @apply w-5 h-5 flex-shrink-0;
+
+      &.small {
+        width: 0.875rem;
+        height: 0.875rem;
+        margin-top:theme(digitv2.spacers.spacer1);
+      }
+    }
+  }
+}
+
+.digit-button-label {
+  @extend .typography.button.large;
+  @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
+  text-overflow: ellipsis;
+}
+
+.digit-button-default {
+  @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
+  height: fit-content;
+  width: fit-content;
+  gap: theme(digitv2.spacers.spacer2);
+  border: 0.063rem solid #000000;
+  padding-left: theme(digitv2.spacers.spacer6);
+  padding-right: theme(digitv2.spacers.spacer6);
+  min-width: 6.5625rem;
+  min-height: theme(digitv2.spacers.spacer10);
+
+  h2 {
+    @extend .typography.button.large;
+    @apply text-black h-5;
+    margin: 0;
+  }
+}
+
+.digit-button-primary {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  width: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  h2 {
+    @extend .typography.button.large;
+    @apply text-white;
+    margin: 0;
+  }
+
+  &.disabled {
+    @apply opacity-50;
+    background: theme(digitv2.lightTheme.text-disabled);
+  }
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  &:hover {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
+  }
+
+  &:active {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
+
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: 0.125rem;
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+
+}
+
+.digit-button-secondary {
+  @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+  width: fit-content;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  &:hover {
+    @apply bg-white;
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
+  }
+
+  &:active {
+    @apply bg-white;
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
+
+  }
+
+  h2 {
+    @extend .typography.button.large;
+    margin: 0;
+    color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.disabled {
+    @apply opacity-50;
+    border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: theme(digitv2.spacers.spacer1);
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+}
+
+.digit-button-teritiary {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  background: none;
+  width: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer2);
+  padding-right: theme(digitv2.spacers.spacer2);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply w-auto;
+    @extend .typography.button.large;
+    margin: 0;
+    color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.disabled {
+    @apply opacity-50;
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: 0.125rem;
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+
+  &:active{
+    h2{
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
+  }
+}
+
+.digit-button-link {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
+  background: none;
+  width: fit-content;
+  height: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer2);
+  padding-right: theme(digitv2.spacers.spacer2);
+  gap: theme(digitv2.spacers.spacer2);
+  min-width: 4.875rem;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @extend .typography.link-L;
+    @apply h-auto whitespace-normal text-left w-auto;
+    margin: 0;
+    word-break: break-word;
+    color: theme(digitv2.lightTheme.primary-1);
+    height: fit-content;
+  }
+
+  &:hover {
+    h2 {
+      @extend .typography.link-L;
+      @apply h-auto whitespace-normal text-left;
+      margin: 0;
+      word-break: break-word;
+      color: theme(digitv2.lightTheme.primary-1);
+      height: fit-content;
+      text-decoration-thickness: 0.125rem;
+    }
+  }
+
+  &.disabled {
+    @apply opacity-50;
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.medium {
+
+    h2 {
+      @extend .typography.link-S;
+    }
+  }
+
+  &.small {
+
+    h2 {
+      @extend .typography.link-XS;
+    }
+  }
+}
+
+.digit-button-digit-action-cancel {
+  @apply bg-border text-center outline-none px-lg text-center;
+  border-color: #464646;
+  border-bottom: 0.063rem;
+  border-style: solid;
+  min-width: 5.2rem;
+
+  &.disabled {
+    @apply opacity-50;
+  }
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-black flex justify-center items-center;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-submit-bar {
+  /* @extend .light-primary-button;*/
+  @apply h-10 text-center w-full outline-none cursor-pointer;
+  box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-legend text-white leading-normal;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-submit-bar-disabled {
+  @apply h-10 text-center w-full outline-none opacity-50;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-legend text-white leading-normal;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-selector-button-primary {
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}
+
+.digit-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;
+  }
+}
+
+.digit-selector-button-primary-disabled {
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}
+
+@screen dt {
+
+  .digit-submit-bar,
+  .digit-submit-bar-disabled {
+    width: 15rem;
+  }
+}
+
+.digit-submit-bar:focus {
+  @apply outline-none !important;
+}
+
+.digit-buttons-group {
+  display: flex;
+  flex-direction: row;
+  height: fit-content;
+  gap:theme(digitv2.spacers.spacer4);
+
+  @media (max-width: 30rem) {
+    flex-direction: column;
+
+    button{
+      width: 100%;
+    }
+  }
+
+  button{
+    flex: 1;
+  }
+}
+
+.header-dropdown-container {
+  position: relative; 
+
+  .header-dropdown-menu {
+    @apply absolute z-30;
+    bottom: theme(digitv2.spacers.spacer5);
+    right: 0;
+    max-height: unset;
+    margin-top: unset;
+  
+    &.showBottom{
+      bottom: unset;
+    }
+
+    @media (max-width: 30rem) {
+      width: 100% !important;
+    }
+
+    @media (max-width: 15.625rem) {
+      left:0 ;
+    }
+  }
+}
+