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

package/scss/components/_modal.scss

@@ -1,117 +1,25 @@
-$modal-inner-padding: $spacer-0;
-$modal-content-padding: $spacer-32;
-$modal-header-padding: $spacer-0;
-$modal-footer-padding: $spacer-0;
-$modal-dialog-margin: $spacer-64;
-$modal-title-line-height: 3.2rem;
-$modal-footer-gap: $spacer-8;
-$modal-max-width-md: 648px;
-$modal-max-width-lg: 872px;
-
 .modal {
-  // scss-docs-start modal-css-vars
-  --#{$prefix}modal-zindex: #{$zindex-modal};
-  --#{$prefix}modal-width: #{$modal-md};
-  --#{$prefix}modal-max-width-md: #{$modal-max-width-md};
-  --#{$prefix}modal-max-width-lg: #{$modal-max-width-lg};
-  --#{$prefix}modal-padding: #{$modal-inner-padding};
-  --#{$prefix}modal-margin: #{$modal-dialog-margin};
-  --#{$prefix}modal-color: #{$modal-content-color};
-  --#{$prefix}modal-bg: #{$modal-content-bg};
-  --#{$prefix}modal-border-color: #{$modal-content-border-color};
-  --#{$prefix}modal-border-width: #{$modal-content-border-width};
-  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
-  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
-  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-  --#{$prefix}modal-content-padding: #{$modal-content-padding};
-  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
-  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
-  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
-  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
-  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
-  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
-  --#{$prefix}modal-footer-gap: #{$modal-footer-gap};
-  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
-  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
-  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
-  --#{$prefix}modal-footer-padding: #{$modal-footer-padding};
-  // scss-docs-end modal-css-vars
-
-  .modal-dialog {
-    margin-top: $spacer-32;
-    margin-bottom: $spacer-32;
-
-    @include media-breakpoint-up(md) {
-      margin-top: $spacer-48;
-      margin-bottom: $spacer-48;
-    }
-
-    @include media-breakpoint-up(lg) {
-      margin-top: $spacer-64;
-      margin-bottom: $spacer-64;
-    }
-
-    &.modal-md,
-    &.modal-lg {
-      @include media-breakpoint-up(xs) {
-        max-width: fit-content;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      & > .modal-content {
-        @include media-breakpoint-up(xs) {
-          padding: $spacer-24;
-        }
-        @include media-breakpoint-up(md) {
-          padding: var(--#{$prefix}modal-content-padding);
-        }
-      }
-    }
-
-    &.modal-md {
-      @include media-breakpoint-up(md) {
-        max-width: var(--#{$prefix}modal-max-width-md);
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-
-    &.modal-lg {
-      @include media-breakpoint-up(md) {
-        margin-left: auto;
-        margin-right: auto;
-      }
-      @include media-breakpoint-up(lg) {
-        max-width: var(--#{$prefix}modal-max-width-lg);
-        margin-left: auto;
-        margin-right: auto;
-      }
+    .modal-title {
+        color: $cyan;
+        font-size: 2rem;
     }
+}
 
-    & > .modal-content {
-      padding: var(--#{$prefix}modal-content-padding);
-
-      & > .modal-header {
-        .btn-close {
-          position: absolute;
-          top: 1.9rem;
-          right: 1.9rem;
-          opacity: 1;
-          color: $gray-800;
-        }
-      }
-
-      & > .modal-body {
-        margin: $spacer-32 $spacer-0;
-      }
-
-      & > .modal-footer {
-        gap: var(--#{$prefix}modal-footer-gap);
-
-        & > * {
-          margin: 0;
+// HELP MODAL
+.modal {
+    &-help {
+        .modal-footer {
+            display: none;
         }
-      }
     }
-  }
 }
+// @include media-breakpoint-down(lg) {
+//   .modal-dialog {
+//     max-width: calc(100% - 3.5rem);
+//   }
+// }
+// @include media-breakpoint-down(lg) {
+//   .modal-dialog {
+//     max-width: calc(100% - 1rem);
+//   }
+// }

package/scss/components/_popover.scss

@@ -1,62 +1,102 @@
-.popover {
-  --#{$prefix}popover-border-color: #{$gray-200};
-  --#{$prefix}popover-body-padding-x: #{$spacer-12};
-  --#{$prefix}popover-body-padding-y: #{$spacer-8};
-  --#{$prefix}popover-max-width: 250px;
-  --#{$prefix}popover-footer-color: #{$body-color};
-  --#{$prefix}popover-header-bg: transparent;
-  --#{$prefix}popover-header-color: #{$body-color};
-
-  display: none;
-  opacity: 0;
-  width: var(--#{$prefix}popover-max-width);
-
-  &::before {
-    content: "▲";
-    position: absolute;
-    top: -2rem;
-    left: 50%;
-    z-index: 0;
-    display: block;
-    width: 2rem;
-    font-family: none;
-    font-size: 2rem;
-    color: $white;
-    transform: translateX(-50%);
-  }
-
-  &::after {
-    display: none;
-  }
-
-  &-footer {
-    color: var(--ode-popover-footer-color);
-  }
-
-  &-trigger {
-    &:hover {
-      .popover {
-        display: block;
-        opacity: 1;
-      }
+popover {
+    position: relative;
+    z-index: 100;
+    display: inline-block;
+
+    popover-content.hidden {
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    popover-content {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        width: 250px;
+        text-align: center;
+        background: $white;
+        border: 1px solid $gray-300;
+        border-radius: 2px;
+        box-shadow: 0 .1rem 2rem rgba(0, 0, 0, .1);
+        transform: translate(-50%, 4%);
+
+        &::before {
+            content: "\25b2";
+            position: absolute;
+            top: -2rem;
+            left: 50%;
+            z-index: 0;
+            display: block;
+            width: 40px;
+            font-family: none;
+            font-size: 2rem;
+            color: $white;
+            transform: translateX(-50%);
+        }
+
+        .widget-applications {
+            .widget-body {
+                padding: 1.5rem;
+                max-height: 22rem;
+                overflow: auto;
+            }
+
+            .widget-footer-action & {
+                color: $gray-600;
+            }
+        }
+
+        .bookmarked-app {
+            padding: .5rem;
+            flex: 0 1 33.33%;
+            width: 70px;
+            height: 70px;
+            text-align: center;
+            border: 1px solid transparent;
+            border-radius: $border-radius;
+
+            @include add-transitions(border-color) {
+                border-color: $gray-200;
+            };
+
+            > a {
+                @include square(100%);
+                @include have-child-in-middle();
+            }
+
+            .application {
+                font-size: 3rem;
+            }
+
+            img {
+                max-width: 80%;
+            }
+        }
+
+        .search-text {
+            justify-content: center;
+            
+            .searchInput {
+                height: 30px;
+                margin: 1rem -0.2rem 1rem 0;
+                width: 70%;
+                border: 1px solid $gray-200;
+            }
+            .searchButton {
+                @extend .btn-primary;
+                width: 30px;
+                height: 30px;
+                padding: 0;
+                margin-top: 1rem;
+                line-height: 30px;
+                font-weight: 700;
+                text-transform: uppercase;
+                text-align: center;
+                border: none;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                box-shadow: none;
+            }
+        }
     }
-  }
-}
-
-.bookmarked-app {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: $spacer-16;
-  flex: 0 1 33.33%;
-  height: 33.33%;
-  aspect-ratio: 1 / 1;
-  font-size: 3rem;
-  text-align: center;
-  border: 1px solid transparent;
-  border-radius: $border-radius;
-
-  @include add-transitions(border-color) {
-    border-color: $gray-300;
-  }
-}
+}

package/scss/components/_sticky-toolbox.scss

@@ -1,156 +1,166 @@
 .sticky-toolbox {
-  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;
+    position: fixed;
+    top: 100px;
+    bottom: 0;
+    right: 0;
+    z-index: 22;
     color: $white;
-    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;
-    }
-  }
+    transform: translateX(100%);
 
-  .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;
-    }
+    @include add-transitions(transform);
 
-    small {
-      display: inline-block;
-      line-height: 1.6rem;
-      margin-top: 0.5rem;
+    .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);
     }
-  }
 
-  [class*="buttons-"] {
-    margin-right: -5px;
-    margin-left: -5px;
-
-    > .col,
-    > [class*="col-"] {
-      padding-right: 5px;
-      padding-left: 5px;
-      margin-bottom: 10px;
+    .sticky-toolbox-content {
+        display: none;
+        overflow: auto;
+        width: 400px;
+        height: 100%;
+        padding: 20px 30px;
+        background: $secondary;
     }
-  }
 
-  .buttons-theme {
-    .sticky-toolbox-item {
-      padding: 20px 10px;
+    .sticky-toolbox-title {
+        margin: 0 0 10px;
+        font-weight: 700;
+
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
     }
-  }
 
-  .buttons-widget {
     .sticky-toolbox-item {
-      .inner {
-        position: relative;
         display: block;
-        padding-top: 100%;
-      }
+        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;
+        }
+    }
 
-      i {
-        position: absolute;
-        top: 0;
-        font-size: 2em;
-        border-radius: 18px;
+    [class*="buttons-"] {
+        margin-right: -5px;
+        margin-left: -5px;
 
-        @include have-child-in-middle();
-        @include square(100%);
-      }
+        > .col,
+        > [class*="col-"] {
+            padding-right: 5px;
+            padding-left: 5px;
+            margin-bottom: 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-theme {
+        .sticky-toolbox-item {
+            padding: 20px 10px;
+        }
     }
-  }
 
-  .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-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%);
+            }
+        }
     }
 
-    &.selected {
-      .flag {
-        filter: saturate(1);
-      }
+    .buttons-countries {
+        padding: 0 0.8rem;
+        gap: 2rem;
+        margin: 0 -1rem;
+        justify-content: center;
+
+        > div {
+            padding: 0 !important;
+            margin-bottom: 0 !important;
+            width: 20%;
+        }
     }
 
-    &:hover:not(.selected) {
-      .flag {
-        filter: saturate(0.3);
-      }
+    .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);
+            }
+        }
     }
-  }
 
-  &.open {
-    transform: translateX(0);
+    &.open {
+        transform: translateX(0);
 
-    .sticky-toolbox-content {
-      display: block;
+        .sticky-toolbox-content {
+            display: block;
+        }
     }
-  }
 }