@exakt/ui 0.0.4 → 0.0.6

package/dist/module.d.ts

@@ -9,8 +9,9 @@ interface ModuleOptions {
         blue?: string;
     };
     breakpoints: {
+        sm?: string;
         md?: string;
-        l?: string;
+        lg?: string;
         xl?: string;
     };
     borderRadius: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.4"
+  "version": "0.0.6"
 }

package/dist/module.mjs

@@ -10,8 +10,9 @@ const defaults = {
     blue: "#2196f3"
   },
   breakpoints: {
+    sm: "16em",
     md: "33em",
-    l: "48em",
+    lg: "48em",
     xl: "60em"
   },
   borderRadius: "8px",

package/dist/runtime/components/e/app-bars.vue

@@ -21,16 +21,23 @@
           :model-value="props.loading"
           class="md-and-up-only"
         />
-
-        <div class="md-and-up-only flex-stretch">
-          <slot name="center" />
-        </div>
-        <slot name="nav-items" />
-        <div class="md-and-up-only flex-stretch">
-          <slot
-            name="right"
-            class="fullwidth"
-          />
+        <div class="bar-content">
+          <div class="bar-section">
+            <!-- Normally the logo -->
+            <div class="md-and-up-only flex-stretch">
+              <slot name="center" />
+            </div>
+            <!-- All the links-->
+            <slot name="nav-items" />
+          </div>
+
+          <!-- Normally the sign in button -->
+          <div class="md-and-up-only bar-section">
+            <slot
+              name="right"
+              class="fullwidth"
+            />
+          </div>
         </div>
       </div>
     </e-container>
@@ -43,7 +50,6 @@ const props = withDefaults(
   }>(),
   { loading: false }
 );
-
 </script>
 
 <style lang="scss" scoped>
@@ -76,6 +82,18 @@ const props = withDefaults(
   z-index: 4;
 }
 
+.bar-content{
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  width: 100%;
+}
+
+.bar-section{
+  display:flex;
+  align-items: stretch;
+}
+
 @media screen and (max-width: ($e-md-screen-breakpoint)) {
   .title-bar {
     display: unset;
@@ -122,7 +140,17 @@ const props = withDefaults(
     width: 100%;
     height: 100%;
 
-    padding-bottom: calc(env(safe-area-insee-bottom));
+    padding-bottom: calc(env(safe-area-inset-bottom));
+  }
+
+  .bar-content{
+    justify-content: stretch;
+ 
+  }
+
+  .bar-section{
+    justify-content: stretch;
+    width: 100%;
   }
 }
 </style>

package/dist/runtime/components/e/container.vue

@@ -29,11 +29,15 @@ defineProps(["noBtnPadding", "forceFullWidth"]);
   $padding: 0rem;
 
   @media (min-width: $e-md-screen-breakpoint) {
-    width: calc(85% - $padding);
+    width: calc(100% - $padding);
+  }
+
+  @media (min-width: $e-lg-screen-breakpoint) {
+    width: calc(95% - $padding);
   }
 
-  @media (min-width: var(--e-l-screen-breakpoint)) {
-    width: calc(65% - $padding);
+  @media (min-width: $e-xl-screen-breakpoint) {
+    width: calc(85% - $padding);
   }
 }
 

package/dist/runtime/components/e/iconButton.vue

@@ -2,6 +2,8 @@
   <e-btn
     class="a-btn"
     :loading="loading"
+    :solid="false"
+    background="transparent"
   >
     <e-icon
       :icon="icon"

package/dist/runtime/components/e/nav/btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-stretch">
+  <div class="flex-stretch nav-btn">
     <e-link
       :to="to"
       class="flex-stretch fullwidth"
@@ -74,6 +74,10 @@ const inactive = computed(() => {
 </script>
 
 <style scoped lang="scss">
+
+.nav-btn{
+  flex-grow: 1;
+}
 .button:first-child {
   aspect-ratio: unset;
 

package/dist/runtime/css/util.scss

@@ -143,6 +143,11 @@ body {
   width: 100%;
 }
 
+.fullsize {
+  @extend .fullheight;
+  @extend .fullwidth;
+}
+
 .text-center {
   text-align: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",