@digigov/css 1.0.0-8ae63a77 → 1.0.0-ab30975f

package/src/components/notification-banner.css

@@ -1,5 +1,14 @@
 .govgr-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+  &.govgr-notification-banner--dense, .govgr-dense & {
+    @apply border-4 mb-4 md:mb-5;
+    .govgr-notification-banner__title {
+      @apply px-2 sm:px-3 pb-1;
+    }
+    .govgr-notification-banner__content {
+      @apply p-3 md:p-4;
+    }
+  }
 }
 .govgr-notification-banner--info {
   @apply bg-info border-info;
@@ -9,7 +18,7 @@
   .govgr-notification-banner__link {
     &:link:not(:focus) {
       @apply text-success;
-    } 
+    }
   }
 }
 .govgr-notification-banner--error {
@@ -46,7 +55,9 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
     text-decoration: none;
     outline: none;
   }
@@ -55,4 +66,4 @@
   .govgr-notification-banner__link {
     font-size: inherit;
   }
-}
+}

package/src/components/pagination.css

@@ -68,5 +68,8 @@
   .govgr-link {
     pointer-events: none;
     @apply text-base-800;
+    .govgr-svg-icon {
+      fill: var(--color-base-800);
+    }
   }
 }

package/src/components/panel.css

@@ -15,6 +15,7 @@
   letter-spacing: var(--panel__title-letter-spacing);
 }
 .govgr-panel__body {
+  @apply break-words;
   font-size: var(--panel__body-font-size);
   line-height:var(--panel__body-line-height);
   margin:var(--panel__body-margin);

package/src/components/radios.css

@@ -1,4 +1,16 @@
-.govgr-radios {}
+.govgr-radios {
+  &.govgr-radios--dense, govgr-dense & {
+    .govgr-radios__item {
+      @apply mb-2 pl-9 min-h-8;
+    }
+    .govgr-radios__input {
+      @apply left-0.5 top-0 w-8 h-8;
+      &:focus {
+        border-width: 3px;
+      }
+    }
+  }
+}
 .govgr-radios__item {
   @apply block relative mb-4 pl-12;
   min-height: 40px;
@@ -47,3 +59,10 @@
     @apply min-w-max mx-2;
   }
 }
+.govgr-radios {
+  &.govgr-radios--dense, .govgr-dense & {
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
+}

package/src/components/stepnav.css

@@ -24,7 +24,7 @@
     height: calc(100% - 2rem);
   }
   &:after {
-    @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
+    @apply absolute z-0 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
     content: "";
     margin-left: calc(0.75rem + 1px);
   }

package/src/components/svg-icons.css

@@ -46,13 +46,12 @@
 }
 .govgr-svg-icon--burger {
   fill: var(--color-base-content);
-  /* @apply w-8 h-8 float-right cursor-pointer transition-all  */
-  @apply transition-all focus:bg-focus;
+  @apply transition-transform focus:bg-focus;
   @apply cursor-pointer;
   #govgr-svg-icon--burger__line-1,
   #govgr-svg-icon--burger__line-2,
   #govgr-svg-icon--burger__line-3 {
-    @apply transition-all;
+    @apply transition-transform;
   }
   #govgr-svg-icon--burger__line-1 {
     x: 2px;

package/src/components/tabs.css

@@ -15,7 +15,7 @@
       @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
-        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
+        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
         margin-bottom: -1px;
         &:hover {
           text-decoration-thickness: 2px;
@@ -46,4 +46,36 @@
       @apply block;
     }
   }
+  &.govgr-tabs--dense, .govgr-dense & {
+    .govgr-tabs__list {
+        .govgr-tabs__list-item {
+        @apply px-3 py-1;
+        &.govgr-tabs__list-item-selected {
+            @apply md:px-4 md:pb-3 md:pt-2;
+        }
+        }
+    }
+    .govgr-tabs__panel {
+        @apply pb-2 pt-3;
+    }
+  }
+}
+
+.govgr-tabs--vertical {
+  .govgr-tabs__panel {
+    @apply min-h-full pt-4 pl-6;
+  }
+  .govgr-tabs__list {
+    .govgr-tabs__list-item {
+      @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
+      width: calc(100% - 0.25rem);
+      &.govgr-tabs__list-item-selected {
+        @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
+        /* margin-right: -1px; */
+        width: calc(100% + 1px);
+        /* margin-top: 0px; */
+      }
+    }
+  }
+
 }

package/src/components/typography.css

@@ -38,6 +38,9 @@
   font-weight: var(--heading-xs-font-weight);
   letter-spacing: var(--heading-xs-letter-spacing);
 }
+.govgr-heading--break-words {
+  @apply break-words;
+}
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
   color: var(--caption-xl-color);
@@ -180,6 +183,9 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
+.govgr-hint--break-words {
+  @apply break-words;
+}
 
 .govgr-\!-font-weight-regular {
   @apply font-normal !important;
@@ -290,6 +296,11 @@
     }
   }
 }
+button.govgr-link {
+  .govgr-svg-icon {
+    @apply ml-1;
+  }
+}
 .govgr-back-link {
   .govgr-svg-icon--caret {
     fill: var(--color-base-content);

package/src/components/warning-text.css

@@ -1,7 +1,6 @@
 .govgr-warning-text {
   font-size: var(--warning-text-font-size);
-  @apply p-4;
-  @apply flex pt-4 pb-4 pl-0 pr-0;
+  @apply flex py-4 px-0;
   .govgr-warning-text__icon {
     @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
     rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
@@ -16,4 +15,9 @@
     -webkit-clip-path: inset(50%) !important;
     clip-path: inset(50%) !important;
   }
+  &.govgr-warning-text--dense, .govgr-dense & {
+    .govgr-warning-text__icon  {
+      @apply mr-4 md:mr-5;
+    }
+  }
 }

package/tailwind.config.js

@@ -166,11 +166,6 @@ module.exports = {
       boxShadow: {
         thick: "0 0 30px rgba(0, 0, 0, 0.6)",
       },
-      borderColor: {
-        // TODO: fix this invalid value in the future
-        // Read more: https://gitlab.grnet.gr/devs/digigov/digigov-sdk/-/merge_requests/818
-        DEFAULT: "reset",
-      },
     },
   },
   plugins: [plugin(themesPlugin)],

package/src/components/accessibility-menu.css

@@ -1,76 +0,0 @@
-.govgr-accessibility-menu {}
-.govgr-accessibility-menu--left {
-  .govgr-accessibility-menu__btn {
-    @apply left-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply left-0;
-  }
-}
-.govgr-accessibility-menu--right {
-  .govgr-accessibility-menu__btn {
-    @apply right-4;
-  }
-  .govgr-accessibility-menu__content {
-    @apply right-0;
-  }
-}
-.govgr-accessibility-menu__btn {
-  @apply absolute bottom-4 bg-base-300;
-  @apply p-4 rounded-full !important;
-  box-shadow: 0px 2px 5px rgba(var(--color-base-900-rgb), 0.3);
-  &:hover {
-    @apply bg-base-400;
-  }
-}
-.govgr-accessibility-menu__content {
-  @apply bg-base-200 absolute top-0 bottom-0 p-4 flex flex-col max-w-md;
-}
-
-.govgr-accessibility-menu__header {
-  @apply inline-flex justify-between items-center mb-6 gap-2;
-}
-.govgr-accessibility-menu__header-btn {
- @apply flex flex-nowrap; 
-}
-.govgr-accessibility-menu__body {
-  @apply overflow-y-scroll p-3 flex-grow;
-}
-.govgr-accessibility-menu__list {
-  @apply grid grid-cols-1 sm:grid-cols-2 gap-5;
-}
-.govgr-accessibility-menu__list-item {
-  @apply col-span-1;
-}
-.govgr-accessibility-menu__option-btn {
-  @apply flex flex-col gap-2;
-  @apply bg-base-100 border-base-100 border-2;
-  @apply w-full sm:w-fit leading-tight m-0 !important;
-  padding: calc(1rem + 2px) !important;
-  &:hover {
-    @apply border-base-content;
-  }
-}
-.govgr-accessibility-menu__option-btn--selected {
-  @apply border-success border-4 text-success p-4 !important;
-  .govgr-accessibility-menu__steps {
-    @apply opacity-100;
-  }
-}
-.govgr-accessibility-menu__steps {
-  @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
-}
-.govgr-accessibility-menu__step {
-  @apply bg-base-300 w-full;
-}
-.govgr-accessibility-menu__step--active {
-  @apply bg-success;
-}
-
-/* overrides */
-
-.govgr-accessibility-menu__option-btn--selected {
-  .govgr-svg-icon {
-    fill: var(--color-success) !important;
-  }
-}