ode-bootstrap 1.1.4-feat-produit.202306051650 → 1.1.4-feat-explorer.202306051652

package/scss/components/_sticky-toolbox.scss

@@ -1,166 +1,156 @@
 .sticky-toolbox {
-    position: fixed;
-    top: 100px;
-    bottom: 0;
-    right: 0;
-    z-index: 22;
+  position: fixed;
+  top: 100px;
+  bottom: 0;
+  right: 0;
+  z-index: 22;
+  color: $white;
+  transform: translateX(100%);
+
+  @include add-transitions(transform);
+
+  .link-tool {
+    position: absolute;
+    width: 50px;
+    // padding: 5px 10px;
+    padding: 0.5rem 1.3rem;
+    font-size: 1.5em;
     color: $white;
-    transform: translateX(100%);
-
-    @include add-transitions(transform);
+    cursor: pointer;
+    background: $primary;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+    transform: translate(-100%, 0);
+  }
+
+  .sticky-toolbox-content {
+    display: none;
+    overflow: auto;
+    width: 400px;
+    height: 100%;
+    padding: 20px 30px;
+    background: $secondary;
+  }
+
+  .sticky-toolbox-title {
+    margin: 0 0 10px;
+    font-weight: 700;
+
+    &:not(:first-child) {
+      margin-top: 10px;
+    }
+  }
 
-    .link-tool {
-        position: absolute;
-        width: 50px;
-        // padding: 5px 10px;
-        padding: 0.5rem 1.3rem;
-        font-size: 1.5em;
-        color: $white;
-        cursor: pointer;
-        background: $primary;
-        border-top-left-radius: 50%;
-        border-bottom-left-radius: 50%;
-        transform: translate(-100%, 0);
+  .sticky-toolbox-item {
+    display: block;
+    color: $white;
+    text-align: center;
+    text-decoration: none;
+    background: rgba($white, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+
+    &.selected {
+      background: $primary;
     }
 
-    .sticky-toolbox-content {
-        display: none;
-        overflow: auto;
-        width: 400px;
-        height: 100%;
-        padding: 20px 30px;
-        background: $secondary;
+    small {
+      display: inline-block;
+      line-height: 1.6rem;
+      margin-top: 0.5rem;
     }
+  }
 
-    .sticky-toolbox-title {
-        margin: 0 0 10px;
-        font-weight: 700;
+  [class*="buttons-"] {
+    margin-right: -5px;
+    margin-left: -5px;
 
-        &:not(:first-child) {
-            margin-top: 10px;
-        }
+    > .col,
+    > [class*="col-"] {
+      padding-right: 5px;
+      padding-left: 5px;
+      margin-bottom: 10px;
     }
+  }
 
+  .buttons-theme {
     .sticky-toolbox-item {
-        display: block;
-        color: $white;
-        text-align: center;
-        text-decoration: none;
-        background: rgba($white, .10);
-        border-radius: 10px;
-        overflow: hidden;
-
-        // @include background-color-to($primary);
-
-        &.selected {
-            background: $primary;
-
-            /* &:hover {
-                background: rgba($white, .10);
-            } */
-        }
-
-        small {
-            display: inline-block;
-            line-height: 1.6rem;
-            margin-top: 0.5rem;
-        }
+      padding: 20px 10px;
     }
+  }
+
+  .buttons-widget {
+    .sticky-toolbox-item {
+      .inner {
+        position: relative;
+        display: block;
+        padding-top: 100%;
+      }
 
-    [class*="buttons-"] {
-        margin-right: -5px;
-        margin-left: -5px;
+      i {
+        position: absolute;
+        top: 0;
+        font-size: 2em;
+        border-radius: 18px;
 
-        > .col,
-        > [class*="col-"] {
-            padding-right: 5px;
-            padding-left: 5px;
-            margin-bottom: 10px;
-        }
+        @include have-child-in-middle();
+        @include square(100%);
+      }
     }
-
-    .buttons-theme {
-        .sticky-toolbox-item {
-            padding: 20px 10px;
-        }
+  }
+
+  .buttons-countries {
+    padding: 0 0.8rem;
+    gap: 2rem;
+    margin: 0 -1rem;
+    justify-content: center;
+
+    > div {
+      padding: 0 !important;
+      margin-bottom: 0 !important;
+      width: 20%;
     }
+  }
 
-    .buttons-widget {
-        .sticky-toolbox-item {
-            .inner {
-                position: relative;
-                display: block;
-                padding-top: 100%;
-            }
-
-            i {
-                position: absolute;
-                top: 0;
-                font-size: 2em;
-                border-radius: 18px;
-
-                &.big {
-                    font-size: 3em;
-                }
-
-                @include have-child-in-middle();
-                @include square(100%);
-            }
-        }
+  .sticky-toolbox-country {
+    display: block;
+    color: $white;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+
+    .flag {
+      max-width: 70%;
+      height: auto;
+      margin: 0 auto;
+      filter: saturate(0);
+
+      @include add-transitions(filter);
+
+      + div {
+        margin-top: 0.5rem;
+        font-size: 1.2rem;
+      }
     }
 
-    .buttons-countries {
-        padding: 0 0.8rem;
-        gap: 2rem;
-        margin: 0 -1rem;
-        justify-content: center;
-
-        > div {
-            padding: 0 !important;
-            margin-bottom: 0 !important;
-            width: 20%;
-        }
+    &.selected {
+      .flag {
+        filter: saturate(1);
+      }
     }
 
-    .sticky-toolbox-country {
-        display: block;
-        color: $white;
-        text-align: center;
-        text-decoration: none;
-        cursor: pointer;
-
-        .flag {
-            max-width: 70%;
-            height: auto;
-            margin: 0 auto;
-            filter: saturate(0);
-
-            @include add-transitions(filter);
-
-            + div {
-                margin-top: .5rem;
-                font-size: 1.2rem;
-            }
-        }
-
-        &.selected {
-            .flag {
-                filter: saturate(1);
-            }
-        }
-
-        &:hover:not(.selected) {
-            .flag {
-                filter: saturate(0.3);
-            }
-        }
+    &:hover:not(.selected) {
+      .flag {
+        filter: saturate(0.3);
+      }
     }
+  }
 
-    &.open {
-        transform: translateX(0);
+  &.open {
+    transform: translateX(0);
 
-        .sticky-toolbox-content {
-            display: block;
-        }
+    .sticky-toolbox-content {
+      display: block;
     }
+  }
 }

package/scss/components/_table-explorer.scss

@@ -0,0 +1,29 @@
+.table-explorer {
+  width: 100%;
+  border-radius: 8px;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  overflow: hidden;
+  border: 1px solid $table-explorer-main-color;
+
+  tr > * {
+    padding: 10px 12px;
+    font-size: $small-font-size;
+  }
+
+  thead {
+    background-color: $table-explorer-main-color;
+    color: $gray-800;
+
+    .form-check-input {
+      width: 16px;
+      height: 16px;
+      transform: translateY(-1px) translateX(-1px);
+    }
+  }
+
+  tbody > tr:nth-of-type(even) > * {
+    background-color: $gray-200;
+  }
+}

package/scss/components/_table-lists.scss

@@ -1,140 +1,137 @@
 .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;
+    }
 
-    &-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;
-        }
+    .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;
     }
 
-    &-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;
-            }
-        }
+    &:active,
+    &.active {
+      background-color: rgba($secondary, 0.1);
+      border-color: $secondary;
     }
 
-    &-title {
-        width: calc(100% - 450px);
-        @include media-breakpoint-down(sm) {
-            width: calc(100% - 40px); // 100% - .list-item-preview
-        }
+    @include media-breakpoint-down(sm) {
+      flex-wrap: wrap;
+      padding: 10px;
+      margin: 10px 0;
+      border-color: $gray-300;
     }
 
-    &-status {
-        width: 75px;
-        @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;
+      }
     }
 
-    &-owner {
-        width: 200px;
-        @include media-breakpoint-down(sm) {
-            width: 55%;
-            .avatar {
-                display: none;
-            }
-        }
+    .table-list-title {
+      margin: 0;
+      overflow: hidden;
+      font-size: 1.6rem;
+      font-weight: bold;
+      color: $gray-700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    &-modification {
-        width: 175px;
-        @include media-breakpoint-down(sm) {
-            width: 45%;
-            text-align: right;
-        }
+    .table-list-image {
+      width: 30px;
+      height: 30px;
+      margin-right: 5px;
+      border-radius: $border-radius;
     }
-}
 
-@include media-breakpoint-down(sm) {
+    .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;
+      }
+    }
+  }
 
-    .explorer-view.table-list {
-        padding: 5px;
-        border-right-color: transparent;
-        border-bottom-color: transparent;
-        border-left-color: transparent;
+  &-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;
+      }
+    }
+  }
+
+  &-modification {
+    width: 175px;
+    @include media-breakpoint-down(sm) {
+      width: 45%;
+      text-align: right;
+    }
+  }
 }
 
+@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,45 +1,48 @@
 $toast-start-color: #f0f9fc;
 $toast-end-color: #dceff7;
 $btn-border-radius: 0;
+$toast-left-border-width: $spacer-8;
 
 .toast {
-    &-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-border-left-color: #{$gray-800};
 
-        &,
-        > *,
-        > * > * {
-            border: 0;
-            border-radius: 0;
-        }
+  --#{$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;
 
-        .toast-header {
-            padding-bottom: 0;
-            margin-bottom: -1rem;
-            background-color: transparent;
-        }
-        .toast-body {
-            color: $deep-blue;
-        }
+  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);
 
-        .btn {
-            border-radius: $btn-border-radius;
+  &-body {
+    padding: 0;
+    line-height: 2.2rem;
+  }
+  @include media-breakpoint-up(xs) {
+    --#{$prefix}toast-max-width: 100%;
+  }
+}
 
-            &-light {
-                &:hover {
-                    color: $primary;
-                }
-            }
-        }
-        
-    }
-}
+@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")};
+  }
+}