ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/ressource-aggregator/components/_search.scss

@@ -0,0 +1,117 @@
+.advanced-search {
+  .advanced-search-form {
+    padding: 15px;
+    position: relative;
+  }
+
+  .row-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: $tablette) {
+      justify-content: flex-start;
+    }
+
+    .centered-text {
+      @media (max-width: $tablette) {
+        text-align: left !important;
+      }
+    }
+  }
+
+  select {
+    min-width: unset;
+    text-transform: uppercase;
+    margin-bottom: 0;
+  }
+
+  .advanced-search-background {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    opacity: 0.75;
+    // background image visibility responsive
+    @media (max-width: $tablette) {
+      background-position-x: 180%;
+    }
+    @media (max-width: $small-tablette) {
+      background-position-x: -60%;
+    }
+  }
+}
+
+.advanced-search-filters {
+  .advanced-search-fields .field {
+    padding-right: 10px;
+  }
+}
+
+.global-search {
+  margin-right: 0px !important;
+
+  &-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 10px 20px 10px;
+    align-items: flex-start;
+
+    @media (max-width: $small-tablette) {
+      flex-direction: column-reverse;
+    }
+
+    .flex {
+      display: flex;
+      flex-direction: column;
+
+      &-left {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      &-right {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        width: 100%;
+        justify-content: center;
+
+        @media (max-width: $small-tablette) {
+          flex-direction: row-reverse;
+          align-items: flex-start;
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+
+  &-filters {
+    white-space: nowrap;
+
+    @media (max-width: $small-tablette) {
+      background: $white;
+      border-radius: 10px;
+      padding-top: 5px;
+      text-align: center;
+      width: calc(100vw - 40px);
+      white-space: normal;
+    }
+    multi-combo {
+      padding-right: 10px;
+    }
+    .filter-line {
+      @media (max-width: $small-tablette) {
+        padding: 0 10px;
+      }
+    }
+  }
+}

package/scss/specifics/ressource-aggregator/components/_toaster.scss

@@ -0,0 +1,86 @@
+.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/specifics/support/_support.scss

@@ -0,0 +1,3 @@
+body.support {
+  @import "./generic/index";
+}

package/scss/specifics/support/generic/_index.scss

@@ -0,0 +1 @@
+@import "./toasts";

package/scss/specifics/support/generic/_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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+/*!
+ * 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.
+ */
+
+@font-face {
+  font-family: 'material-icons';
+  src: url('/viescolaire/public/font/material-design/fonts/materialdesignicons-webfont.eot');
+  src: url('/viescolaire/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
+  url('/viescolaire/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
+  url('/viescolaire/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
+  url('/viescolaire/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@import "./specifics/mixins";
+@import "./specifics/global";
+@import "./specifics/viescolaire";
+@import "./specifics/icons";
+@import "./specifics/toasts";
+@import "./specifics/time-slots";
+@import "./specifics/memento";
+@import "./specifics/async-autocomplete";
+@import "./specifics/ellipsis";
+
+@import "./paramEtab/param_services";
+@import "./paramEtab/param_trombinoscope";
+@import "./components/index";

package/scss/specifics/vie-scolaire/components/_failure.scss

@@ -0,0 +1,24 @@
+.failure {
+  display: flex;
+  width: 100%;
+
+  .error-photo {
+    max-width: 8%;
+    margin-right: 20px;
+  }
+  .error-info {
+    &-name {
+      margin: 5px;
+      font-weight: bold;
+    }
+    &-path {
+      margin: 5px;
+    }
+    display: flex;
+    flex-direction: column;
+
+    &-search {
+      flex-shrink: 2;
+    }
+  }
+}

package/scss/specifics/vie-scolaire/components/_index.scss

@@ -0,0 +1,2 @@
+@import "failure";
+@import "student-picture";

package/scss/specifics/vie-scolaire/components/_student-picture.scss

@@ -0,0 +1,71 @@
+@mixin hiddenVisibility($visibilityValue, $opacityValue) {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility $visibilityValue linear, opacity $opacityValue linear
+}
+
+@mixin showVisibility() {
+  cursor: pointer;
+  visibility: visible;
+  opacity: 1;
+}
+
+.student-picture {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 16px 0 16px;
+
+  &-content {
+    display: flex;
+    position: relative;
+    margin-bottom: 12px;
+
+    &-background {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      background: $white;
+      width: 11px;
+      height: 11px;
+
+      @include hiddenVisibility(0.2s, 0.4s);
+    }
+
+    &-remove {
+      font-size: 24px;
+      color: $orange;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      @include hiddenVisibility(0.3s, 0.3s);
+    }
+
+    &:hover {
+      visibility: visible;
+      .student-picture-content-background, .student-picture-content-remove {
+        @include showVisibility();
+      }
+    }
+
+    &-img {
+      object-fit: cover;
+      height: 200px;
+      width: 100%;
+    }
+
+    &-button {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  &-name {
+    text-align: center;
+    font-weight: bold;
+    width: 140px;
+  }
+}

package/scss/specifics/vie-scolaire/paramEtab/_param_services.scss

@@ -0,0 +1,239 @@
+.paramServices {
+
+
+  .selectable-list {
+    width: 80%;
+    height: 100%;
+    margin: auto;
+  }
+
+  .service-list-container{
+    .serviceList {
+
+      &.active {
+        box-shadow: -0.2em 0 3px rgba(10, 10, 10, 0.2), 0.2em 0 3px rgba(10, 10, 10, 0.2);
+      }
+      padding-top: 0.6%;
+      padding-bottom: 0.6%;
+      border-top: 0.5px solid darkgrey;
+
+      & > * {
+        vertical-align: middle;
+        display: inline-block !important;
+      }
+
+      & > label:not(.select) {
+        text-align: center
+      }
+
+      .cellTab-left:first-child {
+        padding-left: 1em;
+      }
+      .pencil, cancel{
+        color: #FF8500;
+      }
+    }
+
+
+    .subList{
+      background-color: #f7f6f6;
+      div{
+        .tabulation{
+          padding-left: 3em;
+        }
+      }
+    }
+    .serviceList:nth-child(2){
+      box-shadow: inset 0 0.2em 3px  rgba(10, 10, 10, .2);
+    }
+  }
+  .padding-top {
+    padding-top: 5px;
+  }
+
+  .lightboxCreateCSS, .lightboxUpdate {
+    margin: 20px;
+  }
+
+  .lightboxCreateCSS > .row:last-child > * {
+    display: inline-block;
+  }
+
+  .lightboxUpdate > .row > * {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .labels-in-line {
+    display: inline-flex;
+
+    div {
+      margin-left: 2px;
+      display: inline-table;
+      margin-right: 2px;
+    }
+  }
+  .filterButton {
+
+    & > * {
+      margin: 0 10px 15px;
+    }
+
+    & > input {
+      font-size: 1em;
+      font-style: italic;
+    }
+  }
+  .filter-down{
+    &::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 6px solid #222222;
+      position: absolute;
+      margin-left: 0.5em;
+      top: 50%;
+      margin-top: -4px;
+    }
+  }
+  .filter-up{
+    &::after {
+      content: ' ';
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 6px solid #222222;
+      position: absolute;
+      margin-left: 0.5em;
+      top: 50%;
+      margin-top: -4px;
+    }
+  }
+  .svg-image{
+    display: flex;
+    align-items:center;
+
+    input {
+      padding-top: 5px;
+    }
+    .image-center{
+      margin-left: 40%;
+    }
+    input,i{
+      margin-left: 1em;
+    }
+  }
+
+  .loaderCenter{
+    margin: 0 45%;
+  }
+  .loaderArray {
+    border: 6px solid #f3f3f3; /* Light grey */
+    border-top: 6px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 2s linear infinite;
+  }
+  .filterButton{
+    border-radius: 30em;
+    background-color: white;
+    color: #FF8500;
+    border:solid 1px #FF8500;
+    margin: 0.5em;
+    padding: 5px 15px;
+  }
+
+  .selected{
+    background-color: #FF8500;
+    color: white;
+  }
+
+  .tab-header{
+    position: -webkit-sticky;
+    position: sticky;
+    background: white;
+    left: 355.5px;
+    top: 64px;
+    margin-top: 0;
+    height: 50px;
+    z-index: 2;
+  }
+
+  .filterArea{
+    input{
+      border: none; /* <-- Mandatory  */
+      border:solid 1px #ccc;
+      border-radius: 10px;
+      margin-right: 10em ;
+    }
+    select{
+      border-radius: 5px;
+    }
+  }
+
+  .trash {
+    padding: 10px;
+  }
+  .service-tab-header-center{
+    text-align: center;
+  }
+  .service-tab-header-left{
+    text-align: left;
+  }
+  .cellTab-center{
+    text-align: center;
+    div > span [tooltips]{
+      background-color: white;
+      color: black;
+    }
+  }
+
+  .pencil{
+    color: #FF8500;
+  }
+  .lightboxCreate {
+    ul {
+      padding-left: 1.33em;
+      margin-top: 0.4em;
+
+      li {
+        font-size: 1.2em;
+        list-style-type: none;
+        padding-top: 10px;
+      }
+    }
+
+    .buttonAbsolute {
+      bottom: 0;
+      position: absolute;
+      right: 0;
+
+    }
+
+    .fullBorder {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
+    }
+
+    .buttonMargin {
+      margin-top: 10px
+    }
+  }
+
+  .remplacement-separator {
+    width: 100%;
+    height: 0.5px;
+    padding: 0;
+    background: lightgrey;
+  }
+
+  .selectedMultiBox {
+    .selected{
+      background-color: unset;
+    }
+    font-size: 16px;
+  }
+
+}