ode-bootstrap 1.1.4-dev.202306051654 → 1.1.4-feat-produit.202306051650

package/scss/components/_container-advanced.scss

@@ -2,140 +2,140 @@ $breakpoint-up: "lg";
 $breakpoint-down: "lg";
 
 .container-advanced {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
 
-  &-wrapper {
-    display: flex;
-    justify-content: space-between;
-    margin: 20px auto;
+    &-wrapper {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px auto;
 
-    @include media-breakpoint-down($breakpoint-down) {
-      width: 300vw;
-      max-width: unset;
+        @include media-breakpoint-down($breakpoint-down) {
+            width: 300vw;
+            max-width: unset;
 
-      @include add-transitions(transform);
-    }
+            @include add-transitions(transform);
+        }
 
-    @include media-breakpoint-up($breakpoint-up) {
-      padding: 0 2rem;
-      max-width: 1700px;
-      gap: 4rem;
+        @include media-breakpoint-up($breakpoint-up) {
+            padding: 0 2rem;
+            max-width: 1700px;
+            gap: 4rem;
+        }
     }
-  }
 
-  &-left,
-  &-center,
-  &-right {
-    flex: 1;
+    &-left,
+    &-center,
+    &-right {
+        flex: 1;
 
-    @include media-breakpoint-down($breakpoint-down) {
-      margin: 2rem;
+        @include media-breakpoint-down($breakpoint-down) {
+            margin: 2rem;
+        }
     }
-  }
 
-  &-left,
-  &-right {
-    @include media-breakpoint-up($breakpoint-up) {
-      max-width: 25%;
+    &-left,
+    &-right {
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 25%;
+        }
     }
-  }
 
-  &-left {
-    order: 1;
-  }
+    &-left {
+        order: 1;
+    }
 
-  &-center {
-    order: 2;
+    &-center {
+        order: 2;
 
-    @include media-breakpoint-up($breakpoint-up) {
-      max-width: 50%;
-    }
-  }
-
-  &-right {
-    order: 3;
-  }
-
-  @include media-breakpoint-down($breakpoint-down) {
-    &.focus-left {
-      .container-advanced-wrapper {
-        transform: translateX(0);
-      }
-      &.hide {
-        .container-advanced-center > *,
-        .container-advanced-right > * {
-          display: none;
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 50%;
         }
-      }
     }
 
-    &.focus-right {
-      .container-advanced-wrapper {
-        transform: translateX(calc(100 / 3 * 2% * -1));
-      }
-      &.hide {
-        .container-advanced-center > *,
-        .container-advanced-left > * {
-          display: none;
-        }
-      }
+    &-right {
+        order: 3;
     }
 
-    &.focus-center {
-      .container-advanced-wrapper {
-        transform: translateX(calc(100 / 3 * 1% * -1));
-      }
-      &.hide {
-        .container-advanced-left > *,
-        .container-advanced-right > * {
-          display: none;
+    @include media-breakpoint-down($breakpoint-down) {
+        &.focus-left {
+            .container-advanced-wrapper {
+                transform: translateX(0);
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
         }
-      }
-    }
-  }
 
-  &-nav {
-    color: $white;
-    background-color: $secondary;
+        &.focus-right {
+            .container-advanced-wrapper {
+                transform: translateX(calc(100 / 3 * 2% * -1));
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-left > * {
+                    display: none;
+                }
+            }
+        }
 
-    @include media-breakpoint-up($breakpoint-up) {
-      display: none;
+        &.focus-center {
+            .container-advanced-wrapper {
+                transform: translateX(calc(100 / 3 * 1% * -1));
+            }
+            &.hide {
+                .container-advanced-left > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
+        }
     }
 
-    .list-trigger {
-      display: flex;
-      justify-content: space-around;
-      overflow: hidden;
-
-      .trigger {
-        @include add-before-layer() {
-          @include add-transitions(opacity, transform);
-
-          top: 50%;
-          z-index: -1;
-          height: auto;
-          padding-top: 100%;
-          background: $blue-900;
-          border-radius: 50%;
-          opacity: 0;
-          transform: translateY(-50%) scale(1.1);
+    &-nav {
+        color: $white;
+        background-color: $third;
+
+        @include media-breakpoint-up($breakpoint-up) {
+            display: none;
         }
 
-        z-index: 2;
-        flex: 1;
-        align-self: center;
-        padding: 15px;
-        font-size: 1.1rem;
-        text-align: center;
-
-        &.on {
-          &::before {
-            opacity: 1;
-          }
+        .list-trigger {
+            display: flex;
+            justify-content: space-around;
+            overflow: hidden;
+
+            .trigger {
+                @include add-before-layer() {
+                    @include add-transitions(opacity, transform);
+
+                    top: 50%;
+                    z-index: -1;
+                    height: auto;
+                    padding-top: 100%;
+                    background: $cyan;
+                    border-radius: 50%;
+                    opacity: 0;
+                    transform: translateY(-50%) scale(1.1);
+                }
+
+                z-index: 2;
+                flex: 1;
+                align-self: center;
+                padding: 15px;
+                font-size: 1.1rem;
+                text-align: center;
+
+                &.on {
+                    &::before {
+                        opacity: 1;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

package/scss/components/_dragndrop.scss

@@ -1,24 +1,21 @@
 .drag-n-drop {
-  &-item {
-    .draggable {
-    } // élement déplacable
-    .no-draggable {
-    } // élément non déplacable
-  }
-  &-area {
-    .draggable {
-    } // Reçoit le drag
-    .no-draggable {
-    } // Ne peux pas recevoir le drag
-  }
+    &-item {
+        .draggable {} // élement déplacable
+        .no-draggable {} // élément non déplacable
+    }
+    &-area {
+        .draggable {} // Reçoit le drag
+        .no-draggable {} // Ne peux pas recevoir le drag
+    }
 }
 
 .drop-zone {
-  padding: 50px;
-  border: 2px dashed $gray-300;
-  background-color: rgba($gray-300, 0.25);
-  border-radius: $border-radius-lg;
-  @include media-breakpoint-down(md) {
-    padding: 25px;
-  }
+    padding: 50px;
+    border: 2px dashed $gray-300;
+    background-color: rgba($gray-100, 0.25);
+    border-radius: $border-radius-lg;
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
 }
+

package/scss/components/_dropdowns.scss

@@ -0,0 +1,6 @@
+.dropdown-item {
+
+    input[type="checkbox"] {
+        vertical-align: middle;
+    }
+}

package/scss/components/_emptyscreen.scss

@@ -1,12 +1,48 @@
 .emptyscreen {
-  max-width: 512px;
-  text-align: center;
-  margin: 0 auto;
-}
-.emptyscreen-image {
-  max-width: 250px;
-  margin: 0 auto;
-  @include media-breakpoint-down(md) {
-    max-width: 200px;
-  }
-}
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 50px;
+
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
+
+    &-header {
+        color: $gray-800;
+        font-size: 3rem;
+
+        @include media-breakpoint-down(md) {
+            font-size: 2rem;
+        }
+    }
+
+    &-body {
+        color: $gray-700;
+        margin: 15px;
+
+        @include media-breakpoint-down(md) {
+            font-size: 1.4rem;
+        }
+    }
+
+    &-image {
+        max-height: 300px;
+        margin-top: 25px;
+
+        @include media-breakpoint-down(md) {
+            max-height: 200px;
+        }
+
+        &.mini {
+            max-height: 200px;
+
+            @include media-breakpoint-down(md) {
+                max-height: 150px;
+            }
+        }
+    }
+}

package/scss/components/_explorer.scss

@@ -1,36 +1,38 @@
 .explorer {
-  &-header {
-    padding: 15px 15px 0;
-    @include media-breakpoint-down(lg) {
-      padding: 10px 10px 0;
-    }
 
-    h2 {
-      position: relative;
-      margin-bottom: 0;
-      font-size: 2rem;
-      color: $gray-700;
-      color: $gray-700;
-      @include media-breakpoint-down(lg) {
-        font-size: 1.4rem;
-      }
+    &-header {
+        padding: 15px 15px 0;
+        @include media-breakpoint-down(lg) {
+            padding: 10px 10px 0;
+        }
+
+        h2 {
+            position: relative;
+            margin-bottom: 0;
+            font-size: 2rem;
+            color: $gray-700;
+            color: $gray-700;
+            @include media-breakpoint-down(lg) {
+                font-size: 1.4rem;
+            }
 
-      small {
-        font-size: 80%;
-        color: $gray-600;
-      }
+            small {
+                font-size: 80%;
+                color: $gray-600;
+            }
+        }
     }
-  }
 
-  &-view {
-    height: calc(100vh - 210px);
-    padding: 10px;
-    overflow-x: auto;
-    border-top: 1px solid $gray-200;
-    scrollbar-width: thin;
-    scrollbar-color: $gray-500 $gray-200;
-    @include media-breakpoint-down(lg) {
-      height: calc(100vh - 112px);
+    &-view {
+        height: calc(100vh - 210px);
+        padding: 10px;
+        overflow-x: auto;
+        border-top: 1px solid $gray-200;
+        scrollbar-width: thin;
+        scrollbar-color: $gray-500 $gray-200;
+        @include media-breakpoint-down(lg) {
+            height: calc(100vh - 112px);
+        }
     }
-  }
 }
+