@digigov/css 0.5.0 → 0.7.0

package/src/components/misc.css

@@ -0,0 +1,84 @@
+.govgr-warning-text,
+.govgr-border-message {
+  @apply p-4;
+}
+.govgr-border-message {
+  @apply border-8;
+}
+.govgr-blockquote {
+  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-200;
+}
+.govgr-error-summary {
+  @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
+}
+.govgr-warning-text {
+  @apply flex pl-0 pr-0;
+
+  .govgr-warning-text__icon {
+    @apply text-white font-bold bg-base-content text-3xl leading-10 text-center rounded-3xl min-h-10 min-w-10 h-fit-content mr-6 mt-2;
+  }
+  .govgr-warning-text__text {
+    @apply text-lg flex items-center;
+  }
+  .govgr-warning-text__assistive {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    border: 0 !important;
+    white-space: nowrap !important;
+  }
+}
+span.govgr-caret-right, span.govgr-caret-left {
+  content: "";
+  width: 5px;
+  height: 10px;
+  @apply border-base-content block border-5 mr-3;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  @apply transition-all;
+}
+span.govgr-caret-right {
+  @apply border-r-0;
+}
+span.govgr-caret-left {
+  @apply border-l-0;
+}
+.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;
+    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-10;
+      @apply text-white rounded-sm bg-primary-200 bg-opacity-90 shadow;
+
+      &::after {
+        content: "";
+        @apply -top-3 left-1/2 -mr-1 border-6 border-primary-200 opacity-85 absolute;
+        border-right-color: transparent;
+        border-left-color: transparent;
+        border-top-color: transparent;
+      }
+    }
+  }
+}
+
+.govgr-visually-hidden {
+  @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+}

package/src/components/nav.css

@@ -0,0 +1,83 @@
+/* icon and transition of the burger menu */
+.govgr-burger-menu {
+    @apply sm:hidden w-8 h-6 flex flex-wrap flex-col justify-between transition-all z-30 float-right;
+    * {
+        @apply w-8 h-0.5 bg-white transition-all duration-500 relative ;
+    }
+    .govgr-burger-menu__line1 {
+        @apply origin-top-left;
+        left:0rem;
+    }
+    .govgr-burger-menu__line2 {
+        @apply mx-auto;
+    }
+    .govgr-burger-menu__line3 {
+        @apply origin-bottom-left;
+        left:0rem;
+    }
+    &.govgr-burger-menu--active {
+        .govgr-burger-menu__line1 {
+            @apply transform rotate-45 origin-top-left left-1.5;
+        }
+        .govgr-burger-menu__line2 {
+            @apply w-0;
+        }
+        .govgr-burger-menu__line3 {
+            @apply transform -rotate-45 origin-bottom-left left-1.5 ;
+        }
+    }
+    &.govgr-burger-menu--white-bg {
+        * {
+            @apply bg-primary ;
+        }
+    }
+}
+
+/* --- HORIZONTAL ---  */
+
+.govgr-horizontal-nav {
+    @apply fixed w-3/4 sm:w-full h-full bg-secondary-600 text-content-dark
+    sm:relative sm:h-auto sm:bg-white sm:text-content
+    z-30 sm:z-auto
+    opacity-10 sm:opacity-100 sm:block transition-all duration-1000 sm:transition-none
+    -right-3/4 sm:right-auto top-0 sm:top-auto overflow-x-scroll sm:overflow-visible
+    border-b border-base-150 
+    ;
+}
+.govgr-horizontal-nav__container {
+    @apply w-full m-0 max-w-5xl sm:mx-auto sm:px-4 sm:py-2
+    flex flex-wrap flex-col sm:flex-row;
+}
+.govgr-horizontal-nav--active {
+    @apply block opacity-100 right-0;
+    .govgr-horizontal-nav__container { 
+        @apply mt-24 sm:mt-auto;
+    }
+    > * {
+        @apply py-4 md:py-1;
+    }
+}
+.govgr-horizontal-nav__item  {
+    @apply py-6 px-6 text-xl
+    sm:py-1 sm:pr-4 lg:pr-6 sm:pl-0 sm:text-base
+    no-underline hover:underline;
+    
+}
+
+.govgr-horizontal-nav__item:focus {
+      background-color: var(--color-focus);
+      box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
+      outline: none; 
+  }
+.govgr-horizontal-nav__item-active, .govgr-vertical-nav__item--active {
+    @apply font-semibold;
+}
+
+/* --- VERTICAL --- */
+
+.govgr-vertical-nav {
+    @apply flex flex-wrap;
+}
+.govgr-vertical-nav__item {
+    @apply w-full p-2;
+}

package/src/components/notification-banner.css

@@ -0,0 +1,44 @@
+.govgr-notification-banner {
+  @apply bg-secondary-600 border-5 border-secondary-600 mb-6 md:mb-8 font-normal;
+}
+.govgr-notification-banner--success{
+  @apply bg-success border-success;
+  .govgr-notification-banner__link{
+    &:link {
+      @apply text-success;
+    }
+  }
+}
+.govgr-notification-banner__header {
+  @apply text-white p-0 m-0 text-base md:text-lg;
+}
+.govgr-notification-banner__title {
+  @apply border-b border-transparent pt-1 px-4 sm:px-5 pb-2 font-bold;
+}
+.govgr-notification-banner__content {
+  @apply bg-white text-base-content p-4 md:p-5;
+  &>* {
+    @apply box-border max-w-xl;
+  }
+  &>:last-child {
+    @apply mb-0;
+  }
+}
+.govgr-notification-banner__heading {
+  @apply p-0 m-0 mb-4 text-lg md:text-2xl font-bold;
+}
+.govgr-notification-banner__link{
+  @apply underline;
+  &:link {
+    @apply text-link;
+  }
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
+  &:focus {
+        background-color: var(--color-focus);
+        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
+        text-decoration:none;
+        outline: none; 
+  }
+}

package/src/components/panel.css

@@ -0,0 +1,12 @@
+.govgr-panel {
+  @apply box-border mb-4 p-8 border-5 border-transparent text-center;
+}
+.govgr-panel--confirmation {
+  @apply bg-success text-white;
+}
+.govgr-panel__title {
+  @apply text-4xl md:text-5xl mt-0 mb-6 font-bold;
+}
+.govgr-panel__body {
+  @apply text-2xl md:text-4xl;
+}

package/src/components/phase-banner.css

@@ -0,0 +1,17 @@
+.govgr-phase-banner {
+  @apply py-2 mb-4;
+}
+
+.govgr-phase-banner__underline {
+  @apply border-base-200 border-b;
+}
+
+.govgr-phase-banner__content {
+  @apply table;
+}
+.govgr-phase-banner__content__tag {
+  @apply px-2 py-1 mr-2 inline-block bg-secondary-600 font-sans text-white text-sm uppercase tracking-widest;
+}
+.govgr-phase-banner__text {
+  @apply table-cell text-white;
+}

package/src/components/postcss.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss')('./src/components/tailwind.config.js'),
+    require('postcss-nested')({
+      "bubble": [
+        "screen"
+      ]
+    }),
+    require('autoprefixer'),
+    require('cssnano')({
+      "preset": [
+        "default",
+        {
+          "mergeRules": false
+        }
+      ]
+    }),
+  ]
+}

package/src/components/radios.css

@@ -0,0 +1,61 @@
+.govgr-radios__item {
+  @apply block relative mb-4 pl-12; 
+  min-height: 40px;
+
+}
+.govgr-radios--inline {
+  .govgr-radios__item {
+    @apply sm:mr-6 sm:float-left sm:clear-none;
+  }
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+.govgr-radios__label {
+  @apply inline-block py-1 px-2 cursor-pointer text-lg ;
+}
+.govgr-radios__input {
+  @apply absolute z-10 left-0.5 -top-1 m-0 rounded-3xl
+  w-10 h-10 opacity-100 cursor-pointer;
+  &:before {
+    content: "";
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    background: transparent;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 0;
+    height: 0;
+    border: 12px solid currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    background: currentColor;
+  }
+  &:checked { 
+    &:after {
+      opacity: 1;
+    }
+  }
+  &:focus {
+    outline: 0px;
+    &:before {
+      outline: 3px solid transparent;
+      outline-offset: 1px;
+      box-shadow: 0 0 0 4px var(--color-focus);
+      border-width: 4px;
+    }
+  }
+}

package/src/components/summary-list.css

@@ -0,0 +1,45 @@
+.govgr-summary-list {
+  @apply m-0 mb-6 sm:mb-8 w-full
+  sm:table sm:w-full sm:table-fixed
+  ;
+}
+.govgr-summary-list__row {  
+  @apply block sm:table-row
+  pb-4 mb-4 border-b border-solid border-gray-50
+  sm:pb-0 sm:mb-0 sm:border-0 ;
+}
+.govgr-summary-list--no-border .govgr-summary-list__row {  
+  @apply border-0;
+}
+.govgr-summary-list__row--no-border .govgr-summary-list__row {  
+  @apply border-0;
+}
+.govgr-summary-list__key {
+  @apply font-bold mb-1 sm:w-2/6;
+}
+.govgr-summary-list__value {
+  @apply md:w-3/6;
+  &:last-child {
+    @apply sm:w-4/6;
+  }
+}
+.govgr-summary-list__actions {
+  @apply sm:w-1/6 sm:pr-0 sm:text-right;
+}
+.govgr-summary-list__key, .govgr-summary-list__value {
+  @apply break-words;
+}
+.govgr-summary-list__key, .govgr-summary-list__value, .govgr-summary-list__actions {
+  @apply m-0 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray-50; 
+}
+.govgr-summary-list--no-border .govgr-summary-list__key, 
+.govgr-summary-list--no-border .govgr-summary-list__value, 
+.govgr-summary-list--no-border .govgr-summary-list__actions {
+  @apply sm:border-0 pb-2;
+}
+.govgr-summary-list__row--no-border .govgr-summary-list__key, 
+.govgr-summary-list__row--no-border .govgr-summary-list__value, 
+.govgr-summary-list__row--no-border .govgr-summary-list__actions {
+  @apply sm:border-0 pb-2;
+}

package/src/components/table.css

@@ -0,0 +1,108 @@
+/* don't use the .example class */
+.example {
+  @apply px-5 py-5;
+}
+
+.govgr-table {
+  @apply w-full border-collapse;
+  @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-spacing: 0;
+}
+.govgr-table--with-vertical-lines {
+  .govgr-table__cell {
+    @apply border-l border-r border-solid border-gray-50 !important;
+  }
+  
+ 
+}
+
+.govgr-table--with-vertical-lines.govgr-table--light {
+  th, td {
+    @apply px-4 !important;
+  }
+}
+
+.govgr-table--dark, .govgr-table--zebra {
+  th, td {
+    @apply px-4 !important;
+  }
+}
+
+.govgr-table--with-vertical-lines.govgr-table--light .govgr-table__body .govgr-table__header {
+    @apply border-l border-solid border-gray-50 !important;
+  }
+
+.govgr-table--with-vertical-lines.govgr-table--dense.govgr-table--dark {
+  .govgr-table__head .govgr-table__row .govgr-table__header:first-child{
+        @apply border-b-0 border-l border-solid border-primary !important;
+    }
+}
+
+
+.govgr-table--with-vertical-lines.govgr-table--dark{
+  .govgr-table__head .govgr-table__row .govgr-table__header:last-child{
+        @apply border-b-0 border-r border-solid border-primary !important;
+    }
+}
+
+.govgr-table--dark{
+  th {
+    @apply border-none bg-primary text-white;
+  }
+  .govgr-table__head .govgr-table__row .govgr-table__header {
+    @apply py-3 !important;
+  }
+  .govgr-table__body .govgr-table__row .govgr-table__header {
+    @apply border-r border-solid border-gray-50 !important;
+  }
+}
+
+.govgr-table--zebra {
+  .govgr-table__body {
+    .govgr-table__row:nth-child(even) {
+      @apply bg-base-100;
+    }
+  }
+}
+.govgr-table--dense {
+  &.govgr-table {
+    tr, th, td {
+     @apply text-sm py-2;
+   }
+  }
+}
+.govgr-table__caption {
+  @apply table-caption text-left font-bold;  
+}
+.govgr-table__caption--s {
+  @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4;
+  -webkit-font-smoothing: antialiased;
+}
+.govgr-table__caption--m {
+  @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6;
+  -webkit-font-smoothing: antialiased;
+}
+.govgr-table__caption--l {
+  @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7;
+  -webkit-font-smoothing: antialiased;
+}
+.govgr-table__caption--xl {
+  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 lg:mb-10 mb-8 max-w-2xl;
+  -webkit-font-smoothing: antialiased;
+}
+.govgr-table__header, .govgr-table__cell {
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray-50 text-left align-top;
+   &:last-child {
+      @apply pr-0;
+    }
+}
+.govgr-table__header--numeric, .govgr-table__cell--numeric {
+  @apply text-right;
+}
+.govgr-table__cell--numeric {
+  @apply font-normal;
+  font-feature-settings: normal;
+  font-variant-numeric: tabular-nums;  
+}

package/src/components/tabs.css

@@ -0,0 +1,59 @@
+.govgr-tabs {
+  .govgr-tabs__title {
+    @apply block md:hidden sm:hidden lg:hidden;
+  }
+  .govgr-tabs__list {
+    &:after {
+      content: "";
+      display: block;
+      clear: both;
+    }
+    .govgr-tabs__list-item {
+      @apply float-left relative md:border md:border-base-100 md:bg-base-100 md:rounded-t-sm md:px-4 md:py-2 m-0 md:mr-2 shadow-none
+      cursor-pointer;
+      &.govgr-tabs__list-item-selected {
+          @apply no-underline md:border-base-150 bg-white z-20 md:border-b-0;
+          margin-top: -5px;
+          margin-bottom: -1px;
+          padding-top: 14px;
+          padding-right: 19px;
+          padding-bottom: 16px;
+          padding-left: 19px;
+          border: 1px solid #b1b4b6;
+          border-bottom: 0;
+          background-color: #fff;
+        &:hover {
+          text-decoration-thickness: 2px;
+        }
+      }
+    }
+    .govgr-tabs__tab {
+      @apply text-lg no-underline hover:underline focus:underline;
+      text-underline-offset: .1em;
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      &:focus {
+        background-color: var(--color-focus);
+        outline: 3px solid transparent;
+        -webkit-box-shadow: inset 0 0 0 3px var(--color-focus);
+        box-shadow: inset 0 0 0 3px var(--color-focus);
+        outline-offset: 0px;
+        text-decoration-thickness: .2rem;
+      }
+
+    }
+
+  }
+  .govgr-tabs__panel {
+    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-150 md:z-10 mb-0;
+    &.govgr-tabs__panel-visible {
+      @apply block;
+    }
+  }
+}

package/src/components/tailwind.config.js

@@ -0,0 +1,10 @@
+const plugin = require('tailwindcss/plugin')
+const tailwindConfig = require('../../tailwind.config.js');
+module.exports = {
+  ...tailwindConfig,
+  plugins: [
+    plugin(function ({ addBase, addUtilities }) {
+      addUtilities(require('../../dist/utilities'), { variants: ['responsive'] })
+    })
+  ],
+}