@digigov/css 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "4.4.0",
-    "@digigov/cli-build-tailwind": "0.9.1",
+    "@digigov/cli-build-tailwind": "0.9.2",
     "publint": "0.1.8"
   }
 }

package/src/components/card.css

@@ -16,7 +16,9 @@
 }
 .govgr-card__text {
   word-break: break-word;
-  @apply text-base lg:text-xl text-lg;
+  @apply text-base;
+  font-size: var(--card__text-font-size);
+  line-height: var(--card__text-line-height);
 }
 .govgr-card__body {
   @apply flex flex-col gap-3 md:gap-4 h-full;

package/src/components/form.css

@@ -48,6 +48,7 @@
 }
 .govgr-input, .govgr-select, .govgr-textarea{
   @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-white;
+  text-indent: 2px;
   &:focus {
     outline: 4px solid var(--color-focus);
     outline-offset: 0;
@@ -67,7 +68,7 @@
     @apply h-fit text-lg;
   }
 }
-.govgr-date-input {
+.govgr-date-input, .govgr-single-character-input--container {
   @apply flex;
   .form-group {
     @apply mr-4;
@@ -91,7 +92,11 @@
 .govgr-input--width-2 {
   max-width: 5.4ex;
 }
-.govgr-date-input__item {
+.govgr-otp-input--width {
+  max-width: 3.1ex;
+  @apply text-center pl-0 pr-0;
+}
+.govgr-date-input__item, .govgr-otp-input__item {
   @apply mr-4; 
 }
 

package/src/components/nav.css

@@ -9,21 +9,22 @@
       fill: var(--color-link) !important;
     }
   }
-  .govgr-horizontal-nav {
+  .govgr-nav {
     @apply fixed;
   }
-  .govgr-horizontal-nav__list {
+  .govgr-nav__list {
     @apply sm:flex !important;
-    @apply sm:w-min xs:hidden;
+    @apply sm:w-min xs:hidden 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-horizontal-nav__list-item {
-    @apply sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2;
+  .govgr-nav__list-item {
+    @apply text-base-content sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2 xs:py-1 sm:gap-x-6;
     .govgr-svg-icon {
       fill: var(--color-white) !important;
     }
   }
-  .govgr-horizontal-nav__list-item-link,
-  .govgr-horizontal-nav__list-item-btn {
+  .govgr-nav__list-item-link,
+  .govgr-nav__list-item-btn {
     @apply underline xs:text-white text-lg sm:flex !important;
     @apply xs:hidden items-center xs:gap-1;
     &:focus {
@@ -33,7 +34,7 @@
       }
     }
   }
-  .govgr-horizontal-nav__list--active {
+  .govgr-nav__list--active {
     @apply sm:bg-secondary600 !important;
   }
 }
@@ -76,25 +77,48 @@
     transform-origin: 3px 16px;
   }
 }
-/* --- HORIZONTAL NAV ---  */
-.govgr-horizontal-nav {
+
+/* --- NAV ---  */
+.govgr-nav {
   @apply sm:block !important;
-  @apply xs:hidden w-3/4 sm:w-full h-full bg-white
-   sm:h-auto sm:bg-white xs:text-content
-  z-30 sm:z-auto 
+  @apply xs:hidden w-3/4 sm:w-full h-full bg-white sm:h-auto xs:text-content 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:mt-2 sm:border-b-0 static w-full z-1;
+}
+.govgr-nav--fixed {
+  @apply fixed sm:relative;
+}
+.govgr-nav--border {
+  @apply sm:border-b sm:border-base150;
+}
+.govgr-nav--open {
+  @apply xs:block;
+}
+.govgr-nav--hidden {
+  @apply hidden !important;
+}
+.govgr-nav__list-item {
+  @apply text-base-content
+  xs:py-1;
+}
+.govgr-nav--horizontal {
+  .govgr-nav--horizontal {
+    @apply sm:mt-2 sm:border-b-0 static w-full z-1 sm:order-1;
     @apply block overflow-x-visible;
-    .govgr-nav-horizontal__container {
-      @apply sm:border-b-0;
-    }
-    .govgr-horizontal-nav__list {
+    .govgr-nav__list {
       @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
     }
   }
-  .govgr-horizontal-nav--order {
-    @apply sm:order-1;
+  .govgr-nav__list {
+    @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: 41px !important;
+      @apply sm:flex !important;
+      @apply xs:hidden sm:p-0 absolute left-0 right-0;
+    }
+  }
+  .govgr-nav__list-item {
+    @apply sm:gap-x-6;
   }
   .govgr-drawer__close-icon {
     @apply sm:hidden mt-3;
@@ -103,42 +127,30 @@
     @apply mb-0;
   }
 }
-.govgr-nav-horizontal--fixed {
-  @apply fixed sm:relative;
-}
-.govgr-nav-horizontal--border {
-  @apply sm:border-b sm:border-base150;
-}
-.govgr-nav-horizontal__container {
-  @apply sm:border-b border-base150;
-}
-.govgr-horizontal-nav--open {
-  @apply xs:block;
-}
-.govgr-horizontal-nav--hidden {
-  @apply hidden !important;
+.govgr-nav--vertical {
+  .govgr-nav--vertical {
+    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
+    @apply block overflow-x-visible;
+  }
+  .govgr-nav__list {
+    @apply w-full m-0 max-w-5xl static xs:px-3
+    flex flex-wrap flex-col;
+  }
+  .govgr-drawer__close-icon {
+    @apply sm:hidden mt-3;
+  }
+  .govgr-heading-m {
+    @apply mb-0;
+  }
 }
-
-.govgr-horizontal-nav__list,
+.govgr-nav__list,
 .govgr-main-wrapper {
   .govgr-drawer__heading {
     @apply flex-row-reverse;
   }
 }
-.govgr-horizontal-nav__list {
-  @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: 41px !important;
-    @apply sm:flex !important;
-    @apply xs:hidden sm:p-0 absolute left-0 right-0;
-  }
-}
-.govgr-horizontal-nav__list-item {
-  @apply text-base-content xs:py-1 sm:gap-x-6;
-}
-.govgr-horizontal-nav__list-item-link,
-.govgr-horizontal-nav__list-item-btn {
+.govgr-nav__list-item-link,
+.govgr-nav__list-item-btn {
   @apply md:no-underline !important;
   .govgr-svg-icon {
     @apply ml-0.5;
@@ -151,8 +163,8 @@
     @apply underline !important;
   }
 }
-.govgr-horizontal-nav__list-item-link--active,
-.govgr-horizontal-nav__list-item-btn--active {
+.govgr-nav__list-item-link--active,
+.govgr-nav__list-item-btn--active {
   @apply text-base-content !important;
   @apply font-semibold;
   > .govgr-svg-icon {
@@ -160,26 +172,36 @@
   }
 }
 
-/* --- VERTICAL  NAV --- */
-.govgr-vertical-nav__list {
-  @apply w-full m-0 max-w-5xl static xs:px-3
-  flex flex-wrap flex-col;
-}
-.govgr-vertical-nav__list-item {
-  @apply text-base-content
-  xs:py-1;
-}
-.govgr-vertical-nav-list__menu {
+/* --- NAV-MENU --- */
+.govgr-nav-menu {
   @apply flex z-1 w-full;
 }
-.govgr-vertical-nav-list__content-list {
-  @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+.govgr-nav-menu--hidden {
+  @apply hidden;
 }
-.govgr-vertical-nav-list__container-title {
-  @apply mt-3;
+.govgr-nav-menu--horizontal {
+  @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-white;
+  .govgr-main-wrapper {
+    @apply xs:gap-y-2;
+  }
+  .govgr-nav-menu__content-list {
+    @apply sm:grid-cols-2 sm:grid-rows-1 !important;
+    @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+  }
 }
-.govgr-vertical-nav-list__container-title-heading {
-  @apply hidden;
+.govgr-nav-menu--vertical {
+  .govgr-nav-menu__content-list {
+    @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
+  }
+  .govgr-nav-menu__container-title {
+    @apply mt-3;
+  }
+  .govgr-nav-menu__container-title-heading {
+    @apply hidden;
+  }
+}
+.govgr-nav-menu__content-list-item {
+  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
 }
 
 /* --- VERTICAL LIST --- */
@@ -192,21 +214,3 @@
 .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:mt-3 sm:bg-white z-1 w-full;
-  .govgr-main-wrapper {
-    @apply xs:gap-y-2;
-  }
-}
-.govgr-nav-list__menu-hidden {
-  @apply hidden;
-}
-.govgr-nav-list__content-list {
-  @apply sm:grid-cols-2 sm:grid-rows-1 !important;
-  @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
-}
-.govgr-nav-list__content-list-item {
-  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
-}

package/src/components/panel.css

@@ -7,8 +7,16 @@
   print:border-4 print:border-success print:text-base-content print:bg-white;
 }
 .govgr-panel__title {
-  @apply text-4xl md:text-5xl print:text-4xl mt-0 mb-6 font-bold;
+  @apply mx-auto mt-0;
+  font-size: var(--panel__title-font-size);
+  line-height:var(--panel__title-line-height);
+  margin-bottom:var(--panel__title-margin-bottom);
+  font-weight: var(--panel__title-font-weight);
+  letter-spacing: var(--panel__title-letter-spacing);
 }
 .govgr-panel__body {
-  @apply text-2xl md:text-4xl print:text-2xl;
+  font-size: var(--panel__body-font-size);
+  line-height:var(--panel__body-line-height);
+  margin:var(--panel__body-margin);
+  letter-spacing: var(--panel__body-letter-spacing);
 }

package/src/pages/form.js

@@ -18,13 +18,13 @@ export default function Home() {
           </div>
         </header>
       </div>
-      <nav className="govgr-horizontal-nav govgr-horizontal-nav--active">
-        <div className="govgr-horizontal-nav__container">
-          <a className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active" href="/"> Αρχική </a>
-          <a className="govgr-horizontal-nav__item" href=""> Καταχώρηση φόρμας </a>
-          <a className="govgr-horizontal-nav__item" href=""> Νέα</a>
-          <a className="govgr-horizontal-nav__item" href=""> Επικοινωνία </a>
-        </div>
+      <nav className="govgr-nav govgr-nav--horizontal">
+        <ul className="govgr-nav__list">
+          <a className="govgr-nav__list-item-link govgr-nav__list-item-link--active" href="/"> Αρχική </a>
+          <a className="govgr-nav__list-item-link" href=""> Καταχώρηση φόρμας </a>
+          <a className="govgr-nav__list-item-link" href=""> Νέα</a>
+          <a className="govgr-nav__list-item-link" href=""> Επικοινωνία </a>
+        </ul>
       </nav>
       <div className="govgr-width-container">
         <div className="govgr-main-wrapper">

package/src/pages/index.js

@@ -19,13 +19,13 @@ export default function Home() {
           <svg className="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <rect id="govgr-burger-icon__line-1" width="20" height="3.3" /><rect id="govgr-burger-icon__line-2" width="20" height="3.3" /><rect id="govgr-burger-icon__line-3" width="20" height="3.3" /></svg>
         </div>
       </header>
-      <nav className="govgr-horizontal-nav">
-        <div className="govgr-horizontal-nav__container">
-          <a href="" className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active"> Home </a>
-          <a href="#" className="govgr-horizontal-nav__item"> Form registration </a>
-          <a href="#" className="govgr-horizontal-nav__item"> News </a>
-          <a href="#" className="govgr-horizontal-nav__item"> Contact </a>
-        </div>
+      <nav className="govgr-nav govgr-nav--horizontal">
+        <ul className="govgr-nav__list">
+          <a href="" className="govgr-nav__list-item-link govgr-nav__list-item-link--active"> Home </a>
+          <a href="#" className="govgr-nav__list-item-link"> Form registration </a>
+          <a href="#" className="govgr-nav__list-item-link"> News </a>
+          <a href="#" className="govgr-nav__list-item-link"> Contact </a>
+        </ul>
       </nav>
 
       <svg className="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" >