ode-csslib 1.0.0-dev-produit.202209220950

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

@@ -0,0 +1,692 @@
+/*!
+ * 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 {
+  .tooltip{
+    max-width: 400px;
+  }
+  #structure-loader{
+    &.overlay{
+      position: fixed;
+      height: calc(100% - 64px);
+      width: 100%;
+      background: rgba(255,255,255,0.9);
+      left: 0;
+      top: 64px;
+      z-index: 3;
+      > div {
+        position: relative;
+        height: 100%;
+        float: left;
+        width: 100%;
+
+        .content-loader {
+          text-align: center;
+          position: absolute;
+          top: 50%;
+          width: 100%;
+          margin-top: -15px;
+        }
+      }
+    }
+  }
+
+  #message-loader{
+    &.overlay{
+      position: fixed;
+      height: calc(100% - 64px);
+      width: 100%;
+      background: rgba(255,255,255,0.9);
+      left: 0;
+      top: 64px;
+      z-index: 3;
+      > div {
+        position: relative;
+        height: 100%;
+        float: left;
+        width: 100%;
+
+        .content-loader {
+          text-align: center;
+          position: absolute;
+          top: 50%;
+          width: 100%;
+          margin-top: -15px;
+        }
+      }
+    }
+  }
+
+  .box-accueil {
+    -webkit-border-radius: 5p;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    border-radius: 5px;
+    background-color: $white;
+    height: 440px !important;
+    margin: 2% 4%;
+
+    .select {
+      min-width: 80px !important;
+    }
+
+    > h2 {
+      text-align: center;
+      margin-bottom: 0;
+    }
+
+    table{
+      overflow-y: scroll;
+      max-height: 220px !important;
+      display: block;
+    }
+
+    .content-box-accueil--table{
+
+      .content-box-accueil--table--header{
+        background: $primary;
+
+        h5{
+          color: $white !important;
+          text-indent: 10px;
+        }
+      }
+
+      .content-box-accueil--table--content{
+        font-size: 12px;
+        padding: 5px 0;
+        overflow-y: scroll;
+        height: 260px;
+
+        > .row{
+          padding: 5px 0;
+        }
+
+        > .row:nth-child(2n){
+          background-color: $light-grey;
+        }
+      }
+    }
+  }
+
+  .menu-accueil {
+    padding: 5px !important;
+    margin: 0 !important;
+  }
+
+  .separator {
+    border-bottom: solid 1px $light-grey;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .highlightedText {
+    background-color: yellow;
+  }
+
+  .whiteSpaceNormal {
+    white-space: normal !important;
+  }
+
+  .small-input-number {
+    height: 2em;
+    width:50px;
+    padding-left: 5px;
+  }
+
+  .obligatoire {
+    font-size: 45% !important;
+    vertical-align: top;
+    color: $red;
+    margin-left: 0px;
+  }
+
+  textarea{
+    height: auto;
+  }
+
+  .vsco_navigation {
+    display: none;
+  }
+
+  @media screen and (max-width:$tablette) {
+    .vsco_navigation {
+      display: block !important;
+    }
+  }
+
+  .ellipsis{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .aligned-center {
+    margin: 0 auto;
+  }
+
+  .background-grey {
+    background-color: $light-grey !important;
+  }
+
+  .shadow-color {
+    background-color: $shadow !important;
+  }
+
+  label input[type=checkbox]:checked + span::before, label input[type=checkbox]:checked + i18n::before {
+    content: " ";
+    transform: rotate(40deg);
+    -webkit-transform: rotate(40deg);
+    border-color: $green;
+    height: 25px;
+    width: 20px;
+    margin-top: -11px;
+  }
+  .margin-five {
+    margin : 5px;
+  }
+
+  .padding-five {
+    padding : 5px;
+  }
+
+  .margin-top-1em {
+    margin-top: 1em;
+  }
+  .header-viescolaire {
+    > h1 {
+      text-align: center;
+    }
+  }
+  .main-content {
+    margin-top: 0 !important;
+  }
+  .list-view-cgi {
+    height: 100%;
+  }
+  .cell-indent{
+    text-indent: 10px;
+  }
+
+  header{
+    .header-nav{
+      margin-bottom: 10px;
+      .header-nav__fil-ariane{
+        // display: inline-block;
+        > div{
+          display: inline-block;
+        }
+        > .burger-icon{
+          margin-right: 30px;
+        }
+      }
+      .header-nav__date-pickers{
+        margin-right: 8.5%;
+      }
+    }
+    .header-button{
+      margin-bottom: 10px;
+
+      button{
+        float: none;
+      }
+    }
+  }
+  container{
+    @include transition(all 0.4s ease);
+  }
+  .menu-zero{
+    display: block;
+    width: 0%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .margin-five {
+    margin : 5px;
+  }
+  .header-viescolaire {
+    > h1 {
+      text-align: center;
+    }
+  }
+  .header-absences{
+    > h1 {
+      text-align : center;
+    }
+    > h2 {
+      text-align: center;
+      width: 100%;
+    }
+  }
+  .list-view-cgi__header {
+    margin-bottom: 15px;
+    border-bottom: 1px solid grey;
+
+    div:nth-child(n){
+      border-left: 1px solid grey;
+      text-indent: 10px;
+    }
+
+    div:first-child{
+      border-left: none !important;
+      text-indent: 10px;
+    }
+  }
+  .main-content {
+    margin-top: 0 !important;
+  }
+  .list-view-cgi {
+    height: 100%;
+  }
+  .list-view-cgi__grille {
+    font-size: 12px !important;
+    >div:nth-child(n) {
+      border-top: solid 1px;
+      border-left: solid 1px;
+      border-right: solid 1px;
+      padding: 1px 0;
+      border-color: $medium-grey;
+      height:30px;
+      &:hover{
+        background-color: $neutral-grey;
+      }
+    }
+    >div:last-child{
+      border-bottom: solid 1px;
+      border-color: $medium-grey;
+      padding: 1px 0;
+    }
+  }
+  .cell{
+    @include transition(all 0.2s ease);
+  }
+
+  mobile-panel{
+    .mobile-panel{
+      position: fixed;
+      background-color: $white;
+      height: 100%;
+      max-height: calc(100% - 105px);
+      top: 85px;
+      width: 450px;
+      max-width: 25%;
+      display: block;
+      @include box-shadow2(0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23));
+      @include transition(all 0.4s ease);
+      border-radius: 2px;
+      &.right{
+        right: -30%;
+        &.displayed{
+          right: 15px;
+        }
+      }
+      &.left{
+        left: -30%;
+        &.displayed{
+          left: 15px;
+        }
+      }
+      .close-mobile-panel{
+        float: right;
+        padding: 5px 10px;
+        color: $grey;
+        cursor: pointer;
+      }
+      .content{
+        padding: 25px 15px;
+      }
+    }
+  }
+  /**
+    $BURGER-MENU
+  **/
+  .burger-icon {
+    cursor: pointer;
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
+    width: 30px;
+    height: 23px;
+    cursor: pointer;
+    z-index: 11;
+    display: inline-block;
+    &.opened{
+      > span:nth-child(1){
+        -webkit-transform: rotate(45deg) translateY(9px) translateX(4px);
+        -moz-transform: rotate(45deg) translateY(9px) translateX(4px);
+        transform: rotate(45deg) translateY(9px) translateX(4px);
+        margin-left: 0px;
+      }
+      > span:nth-child(2){
+        margin-left: -100px;
+      }
+      > span:nth-child(3){
+        -webkit-transform: rotate(-45deg) translateY(-10px) translateX(5px);
+        -moz-transform: rotate(-45deg) translateY(-10px) translateX(5px);
+        transform: rotate(-45deg) translateY(-10px) translateX(5px);
+        margin-left: 0px;
+      }
+    }
+    &:hover span{
+      opacity: 0.8;
+    }
+    span {
+      display: block;
+      float: left;
+      clear: both;
+      height: 2px;
+      width: 30px;
+      margin-left: 0px;
+      border-radius: 40px;
+      background-color: $primary;
+      position: absolute;
+      overflow: hidden;
+      @include transition(all 0.4s ease);
+      &:nth-child(1) {
+        margin-top: 0px;
+        z-index: 9;
+      }
+      &:nth-child(2) {
+        margin-top: 10px;
+      }
+      &:nth-child(3) {
+        margin-top: 20px;
+      }
+    }
+  }
+  #crumbs{
+    padding-left: 5px;
+    font-size: 16px;
+    ul {
+      list-style: none;
+      display: inline-table;
+      padding: 0;
+      li {
+        display: inline;
+        a{
+          padding: 10px;
+          position: relative;
+          &:after{
+            content: "\e823";
+            position: absolute;
+            right: -5px;
+            color: $grey;
+            @include fonticon;
+            font-size: 10px;
+            top: 10px;
+          }
+          &.selected, &.selected:hover{
+            color: $grey;
+          }
+          &.selected:after{
+            content: "";
+          }
+        }
+      }
+    }
+  }
+  .marginFive {
+    margin: 5px;
+  }
+  .tailleMax {
+    width: 97%;
+  }
+
+  .marginTopFive {
+    margin-top: 5px;
+  }
+  .greyColor {
+    color: $grey;
+  }
+  .bold {
+    font-weight: bold;
+  }
+  /**
+  * $SELECT
+  **/
+  .select:not(button){
+    position: relative;
+    height: 38px;
+    display: block;
+    margin: 5px 0;
+    select{
+      border: solid 1px rgba(0, 0, 0, 0.3) !important;
+      background: $white !important;
+      width: 100% !important;
+      outline: none !important;
+      padding: 8px 15px 8px 5px;
+      height: 35px !important;
+      color: $text-light;
+      -webkit-appearance: none;
+      -moz-appearance:    none;
+      appearance:         none;
+      padding-right: 40px;
+    }
+    &.disabled{
+      select {
+        background-color: $light-grey !important;
+      }
+      &:after{
+        background: $grey;
+      }
+    }
+    &:after{
+      content: "\e841";
+      @include fonticon;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      padding: 2px 10px;
+      background: $cyan;
+      color: $white;
+      pointer-events: none;
+      border-radius: 2px;
+      font-size: 9px;
+      text-align: center;
+      height: 22px;
+      vertical-align: middle;
+    }
+  }
+  .buttonPosition {
+    width : 100%;
+  }
+  .plus-input{
+    &::after{
+      content: "\e85e";
+      @include fonticon;
+      font-size: 12px;
+      color: $grey;
+      padding: 9px 10px;
+      font-weight: 300;
+      border-radius: 50%;
+      opacity: 0.8;
+      cursor: pointer;
+    }
+    &:hover::after{
+      color: $cyan;
+      @include transition(all 200ms ease);
+    }
+  }
+  .cell-check{
+    text-align: center;
+  }
+  .noMarginLeft {
+    margin-left: 0 !important;
+  }
+  .fontLarge {
+    font-size: large;
+  }
+  .fontXLarge {
+    font-size: x-large;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .marginLeftFive{
+    margin-left: 5px;
+  }
+  //.ariane-fixed{
+  //  position: fixed;
+  //  top: 80px;
+  //  z-index: 4;
+  //}
+  /*
+  =============== TABS =============
+  */
+  .tabbale{
+    &:before, &:after{
+      display: table;
+      content: "";
+      line-height: 0;
+    }
+    &:after {
+      clear: both;
+    }
+  }
+  .nav-tabs {
+    padding: 0;
+    font-size: 1.1em;
+    > li {
+      float: left;
+      line-height: 20px;
+      padding: 20px 0;
+      text-align: center;
+      border-bottom: solid 0 transparent;
+      @include transition(all 200ms ease);
+      &.active{
+        border-bottom: solid 3px $orange;
+        a{
+          color: $orange;
+        }
+      }
+      a{
+        padding: 10px 0;
+      }
+    }
+  }
+  .nav{
+    margin-left: 0;
+    margin: 0;
+    list-style: none;
+    height: 20px;
+    &:after{
+      clear: both;
+    }
+  }
+  .tab-content {
+    overflow: auto;
+    margin-top: 50px;
+    > .tab-pane{
+      display: none;
+      &.active{
+        display: block;
+      }
+    }
+  }
+  .asterisk::before {
+    content: "*";
+    font-size: 16px;
+  }
+  @media screen and (max-device-width: $tablette){
+    .tab-content>.tab-pane {
+      margin-top: 10px;
+    }
+  }
+  .bold{
+    font-weight: bold;
+  }
+  .underline{
+    text-decoration: underline;
+  }
+  @include keyframes(error){
+    0% {
+      border: solid 2px rgba(255, 59, 48, 1);
+      background-color: rgba(255, 59, 48, 0);
+    }
+    50%{
+      border: solid 2px rgba(255, 59, 48, 0.3);
+      background-color: rgba(255, 59, 48, 0.3);
+    }
+    100%{
+      border: solid 2px rgba(255, 59, 48, 1);
+      background-color: rgba(255, 59, 48, 0);
+    }
+  }
+  .error{
+    @include animation(error 1000ms infinite);
+  }
+
+  @include keyframes(spinner) {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .offline-message {
+    width: 50%;
+    left: 25%;
+    position: fixed;
+    top: 80px;
+    text-align: center;
+    @include transition(all 0.15s ease);
+    color: $white;
+    font-weight: bold;
+
+    &.offline {
+      background-color: $red;
+
+      i::before {
+        content: '\e862';
+      }
+    }
+
+    &.attempting {
+      background-color: $yellow;
+
+      i{
+        animation: spinner 1.25s linear infinite;
+
+        &::before {
+          content: '\e85a';
+        }
+      }
+    }
+
+    &.online {
+      background-color: $green;
+
+      i::before {
+        content: '\e871';
+      }
+    }
+  }
+}