@digigov/css 0.31.0 → 0.32.0

package/package.json

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

package/src/components/bottom-info.css

@@ -0,0 +1,6 @@
+.govgr-bottom-info__container {
+  @apply w-full bg-gray50 border-t border-gray200 py-2;
+}
+/* .govgr-bottom-info__content {
+
+} */

package/src/components/hidden.css

@@ -0,0 +1,30 @@
+.govgr-hidden-xs--up {
+  @apply xs:hidden;
+}
+.govgr-hidden-sm--up {
+  @apply sm:hidden;
+}
+.govgr-hidden-md--up {
+  @apply md:hidden;
+}
+.govgr-hidden-lg--up {
+  @apply lg:hidden;
+}
+.govgr-hidden-xl--up {
+  @apply xl:hidden;
+}
+.govgr-hidden-xs {
+  @apply xsOnly:hidden;
+}
+.govgr-hidden-sm {
+  @apply smOnly:hidden;
+}
+.govgr-hidden-md {
+  @apply mdOnly:hidden;
+}
+.govgr-hidden-lg {
+  @apply lgOnly:hidden;
+}
+.govgr-hidden-xl {
+  @apply xlOnly:hidden;
+}

package/src/components/index.css

@@ -1,6 +1,7 @@
 @import "./accordion.css";
 @import "./autocomplete.css";
 @import "./button.css";
+@import "./bottom-info.css";
 @import "./form.css";
 @import "./checkboxes.css";
 @import "./dropdown.css";
@@ -40,3 +41,4 @@
 @import "./stepnav.css";
 @import "./dev-theme.css";
 @import "./kitchensink.css";
+@import "./hidden.css";

package/src/components/nav.css

@@ -44,15 +44,6 @@
     @apply transition-all;
   }
 }
-.govgr-svg-icon.govgr-burger-icon--hidden-s {
-  @apply sm:hidden;
-}
-.govgr-svg-icon.govgr-burger-icon--hidden-m {
-  @apply md:hidden;
-}
-.govgr-svg-icon.govgr-burger-icon--hidden-l {
-  @apply lg:hidden;
-}
 #govgr-burger-icon__line-1 {
   x:2px;
   y:3px;
@@ -79,12 +70,12 @@
     transform-origin: 3px 16px
   }
 }
-/* --- HORIZONTAL ---  */
+/* --- HORIZONTAL NAV ---  */
 .govgr-horizontal-nav {
   @apply sm:block !important;
   @apply xs:hidden  fixed sm:relative w-3/4 sm:w-full h-full bg-white
    sm:h-auto sm:bg-white xs:text-content
-  z-30 sm:z-auto sm:border-b sm:border-base150
+  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;
@@ -103,6 +94,9 @@
     @apply mb-0;
   }
 }
+.govgr-nav-horizontal--border{
+ @apply sm:border-b sm:border-base150
+}
 .govgr-nav-horizontal__container{
   @apply sm:border-b border-base150;
 }
@@ -150,7 +144,33 @@
     }
 }
 
-/* --- VERTICAL --- */
+/* --- VERTICAL  NAV --- */
+.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
+  xs:py-1;
+}
+.govgr-vertical-nav-list__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-vertical-nav-list__container-title{
+  @apply mt-3;
+}
+.govgr-vertical-nav-list__container-title-heading{
+  @apply hidden;
+}
+
+/* --- VERTICAL LIST --- */
 .govgr-vertical-nav {
   @apply flex flex-wrap;
 }
@@ -158,12 +178,16 @@
   @apply w-full p-2 !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;
   .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; 
@@ -172,4 +196,3 @@
 .govgr-nav-list__content-list-item {
  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
 }
-

package/tailwind.config.js

@@ -68,14 +68,14 @@ const buildOnly = !process.env["DIGIGOV_CSS_BUILD"]
   : {};
 
 const colorVariables = allColors.reduce((colorVars, color) => {
-  if(['transparent', 'currentColor'].includes(color)) {
+  if (['transparent', 'currentColor'].includes(color)) {
     colorVars[color] = color;
   } else {
-    colorVars[color] = ({opacityVariable, opacityValue}) => {
-      if(opacityValue !== undefined) {
+    colorVars[color] = ({ opacityVariable, opacityValue }) => {
+      if (opacityValue !== undefined) {
         return `rgba(var(--color-${color}-rgb), ${opacityValue})`;
       }
-      if(opacityVariable !== undefined) {
+      if (opacityVariable !== undefined) {
         return `rgba(var(--color-${color}-rgb), var(${opacityVariable}, 1))`;
       }
       return `rgb(var(--color-${color}-rgb))`;
@@ -88,7 +88,7 @@ module.exports = {
   ...buildOnly,
   darkMode: 'class',
   themes: {
-    light: require.resolve('./defaultTheme'), 
+    light: require.resolve('./defaultTheme'),
   },
   defaultTheme: 'light',
   theme: {
@@ -107,7 +107,12 @@ module.exports = {
       lg: "1024px",
       xl: "1280px",
       "2xl": "1280px",
-      print: {raw: "print"},
+      print: { raw: "print" },
+      xsOnly: { 'min': '0px', 'max': '639.98px' },
+      smOnly: { 'min': '640px', 'max': '767.98px' },
+      mdOnly: { 'min': '768px', 'max': '1023.98px' },
+      lgOnly: { 'min': '1024px', 'max': '1279.98px' },
+      xlOnly: { 'min': '1280px', 'max': '1535.98px' },
     },
     fontFamily: {
       sans: ["Roboto", ...defaultTheme.fontFamily.sans],
@@ -118,8 +123,8 @@ module.exports = {
       },
       width: {
         fit: "fit-content",
-        '2xl':'42rem' ,
-        '4xl':'56rem' ,
+        '2xl': '42rem',
+        '4xl': '56rem',
       },
       maxWidth: {
         fit: "fit-content",
@@ -158,6 +163,11 @@ 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',
+      }
     },
   },
   variants: {