@digigov/css 0.7.2 → 0.9.0

package/src/components/nav.css

@@ -1,36 +1,43 @@
-/* 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 ;
-        }
-    }
+/* icon and transition of the burger icon */
+.govgr-header {
+  .govgr-burger-icon {
+      fill: var(--color-white) ;
+  }
+}
+
+.govgr-burger-icon {
+  fill: var(--color-base-content) ;
+  @apply w-8 h-8 sm:hidden float-right cursor-pointer transition-all z-30
+  focus:bg-focus;
+  * {
+    @apply transition-all;
+  }
+}
+#govgr-burger-icon__line-1 {
+  x:2px;
+  y:3px;
+}
+#govgr-burger-icon__line-2 {
+  x:2px;
+  y:10.3px;
+}
+#govgr-burger-icon__line-3 {
+  @apply origin-top-left;
+  x:2px;
+  y:17.7px;
+}
+.govgr-burger-icon--active {
+  #govgr-burger-icon__line-1 {
+    transform: rotate(45deg);
+    transform-origin: 3px 8px;
+  }
+  #govgr-burger-icon__line-2 {
+    @apply w-0 origin-center;
+  }
+  #govgr-burger-icon__line-3 {
+    transform: rotate(-45deg);
+    transform-origin: 3px 16px
+  }
 }
 
 /* --- HORIZONTAL ---  */

package/src/components/svg-icons.css

@@ -0,0 +1,44 @@
+svg, .govgr-svg-icon {
+  @apply h-4 w-4 inline transition-all;
+  fill: var(--color-base-content);
+}
+.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-gray-200) !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;
+}
+.govgr-svg-icon--m {
+  @apply h-4 w-4;
+}
+.govgr-svg-icon--l {
+  @apply h-6 w-6;
+}
+.govgr-svg-icon--xl {
+  @apply h-10 w-10;
+}

package/src/components/typography.css

@@ -136,6 +136,10 @@
         text-decoration:none;
         outline: none; 
   }
+  .govgr-caret--left {
+    fill:var(--color-base-content);
+    @apply w-4 h-4 inline-block mr-2;
+  }
 }
 .govgr-background-dark {
   .govgr-back-link {

package/src/pages/admin-filtering-data.js

@@ -18,11 +18,10 @@ export default function Home() {
                 <label className="govgr-label"> Αναζήτηση με λέξη-κλειδί  </label>
                 <div className="govgr-search">
                   <input className="govgr-input" type="text" id="business-name" name="business-name" />
-                  <button className="govgr-btn govgr-input__search-button">
-                    <div className="govgr-input__search-button-icon">
-                      <span className="govgr-input__search-button-icon1"></span>
-                      <span className="govgr-input__search-button-icon2"></span>
-                    </div>
+                  <button className="govgr-btn govgr-input__search-btn">
+                    <svg className="govgr-search-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" > 
+                      <path d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"/>
+                    </svg>
                   </button>
                 </div>
               </div>
@@ -32,8 +31,8 @@ export default function Home() {
                 <div className="govgr-filter__heading">
                   <a className="govgr-link govgr-filter__close-link" href="#">
                     Κλείσιμο
-                    <span className="govgr-close-icon"><span className="govgr-close-icon__line1"></span><span className="govgr-close-icon__line2"></span></span>
-                  </a>
+                    <svg class="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                    </a>
                   <h3 className="govgr-heading-m">Φίλτρα</h3>
                 </div>
                 <div className="govgr-filter__content">
@@ -51,9 +50,15 @@ export default function Home() {
                     </div>
                     <h4 className="govgr-chip--heading">Περιοχή</h4>
                     <ul className="govgr-chips">
-                      <li><a className="govgr-chip" href="#">Άλιμος <div className="govgr-chip--x-icon"><span className="govgr-chip--x-line1"></span><span className="govgr-chip--x-line2"></span></div></a></li>
-                      <li><a className="govgr-chip" href="#">Πετρούπολη <div className="govgr-chip--x-icon"><span className="govgr-chip--x-line1"></span><span className="govgr-chip--x-line2"></span></div> </a></li>
-                      <li><a className="govgr-chip" href="#">Δροσιά <div className="govgr-chip--x-icon"><span className="govgr-chip--x-line1"></span><span className="govgr-chip--x-line2"></span></div> </a></li>
+                      <li><a className="govgr-chip" href="#">Άλιμος
+                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                      </a></li>
+                      <li><a className="govgr-chip" href="#">Πετρούπολη <div className="govgr-chip--x-icon">
+                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                      </div> </a></li>
+                      <li><a className="govgr-chip" href="#">Δροσιά <div className="govgr-chip--x-icon">
+                        <svg className="govgr-close-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
+                      </div> </a></li>
                     </ul>
                   </div>
                   <div className="govgr-filter__options">

package/src/pages/index.js

@@ -7,11 +7,9 @@ export default function Home() {
       <header className="govgr-header">
         <div className="govgr-header-container">
           <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
-          <div className="govgr-burger-menu active">
-            <div class="govgr-burger-menu__line1"></div>
-            <div class="govgr-burger-menu__line2"></div>
-            <div class="govgr-burger-menu__line3"></div>
-          </div>
+            <svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
+              <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
+            </svg>
         </div>
       </header>
       <nav className="govgr-horizontal-nav test-header-nav">
@@ -26,12 +24,10 @@ export default function Home() {
       </nav>
       <header className="govgr-header">
         <div className="govgr-header__container">
-            <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
-            <div className="govgr-burger-menu govgr-burger-menu--active">
-            <div className="govgr-burger-menu__line1"></div>
-            <div className="govgr-burger-menu__line2"></div>
-            <div className="govgr-burger-menu__line3"></div>
-            </div>
+          <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+            <svg class="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
+              <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
+            </svg>
         </div>
     </header>
     <nav className="govgr-horizontal-nav">
@@ -43,6 +39,10 @@ export default function Home() {
         </div>
     </nav>
 
+    <svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
+      <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
+    </svg>
+
 
       {/*new className: "govgr-masthead" -->
       new className: "govgr-background-dark" */}
@@ -66,7 +66,7 @@ export default function Home() {
 
                 <button className="govgr-btn govgr-btn-primary">
                   Συνέχεια
-                  <span className="right-arrow"></span>
+                  <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
                 </button>
                 <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
                 <button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
@@ -123,23 +123,21 @@ export default function Home() {
 
             <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
               Είσοδος στην υπηρεσία
-              <span className="right-arrow"></span>
+              <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
             </button>
             <div className="govgr-button-group">
               <button className="govgr-btn govgr-btn-primary">
                 Συνέχεια
-                {/*<span className="right-arrow"></span>  */}
               </button>
               <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
               <button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
             </div>
 
             <a href="#" className="govgr-back-link">
-              <span className="govgr-caret-left"></span>
+              <svg class="govgr-caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z"/></svg>
               Πίσω
             </a>
             <br />
-            {/*<button className="govgr-btn-back"><span className="back-arrow"></span> Πίσω</button> */}
 
             <div className="govgr-breadcrumbs">
               <ol className="govgr-breadcrumbs__list">
@@ -418,18 +416,12 @@ export default function Home() {
             <h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>
 
             <p className="p">Παρακάτω, θα οδηγηθείτε στην σελίδα της καταχώρησης μιας φόρμας. Εμφανίζονται ενδεικτικά παραδείγματα.</p>
-            {/* <button className="govgr-btn-primary govgr-btn-cta">
-              Συμπληρώστε την φόρμα
-              <span className="right-arrow"></span>
-            </button> */}
 
-            <a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta">Συμπληρώστε την φόρμα
-              <span className="right-arrow"></span>
+            <a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta">
+              Συμπληρώστε την φόρμα
+            <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
             </a>
 
-
-
-
           </div>
         </div>
       </div>

package/tailwind.config.js

@@ -1,5 +1,7 @@
+const plugin = require('tailwindcss/plugin')
 const defaultTheme = require('tailwindcss/defaultTheme')
 const colors = require('./colors');
+const colorVarsPlugin = require('./color-vars.plugin')
 
 const buildOnly = !process.env['DIGIGOV_CSS_BUILD'] ? {
   mode: 'jit',
@@ -7,7 +9,7 @@ const buildOnly = !process.env['DIGIGOV_CSS_BUILD'] ? {
 module.exports = {
   ...buildOnly,
   theme: {
-    colors: require('./colors'),
+    colors,
     container: {
       center: true,
     },
@@ -94,39 +96,6 @@ module.exports = {
     }
   },
   plugins: [
-    function({ addBase, theme }) {
-      function extractColorVars(colorObj, colorGroup = '') {
-        return Object.keys(colorObj).reduce((vars, colorKey) => {
-          const value = colorObj[colorKey];
-
-          const newVars =
-            typeof value === 'string'
-              ? { [`--color${colorGroup}-${colorKey}`]: value }
-              : extractColorVars(value, `-${colorKey}`);
-
-          return { ...vars, ...newVars };
-        }, {});
-      }
-      addBase({
-        ':root': extractColorVars(theme('colors')),
-      });
-    },
+    plugin(colorVarsPlugin) 
   ],
-  // corePlugins: [
-  //   'animation',
-  //   'backgroundColor',
-  //   'backgroundImage',
-  //   'borderColor',
-  //   'divideColor',
-  //   'gradientColorStops',
-  //   'placeholderColor',
-  //   'preflight',
-  //   'ringColor',
-  //   'ringOffsetColor',
-  //   'ringOffsetWidth',
-  //   'ringOpacity',
-  //   'ringWidth',
-  //   'textColor',
-  //   'transitionProperty',
-  // ],
 };