ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_mailbox.scss

@@ -0,0 +1,99 @@
+article.mail,
+article.write-mail {
+  padding: 15px 30px;
+
+  //answers
+  p.medium-text {
+    span,
+    em {
+      color: $grey;
+    }
+  }
+}
+
+//read
+article.mail {
+  .avatar {
+    width: auto;
+    height: auto;
+    img {
+      width: 75px;
+      min-width: 75px;
+      height: 75px;
+      border: 1px solid $light-grey;
+      border-radius: 50%;
+    }
+  }
+}
+
+// list mails header
+.mailbox-tools {
+  .check-col {
+    width: 72px;
+    .wrapping-checkbox {
+      top: 5px;
+      i18n:after {
+        top: -6px;
+      }
+    }
+  }
+  .status-filter {
+    width: 80px;
+    height: 40px; //(keep mailboxtools height)
+    .chip {
+      margin-left: 0px;
+      margin-right: 0px;
+      margin-bottom: 0px;
+      white-space: nowrap;
+    }
+  }
+  .search-pagination {
+    // voir si specific tools ou pas
+    a {
+      overflow: hidden;
+      width: 0;
+      transition: all 250ms ease;
+
+      &.show-close {
+        width: 40px;
+      }
+    }
+  }
+}
+
+.new-signature + p {
+  border-bottom: 1px solid $neutral-grey;
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    article.mail,
+    article.write-mail {
+      padding: 15px 20px;
+    }
+    article.write-mail {
+      background: transparent;
+      box-shadow: none;
+    }
+    article.mail {
+      em.small-text {
+        font-size: 12px !important;
+      }
+      .avatar {
+        img {
+          width: 50px;
+          min-width: 50px;
+          height: 50px;
+        }
+        & + div {
+          strong,
+          a,
+          span {
+            font-size: 14px !important;
+            line-height: 22px !important;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/modules/_media-library.scss

@@ -0,0 +1,464 @@
+.media-library {
+  slider.drawing-zone {
+    width: 85%;
+    * {
+      overflow: auto;
+    }
+  }
+  .tipbox {
+    float: right;
+    margin-top: 20px;
+    i {
+      width: 23px;
+    }
+  }
+  .split-screen {
+    .compression {
+      animation: splitScreenGrow 1 400ms;
+      width: 70%;
+      position: absolute;
+      right: 0;
+      overflow: auto;
+      box-sizing: border-box;
+      border: 1px solid #ddd;
+      margin-bottom: 25px;
+      height: 455px;
+      .compression-view {
+        padding: 15px;
+        width: 470px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        > button {
+          margin-bottom: 15px;
+          z-index: 1;
+        }
+      }
+      .to-list {
+        line-height: 37px;
+        i.back {
+          float: left;
+          margin-right: 8px;
+          margin-top: 0px;
+          opacity: 1;
+          font-size: 32px;
+        }
+      }
+
+      .document-title {
+        display: none;
+      }
+      .nav-arrow {
+        display: block;
+        position: absolute;
+        z-index: 5;
+        color: #fff;
+        border-radius: 40px;
+        height: 45px;
+        width: 45px;
+        text-align: center;
+        line-height: 45px;
+        font-size: 30px;
+        top: 175px;
+        opacity: 0.5;
+        transition: opacity 250ms ease;
+        margin: 10px;
+        background: $primary;
+        left: 0;
+        &:hover {
+          opacity: 1;
+        }
+        &.forward {
+          right: 0;
+          left: auto;
+        }
+      }
+    }
+  }
+  .import-files {
+    > article {
+      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+      border-radius: 5px;
+      overflow: hidden;
+      opacity: 0;
+      width: 80%;
+      position: absolute;
+      top: 39%;
+      height: 70px;
+      transition: 500ms ease;
+      box-sizing: border-box;
+      border: none;
+      .select-file {
+        margin: 0;
+      }
+      .help {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+    i.cloud-upload {
+      text-align: center;
+      &::before {
+        font-size: 40px;
+      }
+    }
+    article.default {
+      opacity: 1;
+    }
+    &.dragover {
+      article.drop {
+        opacity: 1;
+      }
+      article.default {
+        opacity: 0;
+      }
+    }
+    padding: 100px 75px 100px;
+    border: 2px dashed #ddd;
+    background: #fafafa;
+  }
+  .browse {
+    .explorer {
+      img {
+        pointer-events: none;
+      }
+      .highlight {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        transition: opacity 700ms ease;
+        &.show {
+          opacity: 1;
+        }
+      }
+    }
+    .icons-view {
+      margin: 0;
+    }
+    nav.vertical {
+      position: relative !important;
+      left: 0 !important;
+      top: 0 !important;
+      li {
+        border: none !important;
+      }
+    }
+  }
+  image-compression {
+    display: block;
+    position: relative;
+    float: left;
+    hr.row {
+      min-height: 0;
+    }
+  }
+
+  &-toolbar {
+    position: sticky;
+    bottom: 0;
+  }
+}
+
+.media-library {
+  nav.vertical ul li a {
+    text-indent: 0;
+  }
+  .browse {
+    .explorer {
+      .highlight {
+        background: $accent;
+      }
+    }
+  }
+  section.media-library {
+    h2 {
+      font-size: 20px;
+      font-weight: normal;
+    }
+    header + section.medium-text {
+      text-align: left;
+    }
+    slider {
+      padding: 0;
+    }
+    .select-file {
+      h2 {
+        margin-bottom: 10px;
+      }
+      button.file-button {
+        float: left !important;
+      }
+      input[type="text"] {
+        margin: 0;
+      }
+    }
+    .compression {
+      .nav-arrow {
+        background: $primary;
+      }
+    }
+  }
+  .import-files {
+    .cloud-upload {
+      color: $primary;
+    }
+  }
+  .import-files.dragover {
+    border-color: $accent;
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    .media-library {
+      .browse {
+        .browse-list {
+          padding-bottom: 480px;
+        }
+      }
+      .import-files {
+        > article {
+          .select-file {
+            width: 100%;
+            button {
+              margin: auto;
+              float: none;
+              display: block;
+            }
+          }
+        }
+        .drop {
+          display: none;
+        }
+        .default {
+          background: transparent;
+          box-shadow: none;
+          width: 100%;
+          box-sizing: border-box;
+          position: relative;
+          padding: 0;
+          i,
+          div:last-child {
+            display: none;
+          }
+        }
+      }
+
+      canvas {
+        max-width: 100%;
+      }
+
+      image-compression {
+        max-width: 100%;
+        width: 390px;
+        margin: auto;
+        display: block;
+        float: none;
+      }
+
+      .compression {
+        slider {
+          max-width: 350px;
+        }
+      }
+
+      .split-screen {
+        &.split {
+          .compression {
+            width: 100%;
+            max-height: 400px;
+            padding: 0;
+            border: none;
+            .compression-view {
+              padding: 0;
+              width: 100%;
+              .to-list {
+                display: none;
+              }
+            }
+            .document-title {
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              i.back {
+                margin-right: 10px;
+                font-size: 30px;
+              }
+            }
+          }
+          .loading-list.drop-zone {
+            max-height: 360px;
+          }
+        }
+      }
+
+      .media-library > h2 {
+        display: none;
+      }
+      .search {
+        hr {
+          display: none;
+        }
+        h2 {
+          display: none;
+        }
+      }
+
+      .icons-view .element {
+        padding: 0;
+        margin: 5px;
+
+        .container {
+          width: 105px;
+          height: 105px;
+          margin: 0;
+          padding: 0 !important;
+          i {
+            width: 103px !important;
+            height: 103px !important;
+            background-size: 89px;
+          }
+        }
+        legend {
+          box-sizing: border-box;
+          left: 0;
+          bottom: 0;
+          position: absolute !important;
+          a.medium-text {
+            font-size: 12px !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $small-mobile) {
+  body {
+    .media-library {
+      .browse {
+        .browse-list {
+          padding-bottom: 480px;
+        }
+      }
+      .import-files {
+        > article {
+          .select-file {
+            width: 100%;
+            button {
+              margin: auto;
+              float: none;
+              display: block;
+            }
+          }
+        }
+        .drop {
+          display: none;
+        }
+        .default {
+          background: transparent;
+          box-shadow: none;
+          width: 100%;
+          box-sizing: border-box;
+          position: relative;
+          padding: 0;
+          i,
+          div:last-child {
+            display: none;
+          }
+        }
+      }
+
+      canvas {
+        max-width: 100%;
+      }
+
+      image-compression {
+        max-width: 100%;
+        width: 390px;
+        margin: auto;
+        display: block;
+        float: none;
+      }
+
+      .compression {
+        slider {
+          max-width: 300px;
+        }
+      }
+
+      .split-screen {
+        &.split {
+          .compression {
+            width: 100%;
+            max-height: 370px;
+            padding: 0;
+            border: none;
+            .compression-view {
+              padding: 0;
+              width: 100%;
+              .to-list {
+                display: none;
+              }
+            }
+            .document-title {
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              i.back {
+                margin-right: 10px;
+                font-size: 30px;
+              }
+            }
+          }
+        }
+        .loading-list.drop-zone {
+          max-height: 360px;
+        }
+      }
+
+      .media-library > h2 {
+        display: none;
+      }
+      .search {
+        hr {
+          display: none;
+        }
+        h2 {
+          display: none;
+        }
+      }
+
+      .icons-view .element {
+        padding: 0;
+        margin: 5px;
+
+        .container {
+          width: 105px;
+          height: 105px;
+          margin: 0;
+          i {
+            width: 105px !important;
+            height: 105px !important;
+          }
+        }
+        legend {
+          box-sizing: border-box;
+          left: 0;
+          bottom: 0;
+          position: absolute !important;
+          a.medium-text {
+            font-size: 12px !important;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/modules/_medias.scss

@@ -0,0 +1,147 @@
+.media .lightbox-view,
+.media .lightbox-window {
+  cursor: pointer;
+}
+
+.media {
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+  box-sizing: border-box;
+  editor.focus {
+    z-index: 221;
+  }
+  [contenteditable] {
+    background: transparent;
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    p {
+      margin-top: 9px;
+      margin-bottom: 9px;
+    }
+    cursor: inherit !important;
+  }
+
+  i.close {
+    position: absolute;
+    right: 7px;
+    top: 5px;
+    background-size: 60%;
+    z-index: 200;
+  }
+  .icons-view i.close {
+    right: 11px;
+  }
+  img {
+    width: 100%;
+    max-height: 100%;
+  }
+  lightbox img {
+    width: auto;
+  }
+  audio {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -150px;
+    margin-top: -15px;
+  }
+  .media-wrapper {
+    padding: 7px;
+    min-height: 100%;
+    position: relative;
+    box-sizing: border-box;
+    .media-container {
+      min-height: 40px;
+      position: relative;
+      float: left;
+      width: 100%;
+    }
+  }
+
+  .image-container {
+    max-height: 100%;
+    overflow: hidden !important;
+  }
+
+  .text-wrapper {
+    min-height: 100%;
+    p,
+    h1,
+    h2,
+    h3 {
+      padding: 7px;
+      margin: 0;
+    }
+  }
+
+  .media-container {
+    overflow: visible;
+  }
+}
+
+.media sniplet {
+  img {
+    width: auto;
+  }
+}
+
+.media.cell {
+  background: transparent;
+}
+
+.media-container.pink {
+  @include run-transition(background);
+}
+.media-container.purple {
+  @include run-transition(background);
+}
+.media-container.orange {
+  @include run-transition(background);
+}
+.media-container.white {
+  @include run-transition(background);
+}
+.media-container.green {
+  @include run-transition(background);
+}
+.media-container.blue {
+  @include run-transition(background);
+}
+.media-container.black {
+  @include run-transition(background);
+}
+
+.media.height-one,
+.media.height-two,
+.media.height-three,
+.media.height-four,
+.media.height-five,
+.media.height-six,
+.media.height-seven,
+.media.height-eight,
+.media.height-nine,
+.media.height-ten,
+.media.height-eleven,
+.media.height-twelve {
+  .media-wrapper {
+    @include absolute;
+    .media-container {
+      overflow-y: auto;
+      height: 100%;
+      iframe {
+        height: 100%;
+        width: 100%;
+        min-height: 0;
+        position: absolute;
+      }
+    }
+  }
+}