ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/vie-scolaire/specifics/_icons.scss

@@ -0,0 +1,154 @@
+/*!
+ * Copyright (c) Région Hauts-de-France, Département de la Seine-et-Marne, Région Nouvelle Aquitaine, Mairie de Paris, CGI, 2016.
+ * This file is part of OPEN ENT NG. OPEN ENT NG is a versatile ENT Project based on the JVM and ENT Core Project.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation (version 3 of the License).
+ * For the sake of explanation, any module that communicate over native
+ * Web protocols, such as HTTP, with OPEN ENT NG is outside the scope of this
+ * license and could be license under its own terms. This is merely considered
+ * normal use of OPEN ENT NG, and does not fall under the heading of "covered work".
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ */
+
+body.vsco--global {
+  i.check-empty::after{
+    content: "\e83d";
+  }
+  i.up-open::after{
+    font-size: large;
+    &:hover {
+      color: $cyan;
+    }
+  }
+  i.down-open::after{
+    font-size: large;
+    &:hover {
+      color: $cyan;
+    }
+  }
+  i.table::after{
+    content: '\e913';
+    color : #ffffff;
+  }
+  i.clock::after {
+    content: '\f017';
+  }
+  i.plus::after{
+    content:  '\e85e';
+    font-size: large;
+  }
+  i.moins::after{
+    content:  '-';
+    font-size: xx-large;
+  }
+  i.ok::after{
+    content:  '\e871';
+    font-size: large;
+  }
+  i.alerte::after{
+    content: '!';
+    font-size: xx-large;
+  }
+  i.warning::before, i.report::before {
+    content: '\e903';
+    font-size: 18px;
+  }
+
+  i.cancel::before {
+    content: '\e866';
+  }
+
+  i.eye-slash::before {
+    content: '\e904';
+  }
+
+  i.eye-open::before::before {
+    content: '\e873';
+  }
+  i.eye-open-orange::before {
+    content: '\e873';
+    color: #FF8500;
+  }
+  i.trash-orange::before{
+    content: '\e8cf';
+    color: #FF8500;
+  }
+
+  i.trash::before{
+    content: '\e8cf';
+  }
+
+  i.down-open {
+    content: '\e841';
+  }
+
+  .left-arrow::after {
+    content: "\e87b";
+    opacity: 0.8;
+    cursor: pointer;
+    border: none;
+    background-color: inherit;
+    color: $grey;
+    &:hover {
+      color: $cyan;
+    }
+  }
+
+  .right-arrow::after {
+    content: "\e823";
+    opacity: 0.8;
+    cursor: pointer;
+    border: none;
+    background-color: inherit;
+    color: $grey;
+    &:hover {
+      color: $cyan;
+    }
+  }
+
+  .clock::after {
+    content: "\f017";
+  }
+
+  i.arrows-cw::after {
+    content: '\e874';
+  }
+
+  i.phone::after {
+    content: '\f095';
+    cursor: pointer;
+  }
+  i.pencil::after {
+    content: '\e858';
+    cursor: pointer;
+  }
+  i.updateDomaine::after {
+    content: '\e806';
+    cursor: pointer;
+  }
+  i.manual-item::after {
+    content: '\e80c';
+  }
+  i.calendar-o::after {
+    content: "\e917";
+    color: #4bafd5;
+    padding: 0 5px;
+  }
+
+  // material icon
+  i {
+    &.mdi-close::before {
+      font-family: 'material-icons';
+      content: "\F156";
+    }
+    &.mdi-delete-forever::before {
+      font-family: 'material-icons';
+      content: "\F5E8";
+    }
+  }
+}

package/scss/specifics/vie-scolaire/specifics/_memento.scss

@@ -0,0 +1,277 @@
+$memento-bg-color: #f7f6f6;
+$memento-avatar-height: 170px;
+$memento-font-size: 17px;
+$memento-scrollbar-color: #4bafd5;
+$memento-scrollbar-color-hover: #1898c9;
+
+@mixin memento-menu-color($color) {
+  .memento {
+    .menu {
+      ul {
+        li {
+          &.focused, &.focused i:before, &.focused i:after {
+            color: $color;
+          }
+        }
+      }
+    }
+  }
+}
+
+body {
+  @include memento-menu-color($black);
+
+  &.presences {
+    @include memento-menu-color(#ffb600);
+  }
+
+  &.edt {
+    @include memento-menu-color(#162eae);
+  }
+
+  &.diary {
+    @include memento-menu-color(#00ab6f);
+  }
+
+  &.competences {
+    @include memento-menu-color(#ff5300);
+  }
+}
+
+.memento {
+  background-color: $memento-bg-color;
+  position: fixed;
+  top: 64px;
+  width: 100%;
+  height: calc(100% - 64px);
+  z-index: 100000;
+  left: 0;
+  overflow-y: auto;
+  color: $black !important;
+  font-size: $memento-font-size;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+
+    &-track {
+      box-shadow: inset 0 0 5px $vsco-grey;
+      border-radius: 10px;
+    }
+
+    &-thumb {
+      background: $memento-scrollbar-color;
+      border-radius: 10px;
+
+      &:hover {
+        background: $memento-scrollbar-color-hover;
+      }
+    }
+  }
+
+  .accommodation-field {
+    text-transform: lowercase;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+
+    > div {
+      flex: 1;
+    }
+
+    .user-comment {
+      padding: 10px;
+      background-color: $white;
+
+      i18n {
+        margin-left: 9px;
+        font-size: 15px;
+      }
+
+      textarea {
+        height: 80px;
+        font-family: Roboto, sans-serif;
+        border: none;
+        margin: 0;
+      }
+    }
+
+    .actions {
+      align-self: flex-start;
+
+      i.close::before {
+        font-size: 38px;
+        margin-right: 0;
+        cursor: pointer;
+      }
+
+      .async-autocomplete {
+        padding: 10px;
+        background-color: $white;
+        width: 80%;
+        float: right;
+
+        input[type="text"] {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .menu {
+      ul {
+        border-left: solid 1px rgba(0, 0, 0, 0.15);
+        list-style-type: none;
+
+        li {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+
+  .card {
+    font-size: $memento-font-size;
+  }
+
+  .section-title {
+    font-size: 20px;
+    color: $black;
+  }
+
+  .card {
+    padding: 15px;
+  }
+
+  .student {
+    display: flex;
+    align-items: center;
+    font-size: $memento-font-size;
+
+    .avatar {
+      height: $memento-avatar-height;
+      width: $memento-avatar-height;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+
+    .groups > span {
+      &::after {
+        content: ',';
+      }
+
+      &:last-child::after {
+        content: ''
+      }
+    }
+
+    h4 {
+      font-size: 28px;
+      color: $black !important;
+    }
+  }
+
+  .relatives {
+    display: flex;
+    padding: 5px;
+
+    .relative {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      border-right: solid 1px rgba(0, 0, 0, 0.15);
+
+      &:last-child {
+        border-right: none;
+      }
+
+      .data {
+        .contact-info.disabled {
+          opacity: 0.60;
+        }
+
+        .contact-info > div {
+          margin: 10px 0 auto 0;;
+        }
+      }
+
+      h4 {
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      .contact-priority {
+        display: flex;
+        margin-top: 48px;
+      }
+    }
+  }
+
+  i {
+    &::after, &::before {
+      font-family: "material-icons";
+      font-size: 20px;
+      margin-right: 5px;
+      color: $black;
+    }
+
+    &.birth-date::after {
+      content: "\F0EB"
+    }
+
+    &.school::after {
+      content: "\F474"
+    }
+
+    &.accommodation::after {
+      content: "\F4A3";
+    }
+
+    &.bus::after {
+      content: "\F0034";
+      font-size: 22px;
+    }
+
+    &.email::after {
+      content: "\F1EE";
+    }
+
+    &.mobile::after {
+      content: "\F11C";
+    }
+
+    &.phone::after {
+      content: "\F3F2"
+    }
+
+    &.address::after {
+      content: "\F2DC";
+    }
+
+    &.relatives-icon::after {
+      content: "\FEF4";
+    }
+
+    &.absences::before {
+      content: "\F15A";
+      color: $black;
+    }
+
+    &.marks::after {
+      content: "\F128"
+    }
+
+    &.sanctions::after {
+      content: "\F241";
+    }
+
+    &.teachers-conference::after {
+      content: "\F366";
+    }
+
+    &.close::before {
+      content: "\F5AD";
+    }
+  }
+}

package/scss/specifics/vie-scolaire/specifics/_mixins.scss

@@ -0,0 +1,88 @@
+/*!
+ * Copyright (c) Région Hauts-de-France, Département de la Seine-et-Marne, Région Nouvelle Aquitaine, Mairie de Paris, CGI, 2016.
+ * This file is part of OPEN ENT NG. OPEN ENT NG is a versatile ENT Project based on the JVM and ENT Core Project.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation (version 3 of the License).
+ * For the sake of explanation, any module that communicate over native
+ * Web protocols, such as HTTP, with OPEN ENT NG is outside the scope of this
+ * license and could be license under its own terms. This is merely considered
+ * normal use of OPEN ENT NG, and does not fall under the heading of "covered work".
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ */
+
+/* Variable Colors */
+$vsco-grey: #808080;
+$vsco-grey-clear: #eeeeee;
+$vsco-grey-invisible: #d6d6d65e;
+$vsco-dark-yellow: #ffb600;
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin box-shadow($in) {
+  box-shadow: $in;
+  -moz-box-shadow: $in;
+  -o-box-shadow: $in;
+  -webkit-box-shadow: $in;
+}
+
+@mixin box-shadow2($in, $in2) {
+  box-shadow: $in, $in2;
+  -moz-box-shadow: $in, $in2;
+  -o-box-shadow: $in, $in2;
+  -webkit-box-shadow: $in, $in2;
+}
+
+@mixin transition($transition) {
+  -moz-transition:    $transition;
+  -o-transition:      $transition;
+  -webkit-transition: $transition;
+  transition:         $transition;
+}
+
+@mixin keyframes($animationName){
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
+@mixin animation($animation){
+  animation: $animation;
+  -moz-animation: $animation;
+  -webkit-animation: $animation;
+}
+
+/**
+  $ENSEIGNANT-APPEL
+**/
+@mixin appel__evenement-icon($font-size, $rotate, $color) {
+  font-size: $font-size;
+  color: $color;
+  -webkit-transform: rotate($rotate);
+  -moz-transform: rotate($rotate);
+  -ms-transform: rotate($rotate);
+  -o-transform: rotate($rotate);
+}
+
+@mixin appel__historiques-creneau($in) {
+  height : $in;
+  display: inline-block;
+}

package/scss/specifics/vie-scolaire/specifics/_time-slots.scss

@@ -0,0 +1,97 @@
+/* View from time slots '/viescolaire/public/templates/viescolaire/param_time_slots.html' */
+
+.times-slot {
+  &-class {
+    &-add-section {
+      select {
+        margin: 5px 10px;
+      }
+    }
+
+    &-list {
+      &-element {
+        &-name {
+          p {
+            text-align: start;
+          }
+        }
+
+        multi-combo {
+          min-height: 1.5em;
+          height: unset;
+
+          > button.multi-combo-root-button {
+            margin: 0;
+          }
+
+          > div.multi-combo-root-panel {
+            > div.multi-combo-panel-opts {
+              > button {
+                display: none;
+              }
+            }
+          }
+          button {
+            height: auto;
+          }
+        }
+
+        &-classes {
+          i.mdi-close {
+            font-size: 1.5em;
+          }
+
+          &-error {
+            color: $red;
+          }
+        }
+      }
+    }
+  }
+
+  &-choiceSchedule {
+    display: flex;
+    align-items: center;
+  }
+
+  &-schedule {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    padding: 16px 0 32px 0;
+
+    &-title {
+      display: flex;
+      text-align: center;
+      position: relative;
+      align-items: center;
+      background-color: $white;
+      color: $black;
+      box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3);
+      height: 30px;
+      border: 1px solid $vsco-grey-clear;
+
+      span {
+        flex: 1;
+      }
+    }
+
+    &-list {
+      display: flex;
+      text-align: center;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+      height: 30px;
+      border-bottom: 1px solid $vsco-grey-invisible;
+
+      &:nth-child(even) {
+        background-color: $white;
+      }
+
+      span {
+        flex: 1
+      }
+    }
+  }
+}

package/scss/specifics/vie-scolaire/specifics/_toasts.scss

@@ -0,0 +1,102 @@
+.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;
+      }
+    }
+  }
+}