halleyx-ui-framework 11.7.94 → 11.7.96

package/dist/src/assets/styles/texteditor.scss

@@ -0,0 +1,483 @@
+.container1222 {
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  padding: 30px 30px;
+  // font-family: Arial, Helvetica, sans-serif;
+  /* position: absolute; */
+  /* transform: translate(-50%, -50%); */
+  /* left: 50%;
+    top: 50%; */
+  border-radius: 8px;
+  border: 1px solid var(--hlx-border-color);
+  // i{
+  //   font-size: 32px;
+  // }
+  // box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2);
+  .options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // gap: 15px;
+    font-family: Opensans;
+
+    select {
+      height: 25px;
+      padding: 0px !important;
+    }
+    // background-color: aqua;
+    .option-button {
+      height: 35px;
+      width: 35px;
+      display: grid;
+      place-items: center;
+      // justify-content: center;
+      border-radius: 3px;
+      border: none;
+      background-color: #ffffff;
+      outline: none;
+      color: var(--hlx-text-color-primary);
+      i {
+        font-size: 24px;
+      }
+
+      .bold-icon {
+        font-weight: bold;
+        font-size: 16px;
+      }
+      .italic-icon {
+        font-style: italic;
+        font-size: 16px;
+      }
+      .underline-icon {
+        text-decoration: underline;
+        font-size: 16px;
+      }
+      .strikethrough-icon {
+        text-decoration: line-through;
+        font-size: 16px;
+        // align-items: center;
+      }
+      .superscript-icon,
+      .subscript-icon {
+        font-size: 16px;
+        sub {
+          font-size: 10px;
+        }
+        sup {
+          font-size: 10px;
+        }
+      }
+    }
+    .option-button:hover {
+      background-color: var(--hlx-color-primary);
+      color: var(--hlx-color-white);
+    }
+    select {
+      padding: 7px;
+      border: 1px solid #d4d4d4;
+      border-radius: 3px;
+    }
+    option {
+      height: 50px;
+    }
+    .input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      label {
+        font-size: 14px;
+      }
+    }
+    input[type='color'] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-color: transparent;
+      width: 40px;
+      height: 28px;
+      border: none;
+      cursor: pointer;
+    }
+    input[type='color']::-webkit-color-swatch {
+      border-radius: 3px;
+      box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
+    }
+    input[type='color']::-moz-color-swatch {
+      border-radius: 3px;
+      box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
+    }
+    .texteditoractive {
+      background-color: #54bd95;
+      color: #ffffff;
+    }
+    .active {
+      background-color: #d8e3ff;
+      color: #1d46ff;
+    }
+  }
+
+  #text-input,
+  #text-input1 {
+    font-family: Arial, Helvetica, sans-serif;
+
+    margin-top: 10px;
+    border: 1px solid #dddddd;
+    border-radius: 7px;
+    padding: 20px;
+    height: 50vh;
+    // font-family: none !important;
+    /* overflow: hidden scroll; */
+  }
+}
+
+.hello {
+  color: #000000;
+}
+
+.icon-link-alt-regular {
+  font-size: 18px;
+}
+// #createLink {
+  // border: none;
+  // background-color: white;
+  // &:hover{
+  //   background-color: var(--hlx-color-primary);
+  //   color: var(--hlx-color-white);
+  //   border-radius: 8px;
+  // }
+// }
+
+// .text-format{
+//   height:100px;
+//   width:200px;
+//   background-color: #1d46ff;
+//   display: flex;
+
+// }
+
+.specify {
+  display: flex;
+  width: 200px;
+  justify-content: space-around;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify1 {
+  display: flex;
+  width: 100px;
+  // background-color: #020929;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify2 {
+  display: flex;
+  width: 100px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify3 {
+  display: flex;
+  width: 100px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify4 {
+  display: flex;
+  width: 50px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify5 {
+  display: flex;
+  width: 250px;
+  justify-content: space-evenly;
+  // border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify7 {
+  display: flex;
+  width: 108px;
+  justify-content: space-evenly;
+  margin-bottom: 5px;
+  margin-left: 10px;
+  border-right: 1px solid var(--hlx-border-color);
+  border-left: 1px solid var(--hlx-border-color);
+}
+
+.specify8 {
+  display: flex;
+  width: 200px;
+  justify-content: space-around;
+  margin-bottom: 5px;
+  margin-right: 10px;
+}
+.specify9 {
+  display: flex;
+  width: 80px;
+  justify-content: space-around;
+  margin-bottom: 5px;
+}
+
+.strike {
+  text-decoration: line-through;
+}
+
+// select{
+//   border-color:#d4d4d4;
+// }
+
+.texteditoractive32 {
+  background-color: var(--hlx-color-primary) !important;
+  color: var(--hlx-color-white) !important;
+  border-radius: 8px;
+}
+.url-link {
+  width: 100%;
+}
+
+.link-input {
+  height: 40px;
+  width: 100%;
+  outline: none;
+  border: 1px solid var(--hlx-border-color);
+  border-radius: 5px;
+  font-family: 'OpenSans';
+}
+.link-save-button {
+  height: 40px;
+  background-color: var(--hlx-color-primary);
+  color: var(--hlx-color-white);
+  width: 30%;
+  border-radius: 5px;
+}
+
+.texteditor-head-title {
+  font-weight: bold;
+  font-size: 16px;
+  display: flex;
+  justify-content: flex-start;
+  font-family: 'QuickSand';
+}
+
+.adv-option-button {
+  height: 35px;
+  width: 35px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--hlx-color-primary);
+    color: var(--hlx-color-white);
+    border-radius: 6px;
+  }
+}
+
+
+#content{
+  // height:60px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  gap:5px;
+  flex-wrap: wrap;
+  align-items: center;
+  font-family: 'OpenSans' ;
+  justify-content: space-between;
+  // justify-content: center;
+  align-items: center;
+  .functionality{
+    height:35px;
+    width:35px;
+    margin-left: 6px;
+    margin-right:6px;
+    &:hover{
+      height:35px;
+      width:35px;
+      border-radius: 4px;
+      background: #DCF9EA;
+      cursor: pointer;
+    }
+  }
+}
+
+
+.texteditor-active{
+  height:35px;
+  width:35px;
+  border-radius: 4px;
+  background: #54bd95;
+  color:#fbfbfb;
+  &:hover{
+    height:35px !important;
+    width:35px !important;
+    border-radius: 4px !important;
+    background: #54bd95 !important;
+    color:#fbfbfb !important;
+  }
+}
+
+.font-name-functionality{
+  width:140px;
+  margin-left: 14px;
+  margin-right:10px;
+}
+.font-size-functionality{
+  width:70px;
+  margin-left: 10px;
+  padding-right:14px;
+  // border-right: 1px solid var(--hlx-border-color);
+}
+
+.highligtfunctionality{
+  width:50px;
+  margin-left: 14px;
+  padding-right:10px;
+  // border-right: 1px solid var(--hlx-border-color);
+}
+
+.colorfunctionality{
+  width:50px;
+  margin-left: 10px;
+  // padding-right:10px;
+  // border-right: 1px solid var(--hlx-border-color);
+}
+
+.link-input{
+  padding-left:8px;
+}
+#bold{
+  font-weight: bold;
+  font-size: 14px;
+}
+
+#italic{
+  font-style: italic;
+  font-size:14px;
+}
+
+#underline{
+  text-decoration: underline;
+  font-size:14px;
+}
+
+#superscript{
+  // text-decoration: underline;
+  font-size:14px;
+}
+
+#subscript{
+  // text-decoration: underline;
+  font-size:14px;
+}
+
+#strikethrough{
+  text-decoration: line-through;
+  font-size:14px;
+}
+
+#undo{
+  // text-decoration: underline;
+  font-size:14px;
+}
+
+#redo{
+  // text-decoration: underline;
+  font-size:14px;
+  // border-right: 1px solid var(--hlx-border-color);
+
+}
+
+.icon-menu-left-alt-regular,.icon-menu-regular,.icon-menu-right-alt-regular,.icon-list-regular,.icon-list-filled{
+   font-size:18px;
+}
+
+.undo-redo{
+  // padding-right: 10px;
+  border-right: 1px solid var(--hlx-border-color);
+}
+
+.textEditor{
+  // margin-top: 10px;
+  border-top: 1px solid #ddd;
+  background-color: var(--hlx-color-white);
+  // border-radius: 7px;
+  padding: 10px;
+  padding-left: 20px;
+  height: 100%;
+  max-height:auto;
+  // overflow-y: auto;
+  border-bottom-left-radius: 9px;
+  border-bottom-right-radius: 9px;
+
+
+}
+
+.text-editor-container{
+    width: 100%;
+    // height: 100%;
+    display: grid;
+    grid-template-rows: max-content auto;
+    // padding: 30px 30px;
+    background-color: var(--hlx-color-white);
+    border-radius: 8px;
+}
+
+
+.selectedtags{
+  border-radius: 4px;
+  background: #54bd95;
+  color:#fbfbfb;
+}
+
+
+.icon-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.icon1 { 
+  margin: 5px;
+  // white-space: nowrap;
+}
+
+.context-menu {
+  position: relative;
+  display:none;
+}
+
+.context-menu-button {
+  border: none;
+  cursor: pointer;
+}
+
+.display-context-menu{
+position: fixed;
+  width: 193px;
+  background-color: white;
+  top: 0px;
+  left: 0px;
+  min-height:40px;
+  max-height: 300px;
+  font-family:'OpenSans';
+  border:1px solid #d8d8d8;
+  font-size:14px;
+  overflow-y:scroll;
+}
+
+.context-menu-each-value{
+height:30px;
+display:flex;
+align-items:center;
+padding-left:10px;
+}
+
+.context-select-value{
+color: #54bd95;
+}