@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/sass/modals/modalNodeLibrary.scss

@@ -0,0 +1,131 @@
+#modalAddNodeWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-left: 20px;
+  overflow-x: hidden;
+
+  #library-header {
+    padding-top: 49px;
+    div.category-selected-title {
+      padding: 12px 0px 26px 47px;
+      font-size: 29px;
+      font-weight: 800;
+      color: #1b1a1b;
+      margin-top: 7px;
+      letter-spacing: -0.01em;
+    }
+  }
+
+  #library-node-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 700px;
+
+    #loading-library {
+      display: flex;
+      flex-direction: column;
+      margin-top: 200px;
+    }
+
+    #library-grid {
+      width: 100%;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      display: flex;
+      flex-flow: row wrap;
+      min-height: min-content;
+      padding-left: 28px;
+      width: 100%;
+      .library-node-card {
+        background: #fff;
+        cursor: pointer;
+        border: 1px solid #fff;
+        padding: 10px 0px;
+        margin: 15px 15px;
+        text-align: center;
+        box-shadow: 0 2px 0 hsla(0, 0%, 69%, 0.12);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        width: 320px;
+        flex-direction: column;
+        border-radius: 5px;
+        &:hover {
+          box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.4);
+          transition: box-shadow 280ms ease-in-out,
+            -webkit-box-shadow 280ms ease-in-out;
+        }
+        &.node-installed {
+          //border: 1px solid green;
+        }
+        &.node-required-restart {
+          border: 1px solid #3988cb;
+        }
+        &.library-node-card-premium {
+          // cursor: no-drop;
+        }
+        .nodecard-cover {
+          padding: 8px;
+          display: flex;
+          height: 27px;
+          align-items: center;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        .nodecard-info {
+          padding: 32px 10px 5px 20px;
+          display: flex;
+          flex-direction: column;
+          text-align: left;
+          margin: 8px 0px 4px 0px;
+          font-size: 22px;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          .node-author {
+            font-size: 15px;
+            color: darkgrey;
+            font-weight: 300;
+            font-weight: 400;
+          }
+        }
+        .nodecard-details {
+          padding: 5px 20px;
+          font-size: 13px;
+          text-align: left;
+          color: grey;
+          height: 64px;
+          line-height: 17px;
+        }
+        .nodecard-actions {
+          button.card-button {
+            margin-bottom: 8px;
+            border-radius: 4px;
+            padding: 8px 21px;
+            color: #333 !important;
+            border-color: #d8d8d8;
+            background: #fff;
+            outline: none;
+            &:hover {
+              color: #666 !important;
+              background: #ddd;
+            }
+            &.node-installing {
+              border: none;
+            }
+            &.node-installed {
+              border: 1px solid #ee513c;
+              background: none;
+              color: #ee513c !important;
+            }
+            &.node-required-restart {
+              border: 1px solid #3988cb;
+              background: #3988cb;
+              color: white !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/app/ui/editor-client/src/sass/modals/modalWelcome.scss

@@ -0,0 +1,102 @@
+#modalWelcomeContainer {
+  display: flex;
+  justify-content: center;
+
+  #newProjectWelcomeSection {
+    display: flex;
+    flex-direction: column;
+    width: 70%;
+    background: #f3f3f3;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10%;
+    #actions {  
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      padding-top: 47px;
+      padding-bottom: 49px;
+
+      #actionNewProjectWelcome {
+        display: flex;
+        // background: yellow;
+
+        #newProjectWelcomeBtn {
+          cursor: pointer;
+          justify-content: center;
+          align-items: flex-start;
+        }
+      }
+
+      #actionOpenProjectWelcome {
+        display: flex;
+        padding-top: 17px;
+
+        #openProjectWelcomeBtn {
+          cursor: pointer;
+          justify-content: center;
+          align-items: flex-start;
+        }
+      }
+    }
+  }
+
+  #dependencies {
+    padding-top: 30px;
+  }
+
+  #openProjectWelcomeSection {
+    display: flex;
+    padding: 10px 0px;
+    width: 30%;
+    background: #eeeeee;
+    flex-direction: column;
+  }
+
+  .action-container {
+    display: flex;
+    margin-top: 45px;
+    width: 100%;
+    align-items: center;
+    width: 65%;
+    //padding-left: 135px;
+  }
+
+  .logo-container {
+    display: flex;
+    width: 5%;
+    margin-left: 15px;
+  }
+
+  .info-container {
+    display: flex;
+    flex-direction: column;
+    width: 95%;
+    margin-left: 20px;
+  }
+
+  .action-title {
+    font-weight: 500;
+    font-size: large;
+    margin-left: 11px;
+  }
+
+  .action-subtitle {
+    font-size: small;
+  }
+
+  .home-title {
+    font-size: 37px;
+    font-weight: bold;
+  }
+  .subtitle {
+    font-size: 13px;
+    font-weight: 300;
+    color: grey;
+    padding-top: 15px;
+  }
+  .actionSelected {
+    color: $editor-button-background-primary-hover;
+  }
+}

package/src/app/ui/editor-client/src/sass/notifications.scss

@@ -0,0 +1,118 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+#notifications {
+    z-index: 100;
+    width: 500px;
+    margin-left: -250px;
+    left: 50%;
+    position: absolute;
+    top: 1px;
+}
+.notification {
+    box-sizing: border-box;
+    position: relative;
+    padding: 14px 18px;
+    margin-bottom: 4px;
+    box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
+    background-color: #fff;
+    color: #666;
+    border: 1px solid #325C80;
+    border-left-width: 16px;
+    overflow: hidden;
+}
+.notification p:first-child {
+    font-size: 1.1em;
+    font-weight: 400;
+}
+.notification a {
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.notification-success {
+    border-color: #4B8400;
+}
+.notification-warning {
+    border-color: #f48120;
+}
+.notification-error {
+    border-color: #ff333a;
+}
+
+.notification-shake-horizontal {
+    -webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both;
+            animation: notification-shake-horizontal 0.3s steps(2, end) both;
+}
+
+@-webkit-keyframes notification-shake-horizontal {
+    0%,
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70% {
+        -webkit-transform: translateX(-1px);
+        transform: translateX(-1px);
+    }
+    20%,
+    40%,
+    60% {
+        -webkit-transform: translateX(1px);
+        transform: translateX(1px);
+    }
+    // 80% {
+    //     -webkit-transform: translateX(1px);
+    //     transform: translateX(1px);
+    // }
+    // 90% {
+    //     -webkit-transform: translateX(-1px);
+    //     transform: translateX(-1px);
+    // }
+}
+@keyframes notification-shake-horizontal {
+    0%,
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70% {
+        -webkit-transform: translateX(-1px);
+        transform: translateX(-1px);
+    }
+    20%,
+    40%,
+    60% {
+        -webkit-transform: translateX(1px);
+        transform: translateX(1px);
+    }
+    // 80% {
+    //     -webkit-transform: translateX(1px);
+    //     transform: translateX(1px);
+    // }
+    // 90% {
+    //     -webkit-transform: translateX(-1px);
+    //     transform: translateX(-1px);
+    // }
+}

package/src/app/ui/editor-client/src/sass/palette-editor.scss

@@ -0,0 +1,275 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+input.templateable:focus {
+  border-color: #9c27b0 !important;
+  background: url("images/icons/bolt.png") right no-repeat;
+  background-color:white;
+}
+
+textarea.templateable:focus {
+  border-color: #9c27b0 !important;
+}
+
+#user-settings-tab-palette {
+  height: 100%;
+}
+
+#palette-editor {
+  text-align: left;
+  position: absolute;
+  top: 0px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background: #fff;
+
+  .red-ui-editableList-container {
+    border: none;
+    border-radius: 0;
+    padding: 0px;
+
+    // Autocomplete - customization
+    .ui-menu > a.ui-corner-all {
+      display: block;
+      padding: 3px 15px;
+      clear: both;
+      font-weight: normal;
+      line-height: 20px;
+      color: #555555;
+      white-space: nowrap;
+      text-decoration: none;
+      background: none;
+    }
+    .ui-state-hover,
+    .ui-state-active {
+      line-height: 20px;
+      background-color: #eeeeee !important;
+    }
+
+    li {
+      // border: none;
+      // border-top: 1px solid $primary-border-color;
+      padding: 0px;
+      .disabled {
+        background: #f3f3f3;
+
+        .palette-module-name {
+          font-style: italic;
+          color: #aaa;
+        }
+        .palette-module-version {
+          color: #aaa;
+        }
+        .palette-module-errors .fa-warning {
+          opacity: 0.5;
+        }
+        ul.palette-module-error-list li {
+          color: #aaa;
+        }
+      }
+      .red-ui-editableList-item-content {
+        padding: 12px 16px;
+      }
+      &:last-child {
+        // border-bottom: 1px solid $primary-border-color;
+      }
+    }
+  }
+  .palette-editor-tab {
+    position: absolute;
+    top: 35px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .palette-editor-toolbar {
+    background: #f3f3f3;
+    box-sizing: border-box;
+    padding: 8px 10px;
+    border-bottom: 1px solid $primary-border-color;
+    text-align: right;
+  }
+  .palette-module-shade-status {
+    color: #666;
+  }
+  .palette-module-updated {
+    margin-left: 10px;
+  }
+  .palette-module-link {
+    margin-left: 5px;
+  }
+
+  .palette-module-description {
+    margin-left: 20px;
+    font-size: 0.9em;
+    color: #999;
+  }
+  .palette-module-link {
+  }
+  .palette-module-set-button-group {
+  }
+  .palette-module-count {
+    border-radius: 4px;
+    background: #eee;
+    padding: 2px 8px;
+    font-size: 12px;
+  }
+  .palette-module-content {
+    display: none;
+    padding: 10px 3px;
+  }
+  i.fa.palette-module-node-chevron {
+    width: 8px;
+    margin-right: 0;
+    transform: rotate(0deg);
+    transition: transform 0.2s ease-in-out;
+  }
+  .expanded {
+    i.fa.palette-module-node-chevron {
+      transform: rotate(90deg);
+    }
+
+    .palette-module-set-button {
+      background: #f3f3f3 !important;
+    }
+  }
+  .palette-module-set {
+    border: 1px solid $secondary-border-color;
+    border-radius: 0;
+    padding: 5px;
+    position: relative;
+    &:not(:last-child) {
+      border-bottom: none;
+    }
+    &:first-child {
+      border-top-right-radius: 2px;
+      border-top-left-radius: 2px;
+    }
+    &:last-child {
+      border-bottom-right-radius: 2px;
+      border-bottom-left-radius: 2px;
+    }
+  }
+
+  .palette-module-type {
+    color: #666;
+    padding-left: 5px;
+    font-size: 0.9em;
+    @include enable-selection;
+  }
+  .palette-module-type-swatch {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    vertical-align: middle;
+    margin-right: 5px;
+    background: #fff;
+    border: 1px solid #fff;
+  }
+  .palette-module-set-button-group {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+
+  .palette-module-set-disabled {
+    background: #eee;
+    .palette-module-type {
+      color: #999;
+    }
+  }
+  .palette-module-more {
+    padding: 0 !important;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: $tab-background-inactive;
+    a {
+      display: block;
+      text-align: center;
+      padding: 12px 8px;
+      color: #ad1625;
+
+      &:hover {
+        text-decoration: none;
+        background: $tab-background-hover;
+      }
+    }
+  }
+}
+.palette-module-meta {
+  color: #666;
+  position: relative;
+  &.disabled {
+    color: #ccc;
+  }
+
+  .fa {
+    width: 15px;
+    text-align: center;
+    margin-right: 5px;
+  }
+}
+.palette-module-name {
+  white-space: nowrap;
+  @include enable-selection;
+}
+.palette-module-version,
+.palette-module-updated,
+.palette-module-link {
+  font-style: italic;
+  font-size: 0.8em;
+  @include enable-selection;
+}
+.palette-module-section {
+  padding: 0 !important;
+  background: #f9f9f9 !important;
+  font-size: 0.9em;
+  color: #666;
+}
+.palette-module-button-group {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  a {
+    margin-left: 5px;
+  }
+}
+.palette-module-meta .fa-warning {
+  color: #ad1625;
+}
+ul.palette-module-error-list {
+  display: inline-block;
+  list-style-type: none;
+  margin: 0;
+  font-size: 0.9em;
+  li {
+    border: none;
+    background: none;
+  }
+}
+
+.palette-module-shade {
+  @include shade;
+  text-align: center;
+  padding-top: 20px;
+}
+#palette-module-install-shade {
+  padding-top: 80px;
+}