ode-csslib 1.0.0-dev-produit.202209220950

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

@@ -0,0 +1,260 @@
+// Edit-form
+
+.main-button button {
+  @media screen and (max-width: $formulaire-screen-mobile) {
+    padding: 8px 8px 8px;
+  }
+}
+
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  align-content: space-between;
+
+  [sortable-element] {
+    cursor: default;
+
+    :not(.disabled) .grab {
+      cursor: grab;
+    }
+  }
+
+  .elements {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .question-item, .section-item {
+      margin: auto;
+
+      .domino, .question-item .domino {
+        display: flex;
+        flex-direction: column;
+        margin: 10px 0;
+        background: $formulaire-white;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+
+        &.questionError, &.sectionError {
+          border-left: solid 3px red;
+        }
+
+        &:not(.disabled) question-title h4, .section-top:not(.disabled) h4 {
+          margin-top: 0;
+        }
+
+        .question-top, .section-top {
+          display: flex;
+          justify-content: center;
+
+          .dots {
+            display: flex;
+            flex-direction: column;
+            line-height: 2px;
+            padding-top: 1%;
+
+            @media screen and (max-width: $formulaire-screen-mobile) {
+              margin-top: 10px;
+            }
+          }
+        }
+
+        &.disabled .question-main {
+          padding: 2% 3% 2% 3%;
+        }
+
+        .question-main {
+          display: flex;
+          flex-direction: column;
+          padding: 0 3% 2% 3%;
+
+          .question-title {
+            display: flex;
+            justify-content: space-between;
+
+            &.onedition {
+              margin-top: 7px;
+            }
+
+            .empty {
+              font-weight: normal;
+              font-style: italic;
+              color: $formulaire-grey;
+            }
+          }
+
+          .question-type {
+            font-size: 12px;
+
+            .choice {
+              display: flex;
+              align-items: center;
+
+              select {
+                margin-left: 6%;
+              }
+
+              i.i-cancel {
+                margin: auto 1%;
+              }
+            }
+
+            textarea {
+              width: 100%;
+              height: 60px;
+              resize: none;
+              background: none;
+            }
+          }
+
+          .question-bottom, .section-bottom {
+            display: flex;
+            justify-content: flex-end;
+
+            .mandatory, .conditional {
+              margin-right: 2%;
+            }
+          }
+        }
+      }
+    }
+
+    .section-item {
+      margin: auto;
+      align-items: center;
+
+      .domino {
+        background: linear-gradient(to bottom right, #f0f2f4, #e9ebef) fixed;
+        box-shadow: none;
+      }
+
+      .section-top {
+        flex-direction: column;
+        background-color: $formulaire-blue;
+
+        &-dots {
+          display: flex;
+          justify-content: center;
+
+          .dots {
+            align-self: center;
+          }
+        }
+
+        &-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 3%;
+
+          .title i {
+            margin-left: 5%;
+          }
+
+          .flex-spaced {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+          }
+        }
+
+        i::before, h4, input, input::placeholder {
+          color: white !important;
+        }
+      }
+
+      .nofocusable {
+        border: 2px solid rgba(0, 0, 0, 0.1);
+
+        .description {
+          padding: 1% 3%;
+
+          .nodescription {
+            font-size: 14px;
+            font-style: italic;
+          }
+        }
+
+        .questions {
+          display: flex;
+          flex-direction: column;
+          padding: 0 5%;
+        }
+
+        .addQuestion {
+          text-align: right;
+          padding: 1%;
+        }
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+
+    .flexend {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.drag {
+  ul {
+    list-style: none;
+    height: auto;
+    padding: 0;
+
+    .hidden {
+      visibility: hidden;
+    }
+
+    .row-shadow-effect {
+      display: flex;
+      background-color: rgba(0, 0, 0, 0.01);
+      border-radius: 5px;
+      padding: 10px;
+      box-shadow: -2px 5px 5px #bfbfbf7d;
+      z-index: 0;
+      cursor: grab;
+      margin: 1%;
+      width: auto;
+    }
+
+    .top {
+      width: 6%;
+      display: flex;
+      @media screen and (max-width: $formulaire-screen-mobile) {
+        width: 15%;
+      }
+
+      .dots {
+        display: flex;
+        flex-direction: column;
+        line-height: 6px;
+        transform: rotate(90deg);
+      }
+    }
+
+    .main {
+      width: 95%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        width: 86%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .container-arrow {
+        display: flex;
+        justify-content: space-around;
+      }
+    }
+  }
+}

package/scss/specifics/formulaire/components/_folder.scss

@@ -0,0 +1,47 @@
+.folders {
+  margin: 2% 0;
+
+  .folder-article {
+    width: calc(90%/3);
+    height: auto;
+    padding: 15px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.26);
+    background: $formulaire-white;
+    margin: 0 1% 1%;
+
+    @media screen and (max-width:$formulaire-screen-mobile){width: calc(90%/2); padding-bottom: 10px; padding-left: 7px; padding-top: 10px;}
+    @media screen and (max-width:$formulaire-screen-tablet){width: calc(90%/2); padding-bottom: 10px; padding-left: 7px; padding-top:10px;}
+    @media screen and (max-width:$formulaire-screen-laptop){width: calc(90%/2);}
+
+
+    &.selected { background: $formulaire-blue-transparent }
+
+    &:hover {
+      box-shadow: 0 6px 18px rgba(0,0,0,0.26);
+      transition : all 0.3s cubic-bezier(.25, .8, .25, 1)
+    }
+  }
+
+  .folder {
+    display: flex;
+    align-items: flex-end;
+
+    &-image {
+      text-align: center;
+    }
+
+    &-infos {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      margin-left:10px;
+      @media screen and (max-width: $formulaire-screen-tablet) { margin-left:20px; }
+
+      .counters {
+        font-size: 12px;
+        font-style: italic;
+        color: $formulaire-grey;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,216 @@
+i {
+  margin: 0;
+
+  &.spaced {
+    &-right {
+      margin-right: 5px;
+    }
+
+    &-left {
+      margin-left: 5px;
+    }
+
+    &-both {
+      margin: 0 5px;
+    }
+  }
+
+  &.centered {
+    vertical-align: sub;
+  }
+
+  // Status
+
+  &.hide {
+    opacity: 0;
+  }
+
+  &.selected::before {
+    color: $formulaire-grey-dark !important;
+  }
+
+  // Icons sizes
+
+  &.xs-icon::before {
+    font-size: 10px;
+  }
+
+  &.sm-icon::before {
+    font-size: 16px;
+  }
+
+  &.md-icon::before {
+    font-size: 20px;
+  }
+
+  &.lg-icon::before {
+    font-size: 24px;
+  }
+
+  &.xl-icon::before {
+    font-size: 40px;
+  }
+
+  &.hg-icon::before {
+    font-size: 45px;
+    @media screen and (max-width:$formulaire-screen-mobile){font-size:35px;}
+    @media screen and (max-width:$formulaire-screen-tablet){font-size:40px;}
+  }
+
+  // Icons color
+
+  &.dark-grey::before {
+    color: $formulaire-grey-dark !important;
+  }
+
+  &.classic-grey::before {
+    color: $formulaire-grey !important;
+  }
+
+  &.light-grey::before {
+    color: $formulaire-grey-light !important;
+  }
+
+  &.very-light-grey::before {
+    color: $formulaire-grey-very-light !important;
+  }
+
+  &.disabled {
+    cursor: default;
+    &::before {
+      color: $formulaire-grey-light !important;
+    }
+  }
+
+  // Icons content
+
+  &.dropbtn::before{
+    content: '\e912';
+  }
+
+  &.i-bell::before {
+    font-family: 'material-icons';
+    content: "\F09C";
+  }
+
+  &.i-cancel::before {
+    font-family: 'material-icons';
+    content: "\F156";
+  }
+
+  &.i-chevron-down::before {
+    font-family: 'material-icons';
+    content: "\F140";
+  }
+
+  &.i-chevron-left::before {
+    font-family: 'material-icons';
+    content: "\F141";
+  }
+
+  &.i-chevron-right::before {
+    font-family: 'material-icons';
+    content: "\F142";
+  }
+
+  &.i-chevron-up::before {
+    font-family: 'material-icons';
+    content: "\F143";
+  }
+
+  &.i-clock::before {
+    font-family: 'material-icons';
+    content: "\F150";
+    color: $formulaire-grey-dark;
+  }
+
+  &.i-delete::before {
+    font-family: 'material-icons';
+    content: "\F1C0";
+  }
+
+  &.i-download::before {
+    font-family: 'material-icons';
+    content: "\F1DA";
+    color: $formulaire-grey-dark;
+  }
+
+  &.i-drag::before {
+    font-family: 'material-icons';
+    content: "\F1D8";
+    color: $formulaire-grey;
+  }
+
+  &.i-duplicate::before {
+    font-family: 'material-icons';
+    content: "\F18F";
+  }
+
+  &.i-validate::before {
+    font-family: 'material-icons';
+    content: "\F12C";
+  }
+
+  &.i-plus-circle::before {
+    font-family: 'material-icons';
+    content: "\F417";
+  }
+
+  &.i-send::before {
+    font-family: 'material-icons';
+    content: "\F0108";
+    color: $formulaire-grey-dark;
+  }
+
+  &.i-share::before {
+    font-family: 'material-icons';
+    content: "\F497";
+    color: $formulaire-grey-dark;
+  }
+
+  &.i-view-cards::before {
+    font-family: 'material-icons';
+    content: "\FE4D";
+    color: $formulaire-grey-light;
+  }
+
+  &.i-view-tab::before {
+    font-family: 'material-icons';
+    content: "\F572";
+    color: $formulaire-grey-light;
+  }
+
+  &.i-undo::before {
+    font-family: 'material-icons';
+    content: "\F54C";
+  }
+
+  &.i-folder::before {
+    font-family: 'material-icons';
+    content: "\F24B";
+    color: $formulaire-blue;
+  }
+
+  &.i-eye::before {
+    font-family: 'material-icons';
+    content: "\F208";
+    color: $formulaire-blue;
+  }
+
+  &.i-eye:hover::before {
+    font-family: 'material-icons';
+    content: "\F208";
+    color: $formulaire-orange;
+  }
+
+  &.i-info::before {
+    font-family: 'material-icons';
+    content: "\F2FD";
+    color: $formulaire-blue;
+  }
+
+  &.i-edit::before {
+    font-family: 'material-icons';
+    content: "\F3EB";
+  }
+}

package/scss/specifics/formulaire/components/_index.scss

@@ -0,0 +1,9 @@
+@import "./dominos";
+@import "./edit-form";
+@import "./folder";
+@import "./icon";
+@import "./loader";
+@import "./new-element";
+@import "./progress-bar";
+@import "./respond-question";
+@import "./result-form";

package/scss/specifics/formulaire/components/_loader.scss

@@ -0,0 +1,55 @@
+$loader-animation-duration: 1.8s;
+
+.loader-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .loader {
+    margin: 50px;
+    transform: translate(-50%, -50%);
+    width: 50px;
+    height: 10px;
+    background: #38a4cd;
+    border-radius: 5px;
+    animation: load $loader-animation-duration ease-in-out infinite;
+
+    &:before, &:after {
+      position: absolute;
+      display: block;
+      content: "";
+      animation: load $loader-animation-duration ease-in-out infinite;
+      height: 10px;
+      border-radius: 5px;
+    }
+
+    &:before {
+      top: -20px;
+      left: 10px;
+      width: 40px;
+      background: grey;
+    }
+
+    &:after {
+      bottom: -20px;
+      width: 35px;
+      background: rgb(3, 32, 48);;
+    }
+  }
+}
+
+@keyframes load {
+  0% {
+    transform: translateX(40px);
+  }
+
+  50% {
+    transform: translateX(-30px);
+  }
+  100% {
+    transform: translateX(40px);
+  }
+}

package/scss/specifics/formulaire/components/_new-element.scss

@@ -0,0 +1,63 @@
+// Question-new
+
+.new-element {
+  .subtitle {
+    font-size: 20px;
+  }
+
+  .section {
+    text-align: center;
+    margin: 4% 5%;
+    padding: 2%;
+    border: 1px solid transparent;
+    box-shadow: 2px 2px 6px 2px darkgrey;
+
+    .subtitle {
+      color: #4bafd5;
+      margin-bottom: 2%;
+    }
+  }
+
+  .question {
+    text-align: center;
+
+    .dominos {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-row-gap: 5%;
+      margin: 2% 10% 7%;
+
+      @media screen and (max-width: $formulaire-screen-mobile) {
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-row-gap: 5%;
+        overflow-y: scroll;
+      }
+
+      .item {
+        width: 110px;
+        height: 110px;
+        margin: auto;
+
+        .domino {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          .data-text {
+            text-align: center;
+            font-size: 14px;
+            padding: 0 10px;
+
+            h5 { margin: 0; }
+          }
+
+          .picture {
+            padding: 10px;
+
+            img { width: 40%; }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/specifics/formulaire/components/_progress-bar.scss

@@ -0,0 +1,57 @@
+// Progress-bar
+
+.progressbar-container {
+  display: flex;
+  justify-content: center;
+
+  .progressbar {
+    display: flex;
+    justify-content: center;
+    margin: 20px 10px;
+    padding: 0;
+  }
+  .progressbar li {
+    list-style-type: none;
+    width: 25%;
+    float: left;
+    position: relative;
+    z-index: 0;
+  }
+  .progressbar li:before {
+    width: 22px;
+    height: 22px;
+    content: '';
+    display: block;
+    margin: 0 auto;
+    border-radius: 50%;
+    background-color: $formulaire-blue-light;
+    @media screen and (max-width: $formulaire-screen-mobile) {
+      width: 11px;
+      height: 11px;
+    }
+  }
+  .progressbar li:after {
+    width: 100%;
+    height: 2px;
+    content: '';
+    position: absolute;
+    background-color: $formulaire-blue-light;
+    top: 10px;
+    left: -50%;
+    @media screen and (max-width: $formulaire-screen-mobile) {
+      top: 5px;
+    }
+  }
+  .progressbar li:first-child:after {
+    content: none;
+  }
+  .progressbar li.active {
+    z-index: 1;
+  }
+  .progressbar li.active:before {
+    background-color: $formulaire-blue;
+  }
+  .progressbar li.active:after {
+    background-color: $formulaire-blue;
+  }
+}