@drumee/ui-toolkit 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drumee/ui-toolkit",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "",
   "main": ".",
   "repository": {

package/skeleton/index.js

@@ -0,0 +1,2 @@
+
+export * from './menu/index';

package/skeleton/menu/index.js

@@ -0,0 +1,2 @@
+
+export * from './dropdown';

package/skeleton/menu/slide-menu.js

@@ -0,0 +1,72 @@
+const toolKitClass = "drumee-ui-toolkit-slide-menu"
+
+function buildItems(ui, flow, items) {
+  const pfx = `${ui.fig.family}__menu-items ${toolKitClass}`;
+  let kids = []
+  for (let item of items) {
+    let icon = item.ico || item.icon;
+    if (icon) {
+      let cn = item.className || "";
+      kids.push(
+        Skeletons.Button.Label({
+          ...item,
+          className: `${pfx}--item ${cn}`,
+          label: item.label || item.content || "",
+        })
+      )
+    } else {
+      kids.push(
+        Skeletons.Note({
+          ...item,
+          className: `${pfx}--item ${cn}`,
+          content: item.content || item.label || "",
+        })
+      )
+    }
+  }
+
+  return Skeletons.Box.Y({
+    debug: __filename,
+    className: `${pfx} `,
+    flow,
+    kids
+  });
+};
+
+export function slideMenu(ui, opt) {
+  let {
+    trigger,
+    persistence = _a.once,
+    service,
+    opening = _e.click,
+    sys_pn,
+    flow = _a.y,
+    axis,
+    direction = _a.down,
+    items,
+    offsetY = 0
+  } = opt;
+  trigger = trigger || Skeletons.Box.X({
+    className: `${ui.fig.family}__menu-trigger`
+  });
+  axis = axis || flow;
+
+  return Skeletons.Box.X({
+    className: `${ui.fig.family}__menu-wrapper`,
+    debug: __filename,
+    kids: [{
+      kind: KIND.menu.topic,
+      className: `${ui.fig.family}__menu-main`,
+      flow,
+      opening,
+      service,
+      sys_pn,
+      direction,
+      offsetY,
+      persistence,
+      trigger,
+      items: buildItems(items),
+    }]
+  });
+
+};

package/skin/skin.scss

@@ -20,6 +20,11 @@
       padding: 10px;
       height: auto;
     }
+
+    &[data-fit="parent"] {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &__main {

package/style/acknowledgement.scss

@@ -0,0 +1,68 @@
+&-acknowledgement {
+  &__main {
+    align-items: center;
+    background:$core-default-background;
+    border-radius: $default-border-radius;
+    height: calc(100% - 350px);
+    justify-content: center;
+    min-height: 275px;//250px;
+    min-width: 300px;
+    width: calc(100% - 350px);
+  }
+
+  &__note {
+    &.message-info {
+      @include typo($size: 16px, $line: 20px, $weight:300, $color:$core-default-text-color);
+      padding: 15px;
+    }
+
+    &.redirect-info {
+      padding: 50px 15px;
+    }
+  }
+
+  &__close {
+    color:$core-default-thinline-icon;
+    cursor: pointer;
+    margin: 10px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 1;
+  }
+
+  &__icon {
+    &.close {
+      color: $core-default-thinline-icon;
+      cursor: pointer;
+      height: 12px;
+      width: 12px;
+      
+      &:hover {
+        color: $core-default-thinline-icon-hover;
+      }
+    }
+
+    &.success {
+      color: $core-default-icon-success;
+      height: 26px;
+      width: 36px;
+    }
+  }
+
+  &__button-ok {
+    @include typo($size: 16px,$color: $btn-rollback-text);
+    align-items: center;
+    border-radius: $default-border-radius;
+    border: 1px solid $btn-rollback-border ;
+    height: 32px;
+    justify-content: center; 
+    margin-top: 30px;
+    width:90px;
+
+    &:hover {
+      @include typo($size: 16px,$color:$btn-rollback-text-hover);   
+      border:2px solid $btn-rollback-border-hover;
+    }
+  }
+}

package/style/dropdown.scss

@@ -0,0 +1,143 @@
+@use 'mixins/drumee';
+
+&-menu {
+  &__dropdown,
+  &__wrapper {
+    height: 100%;
+    width: 100%;
+  }
+
+  &__wrapper {
+    justify-content: center;
+    align-items: center;
+
+    & .menu-topic-trigger {
+      align-items: center;
+      height: 100%;
+      justify-content: flex-start;
+      width: 100%;
+      z-index: inherit;
+    }
+  }
+
+  &__input_wrapper {
+    align-items: center;
+    background: $core-default-block-background;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+    height: 36px;
+    justify-content: space-evenly;
+    width: 200px;
+
+    & .note-reader {
+      @include typo($size: 14px, $line: 14px, $color: $core-default-text-color);
+      justify-content: center;
+      width: 100%;
+    }     
+  }
+
+  &__icon-dropdown {
+    color: $core-default-icon-neutral;
+    height: 14px;
+    position: absolute;
+    right: 10px;
+    width: 14px;
+  }
+
+  &__items-wrapper {
+    padding: 5px;
+    width: 100%;
+  }
+
+  &__wrapper {
+    &[data-state="1"] {
+      & .trigger-icon {
+        color: $core-default-icon-active;
+      }
+    }
+
+    & .menu-topic-items {
+      &__wrapper {
+        left: 5px;
+        top: calc(100% - 15px) !important;
+        padding:10px;
+      }
+      border-radius:$default-border-radius;
+      background-color: $core-default-background;    
+      box-shadow: $drumee-shadow-container;
+      max-width: 200px;
+      min-width: 190px;
+
+      &:before {
+        background-color: $core-default-background;    
+        box-shadow: -4px -6px 10px 1px rgba(63,79, 117, 0.13);
+        content: "";
+        height: 10px;
+        left: calc(100% - 16px);
+        position: absolute;
+        top: -5px;
+        transform: rotate(45deg);
+        width: 10px;
+      }
+
+      &:after {
+        background: $core-default-background;    
+        border-radius: $default-border-radius-top;
+        content: "";
+        height: 10px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+
+  &__icon {
+    align-items: center;
+    color: $core-default-icon-neutral;
+    cursor: pointer;
+
+    &.trigger-icon {
+      height: 16px;
+      width : 22px;
+    }
+  }
+
+  &__item {
+    cursor: pointer;
+    margin-bottom:  1px;
+    margin-top:  1px;
+    padding: 8px 8px 8px 10px;
+    @include typo($size: 12px, $line: 14px, $color:$core-default-text-color);
+
+    &.disable {
+      opacity: 0.4;//0.2;
+      pointer-events: none;
+      @include typo($size: 12px, $line: 14px,$weight:300,$color:$core-default-background-inactive);
+    }
+
+    &:hover {
+      background-color: $core-default-background-hover;
+      color : $core-default-text-hover ; 
+
+      & .widget-dropdown-menu-menu__note {
+        color:$core-default-text-hover; 
+      }
+      
+      & svg {
+        fill: $core-default-icon-reverse;  
+      }
+    }
+  }
+
+  &__note {
+    padding-top: 0px;
+    @include typo( $size:14px, $weight: 300, $line: 14px, $color: $core-default-text-color);
+
+    &.coming-soon {
+      opacity: 0.4;
+      padding-top: 5px;
+    }
+  }
+}

package/style/form.scss

@@ -0,0 +1,283 @@
+&-form {
+  @use './dropdown';
+
+  &__main {
+    height: 100%;
+    width: 100%;
+    align-items: center;
+  }
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 450px;
+  }
+
+  &__content {
+    align-items: center;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  &__wrapper {
+    height: 100%;
+    width: 100%;
+
+    &.acme-options {
+      &[data-mode="closed"] {
+        display: none;
+      }
+    }
+  }
+
+  &__row-wrapper {
+    @include typo($color:$core-default-text-color, $size: 16px);
+    background-color: $core-default-block-background;
+    border-radius: 6px;
+    box-sizing: border-box;
+    height: 100%;
+    margin-bottom: 18px;
+    max-height: 46px;
+    width: 100%;
+
+    &.contact.name {
+      background-color: $core-default-background;
+      gap: 10px;
+    }
+
+    &.message {
+      height: auto;
+      min-height: 100px;
+
+      & .entry-reminder__ui {
+        height: 100%;
+      }
+    }
+
+    &.terms-and-conditions {
+      justify-content: center;
+    }
+
+    &.terms-and-conditions,
+    &.ssl-dns-setup {
+      background-color: $core-default-background;
+      align-items: center;
+    }
+
+    &.acme_ssl_ca_path {
+      &[data-mode="closed"] {
+        display: none;
+      }
+    }
+  }
+
+  &__entry {
+    &.with-icon {
+      border: none;
+      height: 100%;
+      width: 100%;
+    }
+
+    &.name {
+      background-color: $core-default-block-background;
+    }
+
+    & .entry-reminder {
+      &__main {
+        &.showerror {
+          overflow: hidden;
+          padding-bottom: 14px;
+          min-height: 34px;
+        }
+
+        textarea,
+        input {
+          @include typo($size: 16px, $line: 20px, $color:$core-default-text-color);
+          background-color: $core-default-block-background;
+          border: 0;
+          border-radius: 6px;
+          flex: 1;
+          height: 100%;
+          padding-left: 10px;
+        }
+
+        textarea {
+          padding-top: 5px;
+          height: calc(100% - 7px);
+          min-height: 94px;
+          resize: none;
+          overflow: auto;
+        }
+      }
+
+      &__input-wrap,
+      &__component {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    &[data-status="error"] {
+      border: 1px solid $core-default-border-error;
+      border-radius: 6px;
+    }
+  }
+
+  &__icon {
+    color: $core-default-icon-neutral;
+    margin: 0px 9px 0px 10px;
+    width: 18px;
+
+    &.message {
+      height: 18px;
+      margin: 0 9px 0 9px;
+      top: 6px;
+    }
+
+    &.checkbox {
+      border: 1px solid $core-default-checkbox-border;
+      border-radius: $default-checkbox-border-radius;
+      box-shadow: none;
+      color: $core-default-checkbox-background;
+      cursor: pointer;
+      height: 20px;
+      width: 20px;
+      margin: 0;
+      margin-left: 5px;
+
+      &[data-state="1"] {
+        color: $core-default-checkbox-checked;
+        border: 1px solid $core-default-checkbox-border;//$default-checkbox;
+        box-shadow: none;
+      }
+    }
+
+    &.info-icon {
+      color: $core-special-icon-info;
+      cursor: pointer;
+      height: 25px;
+      padding: 5px;
+      width: 25px;
+      position: absolute;
+      right: 5px;
+      top: 10px;
+
+      .tooltips {
+        &:before {
+          background: $core-background-tooltips;
+          border-radius: 1px;
+          content: '';
+          height: 10px;
+          position: absolute;
+          left: 70px;
+          top: -5px;
+          transform: rotate(45deg);
+          width: 10px;
+        }
+
+        background-color: $core-background-tooltips;
+        @include typo($size: 11px, $line: 15px, $color: $core-default-text-tooltips);
+        border-radius:$default-border-radius;
+        font-size: 11px;
+        width: 300px;
+        padding: 5px 10px;
+        position: absolute;
+        left: -62px;
+        top: 30px;
+        text-align: center;
+        text-align: justify;
+        text-overflow: ellipsis;
+        z-index: 200000;
+        // overflow: hidden;
+        // white-space: nowrap;
+      }
+    }
+  }
+
+  &__note {
+    &.label {
+      @include typo($size:13px, $line:16px, $color: $core-default-text-title);
+      max-width: 150px;
+      padding-left: 5px;
+      width: 100%;
+    }
+
+    &.own-ssl-label {
+      @include typo($size:16px, $line: 20px, $color: $core-default-text-title);
+      padding-left: 20px;
+      width: 100%;
+    }
+
+    &.tips {
+      @include typo($size:12px, $line:1.5, $weight:300, $color: $core-default-text-title);
+      align-items: center;
+      margin-bottom: 18px;
+      width: 40%;
+    }
+
+    &.conditions {
+      &.static {
+        @include typo($size: 14px, $line: 16px, $weight:400, $color: $core-default-text-title);
+        justify-content: center;
+        width: 75px;
+      }
+
+      &.trigger {
+        justify-content: flex-start;
+        right: 5px;
+
+        &:hover {
+          color:$eviolet;
+        }
+      }
+
+      &.text-underline {
+        @include typo($size: 14px, $line: 16px, $weight:700, $color: $core-default-text-title);
+        cursor: pointer;
+        text-decoration-line: underline;
+      }
+    }
+  }
+
+  &__button-wrapper {
+    align-items: center;
+    height: 120px;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__button {
+    &.button {
+      align-items: center;
+      border-radius: 6px;
+      cursor: pointer;
+      height: 46px;
+      justify-content: center;
+      width: 180px;
+    }
+
+    &.action-btn {
+      @include typo($size: 18px, $line: 28px, $color: $core-default-text-reverse);
+      align-items: center;
+      background: $core-background-btn-active;  
+
+      &:hover {
+        background-color:$btn-commit-background-hover;
+        border-color: $btn-commit-border-hover;
+      }
+    }
+
+    &.previous-btn {
+      @include typo($size: 18px, $line: 28px, $color: $btn-rollback-text);
+      border: 1px solid $btn-rollback-border;
+      
+      &:hover {
+        border:2px solid $btn-rollback-border-hover ;
+        color: $btn-rollback-text-hover;   
+      }
+    }
+  }
+}