@awes-io/ui 2.75.0 → 2.77.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.77.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.76.0...@awes-io/ui@2.77.0) (2023-11-02)
+
+
+### Bug Fixes
+
+* styles updated ([a8eaf37](https://github.com/awes-io/client/commit/a8eaf371af18a017ba3aac73a49684ca4ae15120))
+
+
+### Features
+
+* add square for cropper if is square island avatar ([38cf594](https://github.com/awes-io/client/commit/38cf594435db8bce9eb738426b54fd65fee0bf5d))
+* change style for button nav ([5ec3806](https://github.com/awes-io/client/commit/5ec3806326b6edb777a6e9248cfc57c3fb7812dd))
+* change style for button nav ([5c1a0a3](https://github.com/awes-io/client/commit/5c1a0a34d9bfe2023cdbf1c8e141ccf551c5a720))
+* change style for pagination ([0ca8d07](https://github.com/awes-io/client/commit/0ca8d075e79935d0c1dd02eedf935320930b3383))
+* change style for tab nav and pagination ([b5ecc29](https://github.com/awes-io/client/commit/b5ecc293477ca8aa4dca1778dcb74ee142cca2b7))
+
+
+
+
+
+# [2.76.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.75.0...@awes-io/ui@2.76.0) (2023-10-25)
+
+
+### Features
+
+* add square classes for cropper and avatar ([ed653b7](https://github.com/awes-io/client/commit/ed653b722f898234636cac914b26f6b40a10e240))
+* aw-page-single component added ([10f90ee](https://github.com/awes-io/client/commit/10f90eecfe17e2942dd1562c32f3c90626cfb0c3))
+
+
+
+
+
 # [2.75.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.1...@awes-io/ui@2.75.0) (2023-10-12)
 
 

package/assets/css/components/_index.css

@@ -31,6 +31,7 @@
 @import './context-menu.css';
 @import './description.css';
 @import './download-link.css';
+@import './empty-container.css';
 
 @import './dropdown.css';
 @import './dropdown-button.css';
@@ -65,7 +66,10 @@
 @import './page.css';
 @import './page-modal.css';
 @import './page-menu-buttons.css';
+@import './page-header.css';
 @import './page-headline.css';
+@import './page-single.css';
+@import './progress.css';
 
 @import './modal.css';
 @import './model-edit.css';

package/assets/css/components/avatar.css

@@ -13,6 +13,14 @@
     min-height: var(--ui-avatar-size, 2.25rem);
     border-radius: var(--ui-avatar-size, 2.25rem);
 
+    &--square {
+        border-radius: 20%;
+
+        &.aw-avatar > * {
+            border-radius: 20%;
+        }
+    }
+
     & > * {
         grid-row: 1 / -1;
         grid-column: 1 / -1;
@@ -27,7 +35,6 @@
     }
 
     & > :not(img):not(&__no-img-icon) {
-        @apply bg-mono-400 text-on-overlay;
         text-align: center;
         font-size: var(--ui-avatar-font-size);
     }

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

@@ -1,7 +1,6 @@
 .aw-button-nav {
     display: inline-flex;
     font-size: theme('fontSize.sm');
-    @apply bg-mono-900;
     border: none;
     border-radius: 0.625rem;
 
@@ -22,13 +21,12 @@
     }
 
     &__toggler {
+        @apply bg-mono-900;
+
         position: relative;
-        flex-shrink: 0;
-        padding: 0;
-        min-width: theme('spacing.8');
         white-space: nowrap;
 
-        font-size: 1rem;
+        font-size: 0.875rem;
         line-height: 1rem;
         font-weight: 400;
         border-radius: 0;
@@ -52,9 +50,17 @@
     }
 
     &__toggler > span {
-        padding: 0.875rem 1.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 2.75rem;
+        min-width: 6.25rem;
         width: 100%;
         border-radius: 0.5rem;
+
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
     }
 
     &__toggler:focus, &__toggler > span:focus {
@@ -64,7 +70,8 @@
     &__toggler_active > span {
         @apply bg-surface;
         border-radius: 0.5rem;
-        box-shadow: theme('boxShadow.default');
+        box-shadow: 0 2px 5px 0 rgba(var(--c-mono-100-rgb), 0.1);
+        z-index: 1;
     }
 
     &__toggler:hover > span {
@@ -80,10 +87,10 @@
 
 
     &--fullwidth {
-         background-color: inherit;
          margin-left: calc(-1 * var(--container-padding));
          margin-right: calc(-1 * var(--container-padding));
          max-width: calc(100% + 2 * var(--container-padding));
+         width: 100%;
 
         .aw-slider__scroller:before,
         .aw-slider__scroller:after {
@@ -112,7 +119,7 @@
 
     &--fill {
         .aw-button-nav__toggler {
-            background-color: var(--c-mono-800);
+            background-color: var(--c-mono-900);
             border: 4px solid var(--c-mono-800);
 
             & > span {
@@ -120,6 +127,47 @@
             }
         }
     }
+
+    &__arrow-btn.aw-button.theme-ghost {
+        align-items: center;
+
+        width: 2.5rem;
+        height: 2.5rem;
+
+        border-radius: 0.625rem;
+
+        .aw-button__overlay {
+            border-radius: 0.625rem;
+        }
+    }
+
+    &--pagination {
+        .aw-button-nav {
+            &__toggler {
+                border-top: 1px solid var(--c-mono-800);
+                border-bottom: 1px solid var(--c-mono-800);
+
+                &:first-child {
+                    border-radius: 0.625rem 0 0 0.625rem;
+                    border-left: 1px solid var(--c-mono-800);
+                }
+
+                &:last-child {
+                    border-radius: 0 0.625rem 0.625rem 0;
+                    border-right: 1px solid var(--c-mono-800);
+                }
+
+                &  > span {
+                    height: 2.375rem;
+                    min-width: 0;
+                    width: 2.6rem;
+
+                    padding-left: 0.125rem;
+                    padding-right: 0.125rem;
+                }
+            }
+        }
+    }
 }
 
 @screen md {
@@ -152,7 +200,7 @@
 
             & > span {
                 border-radius: 0.5rem;
-                padding: 0.625rem 1.25rem;
+                height: 2.25rem;
             }
         }
 

package/assets/css/components/button.css

@@ -31,7 +31,7 @@
         justify-content: center;
         width: 100%;
         transition: 100ms opacity;
-        font-size: 14px;
+        font-size: 0.875rem;
         line-height: 1.125rem;
 
         &:focus {
@@ -82,6 +82,7 @@
     &:focus > &__content {
         /* opacity: 0.15; */
         outline: theme('focusOutline', 'none');
+        height: 100%;
     }
 
     /**
@@ -117,13 +118,10 @@
     }
 
     &__content_md {
-        @apply px-4 text-sm leading-4;
+        @apply p-4 text-sm leading-4;
 
-        padding-top: 1rem;
-        padding-bottom: 1rem;
         min-width: 3rem;
         min-height: 3rem;
-        height: 100%;
     }
 
     &.theme-icon &__content_md,
@@ -554,6 +552,10 @@
     box-shadow: none;
 }
 
+.aw-button.color-default .aw-icon {
+    @apply text-mono-400;
+}
+
 @screen lg {
     .aw-button.aw-button_md.theme-solid,
     .aw-button.aw-button_md .aw-button__overlay,
@@ -566,8 +568,7 @@
     }
 
     .aw-button__content_md {
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding: 0.75rem;
         min-width: 2.5rem;
         min-height: 2.5rem;
     }

package/assets/css/components/cropper.css

@@ -5,6 +5,14 @@
     margin-left: auto;
     margin-right: auto;
 
+    &.aw-cropper--square {
+        .croppie-container {
+            .cr-viewport {
+                border-radius: 20%;
+            }
+        }
+    }
+
     &__croppie {
         position: relative;
     }

package/assets/css/components/empty-container.css

@@ -0,0 +1,8 @@
+.aw-empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    padding: 1.5rem 0;
+}

package/assets/css/components/icon-menu-item.css

@@ -47,10 +47,10 @@
     &__text {
         display: block;
 
-        font-size: 0.5625rem;
+        font-size: 0.5rem;
         font-weight: 400;
-        line-height: 0.625rem;
-        color: var(--c-mono-400);
+        line-height: 0.58625rem;
+        color: var(--c-mono-300);
         transition: 60ms color;
 
         text-align: center;
@@ -59,6 +59,8 @@
         text-overflow: ellipsis;
         overflow: hidden;
         width: 100%;
+
+        margin-top: 0.25rem;
     }
 
     &__icon-badge {

package/assets/css/components/layout-menu.css

@@ -27,10 +27,12 @@
 
         overflow-y: auto;
         overflow-y: overlay;
+        scrollbar-gutter: stable both-edges;
         overscroll-behavior: contain;
 
         scrollbar-width: thin;
-        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15) rgba(var(--c-on-surface-rgb), 0.1);
+        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15)
+            rgba(var(--c-on-surface-rgb), 0.1);
 
         &::-webkit-scrollbar {
             width: 6px;

package/assets/css/components/main.css

@@ -8,9 +8,9 @@
 
 @screen lg {
     :root {
-        --header-padding-bottom: 1.5rem;
-        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1.5rem));
+        --header-padding-bottom: 1rem;
+        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1rem));
         --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
-        --header-height: calc(env(safe-area-inset-top, 0px) + 5.5rem);
+        --header-height: calc(env(safe-area-inset-top, 0px) + 4.5rem);
     }
 }

package/assets/css/components/nav.css

@@ -66,7 +66,7 @@
                 margin-left: 5px;
                 margin-top: -3px;
                 border-radius: 50%;
-                background-color: var(--c-accent, green);
+                background-color: var(--c-mono-100, green);
 
                 position: absolute;
                 left: theme('spacing.8');

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

@@ -0,0 +1,61 @@
+.aw-page-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: var(--header-padding-top) 1.5rem var(--header-padding-bottom);
+    height: var(--header-height);
+
+    position: relative;
+
+    .aw-progress {
+        position: absolute;
+        bottom: 2px;
+        left: 0;
+    }
+
+    &--primary {
+        @apply bg-surface;
+    }
+
+    &__title {
+        @apply font-body;
+
+        flex: 1 0 50%;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        margin: 0;
+
+        font-size: 0.875rem;
+        line-height: 1.4285;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    &__breadcrumbs,
+    &__buttons {
+        flex: 1 1 25%;
+
+        display: flex;
+        gap: 1rem;
+    }
+
+    &__buttons {
+        justify-content: flex-end;
+    }
+}
+
+@screen lg {
+    .aw-page-header {
+        padding-left: 2.5rem;
+        padding-right: 2.5rem;
+
+        &__title {
+            font-size: 1.25rem;
+            line-height: 1.2;
+        }
+    }
+}

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

@@ -0,0 +1,186 @@
+.aw-page-single {
+    @apply bg-page-bg;
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100dvh;
+
+    &__header {
+        box-shadow: none;
+
+        transition: none;
+
+        z-index: 10;
+
+        &--is-stuck {
+            box-shadow: 0px 10px 20px 0px rgba(0, 19, 106, 0.1);
+
+            transition: 60ms box-shadow 120ms;
+            animation: aw-page-single-header-slide 180ms ease-out;
+
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    &__container {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    &__mobile-title {
+        order: -4;
+
+        padding: 0 1.5rem;
+
+        font-size: 1.5rem;
+        line-height: 1;
+        font-weight: bold;
+    }
+
+    &__mobile-description {
+        order: -3;
+
+        padding: 0 1.5rem;
+        margin-top: -1rem;
+    }
+
+    &__preview {
+        &--reverse {
+            order: -1;
+        }
+    }
+
+    &__top-scroll-mark {
+        order: -3;
+        height: 1px;
+        margin-top: -1.5rem;
+        margin-bottom: -1px;
+    }
+
+    &__mobile-action-button {
+        display: grid;
+
+        padding: 1rem 2rem;
+
+        position: sticky;
+        bottom: 0;
+
+        &--is-stuck {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(5px);
+        }
+    }
+
+    &__bottom-scroll-mark {
+        margin-top: -1.5rem;
+    }
+}
+
+@screen sm {
+    .aw-page-single {
+        &__container--preview {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+
+        &__mobile-title,
+        &__mobile-description {
+            padding: 0;
+        }
+
+        &__mobile-action-button {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+
+            margin-left: -1.5rem;
+            margin-right: -1.5rem;
+        }
+    }
+}
+
+@screen lg {
+    .aw-page-single {
+        &__header {
+            position: sticky;
+            top: 0;
+
+            &--is-stuck {
+                animation: none;
+            }
+        }
+
+        &__container {
+            padding-top: 2rem;
+            padding-bottom: 10rem;
+
+            &--preview {
+                display: grid;
+                grid-template-columns: minmax(1rem, 1fr) minmax(0, max-content);
+                justify-content: center;
+                align-content: start;
+                gap: 0;
+
+                padding-left: 2.5rem;
+                padding-right: 2.5rem;
+                margin: 0 auto;
+                max-width: 70.25rem;
+            }
+        }
+
+        &__mobile-title,
+        &__mobile-description {
+            display: none;
+        }
+
+        &__top-scroll-mark {
+            margin-top: calc(-2rem - var(--header-height, 0px));
+            margin-bottom: calc(var(--header-height, 0px) + 0.5rem);
+            grid-column: 1 / -1;
+        }
+
+        &__content--column {
+            width: 40rem;
+            max-width: 100%;
+        }
+
+        &__preview {
+            &--column {
+                align-self: start;
+                order: unset;
+
+                width: 23.75rem;
+                margin-left: 1.5rem;
+
+                position: sticky;
+                top: calc(var(--header-height, 0px) + 2rem);
+            }
+
+            /* &--header-sticky {
+                transition: top 180ms ease-out;
+            } */
+        }
+    }
+}
+
+@keyframes aw-page-single-header-slide {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}

package/assets/css/components/progress.css

@@ -0,0 +1,23 @@
+.aw-progress {
+    height: 0;
+    width: 100%;
+
+    position: relative;
+
+    &::after {
+        content: '';
+        display: block;
+
+        width: 100%;
+        height: 2px;
+        background-color: var(--color);
+
+        transform-origin: left;
+        transform: scaleX(var(--progress));
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}

package/assets/css/components/user-menu.css

@@ -9,6 +9,20 @@
 
     &__user {
         cursor: pointer;
+
+        &--outline {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            padding: 0.75rem;
+            border-radius: 0.625rem;
+            box-shadow: 0 0 0 2px var(--c-mono-800) inset;
+
+            &:hover {
+                @apply bg-mono-800;
+            }
+        }
     }
 
     &__header {
@@ -21,7 +35,7 @@
             &__name {
                 font-size: 1rem;
                 line-height: 1.5rem;
-             }
+            }
 
             &__content {
                 margin-left: 0;
@@ -75,7 +89,7 @@
         &.aw-dropdown--desktop {
             max-width: 17.625rem;
             min-width: 17.625rem;
-         }
+        }
     }
 
     &__nav-item {
@@ -113,3 +127,14 @@
         }
     }
 }
+
+@screen lg {
+    .aw-user-menu {
+        &__user {
+            &--outline {
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+            }
+        }
+    }
+}