@digigov/css 0.4.0 → 0.6.2

package/src/components/button.css

@@ -0,0 +1,82 @@
+/* button { */
+.govgr-btn {
+    @apply tracking-wide leading-relaxed font-medium m-0 mr-4 mb-8 w-max cursor-pointer
+    flex items-center ;
+    .right-arrow::after {
+        content: "";
+        @apply w-06rem h-06rem border-white block border-t-2_5 border-r-2_5 ml-2 mr-2 transition-all transform rotate-45;
+    }
+    &:hover {
+        -webkit-box-shadow: 0 2px 0 #0b0c0c;
+        box-shadow: 0 2px 0 #0b0c0c;
+        .govgr-btn-cta__arrow {
+            @apply ml-4 mr-0;
+        }
+    }
+    &:focus {
+        @apply border-focus;
+        outline: 3px solid transparent;
+        -webkit-box-shadow: inset 0 0 0 3px #fd0;
+        box-shadow: inset 0 0 0 3px #fd0;
+        outline-offset: 0px;
+    }
+    &:focus:not(:active):not(:hover) {
+        @apply border-focus text-base-content bg-focus;      
+        -webkit-box-shadow: 0 2px 0 #0b0c0c;
+        box-shadow: 0 2px 0 #0b0c0c;
+        .govgr-btn-cta__arrow {
+          fill:#0b0c0c;
+        }
+    }
+    
+}
+.govgr-background-dark {
+    button {
+        @apply border-white hover:border-white border;
+    }
+
+}
+.govgr-btn-primary {
+    -webkit-box-shadow: 0 2px 0 #0b0c0c;
+    box-shadow: 0 2px 0 #0b0c0c;
+  @apply 
+    bg-success
+    text-lg text-white
+    px-6 py-2
+    rounded-none
+    hover:bg-success-hover active:bg-green-800 hover:text-white hover:no-underline;
+}
+
+.govgr-btn-cta {
+    @apply text-xl py-4;
+}
+.govgr-btn-secondary {
+    -webkit-box-shadow: 0 2px 0 #929191;
+    box-shadow: 0 2px 0 #929191;
+  @apply 
+    bg-base-100
+    text-lg text-base-content
+    px-6 py-2
+    rounded-none
+    hover:bg-base-150 active:bg-gray-300 hover:text-white hover:no-underline;
+}
+.govgr-btn-warning {
+    webkit-box-shadow: 0 2px 0 #0b0c0c;
+    box-shadow: 0 2px 0 #0b0c0c;
+  @apply 
+    bg-error
+    text-lg text-white
+    px-6 py-2
+    rounded-none
+    hover:bg-error-hover active:bg-red-600 hover:text-white hover:no-underline;
+}
+.govgr-btn-disabled {
+  @apply bg-opacity-50 hover:bg-opacity-50 cursor-not-allowed;
+}
+.govgr-btn-link {
+  @apply block;
+}
+.govgr-btn-cta__arrow {
+  fill:white;
+  @apply w-7 h-7 inline-block ml-2 mr-2 transition-all;
+}

package/src/components/card.css

@@ -0,0 +1,24 @@
+.govgr-card {
+  @apply mb-7 text-base-content;
+}
+.govgr-card--border {
+  @apply border-2 border-base-content p-6;
+}
+.govgr-card--divider {
+  @apply border-b border-gray-50 pb-4 mb-4;
+}
+.govgr-card__heading {
+  @apply md:text-2xl text-xl font-bold;
+}
+.govgr-card__text {
+  @apply text-base lg:text-xl text-lg;
+}
+.govgr-card__body {
+  @apply grid gap-3 md:gap-4;
+}
+.govgr-card__action {
+  @apply flex flex-wrap items-center gap-y-4;
+  * {
+    @apply mb-0;
+  }
+}

package/src/components/checkboxes.css

@@ -0,0 +1,67 @@
+.govgr-checkboxes--inline {
+    @apply inline-flex flex-wrap;
+}
+.govgr-checkboxes__item {
+    @apply block relative mb-4 pl-12; 
+    min-height: 40px;
+}
+.govgr-checkboxes__label {
+  @apply inline-block py-1 px-2 cursor-pointer;
+}
+.govgr-checkboxes__input {
+  @apply absolute z-10 left-0.5 -top-0.5 m-0 opacity-100
+  w-10 h-10 cursor-pointer;
+  &:before {
+    content: "";
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    @apply absolute top-0 left-0 w-10 h-10
+    border-base-content border-2 bg-transparent opacity-100;
+  }
+  &:after {
+    content: "";
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    position: absolute;
+    top: 11px;
+    left: 9px;
+    width: 23px;
+    height: 12px;
+    -webkit-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    border: solid;
+    border-width: 0 0 5px 5px;
+    border-top-color: transparent;
+    opacity: 0;
+    background: transparent;
+  }
+  &:checked {
+    &:after {
+      opacity: 1;
+    }
+    &:before {
+      background-color: white;
+    }
+  }
+  &:focus {
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 3px #fd0;
+    &:before {
+      border-width: 4px;
+    }
+  }
+} 
+.govgr-checkboxes__hint {
+  @apply px-2 mb-2;
+}
+.govgr-checkboxes__divider, .govgr-radios__divider {
+  @apply text-lg text-center w-10 mb-4;
+}
+.govgr-checkboxes__conditional, .govgr-radios__conditional {
+    @apply border-l-4 border-base-200 ml-4 pl-6;
+}
+.govgr-checkboxes__conditional--hidden, .govgr-radios__conditional--hidden {
+    @apply hidden;
+}

package/src/components/components.css

@@ -0,0 +1,2 @@
+@import "tailwindcss/components";
+@import "./index.css";

package/src/components/details.css

@@ -0,0 +1,22 @@
+.govgr-details {
+  @apply md:text-lg text-base;
+  @apply md:mb-8 mb-4
+}
+.govgr-details__summary {
+  width: fit-content;
+  @apply mb-0 underline cursor-pointer;
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
+  &:focus {
+        background-color: #fd0;
+        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        text-decoration:none;
+  }
+}
+.govgr-details__summary-text {
+  @apply border-l-2 border-base-200 py-2 px-4 mt-4;
+  >*:last-child {
+    @apply mb-0;
+  }
+}

package/src/components/filter.css

@@ -0,0 +1,129 @@
+.govgr-filter {
+  @apply border border-gray-50 md:block bg-white;
+  @apply fixed top-0 right-0 bottom-0 overflow-y-scroll z-50 w-4/5;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
+  @apply md:relative md:overflow-auto md:w-full md:shadow-none;
+  .govgr-select {
+    @apply w-full;
+  }
+}
+.govgr-filter__close-link {
+  @apply flex flex-nowrap md:hidden text-right w-max float-right;
+  &:focus {
+    .govgr-close-icon {
+      * {
+        @apply bg-base-content;
+      }
+    }
+  }
+}
+
+.govgr-close-icon {
+  @apply w-6 flex flex-wrap flex-col justify-between transition-all z-30 float-right;
+  height: 1.1rem;
+  @apply ml-2 !important;
+  * {
+    @apply w-6 h-0.5 transition-all duration-500 relative bg-link;
+  }
+  .govgr-close-icon__line1 {
+    @apply transform rotate-45 origin-top-left;
+  }
+  .govgr-close-icon__line2 {
+    @apply transform -rotate-45 origin-bottom-left ;
+  }
+}
+
+
+
+.govgr-filter__heading, .govgr-filter__selected, .govgr-filter__options {
+  @apply p-4;
+}
+.govgr-filter__heading {
+  /* @apply bg-primary text-base-content-invert; */
+  * {
+    @apply m-0;
+  }
+}
+.govgr-filter__selected {
+  /* @apply bg-gray-100 p-4; */
+  @apply bg-gray-100 p-4 m-2 mt-0 rounded;
+}
+.govgr-filter__selected-heading {
+  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
+  * {
+    @apply m-0 h-full;
+  }
+}
+.govgr-chip--heading {
+  @apply font-bold md:text-base text-sm pb-4;
+}
+.govgr-chips {
+  @apply flex flex-wrap;
+}
+.govgr-chip {
+  @apply bg-white text-base-content lg:text-base text-sm border-2 border-base-content 
+  inline-flex items-center px-2 py-1 mr-2 mb-2 rounded shadow;
+  &:hover {
+    @apply shadow-lg text-base-content-invert bg-gray-800 border-gray-800 transition;
+    .govgr-chip--x-line1, .govgr-chip--x-line2 {
+      @apply border-base-content-invert;
+    }
+  }
+  &:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
+}
+.govgr-chip--x-icon {
+  @apply relative w-4 h-4 ml-2;
+}
+.govgr-chip--x-line1, .govgr-chip--x-line2  {
+  @apply w-full border-t-2 border-base-content transform block absolute top-2 transition;
+}
+.govgr-chip--x-line1 {
+  @apply rotate-45;
+}
+.govgr-chip--x-line2 {
+  @apply -rotate-45;
+}
+.govgr-input__search-button {
+  @apply bg-success w-min py-2 px-4 border-2 border-l-0 border-success m-0 ml-2 rounded;
+  &:focus {
+    .govgr-input__search-button-icon1, .govgr-input__search-button-icon2 {
+      @apply border-base-content;
+    }
+  }
+}
+.govgr-input__search-button-icon {
+  @apply w-5 h-5 relative;
+}
+.govgr-input__search-button-icon1 {
+  @apply w-4 h-4 border-2 border-white rounded-3xl block absolute;
+}
+.govgr-input__search-button-icon2 {
+  @apply w-2 h-1 border-t-2 border-white transform rotate-45 block absolute bottom-0 right-0;
+}
+.govgr-search {
+  @apply flex w-full max-w-3xl;
+}
+.govgr-results-action-bar {
+ @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline; 
+ /* @apply border border-gray-50 p-2 mb-4 flex flex-wrap justify-end gap-4;  */
+ * {
+   @apply mb-0;
+ }
+ .govgr-field {
+   @apply flex items-baseline gap-2;
+ }
+}
+.govgr-results-heading {
+  @apply flex flex-wrap justify-between items-baseline gap-x-2;
+}
+.govgr-results-heading__actions {
+  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
+}
+.govgr-link-filters {
+  @apply block md:hidden;
+}

package/src/components/footer.css

@@ -0,0 +1,75 @@
+.govgr-footer {
+    @apply border-0 border-solid font-normal text-base pt-4 md:pt-8 pb-2 md:pb-8 border-t-4 border-secondary-600 text-base-300 bg-gray-100 w-full;
+}
+.govgr-footer__meta {
+    @apply w-full flex flex-1 flex-wrap items-end justify-around box-border;
+}
+.govgr-footer__meta-item {
+    @apply mx-2 md:mx-4 mb-6;
+}
+.govgr-footer__meta-item--grow {
+    @apply flex flex-grow;
+}
+.govgr-footer__content {
+    @apply w-full;
+}
+.govgr-footer__content--logos {
+    @apply flex mb-6 md:mb-8;
+}
+.govgr-footer__logo {
+    @apply mr-4;
+    &:last-child {
+        @apply mr-0;
+    }
+}
+.govgr-footer__logo, .govgr-footer__government-logo {
+    @apply max-w-xs max-h-14 w-auto h-auto;
+    max-width: 224px;
+}
+.govgr-footer__licence-description {
+    @apply mt-6;
+}
+
+.govgr-footer__inline-list {
+    @apply mt-0 mb-4 p-0;
+}
+.govgr-footer__inline-list-item {
+    @apply inline-block mr-4 mb-2;
+}
+.govgr-footer__link {
+    @apply underline ;
+    &:hover {
+        text-decoration-thickness: 2px;
+    }
+    &:focus {
+        background-color: #fd0 !important;
+        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        outline: none; 
+        text-decoration: none;
+      }
+}
+.govgr-footer__navigation {
+    @apply flex flex-wrap;
+}
+.govgr-footer__section {
+    @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink;
+}
+@media (min-width: 48em) {
+    .govgr-footer__section:first-child:nth-last-child(2) {
+        @apply flex-grow-2;
+    }
+}
+.govgr-footer__list {
+    @apply m-0 p-0 list-none gap-x-6;
+}
+@media (min-width: 48em) {
+    .govgr-footer__list--columns-2 {
+        column-count: 2;
+    }
+}
+.govgr-footer__section-break {
+    @apply m-auto px-4 py-2 border-t border-gray-50 mb-5;
+}
+.govgr-footer__heading {
+    @apply mb-4 pb-4 border-b border-gray-50;
+}

package/src/components/form.css

@@ -0,0 +1,103 @@
+.govgr-form {
+    p {
+        @apply mb-4;
+    }
+}
+.govgr-form--row {
+    @apply flex flex-wrap gap-x-4;
+}
+.govgr-field {
+    @apply mb-8 md:mb-10;
+}
+.govgr-fieldset__legend {
+    @apply md:text-lg text-base font-bold mx-0 lg:mb-4;
+    @apply mb-4 !important;
+}
+.govgr-label {
+    @apply md:text-lg text-base mb-2
+    flex gap-y-3 flex-col;
+    .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl, .govgr-hint, .govgr-error-message {
+      @apply mb-0;
+    }
+}
+.govgr-input, .govgr-select, .govgr-textarea{
+    @apply md:text-lg text-base w-full p-2 border-2 border-base-content;
+    &:focus {
+        outline: 3px solid #fd0;
+        outline-offset: 0;
+        -webkit-box-shadow: inset 0 0 0 2px;
+        box-shadow: inset 0 0 0 2px;
+    }
+}
+.govgr-file-upload:focus {
+    outline: 3px solid;
+    box-shadow: 0 0 0 7px #fd0;
+}
+.govgr-date-input {
+    @apply flex;
+    .form-group {
+        @apply mr-4;
+    }
+}
+.govgr-input--width-20 {
+    max-width: 41ex;
+}
+.govgr-input--width-10 {
+    max-width: 23ex;
+}
+.govgr-input--width-5 {
+    max-width: 10.8ex;
+}
+.govgr-input--width-4 {
+    max-width: 9ex;
+}
+.govgr-input--width-3 {
+    max-width: 7.2ex;
+}
+.govgr-input--width-2 {
+    max-width: 5.4ex;
+}
+.govgr-date-input__item {
+   @apply mr-4; 
+}
+.govgr-\!-width-one-quarter,
+.govgr-\!-width-one-third,
+.govgr-\!-width-one-half,
+.govgr-\!-width-two-thirds,
+.govgr-\!-width-three-quarters,
+.govgr-\!-width-full-width {
+    width: 100% !important;
+}
+@screen sm {
+    .govgr-\!-width-one-quarter {
+        width: 25% !important;
+    }
+    .govgr-\!-width-one-third {
+        width: 33.33% !important;
+    }
+    .govgr-\!-width-one-half {
+        width: 50% !important;
+    }
+    .govgr-\!-width-two-thirds {
+        width: 66.66% !important;
+    }
+    .govgr-\!-width-three-quarters {
+        width: 75% !important;
+    }
+    .govgr-\!-width-full-width {
+        width: 100% !important;
+    }
+}
+.govgr-select {
+    @apply w-auto max-w-full;
+}
+/* error handling  */
+.govgr-field__error {
+    @apply border-l-5 border-error px-0 pl-4;
+}
+.govgr-error-message {
+    @apply md:text-lg text-base block mb-4 text-error font-semibold;
+}
+.govgr-error-input {
+    @apply border-error border-3;
+}

package/src/components/header.css

@@ -0,0 +1,56 @@
+.govgr-header {
+  @apply bg-primary border-b-8 border-secondary-600;
+  border-bottom-style: solid;
+  
+}
+.govgr-header__container {
+  @apply container px-4 py-2 max-w-5xl flex justify-between items-center;
+}
+.govgr-header__container-full {
+  @apply max-w-full;
+}
+.govgr-header__content {
+  @apply flex justify-start flex-wrap items-center;
+  * {
+    @apply mr-4 my-1 md:my-0;
+  }
+}
+.govgr-header-title {
+  @apply text-2xl font-bold align-middle text-base-100 leading-10 tracking-wide w-auto hover:text-base-100 hover:no-underline;
+}
+
+.govgr-header-title:focus {
+  @apply text-gray-900;
+  background-color: #fd0;
+  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+  text-decoration:none;
+  outline: none;
+}
+.govgr-header-logo {
+  @apply h-12;
+}
+.govgr-header-secondary-logo {
+  @apply h-10;
+}
+.govgr-header-link:focus{
+  box-shadow: 0px 0px 0px 4px #fd0;
+  -webkit-box-shadow: 0px 0px 0px 4px #fd0;
+  -moz-box-shadow: 0px 0px 0px 4px #fd0;
+  outline: none; 
+  text-decoration: none;
+}
+.govgr-masthead {
+  @apply bg-secondary-600 text-content-dark;
+  .govgr-grid-column-two-thirds >*:last-child {
+      @apply mb-0;
+  }
+  .govgr-body {
+    @apply text-content-dark;
+  }
+}
+.govgr-masthead-body {
+  @apply md:mb-10 mb-6 text-base-content-invert md:text-lg text-base leading-7;
+}
+.govgr-masthead-logo {
+  @apply md:mb-6 mb-4 h-10;
+}

package/src/components/index.css

@@ -0,0 +1,24 @@
+@import "./accordion.css";
+@import "./button.css";
+@import "./form.css";
+@import "./checkboxes.css";
+@import "./radios.css";
+@import "./header.css";
+@import "./footer.css";
+@import "./layout.css";
+@import "./nav.css";
+@import "./typography.css";
+@import "./table.css";
+@import "./filter.css";
+@import "./admin-layout.css";
+@import "./admin-form.css";
+@import "./admin-header.css";
+@import "./breadcrumps.css";
+@import "./card.css";
+@import "./details.css";
+@import "./notification-banner.css";
+@import "./panel.css";
+@import "./phase-banner.css";
+@import "./summary-list.css";
+@import "./tabs.css";
+@import "./misc.css"

package/src/components/layout.css

@@ -0,0 +1,61 @@
+.govgr-layout-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.govgr-layout-wrapper__full-height {
+  
+  min-height: 100vh;
+}
+
+.govgr-width-container {
+    @apply  max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
+    flex: 1 1 0%;
+}
+.govgr-full-width-container {
+  @apply max-w-full box-border mx-auto px-3 md:px-6 w-full;
+    flex: 1 1 0%;
+}
+.govgr-main-wrapper {
+    @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16;
+}
+.govgr-grid-column-two-thirds {
+    @apply col-span-2;
+}
+.govgr-grid-column-one-third {
+    @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit-content;
+}
+.govgr-top {
+    @apply mb-4;
+}
+.govgr-bottom {
+    @apply w-full flex flex-wrap  box-border;
+}
+.govgr-button-group {
+    @apply flex flex-wrap;
+    &>.govgr-link {
+        @apply flex mb-8 text-lg;
+    }
+}
+.govgr-section-break {
+    @apply m-auto px-4 py-2 border-0 w-full;
+}
+.govgr-section-break--visible {
+    @apply border-t border-gray-50;
+}
+.govgr-section-break--m {
+ @apply mb-5;
+}
+.govgr-section-break--l {
+ @apply mb-7;
+}
+.govgr-section-break--xl {
+ @apply mb-9;
+}
+.important-bg {
+    @apply bg-error;
+}
+.info-bg {
+    @apply bg-base-100 text-base-content;
+}