@awes-io/ui 2.119.0 → 2.120.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.120.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.119.0...@awes-io/ui@2.120.0) (2024-12-06)
+
+
+### Features
+
+* change style for header  and header notification ([d9ba150](https://github.com/awes-io/client/commit/d9ba150a719410cb26e2fcd8a70a47f4b8b65a3c))
+* change style place in header notification ([e56664e](https://github.com/awes-io/client/commit/e56664e735fcdeb0dc90e11341c1ad63e9c97c8b))
+
+
+
+
+
 # [2.119.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.118.1...@awes-io/ui@2.119.0) (2024-12-03)
 
 

package/assets/css/components/header-notification.css

@@ -3,6 +3,24 @@
     align-items: flex-start;
     padding-top: env(safe-area-inset-top, 0px);
 
+    &__wrapper {
+        display: flex;
+        flex: auto;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem 0.5rem 1rem 1rem;
+
+        &-content {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        &-buttons {
+            display: flex;
+            gap: 1rem;
+        }
+    }
+
     &__content {
         flex-grow: 1;
 
@@ -32,3 +50,17 @@
           --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem));
     }
 }
+
+@screen md {
+    .aw-header-notification {
+        &__wrapper {
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+
+            &-content {
+                align-items: center;
+            }
+        }
+    }
+}

package/assets/css/components/page-header.css

@@ -1,6 +1,7 @@
 .aw-page-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 1rem;
 
     padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
@@ -57,7 +58,11 @@
         font-size: 1.25rem;
         line-height: 1.4285;
         font-weight: 700;
-        text-align: start;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
 
         &--showable {
             opacity: 0;
@@ -77,10 +82,11 @@
 
     &__breadcrumbs,
     &__buttons {
-        flex: 1 1 3rem;
+        flex: unset;
 
         display: flex;
         gap: 1rem;
+        min-width: 3rem;
     }
 
     &__buttons {
@@ -94,15 +100,6 @@
         &__title {
             flex: 1 1 max-content;
         }
-
-        &__breadcrumbs,
-        &__buttons {
-            flex: 1 0 max-content;
-        }
-
-        &__buttons {
-            min-width: max-content;
-        }
     }
 }
 
@@ -121,25 +118,16 @@
         }
 
         &--container {
-            gap: 0;
-
             position: static;
         }
 
-        :where(&--container) &__breadcrumbs {
-            flex: 0 0 calc(50% - var(--header-container-width) / 2 + var(--header-padding-horizontal));
-        }
-
-        &:where(:not(&--container)) &__title {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
         :where(&--container) &__title {
             text-align: left;
-            margin-right: 1rem;
+        }
+
+        &__breadcrumbs,
+        &__buttons {
+             min-width: 2.5rem;
         }
 
         /* :where(&--container) &__buttons {

package/assets/js/styles.js

@@ -56,7 +56,6 @@ export const CUSTOM_COLORS_BG_DARK = {
 export default {
     default: {
         colors: {
-            white: '#ffffff',
             accent: '#56af40',
             'accent-hover': '#469E30',
             success: '#56af40',
@@ -115,7 +114,6 @@ export default {
     },
     dark: {
         colors: {
-            white: '#ffffff',
             accent: '#56af40',
             success: '#56af40',
             info: '#4a7fe4',

package/components/5_layouts/_AwHeaderNotification.vue

@@ -7,22 +7,30 @@
         }"
         class="aw-header-notification"
     >
-        <!-- conent -->
-        <AwFlow
-            :gap="2"
-            tag="div"
-            class="aw-header-notification__content container-fluid"
-        >
-            <AwIcon v-if="config.icon" :name="config.icon" />
-            <span v-html="$sanitize(config.text)" class="text-center"></span>
-            <AwButton
-                v-for="({ listeners, ...props }, i) in config.buttons"
-                :key="i"
-                size="xs"
-                v-bind="props"
-                v-on="listeners"
-            />
-        </AwFlow>
+        <div class="aw-header-notification__wrapper">
+            <div class="aw-header-notification__wrapper-content">
+                <AwIcon
+                    v-if="config.icon"
+                    class="flex-none"
+                    :name="config.icon"
+                />
+
+                <div v-html="$sanitize(config.text)" />
+            </div>
+
+            <div
+                v-if="config.buttons.length"
+                class="aw-header-notification__wrapper-buttons"
+            >
+                <AwButton
+                    v-for="({ listeners, ...props }, i) in config.buttons"
+                    :key="i"
+                    size="xs"
+                    v-bind="props"
+                    v-on="listeners"
+                />
+            </div>
+        </div>
 
         <!-- close -->
         <AwButton

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.119.0",
+    "version": "2.120.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "f9ac1c4a9f97c7786f5d25ff792d005ca23b8d75"
+    "gitHead": "33d3086b8b7731150f900b92fa1146c1c29209c8"
 }