@digigov/css 1.0.0-290a96e2 → 1.0.0-47312a12

package/src/components/stepnav.css

@@ -1,5 +1,15 @@
 .govgr-step-nav {
   @apply mb-8 md:mb-12;
+&.govgr-step-nav--dense, .govgr-dense & {
+    @apply mb-4 md:mb-8;
+    .govgr-step-nav__circle {
+      margin-left: 0.1rem;
+      @apply md:w-8 md:h-8;
+    }
+    .govgr-step-nav__accordion__summary {
+      @apply py-3;
+    }
+  }
 }
 .govgr-step-nav__controls {
   @apply text-right;
@@ -14,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);
   }
@@ -154,3 +164,4 @@
     @apply mb-0 mt-1;
   }
 }
+

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/tailwind.config.js

@@ -1,10 +1,16 @@
-const plugin = require('tailwindcss/plugin')
-const tailwindConfig = require('../../tailwind.config.js');
+const plugin = require("tailwindcss/plugin");
+const tailwindConfig = require("../../tailwind.config");
+
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   ...tailwindConfig,
+  content: {
+    files: ["./*.css"],
+    relative: true,
+  },
   plugins: [
-    plugin(function ({ addBase, addUtilities }) {
-      addUtilities(require('../../dist/utilities'), { variants: ['responsive'] })
-    })
+    plugin(function ({ addUtilities }) {
+      addUtilities(require("../../dist/utilities"));
+    }),
   ],
-}
+};

package/src/components/task-list.css

@@ -31,6 +31,14 @@
 
 /* overrides */
 
+.govgr-task-list--dense{
+  .govgr-task-list__item {
+    @apply mb-4 md:mb-6;
+    .govgr-summary-list{
+      @apply mb-4 md:mb-6; 
+    }
+  }
+}
 .govgr-task-list__content {
   .govgr-body {
     @apply mb-2 md:mb-3;

package/src/components/timeline.css

@@ -1,13 +1,22 @@
 .govgr-timeline {
   @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
-}
-.govgr-timeline--spaced {
-  .govgr-timeline__item {
-    @apply mb-10 md:mb-12;
+  &.govgr-timeline--dense, .govgr-dense & {
+    @apply pb-0 border-l-3;
+    .govgr-timeline__item {
+      @apply mb-4 md:mb-6;
+    }
+    .govgr-timeline__heading {
+      @apply mb-2;
+      &::before {
+        content: "";
+        @apply border-b-3;
+      }
+    }
   }
 }
+
 .govgr-timeline__item {
-  @apply mb-8 md:mb-10;
+  @apply mb-10 md:mb-12;
 }
 .govgr-timeline__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
@@ -37,7 +46,6 @@
 }
 
 /* overrides */
-
 .govgr-timeline__content {
   .govgr-hint,
   .govgr-body {

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);
@@ -151,9 +154,12 @@
   @apply md:mb-8 mb-4 text-base-content;
 }
 .govgr-blockquote {
-  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
+  @apply mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
   font-size: var(--blockquote-font-size);
   line-height: var(--blockquote-line-height);
+  &.govgr-blockquote--dense, .govgr-dense & {
+    @apply mt-3 md:mb-6 p-3 border-l-6;
+  } 
 }
 .govgr-body {
   font-size: var(--body-font-size);
@@ -177,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;
@@ -204,6 +213,15 @@
     text-decoration: none !important;
     outline: none;
   }
+  .govgr-heading-xl & ,
+  .govgr-heading-lg & ,
+  .govgr-heading-md & ,
+  .govgr-heading-sm & ,
+  .govgr-body &,
+  .govgr-hint &
+  {
+    font-size: inherit;
+  }
 }
 .govgr-link--no-underline {
   @apply no-underline hover:underline;
@@ -278,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/src/fonts.css

@@ -1 +1 @@
-@import "@fontsource/roboto/index.css"; 
+@import "@fontsource/roboto/index.css";

package/src/index.css

@@ -1,5 +1,3 @@
 @import "./utilities/utilities.css";
 @import "./components/components.css";
 @import "./base/base.css";
-
-

package/src/pages/dropdown.js

@@ -75,7 +75,7 @@ export default function Dropdown() {
       </p>
 
       <details className="govgr-dropdown">
-        <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--arrow">
+        <summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--chevron">
           Ενέργειες
           <svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
             <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
@@ -143,7 +143,7 @@ export default function Dropdown() {
         </details>
 
         <details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
-          <summary className="govgr-dropdown__button govgr-link  govgr-dropdown__button--arrow">
+          <summary className="govgr-dropdown__button govgr-link  govgr-dropdown__button--chevron">
             Ενέργειες
             <svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
               <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />

package/src/utilities/index.css

@@ -582,4 +582,4 @@
 }
 .govgr-gap-xl-12 {
   @apply xl:gap-12;
-}
+}

package/src/utilities/postcss.config.js

@@ -1,20 +1,19 @@
-module.exports = {
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss')('./src/utilities/tailwind.config.js'),
-    require('postcss-nested')({
-      "bubble": [
-        "screen"
-      ]
-    }),
-    require('autoprefixer'),
-    require('cssnano')({
-      "preset": [
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/utilities/tailwind.config.js"),
+    require("autoprefixer"),
+    require("cssnano")({
+      preset: [
         "default",
         {
-          "mergeRules": false
-        }
-      ]
+          mergeRules: false,
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
+
+module.exports = config;

package/src/utilities/tailwind.config.js

@@ -1 +1,10 @@
-module.exports = require('../../tailwind.config.js');
+const tailwindConfig = require("../../tailwind.config");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...tailwindConfig,
+  content: {
+    files: ["./*.css"],
+    relative: true,
+  },
+};

package/src/utilities/utilities.css

@@ -2,7 +2,7 @@
 @layer utilities {
   .govgr-m-0 {
     @apply m-0 !important;
-  }  
+  }
   .govgr-m-1 {
     @apply m-1 !important;
   }
@@ -41,7 +41,7 @@
   }
   .govgr-mt-0 {
     @apply mt-0 !important;
-  }  
+  }
   .govgr-mt-1 {
     @apply mt-1 !important;
   }
@@ -80,7 +80,7 @@
   }
   .govgr-mb-0 {
     @apply mb-0 !important;
-  }  
+  }
   .govgr-mb-1 {
     @apply mb-1 !important;
   }
@@ -119,7 +119,7 @@
   }
   .govgr-ml-0 {
     @apply ml-0 !important;
-  }  
+  }
   .govgr-ml-1 {
     @apply ml-1 !important;
   }
@@ -158,7 +158,7 @@
   }
   .govgr-mr-0 {
     @apply mr-0 !important;
-  }  
+  }
   .govgr-mr-1 {
     @apply mr-1 !important;
   }
@@ -197,7 +197,7 @@
   }
   .govgr-p-0 {
     @apply p-0 !important;
-  }  
+  }
   .govgr-p-1 {
     @apply p-1 !important;
   }
@@ -236,7 +236,7 @@
   }
   .govgr-pt-0 {
     @apply pt-0 !important;
-  }  
+  }
   .govgr-pt-1 {
     @apply pt-1 !important;
   }
@@ -275,7 +275,7 @@
   }
   .govgr-pb-0 {
     @apply pb-0 !important;
-  }  
+  }
   .govgr-pb-1 {
     @apply pb-1 !important;
   }
@@ -314,7 +314,7 @@
   }
   .govgr-pl-0 {
     @apply pl-0 !important;
-  }  
+  }
   .govgr-pl-1 {
     @apply pl-1 !important;
   }
@@ -353,7 +353,7 @@
   }
   .govgr-pr-0 {
     @apply pr-0 !important;
-  }  
+  }
   .govgr-pr-1 {
     @apply pr-1 !important;
   }

package/tailwind.config.js

@@ -64,14 +64,8 @@ const allColors = [
   "shadow600",
 ];
 
-const buildOnly = !process.env["DIGIGOV_CSS_BUILD"]
-  ? {
-    mode: "jit",
-  }
-  : {};
-
 const colorVariables = allColors.reduce((colorVars, color) => {
-  if (['transparent', 'currentColor'].includes(color)) {
+  if (["transparent", "currentColor"].includes(color)) {
     colorVars[color] = color;
   } else {
     colorVars[color] = ({ opacityVariable, opacityValue }) => {
@@ -87,13 +81,17 @@ const colorVariables = allColors.reduce((colorVars, color) => {
   return colorVars;
 }, {});
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  ...buildOnly,
-  darkMode: 'class',
+  darkMode: "class",
+  content: {
+    files: ["./src/*.css"],
+    relative: true,
+  },
   themes: {
-    light: require.resolve('./defaultTheme'),
+    light: require.resolve("./defaultTheme"),
   },
-  defaultTheme: 'light',
+  defaultTheme: "light",
   theme: {
     colors: colorVariables,
     container: {
@@ -111,11 +109,11 @@ module.exports = {
       xl: "1280px",
       "2xl": "1280px",
       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' },
+      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],
@@ -126,8 +124,8 @@ module.exports = {
       },
       width: {
         fit: "fit-content",
-        '2xl': '42rem',
-        '4xl': '56rem',
+        "2xl": "42rem",
+        "4xl": "56rem",
       },
       maxWidth: {
         fit: "fit-content",
@@ -158,6 +156,7 @@ module.exports = {
         1: 1,
         2: 2,
         3: 3,
+        5: 5,
       },
       opacity: {
         85: "0.85",
@@ -168,18 +167,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',
-      }
-    },
-  },
-  variants: {
-    extend: {
-      textDecoration: ["active"],
-      backgroundColor: ["active"],
-      borderColor: ["active"],
     },
   },
   plugins: [plugin(themesPlugin)],