ode-bootstrap 1.1.4-dev-produit.202306051650 → 1.1.4-dev-produit.202306051653

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%;
+    @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;
         }
+      }
     }
 
-    &-right {
-        order: 3;
+    &.focus-right {
+      .container-advanced-wrapper {
+        transform: translateX(calc(100 / 3 * 2% * -1));
+      }
+      &.hide {
+        .container-advanced-center > *,
+        .container-advanced-left > * {
+          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;
-                }
-            }
+    &.focus-center {
+      .container-advanced-wrapper {
+        transform: translateX(calc(100 / 3 * 1% * -1));
+      }
+      &.hide {
+        .container-advanced-left > *,
+        .container-advanced-right > * {
+          display: none;
         }
+      }
+    }
+  }
 
-        &.focus-right {
-            .container-advanced-wrapper {
-                transform: translateX(calc(100 / 3 * 2% * -1));
-            }
-            &.hide {
-                .container-advanced-center > *,
-                .container-advanced-left > * {
-                    display: none;
-                }
-            }
-        }
+  &-nav {
+    color: $white;
+    background-color: $secondary;
 
-        &.focus-center {
-            .container-advanced-wrapper {
-                transform: translateX(calc(100 / 3 * 1% * -1));
-            }
-            &.hide {
-                .container-advanced-left > *,
-                .container-advanced-right > * {
-                    display: none;
-                }
-            }
-        }
+    @include media-breakpoint-up($breakpoint-up) {
+      display: none;
     }
 
-    &-nav {
-        color: $white;
-        background-color: $third;
-
-        @include media-breakpoint-up($breakpoint-up) {
-            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);
         }
 
-        .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;
-                    }
-                }
-            }
+        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,21 +1,24 @@
 .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-100, 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-300, 0.25);
+  border-radius: $border-radius-lg;
+  @include media-breakpoint-down(md) {
+    padding: 25px;
+  }
 }
-

package/scss/components/_dropdown.scss

@@ -0,0 +1,82 @@
+.dropdown-item {
+  input[type="checkbox"] {
+    vertical-align: middle;
+  }
+}
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  color: $gray-800;
+  gap: 4px;
+  border-radius: 8px;
+  border: 1px solid $gray-400;
+  padding: 12px 16px;
+  cursor: pointer;
+  background: transparent;
+  @include background-color-to($gray-200);
+
+  &.focus,
+  &:focus {
+    border-color: $gray-600;
+  }
+
+  &.disabled {
+    border-color: $gray-500;
+    background-color: $gray-200;
+    color: $gray-600;
+  }
+
+  &.selected {
+    border-color: $dropdowntrigger-selected-border-color;
+
+    .dropdown-trigger-carret-icon {
+      transform: rotate(0);
+    }
+  }
+
+  &.ghost {
+    border: 0;
+    background-color: transparent;
+    &.focus {
+      border: 1px solid $gray-400;
+      background-color: $gray-200;
+    }
+    &.selected {
+      background-color: $dropdowntrigger-selected-bg-color;
+    }
+  }
+
+  .dropdown-trigger-carret-icon {
+    transition: transform 0.2s $default-easing;
+    transform: rotate(-180deg);
+  }
+
+  .dropdown-trigger-icon {
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  /*size variations*/
+  &.sm {
+    padding: 4px 8px;
+    font-size: 1.4rem;
+    border-radius: $input-border-radius-sm;
+    .dropdown-trigger-icon {
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+  &.md {
+    padding: 8px 12px;
+    border-radius: $input-border-radius;
+  }
+  &.lg {
+    padding: 12px 16px;
+    border-radius: $input-border-radius-lg;
+  }
+}

package/scss/components/_emptyscreen.scss

@@ -1,48 +1,12 @@
 .emptyscreen {
-    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;
-            }
-        }
-    }
-}
+  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;
+  }
+}

package/scss/components/_explorer.scss

@@ -1,38 +1,36 @@
 .explorer {
+  &-header {
+    padding: 15px 15px 0;
+    @include media-breakpoint-down(lg) {
+      padding: 10px 10px 0;
+    }
 
-    &-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;
-            }
+    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);
     }
+  }
 }
-