@digigov/css 2.0.0-462194bf → 2.0.0-60d81ed8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "2.0.0-462194bf",
+  "version": "2.0.0-60d81ed8",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -39,7 +39,7 @@
     ]
   },
   "devDependencies": {
-    "@digigov/cli": "1.1.0",
+    "@digigov/cli": "1.1.2-60d81ed8",
     "autoprefixer": "10.4.16",
     "cssnano": "4.1.10",
     "postcss": "8.4.4",
@@ -49,13 +49,13 @@
     "rtlcss": "3.0.0",
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
-    "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.4",
-    "@digigov/cli-build-tailwind": "1.0.1",
+    "next": "13.1.1",
+    "@digigov/postcss-banner": "1.0.5-60d81ed8",
+    "@digigov/cli-build-tailwind": "1.0.2-60d81ed8",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
     "stylelint": "15.11.0",
-    "stylelint-plugin-digigov": "1.1.0-462194bf",
+    "stylelint-plugin-digigov": "1.1.0-60d81ed8",
     "prettier": "3.2.5"
   },
   "dependencies": {

package/postcss.config.js

@@ -1,3 +1,4 @@
+
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {

package/src/components/accordion.css

@@ -1,4 +1,5 @@
 .ds-accordion {
+  @apply mb-4 md:mb-8;
   &.ds-accordion--no-border {
     .ds-accordion__section {
       @apply border-0 !important;
@@ -122,7 +123,10 @@
 
 .ds-accordion__section-summary {
   .ds-hint {
-    @apply mb-0 mt-1;
+    @apply mb-0;
+  }
+  > *[class^="ds-"]:not(:last-child) {
+    @apply mb-1;
   }
 }
 .ds-accordion__section-heading {

package/src/components/admin-header.css

@@ -1,10 +1,7 @@
 .ds-admin-header {
-  @apply bg-primary print:bg-white border-b-8 print:border-b-2 border-tertiary;
-  border-bottom-style: solid;
 }
 .ds-admin-header__content {
-  @apply px-4 py-2 mx-auto max-w-full w-full flex justify-between items-center
-  flex-wrap sm:flex-nowrap print:px-0 gap-3;
+  @apply max-w-full !important;
 }
 
 /* overrides */
@@ -16,19 +13,4 @@
   .ds-dropdown__button.ds-link {
     @apply text-lg text-white focus:text-base-content print:text-base-800 text-right;
   }
-  .ds-link {
-    &:hover {
-      .ds-svg-icon {
-        fill: var(--color-white);
-      }
-    }
-    &:focus {
-      .ds-svg-icon {
-        fill: var(--color-link-active);
-      }
-    }
-    .ds-svg-icon {
-      fill: var(--color-white);
-    }
-  }
 }

package/src/components/admin-layout.css

@@ -1,7 +1,4 @@
-.ds-admin-layout-wrapper {
-  display: flex;
-  flex-flow: column wrap;
-  min-height: 100vh;
+.ds-admin-layout {
 }
 .ds-admin-top-section {
   &.ds-admin-top-section--secondary {
@@ -12,8 +9,9 @@
   }
 }
 .ds-admin-main {
-  @apply lg:col-span-8 md:col-span-7;
 }
 .ds-admin-aside {
-  @apply lg:col-span-4 md:col-span-5 print:order-1;
+  &.ds-aside {
+    @apply block;
+  }
 }

package/src/components/blockquote.common.css

@@ -0,0 +1,14 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-blockquote {
+      @apply mb-4 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
+    }
+    .util-blockquote-text {
+      font-size: var(--blockquote-font-size);
+      line-height: var(--blockquote-line-height);
+    }
+    .util-blockquote--dense {
+        @apply mb-3 md:mb-6 p-3 border-l-6;
+    }
+}

package/src/components/blockquote.css

@@ -0,0 +1,9 @@
+@import './blockquote.common.css';
+
+.ds-blockquote {
+    @apply util-blockquote util-blockquote-text;
+    &.ds-blockquote--dense,
+    .ds-dense & {
+      @apply util-blockquote--dense;
+    }
+  }

package/src/components/blockquote.native.css

@@ -0,0 +1,11 @@
+@import './blockquote.common.css';
+
+.ds-blockquote {
+  @apply util-blockquote;
+}
+.ds-blockquote__text {
+  @apply util-blockquote-text;
+}
+.ds-blockquote--dense {
+  @apply util-blockquote--dense;
+}

package/src/components/breadcrumbs.css

@@ -1,5 +1,5 @@
 .ds-breadcrumbs {
-  @apply block font-normal text-base-content mt-4 mb-2;
+  @apply block font-normal text-base-content mb-2 md:mb-4;
 }
 .ds-breadcrumbs__list {
   @apply block m-0 p-0 list-none;
@@ -12,8 +12,12 @@
 .ds-breadcrumbs__list-item {
   @apply inline-block relative mb-1 ml-2 pl-4 float-left;
   font-size: var(--breadcrumbs__list-item-font-size);
+  &[aria-current='page'] {
+    @apply font-semibold;
+  }
   &::before {
-    @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;
+    @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;
     content: '';
     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>");
   }
@@ -47,4 +51,7 @@
     text-decoration: none;
     outline: none;
   }
+  &.ds-breadcrumbs__link--inactive {
+    @apply no-underline;
+  }
 }

package/src/components/button.common.css

@@ -0,0 +1,62 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable digigov/nest-related-rules */
+/* stylelint-disable digigov/enforce-class-selector-namespace */
+@tailwind utilities;
+
+@layer utilities {
+  .util-btn {
+    @apply m-0 mb-4 md:mb-8 flex items-center;
+    border-radius: var(--btn-border-radius);
+    padding-right: var(--btn-padding-x);
+    padding-left: var(--btn-padding-x);
+    padding-top: var(--btn-padding-y);
+    padding-bottom: var(--btn-padding-y);
+  }
+  .util-btn-text {
+    @apply text-white font-medium no-underline;
+    font-size: var(--btn-font-size);
+    letter-spacing: var(--letter-spacing-wide);
+    color: var(--color-base-100);
+  }
+  .util-btn-primary {
+    /* @apply print:border-2 print:border-success print:shadow-none; */
+    box-shadow: var(--btn-primary-box-shadow);
+    background-color: var(--btn-primary-background-color);
+  }
+  .util-btn-primary-text {
+    color: var(--btn-primary-color);
+  }
+  .util-btn-secondary {
+    /* @apply print:border-2 print:border-base-700 print:shadow-none; */
+    box-shadow: var(--btn-secondary-box-shadow);
+    background-color: var(--btn-secondary-background-color);
+  }
+  .util-btn-secondary-text {
+    color: var(--btn-secondary-color) !important;
+  }
+  .util-btn-warning {
+    /* @apply print:border-2 print:border-error print:shadow-none; */
+    box-shadow: var(--btn-warning-box-shadow);
+    background-color: var(--btn-warning-background-color);
+  }
+  .util-btn-warning-text {
+    color: var(--btn-warning-color);
+  }
+
+  .util-btn--dense {
+    --btn-padding-y: 0.375rem;
+    --btn-padding-x: 0.75rem;
+    @apply min-h-6;
+  }
+  .util-btn--disabled {
+    opacity: 0.5;
+  }
+  .util-btn--disabled-text {
+    @apply print:text-base-400;
+  }
+  .util-btn-cta {
+  }
+  .util-btn-cta-text {
+    font-size: var(--btn-cta-font-size);
+  }
+}

package/src/components/button.css

@@ -1,14 +1,9 @@
+@import './button.common.css';
 .ds-btn,
 .ds-btn[type='submit'],
 .ds-btn[type='button'],
 .ds-btn[type='reset'] {
-  @apply no-underline font-medium cursor-pointer 
-  m-0 mb-8 w-max min-h-10 md:min-h-12 
-  flex gap-x-3 items-center;
-  border-radius: var(--btn-border-radius);
-  padding: var(--btn-padding);
-  letter-spacing: var(--btn-letter-spacing);
-  font-size: var(--btn-font-size);
+  @apply util-btn util-btn-text min-h-10 md:min-h-12 w-max cursor-pointer gap-x-3;
   &:focus {
     box-shadow:
       0 0 0 2px var(--color-white),
@@ -18,10 +13,10 @@
   &:focus-within {
     @apply outline-none;
   }
+
   &.ds-btn--dense,
   .ds-dense & {
-    --btn-padding: 0.375rem 0.75rem;
-    @apply min-h-8;
+    @apply util-btn--dense;
     &:focus {
       box-shadow:
         0 0 0 2px var(--color-white),
@@ -34,12 +29,9 @@
 .ds-btn-primary[type='submit'],
 .ds-btn-primary[type='button'],
 .ds-btn-primary[type='reset'] {
-  @apply hover:no-underline
-  print:border-2 print:border-success print:shadow-none;
-  box-shadow: var(--btn-primary-box-shadow);
-  background-color: var(--btn-primary-background-color);
-  color: var(--btn-primary-color);
+  @apply util-btn-primary util-btn-primary-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-primary-background-color-hover);
     color: var(--btn-primary-color-hover);
   }
@@ -48,8 +40,7 @@
   }
 }
 .ds-btn-cta {
-  @apply py-4 print:pr-2;
-  font-size: var(--btn-cta-font-size);
+  @apply py-4 print:pr-2 mb-8 util-btn-cta-text;
   &.ds-btn--dense,
   .ds-dense & {
     @apply py-3 px-4;
@@ -59,12 +50,9 @@
 .ds-btn-secondary[type='submit'],
 .ds-btn-secondary[type='button'],
 .ds-btn-secondary[type='reset'] {
-  @apply hover:no-underline
-    print:border-2 print:border-base-700 print:shadow-none;
-  box-shadow: var(--btn-secondary-box-shadow);
-  background-color: var(--btn-secondary-background-color);
-  color: var(--btn-secondary-color);
+  @apply util-btn-secondary util-btn-secondary-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-secondary-background-color-hover);
     color: var(--btn-secondary-color-hover);
   }
@@ -76,12 +64,9 @@
 .ds-btn-warning[type='submit'],
 .ds-btn-warning[type='button'],
 .ds-btn-warning[type='reset'] {
-  @apply hover:no-underline
-    print:border-2 print:border-error print:shadow-none;
-  box-shadow: var(--btn-warning-box-shadow);
-  background-color: var(--btn-warning-background-color);
-  color: var(--btn-warning-color);
+  @apply util-btn-warning util-btn-warning-text;
   &:hover {
+    @apply no-underline;
     background-color: var(--btn-warning-background-color-hover);
     color: var(--btn-warning-color-hover);
   }
@@ -91,9 +76,8 @@
   }
 }
 .ds-btn--disabled {
-  @apply opacity-50 hover:bg-opacity-50
-  print:text-base-400 print:border-opacity-50;
   @apply cursor-not-allowed !important;
+  @apply util-btn--disabled util-btn--disabled-text;
 }
 .ds-close-btn {
   @apply flex flex-nowrap text-right w-max float-right items-center;
@@ -110,6 +94,7 @@
   .ds-svg-icon {
     fill: var(--btn-primary-color);
   }
+  /* stylelint-disable-next-line digigov/nest-related-rules */
   .ds-svg-icon--more-vert {
     @apply h-6 w-6 md:h-8 md:w-8;
   }

package/src/components/button.native.css

@@ -0,0 +1,56 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable digigov/nest-related-rules */
+@import './button.common.css';
+
+.ds-btn {
+  @apply util-btn min-h-4 flex-row flex-nowrap justify-center;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--color-base-content);
+  padding-top: calc( 1.5 * var(--btn-padding-y)) !important;
+  padding-bottom: calc( 1.5 * var(--btn-padding-y)) !important;
+}
+.ds-btn__text {
+  @apply util-btn-text min-h-4 text-center;
+}
+.ds-btn--dense {
+  @apply min-h-6;
+}
+.ds-btn--dense__text {
+  @apply min-h-4;
+}
+.ds-btn--disabled {
+  @apply util-btn--disabled;
+}
+.ds-btn--disabled__text {
+  @apply util-btn--disabled-text;
+}
+.ds-btn-primary {
+  @apply util-btn-primary util-btn;
+}
+.ds-btn-primary__text {
+  @apply util-btn-primary-text;
+}
+.ds-btn-secondary {
+  @apply util-btn-secondary;
+}
+.ds-btn-secondary__text {
+  @apply util-btn-secondary-text;
+}
+.ds-btn-warning {
+  @apply util-btn-warning;
+}
+.ds-btn-warning__text {
+  @apply util-btn-warning-text;
+}
+.ds-btn-cta {
+  padding-top: calc( 2.25 * var(--btn-padding-y)) !important;
+  padding-bottom: calc( 2.25 * var(--btn-padding-y)) !important;
+}
+
+.ds-btn-cta__text {
+  @apply util-btn-cta-text;
+}
+.ds-btn-cta__icon {
+  @apply ml-2;
+  fill: var(--color-white) !important;
+}

package/src/components/card.common.css

@@ -0,0 +1,33 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-card {
+      @apply mb-4 md:mb-8 text-base-content max-w-full bg-base-100;
+      border-radius: var(--card-border-radius);
+    }
+    .util-card--border {
+      @apply border-2 border-base-content p-6;
+    }
+    .util-card--border-top {
+      @apply border-t border-base-300 pt-4;
+    }
+    .util-card--border-light {
+      @apply border-base-300;
+    }
+    .util-card--border-dark {
+      @apply border-base-content;
+    }
+    .util-card--divider {
+      --card-border-radius: 0;
+      @apply border-b border-base-300 pb-4 mb-4;
+    }
+    .util-card__heading-text {
+      @apply md:text-2xl text-xl font-bold;
+  }
+    .util-card__body {
+      @apply flex flex-col gap-3 md:gap-4;
+    }
+    .util-card__action {
+      @apply flex flex-wrap items-center gap-y-4 mt-auto;
+    }
+}

package/src/components/card.css

@@ -1,6 +1,7 @@
+@import './card.common.css';
+
 .ds-card {
-  @apply mb-7 text-base-content max-w-full;
-  border-radius: var(--card-border-radius);
+  @apply util-card;
   &.ds-card--dense,
   .ds-dense & {
     @apply mb-5;
@@ -9,7 +10,7 @@
     }
   }
   &.ds-card--border {
-    @apply border-2 border-base-content p-6;
+    @apply util-card--border;
     &.ds-card--border-light {
       @apply border;
     }
@@ -19,7 +20,7 @@
     }
   }
   &.ds-card--border-top {
-    @apply border-t border-base-300 pt-4;
+    @apply util-card--border-top;
     &.ds-card--border-dark {
       @apply border-t-3;
     }
@@ -29,8 +30,7 @@
     }
   }
   &.ds-card--divider {
-    --card-border-radius: 0;
-    @apply border-b border-base-300 pb-4 mb-4;
+    @apply util-card--divider;
   }
   &.ds-card--cta {
     .ds-card__body {
@@ -54,30 +54,35 @@
     }
   }
   &.ds-card--border-light {
-    @apply border-base-300;
+    @apply util-card--border-light;
   }
   &.ds-card--border-dark {
-    @apply border-base-content;
+    @apply util-card--border-dark;
   }
   &.ds-card--full-height {
     @apply h-full;
   }
 }
 .ds-card__body {
-  @apply flex flex-col gap-3 md:gap-4 h-full;
+  @apply util-card__body h-full;
+}
+.ds-card__image {
+  @apply  w-full h-40
+  /* @apply  h-40 -mx-6 */
+  bg-base-200 bg-cover bg-top
+  border border-base-300;
 }
 .ds-card__heading {
-  @apply md:text-2xl text-xl font-bold;
+  @apply util-card__heading-text;
   word-break: break-word;
 }
 .ds-card__content {
-  @apply text-base;
   word-break: break-word;
-  font-size: var(--card__text-font-size);
-  line-height: var(--card__text-line-height);
+  font-size: var(--card__content-font-size);
+  line-height: var(--card__content-line-height);
 }
 .ds-card__action {
-  @apply flex flex-wrap items-center gap-y-4 mt-auto;
+  @apply util-card__action;
 }
 @media print {
   /* When ds-card__action is empty at print, content at :after limits its height.  */

package/src/components/card.native.css

@@ -0,0 +1,29 @@
+@import './card.common.css';
+
+.ds-card {
+  @apply util-card;
+}
+.ds-card--border {
+  @apply util-card--border;
+}
+.ds-card__body {
+  @apply util-card__body;
+}
+.ds-card__action {
+  @apply util-card__action;
+}
+.ds-card--border-top {
+  @apply util-card--border-top;
+}
+.ds-card--border-light {
+  @apply util-card--border-light;
+}
+.ds-card--border-dark {
+  @apply util-card--border-dark;
+}
+.ds-card--divider {
+  @apply util-card--divider;
+}
+.ds-card__heading__text {
+  @apply util-card__heading-text;
+}

package/src/components/checkboxes.common.css

@@ -0,0 +1,16 @@
+@tailwind utilities;
+
+@layer utilities {
+    .util-checkboxes__item {
+      @apply relative mb-4 min-h-10;
+    }
+    .util-checkboxes__input {
+      @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100 w-10 h-10;
+    }
+    .util-checkboxes__input__after {
+      @apply absolute border-b-5 border-l-5;
+      width: 23px;
+      height: 12px;
+      transform: rotate(-45deg);
+    }
+}

package/src/components/checkboxes.css

@@ -1,3 +1,5 @@
+@import './checkboxes.common.css';
+
 .ds-checkboxes {
   &.ds-checkboxes--dense,
   .ds-dense & {
@@ -34,7 +36,7 @@
   }
 }
 .ds-checkboxes__item {
-  @apply block relative mb-4 pl-12 min-h-10;
+  @apply util-checkboxes__item block pl-12;
   &:last-child {
     @apply mb-0;
   }
@@ -43,8 +45,7 @@
   @apply inline-block py-1 px-2 cursor-pointer;
 }
 .ds-checkboxes__input {
-  @apply absolute z-1 left-0.5 -top-0.5 m-0 opacity-100
-  w-10 h-10 cursor-pointer;
+  @apply util-checkboxes__input cursor-pointer;
   &::before {
     @apply absolute top-0 left-0 w-10 h-10
     border-solid border-base-content border-2 bg-base-100 opacity-100;
@@ -52,14 +53,11 @@
     box-sizing: border-box;
   }
   &::after {
-    @apply absolute bg-transparent opacity-0 box-border
-    border-accent border-b-5 border-l-5 border-t-0 border-r-0;
+    @apply util-checkboxes__input__after bg-transparent opacity-0 box-border
+    border-accent border-t-0 border-r-0;
     content: '';
     top: 11px;
     left: 9px;
-    width: 23px;
-    height: 12px;
-    transform: rotate(-45deg);
   }
   &:checked {
     &::after {

package/src/components/checkboxes.native.css

@@ -0,0 +1,28 @@
+@import './checkboxes.common.css';
+
+.ds-checkboxes__item {
+  @apply util-checkboxes__item;
+}
+.ds-checkboxes__label {
+  @apply pl-12;
+}
+.ds-checkboxes__input {
+  @apply util-checkboxes__input top-0 left-0 border-solid border-base-content border-2 bg-base-100;
+}
+
+
+.ds-checkboxes__input--checked {
+  @apply util-checkboxes__input__after text-black;
+  top: 8;
+  left: 5;
+}
+
+.ds-checkboxes__input__wrapper--focus {
+  border-width: 4px;
+  border-color: var(--color-focus);
+}
+.ds-checkboxes__label__text {
+  font-size: var(--label-font-size);
+  line-height: 2rem;
+  letter-spacing: 0rem;
+}