ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_icons-view.scss

@@ -0,0 +1,153 @@
+.icons-view {
+  margin-top: 15px;
+  text-align: center;
+  @include row;
+  padding-left: 0;
+
+  .element {
+    display: inline-block;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    margin: 2px;
+    vertical-align: top;
+
+    i {
+      background-size: contain;
+      background-position: 0px 2px;
+    }
+  }
+
+  explorer {
+    display: inline-block;
+    box-sizing: border-box;
+    position: relative;
+    height: 192px;
+    overflow: hidden;
+    width: $icon-list-size + ($icon-list-padding * 2) + 2px + 12px;
+    margin: 2px;
+    list-style-type: none;
+  }
+
+  explorer,
+  .element {
+    .container {
+      height: $icon-list-size;
+      width: $icon-list-size;
+      display: block;
+      padding: $icon-list-padding;
+      border: 1px solid transparent;
+      margin-left: auto;
+      margin-right: auto;
+      float: none;
+      box-sizing: border-box;
+    }
+
+    .img.container.video {
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    .video.container {
+      .video {
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 100%;
+      }
+
+      .icon-video {
+        fill: #009fcd;
+      }
+    }
+
+    .img.container {
+      border: 1px solid #ccc;
+      position: relative;
+      height: 120px;
+
+      > div {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+
+    img,
+    i {
+      float: none !important;
+      margin-left: auto;
+      margin-right: auto;
+      cursor: pointer;
+      max-width: 100%;
+    }
+
+    legend {
+      float: left;
+      width: 100%;
+      height: 36px;
+      position: relative !important;
+      padding: 5px !important;
+      line-height: 20px !important;
+      background: none;
+
+      a {
+        display: block;
+        text-align: center;
+        margin: 0;
+        margin-top: 5px;
+        width: 100%;
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    a {
+      i.shared {
+        bottom: 2px;
+      }
+
+      i.inline {
+        display: inline-block;
+        position: relative;
+        height: 20px;
+        width: 20px;
+      }
+
+      i {
+        width: $icon-list-size;
+        height: $icon-list-size;
+        background-size: auto 100%;
+      }
+    }
+
+    input[type="checkbox"] {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    }
+
+    em {
+      display: none;
+    }
+  }
+}
+
+.icons-view:after {
+  clear: both;
+  content: " ";
+  display: block;
+  width: 100%;
+}
+
+.icons-view.absolute {
+  position: absolute;
+}
+
+.icons-view.apps {
+  text-align: left;
+}

package/scss/modules/_icons.scss

@@ -0,0 +1,149 @@
+i {
+  font-style: normal;
+}
+
+h1 {
+  i {
+    vertical-align: middle !important;
+    float: none !important;
+    display: inline-block !important;
+  }
+}
+
+p {
+  i {
+    display: inline-block !important;
+    height: 25px !important;
+    width: 25px !important;
+    float: none !important;
+  }
+}
+
+i.home {
+  @include icon(glyphicons_020_home, 20px);
+  background-size: contain;
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+  margin-top: -3px;
+  margin-right: 5px;
+}
+
+i.attachment {
+  @include icon(glyphicons_062_paperclip, 20px);
+  background-size: contain;
+}
+
+i.liquid {
+  max-width: 100% !important;
+  height: auto;
+  background-size: 100% auto;
+}
+
+i.drag-anchor {
+  @include icon(glyphicons_186_move, 15px);
+  background-size: contain;
+  float: none;
+  display: inline-block;
+}
+
+i.fullscreen {
+  @include icon(glyphicons_215_resize_full, 25px);
+}
+
+i.leave-fullscreen {
+  @include icon(glyphicons_214_resize_small, 25px);
+}
+
+i.previous {
+  @include icon(glyphicons_210_left_arrow, 25px);
+}
+
+i.next {
+  @include icon(glyphicons_211_right_arrow, 25px);
+}
+
+i.download {
+  @include icon(glyphicons_181_download_alt, 25px);
+}
+
+i.remove {
+  @include icon(glyphicons_207_remove_2, 20px);
+}
+
+i.shared {
+  @include icon(shared, 15px);
+  background-position: center;
+  background-size: contain;
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  right: -3px;
+}
+
+i.important::after {
+  content: "!";
+  font-size: 85px;
+  font-family: serif;
+  line-height: 100px;
+  width: 100px;
+  text-align: center;
+  display: block;
+  height: 100px;
+  position: relative;
+}
+
+.left-arrow.disabled,
+.right-arrow.disabled {
+  color: $medium-grey;
+}
+
+//FLAGS
+
+$flags: fr, en, pt, es, it, de;
+
+@for $i from 1 through length($flags) {
+  .flag-#{nth($flags, $i)} {
+    background-image: url("../../img/icons/flags/#{nth($flags, $i)}.svg");
+  }
+}
+
+i.users {
+  @include fonticon;
+  &::before {
+    content: "\e822";
+  }
+}
+i.file {
+  @include fonticon;
+  &::before {
+    content: "\e919";
+  }
+}
+i.lock {
+  @include fonticon;
+  &::before {
+    content: "\e860";
+  }
+}
+
+i.stop {
+  @include fonticon;
+  &::before {
+    content: "\e94e";
+  }
+}
+
+i.pause {
+  @include fonticon;
+  &::before {
+    content: "\e856";
+  }
+}
+
+i.play {
+  @include fonticon;
+  &::before {
+    content: "\e85d";
+  }
+}

package/scss/modules/_iframes.scss

@@ -0,0 +1,13 @@
+iframe {
+  border: none;
+  overflow: visible;
+}
+
+iframe.adapter {
+  width: 100%;
+  height: 100%;
+}
+
+iframe.cke_panel_frame {
+  min-height: 100%;
+}

package/scss/modules/_illustrated-article.scss

@@ -0,0 +1,39 @@
+.illustrated-article {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  > .illustration {
+    position: relative;
+    display: table-cell;
+    width: 100px;
+    .image {
+      overflow: hidden;
+      height: 100px;
+      width: 100px;
+      margin-right: 15px;
+      position: relative;
+      img {
+        @include absolute;
+      }
+    }
+    legend {
+      min-height: 55px;
+      width: 100px;
+      margin-right: 15px;
+      box-sizing: border-box;
+      padding: 6px 6px 6px 10px;
+      a {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+  .illustrated-text {
+    display: table-cell;
+    vertical-align: top;
+    position: relative;
+    .bottom-locked {
+      left: 0;
+    }
+  }
+}

package/scss/modules/_image-editor.scss

@@ -0,0 +1,275 @@
+image-editor {
+  h2 {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 15px;
+    i.back {
+      font-size: 30px;
+      float: left;
+      margin-right: 11px;
+      &:hover {
+        color: $accent;
+      }
+    }
+  }
+  .tabs {
+    animation: fade-in 1 1500ms;
+  }
+
+  strong {
+    text-align: center;
+  }
+  .zoom-info {
+    position: absolute;
+    bottom: 0;
+    font-size: 14px;
+    font-style: italic;
+  }
+  section.lightbox .tabs label {
+    margin-bottom: 0;
+  }
+  section.lightbox .tabs label + input[type="text"] {
+    margin-top: 0;
+  }
+  .output {
+    background-size: 20px 20px;
+    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
+      linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
+      linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
+    margin-bottom: 40px;
+    min-height: 200px;
+    display: flex;
+    flex-flow: wrap;
+    align-items: center;
+    justify-content: center;
+    canvas {
+      max-width: 100%;
+      max-height: 600px;
+      display: block;
+      transition: opacity 250ms ease;
+    }
+  }
+
+  .tools-background {
+    position: absolute;
+    right: 0;
+    border-radius: 3px;
+    background: #ddd;
+    width: 116px;
+  }
+
+  .tools {
+    position: absolute;
+    right: 0;
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 3px;
+    input[type="text"] {
+      background: #fff;
+      padding: 3px;
+      border: none;
+      height: 25px;
+    }
+    .row > div {
+      padding: 1px;
+    }
+    button {
+      width: 100%;
+      margin-left: 0;
+      margin-top: 8px;
+      padding-left: 6px;
+      padding-right: 6px;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+      &:disabled {
+        background: #888;
+        box-shadow: none;
+        color: #aaa;
+        cursor: default;
+      }
+      i.close::before {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .overlay {
+    position: absolute;
+    padding: 0 !important;
+    &.crop {
+      .handle {
+        box-shadow: 0px 0 0 1000px rgba(0, 0, 0, 0.3);
+      }
+    }
+    .corner {
+      background: #ddd;
+      height: 25px;
+      width: 25px;
+      transition: 250ms ease;
+      position: absolute;
+      z-index: 1;
+
+      &.nw {
+        border-bottom-right-radius: 16px;
+        top: -2px;
+        left: -2px;
+        cursor: nw-resize;
+      }
+      &.ne {
+        border-bottom-left-radius: 16px;
+        top: -2px;
+        right: -2px;
+        cursor: ne-resize;
+      }
+      &.sw {
+        border-top-right-radius: 16px;
+        bottom: -2px;
+        left: -2px;
+        cursor: sw-resize;
+      }
+      &.se {
+        border-top-left-radius: 16px;
+        bottom: -2px;
+        right: -2px;
+        cursor: se-resize;
+      }
+    }
+    .handle {
+      border: 2px dashed #ddd;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      opacity: 0;
+      transition: border-color 250ms ease, top 200ms ease, left 200ms ease,
+        width 200ms ease, height 200ms ease;
+      &.show {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+legend.user-image {
+  position: absolute;
+  pointer-events: none;
+  padding: 0;
+  .text {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    animation: slideIn 1 250ms;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    transform-origin: bottom;
+    transition: transform 250ms ease;
+    padding: 7px;
+    width: 100%;
+    box-sizing: border-box;
+    &.hidden {
+      transform: scaleY(0);
+    }
+  }
+}
+
+image-editor {
+  .image-loading {
+    display: block;
+    position: absolute;
+    top: calc(50% - 20px);
+    left: calc(50% - 20px);
+    font-size: 40px;
+    z-index: 5;
+    color: $primary;
+  }
+  .save-loading {
+    vertical-align: middle;
+    line-height: 40px;
+    font-size: 20px;
+    z-index: 5;
+    color: $primary;
+    margin-right: 15px;
+  }
+  .overlay {
+    .handle {
+      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;
+        .corner.nw {
+          background-color: $accent;
+        }
+      }
+      &.top-right {
+        border-right-color: $accent;
+        border-top-color: $accent;
+        .corner.ne {
+          background-color: $accent;
+        }
+      }
+      &.bottom-left {
+        border-bottom-color: $accent;
+        border-left-color: $accent;
+        .corner.sw {
+          background-color: $accent;
+        }
+      }
+      &.bottom-right {
+        border-bottom-color: $accent;
+        border-right-color: $accent;
+        .corner.se {
+          background-color: $accent;
+        }
+      }
+    }
+    .corner {
+      background: $primary;
+      &:hover {
+        background: $accent;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body image-editor {
+    .image-properties {
+      margin-top: -50px;
+    }
+    .image-actions-zone {
+      margin-top: 80px;
+    }
+    .tools-background {
+      display: none !important;
+    }
+    .output {
+      width: 100% !important;
+    }
+    .tools {
+      width: 100%;
+      float: left;
+      top: -90px;
+      background: #ddd;
+      button {
+        width: auto;
+        padding-left: 15px;
+        padding-right: 15px;
+        margin-right: 10px;
+        float: right;
+      }
+    }
+  }
+}

package/scss/modules/_images.scss

@@ -0,0 +1,85 @@
+img.text-sized {
+  height: 20px;
+  vertical-align: top;
+  display: inline-block;
+}
+
+.clip {
+  overflow: hidden;
+}
+
+.cell {
+  img {
+    max-width: 100%;
+  }
+}
+
+image-select.loading-panel {
+  img {
+    visibility: hidden;
+  }
+}
+
+image-select > div > img {
+  width: 100%;
+}
+
+image-select {
+  > div > i {
+    position: absolute;
+    color: #fff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+    transition: color 250ms ease;
+    background-color: rgba($black, 0.3);
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    text-align: center;
+  }
+  i.trash {
+    right: 10px;
+    top: 10px;
+    line-height: 24px;
+    &::before {
+      font-size: 12px;
+    }
+  }
+  i.edit {
+    right: 40px;
+    top: 10px;
+    border: none;
+    padding: 0;
+    &::before {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+}
+
+.illustration {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+  left: 0;
+  img {
+    align-self: center;
+  }
+  input[type="checkbox"] {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+  }
+}
+
+.smileys {
+  img.smiley {
+    height: 40px;
+    width: 40px;
+    display: inline-block !important;
+    vertical-align: middle;
+  }
+}