ode-bootstrap 1.3.8-develop-mozo.202408131442 → 1.3.8-develop-mozo.202409191013

package/dist/version.txt

@@ -1 +1 @@
-ode-bootstrap 13/08/2024 14:42:25
+ode-bootstrap 19/09/2024 10:13:39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-bootstrap",
-  "version": "1.3.8-develop-mozo.202408131442",
+  "version": "1.3.8-develop-mozo.202409191013",
   "description": "Open Digital Education CSS framework based on bootstrap",
   "repository": {
     "type": "git",

package/scss/components/widget/_flash.scss

@@ -39,6 +39,12 @@ $widget-flash-colors: (
   margin: 32px 4px 36px 0;
   left: 4px;
   bottom: 4px;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 12px;
+  grid-row-gap: 12px;
+
   &:last-child {
     margin-bottom: 28px;
   }
@@ -56,19 +62,6 @@ $widget-flash-colors: (
         border-color: map.get($value, "shadow");
         box-shadow: 0 0 0 4px map.get($value, "background");
       }
-
-      .btn-expand-inner {
-        background-color: map.get($value, "background");
-      }
-
-      .flash-content:not(.flash-content-is-expandable) .btn-expand-inner::before {
-        background: linear-gradient(to right,
-              rgba(map.get($value, "background"), 0),
-              rgba(map.get($value, "background"), 0.5) 30%,
-              rgba(map.get($value, "background"), 0.8) 50%,
-              rgba(map.get($value, "background"), 0.95) 75%,
-              map.get($value, "background") 100%);
-      }
     }
   }
 
@@ -100,6 +93,18 @@ $widget-flash-colors: (
     transform: translateY(-1px);
   }
 
+  .flash-content-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 12px;
+
+    &:not(:has(*)) {
+      display: none;
+    }
+  }
+
   .btn {
     &-close {
       position: absolute;
@@ -131,33 +136,27 @@ $widget-flash-colors: (
     }
 
     &-expand {
+      padding-left: 8px;
+      padding-right: 8px;
+
       cursor: pointer;
+      flex-shrink: 0;
+      margin-left: auto;
+
+      grid-area: 2 / 2 / 3 / 3;
+      align-self: flex-end;
 
       &-inner {
-        position: absolute;
-        z-index: 2;
-        bottom: 24px;
-        right: 18px;
         display: block;
-        padding-right: 16px;
         text-align: center;
         font-weight: bold;
-
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          width: 64px;
-          height: 100%;
-          // background: linear-gradient(to right, rgba($flash-red, 0), rgba($flash-red, 0.5) 30%, rgba($flash-red, 0.8) 50%, rgba($flash-red, 0.95) 75%, $flash-red 100%);
-          left: -64px;
-        }
       }
     }
   }
 
   .flash-content {
     padding-right: 1rem;
+    grid-area: 1 / 1 / 2 / 3;
 
     // Merge multiple <br> into one and delete the first empty line if present
     p, p>div {
@@ -183,7 +182,7 @@ $widget-flash-colors: (
     &.can-be-truncated {
       &:not(.flash-content-is-expandable) {
         p {
-          @include has-text-truncated(4);
+          @include has-text-truncated(2);
           padding-bottom: 0;
         }
 
@@ -192,21 +191,18 @@ $widget-flash-colors: (
             display: none;
           }
         }
-
-        .flash-content-signature {
-          display: none;
-        }
       }
     }
 
-    .flash-content-signature {
-      font-style: italic;
-      margin-top: 22px !important;
-      margin-right: 12em;
-    }
-
     > *:last-child {
       margin-bottom: 0;
     }
   }
+
+  .flash-content-signature {
+    grid-area: 2 / 1 / 3 / 2;
+    font-weight: bold;
+    margin-right: 2em !important;
+    color: $gray-700;
+  }
 }