@digigov/css 1.3.0-rc.0 → 2.0.0-4be8f7cc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.3.0-rc.0",
+  "version": "2.0.0-4be8f7cc",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
+    "@digigov/cli": "1.1.0",
     "autoprefixer": "10.4.16",
     "cssnano": "4.1.10",
     "postcss": "8.4.4",
@@ -53,7 +54,9 @@
     "@digigov/cli-build-tailwind": "1.0.1",
     "rimraf": "3.0.2",
     "publint": "0.1.8",
-    "@digigov/cli": "1.1.0"
+    "stylelint": "15.11.0",
+    "stylelint-plugin-digigov": "1.1.0-4be8f7cc",
+    "prettier": "3.2.5"
   },
   "dependencies": {
     "@fontsource/roboto": "4.4.0",
@@ -77,6 +80,7 @@
     "start": "next dev",
     "build": "rimraf dist && npm run build-tailwind",
     "publint": "publint",
-    "build-tailwind": "digigov build-tailwind --bundle digigov"
+    "build-tailwind": "digigov build-tailwind --bundle digigov",
+    "lint": "stylelint --fix src/**/*.css; prettier --write src/**/*.css --log-level error"
   }
 }

package/src/base/base.css

@@ -1 +1 @@
-@import "./index.css";
+@import './index.css';

package/src/base/index.css

@@ -1,15 +1,15 @@
-@import "tailwindcss/base";
- 
+@import 'tailwindcss/base';
 :root {
   accent-color: var(--color-accent);
 }
-html{
+html {
   -webkit-tap-highlight-color: transparent;
   scroll-behavior: smooth;
 }
 body {
   @apply font-sans text-base-content bg-base-100;
 }
-.light, .dark {
+.light,
+.dark {
   @apply font-sans text-base-content bg-base-100;
-}
+}

package/src/components/accordion.css

@@ -1,4 +1,52 @@
 .ds-accordion {
+  &.ds-accordion--no-border {
+    .ds-accordion__section {
+      @apply border-0 !important;
+    }
+  }
+  &.ds-accordion--border-top {
+    .ds-accordion__section {
+      .ds-accordion__section-summary {
+        @apply border-b-0;
+      }
+    }
+  }
+  &.ds-accordion--border-bottom {
+    .ds-accordion__section {
+      @apply border-0;
+      &:first-child {
+        @apply border-0;
+      }
+      .ds-accordion__section-summary {
+        @apply border-b border-base-400;
+      }
+    }
+  }
+  &.ds-accordion--secondary {
+    .ds-accordion__section {
+      .ds-accordion__section-summary {
+        @apply px-4 bg-base-200;
+      }
+      .ds-accordion__section-content {
+        @apply px-4;
+      }
+    }
+    .ds-accordion__section-button {
+      &::after {
+        @apply right-0;
+      }
+    }
+  }
+  &.ds-accordion--dense {
+    .ds-accordion__section {
+      .ds-accordion__section-summary {
+        @apply py-2;
+      }
+      .ds-accordion__section-content {
+        @apply py-2 my-0;
+      }
+    }
+  }
   .ds-accordion__controls {
     @apply text-right;
   }
@@ -9,9 +57,12 @@
     }
   }
   .ds-accordion__section-summary {
-    @apply py-4 pr-8 hover:bg-base-200 transition ease-in-out cursor-pointer;
-    @apply mb-0;
+    @apply py-4 pr-8 mb-0 transition ease-in-out cursor-pointer;
+    background: var(--accordion__section-summary-background);
     list-style: none;
+    &:hover {
+      background: var(--accordion__section-summary-background-hover);
+    }
     &::-webkit-details-marker {
       @apply hidden;
     }
@@ -35,9 +86,9 @@
   .ds-accordion__section-header {
   }
   .ds-accordion__section-heading {
-    font-size: var(--accordion__section-heading-font-size);
     @apply no-underline font-semibold 
     mb-0 transition-all justify-between cursor-pointer;
+    font-size: var(--accordion__section-heading-font-size);
     &:active {
       @apply ring-link-visited;
     }
@@ -45,8 +96,8 @@
   .ds-accordion__section-button {
     @apply text-base-content focus:underline flex justify-between;
     &::after {
-      content: "+";
       @apply text-2xl text-base-content float-right relative -right-8 ml-2;
+      content: '+';
     }
   }
   .ds-accordion__section[open] {
@@ -55,7 +106,7 @@
     }
     .ds-accordion__section-button {
       &::after {
-        content: "\2013";
+        content: '\2013';
       }
     }
   }
@@ -66,54 +117,6 @@
     }
   }
 }
-.ds-accordion--no-border {
-  .ds-accordion__section {
-    @apply border-0 !important;
-  }
-}
-.ds-accordion--border-top {
-  .ds-accordion__section {
-    .ds-accordion__section-summary {
-      @apply border-b-0;
-    }
-  }
-}
-.ds-accordion--border-bottom {
-  .ds-accordion__section {
-    @apply border-0;
-    &:first-child {
-      @apply border-0;
-    }
-    .ds-accordion__section-summary {
-      @apply border-b border-base-400;
-    }
-  }
-}
-.ds-accordion--secondary {
-  .ds-accordion__section {
-    .ds-accordion__section-summary {
-      @apply px-4 bg-base-200;
-    }
-    .ds-accordion__section-content {
-      @apply px-4;
-    }
-  }
-  .ds-accordion__section-button {
-    &::after {
-      @apply right-0;
-    }
-  }
-}
-.ds-accordion--dense {
-  .ds-accordion__section {
-    .ds-accordion__section-summary {
-      @apply py-2;
-    }
-    .ds-accordion__section-content {
-      @apply py-2 my-0;
-    }
-  }
-}
 
 /* overrides */
 

package/src/components/admin-header.css

@@ -3,7 +3,8 @@
   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;
+  @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;
 }
 
 /* overrides */
@@ -13,12 +14,9 @@
     @apply print:hidden;
   }
   .ds-dropdown__button.ds-link {
-    @apply text-lg text-white focus:text-base-content print:text-base-800;
+    @apply text-lg text-white focus:text-base-content print:text-base-800 text-right;
   }
   .ds-link {
-    .ds-svg-icon {
-      fill: var(--color-white);
-    }
     &:hover {
       .ds-svg-icon {
         fill: var(--color-white);
@@ -29,5 +27,8 @@
         fill: var(--color-link-active);
       }
     }
+    .ds-svg-icon {
+      fill: var(--color-white);
+    }
   }
 }

package/src/components/admin-layout.css

@@ -1,26 +1,19 @@
 .ds-admin-layout-wrapper {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
   min-height: 100vh;
 }
-.ds-admin-top-section {}
-.ds-admin-top-section--secondary {
-  @apply bg-base-200 px-4 py-2;
+.ds-admin-top-section {
+  &.ds-admin-top-section--secondary {
+    @apply bg-base-200 px-4 py-2;
+  }
+  &.ds-admin-top-section--border {
+    @apply border border-base-300 px-4 py-2;
+  }
 }
-.ds-admin-top-section--border {
-  @apply border border-base-300 px-4 py-2;
-}
-.ds-admin-width-container {
-  @apply px-4 py-8 m-0 w-full mx-auto;
-  flex: 1 1 0%;
-}
-.ds-admin-main-wrapper {
-  @apply grid p-4 md:grid-cols-12 gap-x-8 md:gap-x-10 gap-y-4 grid-cols-1 print:grid-cols-1;
-}
-.ds-admin-main-content {
+.ds-admin-main {
   @apply lg:col-span-8 md:col-span-7;
 }
-.ds-admin-side-content {
+.ds-admin-aside {
   @apply lg:col-span-4 md:col-span-5 print:order-1;
 }

package/src/components/autocomplete.css

@@ -1,12 +1,11 @@
-.ds-autocomplete__wrapper {
+.ds-autocomplete__container {
   @apply relative;
 }
-.ds-autocomplete__status {}
-.ds-autocomplete__status__wrapper {
-  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px;
+.ds-autocomplete__status {
+}
+.ds-autocomplete__status__container {
+  @apply border-0 h-px overflow-hidden absolute whitespace-nowrap p-0 w-px -mb-px -mr-px;
   clip: "rect(0 0 0 0)";
-  margin-bottom: "-1px";
-  margin-right: "-1px";
 }
 .ds-autocomplete__hint {
   @apply absolute text-base-400;
@@ -15,57 +14,104 @@
 .ds-autocomplete__input {
   @apply md:text-lg text-base p-2 w-full border-2 border-base-content;
   appearance: none;
-  -webkit-appearance: none;
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
 }
 .ds-autocomplete__input {
-  @apply relative bg-transparent;
-}
-.ds-autocomplete__input--default {
-  @apply p-2;
-}
-.ds-autocomplete__input--focused {
-  outline: 4px solid var(--color-focus);
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 2px;
-  box-shadow: inset 0 0 0 2px;
-}
-.ds-autocomplete__input--show-all-values {
-  @apply cursor-text;
+  @apply relative bg-transparent cursor-pointer pr-8;
+  &.ds-autocomplete__input--focused {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
 }
-.ds-autocomplete__dropdown-arrow-down {
-  @apply inline-block absolute right-2 top-4 w-6 h-6 cursor-pointer;
+.ds-autocomplete__container > .ds-svg-icon {
+  @apply inline-block absolute right-2 top-3;
+  pointer-events: none;
 }
-.ds-autocomplete__menu {
-  @apply bg-base-100 m-0 max-h-96 overflow-x-hidden w-full p-0 border-2 border-t-0 border-base-content /*  border-t-0 border-x-2 border-l-2 border-base-content */;
+.ds-autocomplete__multi-input-container > .ds-link {
+  @apply inline-block absolute right-2 top-4;
+  .ds-svg-icon {
+    @apply ml-0 fill-base-content;
+  }
 }
-.ds-autocomplete__menu--inline {
-  @apply relative;
+.ds-autocomplete__multi-input-container {
+  @apply w-full p-2 pr-8 border-2 border-base-content bg-base-100
+  flex gap-2 flex-wrap items-center;
+  min-height: 52px;
+  text-indent: 2px;
+  &:focus,
+  &.ds-autocomplete__multi-input-container--focused {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
+  &:not(.ds-autocomplete__multi-input-container--focused) {
+    &.ds-autocomplete__multi-input-container--1 {
+      .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--2 {
+      .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+    &.ds-autocomplete__multi-input-container--3 {
+      .ds-chip + .ds-chip + .ds-chip + .ds-chip {
+        @apply hidden;
+      }
+    }
+  }
 }
-.ds-autocomplete__menu--overlay {
-  @apply absolute w-full left-0 top-full z-50 shadow-xl;
+.ds-autocomplete__multi-input {
+  @apply flex-1 w-full focus:border-0 focus:outline-0 bg-base-100;
 }
-.ds-autocomplete__menu--visible {
-  @apply block;
+.ds-autocomplete__multi-btn {
+  @apply absolute bottom-0 right-0 m-2;
+  margin: 4px 2px;
+  height: 44px;
+  .ds-svg-icon {
+    @apply mx-2 !important;
+  }
 }
-.ds-autocomplete__menu--hidden {
-  @apply hidden;
+
+.ds-autocomplete__menu {
+  @apply block max-h-96 w-full m-0 p-0 overflow-x-hidden
+  border-2 border-t-0 border-base-content bg-base-100
+  absolute left-0 top-full z-50 shadow-xl;
+  &.ds-autocomplete__menu--hidden {
+    @apply hidden;
+  }
 }
 .ds-autocomplete__option {
-  @apply cursor-pointer block relative p-2;
-  border-bottom: solid var(--color-base-400);
+  @apply cursor-pointer block relative p-2 border-b-base-400;
   border-width: 1px 0;
+  &.ds-autocomplete__option--odd {
+    @apply bg-base-300;
+  }
+  &.ds-autocomplete__option--focused,
+  &.ds-autocomplete__option:hover {
+    @apply bg-info text-white outline-none border-tertiary;
+  }
+  &.ds-autocomplete__option--no-results {
+    @apply text-current cursor-not-allowed;
+  }
+  &.ds-autocomplete__option--empty {
+    @apply cursor-default;
+    @apply bg-base-100 text-base-content !important;
+    &:hover {
+      border-color: var(--color-base-400);
+    }
+  }
 }
 .ds-autocomplete__option > * {
   @apply pointer-events-none;
-}
-.ds-autocomplete__option:first-of-type {
-  @apply border-t-0;
-}
-.ds-autocomplete__option:last-of-type {
-  @apply border-t-0;
+  &:first-of-type,
+  &:last-of-type {
+    @apply border-t-0;
+  }
 }
 .ds-autocomplete__option--odd {
   @apply bg-base-300;
@@ -78,11 +124,8 @@
   @apply text-current cursor-not-allowed;
 }
 .ds-autocomplete__option--empty {
-  @apply cursor-default;
+  @apply cursor-default hover:border-base-400;
   @apply bg-base-100 text-base-content !important;
-  &:hover {
-    border-color: var(--color-base-400);
-  }
 }
 .ds-autocomplete__hint,
 .ds-autocomplete__option {

package/src/components/back-to-top.css

@@ -1,12 +1,11 @@
 .ds-back-to-top-content {
-  
 }
-  
+
 .ds-back-to-top-link {
+  @apply w-fit underline flex mb-4 cursor-pointer items-baseline;
   font-size: var(--back-to-top-link-font-size);
   letter-spacing: var(--back-to-top-link-letter-spacing);
   color: var(--back-to-top-link-color);
-  @apply w-fit underline flex mb-4 cursor-pointer items-baseline;
   &:hover {
     text-decoration-thickness: 2px;
   }
@@ -26,4 +25,4 @@
   .ds-svg-icon {
     fill: var(--back-to-top-link-color);
   }
-}
+}

package/src/components/bottom-info.css

@@ -2,4 +2,5 @@
   @apply w-full bg-base-200 border-t border-base-400;
   @apply md:py-6 !important;
 }
-.ds-bottom-info__content {}
+.ds-bottom-info__content {
+}

package/src/components/breadcrumbs.css

@@ -3,18 +3,18 @@
 }
 .ds-breadcrumbs__list {
   @apply block m-0 p-0 list-none;
-  &:after {
-    content: "";
+  &::after {
+    content: '';
     display: block;
     clear: both;
   }
 }
 .ds-breadcrumbs__list-item {
-  font-size: var(--breadcrumbs__list-item-font-size);
   @apply inline-block relative mb-1 ml-2 pl-4 float-left;
+  font-size: var(--breadcrumbs__list-item-font-size);
   &::before {
-    content: "";
     @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>");
   }
   &:first-child {
@@ -29,7 +29,7 @@
     &::before {
       background-image: none;
       top: 2px;
-      left: 0px;
+      left: 0;
       content: 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>");
     }
   }
@@ -41,7 +41,9 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
     text-decoration: none;
     outline: none;
   }