@xplortech/apollo-core 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to this project will be documented in this file.
 
 ---
 
+## [0.5.2] - 2022-02-08
+
+## Added
+
+- Navigation Items now also style buttons. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Changed
+
+- Update css for some application shell related components. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Fixed
+
+- Secondary navigation items had pointer-events: none preventing them from working. ([#80](https://github.com/xplor/apollo/pull/80))
+
+## Removed
+
+- with-subnav prop from Application Shell. ([#80](https://github.com/xplor/apollo/pull/80))
+
 ## [0.5.1] - 2022-02-02
 
 ### Changed

package/build/style.css

@@ -1394,24 +1394,16 @@ textarea[class^="xpl-"] {
 
 .xpl-application-shell {
   grid-template-areas:
-    "nav utility"
-    "nav content";
-  grid-template-columns: -webkit-min-content 1fr;
-  grid-template-columns: min-content 1fr;
+    "nav utility utility"
+    "nav subnav content";
+  grid-template-columns: -webkit-min-content -webkit-min-content 1fr;
+  grid-template-columns: min-content min-content 1fr;
   grid-template-rows: -webkit-min-content 1fr;
   grid-template-rows: min-content 1fr;
   max-height: 100vh;
   background-color: var(--xpl-color-navigation-lm);
 }
 
-.xpl-application-shell--with_subnav {
-    grid-template-areas:
-      "nav utility utility"
-      "nav subnav content";
-    grid-template-columns: -webkit-min-content -webkit-min-content 1fr;
-    grid-template-columns: min-content min-content 1fr;
-  }
-
 .xpl-application-shell__nav {
     grid-area: nav;
     height: 100vh;
@@ -4118,7 +4110,8 @@ a.xpl-list-item:focus {
   width: 240px;
 }
 
-.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a {
+.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a,
+      .xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type button {
         margin-bottom: 74px;
       }
 
@@ -4135,9 +4128,10 @@ a.xpl-list-item:focus {
     overflow-y: auto;
   }
 
-.xpl-main-nav .xpl-nav-item > a {
-    width: 240px;
-  }
+.xpl-main-nav .xpl-nav-item a,
+    .xpl-main-nav .xpl-nav-item button {
+      width: 240px;
+    }
 
 /* Brand Section */
 
@@ -4156,6 +4150,12 @@ a.xpl-list-item:focus {
       margin-left: 1rem;
     }
 
+.xpl-main-nav header img {
+      height: 42px;
+      width: 42px;
+      border-radius: 0.5rem;
+    }
+
 .xpl-main-nav header {
     display: flex;
     align-items: center;
@@ -4184,10 +4184,10 @@ a.xpl-list-item:focus {
       overflow-x: auto
 }
 
-.xpl-main-nav footer .xpl-nav-item > a svg {
-        color: var(--xpl-color-text-secondary-dm);
-        fill: currentColor;
-      }
+.xpl-main-nav footer .xpl-nav-item a svg, .xpl-main-nav footer .xpl-nav-item button svg {
+          color: var(--xpl-color-text-secondary-dm);
+          fill: currentColor;
+        }
 
 .xpl-main-nav footer {
     display: grid;
@@ -4199,52 +4199,56 @@ a.xpl-list-item:focus {
 
 /* Width for different screen sizes */
 
-.xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--md .xpl-nav-item a,
+      .xpl-main-nav--md .xpl-nav-item button {
         width: 112px;
       }
 
-.xpl-main-nav--md .xpl-nav-item a svg {
+.xpl-main-nav--md .xpl-nav-item a svg, .xpl-main-nav--md .xpl-nav-item button svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
-}
-
-.xpl-main-nav--md .xpl-avatar {
-      margin-left: 1rem;
-    }
+      }
 
-.xpl-main-nav--sm .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a,
+      .xpl-main-nav--sm .xpl-nav-item button {
         width: 74px;
       }
 
-.xpl-main-nav--sm .xpl-nav-item a p {
+.xpl-main-nav--sm .xpl-nav-item a p, .xpl-main-nav--sm .xpl-nav-item button p {
           display: none;
         }
 
-.xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp{
+.xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm .xpl-nav-item button .flatpickr-dayp{
           visibility:hidden
         }
 
-.xpl-main-nav--sm .xpl-nav-item a svg {
+.xpl-main-nav--sm .xpl-nav-item a svg, .xpl-main-nav--sm .xpl-nav-item button svg {
           margin-right: 0px;
         }
 
-.xpl-main-nav--sm .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
         display: grid;
         justify-items: center;
         grid-auto-flow: row
-}
+      }
 
-.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item a {
+.xpl-main-nav--sm .xpl-nav-item a,
+      .xpl-main-nav--sm .xpl-nav-item button,
+      .xpl-main-nav--md .xpl-nav-item a,
+      .xpl-main-nav--md .xpl-nav-item button {
         font-size: 0.875rem;
         line-height: 1rem;
+      }
+
+.xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button, .xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
         font-weight: 600;
         padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding-bottom: 0.75rem
       }
 
 .xpl-main-nav--sm header p, .xpl-main-nav--md header p {
@@ -4265,20 +4269,20 @@ a.xpl-list-item:focus {
         margin-right: 0px;
       }
 
-.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item div p {
+.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item button p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item button p, .xpl-main-nav--md footer .xpl-nav-item div p {
             display: none;
           }
 
-.xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
+.xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
             visibility:hidden
           }
 
-.xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item a {
+.xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--sm footer .xpl-nav-item button, .xpl-main-nav--md footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item button {
           display: inline-flex;
-          margin-bottom: 0px;
+          margin-bottom: 0px
         }
 
-.xpl-nav-item a svg {
+.xpl-nav-item a svg, .xpl-nav-item button svg {
       height: 2rem;
       margin-right: 0.75rem;
       fill: currentColor;
@@ -4287,26 +4291,26 @@ a.xpl-list-item:focus {
       width: 2rem;
     }
 
-.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg {
+.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg, .xpl-nav-item a:active svg, .xpl-nav-item button:hover svg, .xpl-nav-item button:focus svg, .xpl-nav-item button:active svg {
         fill: currentColor;
         --tw-text-opacity: 1;
         color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
 
-.xpl-nav-item a:hover, .xpl-nav-item a:focus {
+.xpl-nav-item a:hover, .xpl-nav-item a:focus, .xpl-nav-item a:active, .xpl-nav-item button:hover, .xpl-nav-item button:focus, .xpl-nav-item button:active {
       --tw-bg-opacity: 1;
       background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
       --tw-text-opacity: 1;
       color: rgba(255, 255, 255, var(--tw-text-opacity))
     }
 
-.xpl-nav-item a.active svg {
+.xpl-nav-item a.active svg, .xpl-nav-item button.active svg {
         fill: currentColor;
         --tw-text-opacity: 1;
         color: rgba(249, 145, 112, var(--tw-text-opacity));
       }
 
-.xpl-nav-item a.active {
+.xpl-nav-item a.active, .xpl-nav-item button.active {
       --tw-border-opacity: 1;
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
       border-style: solid;
@@ -4315,7 +4319,7 @@ a.xpl-list-item:focus {
       color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
-.xpl-nav-item a {
+.xpl-nav-item a, .xpl-nav-item button {
     display: flex;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -4323,14 +4327,23 @@ a.xpl-list-item:focus {
     padding-right: 1rem;
     --tw-text-opacity: 1;
     color: rgba(153, 155, 168, var(--tw-text-opacity));
-    width: 100%;
+    width: 100%
+  }
+
+.xpl-nav-item a, .xpl-nav-item button {
     background-color: transparent;
     border-color: transparent;
     border-style: solid;
     border-right-width: 4px;
     align-items: center;
     align-content: center
-}
+  }
+
+.xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button, .xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
+        justify-content: center;
+        padding-left: 0px;
+        padding-right: 0px
+      }
 
 .xpl-pagination {
   --tw-bg-opacity: 1;
@@ -4560,8 +4573,6 @@ a.xpl-list-item:focus {
 .xpl-secondary-nav nav::after {
         overflow: hidden;
 
-        pointer-events: none;
-
         position: absolute;
 
         top: 0px;
@@ -4656,7 +4667,6 @@ a.xpl-list-item:focus {
         background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
         --tw-border-opacity: 1;
         border-color: rgba(249, 145, 112, var(--tw-border-opacity));
-        pointer-events: none;
         --tw-text-opacity: 1;
         color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
@@ -4666,7 +4676,6 @@ a.xpl-list-item:focus {
       background-color: rgba(254, 246, 244, var(--tw-bg-opacity));
       --tw-border-opacity: 1;
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
-      pointer-events: none;
       --tw-text-opacity: 1;
       color: rgba(48, 45, 59, var(--tw-text-opacity))
     }
@@ -4708,10 +4717,9 @@ a.xpl-list-item:focus {
   }
 
 @media (min-width: 1024px) {
-
-.xpl-secondary-nav {
-    width: 200px;
-}
+    .xpl-secondary-nav nav ul .xpl-nav-item a {
+      width: 200px;
+    }
   }
 
 .xpl-secondary-nav {