@digigov/css 0.32.1 → 0.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.32.1",
+  "version": "0.33.1",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",

package/src/components/accordion.css

@@ -8,6 +8,9 @@
       @apply border-t;
     }
   }
+  .govgr-accordion__section--no-border {
+    @apply border-0 !important;
+  }
   .govgr-accordion__section-summary {
     @apply py-4 pr-8 hover:bg-gray50 transition ease-in-out cursor-pointer;
     list-style: none;
@@ -35,7 +38,8 @@
     }
   }
   .govgr-accordion__section-heading {
-    @apply no-underline text-xl font-semibold 
+    font-size: var(--accordion__section-heading-font-size);
+    @apply no-underline font-semibold 
     mb-0 transition-all justify-between cursor-pointer;
     &:active {
       @apply ring-link-visited;

package/src/components/breadcrumbs.css

@@ -10,10 +10,11 @@
   clear: both;
 }
 .govgr-breadcrumbs__list-item {
+  font-size: var(--breadcrumbs__list-item-font-size);
   @apply inline-block relative mb-1 ml-2 pl-4 float-left;
   &::before {
     content: "";
-    @apply block absolute top-2 bottom-0 left-0 w-3 h-3 mx-auto my-0 bg-contain bg-no-repeat bg-center;
+    @apply block absolute top-2 bottom-0 left-0 md:w-3 md:h-3 w-2 h-2 mx-auto my-0 bg-contain bg-no-repeat bg-center;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>" );
   }
   &:first-child {

package/src/components/dropdown.css

@@ -45,7 +45,7 @@
 }
 .govgr-dropdown__content {
   @apply border border-gray200 p-4 bg-white border-t-0
-  max-w-xs w-max absolute transition z-1 mr-4 -mt-4;
+  max-w-xs w-max min-w-full absolute transition z-1 mr-4 -mt-4;
   -webkit-box-box-shadow: 0 2px 8px var(--color-shadow200), 0 -2px 0 var(--color-gray300);
   box-shadow: 0 2px 8px var(--color-shadow200), 0 -2px 0 var(--color-gray300);
   *:last-child {

package/src/components/form.css

@@ -152,7 +152,7 @@
 .govgr-radios__input:disabled,
 .govgr-radios__input:disabled::before,
 .govgr-radios__input:disabled:checked:before {
-  @apply bg-gray50 cursor-not-allowed;
+  @apply bg-gray100 cursor-not-allowed;
 }
 .govgr-input:disabled, 
 .govgr-textarea:disabled, 
@@ -160,6 +160,12 @@
 .govgr-radios__input:disabled::before {
   @apply border-gray500 text-gray600;
 }
-.govgr-checkboxes__input:disabled:checked:after, .govgr-radios__input:disabled:checked:after {
-  @apply opacity-70;
+.govgr-checkboxes__input:disabled:checked:after,
+.govgr-radios__input:disabled:checked:after {
+  @apply opacity-40;
+}
+
+.govgr-radios__label--disabled,
+.govgr-checkboxes__label--disabled {
+  @apply opacity-40;
 }

package/src/components/misc.css

@@ -12,14 +12,16 @@
   @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
 }
 .govgr-warning-text {
+  font-size: var(--warning-text-font-size);
   @apply flex pl-0 pr-0;
   .govgr-warning-text__icon {
     @apply text-white font-bold bg-base-content text-3xl leading-10 text-center 
-    rounded-3xl min-h-10 min-w-10 h-fit mr-6 mt-1
+    rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
     print:bg-white print:border-2 print:border-base-content print:text-base-content;
   }
   .govgr-warning-text__text {
-    @apply text-lg flex items-center;
+   
+    @apply flex items-center;
   }
   .govgr-warning-text__assistive {
     position: absolute !important;

package/src/components/nav.css

@@ -78,7 +78,7 @@
   z-30 sm:z-auto 
   opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
   .govgr-horizontal-nav{
-    @apply sm:border-b-0 static w-full z-1;
+    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
     @apply  block overflow-x-visible !important;
     .govgr-nav-horizontal__container {
         @apply sm:border-b-0;
@@ -95,7 +95,7 @@
   }
 }
 .govgr-nav-horizontal--border{
- @apply sm:border-b sm:border-base150
+ @apply sm:border-b sm:border-base150;
 }
 .govgr-nav-horizontal__container{
   @apply sm:border-b border-base150;
@@ -112,14 +112,13 @@
   @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
   flex flex-wrap flex-col sm:flex-row;
   .govgr-section-break{
-    margin-top:31px !important;
+    margin-top:41px !important;
     @apply sm:flex !important;
     @apply xs:hidden sm:p-0 absolute left-0 right-0;
   }
 }
 .govgr-horizontal-nav__list-item  {
-  @apply text-xl text-base-content
-  xs:py-1 sm:text-base sm:gap-x-6;
+  @apply text-base-content xs:py-1 sm:gap-x-6;
 }
 .govgr-horizontal-nav__list-item-link:focus {
   @apply bg-focus text-base-content outline-none;
@@ -138,7 +137,7 @@
 @apply md:no-underline hover:underline !important;
 }
 .govgr-horizontal-nav__list-item-link--active,.govgr-horizontal-nav__list-item-btn--active {
-  @apply font-semibold text-base-content !important;
+  @apply  text-base-content !important;
   >.govgr-svg-icon {
       fill: var(--color-base-content) !important;
     }
@@ -148,10 +147,6 @@
 .govgr-vertical-nav__list {
   @apply w-full m-0 max-w-5xl static xs:px-3
   flex flex-wrap flex-col;
-  .govgr-section-break{
-    margin-top:31px !important;
-    @apply xs:hidden absolute left-0 right-0;
-  }
 }
 .govgr-vertical-nav__list-item  {
   @apply text-base-content
@@ -177,10 +172,13 @@
 .govgr-vertical-nav__item {
   @apply w-full p-2 !important;
 }
+.govgr-vertical-nav__item--active {
+  @apply font-semibold !important;
+}
 /* ---------- --- */
 
 .govgr-nav-list__menu{
-  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:bg-white z-1 w-full;
+  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-white z-1 w-full;
   .govgr-main-wrapper {
     @apply xs:gap-y-2;
   }

package/src/components/phase-banner.css

@@ -5,6 +5,7 @@
   @apply border-gray300 border-b;
 }
 .govgr-phase-banner__content {
+  font-size: var(--phase-banner__content-font-size);
   @apply table;
 }
 .govgr-phase-banner__content__tag {

package/src/components/radios.css

@@ -13,7 +13,8 @@
   }
 }
 .govgr-radios__label {
-  @apply inline-block py-1 px-2 cursor-pointer text-lg;
+  font-size: var(--radios__label-font-size);
+  @apply inline-block py-1 px-2 cursor-pointer;
 }
 .govgr-radios__input {
   @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl

package/src/components/summary-list.css

@@ -1,7 +1,7 @@
 .govgr-summary-list {
+  font-size: var(--summary-list-font-size);
   @apply m-0 mb-6 sm:mb-8 w-full
-  sm:table sm:w-full sm:table-fixed text-lg
-  ;
+  sm:table sm:w-full sm:table-fixed;
   .govgr-btn {
     @apply m-0 inline-flex;
   }

package/src/components/table.css

@@ -66,6 +66,12 @@
 .govgr-table__row {
   @apply bg-white;
 }
+.govgr-table__row--warning {
+  @apply border-l-4 border-warning;
+  .govgr-table__cell:first-child{
+    @apply pl-2;
+  }
+}
 .govgr-table__cell{
   .govgr-btn {
       @apply mb-0;
@@ -119,6 +125,16 @@
 .govgr-table__header--numeric, .govgr-table__cell--numeric {
   @apply text-right;
 }
+.govgr-table__body--vertical-top {
+  .govgr-table__cell {
+    @apply align-top;
+  }
+}
+.govgr-table__body--vertical-bottom {
+  .govgr-table__cell {
+    @apply align-bottom;
+  }
+}
 .govgr-table__cell--numeric {
   @apply font-normal;
   font-feature-settings: normal;

package/src/components/typography.css

@@ -152,6 +152,7 @@
   @apply focus:text-link-active underline cursor-pointer;
   color: var(--link-color);
   padding: var(--link-padding);
+  font-size: var(--link-font-size);
   &:hover {
     text-decoration-thickness: 2px;
     color: var(--link-color-hover);
@@ -189,8 +190,8 @@
   }
 }
 .govgr-back-link {
-  width: fit-content;
-  @apply text-base-content underline flex items-center mb-4 cursor-pointer;
+  font-size: var(--back-link-font-size);
+  @apply w-fit text-base-content underline flex items-center mb-4 cursor-pointer;
   &:hover {
     text-decoration-thickness: 2px;
   }
@@ -202,7 +203,7 @@
   }
   .govgr-caret--left {
     fill:var(--color-base-content);
-    @apply w-4 h-4 inline-block mr-2;
+    @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
   }
 }
 .govgr-masthead--primary {