feat(toasts): Orange branded 🎉

Orange-OpenSource · May 14, 2020 · 8f073ff · 8f073ff
1 parent 34ddf32
commit 8f073ff
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/site/content/docs/4.3/components/toasts.md b/site/content/docs/4.3/components/toasts.md
@@ -31,7 +31,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 {{< example class="bg-light" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+    {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
     <strong class="mr-auto">Boosted</strong>
     <small>11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -51,9 +51,9 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
 {{< example class="bg-dark" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+    {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
     <strong class="mr-auto">Boosted</strong>
-    <small class="text-muted">11 mins ago</small>
+    <small>11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
@@ -71,9 +71,9 @@ When you have multiple toasts, we default to vertically stacking them in a reada
 {{< example class="bg-light" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+    {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
     <strong class="mr-auto">Boosted</strong>
-    <small class="text-muted">just now</small>
+    <small>just now</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
@@ -85,9 +85,9 @@ When you have multiple toasts, we default to vertically stacking them in a reada
 
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
-    {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+    {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
     <strong class="mr-auto">Boosted</strong>
-    <small class="text-muted">2 seconds ago</small>
+    <small>2 seconds ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
@@ -106,7 +106,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
   <div class="toast" style="position: absolute; top: 0; right: 0;">
     <div class="toast-header">
-      {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+      {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
       <strong class="mr-auto">Boosted</strong>
       <small>11 mins ago</small>
       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -130,9 +130,9 @@ For systems that generate more notifications, consider using a wrapping element
     <!-- Then put toasts within -->
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="toast-header">
-        {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+        {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
         <strong class="mr-auto">Boosted</strong>
-        <small class="text-muted">just now</small>
+        <small>just now</small>
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -144,9 +144,9 @@ For systems that generate more notifications, consider using a wrapping element
 
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="toast-header">
-        {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+        {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
         <strong class="mr-auto">Boosted</strong>
-        <small class="text-muted">2 seconds ago</small>
+        <small>2 seconds ago</small>
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -168,7 +168,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
   <!-- Then put toasts within -->
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
-      {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+      {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
       <strong class="mr-auto">Boosted</strong>
       <small>11 mins ago</small>
       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
@@ -203,7 +203,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
 {{< example class="bg-light" >}}
 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
   <div class="toast-header">
-    {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
+    {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text="false" title="false" >}}
     <strong class="mr-auto">Boosted</strong>
     <small>11 mins ago</small>
     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">