@digigov/css 1.0.3 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -48,11 +48,11 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.1",
+    "@digigov/postcss-banner": "1.0.2",
     "@digigov/cli-build-tailwind": "1.0.1",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.1"
+    "@digigov/cli": "1.1.0"
   },
   "dependencies": {
     "@fontsource/roboto": "4.4.0",

package/src/components/footer.css

@@ -4,7 +4,7 @@
   print:py-2 print:bg-white print:border-t-2;
 }
 .govgr-footer__info {
-  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
+  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-center md:justify-between box-border ;
 }
 .govgr-footer__info-section {
   @apply mx-2 md:mx-4 mb-6 print:mb-4;

package/src/components/misc.css

@@ -1,25 +1,41 @@
-.tooltip {
-  @apply inline-block relative m-0 p-0 underline w-min cursor-pointer;
+.govgr-tooltip {
+  @apply
+  /* inline-block */
+  relative m-0 p-0 underline w-min cursor-pointer;
   text-decoration-style: dotted;
-  .tooltiptext {
-    @apply hidden opacity-0 transition-all;
+
+  .govgr-tooltiptext {
+    @apply hidden opacity-0 transition-all text-left;
     backdrop-filter: blur(2px);
   }
+
   &:hover {
-    .tooltiptext {
-      @apply block opacity-100 absolute w-64 -ml-32 top-8 left-1/2 px-4 py-2 z-1;
-      @apply text-white rounded-sm bg-base-content bg-opacity-90 shadow;
-
-      &::after {
-        content: "";
-        @apply -top-3 left-1/2 -mr-1 border-6 border-base-content opacity-85 absolute;
-        border-right-color: transparent;
-        border-left-color: transparent;
-        border-top-color: transparent;
-      }
+    &::after {
+      content: "";
+      @apply top-5 md:-mr-1 border-6 border-base-content opacity-85 absolute;
+      border-right-color: transparent;
+      border-left-color: transparent;
+      border-top-color: transparent;
+      left: calc(50% - 6px);
+      @apply md:left-1/2;
+    }
+
+    .govgr-tooltiptext {
+      @apply block opacity-100 absolute md:w-64 md:-ml-32 top-8 md:left-1/2 px-4 py-2 z-1
+      text-base-100 rounded-sm bg-base-content bg-opacity-90 shadow;
+
+    }
+  }
+}
+
+@media (max-width: 767.9px) {
+  .govgr-tooltip:hover {
+    .govgr-tooltiptext {
+      width: calc(100vw - 3.5rem);
     }
   }
 }
+
 .govgr-cookie-banner {
   @apply bg-base-200;
 }
@@ -31,12 +47,15 @@ div[class*="govgr-grid__col-span"] {
     @apply mb-0;
   }
 }
+
 .govgr-image-logo {
   @apply h-10;
 }
+
 .govgr-image-logo--light {
   @apply h-10;
 }
+
 .govgr-image-logo--dark {
   @apply h-10 hidden;
-}
+}

package/src/components/typography.css

@@ -68,6 +68,48 @@
   font-weight: var(--caption-md-font-weight);
   letter-spacing: var(--caption-md-letter-spacing);
 }
+.govgr-body {
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  margin-bottom: var(--body-margin-bottom);
+  color: var(--body-color);
+  letter-spacing: var(--body-letter-spacing);
+}
+.govgr-body-lg {
+  font-size: var(--body-lg-font-size);
+  line-height: var(--body-lg-line-height);
+}
+.govgr-body-sm {
+  font-size: var(--body-sm-font-size);
+  line-height: var(--body-sm-line-height);
+}
+.govgr-hint {
+  font-size: var(--hint-font-size);
+  line-height: var(--hint-line-height);
+  margin-bottom: var(--hint-margin-bottom);
+  color: var(--hint-color);
+  letter-spacing: var(--hint-letter-spacing);
+}
+.govgr-background-dark, .govgr-masthead--primary {
+  .govgr-hint {
+    @apply opacity-70 text-white print:text-base-content;
+  }
+}
+.govgr-code {
+  @apply text-sm sm:text-base bg-base-100;
+}
+.govgr-code--attr {
+  @apply text-info;
+}
+.govgr-code--string {
+  @apply text-success;
+}
+.govgr-code--keyword {
+  @apply text-warning;
+}
+.govgr-code--name {
+  @apply text-tertiary;
+}
 .govgr-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
 }
@@ -92,6 +134,12 @@
 .govgr-\!-font-size-72 {
   @apply text-6xl md:text-7xl !important;
 }
+.govgr-\!-font-weight-regular {
+  @apply font-normal !important;
+}
+.govgr-\!-font-weight-bold {
+  @apply font-bold !important;
+}
 .govgr-list {
   @apply list-none list-outside mt-4;
   font-size: var(--list-font-size);
@@ -187,12 +235,7 @@
   @apply break-words;
 }
 
-.govgr-\!-font-weight-regular {
-  @apply font-normal !important;
-}
-.govgr-\!-font-weight-bold {
-  @apply font-bold !important;
-}
+
 .govgr-link {
   @apply focus:text-link-active underline cursor-pointer;
   color: var(--link-color);
@@ -308,3 +351,10 @@ button.govgr-link {
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
   }
 }
+
+.govgr-code-block__container {
+  @apply p-4 bg-base-200 border border-base-300 w-full;
+}
+.govgr-code-block__content {
+  @apply text-sm sm:text-base;
+}

package/tailwind.config.js

@@ -80,7 +80,11 @@ const colorVariables = allColors.reduce((colorVars, color) => {
   }
   return colorVars;
 }, {});
-
+const screens = require('./screens.json');
+const screensWithPixels = Object.keys(screens).reduce((screenVars, screen) => {
+  screenVars[screen] = `${screens[screen]}px`;
+  return screenVars;
+},{})
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
@@ -102,11 +106,8 @@ module.exports = {
       lg: "1.1875rem",
     },
     screens: {
-      xs: "0px",
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
+        ...screensWithPixels,
+
       "2xl": "1280px",
       print: { raw: "print" },
       xsOnly: { min: "0px", max: "639.98px" },