ode-csslib 4.0.0 → 4.0.2

package/scss/specifics/crre/fragments/_statusBar.scss

@@ -0,0 +1,135 @@
+.status-bar {
+  margin: 0;
+  padding: 30px 0;
+  text-align: center;
+
+  > li {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    position: relative;
+    line-height: 35px;
+
+    &.large {
+      width: 40px !important;
+      height: 40px !important;
+      line-height: 40px !important;
+    }
+
+    &:first-child, &:nth-child(2) {
+      margin-right: 65px;
+
+      &::after {
+        content: " ";
+        display: block;
+        width: 45px;
+        height: 5px;
+        position: absolute;
+        right: -55px;
+        top: 15px;
+      }
+    }
+
+    i.validated-status {
+      position: absolute;
+      width: 35px;
+      height: 35px;
+      left: 0;
+      text-align: center;
+      line-height: 35px;
+      color: $white;
+      display: none;
+    }
+  }
+
+  &.WAITING {
+    > li {
+      background-color: $medium-grey;
+
+      &:first-child::after, &:nth-child(2)::after {
+        background-color: $light-grey;
+      }
+    }
+  }
+
+  &.VALID {
+    > li {
+      background-color: $medium-grey;
+
+      &:first-child {
+        background-color: $accent;
+      }
+
+      &:first-child::after, &:nth-child(2)::after {
+        background-color: $light-grey;
+      }
+    }
+  }
+
+  &.REJECTED {
+    > li {
+      background-color: $medium-grey;
+
+      &:first-child {
+        background-color: $warning-color;
+      }
+
+      &:first-child::after, &:nth-child(2)::after {
+        background-color: $light-grey;
+      }
+    }
+  }
+
+  &.SENT {
+    > li {
+      background-color: $medium-grey;
+
+      &:first-child {
+        background-color: $primary;
+
+        i.validated-status {
+          display: block;
+        }
+
+        &::after {
+          background-color: $primary;
+        }
+      }
+
+      &:nth-child(2) {
+        background-color: $accent;
+
+        &::after {
+          background-color: $light-grey;
+        }
+      }
+    }
+  }
+
+  &.DONE {
+    > li {
+      background-color: $primary;
+
+      i.validated-status {
+        display: block;
+      }
+
+      &:first-child::after, &:nth-child(2)::after {
+        background-color: $primary;
+      }
+    }
+  }
+  &.colored {
+    > li {
+      background-color: $primary-dark;
+      color: white;
+
+      &:first-child::after, &:nth-child(2)::after {
+        background-color: $light-grey;
+      }
+    }
+  }
+}

package/scss/specifics/formulaire/_formulaire.scss

@@ -12,17 +12,18 @@ $formulaire-grey-dark: #5b6472; // from body text color
 $formulaire-grey: #b1b6bf; // from disabled button
 $formulaire-grey-light: #c9ced5; // from medium-grey from moodle ?
 $formulaire-grey-very-light: #e9ebef; // from cancel button
+$formulaire-grey-lighter: #f0f2f4; // from background linear-gradient
 
 $formulaire-red: #b50000;
 $formulaire-green: green;
 
 @font-face {
-  font-family: 'material-icons';
-  src: url('/formulaire/public/font/material-design/fonts/materialdesignicons-webfont.eot');
-  src: url('/formulaire/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
-  url('/formulaire/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
-  url('/formulaire/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
-  url('/formulaire/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
+  font-family: 'formulaire-mdi';
+  src: url('/formulaire/public/mdi/materialdesignicons-webfont.eot');
+  src: url('/formulaire/public/mdi/materialdesignicons-webfont.eot') format('embedded-opentype'),
+  url('/formulaire/public/mdi/materialdesignicons-webfont.woff2') format('woff2'),
+  url('/formulaire/public/mdi/materialdesignicons-webfont.woff2') format('woff'),
+  url('/formulaire/public/mdi/materialdesignicons-webfont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -37,7 +38,7 @@ body.formulaire section.toggle-buttons {
 }
 
 body.formulaire section.main {
-  @import "./components/index";
+  @import "components/index";
 
   .margin-vertical-1 {
     margin: 1% 0;
@@ -150,6 +151,20 @@ body.formulaire section.main {
     margin-top: 0;
   }
 
+  .flex-spaced {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  switch.switchoff span {
+    background: $formulaire-grey-light !important;
+
+    &:before {
+      background: $formulaire-grey !important;
+    }
+  }
+
 
   // Forms-list
 
@@ -162,6 +177,10 @@ body.formulaire section.main {
   .table {
     table-layout: fixed;
     margin: 10px;
+
+    thead label input[type=checkbox]:checked+span::before, thead label input[type=checkbox]+span::before{
+      border-color: $formulaire-white;
+    }
   }
 
   .toaster-right { float: right; }
@@ -289,100 +308,14 @@ body.formulaire section.main {
     }
   }
 
-  // Prop-form
-
-  .prop-form {
+  .public_link {
     display: flex;
-    justify-content: center;
+    align-items: center;
 
-    .item {
-      width: 60%;
-      @media screen and (max-width: $formulaire-screen-laptop) { width: 100%; }
-
-      .domino {
-        .picture {
-          &:hover {
-            cursor: pointer;
-          }
-
-          image-select {
-            width: 100%;
-          }
-        }
-
-        .data {
-          padding: 10px 20px;
-
-          &-text {
-            .title {
-              font-weight: bold;
-              margin: 10px 0 5px 0;
-            }
-
-            .interval {
-              font-size: 12px;
-              @media screen and (max-width: $formulaire-screen-mobile) {
-                margin-left: 5px;
-              }
-
-              .opening { margin-right: 10px; }
-
-              input {
-                text-align: center;
-                @media screen and (max-width: $formulaire-screen-mobile) {
-                  font-size: 10px;
-                }
-              }
-            }
-
-            .multiple, .editable, .anonymous, .notified {
-              height: 24px;
-            }
-
-            .multiple, .editable, .anonymous, .notified, .collectData {
-              font-size: 12px;
-              display: flex;
-              align-items: baseline;
-              margin-bottom: 1%;
-
-              .text {
-                display: flex;
-                flex-direction: column;
-                margin-left: 5px;
-              }
-            }
-
-            .collectData {
-              &-inputs{
-                margin: 2% 2% 2% 25px;
-
-                .goal input {
-                  margin: 0;
-                  font-size: 12px;
-                }
-              }
-
-              &-description {
-                border: solid 1px $formulaire-grey;
-                padding: 2%;
-              }
-            }
-          }
-
-          &-bottom {
-            display: flex;
-            justify-content: flex-end;
-            align-items: flex-end;
-            @media screen and (max-width: $formulaire-screen-mobile) {
-              margin-top: 5%;
-            }
-
-            &.date {
-              justify-content: space-between;
-            }
-          }
-        }
-      }
+    .text {
+      font-size: 14px;
+      font-style: italic;
+      margin-right: 1%;
     }
   }
 
@@ -395,4 +328,8 @@ body.formulaire section.main {
   .notResponded {
     color: $formulaire-red;
   }
-}
+}
+
+body.formulaire section.lightbox {
+  z-index: 10003;
+}

package/scss/specifics/formulaire/components/_dominos.scss

@@ -29,13 +29,20 @@
         align-items: center;
         justify-content: center;
         background: $formulaire-white;
-        &.empty { background: $formulaire-blue; }
+        
+        &.empty {
+          background: $formulaire-blue;
+        }
+        
+        img {
+          max-height: 135px;
+        }
       }
 
       .data {
         display: flex;
         flex-direction: column;
-        height: 100%;
+        min-height: 135px;
 
         &-text {
           padding: 10px;

package/scss/specifics/formulaire/components/_edit-form.scss

@@ -4,6 +4,21 @@
   @media screen and (max-width: $formulaire-screen-mobile) {
     padding: 8px 8px 8px;
   }
+
+  margin-top: 10px;
+}
+
+.header {
+  &-fixed {
+    position: sticky;
+    background: linear-gradient(to bottom right, $formulaire-grey-lighter, $formulaire-grey-very-light) fixed;
+    top: 64px;
+    z-index: 10003;
+  }
+
+  &-title {
+    margin-top: 10px;
+  }
 }
 
 .edit-form {
@@ -11,12 +26,9 @@
   flex-direction: column;
   align-content: space-between;
 
-  [sortable-element] {
-    cursor: default;
-
-    :not(.disabled) .grab {
-      cursor: grab;
-    }
+  .question-item .domino:not(.disabled) > .grab,
+  .section-top:not(.disabled) > .grab {
+    cursor: grab;
   }
 
   .elements {
@@ -27,6 +39,7 @@
 
     .question-item, .section-item {
       margin: auto;
+      cursor: default;
 
       .domino, .question-item .domino {
         display: flex;
@@ -76,6 +89,10 @@
               margin-top: 7px;
             }
 
+            .flex-spaced {
+              flex-wrap: wrap-reverse;
+            }
+
             .empty {
               font-weight: normal;
               font-style: italic;
@@ -86,6 +103,10 @@
           .question-type {
             font-size: 12px;
 
+            h4 {
+              font-size: 16px;
+            }
+
             .choice {
               display: flex;
               align-items: center;
@@ -94,6 +115,16 @@
                 margin-left: 6%;
               }
 
+              .width95 {
+                @media screen and (min-width: $formulaire-screen-tablet) {
+                  width: 95%;
+                }
+
+                &-always {
+                  width: 95%;
+                }
+              }
+
               i.i-cancel {
                 margin: auto 1%;
               }
@@ -110,6 +141,7 @@
           .question-bottom, .section-bottom {
             display: flex;
             justify-content: flex-end;
+            margin-top: 1%;
 
             .mandatory, .conditional {
               margin-right: 2%;
@@ -119,6 +151,11 @@
       }
     }
 
+    // This one is for DragAndDrop ghost preview
+    .childSection.sortable-ghost {
+      width: 75% !important;
+    }
+
     .section-item {
       margin: auto;
       align-items: center;
@@ -151,14 +188,13 @@
             margin-left: 5%;
           }
 
-          .flex-spaced {
+          .icons-section{
+            margin-left: 2%;
             display: flex;
-            justify-content: space-between;
-            align-items: baseline;
           }
         }
 
-        i::before, h4, input, input::placeholder {
+        i:not(.disabled)::before, h4, input, input::placeholder {
           color: white !important;
         }
       }
@@ -179,6 +215,16 @@
           display: flex;
           flex-direction: column;
           padding: 0 5%;
+          min-height: 50px;
+
+          // This one is for DragAndDrop ghost preview
+          .sortable-ghost {
+            width: 100% !important;
+
+            .question-item {
+              width: 100% !important;
+            }
+          }
         }
 
         .addQuestion {
@@ -207,8 +253,11 @@
     height: auto;
     padding: 0;
 
-    .hidden {
-      visibility: hidden;
+    // This one is for DragAndDrop ghost preview in pop-up
+    ul {
+      .sortable-ghost {
+        margin-left: 5%;
+      }
     }
 
     .row-shadow-effect {
@@ -221,6 +270,19 @@
       cursor: grab;
       margin: 1%;
       width: auto;
+
+      &.sectionChild {
+        margin-left: 5%;
+      }
+    }
+
+    .section-orga .row-shadow-effect {
+      background-color: $formulaire-blue;
+      color: white;
+
+      .top .dots i::before {
+        color: white !important;
+      }
     }
 
     .top {
@@ -250,11 +312,26 @@
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-
-      .container-arrow {
-        display: flex;
-        justify-content: space-around;
-      }
     }
   }
+}
+
+
+.hidden {
+  visibility: hidden;
+}
+
+.container-arrow {
+  display: flex;
+  justify-content: space-around;
+}
+
+.preview-recap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5%;
+  padding: 2% 3% 2% 3%;
+  background: $formulaire-white;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
 }

package/scss/specifics/formulaire/components/_icon.scss

@@ -89,128 +89,133 @@ i {
   }
 
   &.i-bell::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F09C";
   }
 
   &.i-cancel::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F156";
   }
 
   &.i-chevron-down::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F140";
   }
 
   &.i-chevron-left::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F141";
   }
 
   &.i-chevron-right::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F142";
   }
 
   &.i-chevron-up::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F143";
   }
 
   &.i-clock::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F150";
     color: $formulaire-grey-dark;
   }
 
   &.i-delete::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F1C0";
   }
 
   &.i-download::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F1DA";
     color: $formulaire-grey-dark;
   }
 
   &.i-drag::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F1D8";
     color: $formulaire-grey;
   }
 
   &.i-duplicate::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F18F";
   }
 
   &.i-validate::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F12C";
   }
 
   &.i-plus-circle::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F417";
   }
 
   &.i-send::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F0108";
     color: $formulaire-grey-dark;
   }
 
   &.i-share::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F497";
     color: $formulaire-grey-dark;
   }
 
   &.i-view-cards::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\FE4D";
     color: $formulaire-grey-light;
   }
 
   &.i-view-tab::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F572";
     color: $formulaire-grey-light;
   }
 
   &.i-undo::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F54C";
   }
 
   &.i-folder::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F24B";
     color: $formulaire-blue;
   }
 
   &.i-eye::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F208";
     color: $formulaire-blue;
   }
 
   &.i-eye:hover::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F208";
     color: $formulaire-orange;
   }
 
   &.i-info::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F2FD";
     color: $formulaire-blue;
   }
 
   &.i-edit::before {
-    font-family: 'material-icons';
+    font-family: 'formulaire-mdi';
     content: "\F3EB";
   }
+
+  &.i-reload::before {
+    font-family: 'formulaire-mdi';
+    content: "\F453";
+  }
 }