@awes-io/ui 2.70.0 → 2.71.0

package/assets/css/components/date.css

@@ -16,6 +16,10 @@
         }
     }
 
+    .aw-text-field {
+        border-radius: 0.625rem;
+    }
+
     &__range:before,
     &__range-start:before,
     &__range-end:before {

package/assets/css/components/description.css

@@ -2,3 +2,11 @@
     font-size: theme('fontSize.sm', 0.875rem);
     color: var(--c-mono-400);
 }
+
+span.aw-description {
+    line-height: 16px;
+}
+
+p.aw-description {
+    line-height: 21px;
+}

package/assets/css/components/dock.css

@@ -0,0 +1,86 @@
+.aw-dock {
+    --dock-bottom: env(safe-area-inset-bottom, 0px);
+    --dock-height: calc(67vh - 2.75rem);
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+
+    touch-action: pan-y;
+
+    &--active {
+         height: 100%;
+    }
+
+    &__panel {
+         @apply bg-surface;
+         display: flex;
+         flex-direction: column;
+
+         padding: 0 1.25rem calc(var(--dock-bottom, 0px) + 1.25rem);
+         border-radius: 1.25rem 1.25rem 0 0;
+         box-shadow: 0 -20px 25px -5px rgba(var(--c-overlay-rgb), 0.1),
+         0 -10px 10px -5px rgba(var(--c-overlay-rgb), 0.04);
+         width: 100%;
+         height: auto;
+         max-height: 67vh;
+
+         position: relative;
+    }
+
+    &__overlay {
+         @apply bg-overlay;
+
+         margin-bottom: -1.25rem;
+         flex: 1;
+         opacity: var(--dock-open-progress, 0);
+    }
+
+    &__toggler {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 0.5rem;
+
+        & > span {
+              @apply bg-mono-700;
+              display: block;
+              width: 1.5rem;
+              height: 0.25rem;
+              border-radius: 0.125rem;
+        }
+    }
+
+    &__content {
+         overflow: hidden;
+         opacity: calc(var(--dock-open-progress, 0) * 1.35 - 0.35);
+         padding-bottom: calc(var(--dock-open-progress, 0) * 1rem);
+         min-height: 0;
+         max-height: calc(var(--dock-open-progress, 0) * var(--dock-height));
+         transform: scaleX(
+             min(1, calc(0.9 + 0.1 * var(--dock-open-progress, 0)))
+         )
+         translateY(max(0, calc(15% - 15% * var(--dock-open-progress, 0))));
+         overflow: hidden;
+         overscroll-behavior: contain;
+
+        &--scroll {
+             overflow: auto;
+             padding-right: 0.75rem;
+             margin-right: -0.75rem;
+        }
+    }
+
+    &__visible {
+         padding-top: 0.5rem;
+    }
+}

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

@@ -28,6 +28,10 @@
         &:hover {
             @apply bg-mono-800;
         }
+
+        &.is-active {
+             @apply bg-mono-800;
+        }
     }
 
     &[disabled] > span {

package/assets/css/components/dropdown.css

@@ -1,9 +1,9 @@
 .aw-dropdown {
+    z-index: 21;
     overscroll-behavior: contain;
 
     &--desktop {
-        @apply bg-surface shadow;
-        min-width: 160px;
+        @apply bg-surface;
         scrollbar-width: thin;
         z-index: 30;
         overflow: auto;
@@ -11,8 +11,16 @@
         position: absolute;
     }
 
+    &--desktop,
+    .aw-select__dropdown {
+        box-shadow: 0px 20px 40px rgba(var(--c-overlay-rgb), 0.1);
+        border-radius: 10px;
+        min-width: 250px;
+        border: 1px solid var(--c-mono-900);
+    }
+
     &--mobile {
-        padding: theme('spacing.2', 0.5rem);
+        padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) theme('spacing.2', 0.5rem) calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
 
         display: flex;
         flex-direction: column;
@@ -37,9 +45,21 @@
 
     &__title {
         text-align: center;
-        font-weight: bold;
-        margin: theme('spacing.4', 1rem) auto 0;
         position: relative;
+
+        background-color: var(--c-surface);
+        color: var(--c-mono-400);
+        /* font-size: 0.75rem; */
+        font-weight: 400;
+        margin: 0;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.625rem 0.625rem 0 0;
+
+        & + .aw-dropdown__content--mobile {
+             border-top-left-radius: 0;
+             border-top-right-radius: 0;
+             border-top: 1px solid var(--c-mono-900);
+        }
     }
 
     &__description {
@@ -51,28 +71,41 @@
 
     &__content {
         max-height: 100%;
+
+        hr + .aw-dropdown-button > span {
+            text-align: center;
+            justify-content: center;
+        }
     }
 
     &__content--mobile {
         @apply bg-surface;
-        margin-top: theme('spacing.4', 1rem);
-        border-radius: theme('borderRadius.md', 0.25rem);
         /* max-height: 60%; */
         flex-shrink: 1;
         overflow: auto;
         position: relative;
+
+        padding: 0;
+        border-radius: 0.9375rem;
+        margin-top: 0;
+
+        .aw-dropdown-button > span {
+            padding: 1rem 1.5rem;
+        }
     }
 
     &__close {
         width: 100%;
         margin-top: theme('spacing.2', 0.5rem);
-        padding-top: theme('spacing.1', 0.25rem);
-        padding-bottom: theme('spacing.1', 0.25rem);
+        padding-top: 0;
+        padding-bottom: 0;
         flex-shrink: 0;
         position: relative;
 
         &.aw-button.theme-ghost.color-surface {
             color: var(--c-on-overlay);
+            @apply bg-mono-900;
+            margin-top: 0.625rem;
         }
     }
 }

package/assets/css/components/file.css

@@ -0,0 +1,20 @@
+.aw-file {
+    position: relative;
+
+    & > input[type='file'] {
+          appearance: none;
+          opacity: 0;
+          cursor: pointer;
+          width: 100%;
+          height: 100%;
+
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1;
+    }
+
+    & > input[disabled] {
+          cursor: default;
+    }
+}

package/assets/css/components/filter-date-range.css

@@ -0,0 +1,21 @@
+.aw-filter-date-range {
+    &.aw-filter-date-range--width-full {
+        width: 100%;
+
+        .aw-button {
+            width: 100%;
+        }
+    }
+}
+
+@screen sm {
+    .aw-filter-date-range {
+        &.aw-filter-date-range--width-full {
+             width: auto;
+
+            .aw-button {
+                width: auto;
+            }
+        }
+    }
+}

package/assets/css/components/gmap.css

@@ -0,0 +1,8 @@
+.aw-gmap {
+    border-radius: 0.625rem;
+    overflow: hidden;
+
+    .aw-gmap__map {
+        height: 300px;
+    }
+}

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

@@ -11,5 +11,24 @@
 
         padding-top: theme('spacing.3', 0.75rem);
         padding-bottom: theme('spacing.3', 0.75rem);
+
+        & + .aw-button {
+            .aw-button__content {
+                width: 3rem;
+                height: 3rem;
+            }
+
+            .aw-button__text {
+                font-size: 1rem;
+            }
+        }
+    }
+
+    & + * {
+          --header-padding-top: var(--header-padding-bottom, 0.5rem);
+    }
+
+    & + * [class*="--fixed-top"] {
+          --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem));
     }
 }

package/assets/css/components/headline.css

@@ -1,5 +1,8 @@
 .aw-headline {
+    @apply font-heading;
+
     font-weight: bold;
-    font-family: theme('fontFamily.heading', inherit);
-    font-size: theme('fontSize.xl', 1.25rem);
+    font-style: normal;
+    font-size: 1.25rem;
+    line-height: 1.15;
 }

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

@@ -12,7 +12,7 @@
         .aw-icon-menu-item {
             &__icon,
             &__text {
-              color: var(--c-on-surface);
+              color: var(--c-mono-100);
             }
         }
     }
@@ -21,7 +21,7 @@
         .aw-icon-menu-item {
             &__icon,
             &__text {
-                 color: var(--c-on-surface);
+                 color: var(--c-mono-100);
             }
         }
     }
@@ -100,4 +100,44 @@
             }
         }
     }
+
+    :root[data-dark="true"] {
+        .aw-icon-menu-item {
+            &--active {
+                &:before {
+                     background-color: rgba(var(--c-mono-700-rgb), 0.5);
+                }
+            }
+        }
+    }
+}
+
+:root[data-dark="true"] {
+    .aw-icon-menu-item {
+        &:hover {
+            .aw-icon-menu-item {
+                &__icon,
+                &__text {
+                     color: rgba(var(--c-on-surface-rgb), 0.9)
+                 }
+            }
+        }
+
+        &--active {
+            .aw-icon-menu-item {
+                &__icon,
+                &__text {
+                     color: rgba(var(--c-on-surface-rgb), 0.9)
+                 }
+            }
+        }
+
+        &__icon {
+            color: rgba(var(--c-on-surface-rgb), 0.8)
+        }
+
+        &__text {
+             color: var(--c-mono-400);
+        }
+    }
 }

package/assets/css/components/info.css

@@ -1,6 +1,14 @@
 .aw-info {
+    overflow-wrap: break-word;
+
     &__label {
-        margin-bottom: theme('spacing.1', 0.25rem);
+         font-size: theme('fontSize.xs', 0.75rem);
+         margin-bottom: 0;
+
+        & > .aw-description {
+              font-size: theme('fontSize.xs', 0.75rem);
+              margin-bottom: 0;
+        }
     }
 
     &__label--required:after {

package/assets/css/components/island-avatar.css

@@ -62,7 +62,7 @@
     }
 
     &__separator {
-        margin: theme('spacing.4', 1rem) 0 0;
+         margin: var(--card-padding-y) 0 0;
     }
 
     &--empty .aw-island__content {

package/assets/css/components/island.css

@@ -38,6 +38,7 @@
         grid-area: description;
         /* padding-top: theme('spacing.2', 0.5rem); */
         min-width: 0;
+        padding-top: 5px;
     }
 
     &__options {

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

@@ -1,12 +1,11 @@
 .aw-layout-menu {
-    @apply bg-brand;
-    background-image: linear-gradient(var(--c-brand, transparent), var(--c-brand-tuned, transparent));
+    @apply bg-surface;
 
     display: grid;
     grid-template-columns: 72px auto;
     grid-template-rows: 80px minmax(0, 2fr) minmax(0, 1fr) 80px minmax(0, auto);
 
-    z-index: 1;
+    z-index: 4;
 
     &__logo,
     &__aw-user-menu {
@@ -56,6 +55,7 @@
         @apply bg-surface;
         width: 230px;
         max-height: 100vh;
+        border-left: 1px solid var(--c-mono-900);
 
         grid-column: 2;
         grid-row: 1 / 6;

package/assets/css/components/main.css

@@ -0,0 +1,16 @@
+:root {
+    --header-padding-bottom: 0.5rem;
+    --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem));
+    --header-padding-horizontal: var(--container-padding, 1.5rem);
+    --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
+    --header-height: calc(env(safe-area-inset-top, 0px) + 4rem);
+}
+
+@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: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
+        --header-height: calc(env(safe-area-inset-top, 0px) + 5.5rem);
+    }
+}

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

@@ -17,8 +17,8 @@
     }
 
     &__icon-bg {
-        margin-left: 1.875rem;
-        margin-right: -0.875rem;
+        margin-left: 1.25rem;
+        margin-right: -1rem;
         padding: 0.1875rem;
         border-radius: 0.3125rem;
         line-height: 1;

package/assets/css/components/mobile-menu-nav.css

@@ -38,3 +38,15 @@
         margin-top: 0.125rem;
     }
 }
+
+.container .aw-mobile-menu-nav {
+    margin-left: calc(-1 * var(--container-padding, 0px));
+    margin-right: calc(-1 * var(--container-padding, 0px));
+}
+
+@screen lg {
+    .container .aw-mobile-menu-nav {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}

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

@@ -28,7 +28,7 @@
         display: flex;
         align-items: center;
 
-        padding: 0.9375rem;
+        padding: var(--header-padding);
 
         position: sticky;
         top: 0;
@@ -50,6 +50,7 @@
         padding: 1.5rem;
 
         position: relative;
+        border-radius: 1.25rem;
 
         &:after {
              @apply bg-mono-900;
@@ -131,13 +132,18 @@
             max-width: 2rem;
             margin: auto;
         }
+
+        &.project-logo {
+             width: auto;
+        }
     }
 
     &__version {
         display: block;
-        padding: 0 theme('spacing.2', 0.5rem) theme('spacing.2', 0.5rem);
         font-size: theme('fontSize.xs', 0.75rem);
-        text-align: center
+        text-align: center;
+        padding: 0 1rem 0.75rem;
+        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.5rem);
     }
 
     &__close {
@@ -168,4 +174,10 @@
         visibility: visible;
         transition: 60ms opacity ease-out, 0ms visibility;
     }
+
+    &__back.aw-button,
+    &__close.aw-button {
+         width: 3rem;
+         height: 3rem;
+    }
 }