Add Style Specs to Toolbar

trimble-oss · Aug 19, 2024 · 52bd962 · 52bd962
1 parent 14239cf
commit 52bd962
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 1 deletion.
diff --git a/content/components/web/toasts/styles.md b/content/components/web/toasts/styles.md
@@ -26,7 +26,6 @@ popoverCSSInspector: true
       aria-live="assertive"
       aria-atomic="true"
       data-bs-toggle="popover"
-      data-bs-x-template="<div class='popover popover-css-inspector bs-popover-left fade show' role='tooltip'><div class='popover-arrow'></div><div class='popover-body'></div></div>"
       data-bs-custom-class="popover-css-inspector"
       data-bs-placement="left"
       data-css-inspector-hide="bg-color height margin max-width padding"

diff --git a/content/components/web/toolbar/styles.md b/content/components/web/toolbar/styles.md
@@ -7,6 +7,8 @@ componentsWeb: true
 images:
   - "/img/components/headers/toolbar.png"
 tags: [styles]
+disableAnatomy: true
+popoverCSSInspector: true
 ---
 
 ## Specifications
@@ -19,6 +21,119 @@ tags: [styles]
 - Icon buttons which are combined together have only outer corners of the toolbar rounded.
 - Toolbar consisting of combined icon buttons can group related controls separated by a divider.
 
+<div class="py-5 bg-secondary bg-opacity-10 mx-auto">
+  <div class="btn-toolbar p-1 shadow-lg mx-auto"
+        data-bs-placement="left"
+        data-bs-toggle="popover"
+        data-bs-custom-class="popover-css-inspector"
+        data-css-inspector-hide="color font-size font-weight height margin padding text-align width"
+        data-css-inspector-show="shadow"
+        data-bs-title="Toolbar">
+    <div class="btn-group border-0" role="group" aria-label="First group">
+      <button
+        type="button"
+        class="btn btn-outline-secondary btn-icon-only border-0 me-1"
+        data-bs-toggle="tooltip"
+        data-bs-placement="bottom"
+        title="Undo"
+        aria-label="Undo">
+        <i class="modus-icons notranslate" aria-hidden="true">undo</i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline-secondary btn-icon-only border-0 me-1"
+        data-bs-toggle="tooltip"
+        data-bs-placement="bottom"
+        title="Redo"
+        aria-label="Redo">
+        <i class="modus-icons notranslate" aria-hidden="true">redo</i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline-secondary btn-icon-only border-0 me-1"
+        data-bs-toggle="tooltip"
+        data-bs-placement="bottom"
+        title="Expand"
+        aria-label="Expand">
+        <i class="modus-icons notranslate" aria-hidden="true">expand</i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline-secondary btn-icon-only border-0 me-1"
+        data-bs-toggle="tooltip"
+        data-bs-placement="bottom"
+        title="Collapse"
+        aria-label="Collapse">
+        <i class="modus-icons notranslate" aria-hidden="true">collapse</i>
+      </button>
+    </div>
+    <div>
+      <div class="vr h-100"></div>
+    </div>
+    <div class="btn-group border-0" role="group" aria-label="Second group">
+      <button
+        type="button"
+        class="btn btn-outline-secondary btn-icon-only border-0 ms-1"
+        data-bs-placement="right"
+        data-bs-toggle="popover"
+        data-bs-custom-class="popover-css-inspector"
+        data-css-inspector-hide="font-size font-weight margin padding text-align"
+        data-css-inspector-show="height width"
+        data-bs-title="Toolbar Button">
+        <i class="modus-icons notranslate" aria-hidden="true">window_dock_undock</i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+.rounded-3 {
+  border-radius: 4px !important;
+}
+
+.btn-toolbar {
+  border-radius: 4px !important;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  padding: .25rem !important;
+  width: fit-content;
+}
+
+.btn-toolbar .btn,
+.btn-toolbar .btn-group {
+  border-radius: 4px !important;
+}
+
+[data-bs-theme="light"] .btn-group .vr {
+  color: #e0e1e9;
+  opacity: 1 !important;
+}
+
+[data-bs-theme="dark"] .btn-group .vr {
+  color: #464b52;
+  opacity: 1 !important;
+}
+
+[data-bs-theme="light"] .btn-toolbar,
+[data-bs-theme="light"] .toolbar.btn-group {
+  background-color: #fff;
+  border-radius: 4px !important;
+}
+
+[data-bs-theme="dark"] .btn-toolbar,
+[data-bs-theme="dark"] .toolbar.btn-group {
+  background-color: #171C1E;
+  border-radius: 4px !important;
+}
+
+[data-bs-theme="light"] .btn-outline-secondary:not(:hover) {
+  background-color: #fff;
+}
+[data-bs-theme="dark"] .btn-outline-secondary:not(:hover) {
+  background-color: #171c1e;
+}
+</style>
+
 ### Behaviors
 
 - All buttons within the toolbar should have the following states: