ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_toasts.scss

@@ -0,0 +1,103 @@
+.toasts {
+  position: fixed;
+  top: 74px;
+  right: 25px;
+  width: 350px;
+  z-index: 1000;
+  box-sizing: border-box;
+
+  .toast-content {
+    //@include material-card();
+    margin-bottom: 10px;
+    position: relative;
+    opacity: 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+    font-size: 16px !important;
+    border-left: none !important;
+    height: 0 !important;
+    overflow: hidden;
+    transition: all 0.25s ease;
+
+    .content {
+      padding: 15px 10px;
+      line-height: 28px;
+
+      &:before {
+        @include fonticon();
+        margin-right: 10px;
+      }
+    }
+
+    &.show {
+      margin-top: 10px !important;
+      opacity: 1;
+      height: auto !important;
+      overflow: auto !important;
+    }
+
+    &.confirm {
+      color: darken($green, 35%);
+      background-color: lighten($green, 30%);
+
+      .content:before {
+        content: "\e871";
+      }
+
+      .timer {
+        background-color: darken($green, 15%);
+      }
+    }
+
+    &.info {
+      color: darken($cyan, 35%);
+      background-color: lighten($cyan, 30%);
+
+      .content:before {
+        content: "\e84b";
+      }
+
+      .timer {
+        background-color: darken($cyan, 15%);
+      }
+    }
+
+    &.warning {
+      color: darken($warning-color, 35%);
+      background-color: lighten($warning-color, 30%);
+
+      .content:before {
+        content: "\e903";
+      }
+
+      .timer {
+        background-color: darken($warning-color, 15%);
+      }
+    }
+
+    &.info,
+    &.warning {
+      .content:before {
+        font-size: 20px !important;
+      }
+    }
+
+    .timer {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 4px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      transition-timing-function: linear;
+      transition-property: all;
+      transition-duration: 3s;
+
+      &.animation {
+        width: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

package/scss/modules/_toggle-panel.scss

@@ -0,0 +1,64 @@
+.toggle-panel {
+  background: $medium-grey;
+  h1,
+  h2 {
+    margin-left: 5px;
+  }
+  .toggle {
+    width: 300px;
+    padding: 20px;
+    .row {
+      min-height: 0;
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      li {
+        list-style-type: none;
+        margin-left: 5px;
+      }
+    }
+  }
+  width: 300px;
+  position: absolute;
+  top: 2px;
+  right: -15px;
+  overflow: hidden;
+  @include run-transition(width);
+  z-index: 5;
+}
+
+.toggle-panel.hide {
+  overflow: hidden;
+  width: 0;
+  @include run-transition(width);
+}
+
+ul.icons-tabs {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: -53px;
+  width: 45px;
+  height: 45px;
+  display: table;
+
+  li {
+    background: $medium-grey;
+    border: 2px solid $white;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    width: 100%;
+    display: table-cell;
+    vertical-align: middle;
+    cursor: pointer;
+
+    i {
+      margin-left: auto;
+      margin-right: auto;
+      float: none;
+    }
+  }
+}

package/scss/modules/_tooltip.scss

@@ -0,0 +1,32 @@
+.tooltip {
+  position: absolute;
+  z-index: 999990;
+  display: none;
+  pointer-events: none;
+  .content {
+    padding: 5px 10px;
+    background: #ccc;
+    color: #000;
+    border-radius: 3px;
+    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
+    font-size: 12px;
+    position: relative;
+  }
+  .arrow {
+    width: 0;
+    margin-left: auto;
+    margin-right: auto;
+    border: 8px solid transparent;
+    border-top: 0;
+    color: #ccc;
+    border-bottom: 10px solid;
+  }
+}
+
+@media screen and (max-width: $fat-mobile) {
+  body {
+    .tooltip {
+      display: none !important;
+    }
+  }
+}

package/scss/modules/_vertical-cards.scss

@@ -0,0 +1,20 @@
+.vertical-card {
+  figure {
+    margin: 5px 15px 0;
+    position: relative;
+  }
+  figcaption {
+    margin: 15px 10px 0;
+    padding: 15px 5px 10px 0;
+    border-top: 1px solid $medium-grey;
+  }
+  i,
+  img {
+    margin: auto;
+    font-size: 35px;
+    color: $white;
+  }
+  img {
+    display: block;
+  }
+}

package/scss/modules/_viewers.scss

@@ -0,0 +1,184 @@
+.embedded-viewer {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  input {
+    margin: 0 !important;
+  }
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  video {
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  i {
+    margin-left: 3px;
+    margin-right: 3px;
+    &.close::before {
+      font-size: 28px;
+      float: right;
+      padding-right: 10px;
+    }
+  }
+  .default-viewer {
+    padding: 30px;
+    button {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  .controls {
+    height: 60px;
+    &__navbar {
+      position: sticky;
+      top: 0;
+      z-index: 999;
+      background-color: white;
+      padding: 15px;
+      border-bottom: 1px solid $shadow-light;
+      box-shadow: 1px 1px 10px $shadow-light;
+      button {
+        margin-bottom: 0;
+      }
+      @media screen and (max-width: $tablette) {
+        flex-direction: column;
+        align-items: flex-start;
+        div:nth-of-type(2) {
+          align-self: flex-end;
+        }
+      }
+    }
+  }
+  .file {
+    box-sizing: border-box;
+    padding: 15px;
+  }
+  .pagination__area {
+    position: fixed;
+    right: 55px;
+    background-color: white;
+    padding: 10px;
+    margin-top: -15px;
+    .file-controls {
+      padding: 5px 10px;
+      &:hover * {
+        color: $primary;
+      }
+    }
+    @media screen and (max-width: $tablette) {
+      position: absolute;
+      right: -15px;
+    }
+  }
+}
+
+.embedded-viewer.fullscreen {
+  background-color: white;
+  z-index: 100101;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  line-height: 60px;
+  padding: 0;
+  .controls {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    line-height: 60px;
+    padding-right: 10px;
+    box-shadow: 1px 1px 10px $shadow-light;
+  }
+  .pagination__area {
+    position: fixed;
+    left: 30px;
+    top: 15px;
+    right: inherit;
+    height: 60px;
+    padding: 0;
+  }
+}
+
+.fullscreen-viewer {
+  position: absolute;
+  z-index: 100001;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  top: 60px;
+  left: 0;
+  min-height: calc(100vh - 60px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .render {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    max-width: 100%;
+    position: initial;
+  }
+}
+
+pdf-viewer {
+  display: block;
+  width: 100%;
+  position: relative;
+  canvas {
+    max-width: 100%;
+  }
+}
+
+.editor-view {
+  .viewer {
+    .media {
+      opacity: 0.3;
+      cursor: inherit;
+    }
+    .drawing-grid.editor {
+      .media {
+        opacity: 1;
+      }
+    }
+    .media.sub-grid {
+      opacity: 1;
+    }
+    video {
+      width: 100%;
+    }
+  }
+}
+
+.viewer {
+  box-sizing: content-box;
+  width: 100%;
+  margin-left: -80px;
+  padding-left: 80px;
+  .viewer {
+    margin-left: 0;
+  }
+  .media {
+    outline: none;
+    cursor: default;
+  }
+  .drawing-grid.editor {
+    .media {
+      border: 1px dotted black;
+    }
+  }
+  nav.vertical {
+    padding: 0;
+  }
+}
+
+.drawing-grid {
+  .viewer {
+    padding-left: 0;
+  }
+}

package/scss/modules/_wayf.scss

@@ -0,0 +1,153 @@
+$light-tone: #8eefff !default;
+$medium-tone: #0f9df1 !default;
+
+body.wayf {
+  font-family: sans-serif !important;
+
+  header {
+    overflow: hidden;
+    margin: 40px 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .logo {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    background-size: contain;
+    background-position: center !important;
+  }
+  h1 {
+    padding: 0 10px;
+    font-weight: bold;
+    font-size: 40px;
+    margin: 0;
+    padding-top: 5px;
+    line-height: 50px;
+    letter-spacing: 1px;
+    @include font-gradient($orange, $purple, left);
+  }
+
+  h2 {
+    text-align: center;
+    padding-bottom: 15px;
+    font-size: 2vh;
+  }
+
+  #credentials-content {
+    position: relative;
+    max-width: 900px;
+    margin: 0 auto 50px;
+    padding: 30px 30px 60px;
+    border-radius: 7px;
+    background: $white;
+    box-shadow: 6px 6px 1px rgba($black, 0.38);
+  }
+
+  .dominos {
+    display: block;
+    float: unset;
+  }
+
+  .dominos .item {
+    padding: 10px;
+    display: block;
+    max-width: unset;
+    min-width: unset;
+    float: unset;
+    width: unset;
+    box-shadow: unset;
+  }
+
+  .dominos .item a {
+    color: $white !important;
+    font-size: 1.8vh;
+    line-height: 80%;
+  }
+
+  .dominos .item .domino {
+    border-radius: 15px;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .student {
+    background: $orange;
+  }
+
+  .loginstudent {
+    background: $orange;
+  }
+
+  .otherstudent {
+    background: $orange;
+  }
+
+  .teacher {
+    background: $green;
+  }
+
+  .loginteacher {
+    background: $green;
+  }
+
+  .otherteacher {
+    background: $green;
+  }
+
+  .relative {
+    background: $cyan;
+  }
+
+  .loginrelative {
+    background: $cyan;
+  }
+
+  .otherrelative {
+    background: $cyan;
+  }
+
+  .perseducnat {
+    background: $purple;
+  }
+
+  .loginperseducnat {
+    background: $purple;
+  }
+
+  .otherperseducnat {
+    background: $purple;
+  }
+
+  .loginother {
+    background: $pink;
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body.wayf {
+    background: none;
+    h2 {
+      font-size: 15px;
+    }
+    a {
+      font-size: 20px;
+    }
+  }
+}
+
+@media screen and (max-width: $fat-mobile) {
+  body.wayf {
+    background: none;
+    h2 {
+      font-size: 12px;
+    }
+    a {
+      font-size: 11px;
+    }
+    .dominos .item {
+      padding: 5px;
+    }
+  }
+}

package/scss/modules/_whereami.scss

@@ -0,0 +1,23 @@
+.whereami {
+  display: none;
+}
+@media screen and (max-width: $tablette) {
+  body {
+    .whereami {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 15px;
+      font-weight: bold;
+      margin: 5px 5px 13px;
+      line-height: 16px;
+      span.badge {
+        margin-left: 5px;
+        background-color: $accent;
+      }
+      i {
+        display: none;
+      }
+    }
+  }
+}