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

package/scss/components/widget/_flash.scss

@@ -1,104 +1,101 @@
 // Array Widget Flash Colors
 $widget-flash-colors: (
-  "red": $red,
-  "orange": $orange,
-  "green": $green,
-  "blue": $blue,
-  "grey-dark": $gray-700,
+    "red": $red,
+    "orange": $orange,
+    "green": $green,
+    "blue": $blue,
+    "grey-dark": $gray-700
 );
 
 .widget-flash {
-  position: relative;
-  padding: $widget-padding-x;
-  overflow: hidden;
-  color: $white;
-  background: $secondary;
+    position: relative;
+    padding: $widget-padding-x;
+    overflow: hidden;
+    color: var(--bs-white);
+    background: $primary;
 
-  @each $key, $value in $widget-flash-colors {
-    &.#{$key} {
-      --custom-message-color: #{$value};
-      background-color: $value;
-    }
-  }
-
-  .btn {
-    &-close {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      color: var(--ode-dark);
-      text-shadow: none;
+    @each $key, $value in $widget-flash-colors {
+        &.#{$key} {
+            --custom-message-color: #{$value};
+            background-color: $value;
+        }
     }
 
-    &-expand {
-      cursor: pointer;
-
-      &-inner {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        padding: 5px;
-        font-size: 0.8em;
-        color: $white;
-        text-align: center;
-        background: rgba(#000, 0.1);
-
-        @include background-color-to(rgba(#000, 0.2));
-      }
+    .btn {
+        &-close {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: var(--bs-dark);
+            text-shadow: none;
+        }
+    
+        &-expand {
+            cursor: pointer;
+    
+            &-inner {
+                position: absolute;
+                z-index: 2;
+                bottom: 0;
+                left: 0;
+                display: block;
+                width: 100%;
+                padding: 5px;
+                font-size: 0.8em;
+                color: var(--bs-white);
+                text-align: center;
+                background: rgba(#000, 0.1);
+    
+                @include background-color-to(rgba(#000, 0.2));
+            }
+        }
     }
-  }
 
-  .flash-content {
-    padding-right: 1rem;
+    .flash-content {
+        padding-right: 1rem;
 
-    p {
-      > br:first-child {
-        display: none;
-      }
-    }
-
-    &.can-be-truncated {
-      &:not(.flash-content-is-expandable) {
         p {
-          @include has-text-truncated(4);
+            > br:first-child {
+                display: none;
+            }
         }
 
-        &::after {
-          content: "";
-          position: absolute;
-          z-index: 1;
-          bottom: 2em;
-          right: 0;
-          left: 0;
-          height: 4em;
-          background: linear-gradient(
-            to bottom,
-            rgba(255, 255, 255, 0),
-            var(--custom-message-color)
-          );
-        }
+        &.can-be-truncated {
+            &:not(.flash-content-is-expandable) {
+            
+                p {
+                    @include has-text-truncated(4);
+                }
+    
+                &::after {
+                    content: "";
+                    position: absolute;
+                    z-index: 1;
+                    bottom: 2em;
+                    right: 0;
+                    left: 0;
+                    height: 4em;
+                    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--custom-message-color));
+                }
+    
+                @media not all and (min-resolution:.001dpcm) {
+                    &::after {
+                        display: none;
+                    }
+                }
+    
+                .flash-content-signature {
+                    display: none;
+                }
+            }
 
-        @media not all and (min-resolution: 0.001dpcm) {
-          &::after {
-            display: none;
-          }
+            .flash-content-signature {
+                padding-bottom: 1rem;
+            }
         }
 
-        .flash-content-signature {
-          display: none;
+        > *:last-child {
+            margin-bottom: 0;
         }
-      }
-
-      .flash-content-signature {
-        padding-bottom: 1rem;
-      }
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
     }
-  }
 }

package/scss/components/widget/_news.scss

@@ -1,35 +1,35 @@
 .widget-news {
-  //Widget Actualités
+    //Widget Actualités
 
-  .news-row {
-    @include background-color-to($gray-300, 0.4s, $easeOutQuad);
+    .news-row {
+        @include background-color-to($gray-100, 0.4s, $easeOutQuad);
 
-    display: flex;
-    align-items: center;
-    padding: 1rem $widget-padding-x;
-    text-decoration: none;
+        display: flex;
+        align-items: center;
+        padding: 1rem $widget-padding-x;
+        text-decoration: none;
 
-    &-image {
-      width: 60px;
-      padding-right: 2.5rem;
-      text-align: center;
-      transition: transform 0.4s $easeInOutQuad;
-      transform-origin: center;
+        &-image {
+            width: 60px;
+            padding-right: 2.5rem;
+            text-align: center;
+            transition: transform 0.4s $easeInOutQuad;
+            transform-origin: center;
 
-      img {
-        max-height: 4rem;
-        max-width: 4rem;
-      }
-    }
+            img {
+                max-height: 4rem;
+                max-width: 4rem;
+            }
+        }
 
-    &-text {
-      line-height: 1.4em;
-    }
+        &-text {
+            line-height: 1.4em;
+        }
 
-    &:hover {
-      .news-row-image {
-        transform: translateX(5px);
-      }
+        &:hover {
+            .news-row-image {
+                transform: translateX(5px);
+            }
+        }
     }
-  }
 }

package/scss/components/widget/_recently-viewed.scss

@@ -1,65 +1,65 @@
 $recently-viewed-image-width: 35;
 
 .widget-recently-viewed {
-  //Widget Consultations récentes
+    //Widget Consultations récentes
 
-  .recently-viewed {
-    &-item {
-      @include background-color-to($gray-300, 0.4s, $easeOutQuad);
+    .recently-viewed {
+        &-item {
+            @include background-color-to($gray-100, 0.4s, $easeOutQuad);
 
-      &:hover {
-        .icon-app {
-          background-color: $gray-300;
-          transform: translateX(60%);
+            &:hover {
+                .icon-app {
+                    background-color: $gray-100;
+                    transform: translateX(60%);
+                }
+            }
         }
-      }
     }
-  }
 
-  .link-card {
-    @include decoration-to(none);
+    .link-card {
+        @include decoration-to(none);
 
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-left: $widget-padding-x;
-    border-top: 1px solid $gray-300;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-left: $widget-padding-x;
+        border-top: 1px solid $gray-100;
 
-    .text {
-      width: 100 - $recently-viewed-image-width * 1%;
-      padding-right: 0.5em;
-    }
+        .text {
+            width: 100 - $recently-viewed-image-width * 1%;
+            padding-right: 0.5em;
+        }
 
-    .image {
-      @include add-overlay(0.2);
+        .image {
+            @include add-overlay(0.2);
 
-      width: $recently-viewed-image-width * 1%;
-      height: 5em;
-      max-height: 120px;
+            width: $recently-viewed-image-width * 1%;
+            height: 5em;
+            max-height: 120px;
 
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center center;
-      }
-    }
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                object-position: center center;
+            }
+        }
 
-    .icon-app {
-      @include have-child-in-middle();
-      @include add-transitions(background-color, transform);
+        .icon-app {
+            @include have-child-in-middle();
+            @include add-transitions(background-color, transform);
 
-      position: absolute;
-      right: $recently-viewed-image-width * 1%;
-      z-index: 2;
-      width: 2em;
-      height: 2em;
-      font-size: 1.75em;
-      background-color: $white;
-      border-radius: 190px;
-      transition-timing-function: $easeOutQuad;
-      transform: translateX(50%);
+            position: absolute;
+            right: $recently-viewed-image-width * 1%;
+            z-index: 2;
+            width: 2em;
+            height: 2em;
+            font-size: 1.75em;
+            background-color: #fff;
+            border-radius: 190px;
+            transition-timing-function: $easeOutQuad;
+            transform: translateX(50%);
+        }
     }
-  }
 }

package/scss/components/widget/_record.scss

@@ -1,64 +1,68 @@
 .widget-record {
-  .widget-body {
-    display: flex;
-    align-items: center;
+    .widget-body {
+        display: flex;
+        align-items: center;
 
-    > * {
-      // flex: 1;
-      padding: 1.6rem;
-      text-align: center;
+        >* {
+            // flex: 1;
+            padding: 1.6rem;
+            text-align: center;
 
-      .img-fluid {
-        width: 100px;
-      }
+            .img-fluid {
+                width: 100px;
+            }
+        }
     }
-  }
 
-  .form-control,
-  .form-select {
-    padding: 12px 16px;
-    border: 1px solid #e4e4e4;
-    border-radius: 8px;
-  }
+    .form-control,
+    .form-select {
+        padding: 12px 16px;
+        border: 1px solid #E4E4E4;
+        border-radius: 8px;
+    }
 }
 
 .record {
-  &-timer {
-    font-size: 2.2rem;
-  }
+    &-timer {
+        font-size: 2.2rem;
+    }
 
-  &-widget-player {
-    margin: 1.6rem 2.4rem;
-    min-height: 150px;
-    border-radius: 4px;
-    background-color: #d9d9d9;
+    &-widget-player {
+        margin: 1.6rem 2.4rem;
+        min-height: 150px;
+        border-radius: 4px;
+        background-color: #D9D9D9;
 
-    > video {
-      display: block;
+        > video {
+            display: block;
+        }
     }
-  }
 
-  &-controls {
-    display: flex;
-    justify-content: space-around;
-    margin-block: 1.5em;
+    &-widget-message {
+        margin: -3.2rem 0 0 0;
+    }
 
-    .btn-circle {
-      font-size: 1.6rem;
+    &-controls {
+        display: flex;
+        justify-content: space-around;
+        margin-block: 1.5em;
 
-      &:hover {
-        color: $white;
-      }
+        .btn-circle {
+            font-size: 1.6rem;
 
-      &:disabled {
-        opacity: 1;
-        background-color: #e4e4e4 !important;
-        border-color: transparent;
-      }
+            &:hover {
+                color: $white;
+            }
 
-      &.btn-danger {
-        background-color: $red;
-      }
+            &:disabled {
+                opacity: 1;
+                background-color: #E4E4E4 !important;
+                border-color: transparent;
+            }
+
+            &.btn-danger {
+                background-color: $red;
+            }
+        }
     }
-  }
-}
+}

package/scss/components/widget/_rss.scss

@@ -1,33 +1,33 @@
 //Widget RSS
 .widget-rss {
-  .rss-feed {
-    .feed-title {
-      padding: 8px $widget-padding-x;
-      font-weight: 700;
-      color: $white;
-      background: $secondary;
+    .rss-feed {
+        .feed-title {
+            padding: 8px $widget-padding-x;
+            font-weight: 700;
+            color: #fff;
+            background: $third;
 
-      @include append-icon("\f0d7", 1em, 15px);
-      cursor: pointer;
-    }
+            @include append-icon("\f0d7", 1em, 15px);
+            cursor: pointer;
+        }
 
-    .item {
-      &:nth-child(2n) {
-        background: rgba($secondary, 0.07);
-      }
+        .item {
+            &:nth-child(2n) {
+                background: rgba($third, 0.07);
+            }
 
-      a {
-        display: block;
-        padding: 10px $widget-padding-x;
-        text-decoration: none;
+            a {
+                display: block;
+                padding: 10px $widget-padding-x;
+                text-decoration: none;
 
-        @include background-color-to($gray-300, 0.4s, $easeOutQuad);
-      }
+                @include background-color-to($gray-100, 0.4s, $easeOutQuad);
+            }
 
-      img {
-        max-width: 100%;
-        height: auto;
-      }
+            img {
+                max-width: 100%;
+                height: auto;
+            }
+        }
     }
-  }
 }