@digigov/css 0.17.1 → 0.18.0

package/src/components/header.css

@@ -1,5 +1,5 @@
 .govgr-header {
-  @apply bg-primary border-b-8 border-secondary-600;
+  @apply bg-primary border-b-8 border-secondary600;
   border-bottom-style: solid;
 }
 .govgr-header__container {
@@ -12,8 +12,8 @@
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2;
 }
 .govgr-header-title {
-  @apply text-base-100 font-bold text-2xl leading-10 tracking-wide no-underline
-  w-auto align-middle hover:text-base-100 hover:no-underline ;
+  @apply text-base100 font-bold text-2xl leading-10 tracking-wide no-underline
+  w-auto align-middle hover:text-base100 hover:no-underline ;
 }
 .govgr-header-title:focus {
   text-decoration:none;
@@ -34,7 +34,7 @@
   text-decoration: none;
 }
 .govgr-masthead {
-  @apply bg-secondary-600 text-content-dark;
+  @apply bg-secondary600 text-content-dark;
   .govgr-grid-column-two-thirds >*:last-child {
     @apply mb-0;
   }

package/src/components/layout.css

@@ -31,10 +31,7 @@
 }
 .govgr-button-group {
   @apply flex flex-wrap gap-4 mb-6;
-  &>.govgr-link {
-      @apply flex mb-8 text-lg;
-  }
-  .govgr-btn {
+  .govgr-btn, .govgr-link {
     @apply mb-0;
   }
 }
@@ -42,7 +39,7 @@
   @apply m-auto px-4 py-2 border-0 w-full;
 }
 .govgr-section-break--visible {
-  @apply border-t border-gray-50;
+  @apply border-t border-gray50;
 }
 .govgr-section-break--m {
  @apply mb-5;

package/src/components/misc.css

@@ -6,7 +6,7 @@
   @apply border-8;
 }
 .govgr-blockquote {
-  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-200;
+  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base200;
 }
 .govgr-error-summary {
   @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
@@ -43,11 +43,11 @@
   &: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;
+      @apply text-white rounded-sm bg-primary200 bg-opacity-90 shadow;
 
       &::after {
         content: "";
-        @apply -top-3 left-1/2 -mr-1 border-6 border-primary-200 opacity-85 absolute;
+        @apply -top-3 left-1/2 -mr-1 border-6 border-primary200 opacity-85 absolute;
         border-right-color: transparent;
         border-left-color: transparent;
         border-top-color: transparent;

package/src/components/modal.css

@@ -1,13 +1,13 @@
 .govgr-modal {
   @apply hidden justify-center items-center content-center
-  mb-7 text-base-content bg-opacity-50 bg-gray-200
+  mb-7 text-base-content bg-opacity-50 bg-gray200
   fixed z-10 left-0 top-0 w-full h-full overflow-auto; 
 }
 .govgr-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
-  h-fit md:h-auto my-auto mx-4
+  h-fit md:h-auto mx-4
   bg-white
-  border border-solid border-base-200;
+  border border-solid border-base200;
 }
 .govgr-modal__content {
   @apply grid gap-6 p-5;

package/src/components/nav.css

@@ -49,12 +49,12 @@
 
 /* --- HORIZONTAL ---  */
 .govgr-horizontal-nav {
-  @apply fixed w-3/4 sm:w-full h-full bg-secondary-800 text-content-dark
+  @apply fixed w-3/4 sm:w-full h-full bg-secondary800 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 
+  border-b border-base150 
   ;
 }
 .govgr-horizontal-nav__container {

package/src/components/notification-banner.css

@@ -1,5 +1,5 @@
 .govgr-notification-banner {
-  @apply bg-secondary-600 border-5 border-secondary-600 mb-6 md:mb-8 font-normal;
+  @apply bg-secondary600 border-5 border-secondary600 mb-6 md:mb-8 font-normal;
 }
 .govgr-notification-banner--success{
   @apply bg-success border-success;

package/src/components/pagination.css

@@ -24,9 +24,9 @@
 }
 .govgr-pagination__item--inactive {
   .govgr-link {
-    @apply flex text-gray-600 cursor-not-allowed no-underline font-normal;
+    @apply flex text-gray600 cursor-not-allowed no-underline font-normal;
   }
   .govgr-arrow--left, .govgr-arrow--right {
-    fill:var(--color-gray-600);
+    fill:var(--color-gray600);
   }
 }

package/src/components/phase-banner.css

@@ -2,13 +2,13 @@
   @apply py-2 mb-4;
 }
 .govgr-phase-banner__underline {
-  @apply border-base-200 border-b;
+  @apply border-base200 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;
+  @apply px-2 py-1 mr-2 inline-block bg-secondary600 font-sans text-white text-sm uppercase tracking-widest;
 }
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;

package/src/components/summary-list.css

@@ -5,7 +5,7 @@
 }
 .govgr-summary-list__row {  
   @apply block sm:table-row
-  pb-4 mb-4 border-b border-solid border-gray-50
+  pb-4 mb-4 border-b border-solid border-gray50
   sm:pb-0 sm:mb-0 sm:border-0 ;
 }
 .govgr-summary-list--no-border .govgr-summary-list__row {  
@@ -31,7 +31,7 @@
 }
 .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; 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray50; 
 }
 .govgr-summary-list--no-border .govgr-summary-list__key, 
 .govgr-summary-list--no-border .govgr-summary-list__value, 

package/src/components/svg-icons.css

@@ -36,11 +36,11 @@
 .govgr-header, .govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-gray-100);
+      fill:var(--color-gray100);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-gray-100);
+        fill:var(--color-gray100);
       }
     }
     &:focus {
@@ -57,7 +57,7 @@
   fill: var(--color-white) !important;
 }
 .govgr-svg-icon--gray {
-  fill: var(--color-gray-200) !important;
+  fill: var(--color-gray200) !important;
 }
 .govgr-svg-icon--primary {
   fill: var(--color-primary) !important;

package/src/components/table.css

@@ -12,7 +12,7 @@
 }
 .govgr-table--with-vertical-lines {
   .govgr-table__cell {
-    @apply border-l border-r border-solid border-gray-50 !important;
+    @apply border-l border-r border-solid border-gray50 !important;
   } 
 }
 .govgr-table__body {
@@ -30,7 +30,7 @@
   }
 }
 .govgr-table--with-vertical-lines.govgr-table--light .govgr-table__body .govgr-table__header {
-    @apply border-l border-solid border-gray-50 !important;
+    @apply border-l border-solid border-gray50 !important;
   }
 .govgr-table--with-vertical-lines.govgr-table--dense.govgr-table--dark {
   .govgr-table__head .govgr-table__row .govgr-table__header:first-child {
@@ -50,13 +50,13 @@
     @apply py-3 !important;
   }
   .govgr-table__body .govgr-table__row .govgr-table__header {
-    @apply border-r border-solid border-gray-50 !important;
+    @apply border-r border-solid border-gray50 !important;
   }
 }
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {
-      @apply bg-base-100;
+      @apply bg-base100;
     }
   }
 }
@@ -87,7 +87,7 @@
   -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;
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-gray50 text-left align-middle;
    &:last-child {
       @apply pr-0;
     }

package/src/components/tabs.css

@@ -9,17 +9,17 @@
       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
+      @apply float-left relative md:border md:border-base100 md:bg-base100 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;
+        @apply no-underline md:border-base150 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 var(--color-gray-200);
+        border: 1px solid var(--color-gray200);
         border-bottom: 0;
         background-color: var(--color-white);
         &:hover {
@@ -50,7 +50,7 @@
     }
   }
   .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;
+    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base150 md:z-10 mb-0;
     &.govgr-tabs__panel-visible {
       @apply block;
     }

package/src/components/typography.css

@@ -11,13 +11,13 @@
   @apply md:text-lg text-base font-bold mx-0 md:mb-5 mb-3;
 }
 .govgr-caption-xl {
-  @apply block md:text-2xl text-xl mx-0 lg:mb-2 mb-1 text-base-300 font-normal;
+  @apply block md:text-2xl text-xl mx-0 lg:mb-2 mb-1 text-base300 font-normal;
 }
 .govgr-caption-l {
-  @apply block md:text-xl text-lg mx-0 mb-0 text-base-300 font-normal;
+  @apply block md:text-xl text-lg mx-0 mb-0 text-base300 font-normal;
 }
 .govgr-caption-m {
-  @apply block md:text-lg text-base mx-0 mb-0 text-base-300 font-normal;
+  @apply block md:text-lg text-base mx-0 mb-0 text-base300 font-normal;
 }
 .govgr-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
@@ -68,13 +68,13 @@
   @apply lg:text-base text-sm;
 }
 .govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-base-300;
+  @apply mb-4 lg:text-2xl text-lg text-base300;
 }
 .govgr-hint {
-  @apply mb-4 md:text-lg text-base text-base-300;
+  @apply mb-4 md:text-lg text-base text-base300;
 }
 .govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-base-300;
+  @apply mb-4 lg:text-base text-sm text-base300;
 }
 .govgr-background-dark {
   .govgr-hint {
@@ -101,10 +101,10 @@
 }
 .govgr-header {
   .govgr-header__container > .govgr-link {
-    @apply text-gray-100 focus:text-link-active;
+    @apply text-gray100 focus:text-link-active;
   }
   .govgr-header__content > .govgr-link {
-    @apply text-gray-100 focus:text-link-active;
+    @apply text-gray100 focus:text-link-active;
   }
 }
 .govgr-link--no-underline {

package/src/pages/form.js

@@ -245,6 +245,153 @@ export default function Home() {
                 Συνέχεια
               </button>
             </div>
+            <h2 className="govgr-heading-xl">Disabled</h2>
+            <div className="govgr-form">
+              <div className="govgr-field">
+                <fieldset className="govgr-fieldset" aria-describedby="radiohint">
+                  <legend className="govgr-heading-m govgr-fieldset__legend">
+                    Επιλέξτε την απάντηση σας
+                  </legend>
+                  <div className="govgr-radios">
+                    <div className="govgr-radios__item">
+                      <label className="govgr-radios__label">
+                        Ναι
+                        <input className="govgr-radios__input" type="radio" name="fav_language" value="ναι" disabled checked />
+                      </label>
+                    </div>
+                    <div className="govgr-radios__item">
+                      <label className="govgr-radios__label">
+                        Όχι
+                        <input className="govgr-radios__input" type="radio" name="fav_language" value="όχι" disabled/>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              
+              <div className="govgr-field">
+                <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
+                  <legend className="govgr-heading-m govgr-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
+                  <p className="govgr-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
+                  <div className="govgr-checkboxes">
+                    <div className="govgr-checkboxes__item">
+                      <label className="govgr-label govgr-checkboxes__label" >
+                        Ναι
+                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="ναι" disabled checked/>
+                      </label>
+                    </div>
+                    <div className="govgr-checkboxes__item">
+                      <label className="govgr-label govgr-checkboxes__label">
+                        Όχι
+                        <input className="govgr-checkboxes__input" type="checkbox" name="fav_language" value="όχι" disabled/>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              
+              <div className="govgr-field">
+                <label className='govgr-label'>
+                  <span className="govgr-heading-s">Ερώτηση</span>
+                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
+                  <input className="govgr-input" type="text" name="fname" disabled/>
+                </label>
+              </div>
+              
+              <div className="govgr-field">
+                <label className='govgr-label'>
+                  <span className="govgr-heading-s">Μια ακόμα ερώτηση</span>
+                  <p className="govgr-hint">Κάποια επεξήγηση εδώ.</p>
+                  <textarea className="govgr-textarea" name="ta" rows={5} disabled />
+                  <span className="govgr-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
+                </label>
+              </div>
+              
+              <div className="govgr-field">
+                <fieldset>
+                  <legend class="govgr-fieldset__legend govgr-heading-l" ></legend>
+                  <h4 className="govgr-fieldset__legend" >Επιλέξτε από την λίστα</h4>
+                  <p className="govgr-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
+                  <label className="govgr-label">
+                    <select className="govgr-select" id="select-list" name="select-list" defaultValue="one" disabled>
+                      <option value="one">Ένα</option>
+                      <option value="two">Δύο</option>
+                      <option value="three">Τρία</option>
+                      <option value="four">Τέσσερα</option>
+                    </select>
+                  </label>
+                </fieldset>
+              </div>
+              <div className="govgr-field">
+                <fieldset>
+                  <legend class="govgr-fieldset__legend govgr-heading-l" >
+                    Βασικές πληροφορίες
+                  </legend>
+                  <label className="govgr-label" >
+                    <span class="govgr-heading-s">Όνομα</span>
+                    <input className="govgr-input" type="text" name="fname" disabled />
+                  </label>
+                  <label className="govgr-label" >
+                    <span class="govgr-heading-s">Επώνυμο</span>
+                    <input className="govgr-input" type="text" name="lname" />
+                  </label>
+                  <label className="govgr-label">
+                    <span class="govgr-heading-s">Email</span>
+                    <input className="govgr-input" type="email" name="email" disabled value="test@test.com"/>
+                  </label>
+                  <label className="govgr-label">
+                    <span class="govgr-heading-s">Ημ/νια γέννησης</span>
+                    <input className="govgr-input" type="date" name="birthday" disabled/>
+                  </label>
+                </fieldset>
+              </div>
+              <div className="govgr-field">
+                <fieldset>
+                  <legend class="govgr-fieldset__legend govgr-heading-l">
+                    Πότε έγινε αυτό;
+                  </legend>
+                  <div className="govgr-date-input">
+                    <div className="govgr-date-input__item">
+                      <div className="govgr-field">
+                        <label className="govgr-label">
+                          Ημέρα
+                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" disabled/>
+                        </label>
+                      </div>
+                    </div>
+                    <div className="govgr-date-input__item">
+                      <div className="govgr-field">
+                        <label className="govgr-label">
+                          Μήνας
+                          <input className="govgr-input govgr-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
+                        </label>
+                      </div>
+                    </div>
+                    <div className="govgr-date-input__item">
+                      <div className="govgr-field">
+                        <label className="govgr-label">
+                          Έτος
+                          <input className="govgr-input govgr-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" disabled value="2022"/>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div className="govgr-field">
+                <label className="govgr-label label-file">
+                  Επιλογή αρχείου
+                  <p className="govgr-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
+                  <div className="upload-file" >
+                    <input className="govgr-file-upload" type="file" name="filename" disabled/>
+                  </div>
+                </label>
+              </div>
+
+              <button className="govgr-btn govgr-btn-primary">
+                Συνέχεια
+              </button>
+            </div>
           </div>
         </div>
       </div>