ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_datepicker.scss

@@ -0,0 +1,147 @@
+/*!
+ * Datepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+.datepicker {
+  top: 0;
+  left: 0;
+  padding: 4px;
+  margin-top: 1px;
+  border-radius: 4px;
+  &:before {
+    content: "";
+    display: inline-block;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid $medium-grey;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: -7px;
+    left: 6px;
+  }
+  &:after {
+    content: "";
+    display: inline-block;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid $white;
+    position: absolute;
+    top: -6px;
+    left: 7px;
+  }
+  > div {
+    display: none;
+  }
+  table {
+    width: 100%;
+    margin: 0;
+  }
+  td,
+  th {
+    text-align: center;
+    width: 20px;
+    height: 20px;
+  }
+  td {
+    &.day:hover {
+      background: $light-grey;
+      cursor: pointer;
+    }
+    &.day.disabled {
+      color: $light-grey;
+    }
+    &.old,
+    &.new {
+      color: $medium-grey;
+    }
+    &.active,
+    &.active:hover {
+      @include buttonBackground(
+        $btnPrimaryBackground,
+        adjust-hue($btnPrimaryBackground, 20)
+      );
+      color: $white;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    }
+    span {
+      display: block;
+      width: 47px;
+      height: 54px;
+      line-height: 54px;
+      float: left;
+      margin: 2px;
+      cursor: pointer;
+      border-radius: 4px;
+      &:hover {
+        background: $light-grey;
+      }
+      &.active {
+        @include buttonBackground(
+          $btnPrimaryBackground,
+          adjust-hue($btnPrimaryBackground, 20)
+        );
+        color: $white;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+      }
+      &.old {
+        color: $medium-grey;
+      }
+    }
+  }
+
+  th {
+    &.switch {
+      width: 145px;
+    }
+    &.next,
+    &.prev {
+      font-size: $font-size * 1.5;
+    }
+  }
+
+  thead tr:first-child th {
+    cursor: pointer;
+    &:hover {
+      background: $light-grey;
+    }
+  }
+  /*.dow {
+		border-top: 1px solid #ddd !important;
+	}*/
+}
+.input-append,
+.input-prepend {
+  &.date {
+    .add-on i {
+      display: block;
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.date-picker-icon {
+  a {
+    height: 39px;
+    width: 50px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.datepicker,
+.bootstrap-timepicker-widget {
+  z-index: 100001;
+}
+
+.datepicker.dropdown-menu {
+  z-index: 100001;
+}

package/scss/modules/_dominos.scss

@@ -0,0 +1,248 @@
+.dominos {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .item,
+  .folder {
+    display: inline-block;
+    width: 295px;
+    margin: 10px;
+    border: 1px solid $light-grey;
+    .domino {
+      position: relative;
+      .top {
+        i {
+          color: white;
+          &::before {
+            line-height: 120px;
+          }
+        }
+        img {
+          position: absolute;
+          width: 120px;
+          top: 0;
+          left: 0;
+          background: $white;
+          &.domino-group {
+            position: static;
+            width: 60%;
+            border-width: 3px;
+            margin-top: 20px;
+          }
+        }
+      }
+      .center {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 14px !important;
+        color: $white;
+        height: 35px !important;
+        .discipline {
+          font-size: 12px;
+        }
+      }
+      .bottom {
+        display: flex;
+        background: #fff;
+        strong {
+          font-size: 15px;
+          color: $dark-grey;
+        }
+        div.content {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+          margin: auto 0;
+          min-width: 0;
+          padding: 10px 10px 10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          .ressource-name,
+          .owner,
+          .date {
+            display: block;
+          }
+          /*strong*/
+          .ressource-name {
+            font-weight: bold;
+            color: $dark-grey;
+            @extend .cell-ellipsis;
+          }
+          /*span*/
+          .owner {
+            color: $primary;
+            @extend .cell-ellipsis;
+          }
+          /*span*/
+          .date {
+            color: $grey;
+            font-size: 90%;
+            font-style: italic;
+          }
+          .bottom-locked {
+            right: 0;
+            i {
+              font-size: 22px;
+            }
+            .send-mail::before {
+              color: $primary;
+            }
+            .send-mail:hover {
+              &::before {
+                color: $accent;
+              }
+            }
+          }
+          .icons {
+            position: absolute;
+            bottom: 5px;
+            right: 10px;
+            color: $medium-grey;
+            .inline {
+              padding: 0 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.fallen {
+    .item {
+      .domino {
+        .top,
+        .bottom {
+          clear: none;
+          padding-bottom: 0;
+        }
+        .top {
+          width: 120px;
+          height: 120px;
+          margin: 0;
+          float: left;
+        }
+        .bottom {
+          margin: 0 0 0 120px;
+          height: 120px;
+          width: auto;
+
+          .title-icon i {
+            font-size: 21px;
+            padding-right: 5px;
+            float: left;
+          }
+        }
+      }
+    }
+  }
+}
+
+.domino .top:hover .ribbon {
+  @include ribbon-up;
+}
+.ribbon {
+  @include ribbon();
+}
+
+.dominos.centered-text {
+  .item {
+    width: 150px !important;
+    min-width: inherit;
+    .domino {
+      .top {
+        position: relative;
+        height: 150px;
+      }
+      .center {
+        padding: 5px;
+        height: inherit;
+        line-height: 1;
+      }
+      .bottom {
+        text-align: left;
+        height: 70px;
+        padding: 0;
+        .content {
+          line-height: 1;
+        }
+      }
+    }
+    &.group {
+      .domino {
+        .top.domino-group {
+          img.domino-group {
+            margin-top: 15px;
+          }
+          .nb-users {
+            span {
+              color: $white;
+              position: absolute;
+              right: 30px;
+              bottom: 0px;
+              font-size: 12px;
+            }
+            i {
+              position: absolute;
+              right: 0;
+              bottom: 5px;
+              font-size: 30px;
+              &::before {
+                line-height: inherit;
+              }
+            }
+          }
+        }
+        .center {
+          height: 45px;
+        }
+        .bottom {
+          height: 100px;
+        }
+      }
+    }
+  }
+}
+
+.dominos alphabetical .item {
+  width: 200px;
+  .domino {
+    border-radius: 0;
+    padding: 0;
+    .top {
+      height: 200px;
+      img {
+        width: 200px;
+        height: 200px;
+        background-color: $primary;
+      }
+    }
+    .bottom {
+      margin: 0;
+      div.content {
+        padding: 0;
+      }
+    }
+  }
+  .domino:hover {
+    box-shadow: 0 2px 6px $shadow-darker;
+  }
+}
+
+@media screen and (min-width: $wide-screen) {
+  .dominos-infos {
+    margin-top: 82px;
+  }
+}
+
+@media screen and (max-width: $fat-mobile) {
+  .dominos {
+    flex-direction: column;
+    .item,
+    .folder {
+      display: block;
+      width: auto;
+    }
+  }
+}

package/scss/modules/_drawing-zone.scss

@@ -0,0 +1,73 @@
+.drawing-zone {
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 300px;
+  position: relative;
+
+  article {
+    border: none;
+    background: transparent;
+    overflow: hidden;
+  }
+
+  article.media {
+    border: 1px dashed #666;
+    min-width: 30px;
+    min-height: 30px;
+
+    i.close {
+      position: absolute;
+      right: 7px;
+      top: 5px;
+      z-index: 202;
+    }
+    audio {
+      width: 93%;
+      margin-right: 35px;
+      min-width: 250px;
+      position: relative;
+      top: 0%;
+      left: 0%;
+      margin-left: 0;
+      margin-top: 0;
+    }
+    img,
+    div {
+      border-radius: 5px;
+      max-width: none;
+      display: block;
+      .element {
+        display: inline-block;
+      }
+    }
+
+    > div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  article.media,
+  article {
+    .image-container {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      img,
+      video {
+        width: 100%;
+        height: auto;
+        max-height: none;
+      }
+    }
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      padding: 5px;
+    }
+  }
+}

package/scss/modules/_drop-down.scss

@@ -0,0 +1,110 @@
+.drop-down.hidden {
+  height: 0;
+  ul {
+    height: 0;
+  }
+}
+
+.drop-down.expanded {
+  overflow: visible;
+}
+
+.drop-down {
+  @include drop-down();
+  overflow: hidden;
+  height: auto;
+
+  li {
+    i.add-favorite {
+      margin: 0 10px 0 0;
+      &::before {
+        color: $primary;
+      }
+    }
+    &:hover {
+      color: $white;
+      background-color: $accent;
+      a {
+        color: $white;
+      }
+      i.add-favorite::before {
+        color: $white;
+      }
+    }
+  }
+}
+
+//twitter bootstrap adapter
+.dropdown-menu {
+  @include drop-down;
+  height: auto;
+  @include reduce-block(6px);
+}
+
+//// TIMELINE CHIPS
+
+.drop-down-block {
+  margin-bottom: 30px;
+
+  i.arrow {
+    &:before {
+      font-size: 14px;
+    }
+  }
+  .drop-down-label,
+  .drop-up-label {
+    margin-bottom: 25px;
+    overflow: hidden;
+    & > label {
+      margin-right: 5px;
+      cursor: pointer;
+    }
+  }
+  .drop-down-label {
+    i.arrow {
+      transform: rotate(90deg);
+      display: inline-block;
+      max-height: none;
+    }
+    label {
+      padding-left: 5px;
+    }
+    & + .drop-down-info {
+      font-size: 11px;
+      position: absolute;
+      top: 25px;
+      right: 5px;
+      font-style: italic;
+    }
+  }
+  .drop-up-label {
+    text-align: right;
+    margin: 25px auto 0;
+    display: none;
+  }
+  .drop-down-content {
+    margin: 15px 5px;
+  }
+}
+.slided {
+  .drop-down-label {
+    i.arrow {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.lightbox-opened div[data-drop-down] {
+  z-index: 100000;
+  max-height: 350px;
+  overflow-y: scroll;
+  background-color: white;
+}
+
+@media screen and (max-width: $small-mobile) {
+  body {
+    .drop-down-block .drop-up-label {
+      display: block;
+    }
+  }
+}

package/scss/modules/_editor-media.scss

@@ -0,0 +1,41 @@
+body article.editor-media {
+  overflow: visible !important;
+  editor[inline] {
+    padding-top: 0 !important;
+
+    > div {
+      height: 100%;
+      overflow: hidden;
+    }
+    > popover {
+      display: none;
+    }
+    editor-toolbar {
+      border-right-width: 1px !important;
+      .option.subscript {
+        display: none;
+      }
+      .option.superscript {
+        display: none;
+      }
+      .option.templates {
+        display: none;
+      }
+      .option.image {
+        display: none;
+      }
+      .option.sound {
+        display: none;
+      }
+      .option.embed {
+        display: none;
+      }
+    }
+    margin: 0 !important;
+    height: 100%;
+    [contenteditable] {
+      min-height: 0 !important;
+      border: none !important;
+    }
+  }
+}