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

package/scss/components/_table-lists.scss

@@ -1,137 +1,140 @@
 .table-list {
-  &-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 5px 15px;
-    font-size: 1.4rem;
-    font-weight: bold;
-    color: $gray-600;
-
-    @include media-breakpoint-down(sm) {
-      display: none;
-    }
-
-    .table-list-item-preview {
-      width: 40px;
-    }
-  }
-
-  &-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 15px;
-    margin: 5px 0;
-    font-size: 1.4rem;
-    color: $gray-600;
-    cursor: pointer;
-    border: 1px solid $gray-200;
-    border-radius: $border-radius-lg;
-
-    @extend .transition-hover;
-
-    &:hover {
-      border-color: $secondary;
-
-      @extend .transition-hover-fast;
-    }
 
-    &:active,
-    &.active {
-      background-color: rgba($secondary, 0.1);
-      border-color: $secondary;
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 15px;
+        font-size: 1.4rem;
+        font-weight: bold;
+        color: $gray-600;
+        
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+
+        .table-list-item-preview {
+            width: 40px;
+        }
     }
 
-    @include media-breakpoint-down(sm) {
-      flex-wrap: wrap;
-      padding: 10px;
-      margin: 10px 0;
-      border-color: $gray-300;
+    &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 15px;
+        margin: 5px 0;
+        font-size: 1.4rem;
+        color: $gray-600;
+        cursor: pointer;
+        border: 1px solid $gray-200;
+        border-radius: $border-radius-lg;
+
+        @extend .transition-hover;
+
+        &:hover {
+            border-color: $secondary;
+
+            @extend .transition-hover-fast;
+        }
+        
+        &:active,
+        &.active {
+            background-color: rgba($secondary, 0.1);
+            border-color: $secondary;
+        }
+
+        @include media-breakpoint-down(sm) {
+            flex-wrap: wrap;
+            padding: 10px;
+            margin: 10px 0;
+            border-color: $gray-300;
+        }
+
+        .table-list-item-preview {
+            width: 40px;
+            font-size: 1.6rem;
+            text-align: center;
+            vertical-align: middle;
+            @include media-breakpoint-down(sm) {
+                width: 30px;
+            }
+        }
+
+        .table-list-title {
+            margin: 0;
+            overflow: hidden;
+            font-size: 1.6rem;
+            font-weight: bold;
+            color: $gray-700;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .table-list-image {
+            width: 30px;
+            height: 30px;
+            margin-right: 5px;
+            border-radius: $border-radius;
+        }
+
+        .table-list-status {
+            padding-right: 10px;
+            font-size: 1.6rem;
+            text-align: right;
+
+            > * {
+                margin: 0 5px;
+            }
+        }
+
+        .table-list-modifiedBy {
+            font-size: 1.2rem;
+            @include media-breakpoint-down(sm) {
+                display: none;
+            }
+        }
     }
 
-    .table-list-item-preview {
-      width: 40px;
-      font-size: 1.6rem;
-      text-align: center;
-      vertical-align: middle;
-      @include media-breakpoint-down(sm) {
-        width: 30px;
-      }
+    &-title {
+        width: calc(100% - 450px);
+        @include media-breakpoint-down(sm) {
+            width: calc(100% - 40px); // 100% - .list-item-preview
+        }
     }
 
-    .table-list-title {
-      margin: 0;
-      overflow: hidden;
-      font-size: 1.6rem;
-      font-weight: bold;
-      color: $gray-700;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    &-status {
+        width: 75px;
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
     }
 
-    .table-list-image {
-      width: 30px;
-      height: 30px;
-      margin-right: 5px;
-      border-radius: $border-radius;
+    &-owner {
+        width: 200px;
+        @include media-breakpoint-down(sm) {
+            width: 55%;
+            .avatar {
+                display: none;
+            }
+        }
     }
 
-    .table-list-status {
-      padding-right: 10px;
-      font-size: 1.6rem;
-      text-align: right;
-
-      > * {
-        margin: 0 5px;
-      }
-    }
-
-    .table-list-modifiedBy {
-      font-size: 1.2rem;
-      @include media-breakpoint-down(sm) {
-        display: none;
-      }
+    &-modification {
+        width: 175px;
+        @include media-breakpoint-down(sm) {
+            width: 45%;
+            text-align: right;
+        }
     }
-  }
-
-  &-title {
-    width: calc(100% - 450px);
-    @include media-breakpoint-down(sm) {
-      width: calc(100% - 40px); // 100% - .list-item-preview
-    }
-  }
+}
 
-  &-status {
-    width: 75px;
-    @include media-breakpoint-down(sm) {
-      display: none;
-    }
-  }
-
-  &-owner {
-    width: 200px;
-    @include media-breakpoint-down(sm) {
-      width: 55%;
-      .avatar {
-        display: none;
-      }
-    }
-  }
+@include media-breakpoint-down(sm) {
 
-  &-modification {
-    width: 175px;
-    @include media-breakpoint-down(sm) {
-      width: 45%;
-      text-align: right;
+    .explorer-view.table-list {
+        padding: 5px;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
     }
-  }
 }
 
-@include media-breakpoint-down(sm) {
-  .explorer-view.table-list {
-    padding: 5px;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-  }
-}

package/scss/components/_tables.scss

@@ -16,4 +16,4 @@
     margin-left: auto;
     display: block;
   }
-}
+}

package/scss/components/_toast.scss

@@ -1,48 +1,45 @@
 $toast-start-color: #f0f9fc;
 $toast-end-color: #dceff7;
 $btn-border-radius: 0;
-$toast-left-border-width: $spacer-8;
 
 .toast {
-  --#{$prefix}toast-border-left-color: #{$gray-800};
+    &-container {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        z-index: 999;
+        padding: 10px;
+        font-size: 2em;
+    }
+    
+    ode-infotip & {
+        background: linear-gradient(to right, $toast-start-color, $toast-end-color);
 
-  --#{$prefix}toast-zindex: 1090;
-  --#{$prefix}toast-padding-x: 1.2rem;
-  --#{$prefix}toast-padding-y: 0.8rem;
-  --#{$prefix}toast-spacing: 1.5rem;
-  --#{$prefix}toast-max-width: 352px;
-  --#{$prefix}toast-font-size: #{$small-font-size};
-  --#{$prefix}toast-color: #{$gray-800};
-  --#{$prefix}toast-bg: #{$white};
-  --#{$prefix}toast-border-width: 1px;
-  --#{$prefix}toast-border-color: var(#{$prefix}border-color-translucent);
-  --#{$prefix}toast-border-radius: #{$spacer-8};
-  --#{$prefix}toast-box-shadow: none;
+        &,
+        > *,
+        > * > * {
+            border: 0;
+            border-radius: 0;
+        }
 
-  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
-  display: flex;
-  align-items: center;
-  max-width: 402px;
-  z-index: 20;
-  background-color: white;
-  background-color: var(--#{$prefix}toast-bg);
-  border-color: var(--#{$prefix}toast-border-color);
-  border-left: $toast-left-border-width solid
-    var(--#{$prefix}toast-border-left-color);
+        .toast-header {
+            padding-bottom: 0;
+            margin-bottom: -1rem;
+            background-color: transparent;
+        }
+        .toast-body {
+            color: $deep-blue;
+        }
 
-  &-body {
-    padding: 0;
-    line-height: 2.2rem;
-  }
-  @include media-breakpoint-up(xs) {
-    --#{$prefix}toast-max-width: 100%;
-  }
-}
+        .btn {
+            border-radius: $btn-border-radius;
 
-@each $state, $key in $support-colors {
-  .toast-#{$state} {
-    --#{$prefix}toast-color: #{map-get($key, "base")};
-    --#{$prefix}toast-border-color: #{map-get($key, "pale")};
-    --#{$prefix}toast-border-left-color: #{map-get($key, "base")};
-  }
-}
+            &-light {
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+        
+    }
+}

package/scss/components/_tree-structure.scss

@@ -0,0 +1,143 @@
+/* VARIABLES */
+$tree-structure-width: 250px;
+
+/* COMPONENT */
+
+/* aside */.tree-structure {
+    width: $tree-structure-width;
+    padding: 15px;
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: $gray-600;
+    background-color: rgba($white, 0.7);
+    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.05);
+
+    &-title {
+        margin-bottom: 20px;
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: $secondary;
+    }
+
+    &-tree {
+        max-height: calc(100vh - 220px);
+        padding-right: 5px;
+        padding-left: 0;
+        margin-left: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: $gray-500 $gray-200;
+
+        ul {
+            padding-left: 10px;
+            margin-left: 0;
+        }
+
+        li {
+            list-style-type: none;
+
+            input[type="checkbox"] {
+                position: absolute;
+                margin: 6px 10px;
+                cursor: pointer;
+                opacity: 0;
+            }
+
+            label {
+                display: block;
+
+                a::before {
+                    margin-right: 5px;
+                    font-family: "FontAwesome";
+                    content: "\f105";
+                }
+            }
+
+            input ~ ul {
+                display: none;
+            }
+
+            input:checked {
+                & ~ ul {
+                    display: block;
+                }
+
+                & ~ label a::before {
+                    content: "\f107";
+                }
+            }
+
+            a {
+                display: block;
+                padding: 7px 15px;
+                margin: 5px 0;
+                line-height: 1.2;
+                color: $gray-600;
+                border-radius: $border-radius;
+
+                @extend .transition-hover-slow;
+
+                &:hover {
+                    color: $secondary;
+                    text-decoration: none;
+                    background-color: rgba($secondary, 0.075);
+
+                    @extend .transition-hover-fast;
+                }
+
+                &.active,
+                &:active {
+                    color: $secondary;
+                    background-color: rgba($secondary, 0.2);
+                }
+            }
+        }
+    }
+}
+
+.tree-structure-left {
+    border-radius: $border-radius 0 0 $border-radius;
+}
+
+.tree-structure-right {
+    border-radius: 0 $border-radius $border-radius 0;
+}
+
+.tree-structure + .main-content {
+    width: calc(100% - #{$tree-structure-width});
+    border-radius: 0 $border-radius $border-radius 0;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
+}
+
+.tree-structure.offcanvas {
+    background-color: rgba($white, 0.95);
+
+    .tree-structure-tree {
+        max-height: calc(100vh - 130px);
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .tree-structure {
+        display: none;
+        width: 400px;
+        background-color: $white;
+    }
+
+    .tree-structure.tree-structure-mobile {
+        display: block;
+    }
+
+    .tree-structure + .main-content {
+        width: 100%;
+        border-radius: $border-radius;
+    }
+}
+
+// tree-structure in modal
+.modal {
+  .tree-structure {
+    padding: 15px 0;
+    box-shadow: none;
+  }
+}

package/scss/components/widget/_applications.scss

@@ -1,49 +1,49 @@
 .widget-applications {
-  //Widget Applications
-
-  .icon-grid {
-    display: flex;
-    flex-wrap: wrap;
-
-    &-item {
-      position: relative;
-      width: 25%;
-      font-size: 3.2em;
-
-      a {
-        @include have-child-in-middle();
-        @include background-color-to(white, 0.8s);
-
-        position: relative;
-        padding-top: 100%;
-        margin: 1px;
-        text-decoration: none;
-        background: $gray-200;
-
-        > i,
-        > img {
-          @include have-child-in-middle();
-          @include square(100%);
-
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
+    //Widget Applications
+
+    .icon-grid {
+        display: flex;
+        flex-wrap: wrap;
+
+        &-item {
+            position: relative;
+            width: 25%;
+            font-size: 3.2em;
+
+            a {
+                @include have-child-in-middle();
+                @include background-color-to(white, 0.8s);
+
+                position: relative;
+                padding-top: 100%;
+                margin: 1px;
+                text-decoration: none;
+                background: $gray-100;
+
+                > i,
+                > img {
+                    @include have-child-in-middle();
+                    @include square(100%);
+
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                > img {
+                    width: 80%;
+                    height: auto;
+                }
+            }
+
+            @include media-breakpoint-between(sm, md) {
+                width: calc(100 / 6 * 1%);
+            }
         }
-
-        > img {
-          width: 50%;
-          height: auto;
-        }
-      }
-
-      @include media-breakpoint-between(sm, md) {
-        width: calc(100 / 6 * 1%);
-      }
     }
-  }
 
-  > .widget-body {
-    max-height: 300px;
-    overflow: auto;
-  }
+    > .widget-body {
+        max-height: 300px;
+        overflow: auto;
+    }
 }