ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/cahier-de-textes/components/containers/list/_list-view.scss

@@ -0,0 +1,261 @@
+.list-view {
+
+  .pedagogic-day {
+    border: 1px solid $black;
+    border-radius: 10px;
+    background: $white;
+
+    &.selected {
+      background: gray;
+      fill: gray;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  ul li i.icon {
+    font-size: 50px;
+    line-height: 45px;
+    text-align: center;
+  }
+
+  i.rack2::before {
+    content: "\e80d";
+    font-family: "generic-icons";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-image: none;
+  }
+
+  i.session::before {
+    content: "\e86f";
+    font-family: "generic-icons";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-image: none;
+    color: $white;
+  }
+
+  i.cahier-textes2::before {
+    content: "\e86f";
+    font-family: "generic-icons";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-image: none;
+  }
+
+  .border-black {
+    border: 2px solid $black;
+  }
+
+  .list-view-item {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+
+    > i {
+      z-index: 999;
+      position: absolute;
+      right: 10px;
+    }
+
+    .content {
+      width: 100%;
+    }
+
+    .right-side {
+      border-left: 1px solid #eeeeee;
+      margin-left: 5px;
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+
+  .timeline-story {
+    .list-view-item {
+      display: block;
+    }
+
+    .isDone {
+      color: #46bfaf !important;
+    }
+
+    .title-lesson {
+      text-transform: lowercase;
+
+      &:first-letter {
+        text-transform: uppercase;
+      }
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+
+    .hasDescription {
+      cursor: pointer;
+    }
+
+    .date-field {
+      top: 0;
+      line-height: 20px;
+
+      .label {
+        text-align: right;
+        text-transform: uppercase;
+        font-size: 13px;
+        font-weight: 500;
+        color: #666;
+        padding-right: 5px;
+      }
+    }
+
+    .round {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      transition: all 200ms ease;
+      top: 0;
+      left: 50%;
+      margin-left: -13px;
+      margin-top: 0;
+      border: solid 3px #F9F9F9;
+      text-align: center;
+
+      &.green-text {
+        background: $diary-darkgreen;
+      }
+
+      &.yellow-text {
+        background: #ffd900;
+      }
+
+      &.red-text {
+        background: #ff2011;
+      }
+    }
+
+    .white-text {
+      color: $white;
+    }
+
+    &::before {
+      background-color: #bbb;
+      content: ' ';
+      position: absolute;
+      top: 12px;
+      width: 2px;
+      height: 100%;
+      left: 12.3%;
+    }
+
+    .date-label {
+      position: relative;
+      top: 0;
+    }
+
+    .event-row {
+      margin-top: 9px;
+    }
+
+    .event-row .date-field {
+      height: 54px;
+      width: 12.666%;
+    }
+
+    .event-row .event {
+      height: 54px;
+      width: 2% !important;
+      margin-right: 1%;
+      @include mobile {
+        width: 3% !important;
+        margin-right: 3%;
+        height: 1px;
+      }
+    }
+  }
+
+  @media screen and (min-width: 800px) {
+    .timeline-story::before {
+      left: 13.444% !important;
+    }
+  }
+  @media screen and (max-width: 800px) {
+    .timeline-story::before {
+      left: 1% !important;
+    }
+  }
+
+  @media screen and (max-width: $tablette) {
+    .timeline-story {
+      .date-label {
+        display: block;
+      }
+    }
+  }
+
+  .hoursInView {
+    color: #666666;
+    padding-left: 5px;
+    @include mobile {
+      padding-left: 0;
+    }
+  }
+
+  .see-right {
+    text-decoration: underline;
+    position: absolute;
+    right: 18px;
+  }
+
+  .i-icon-right {
+    position: absolute;
+    right: 10px;
+  }
+}
+
+.list-view-date-picker {
+  @include mobile {
+    padding: 8px;
+  }
+}
+
+.pedagogic-item-article {
+  @include mobile {
+    margin: 16px;
+    padding: 12px;
+  }
+
+  &-title {
+    @include mobile {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &-content {
+    &-body {
+      @include mobile {
+        display: flex;
+        flex-direction: column;
+      }
+
+      &-homeworkState {
+        @include mobile {
+          display: flex;
+        }
+      }
+    }
+  }
+}

package/scss/specifics/cahier-de-textes/components/containers/session/_index.scss

@@ -0,0 +1,2 @@
+@import 'session-view';
+@import 'session-form';

package/scss/specifics/cahier-de-textes/components/containers/session/_session-form.scss

@@ -0,0 +1,39 @@
+.session-form {
+
+  &-card {
+    margin-right: 10px;
+    padding: 6px;
+    font-size: 16px;
+    border-radius: 5px;
+  }
+
+  &-header {
+    display: flex;
+
+    &-search {
+      display: flex;
+      flex: 2;
+      margin-top: 8px;
+
+      .async-autocomplete {
+
+        width: 50%;
+
+        input {
+          margin-bottom: 0px;
+        }
+      }
+
+      .search-input-ul {
+        flex: auto;
+        margin-left: 10px;
+      }
+    }
+
+    &-select {
+      flex: 1;
+      margin-right: 50px;
+    }
+  }
+
+}

package/scss/specifics/cahier-de-textes/components/containers/session/_session-view.scss

@@ -0,0 +1,24 @@
+.session-view {
+  @include mobile {
+    padding: 8px;
+  }
+
+  &-description {
+    &-title {
+      color: $diary-darkgreen!important;
+      @include mobile {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+
+.session-read-only {
+  @include mobile {
+    margin: 8px;
+  }
+  &-title {
+    color: $diary-darkgreen
+  }
+}

package/scss/specifics/cahier-de-textes/components/fixCalendarHRFirefox.scss

@@ -0,0 +1,3 @@
+.schedule .days .day .timeslots .timeslot hr {
+  border-bottom: thin solid #fff !important;
+}

package/scss/specifics/cahier-de-textes/components/main/_header.scss

@@ -0,0 +1,49 @@
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &-result-search {
+    position: absolute;
+    top: 42px;
+    z-index: 1;
+  }
+}
+
+.structure-title {
+  position: absolute;
+  font-size: 18px;
+  font-weight: normal;
+  width: max-content;
+
+  // structure name aside title
+  &.side {
+    position: initial;
+    margin-left: 24px;
+  }
+
+  // main.html design
+  &.main {
+    top: 45px;
+    left: 70px;
+    line-height: 20px;
+    width: 280px;
+  }
+
+  // list-view.html design
+  &.manage-list {
+    bottom: -10px;
+    left: 70px;
+    font-size: 16px;
+  }
+
+  // admin-main.html design
+  &.admin-main {
+    top: 50px;
+    left: 70px;
+    line-height: 20px;
+    width: 250px;
+    text-align: initial;
+  }
+}
+

package/scss/specifics/cahier-de-textes/components/main/_index.scss

@@ -0,0 +1,2 @@
+@import './header';
+@import './sidebar';

package/scss/specifics/cahier-de-textes/components/main/_sidebar.scss

@@ -0,0 +1,21 @@
+.sidebar {
+  &-article {
+    @include mobile {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    .progression-container {
+      max-height: 32vh;
+    }
+
+    .audiences-container {
+      max-height: 12vh;
+      overflow: auto;
+
+      ul {
+        list-style-type: none;
+      }
+    }
+  }
+}

package/scss/specifics/cahier-de-textes/generics/_async-autocomplete.scss

@@ -0,0 +1,60 @@
+.async-autocomplete {
+  .input-async-autocomplete {
+    input[type="text"]:focus {
+      border-bottom: 2px solid $diary-darkgreen !important;
+    }
+
+    &.loading {
+      @include fonticon();
+
+      &::after {
+        content: '\e85a';
+        position: absolute;
+        right: 10px;
+        color: $diary-darkgreen;
+        animation: spinner 1.25s linear infinite;
+      }
+    }
+  }
+
+  .scroll.drop-down {
+    overflow-y: scroll;
+    display: block;
+
+    li:hover {
+      background-color: $diary-darkgreen;
+    }
+  }
+
+  .drop-down.empty {
+    display: block;
+  }
+
+  .drop-down {
+    top: 80%;
+    max-height: 200px;
+    width: 100%;
+    display: none;
+  }
+}
+
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@include keyframes(spinner) {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/specifics/cahier-de-textes/generics/_flex.scss

@@ -0,0 +1,132 @@
+.flex-row-cdt {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  flex-grow: 1;
+  text-align: center;
+  min-height: 42px;
+
+  .flex-col {
+    display: flex;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    justify-content: left;
+    align-items: center;
+  }
+
+  @for $i from 1 through 16 {
+    &.row__#{$i} {
+      .flex-col {
+        @for $j from 1 through 16 {
+          &.col__#{$j} {
+            width: percentage(calc($j / $i));
+          }
+        }
+      }
+    }
+  }
+}
+
+.flex-content, .flex-collapse {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.flex-collapse {
+  .flex-content {
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    transition: visibility 0.25s, opacity 0.25s ease-out, max-height 0.2s;
+  }
+
+  &.open-details {
+    .flex-content {
+      opacity: 1;
+      visibility: visible;
+      max-height: 100%;
+      transition: visibility 0.25s, opacity 0.25s ease-in;
+    }
+  }
+}
+
+.flex-table {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  background-color: $white;
+
+  input[type=checkbox] + span::before {
+    border: 2px solid $diary-darkgreen;
+    border-radius: 4px;
+  }
+
+  .flex-row-cdt {
+    .flex-col {
+      justify-content: center;
+      align-items: center;
+      text-align: start;
+    }
+  }
+
+  .flex-head {
+    display: flex;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+    color: rgba($diary-grey, 0.7);
+    align-items: center;
+  }
+
+  .flex-body {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+
+    .flex-row-cdt {
+      box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.08);
+
+      &:hover {
+        background-color: rgba($diary-grey, 0.2);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.flex-card {
+  display: flex;
+  flex-wrap: wrap;
+  width: 20%;
+  min-height: 100px;
+  background-color: $diary-white;
+  box-sizing: border-box;
+  border-radius: 7px;
+  //overflow: hidden;
+
+  .flex-content {
+    display: flex;
+    color: $diary-darkgreen;
+    font-size: 35px;
+    height: 75%;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .flex-title {
+    display: flex;
+    width: 100%;
+    height: 25%;
+    justify-content: center;
+    background: $diary-grey;
+    border-radius:  0 0 7px 7px;
+    color: #fff;
+    transition: all 250ms ease;
+  }
+}
+
+.flex-column {
+  flex-direction: column;
+}

package/scss/specifics/cahier-de-textes/generics/_index.scss

@@ -0,0 +1,5 @@
+@import './async-autocomplete';
+@import './flex';
+@import './switch';
+@import './toasts';
+@import './input-text';

package/scss/specifics/cahier-de-textes/generics/_input-text.scss

@@ -0,0 +1,10 @@
+// remove box-shadow orange
+
+.remove-box-shadow {
+  &:focus {
+    box-shadow: none !important;
+  }
+  input[type="text"]:focus {
+    box-shadow: none !important;
+  }
+}

package/scss/specifics/cahier-de-textes/generics/_switch.scss

@@ -0,0 +1,57 @@
+switch {
+  .switch {
+    cursor: pointer;
+
+    .tick {
+      width: 40px;
+      height: 12px;
+      display: block;
+      border-radius: 10px;
+      background: $grey;
+      position: relative;
+      overflow: visible;
+      margin: 5px;
+
+      &:before {
+        content: ' ';
+        width: 20px;
+        height: 20px !important;
+        left: 0;
+        display: block;
+        background: $white;
+        border-radius: 50%;
+        position: absolute;
+        top: -4px;
+        box-shadow: 0 1px 1px $shadow;
+        margin-right: 0;
+        margin-top: 0 !important;
+        border: none !important;
+      }
+    }
+
+    input[type=checkbox]:checked + .tick {
+      background: $diary-green;
+      &:before {
+        left: 20px;
+        background: $diary-darkengreen;
+      }
+    }
+
+    input[type=checkbox]:disabled + .tick {
+      background: $disabled-color;
+
+      &:before {
+        background: $disabled-color;
+      }
+    }
+
+    input[type=checkbox]:disabled:checked + .tick {
+      background: $primary-lighter;
+
+      &:before {
+        background: $primary-lighter;
+      }
+    }
+
+  }
+}