ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_infotips.scss

@@ -0,0 +1,54 @@
+infotip {
+  position: relative;
+  display: none;
+  i.close {
+    transition: color 250ms ease;
+    cursor: pointer;
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    &:hover {
+      color: $accent;
+    }
+  }
+}
+
+.alert,
+.warning,
+.info,
+.success {
+  padding: 15px 30px 15px 15px;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 10px;
+  max-width: 100%;
+  i.warning,
+  i.check-circle {
+    border: 0;
+    padding: 0;
+    font-size: 18px;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+}
+
+.alert {
+  color: $warning-color;
+  background: lighten($warning-color, 35%);
+}
+
+.warning {
+  color: $warning-color-hover;
+  background: lighten($warning-color-hover, 55%);
+  i.warning {
+    color: $warning-color;
+  }
+}
+
+.info {
+  color: $primary;
+  background: lighten($primary, 35%);
+  i.check-circle {
+    color: $primary;
+  }
+}

package/scss/modules/_lang-picker.scss

@@ -0,0 +1,38 @@
+.lang-picker .flags {
+  text-align: center;
+
+  .flag {
+    display: inline-block;
+  }
+  i {
+    display: inline-block;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    width: 30px;
+    height: 20px;
+    border: 2px solid transparent;
+    @include run-transition(border);
+  }
+  i:hover {
+    border: 2px solid $accent;
+  }
+  em {
+    display: block;
+  }
+}
+.lang-current {
+  i.globe {
+    width: auto;
+    height: auto;
+    color: $white;
+    font-size: 25px;
+    & + span {
+      padding-left: 10px;
+      text-transform: uppercase;
+      font-size: 13px;
+      color: $white;
+      vertical-align: top;
+    }
+  }
+}

package/scss/modules/_letter-picker.scss

@@ -0,0 +1,32 @@
+.letter-picker {
+  i.close-2x {
+    display: none;
+  }
+  .content {
+    background: transparent;
+  }
+  .lightbox-view,
+  .lightbox {
+    h2 {
+      color: #fff;
+      margin: 1px;
+      width: 86px;
+      height: 86px;
+      line-height: 86px;
+      text-align: center;
+      font-size: 24px;
+    }
+    h2.disabled {
+      color: #ddd;
+    }
+  }
+}
+
+h1.letter-picker {
+  clear: both;
+  height: 60px;
+  width: 60px;
+  line-height: 60px;
+  text-align: center;
+  margin: 40px auto -9px;
+}

package/scss/modules/_library-prompt.scss

@@ -0,0 +1,44 @@
+library-prompt {
+  z-index: 100001 !important;
+  position: relative;
+  .close-lightbox {
+    display: none;
+  }
+  .ignore {
+    position: absolute;
+    right: 0px;
+    font-size: 13px;
+  }
+  lightbox {
+    .content {
+      border: 10px solid $primary;
+      .apps {
+        display: flex;
+        padding-left: 5%;
+        .container {
+          padding-right: 50px;
+        }
+        .content1 {
+          font-size: 19px;
+        }
+        i {
+          font-size: 100px;
+        }
+        img {
+          margin-left: auto;
+          margin-right: auto;
+          display: table-cell;
+          padding-top: 20px;
+        }
+      }
+      p {
+        line-height: 25px;
+        padding-left: 10%;
+        text-align: center;
+      }
+      hr {
+        width: unset;
+      }
+    }
+  }
+}

package/scss/modules/_lightboxes.scss

@@ -0,0 +1,159 @@
+section.lightbox-window {
+  .row {
+    min-height: initial !important;
+  }
+  .lightbox-buttons {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    input[type="submit"],
+    input[type="button"] {
+      float: right;
+    }
+  }
+  .close-lightbox {
+    i {
+      @include icon(glyphicons_207_remove_2, 20px);
+    }
+  }
+}
+
+.lightbox-buttons {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}
+
+section.lightbox,
+section.tiny-lightbox {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  z-index: 10001;
+  top: 0;
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+  left: 0;
+  right: 0;
+  display: none;
+  text-align: left;
+  line-height: initial;
+  font-size: initial;
+  font-weight: normal;
+  cursor: default;
+  .background {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    top: 0;
+    &::after {
+      content: " ";
+      width: 100%;
+      height: 100%;
+      display: block;
+      background: rgba(0, 0, 0, 0.6);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  > div.content {
+    border-radius: 5px;
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
+    background: #fff;
+    position: relative;
+    margin-top: 20px;
+    padding: 15px;
+    float: none !important;
+    overflow: auto;
+    max-height: calc(100vh - 75px);
+    z-index: 1;
+    max-width: initial;
+  }
+  .content::after {
+    clear: both;
+    content: " ";
+    display: block;
+    width: 100%;
+  }
+  &::after {
+    clear: both;
+    content: " ";
+    display: block;
+    width: 100%;
+  }
+}
+
+section.tiny-lightbox div.content {
+  width: 500px;
+}
+
+.lightbox-view,
+.lightbox {
+  .tabs.linker {
+    section .icons-view {
+      border-left: 0;
+    }
+    select {
+      height: 25px;
+    }
+  }
+  .linker {
+    input[type="checkbox"] {
+      margin-left: 0;
+    }
+    input[type="text"],
+    select,
+    label {
+      margin: 5px;
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .found-resources {
+      position: relative;
+      height: 165px;
+      overflow-y: auto;
+      clear: both;
+      @include run-transition(height);
+      .icons-view {
+        overflow: auto;
+        @include absolute;
+      }
+    }
+    .illustrated-list {
+      position: absolute;
+      li {
+        img {
+          position: relative !important;
+          height: 100% !important;
+        }
+      }
+    }
+  }
+  .search-pagination {
+    input {
+      padding-right: 45px !important;
+      padding-left: 45px !important;
+      margin: 0 !important;
+      box-sizing: border-box;
+    }
+    .show-close {
+      position: absolute;
+    }
+  }
+  .embed-container {
+    .supported-information {
+      line-height: 1.4;
+      margin-bottom: 1rem;
+
+      .cell {
+        float: none;
+      }
+    }
+  }
+}

package/scss/modules/_lists.scss

@@ -0,0 +1,176 @@
+.list-view {
+  margin-top: 15px;
+
+  > table {
+    margin: 0;
+  }
+  width: 100%;
+  list-style-type: none;
+
+  tr.underline {
+    padding-bottom: 15px;
+    td {
+      vertical-align: bottom;
+    }
+  }
+  td {
+    h2 {
+      clear: both;
+      margin-top: 15px;
+      margin-bottom: 0;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+    a {
+      word-break: break-all;
+    }
+  }
+  td.user,
+  th.user {
+    max-width: 100px;
+    @include cell-ellipsis;
+  }
+  td.icon,
+  th.icon {
+    width: 25px;
+    height: 25px;
+  }
+  td.content,
+  th.content {
+    @include cell-ellipsis;
+  }
+  .date {
+    text-align: right;
+  }
+  .ic-share {
+    font-size: 12px;
+    background-color: $white;
+    position: absolute;
+    border-radius: 50%;
+    bottom: -2px;
+    left: -5px;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    text-align: center;
+    @include box-shadow3(1px, 1px, 3px);
+  }
+}
+
+ul.list-view {
+  padding-left: 0;
+  li {
+    width: 100%;
+    float: left;
+    border-bottom: 1px solid #ccc;
+    padding-left: 15px;
+    padding-right: 15px;
+    box-sizing: border-box;
+    background: #fff;
+    position: relative;
+    list-style-type: none;
+    > div > .cell.text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  li.date {
+    text-align: right;
+  }
+}
+
+.illustrated-list {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  li {
+    display: block;
+    height: 40px;
+    width: 100%;
+    line-height: 40px;
+    list-style-type: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  li.selected {
+    color: #fff;
+    a {
+      color: #fff;
+    }
+  }
+  img {
+    height: 40px;
+    width: 40px !important;
+    display: block;
+    float: left;
+    margin-right: 10px;
+    position: relative;
+  }
+}
+
+.illustrated-list::after {
+  content: " ";
+  width: 100%;
+  clear: both;
+}
+
+.illustrated-links {
+  ul {
+    padding: 0;
+  }
+}
+
+.selectable-list {
+  @include row;
+  padding: 0;
+  li {
+    list-style-type: none;
+    padding: 5px;
+    @include run-transition(background);
+    margin: 3px;
+  }
+
+  li.selected {
+    background: #ccc;
+    color: #000;
+  }
+}
+
+ul.toc {
+  padding: 0;
+  margin: 0;
+  li {
+    list-style-type: none;
+    padding: 3px;
+    a {
+      font-size: 16px;
+    }
+  }
+}
+
+ul.thought-out-actions {
+  padding: 0;
+  margin: 0;
+  > li {
+    @include grid-cell-width(12);
+    @include cell;
+    margin-bottom: 1px;
+    list-style-type: none;
+    padding: 8px;
+    h2 {
+      margin: 0;
+      font-size: 20px;
+    }
+    p {
+      margin: 0;
+      font-size: 12px;
+    }
+  }
+}

package/scss/modules/_loading-list.scss

@@ -0,0 +1,220 @@
+.split-screen,
+.file-picker {
+  .loading-list {
+    width: 100%;
+    overflow: auto;
+    float: left;
+  }
+}
+
+.split-screen {
+  .loading-list {
+    height: 455px;
+  }
+}
+
+.file-picker {
+  .loading-list {
+    max-height: 170px;
+  }
+}
+
+.split-screen {
+  &.split {
+    .loading-list {
+      width: 30%;
+      ul li {
+        .status-infos {
+          flex-direction: column-reverse;
+        }
+        .close {
+          opacity: 1;
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+.loading-list ul {
+  li.removable {
+    padding-right: 35px;
+  }
+}
+
+.loading-list {
+  transition: 150ms linear;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-bottom: 25px;
+
+  ul {
+    margin-top: 0;
+    padding: 0;
+
+    li {
+      list-style-type: none;
+      position: relative;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      padding: 15px;
+      padding-right: 35px;
+      color: $text-color;
+      border: 1px solid #ddd;
+      background: $white;
+      transition: all 250ms ease-out;
+      cursor: default;
+
+      &.image-file {
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+      }
+      &.selected {
+        background: $primary;
+        color: #fff;
+      }
+      &.no-margin {
+        margin-top: -1px !important;
+      }
+
+      .icon {
+        i {
+          background-position: top left;
+          min-width: 17px;
+          text-align: center;
+          transition: all 250ms ease;
+        }
+        i.edit {
+          position: absolute;
+          top: -10px;
+          left: -10px;
+          border: 1px solid $primary;
+          color: $primary;
+          width: 20px;
+          height: 20px;
+          background: $white;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0;
+          &::before {
+            font-size: 11px;
+          }
+        }
+      }
+
+      .title {
+        width: 100%;
+        min-width: 55px;
+        margin: 0 0 0 15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+      }
+
+      .status-infos {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        min-width: 60px;
+        white-space: nowrap;
+        margin-right: 5px;
+        .small-text {
+          font-size: 12px !important;
+          line-height: 17px;
+        }
+      }
+
+      &.loading {
+        color: #888;
+      }
+      i.loading,
+      i.loaded,
+      i.failed {
+        font-size: 22px;
+      }
+
+      .close {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        right: 0;
+        height: 100%;
+        top: 0;
+        padding: 8px;
+        border-radius: 0;
+        border-left: 1px solid #ddd;
+        background: none;
+        color: $red;
+        opacity: 0;
+        transition: 250ms ease;
+        &:hover {
+          opacity: 1 !important;
+          background: $red;
+        }
+      }
+      &:hover {
+        i.edit {
+          color: $accent;
+          border-color: $accent;
+          transform: scale(1.1);
+        }
+        .close {
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+
+  i.loaded {
+    color: $green;
+  }
+  i.loading {
+    color: $cyan;
+  }
+  ul li.image-file {
+    border-color: $primary;
+    &:hover {
+      border-color: $accent;
+      .icon {
+        i.edit {
+          color: $accent;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  .split-screen {
+    .loading-list {
+    }
+    &.split {
+      .loading-list {
+        // must disappear
+        // means only compression view on mobile
+        width: 0%;
+        opacity: 0;
+        pointer-events: none;
+        height: 540px;
+      }
+    }
+  }
+  .loading-list {
+    ul li {
+      .status-infos {
+        flex-direction: column-reverse;
+      }
+      &:hover .close,
+      .close {
+        opacity: 1;
+      }
+    }
+  }
+}

package/scss/modules/_loading.scss

@@ -0,0 +1,9 @@
+.loading-panel {
+  background: url(../../img/icons/loading-panel.gif) no-repeat center;
+  display: block;
+}
+
+.element.loading,
+tr.loading {
+  opacity: 0.6;
+}