@digigov/css 1.0.0-ab30975f → 1.0.0-b0737a96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/css",
-  "version": "1.0.0-ab30975f",
+  "version": "1.0.0-b0737a96",
   "description": "Digigov CSS - Tailwind CSS Components",
   "author": "GRNET Devs <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -48,13 +48,11 @@
     "tailwindcss": "3.3.5",
     "nodemon": "2.0.7",
     "next": "10.0.9",
-    "@digigov/postcss-banner": "1.0.0-ab30975f",
-    "@digigov/cli-build-tailwind": "1.0.0-ab30975f",
+    "@digigov/postcss-banner": "1.0.0-b0737a96",
+    "@digigov/cli-build-tailwind": "1.0.0-b0737a96",
     "rimraf": "3.0.2",
-    "postcss-js": "4.0.0",
-    "postcss-load-config": "3.1.4",
     "publint": "0.1.8",
-    "@digigov/cli": "1.0.0-ab30975f"
+    "@digigov/cli": "1.0.0-b0737a96"
   },
   "scripts": {
     "preutilities": "DIGIGOV_CSS_BUILD=TRUE postcss --config src/utilities src/utilities/index.css --base src --dir dist",
@@ -76,6 +74,8 @@
     "@fontsource/roboto": "4.4.0",
     "publint": "0.1.8",
     "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
-    "polished": "4.2.2"
+    "polished": "4.2.2",
+    "postcss-js": "4.0.0",
+    "postcss-load-config": "3.1.4"
   }
 }

package/src/components/accordion.css

@@ -46,7 +46,7 @@
     @apply text-base-content focus:underline flex justify-between;
     &::after {
       content: "+";
-      @apply text-2xl text-base-content float-right relative -right-8;
+      @apply text-2xl text-base-content float-right relative -right-8 ml-2;
     }
   }
   .govgr-accordion__section[open] {

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

@@ -0,0 +1,29 @@
+.govgr-back-to-top-content {
+  
+}
+  
+.govgr-back-to-top-link {
+  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;
+  }
+  &:focus {
+    background-color: var(--color-focus);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none;
+    outline: none;
+  }
+}
+
+/* overrides */
+
+.govgr-back-to-top-link {
+  .govgr-svg-icon {
+    fill: var(--back-to-top-link-color);
+  }
+}

package/src/components/button.css

@@ -119,11 +119,11 @@
   }
 }
 .govgr-btn-cta {
-  .govgr-svg-icon--arrow {
+  .govgr-svg-icon--chevron {
     @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
   }
   &:hover {
-    .govgr-svg-icon--arrow {
+    .govgr-svg-icon--chevron {
       @apply ml-4 mr-0;
     }
   }

package/src/components/dropdown.css

@@ -64,8 +64,8 @@
 
 .govgr-dropdown {
   &[open] {
-    .govgr-dropdown__button--arrow {
-      .govgr-svg-icon--arrow {
+    .govgr-dropdown__button--chevron {
+      .govgr-svg-icon--chevron {
         @apply transform -rotate-180;
       }
     }
@@ -84,8 +84,8 @@
       }
     }
   }
-  .govgr-dropdown__button--arrow {
-    .govgr-svg-icon--arrow {
+  .govgr-dropdown__button--chevron {
+    .govgr-svg-icon--chevron {
       @apply transition duration-300;
     }
   }

package/src/components/index.css

@@ -13,6 +13,7 @@
 @import "./layout.css";
 @import "./nav.css";
 @import "./typography.css";
+@import "./back-to-top.css";
 @import "./table.css";
 @import "./filter.css";
 @import "./admin-layout.css";

package/src/components/layout.css

@@ -1,3 +1,4 @@
+
 .govgr-layout {
   display: flex;
   flex-direction: column;
@@ -17,7 +18,27 @@
   @apply mb-4;
 }
 .govgr-aside {
-  @apply flex flex-wrap flex-col md:sticky md:top-8 h-fit print:order-1;
+  @apply flex flex-wrap flex-col md:top-8 h-fit print:order-1;
+  .govgr-back-to-top {
+    @apply flex flex-1 content-end flex-wrap;
+    .govgr-back-to-top-link {
+      @apply md:mx-6 md:my-4;
+    }
+    &.govgr-back-to-top--persistent {
+      .govgr-back-to-top-content {
+        @apply sticky bottom-0 mb-4;
+      }
+    }
+  }
+}
+.govgr-aside--sticky {
+  @apply md:sticky;
+  &.govgr-aside--full-height {
+    max-height: calc(100vh - 2rem);
+  }
+}
+.govgr-aside--full-height {
+  @apply h-full;
 }
 .govgr-bottom {
   @apply w-full flex flex-wrap  box-border;
@@ -49,6 +70,17 @@
 
 /* overrides */
 
+.govgr-main {
+  >.govgr-back-to-top--persistent {
+    @apply fixed bottom-0 right-0 bg-base-200 w-full z-5;
+    .govgr-back-to-top-link {
+      @apply mx-6 my-4;
+    }
+    .govgr-back-to-top-content {
+      @apply max-w-5xl mx-auto my-0;
+    }
+  }
+}
 .govgr-container {
   &.govgr-grid {
     @apply py-4 print:gap-4 print:grid-cols-1;

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

@@ -156,6 +156,7 @@ module.exports = {
         1: 1,
         2: 2,
         3: 3,
+        5: 5,
       },
       opacity: {
         85: "0.85",