@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/styles/06-components/_components.menu.scss

@@ -0,0 +1,239 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.colors' as *;
+@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.menu' as menu;
+@use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.animations' as animations;
+@use '../02-tools/tools.color-mode' as *;
+
+.c-menu {
+  $root: &;
+
+  --#{config.$prefix}menu-min-width: #{rem.rem(menu.$menu-min-width)};
+  --#{config.$prefix}menu-container-width: #{rem.rem(menu.$menu-container-width)};
+  --#{config.$prefix}menu-padding-x: #{rem.rem(menu.$menu-padding-x)};
+  --#{config.$prefix}menu-padding-y: #{rem.rem(menu.$menu-padding-y)};
+  --#{config.$prefix}menu-bg: #{menu.$menu-bg};
+  --#{config.$prefix}menu-border-radius: #{menu.$menu-border-radius};
+  --#{config.$prefix}menu-box-shadow: #{menu.$menu-box-shadow};
+  --#{config.$prefix}menu-items-gap: #{menu.$menu-items-gap};
+  --#{config.$prefix}menu-item-padding-x: #{menu.$menu-item-padding-x};
+  --#{config.$prefix}menu-item-padding-y: #{menu.$menu-item-padding-y};
+  --#{config.$prefix}menu-item-inner-gap: #{menu.$menu-item-inner-gap};
+  --#{config.$prefix}menu-item-color: #{menu.$menu-item-color};
+  --#{config.$prefix}menu-item-font-size: #{menu.$menu-item-font-size};
+  --#{config.$prefix}menu-item-font-weight: #{menu.$menu-item-font-weight};
+  --#{config.$prefix}menu-item-bg: #{menu.$menu-item-bg};
+  --#{config.$prefix}menu-item-bg-hover: #{menu.$menu-item-bg-hover};
+  --#{config.$prefix}menu-item-bg-active: #{menu.$menu-item-bg-active};
+  --#{config.$prefix}menu-item-icon-size: #{menu.$menu-item-icon-size};
+  --#{config.$prefix}menu-subitem-color: #{menu.$menu-subitem-color};
+  --#{config.$prefix}menu-subitem-color-active: #{menu.$menu-subitem-color-active};
+  --#{config.$prefix}menu-subitem-font-weight: #{menu.$menu-subitem-font-weight};
+  --#{config.$prefix}menu-subitem-font-weight-active: #{menu.$menu-subitem-font-weight-active};
+  --#{config.$prefix}menu-mega-padding-x: #{rem.rem(menu.$menu-mega-padding-x)};
+  --#{config.$prefix}menu-mega-padding-y: #{rem.rem(menu.$menu-mega-padding-y)};
+  --#{config.$prefix}menu-mega-grid-gap: #{rem.rem(menu.$menu-mega-grid-gap)};
+  --#{config.$prefix}menu-mega-header-title-font-size: #{menu.$menu-mega-header-title-font-size};
+  --#{config.$prefix}menu-mega-header-title-font-weight: #{menu.$menu-mega-header-title-font-weight};
+
+  display: inline-block;
+  min-width: var(--#{config.$prefix}menu-min-width);
+  padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
+  background-color: var(--#{config.$prefix}menu-bg);
+  border-radius: var(--#{config.$prefix}menu-border-radius);
+  box-shadow: var(--#{config.$prefix}menu-box-shadow);
+  z-index: 5;
+
+  &__container {
+    width: 100%;
+    max-width: var(--#{config.$prefix}menu-container-width);
+    margin: {
+      left: auto;
+      right: auto;
+    }
+    padding: 0 var(--#{config.$prefix}menu-mega-padding-x);
+  }
+
+  &__list {
+    list-style: none;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+
+  &__item {
+    & + & {
+      margin-top: var(--#{config.$prefix}menu-items-gap);
+    }
+
+    &--haschildren {
+      position: relative;
+
+      > #{$root} {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        visibility: hidden;
+        opacity: 0;
+        @include animations.basic-transition();
+      }
+
+      &:hover {
+        > #{$root} {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: var(--#{config.$prefix}menu-item-inner-gap);
+    padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
+    color: var(--#{config.$prefix}menu-item-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+    font-weight: var(--#{config.$prefix}menu-item-font-weight);
+    background-color: var(--#{config.$prefix}menu-item-bg);
+    border-radius: var(--#{config.$prefix}menu-border-radius);
+    cursor: pointer;
+    @include animations.basic-transition();
+
+    &:hover {
+      color: var(--#{config.$prefix}menu-item-color);
+      background-color: var(--#{config.$prefix}menu-item-bg-hover);
+    }
+
+    &:focus,
+    &:active,
+    &.is-active {
+      background-color: var(--#{config.$prefix}menu-item-bg-active);
+    }
+  }
+
+  &__icon {
+    font-size: var(--#{config.$prefix}menu-item-icon-size);
+  }
+
+  &__toggle {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &__toggle-icon {
+    margin-left: auto;
+    @include animations.basic-transition();
+  }
+
+  &__subitems {
+    position: relative;
+  }
+
+  &__subitems-wrapper {
+    height: 0px;
+    overflow: hidden;
+    @include animations.basic-transition();
+  }
+
+  &__subitems-list {
+    list-style: none;
+    margin-bottom: 0;
+    padding-left: rem.rem(23px);
+  }
+
+  &__subitem-link {
+    display: flex;
+    align-items: center;
+    gap: var(--#{config.$prefix}menu-item-inner-gap);
+    padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
+    color: var(--#{config.$prefix}menu-subitem-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+    font-weight: var(--#{config.$prefix}menu-subitem-font-weight);
+    @include animations.basic-transition();
+
+    &:hover {
+      color: var(--#{config.$prefix}primary);
+    }
+
+    &:focus,
+    &:active,
+    &.is-active {
+      color: var(--#{config.$prefix}menu-subitem-color-active);
+      font-weight: var(--#{config.$prefix}menu-subitem-font-weight-active);
+    }
+  }
+
+  &__grid {
+    --#{config.$prefix}gutter-x: var(--#{config.$prefix}menu-mega-grid-gap);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--#{config.$prefix}menu-item-inner-gap);
+    padding: 0 var(--#{config.$prefix}menu-item-padding-y)
+      var(--#{config.$prefix}menu-item-padding-x) var(--#{config.$prefix}menu-item-padding-x);
+    margin-bottom: var(--#{config.$prefix}menu-item-padding-y);
+    border-bottom: 1px solid var(--#{config.$prefix}primary-border-subtle);
+  }
+
+  &__header-title {
+    color: var(--#{config.$prefix}menu-item-color);
+    font-size: var(--#{config.$prefix}menu-mega-header-title-font-size);
+    font-weight: var(--#{config.$prefix}menu-mega-header-title-font-weight);
+  }
+
+  &__header-icon {
+    font-size: rem.rem(24px);
+  }
+
+  &__content-title {
+    color: var(--#{config.$prefix}menu-item-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+    font-weight: var(--#{config.$prefix}menu-item-font-weight);
+  }
+
+  &__content-text {
+    color: var(--#{config.$prefix}menu-subitem-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+    margin-top: var(--#{config.$prefix}menu-items-gap);
+  }
+
+  &__content-menu {
+    height: 100%;
+    padding-left: var(--#{config.$prefix}menu-mega-grid-gap);
+    border-left: 1px solid var(--#{config.$prefix}primary-border-subtle);
+  }
+
+  &__content-menu-title {
+    color: var(--#{config.$prefix}menu-subitem-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+  }
+
+  &__content-menu-list {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  &__content-menu-item {
+    margin-top: rem.rem(12px);
+  }
+
+  &__content-menu-link {
+    color: var(--#{config.$prefix}menu-item-color);
+    font-size: var(--#{config.$prefix}menu-item-font-size);
+    font-weight: var(--#{config.$prefix}menu-item-font-weight);
+
+    &:hover {
+      color: var(--#{config.$prefix}menu-item-color);
+    }
+  }
+
+  &--mega {
+    width: 100%;
+    min-height: auto;
+    padding: var(--#{config.$prefix}menu-mega-padding-y) 0;
+    border-radius: 0px;
+  }
+}

package/src/styles/06-components/_components.messages.scss

@@ -0,0 +1,332 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.colors' as *;
+@use '../01-settings/settings.maps' as maps;
+@use '../01-settings/settings.messages' as messages;
+@use '../01-settings/settings.border-radius' as border;
+@use '../01-settings/settings.typography' as typo;
+@use '../02-tools/tools.rem' as rem;
+@use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.object-fit' as *;
+@use '../02-tools/tools.color-mode' as *;
+@use '../02-tools/tools.size' as *;
+
+.c-messages {
+  $root: &;
+
+  --#{config.$prefix}messages-width: #{messages.$messages-width};
+  --#{config.$prefix}messages-padding-x: #{rem.rem(messages.$messages-padding-x)};
+  --#{config.$prefix}messages-padding-y: #{rem.rem(messages.$messages-padding-y)};
+  --#{config.$prefix}messages-border-radius: #{messages.$messages-border-radius};
+  --#{config.$prefix}messages-border-width: #{messages.$messages-border-width};
+  --#{config.$prefix}messages-border-color: #{messages.$messages-border-color};
+  --#{config.$prefix}messages-bg: #{messages.$messages-bg};
+  --#{config.$prefix}messages-content-margin-top: #{rem.rem(messages.$messages-content-margin-top)};
+  --#{config.$prefix}messages-avatar-margin: #{rem.rem(messages.$messages-avatar-margin)};
+  --#{config.$prefix}messages-items-padding-x: #{rem.rem(messages.$messages-items-padding-x)};
+  --#{config.$prefix}messages-items-padding-y: #{rem.rem(messages.$messages-items-padding-y)};
+  --#{config.$prefix}messages-items-width: #{rem.rem(messages.$messages-items-width)};
+  --#{config.$prefix}messages-items-border-width: #{messages.$messages-items-border-width};
+  --#{config.$prefix}messages-items-border-color: #{messages.$messages-items-border-color};
+  --#{config.$prefix}messages-items-border-radius: #{messages.$messages-items-border-radius};
+  --#{config.$prefix}messages-items-gap: #{rem.rem(messages.$messages-items-gap)};
+  --#{config.$prefix}messages-text-padding-x: #{rem.rem(messages.$messages-text-padding-x)};
+  --#{config.$prefix}messages-text-padding-y: #{rem.rem(messages.$messages-text-padding-y)};
+  --#{config.$prefix}messages-text-color: #{messages.$messages-text-secondary-color};
+  --#{config.$prefix}messages-text-font-size: #{messages.$messages-text-font-size};
+  --#{config.$prefix}messages-text-bg: #{messages.$messages-text-secondary-bg};
+  --#{config.$prefix}messages-text-border-radius: #{messages.$messages-text-border-radius};
+  --#{config.$prefix}messages-file-padding-x: #{messages.$messages-file-padding-x};
+  --#{config.$prefix}messages-file-padding-y: #{messages.$messages-file-padding-y};
+  --#{config.$prefix}messages-file-text-font-size: #{messages.$messages-file-text-font-size};
+  --#{config.$prefix}messages-file-text-color: #{messages.$messages-file-text-secondary-color};
+  --#{config.$prefix}messages-file-icon-size: #{rem.rem(messages.$messages-file-icon-size)};
+  --#{config.$prefix}messages-file-icon-margin-right: #{messages.$messages-file-icon-margin-right};
+  --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg};
+  --#{config.$prefix}messages-file-info-font-size: #{messages.$messages-file-info-font-size};
+  --#{config.$prefix}messages-file-info-color: #{messages.$messages-file-info-color};
+  --#{config.$prefix}messages-file-bg: #{messages.$messages-file-secondary-bg};
+  --#{config.$prefix}messages-file-border-radius: #{messages.$messages-file-border-radius};
+  --#{config.$prefix}messages-image-width: #{messages.$messages-image-width};
+  --#{config.$prefix}messages-image-height: #{messages.$messages-image-height};
+  --#{config.$prefix}messages-image-border-radius: #{messages.$messages-image-border-radius};
+  --#{config.$prefix}messages-form-margin-top: #{rem.rem(messages.$messages-form-margin-top)};
+  --#{config.$prefix}messages-form-row-gap: #{rem.rem(messages.$messages-form-row-gap)};
+  --#{config.$prefix}messages-form-submit-icon-size: #{rem.rem(
+      messages.$messages-form-submit-icon-size
+    )};
+  --#{config.$prefix}messages-input-padding-x: #{rem.rem(messages.$messages-input-padding-x)};
+  --#{config.$prefix}messages-input-padding-y: #{rem.rem(messages.$messages-input-padding-y)};
+  --#{config.$prefix}messages-input-font-size: #{messages.$messages-input-font-size};
+  --#{config.$prefix}messages-input-color: #{messages.$messages-input-color};
+  --#{config.$prefix}messages-input-placeholder-color: #{messages.$messages-input-placeholder-color};
+  --#{config.$prefix}messages-input-border-width: #{messages.$messages-input-border-width};
+  --#{config.$prefix}messages-input-border-color: #{messages.$messages-input-border-color};
+  --#{config.$prefix}messages-input-border-radius: #{messages.$messages-input-border-radius};
+  --#{config.$prefix}messages-input-options-icons-size: #{messages.$messages-input-options-icons-size};
+  --#{config.$prefix}messages-input-options-row-gap: #{rem.rem(
+      messages.$messages-input-options-row-gap
+    )};
+  --#{config.$prefix}messages-body-height: #{messages.$messages-body-height};
+
+  width: 100%;
+  max-width: var(--#{config.$prefix}messages-width);
+  min-width: var(--#{config.$prefix}messages-width);
+  padding: var(--#{config.$prefix}messages-padding-y) var(--#{config.$prefix}messages-padding-x);
+  border-radius: var(--#{config.$prefix}messages-border-radius);
+  border: var(--#{config.$prefix}messages-border-width) solid
+    var(--#{config.$prefix}messages-border-color);
+  background-color: var(--#{config.$prefix}messages-bg);
+
+  &__body {
+    max-height: var(--#{config.$prefix}messages-body-height);
+    min-height: var(--#{config.$prefix}messages-body-height);
+    overflow: auto;
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-end;
+
+    margin-top: var(--#{config.$prefix}messages-content-margin-top);
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{config.$prefix}messages-items-gap);
+    width: 100%;
+    max-width: var(--#{config.$prefix}messages-items-width);
+    padding: var(--#{config.$prefix}messages-items-padding-y)
+      var(--#{config.$prefix}messages-items-padding-x);
+    border: var(--#{config.$prefix}messages-items-border-width) solid
+      var(--#{config.$prefix}messages-items-border-color);
+
+    > *:first-child {
+      border-radius: var(--#{config.$prefix}messages-text-border-radius)
+        var(--#{config.$prefix}messages-text-border-radius)
+        var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
+    }
+
+    > *:last-child {
+      border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
+        var(--#{config.$prefix}messages-text-border-radius)
+        var(--#{config.$prefix}messages-text-border-radius);
+    }
+  }
+
+  &__avatar {
+    flex: 0 0 var(--#{config.$prefix}avatar-size);
+    margin-right: var(--#{config.$prefix}messages-avatar-margin);
+  }
+
+  &__name {
+    color: var(--#{config.$prefix}secondary-text-emphasis);
+    font-size: var(--#{config.$prefix}messages-file-info-font-size);
+    font-weight: typo.$font-weight-medium;
+  }
+
+  &__time {
+    display: block;
+    width: 100%;
+    text-align: right;
+    color: var(--#{config.$prefix}messages-file-info-color);
+    font-size: var(--#{config.$prefix}messages-file-info-font-size);
+    margin-top: var(--#{config.$prefix}messages-items-gap);
+  }
+
+  &__text {
+    width: fit-content;
+    color: var(--#{config.$prefix}messages-text-color);
+    font-size: var(--#{config.$prefix}messages-text-font-size);
+    padding: var(--#{config.$prefix}messages-text-padding-y)
+      var(--#{config.$prefix}messages-text-padding-x);
+    background-color: var(--#{config.$prefix}messages-text-bg);
+    border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
+      var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
+  }
+
+  &__file {
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--#{config.$prefix}messages-file-padding-y)
+      var(--#{config.$prefix}messages-file-padding-x);
+    border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius)
+      var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm;
+    background: var(--#{config.$prefix}messages-file-bg);
+  }
+
+  &__file-icon {
+    display: grid !important;
+    place-items: center;
+    font-size: rem.rem(24px);
+    @include square(var(--#{config.$prefix}messages-file-icon-size));
+    color: var(--#{config.$prefix}tertiary-text-emphasis);
+    margin-right: var(--#{config.$prefix}messages-file-icon-margin-right);
+    background-color: var(--#{config.$prefix}body-bg);
+    border-radius: border.$border-radius-pill;
+  }
+
+  &__file-name {
+    color: var(--#{config.$prefix}messages-file-text-color);
+    font-size: var(--#{config.$prefix}messages-file-text-font-size);
+  }
+
+  &__file-size {
+    color: var(--#{config.$prefix}messages-file-info-color);
+    font-size: var(--#{config.$prefix}messages-file-info-font-size);
+  }
+
+  &__image {
+    @include size(
+      var(--#{config.$prefix}messages-image-width),
+      var(--#{config.$prefix}messages-image-height)
+    );
+    border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius)
+      var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm;
+    @include object-fit(cover);
+  }
+
+  &__content--self {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+
+    #{$root} {
+      &__avatar {
+        margin-right: 0;
+        margin-left: var(--#{config.$prefix}messages-avatar-margin);
+      }
+
+      &__items {
+        align-items: flex-end;
+        border-radius: var(--#{config.$prefix}messages-items-border-radius)
+          var(--#{config.$prefix}messages-items-border-radius) 0
+          var(--#{config.$prefix}messages-items-border-radius);
+
+        > *:first-child {
+          border-radius: var(--#{config.$prefix}messages-text-border-radius)
+            var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
+            var(--#{config.$prefix}messages-text-border-radius);
+        }
+
+        > *:last-child {
+          border-radius: var(--#{config.$prefix}messages-text-border-radius)
+            border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
+            var(--#{config.$prefix}messages-text-border-radius);
+        }
+      }
+
+      &__text {
+        --#{config.$prefix}messages-text-color: #{messages.$messages-text-primary-color};
+        --#{config.$prefix}messages-text-bg: #{messages.$messages-text-primary-bg};
+        border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
+          border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius);
+      }
+
+      &__file {
+        --#{config.$prefix}messages-file-text-color: #{messages.$messages-file-text-primary-color};
+        --#{config.$prefix}messages-file-bg: #{messages.$messages-file-primary-bg};
+        border-radius: var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm
+          border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius);
+
+        @include color-mode('dark') {
+          --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
+        }
+      }
+
+      &__image {
+        border-radius: var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm
+          border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius);
+      }
+
+      &__file-icon {
+        color: var(--#{config.$prefix}invert-text-emphasis);
+        background-color: var(--#{config.$prefix}messages-file-icon-bg);
+
+        @include color-mode('dark') {
+          --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
+        }
+      }
+    }
+  }
+
+  &__form {
+    display: flex;
+    gap: var(--#{config.$prefix}messages-form-row-gap);
+    margin-top: var(--#{config.$prefix}messages-form-margin-top);
+  }
+
+  &__input-group {
+    width: 100%;
+    position: relative;
+  }
+
+  &__options {
+    position: absolute;
+    right: var(--#{config.$prefix}messages-input-padding-x);
+    top: 50%;
+    display: flex;
+    gap: var(--#{config.$prefix}messages-input-options-row-gap);
+    align-items: center;
+    transform: translateY(-50%);
+  }
+
+  &__option {
+    appearance: none;
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &__option-icon {
+    color: var(--#{config.$prefix}tertiary-text-emphasis);
+    cursor: pointer;
+  }
+
+  &__input {
+    width: 100%;
+    padding: var(--#{config.$prefix}messages-input-padding-y)
+      var(--#{config.$prefix}messages-input-padding-x);
+    color: var(--#{config.$prefix}messages-input-color);
+    font-size: var(--#{config.$prefix}messages-input-font-size);
+    border: var(--#{config.$prefix}messages-input-border-width) solid
+      var(--#{config.$prefix}messages-input-border-color);
+    border-radius: var(--#{config.$prefix}messages-input-border-radius);
+    background-color: var(--#{config.$prefix}messages-bg);
+    resize: none;
+
+    &::placeholder {
+      color: var(--#{config.$prefix}messages-input-placeholder-color);
+      font-size: var(--#{config.$prefix}messages-input-font-size);
+    }
+
+    &:focus {
+      outline: 0;
+      border-color: var(--#{config.$prefix}primary);
+    }
+  }
+
+  &__submit {
+    display: grid;
+    place-items: center;
+    align-self: flex-end;
+    padding: rem.rem(10px);
+    background-color: var(--#{config.$prefix}brand-bg-subtle);
+    color: var(--#{config.$prefix}invert-text-emphasis);
+    border-radius: border.$border-radius-pill;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+
+    .c-icon {
+      width: var(--#{config.$prefix}messages-form-submit-icon-size);
+      height: var(--#{config.$prefix}messages-form-submit-icon-size);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}