ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_editor.scss

@@ -0,0 +1,994 @@
+/// <reference path="app.scss">
+
+@font-face {
+  font-family: "editor";
+  src: url("../../../entcore-css-lib/editor-resources/font3/font/entcore-editor.woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+[contenteditable]:focus {
+  cursor: text !important;
+}
+
+[contenteditable].drawing-zone {
+  height: auto;
+}
+
+[contenteditable],
+[bind-html] {
+  .column .image-block {
+    display: inline-block !important;
+  }
+  .image-container {
+    display: inline-block;
+    user-select: all;
+    padding: 15px;
+    overflow: hidden;
+    border: 2px dashed transparent;
+    transition: border-color 250ms ease;
+    vertical-align: middle;
+    background: transparent;
+
+    img {
+      width: 99.99%;
+      min-width: 20px;
+    }
+  }
+  .column {
+    .image-container {
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+  audio {
+    display: block;
+    max-width: 100%;
+  }
+  audio::before {
+    content: " ";
+  }
+  video {
+    max-width: 100%;
+  }
+  a img {
+    cursor: pointer !important;
+  }
+  img {
+    position: relative;
+    max-width: 100%;
+  }
+  img.smiley {
+    height: 1.5em;
+    width: 1.5em;
+    display: inline-block !important;
+    vertical-align: middle;
+  }
+  blockquote.quotation {
+    background: #f5f5f5;
+    padding: 15px;
+    border-left: 5px solid #444;
+    footer {
+      text-align: right;
+      font-style: italic;
+      color: #666;
+    }
+  }
+  table {
+    max-width: 100%;
+    td {
+      padding: 5px;
+      border: 1px solid #eee;
+    }
+  }
+  iframe {
+    max-width: 100%;
+  }
+}
+
+[contenteditable] mathjax,
+[bind-html] mathjax {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+
+[contenteditable] mathjax {
+  border: 1px solid #ccc;
+}
+[contenteditable] mathjax::after {
+  display: block;
+  content: " ";
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+
+.editor {
+  .viewer {
+    .media {
+      opacity: 1;
+    }
+  }
+  iframe {
+    pointer-events: none;
+  }
+}
+
+body editor {
+  @include run-transition(padding);
+  display: block;
+  position: relative;
+  float: left;
+  width: 100%;
+  margin: 10px auto 20px;
+  -webkit-user-select: auto;
+  line-height: normal;
+
+  .column {
+    .image-container {
+      max-width: 100%;
+    }
+  }
+
+  > div {
+    position: relative;
+  }
+
+  input[type="color"] {
+    background: transparent;
+    border: none;
+    display: inline-block !important;
+    width: 27px !important;
+    cursor: pointer;
+    box-sizing: content-box;
+    padding: 0;
+  }
+
+  .image-container {
+    user-select: none;
+    overflow: hidden;
+    img {
+      width: 100%;
+    }
+  }
+
+  .editor-toolbar-opener,
+  .close-focus {
+    display: none;
+  }
+  &.focus.edit,
+  &.focus.both,
+  &.focus.html {
+    editor-toolbar.inline {
+      select-list {
+        display: inline;
+        opacity: 1;
+        pointer-events: all !important;
+      }
+      popover,
+      > popover {
+        display: inline-block;
+        opacity: 1;
+        pointer-events: all !important;
+      }
+      .option,
+      .option > select-list .selected-value,
+      .option > i {
+        opacity: 1;
+        pointer-events: all !important;
+      }
+      .option.disabled {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+    }
+  }
+  &.focus.edit editor-toolbar.inline,
+  &.focus.both editor-toolbar.inline,
+  &.focus.html editor-toolbar.inline {
+    opacity: 1;
+  }
+  > popover {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 52px;
+    > [popover-opener] {
+      width: 52px;
+    }
+
+    ul {
+      padding: 0;
+      margin: 10px 0 10px 0;
+      li {
+        list-style-type: none;
+        line-height: 30px;
+        text-align: left;
+        padding-left: 15px;
+        cursor: pointer;
+        @include run-transition(background);
+      }
+      li:hover {
+        background: $light-grey;
+      }
+    }
+    popover-content {
+      width: 180px;
+      left: -159px;
+      margin-top: 60px;
+      background: #fff;
+    }
+    popover-content::before {
+      left: auto;
+      right: 0;
+    }
+  }
+  > div > [contenteditable] {
+    overflow: hidden;
+    float: left;
+    box-sizing: border-box;
+    @include run-transition(width);
+    height: 300px;
+    border: 1px solid #ddd !important;
+    top: 0;
+    z-index: 1;
+    a {
+      img {
+        border: 1px dashed;
+      }
+    }
+  }
+
+  &[inline] {
+    popover {
+      display: none;
+    }
+    &.focus {
+      popover {
+        display: inline-block;
+      }
+    }
+  }
+
+  > textarea {
+    float: left;
+    box-sizing: border-box;
+    @include run-transition(width);
+    margin: 0;
+    min-height: 300px;
+    line-height: 1.5em;
+    font-family: monospace;
+    tab-size: 4;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    padding: 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow: hidden;
+  }
+  > code.language-html {
+    position: absolute;
+    border-left-width: 0;
+    right: 0;
+    z-index: 1;
+    pointer-events: none;
+    background-color: transparent;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    border: 1px solid transparent;
+    border-top-width: 2px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 16px;
+    .tag {
+      padding-left: 0;
+    }
+  }
+  &.edit {
+    > div > [contenteditable] {
+      width: 100%;
+      min-height: 250px;
+    }
+    > textarea,
+    > code {
+      width: 0;
+      padding: 0;
+      border: 0;
+      height: 0 !important;
+      min-height: 0 !important;
+    }
+  }
+  &.html {
+    > div > [contenteditable] {
+      width: 0;
+      padding: 0;
+      border: 0;
+      min-height: 0 !important;
+      height: 0 !important;
+    }
+    > textarea {
+      width: 100%;
+      border: 1px solid #ddd;
+      overflow: hidden;
+      color: transparent;
+      caret-color: black;
+    }
+    > code {
+      width: 100%;
+    }
+  }
+  &.both {
+    > div > [contenteditable] {
+      width: 50%;
+    }
+    > textarea {
+      width: 50%;
+      border-left-width: 0;
+      border: 1px solid #ddd;
+      overflow: hidden;
+      color: transparent;
+      caret-color: black;
+    }
+    > code {
+      width: 50%;
+      border: 1px solid transparent;
+      border-top-width: 0px;
+    }
+  }
+  &::after {
+    content: " ";
+    display: block;
+    width: 100%;
+    clear: both;
+  }
+  contextual-menu {
+    position: absolute;
+    overflow: hidden;
+    width: 0;
+    z-index: 10;
+    background-color: $white;
+    @include run-transition(width);
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+
+    ul {
+      margin: 0;
+      padding: 0;
+      li {
+        padding: 7px;
+        list-style-type: none;
+      }
+      li:hover {
+        background: $light-grey;
+      }
+    }
+  }
+  contextual-menu.show {
+    width: 200px;
+  }
+  &.edit editor-toolbar,
+  &.both editor-toolbar,
+  &.html editor-toolbar {
+    color: $darkest-grey;
+    display: block;
+    float: left;
+    width: 100%;
+    background: $lightest-grey;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    border-bottom: 0;
+    border-right: 52px solid $light-grey;
+    z-index: 2;
+    position: relative;
+    &.inline {
+      position: absolute;
+      top: 0;
+      opacity: 0;
+      pointer-events: none !important;
+      @include run-transition(opacity);
+      select-list,
+      popover,
+      .option,
+      .option > select-list .selected-value,
+      .option > i {
+        display: inline-block;
+        opacity: 0;
+        pointer-events: none !important;
+      }
+    }
+
+    .sp-replacer {
+      display: none;
+    }
+    .sp-replacer:first-of-type {
+      display: inline-block;
+    }
+    .option {
+      display: inline-block;
+      padding: 6px 5px;
+
+      user-select: none;
+      position: relative;
+      @include run-transition(all);
+      height: 30px;
+      min-width: 20px;
+      vertical-align: middle;
+      border-bottom: 3px solid transparent;
+      > i,
+      popover i {
+        width: 100%;
+        display: inline-block;
+        @include run-transition(all);
+        background-size: 15px;
+        background-repeat: no-repeat;
+        background-position: center;
+        user-select: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+    .option.color {
+      input {
+        height: 11px;
+        padding-top: 22px;
+      }
+      > i {
+        left: 0;
+      }
+    }
+
+    .option.background-color {
+      input {
+        height: 32px;
+      }
+      > i {
+        left: 0;
+        pointer-events: none;
+      }
+    }
+
+    .option.disabled {
+      opacity: 0.3;
+      pointer-events: none !important;
+    }
+    .option.toggled {
+      background-color: #e4e4e4;
+      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);
+    }
+    .option.font {
+      width: 140px;
+      select-list .selected-value {
+        width: 115px;
+      }
+      &:hover {
+        background: none;
+        border-color: transparent;
+      }
+    }
+    .option.font-size {
+      &:hover {
+        background: none;
+        border-color: transparent;
+      }
+    }
+    .option.format {
+      &:hover {
+        background: none;
+        border-color: transparent;
+      }
+      h1,
+      h2,
+      h3,
+      p {
+        margin: 0;
+        box-sizing: border-box;
+        width: 100%;
+      }
+    }
+    .option.table {
+      popover {
+        z-index: 8000;
+      }
+      .draw-table {
+        .row {
+          min-height: 0;
+        }
+        .cell {
+          height: 10px;
+          width: 10px;
+          border: 1px solid $white;
+          background: #efefef;
+        }
+        .cell.match {
+          background: #ddd;
+        }
+      }
+      popover {
+        popover-content.hidden {
+          .draw-table {
+            display: none;
+          }
+        }
+        width: 100%;
+        height: 100%;
+        > i {
+          top: 7px;
+          left: 3px;
+        }
+        popover-content {
+          width: 120px;
+          left: -58px;
+          margin-top: 10px;
+          margin-left: 14px;
+        }
+      }
+    }
+    .option.smileys {
+      lightbox {
+        img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body editor {
+    margin-top: 0;
+
+    > div {
+      height: 100%;
+    }
+
+    > popover {
+      display: none !important;
+    }
+
+    editor-toolbar {
+      height: 0;
+      overflow: hidden;
+    }
+
+    &.edit editor-toolbar,
+    &.both editor-toolbar,
+    &.html editor-toolbar {
+      display: none;
+    }
+    contextual-menu {
+      left: 50% !important;
+      margin-left: -100px;
+      top: 150px !important;
+    }
+  }
+
+  body editor.focus {
+    min-height: 324px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100001 !important;
+
+    select-list {
+      .options {
+        right: 100%;
+        width: 200px;
+        left: auto;
+      }
+    }
+
+    &.edit editor-toolbar,
+    &.both editor-toolbar,
+    &.html editor-toolbar {
+      height: 100%;
+      overflow-y: auto;
+      position: fixed;
+      right: 0;
+      top: 0;
+      padding-top: 40px;
+      width: 0;
+      @include run-transition(width);
+      border-left: 1px solid #ddd;
+      border-right: none;
+      display: block;
+      &.opened .option > i {
+        width: 40px;
+      }
+
+      .option.table {
+        popover popover-content {
+          &::before {
+            display: none;
+          }
+          position: fixed;
+          top: 10%;
+          left: 50%;
+          margin-left: -61px;
+        }
+      }
+
+      .option.color > i {
+        left: 0;
+      }
+
+      .option.background-color > i {
+        left: 0;
+      }
+    }
+
+    input[type="color"] {
+      width: 30px !important;
+    }
+
+    &.edit editor-toolbar.opened,
+    &.both editor-toolbar.opened,
+    &.html editor-toolbar.opened {
+      width: 44px;
+      .option {
+        width: 44px;
+      }
+    }
+
+    .close-focus {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      margin: 0;
+      border-radius: 0;
+    }
+
+    .editor-toolbar-opener {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 3;
+      margin: 0;
+      border-radius: 0;
+      font-size: 22px;
+      height: 38px;
+      width: 44px;
+      user-select: none;
+      &::before {
+        content: "+";
+        display: block;
+        position: absolute;
+        left: 15px;
+        top: 9px;
+      }
+
+      &.active::before {
+        content: "-";
+        width: 15px;
+      }
+    }
+
+    > div > [contenteditable] {
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+      padding-top: 45px;
+      position: absolute;
+      overflow: auto;
+      background: #fff;
+    }
+  }
+
+  .option > select-list {
+    .selected-value {
+      border: none;
+      color: transparent;
+    }
+  }
+}
+
+body editor {
+  .quote.option {
+    > [contenteditable] {
+      height: 200px;
+      overflow: auto;
+      margin-top: 50px;
+      position: relative;
+      margin-bottom: 50px;
+    }
+    select-list {
+      .selected-value {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+[contenteditable] .download-attachments a {
+  pointer-events: none;
+}
+
+.download-attachments {
+  background: #eee;
+  color: #666;
+  padding: 15px;
+  h2 {
+    color: #666;
+  }
+  .download {
+    height: 18px;
+    width: 18px;
+    margin-right: 10px;
+    background-size: contain;
+    display: inline-block;
+  }
+  a {
+    display: block;
+    margin: 3px;
+  }
+  .attachments {
+    border: 1px #fff solid;
+    padding: 5px;
+  }
+}
+
+@mixin editor-icon() {
+  display: block;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+}
+
+body editor {
+  > popover {
+    > [popover-opener] {
+      &.tools {
+        background: none;
+        @include fonticon;
+        @include editor-icon;
+        height: auto;
+        font-size: 25px;
+
+        &::before {
+          content: "\e8c3";
+        }
+      }
+    }
+  }
+
+  &.edit editor-toolbar,
+  &.both editor-toolbar,
+  &.html editor-toolbar {
+    .option > i {
+      display: block;
+      position: absolute;
+      text-align: center;
+      line-height: 44px;
+    }
+    .option.remove-format > i {
+      height: 100%;
+      width: 100%;
+      background-image: url("../../../entcore-css-lib/editor-resources/img/remove-format.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      display: inline-block;
+      box-sizing: border-box;
+      vertical-align: middle;
+    }
+
+    .option.mathjax > i {
+      height: 100%;
+      width: 100%;
+      background-image: url("../../../entcore-css-lib/editor-resources/img/mathjax.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      display: inline-block;
+      box-sizing: border-box;
+      vertical-align: middle;
+    }
+
+    .option.templates > i {
+      height: 100%;
+      width: 100%;
+      background-image: url("../../../entcore-css-lib/editor-resources/img/templates.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      display: inline-block;
+      box-sizing: border-box;
+      vertical-align: middle;
+    }
+
+    .option.embed {
+      .lightbox > .content {
+        overflow: auto;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body editor {
+    box-sizing: border-box;
+    editor-toolbar {
+      select-list .selected-value {
+        width: 44px;
+        &::after {
+          height: 44px;
+          width: 30px;
+          top: 0;
+          left: 0;
+          border: none;
+        }
+      }
+
+      .option.table {
+        popover {
+          > i {
+            &::before {
+              left: 7px;
+              position: absolute;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.download-attachments {
+  .download {
+    @include fonticon;
+    font-size: 20px;
+    vertical-align: top;
+  }
+  .download::before {
+    content: "\e805";
+  }
+}
+
+@media screen and (min-width: $tablette) {
+  body editor.edit editor-toolbar .option:hover {
+    background-color: $light-grey;
+    cursor: pointer;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+.lightbox-opened .image-contextual-menu {
+  opacity: 0;
+}
+
+.lightbox-opened .image-contextual-menu {
+  display: none;
+}
+
+.image-contextual-menu {
+  position: absolute;
+  padding: 5px;
+  border-radius: 5px;
+  animation: slideIn 1 250ms;
+  transform-origin: top;
+  z-index: 100001;
+  background: #f9f9f9;
+  color: #222;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
+  button,
+  i {
+    user-select: none;
+    margin-bottom: 0;
+    background: transparent;
+    color: #222;
+    cursor: pointer;
+  }
+  button {
+    padding-left: 13px;
+    background: transparent;
+    box-shadow: none;
+    border-right: 1px solid rgba(255, 255, 255, 0.3);
+    &:hover {
+      background: #ccc;
+    }
+  }
+  i {
+    transition: 250ms ease;
+    line-height: 37px;
+    display: inline-block;
+    height: 38px;
+    box-sizing: border-box;
+    width: 35px;
+    text-align: center;
+    vertical-align: text-bottom;
+    border-radius: 3px;
+    &.large {
+      font-size: 30px;
+    }
+    &.medium {
+      font-size: 23px;
+    }
+    &.ed {
+      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  i.resize-image {
+    @include fonticon();
+    &::before {
+      content: "\e929";
+    }
+  }
+}
+
+.image-contextual-menu {
+  i:hover,
+  i.selected {
+    background: #ddd;
+  }
+  button:hover {
+    color: #222;
+  }
+}
+@media screen and (max-width: $tablette) {
+  body {
+    .image-contextual-menu {
+      pointer-events: none;
+      button,
+      i {
+        pointer-events: all;
+      }
+    }
+  }
+}
+
+body editor [contenteditable] {
+  .image-template .image-container {
+    border: none !important;
+  }
+  .image-container {
+    border: 2px dashed $primary;
+    &.top {
+      border-top-color: $accent;
+    }
+    &.left {
+      border-left-color: $accent;
+    }
+    &.right {
+      border-right-color: $accent;
+    }
+    &.bottom {
+      border-bottom-color: $accent;
+    }
+    &.top-left {
+      border-top-color: $accent;
+      border-left-color: $accent;
+    }
+    &.top-right {
+      border-right-color: $accent;
+      border-top-color: $accent;
+    }
+    &.bottom-left {
+      border-bottom-color: $accent;
+      border-left-color: $accent;
+    }
+    &.bottom-right {
+      border-bottom-color: $accent;
+      border-right-color: $accent;
+    }
+  }
+}