@silexlabs/silex 3.0.0-alpha.100

package/src/css/grapesjs-light.scss

@@ -0,0 +1,180 @@
+// Comes from gramateria
+/* Overwrite GrapeJS css */
+
+.gjs-cm-editor#gjs-cm-css #gjs-cm-title,
+.gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title,
+.gjs-two-color,
+.gjs-four-color,
+.gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
+    color: #464973;
+}
+
+.gjs-one-bg {
+    background-color: #f6f7f9;
+}
+
+.gjs-block:hover {
+    box-shadow: 0 3px 4px 0 rgba(204, 210, 251, 0.42);
+}
+
+.gjs-category-title,
+.gjs-sm-sector .gjs-sm-title,
+.gjs-clm-tags .gjs-sm-title,
+.gjs-block-category .gjs-title,
+.gjs-layer-title {
+    background-color: #eee;
+    border-bottom: 1px solid rgba(121, 121, 121, 0.25);
+}
+
+/* text editor color */
+
+
+.gjs-cm-editor #gjs-cm-title {
+    background-color: rgba(164, 190, 241, 0.2);
+}
+
+.cm-s-hopscotch.CodeMirror {
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2f3c54+0,414251+100 */
+    background: #2f3c54;
+    /* Old browsers */
+    background: -moz-linear-gradient(-45deg, #2f3c54 0%, #414251 100%);
+    /* FF3.6-15 */
+    background: -webkit-linear-gradient(-45deg, #2f3c54 0%, #414251 100%);
+    /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(135deg, #2f3c54 0%, #414251 100%);
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f3c54', endColorstr='#414251', GradientType=1);
+    /* IE6-9 fallback on horizontal gradient */
+    color: #999;
+}
+
+.cm-s-hopscotch .CodeMirror-gutters {
+    background: #232c3c;
+}
+
+
+/* class name */
+.gjs-clm-tags #gjs-clm-close,
+.gjs-clm-tags #gjs-clm-checkbox {
+    color: #444;
+}
+
+.gjs-three-bg {
+    background-color: #f6f7f9;
+}
+
+/* select box */
+.gjs-field-arrow-u {
+    border-bottom: 4px solid #444;
+}
+
+.gjs-field-arrow-d {
+    border-top: 4px solid #444;
+}
+
+
+.gjs-field .gjs-d-s-arrow {
+    border-top: 4px solid rgb(68, 68, 68);
+}
+
+.gjs-pn-btn.fa:before,
+.gjs-block.fa:before {
+    color: #262c42;
+}
+
+.gjs-block {
+    background: #fff;
+}
+
+.gjs-blocks-c {
+    padding-bottom: 6px;
+}
+
+.gjs-field select.gjs-devices {
+    padding: 2px;
+}
+
+.gjs-color-warn,
+.gjs-sm-sector .gjs-sm-field input,
+.gjs-clm-tags .gjs-sm-field input,
+.gjs-sm-sector .gjs-clm-field input,
+.gjs-clm-tags .gjs-clm-field input,
+.gjs-sm-sector .gjs-sm-field select,
+.gjs-clm-tags .gjs-sm-field select,
+.gjs-sm-sector .gjs-clm-field select,
+.gjs-clm-tags .gjs-clm-field select {
+    color: #000;
+}
+
+#gjs-mdl-c .header-menus {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+}
+
+label.gjs-import-file {
+    padding:10px 30px;
+    border:1px dashed #ddd;
+    font-size:13px;
+    background:#fff;
+}
+
+label.gjs-import-file:hover{
+    cursor:pointer;
+    border-color:var(--theme-color);
+}
+
+.CodeMirror {
+    height: 400px;
+}
+
+button.exportgram {
+    margin-left: 10px;
+    padding: 4px 10px;
+    background: #444;
+    color: #fff;
+    border-radius: 20px;
+}
+
+.html-wrapper,
+.css-wrapper {
+    width: 49%;
+    float: left;
+}
+
+.html-wrapper h4,
+.css-wrapper h4 {
+    margin: 4px 0 4px;
+}
+
+.gjs-mdl-dialog {
+    max-width: none;
+}
+
+.clear-fix {
+    width: 100%;
+    clear: both;
+}
+
+.css-wrapper {
+    margin-left: 2%;
+}
+
+
+
+.gjs-sm-sectors .gjs-radio-items .gjs-radio-item {
+    background: #585858;
+}
+
+label.gjs-radio-item-label,
+.gjs-sm-sectors .gjs-radio-item .fa {
+    color: #fff;
+}
+
+.gjs-four-color-h:hover {
+    color: var(--theme-color);
+}
+
+.iframe-wrapper{
+    padding-bottom:30px;
+}

package/src/css/grapesjs.scss

@@ -0,0 +1,152 @@
+@use "variables" as *;
+
+#gjs {
+  flex: 1 1 auto;
+}
+
+
+.#{$prefix} {
+  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
+    &#{$cnum} {
+      &-bg {
+        background-color: $ccol;
+      }
+
+      &-color {
+        color: $ccol;
+
+        &-h:hover {
+          color: $ccol;
+        }
+      }
+    }
+  }
+}
+
+.#{$cv-prefix}canvas,
+.#{$pn-prefix}panel,
+.#{$pn-prefix}commands {
+  left: $projectBarWidth;
+}
+.#{$pn-prefix}project-bar-panel,
+.#{$pn-prefix}views,
+.#{$pn-prefix}options,
+.#{$pn-prefix}views-container {
+  left: auto;
+}
+.#{$cv-prefix}canvas {
+  width: calc(100% - $viewsPanelWidth - $projectBarWidth);
+}
+.#{$pn-prefix}devices-c {
+  display: flex;
+  .#{$prefix}device-label {
+    display: none;
+  }
+}
+.#{$pn-prefix}views-container {
+  width: $viewsPanelWidth;
+}
+
+.gjs-editor {
+  font-family: $fontFamily;
+  font-size: 0.75rem;
+}
+
+// Inside the canvas
+.gjs-toolbar {
+  background-color: $tertiaryColor;
+}
+.gjs-resizer-h {
+  border-color: $tertiaryColor;
+}
+.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
+    background-color: $tertiaryColor;
+}
+.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+    outline: 1px solid $tertiaryColor;
+}
+
+/*
+*/
+// Font awesome 5 fix
+// https://github.com/GrapesJS/grapesjs/issues/644#issuecomment-833215677
+.gjs-editor-cont .fa {
+	font-weight: 400;
+}
+
+.fa-square-o:before {
+	content: "\f0c8";
+}
+
+.fa-trash-o:before {
+	content: "\f1f8";
+}
+
+.fa-map-o:before {
+	content: "\f279";
+}
+
+.fa-youtube-play:before {
+	content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+	content: "\f054";
+}
+
+.fa-chevron-down:before {
+	content: "\f078";
+}
+
+// Font awesome 6 fix
+.fa-cog:before {
+  font-weight: 900;
+}
+
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+	content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+.fa-sign-out:before {
+  content: "\f08b";
+  font-weight: 900;
+}
+
+.fa-diamond:before {
+  content: "\f3a5";
+}
+/*
+.fa-plus:before {
+	content: "+";
+  font-size: 35px;
+}
+// .fa-plus {
+//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
+// }
+*/

package/src/css/index.scss

@@ -0,0 +1,32 @@
+/* Normalize css */
+@use "normalize.css/normalize";
+
+@use "_variables";
+//@use "light";
+@use "grapesjs/src/styles/scss/main";
+
+/* Silex styles imports */
+@use "silex";
+@use "loader";
+@use "footer";
+@use "dialog";
+@use "project-bar";
+@use "page-panel";
+@use "website-info";
+@use "grapesjs";
+
+//@use "grapesjs-light";
+
+// Ubuntu Fonts
+@use "@fontsource/ubuntu";
+
+.container-png::before {
+  content: " ";
+  background-image: url("../assets/container.png");
+  height: 30px;
+  width: 30px;
+  margin: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+

package/src/css/light.scss

@@ -0,0 +1,7 @@
+$primaryColor: #DDD;
+$secondaryColor: #222;
+$tertiaryColor: #B2A3FE;
+$quaternaryColor: #A1D9FF;
+$quaternaryColor: #FF3333;
+$darkerPrimaryColor: #E0E0E0;
+$lighterPrimaryColor: #F0F0F0;

package/src/css/loader.scss

@@ -0,0 +1,12 @@
+@use "variables";
+@use "mixins";
+
+.silex-loader {
+  @include mixins.silex-ui-full;
+  display: flex;
+  color: variables.$secondaryColor;
+  justify-content: center;
+  align-items: center;
+  background-color: variables.$primaryColor;
+  z-index: variables.$z-loader;
+}

package/src/css/page-panel.scss

@@ -0,0 +1,65 @@
+@use "variables" as *;
+
+.page-panel-container {
+  .pages__wrapper {
+    height: inherit;
+  }
+  .pages {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .pages__main {
+      flex: 1; // take the available space in height
+      border: 1px solid $darkerPrimaryColor;
+      background-color: $primaryColor;
+    }
+    .pages__page {
+      display: flex;
+      align-items: center;
+      background-color: $darkerPrimaryColor;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+      cursor: pointer;
+      &:hover {
+        background-color: $primaryColor;
+        .pages__page-name {
+          color: $quaternaryColor;
+        }
+      }
+    }
+    .pages__page-selected {
+      background-color: $lighterPrimaryColor;
+      cursor: default;
+      .pages__page-name {
+        color: $quaternaryColor;
+      }
+    }
+    .pages__main.pages__single-page .pages__remove-btn {
+      visibility: hidden;
+    }
+    .pages__page-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 13px;
+      font-size: initial;
+      text-transform: capitalize;
+      padding: 10px 6px;
+      flex: 1;
+      text-align: left;
+    }
+    .pages__icon {
+      padding: 10px 6px;
+      cursor: pointer;
+    }
+    .pages__icon:hover {
+      color: $quaternaryColor;
+    }
+  }
+  .#{$pn-prefix}buttons {
+    flex-direction: column;
+    .#{$pn-prefix}btn {
+    }
+    .#{$pn-prefix}btn:first-child {
+    }
+  }
+}

package/src/css/project-bar.scss

@@ -0,0 +1,102 @@
+@use "variables" as *;
+
+// squeeze the stage iframe when panel is open
+iframe.enable-squeeze.gjs-frame {
+  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
+}
+iframe.enable-squeeze.silex-squeeze-left {
+  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
+  left: var(--project-panel-width);
+  width: calc(100% - var(--project-panel-width));
+}
+// button bar
+.#{$pn-prefix}project-bar-panel {
+  width: $projectBarWidth;
+  padding: 0;
+  .#{$pn-prefix}buttons {
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: flex-start;
+    .project-bar-spacer {
+      flex: 1;
+    }
+    .#{$pn-prefix}btn {
+      margin: 5px 0 5px 0px;
+      padding: 5px;
+      &.#{$pn-prefix}active {
+        background-color: $lighterPrimaryColor;
+        width: $projectBarWidth;
+        box-shadow: none;
+     }
+    }
+  }
+  .logo {
+    background-image: url('../assets/logo-silex-small.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-color: transparent;
+  }
+}
+
+// panels
+.#{$pn-prefix}project-bar-container {
+  top: $topBarHeight;
+  width: $projectPanelWidth;
+  min-width: $projectPanelMinWidth;
+  height: calc(100% - $topBarHeight - $footerHeight);
+  background-color: $lighterPrimaryColor;
+  &:not(.gjs-hidden) {
+    display: flex; // let the child take the whole height
+    flex-direction: column;
+  }
+  .project-bar__panel:not(.gjs-hidden) {
+    flex: 1;
+    display: flex; // let the child take the whole height
+    flex-direction: column;
+    background-color: $primaryColor;
+    overflow: auto;
+    .gjs-layer {
+      background-color: $primaryColor;
+    }
+  }
+  .project-bar__panel > *:not(header) {
+    flex: 1;
+    display: initial;
+   }
+   .project-bar__panel-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 5px;
+      border-bottom: 1px solid $lighterPrimaryColor;
+      .project-bar__panel-header-title {
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 3px 0;
+        margin: 0;
+        font-size: large;
+        font-weight: 600;
+      }
+      .project-bar__panel-header-button {
+        cursor: pointer;
+        font-size: large;
+        font-weight: 400;
+        span {
+          position: relative;
+          left: -2px;
+          top: -11px;
+          font-weight: bolder;
+          background-color: #444;
+          border-radius: 100%;
+          display: inline-block;
+          line-height: 13px;
+        }
+      }
+      .project-bar__panel-header-button:hover {
+        color: $quaternaryColor;
+      }
+    }
+  }
+