@awes-io/ui 2.84.0 → 2.87.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.87.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.86.0...@awes-io/ui@2.87.0) (2023-12-13)
+
+
+### Features
+
+* change style for btn and create square btn ([60619d5](https://github.com/awes-io/client/commit/60619d563eec0b38279790b5b24277b512a4c735))
+* **aw-button-nav:** togglers grows to full width on mobile ([47f0f3a](https://github.com/awes-io/client/commit/47f0f3af89fcea75e0fb7ee2685923866840cb99))
+* change dark color ([00d26bf](https://github.com/awes-io/client/commit/00d26bfbb75145af849681700fde13ece788c9bf))
+* change style for desktop user menu ([a59f5be](https://github.com/awes-io/client/commit/a59f5be0fe9fc5727a53a52cd88a6c1a34880a66))
+
+
+
+
+
+# [2.86.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.85.0...@awes-io/ui@2.86.0) (2023-12-05)
+
+
+### Features
+
+* update ([f03eef5](https://github.com/awes-io/client/commit/f03eef533592981c75d59551b466c790ecaed0ab))
+
+
+
+
+
+# [2.85.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.84.0...@awes-io/ui@2.85.0) (2023-12-05)
+
+
+### Features
+
+* add new action component ([34ac283](https://github.com/awes-io/client/commit/34ac283c6ef86e4453df13bcf1a0a84e54edfd43))
+* **aw-action-card:** component added ([9c5b320](https://github.com/awes-io/client/commit/9c5b3200c9b9e4303ddaee7dc820e3e45b559942))
+* add disable color for select object and fix style in aside modal ([f360510](https://github.com/awes-io/client/commit/f3605102099c8b354c0b6543f21f7a02c8abef8b))
+* add min width for tab button without min width ([8bcd67d](https://github.com/awes-io/client/commit/8bcd67d78c305cb38e6c7220ceaf154480792b59))
+* change basic style logic for aw label ([2f4bd5a](https://github.com/awes-io/client/commit/2f4bd5a08778e18156b7a87acfb7537c14b11ab7))
+* change style for mobile menu ([d9c636e](https://github.com/awes-io/client/commit/d9c636ea479e90be2e3e1240e56fd08d8d053835))
+
+
+
+
+
 # [2.84.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.83.0...@awes-io/ui@2.84.0) (2023-11-23)
 
 

package/assets/css/components/_index.css

@@ -8,18 +8,23 @@
 
 @import './alert.css';
 @import './avatar.css';
+@import './action-button.css';
+@import './action-icon.css';
 @import './banner-text.css';
 @import './badge.css';
 @import './birthday-picker.css';
 @import './button.css';
 @import './button-fixed.css';
 @import './button-nav.css';
+@import './square-icon-button.css';
 @import './dock.css';
 @import './title.css';
 @import './file.css';
 
 @import './calendar.css';
 
+@import './action-card.css';
+@import './action-card-body.css';
 @import './card.css';
 
 @import './chip.css';

package/assets/css/components/action-button.css

@@ -0,0 +1,53 @@
+.aw-action-button {
+    @apply bg-surface;
+
+    display: grid;
+    align-items: start;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: max-content minmax(0, auto);
+    gap: 0 1rem;
+
+    padding: 2rem;
+    border-radius: 1rem;
+
+    width: 100%;
+
+    &__icon-wrapper {
+        transition: 60ms color, 60ms background-color;
+    }
+
+    &:hover &__icon-wrapper {
+        color: var(--bg-color);
+        background-color: var(--color);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 2px var(--c-mono-800) inset;
+    }
+
+    &__text {
+        font-size: 1rem;
+        line-height: 1.5;
+        align-self: center;
+    }
+
+    &__description {
+        display: block;
+        margin-top: 0.25rem;
+    }
+
+    &__subdescription {
+        grid-column: 1 / -1;
+
+        padding-top: 1rem;
+    }
+
+    &--outline {
+        box-shadow: 0 0 0 2px var(--c-mono-900) inset;
+    }
+
+    &--narrow {
+        padding: 1rem;
+    }
+}

package/assets/css/components/action-card-body.css

@@ -0,0 +1,20 @@
+.aw-action-card-body {
+    @apply bg-surface;
+
+    min-width: 0;
+    overflow: hidden;
+    padding: 1rem;
+    border-radius: 0.625rem;
+
+    &__title {
+        @apply text-mono-400;
+
+        display: block;
+
+        font-size: 0.875rem;
+        line-height: 1rem;
+        font-weight: 700;
+
+        margin-bottom: 1rem;
+    }
+}

package/assets/css/components/action-card.css

@@ -0,0 +1,36 @@
+.aw-action-card {
+    @apply bg-mono-800;
+
+    display: grid;
+    gap: 0.5rem;
+
+    padding: 1.5rem 0.5rem 0.5rem;
+    border-radius: 1rem;
+
+    position: relative;
+
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0 1rem 1rem;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    &__title {
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-inline-end: auto;
+    }
+
+    &__link {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+}

package/assets/css/components/action-icon.css

@@ -0,0 +1,45 @@
+.aw-action-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+
+    width: var(--size);
+    height: var(--size);
+    padding: max(0.25rem, calc(var(--size) / 8));
+    border-radius: var(--radius);
+
+    background-color: var(--bg-color);
+    color: var(--color);
+
+    img {
+        width: var(--size);
+        height: var(--size);
+        border-radius: var(--radius);
+        object-fit: cover;
+    }
+
+    small {
+        font-size: 0.875rem;
+        line-height: 1.125rem;
+        text-align: center;
+    }
+
+    &__icon {
+        flex: none;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        color: var(--icon-color, currentColor);
+    }
+
+    &--image {
+        padding: 0;
+        background-color: transparent;
+    }
+
+    &--outline {
+        box-shadow: 0 0 0 2px currentColor inset;
+    }
+}

package/assets/css/components/avatar.css

@@ -6,6 +6,7 @@
     overflow: hidden;
     contain: content;
     user-select: none;
+    text-transform: uppercase;
 
     width: var(--ui-avatar-size, 2.25rem);
     height: var(--ui-avatar-size, 2.25rem);

package/assets/css/components/button-fixed.css

@@ -4,12 +4,12 @@
 
     padding: 0.75rem 1rem;
     min-width: 3.5rem;
-    min-height: 3.5rem;
+    min-height: 3rem;
     /* border-radius: 1rem; */
 
-    font-size: 0.875rem;
-    line-height: 1rem;
-    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.125rem;
+    font-weight: 400;
 
     background-color: rgba(var(--btn-bg), var(--btn-bg-opacity, 1));
     color: rgba(var(--btn-fg), 1);

package/assets/css/components/button-nav.css

@@ -34,18 +34,18 @@
         border-bottom: 2px solid var(--c-mono-800);
 
         &:first-child {
-           border-radius: 0.625rem 0 0 0.625rem;
-           border-left: 2px solid var(--c-mono-800);
+            border-radius: 0.625rem 0 0 0.625rem;
+            border-left: 2px solid var(--c-mono-800);
         }
 
         &:last-child {
-           border-radius: 0 0.625rem 0.625rem 0;
-           border-right: 2px solid var(--c-mono-800);
+            border-radius: 0 0.625rem 0.625rem 0;
+            border-right: 2px solid var(--c-mono-800);
         }
 
         &_no_text > span {
-           padding-left: 0.5rem;
-           padding-right: 0.5rem;
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
         }
     }
 
@@ -63,7 +63,8 @@
         padding-right: 0.5rem;
     }
 
-    &__toggler:focus, &__toggler > span:focus {
+    &__toggler:focus,
+    &__toggler > span:focus {
         outline: none;
     }
 
@@ -85,11 +86,10 @@
         cursor: not-allowed;
     }
 
-
     &--fullwidth {
-         margin-left: calc(-1 * var(--container-padding));
-         margin-right: calc(-1 * var(--container-padding));
-         max-width: calc(100% + 2 * var(--container-padding));
+        margin-left: calc(-1 * var(--container-padding));
+        margin-right: calc(-1 * var(--container-padding));
+        max-width: calc(100% + 2 * var(--container-padding));
 
         .aw-slider__scroller:before,
         .aw-slider__scroller:after {
@@ -111,8 +111,10 @@
     }
 
     &--expand {
+        min-width: var(--nav-min-width, 100%);
+
         .aw-button-nav__toggler {
-            flex: 1 0 auto;
+            flex: var(--nav-toggler-grow, 1) 0 auto;
         }
     }
 
@@ -122,7 +124,7 @@
             border: 4px solid var(--c-mono-800);
 
             & > span {
-                  border-radius: 0.5rem;
+                border-radius: 0.5rem;
             }
         }
     }
@@ -130,9 +132,9 @@
     &--without-min-with {
         .aw-button-nav__toggler {
             & > span {
-                padding-left: 1rem;
-                padding-right: 1rem;
-                min-width: 0;
+                padding-left: 0.625rem;
+                padding-right: 0.625rem;
+                min-width: 2.75rem;
             }
         }
     }
@@ -166,7 +168,7 @@
                     border-right: 1px solid var(--c-mono-800);
                 }
 
-                &  > span {
+                & > span {
                     height: 2.375rem;
                     border-radius: 0.5625rem;
                     min-width: 0;
@@ -180,6 +182,15 @@
     }
 }
 
+@screen sm {
+    .aw-button-nav {
+        &--expand {
+            --nav-min-width: 0;
+            --nav-toggler-grow: 0;
+        }
+    }
+}
+
 @screen md {
     .aw-button-nav {
         &--fullwidth {
@@ -219,7 +230,17 @@
                 border: 2px solid var(--c-mono-800);
 
                 & > span {
-                      border-radius: 0.5rem;
+                    border-radius: 0.5rem;
+                }
+            }
+        }
+
+        &--without-min-with {
+            .aw-button-nav__toggler {
+                & > span {
+                    padding-left: 0.4375rem;
+                    padding-right: 0.4375rem;
+                    min-width: 2.375rem;
                 }
             }
         }