@digigov/css 0.38.2 → 1.0.0-rc

package/src/components/stepnav.css

@@ -1,4 +1,3 @@
-
 .govgr-step-nav {
   @apply mb-8 md:mb-12;
   .govgr-link {
@@ -7,26 +6,26 @@
 }
 .govgr-step-nav__controls {
   @apply text-right;
-    padding: 3px 3px 3px 0;
+  padding: 3px 3px 3px 0;
 }
 .govgr-step-nav__steps {
   @apply p-0 m-0;
 }
-.govgr-step-nav__step{
+.govgr-step-nav__step {
   @apply relative list-none pl-11 md:pl-14;
   &:last-child:after {
-      height: calc(100% - 2rem);
-    }
-    &:after {
-      @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
-      content: "";
-      margin-left: calc(0.75rem + 1px);
-    }
-    &:last-child:before {
-      @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-base-400;
-      @apply md:border-t-2 md:ml-2 md:w-5;
-      content: "";
-    }
+    height: calc(100% - 2rem);
+  }
+  &:after {
+    @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
+    content: "";
+    margin-left: calc(0.75rem + 1px);
+  }
+  &:last-child:before {
+    @apply absolute z-1 left-0 h-0 bottom-0 ml-2 w-3 border border-base-400;
+    @apply md:border-t-2 md:ml-2 md:w-5;
+    content: "";
+  }
 }
 @media (min-width: 768px) {
   .govgr-step-nav__step {
@@ -35,44 +34,19 @@
     }
   }
 }
-.govgr-step-nav__circle {
-  @apply absolute box-border z-1 bg-white rounded-full text-center
-  left-0 w-7 h-7;
-}
-.govgr-step-nav__circle-inner {
-  @apply float-right min-w-full;
-}
-.govgr-step-nav__circle-background {
-  text-shadow: 0 -0.1em 0 var(--color-white), 0.1em 0 0 var(--color-white), 0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
-}
-.govgr-step-nav__circle--number {
-  @apply border-2 border-base-400;
-}
-
-.govgr-step-nav__circle--number {
-  @apply text-base font-bold;
-  @apply md:text-lg md:leading-7 md:border-3;
-}
-.govgr-step-nav__circle {
-  @apply  md:w-9 md:h-9;
-}
-.govgr-step-nav__circle--number__no-border{
-  @apply md:border-0 border-0;
-}
 .govgr-step-nav__accordion {
-  @apply  border-base-400;
-
+  @apply border-base-400;
   &:first-child {
     @apply border-t-2;
   }
 }
 .govgr-step-nav__accordion[open] {
 
-  .govgr-accordion__section-opened {
+  .govgr-step-nav__accordion__opened {
     visibility: visible;
     display: block;
   }
-  .govgr-accordion__section-closed {
+  .govgr-step-nav__accordion__closed {
     visibility: hidden;
     display: none;
   }
@@ -90,24 +64,25 @@
   }
   &:hover {
     @apply text-link-hover;
-    .govgr-step-nav__accordion__opened, .govgr-step-nav__accordion__closed {
+    .govgr-step-nav__accordion__opened,
+    .govgr-step-nav__accordion__closed {
       @apply underline;
       text-decoration-thickness: 2px;
     }
   }
   &:focus {
     .govgr-step-nav__accordion__heading__title {
-      @apply  bg-focus  text-base-content;
+      @apply bg-focus text-base-content;
       box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
     }
-    .govgr-step-nav__accordion__opened, .govgr-step-nav__accordion__closed {
+    .govgr-step-nav__accordion__opened,
+    .govgr-step-nav__accordion__closed {
       @apply no-underline text-base-content;
     }
   }
   &:focus-visible {
     @apply outline-none;
   }
-
   &:focus-within {
     @apply outline-none;
   }
@@ -118,32 +93,51 @@
 .govgr-step-nav__accordion__heading__text {
   @apply no-underline text-xl font-semibold mb-0;
 }
-.govgr-step-nav__accordion__closed, .govgr-step-nav__accordion__opened {
+.govgr-step-nav__accordion__closed,
+.govgr-step-nav__accordion__opened {
   @apply text-link no-underline;
-} 
-.govgr-nav-step__accordion__content {
-  @apply hidden md:pt-2 mb-6 pt-1 mx-0;
-
-  >*:last-child {
-    @apply mb-0;
-  }
 }
 .govgr-step-nav__accordion__heading {
-  .govgr-step-nav__accordion__heading__text{
+  .govgr-step-nav__accordion__heading__text {
     @apply md:text-2xl text-xl;
   }
-  .govgr-step-nav__accordion__closed, .govgr-step-nav__accordion__opened {
+  .govgr-step-nav__accordion__closed,
+  .govgr-step-nav__accordion__opened {
     @apply md:text-sm text-xs;
-  } 
+  }
 }
-.govgr-step-nav__accordion__heading-m {
+.govgr-step-nav__accordion__heading--md {
   .govgr-step-nav__accordion__heading__text {
     @apply md:text-xl text-lg;
-  } 
+  }
 }
-.govgr-step-nav__accordion__heading-s {
+.govgr-step-nav__accordion__heading--sm {
   .govgr-step-nav__accordion__heading__text {
     @apply md:text-lg text-base;
   }
 }
-
+.govgr-step-nav__circle {
+  @apply absolute box-border z-1 bg-white rounded-full text-center
+  left-0 w-7 h-7;
+  @apply md:w-9 md:h-9;
+}
+.govgr-step-nav__circle--number {
+  @apply border-2 border-base-400 text-base font-bold;
+  @apply md:text-lg md:leading-7 md:border-3;
+}
+.govgr-step-nav__circle--number__no-border {
+  @apply md:border-0 border-0;
+}
+.govgr-step-nav__circle-inner {
+  @apply float-right min-w-full;
+}
+.govgr-step-nav__circle-background {
+  text-shadow: 0 -0.1em 0 var(--color-white), 0.1em 0 0 var(--color-white),
+    0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
+}
+.govgr-nav-step__accordion__content {
+  @apply hidden md:pt-2 mb-6 pt-1 mx-0;
+  > *:last-child {
+    @apply mb-0;
+  }
+}

package/src/components/summary-list.css

@@ -8,28 +8,35 @@
   .govgr-dropdown__content {
     @apply mt-2;
   }
-  .govgr-button-group {
+  .govgr-btn-group {
     @apply mb-0 text-right sm:justify-end gap-y-2;
   }
 }
-
-.govgr-summary-list__row {  
+.govgr-summary-list--no-border {
+  .govgr-summary-list__key,
+  .govgr-summary-list__value,
+  .govgr-summary-list__actions {
+    @apply sm:border-0 pb-2;
+  }
+}
+.govgr-summary-list__row {
   @apply block sm:flex
   pb-4 mb-4 border-b border-solid border-base-300
   sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
 }
-.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__row--no-border {
+  .govgr-summary-list__key,
+  .govgr-summary-list__value,
+  .govgr-summary-list__actions {
+    @apply sm:border-0 pb-2;
+  }
 }
 .govgr-summary-list__key {
   @apply font-bold mb-1 sm:w-3/12;
 }
 @media print {
-  .govgr-summary-list__key{
-   flex:100%;
+  .govgr-summary-list__key {
+    flex: 100%;
   }
 }
 .govgr-summary-list__value {
@@ -50,36 +57,22 @@
 }
 /* When "value" is 1st or 2nd among 2 children */
 .govgr-summary-list__value:nth-child(2):nth-last-child(1),
-.govgr-summary-list__value:nth-child(1):nth-last-child(2){
+.govgr-summary-list__value:nth-child(1):nth-last-child(2) {
   @apply sm:w-9/12;
 }
 /* When there is only one child */
-.govgr-summary-list__key:only-child, 
-.govgr-summary-list__value:only-child, 
+.govgr-summary-list__key:only-child,
+.govgr-summary-list__value:only-child,
 .govgr-summary-list__actions:only-child {
-    @apply sm:w-full sm:text-left;
+  @apply sm:w-full sm:text-left;
 }
-.govgr-summary-list__key, 
+.govgr-summary-list__key,
 .govgr-summary-list__value {
   @apply break-words;
 }
-.govgr-summary-list__key, 
-.govgr-summary-list__value, 
+.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-base-300; 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-base-300;
 }
-.govgr-summary-list--no-border {
-  .govgr-summary-list__key, 
-  .govgr-summary-list__value, 
-  .govgr-summary-list__actions {
-    @apply sm:border-0 pb-2;
-  }
-}
-.govgr-summary-list__row--no-border {
-  .govgr-summary-list__key, 
-  .govgr-summary-list__value, 
-  .govgr-summary-list__actions {
-    @apply sm:border-0 pb-2;
-  }
-}

package/src/components/svg-icons.css

@@ -2,7 +2,50 @@
   @apply h-4 w-4 inline transition-transform;
   fill: var(--color-base-content);
 }
-.govgr-btn-primary, .govgr-btn-warning {
+.govgr-svg-icon--dark {
+  fill: var(--color-base-content) !important;
+}
+.govgr-svg-icon--light {
+  fill: var(--color-white) !important;
+}
+.govgr-svg-icon--gray {
+  fill: var(--color-base-400) !important;
+}
+.govgr-svg-icon--primary {
+  fill: var(--color-primary) !important;
+}
+.govgr-svg-icon--success {
+  fill: var(--color-success) !important;
+}
+.govgr-svg-icon--warning {
+  fill: var(--color-warning) !important;
+}
+.govgr-svg-icon--error {
+  fill: var(--color-error) !important;
+}
+.govgr-svg-icon--focus {
+  fill: var(--color-focus) !important;
+}
+.govgr-svg-icon--link {
+  fill: var(--color-link) !important;
+}
+.govgr-svg-icon--xs {
+  @apply h-3 w-3 !important;
+}
+.govgr-svg-icon--sm {
+  @apply h-4 w-4 !important;
+}
+.govgr-svg-icon--md {
+  @apply h-6 w-6 !important;
+}
+.govgr-svg-icon--lg {
+  @apply h-8 w-8 !important;
+}
+.govgr-svg-icon--xl {
+  @apply h-10 w-10 !important;
+}
+.govgr-btn-primary,
+.govgr-btn-warning {
   .govgr-svg-icon {
     fill: var(--color-white);
   }
@@ -19,7 +62,9 @@
   }
 }
 @media print {
-  .govgr-btn-primary, .govgr-btn-warning, .govgr-btn-secondary {
+  .govgr-btn-primary,
+  .govgr-btn-warning,
+  .govgr-btn-secondary {
     .govgr-svg-icon {
       fill: var(--color-base-content);
     }
@@ -27,75 +72,71 @@
 }
 .govgr-link {
   .govgr-svg-icon {
-    fill:var(--color-link);
+    fill: var(--color-link);
   }
   &:hover {
     .govgr-svg-icon {
-      fill:var(--color-link-hover);
+      fill: var(--color-link-hover);
     }
   }
   &:focus {
     .govgr-svg-icon {
-      fill:var(--color-link-active);
+      fill: var(--color-link-active);
     }
   }
 }
-.govgr-header, .govgr-admin-header {
+.govgr-header,
+.govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-white);
+      fill: var(--color-white);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-white);
+        fill: var(--color-white);
       }
     }
     &:focus {
       .govgr-svg-icon {
-        fill:var(--color-link-active);
+        fill: var(--color-link-active);
       }
     }
   }
 }
-.govgr-svg-icon--dark {
-  fill: var(--color-base-content) !important;
-}
-.govgr-svg-icon--light {
-  fill: var(--color-white) !important;
-}
-.govgr-svg-icon--gray {
-  fill: var(--color-base-400) !important;
-}
-.govgr-svg-icon--primary {
-  fill: var(--color-primary) !important;
-}
-.govgr-svg-icon--success {
-  fill: var(--color-success) !important;
-}
-.govgr-svg-icon--warning {
-  fill: var(--color-warning) !important;
-}
-.govgr-svg-icon--error {
-  fill: var(--color-error) !important;
-}
-.govgr-svg-icon--focus {
-  fill: var(--color-focus) !important;
-}
-.govgr-svg-icon--link {
-  fill: var(--color-link) !important;
-}
-.govgr-svg-icon--s {
-  @apply h-3 w-3 !important;
-}
-.govgr-svg-icon--m {
-  @apply h-4 w-4 !important;
-}
-.govgr-svg-icon--l {
-  @apply h-6 w-6 !important;
+.govgr-svg-icon--burger {
+  fill: var(--color-base-content);
+  /* @apply w-8 h-8 float-right cursor-pointer transition-all  */
+  @apply transition-all focus:bg-focus;
+  @apply cursor-pointer;
+  #govgr-svg-icon--burger__line-1,
+  #govgr-svg-icon--burger__line-2,
+  #govgr-svg-icon--burger__line-3 {
+    @apply transition-all;
+  }
+  #govgr-svg-icon--burger__line-1 {
+    x: 2px;
+    y: 3px;
+  }
+  #govgr-svg-icon--burger__line-2 {
+    x: 2px;
+    y: 10.3px;
+  }
+  #govgr-svg-icon--burger__line-3 {
+    @apply origin-top-left;
+    x: 2px;
+    y: 17.7px;
+  }
 }
-.govgr-svg-icon--xl {
-  @apply h-8 w-8 !important;
+.govgr-svg-icon--burger--active {
+  #govgr-svg-icon--burger__line-1 {
+    transform: rotate(45deg);
+    transform-origin: 3px 8px;
+  }
+  #govgr-svg-icon--burger__line-2 {
+    @apply w-0 origin-center;
+  }
+  #govgr-svg-icon--burger__line-3 {
+    transform: rotate(-45deg);
+    transform-origin: 3px 16px;
+  }
 }
-.govgr-svg-icon--xxl {
-  @apply h-10 w-10 !important;
-}

package/src/components/table.css

@@ -1,24 +1,20 @@
-/* don't use the .example class */
-.example {
-  @apply px-5 py-5;
-}
 .govgr-table__caption {
   @apply table-caption text-left font-bold;
 }
-.govgr-table__caption--s {
+.govgr-table__caption--sm {
   @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
 }
-.govgr-table__caption--m {
+.govgr-table__caption--md {
   @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
 }
-.govgr-table__caption--l {
+.govgr-table__caption--lg {
   @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7 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 antialiased;
 }
 .govgr-table-container {
-  @apply w-full  overflow-x-auto md:mb-10 mb-6;
+  @apply w-full overflow-x-auto md:mb-10 mb-6;
   .govgr-table {
     @apply mb-0;
   }
@@ -30,8 +26,22 @@
   @apply w-full border-collapse table;
   @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
+  .govgr-dropdown__content{
+    @apply mt-0;
+  }
+  .govgr-dropdown__button {
+    @apply mb-0;
+  }
+}
+.govgr-table-sort__icons-container{
+  @apply flex flex-col;
 }
-.govgr-table--with-vertical-lines {
+@supports (-moz-appearance: none) {
+  .govgr-table {
+    border-collapse: unset;
+  }
+}
+.govgr-table--vertical-lines {
   .govgr-table__cell,
   .govgr-table__header {
     @apply border-l border-r border-solid border-base-300 px-4;
@@ -40,33 +50,8 @@
     @apply border-t border-base-300 text-base-content !important;
   }
 }
-.govgr-table__header {
-  .govgr-dropdown__button {
-    @apply no-underline font-bold text-base-content !important;
-  }
-  .govgr-dropdown__button--underline:not(:focus) {
-    @apply underline !important;
-    text-decoration-thickness: 2px !important;
-  }
-  .govgr-dropdown__content {
-    @apply py-0;
-  }
-  .govgr-vertical-nav__item {
-    @apply flex font-normal no-underline;
-  }
-  .govgr-vertical-nav__item--active:not(:focus) {
-    @apply bg-base-200 font-normal !important;
-  }
-}
-.govgr-table__body {
-  @apply relative;
-}
-
 @supports (-moz-appearance: none) {
-  .govgr-table {
-    border-collapse: unset;
-  }
-  .govgr-table--with-vertical-lines {
+  .govgr-table--vertical-lines {
     .govgr-table__header {
       @apply border-t;
       @apply border-r-0 !important;
@@ -95,7 +80,7 @@
   .govgr-btn {
     @apply mb-0;
   }
-  .govgr-button-group {
+  .govgr-btn-group {
     @apply mb-0;
   }
 }
@@ -106,12 +91,12 @@
     @apply px-4 !important;
   }
 }
-.govgr-table--with-vertical-lines.govgr-table--light {
+.govgr-table--vertical-lines.govgr-table--light {
   .govgr-table__body .govgr-table__header {
     @apply border-l border-solid border-base-300 !important;
   }
 }
-.govgr-table--with-vertical-lines.govgr-table--dark {
+.govgr-table--vertical-lines.govgr-table--dark {
   .govgr-table__header {
     @apply border-0;
     @apply print:border;
@@ -157,7 +142,7 @@
     @apply block font-semibold;
   }
 }
-.govgr-table--stacked-s {
+.govgr-table--stacked-sm {
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
@@ -180,7 +165,7 @@
     }
   }
 }
-.govgr-table--stacked-m {
+.govgr-table--stacked-md {
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
@@ -203,16 +188,8 @@
     }
   }
 }
-.govgr-table__header,
-.govgr-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
-  &:last-child {
-    @apply pr-0;
-  }
-}
-.govgr-table__header--numeric,
-.govgr-table__cell--numeric {
-  @apply text-right;
+.govgr-table__body {
+  @apply relative;
 }
 .govgr-table__body--vertical-top {
   .govgr-table__cell {
@@ -224,6 +201,52 @@
     @apply align-bottom;
   }
 }
+.govgr-table__row {
+  @apply bg-base-100;
+}
+.govgr-table__row--warning {
+  @apply border-l-4 border-warning;
+  .govgr-table__cell:first-child {
+    @apply pl-2;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__button {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus) {
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-dropdown__content {
+    @apply py-0;
+  }
+  .govgr-vertical-nav__item {
+    @apply flex font-normal no-underline;
+  }
+  .govgr-vertical-nav__item--active:not(:focus) {
+    @apply bg-base-200 font-normal !important;
+  }
+}
+.govgr-table__cell {
+  .govgr-btn {
+    @apply mb-0;
+  }
+  .govgr-button-group {
+    @apply mb-0;
+  }
+}
+.govgr-table__header,
+.govgr-table__cell {
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
+  &: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;
@@ -232,11 +255,17 @@
 .govgr-table__cell--no-data {
   @apply border-b-0 pt-2.5;
 }
+.govgr-table--dark,
+.govgr-table--zebra {
+  .govgr-table__header,
+  .govgr-table__cell {
+    @apply px-4 !important;
+  }
+}
 .govgr-table__loading {
   @apply h-full w-full absolute right-0 left-0 flex items-center justify-center
    bg-white bg-opacity-50 print:hidden;
 }
-
 @supports (
   (-webkit-backdrop-filter: blur(0.6px)) or (backdrop-filter: blur(0.6px))
 ) {