[OGUI-465] Common css blocks (#434)

* [OGUI-465] Add dropup element

* [OGUI-465] Add smaller sidebar class

* [OGUI-465] Tooltip underneath

* [OGUI-465] Docs and Exs for new CSS blocks

* Bump WebUI

Framework/Frontend/css/src/bootstrap.css

@@ -270,6 +270,19 @@ svg.icon { height: 1em; width: 1em; margin-bottom: -0.2em; }
 .dropdown-open > .dropdown-menu { display: block; }
 .dropdown-menu { z-index: 300; box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); display: none; position: absolute; top: calc(100% + 0.1rem); left: 0.1rem; z-index: 1000; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; }
 
+
+/* dropup */
+
+.dropup { position: relative; display: inline-block; }
+.dropup-open>.dropup-menu { display: block; }
+.dropup-menu { box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); display: none; position: absolute; bottom: calc(100% + 0.1rem); left: 0.1rem; z-index: 1000; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: .25rem; }
+
+/* tooltip */
+.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black;}
+.tooltip .tooltiptext {visibility: hidden; width: 118px; background-color: #555; color: #fff; text-align: center; padding: 3px; border-radius: 6px; position: absolute; z-index: 1;}
+.tooltiptext::after {content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent;}
+.tooltip:hover .tooltiptext {visibility: visible;}
+
 /* form */
 
 .form-group { margin-bottom: 1em; }
@@ -289,7 +302,7 @@ label { display: block; margin-bottom: 0.5em; }
 .sidebar .sidebar-content { width: 15em; height: 100%; overflow: hidden; }
 .sidebar-extend { width: 30em; }
 .sidebar-extend .sidebar-content { width: 30em; }
-
+.sidebar-minimal { width: 3.6em; }
 /* Component Notification */
 /* moves to screen to get user attention */
 /* 'display none' in .notification-close allow after animation to click though notification on other content */

Framework/docs/reference/frontend-css.html

@@ -213,6 +213,33 @@ <h2>Buttons</h2>
     </div>
   </p>
 
+  <p>Dropup:<br>
+    <div class="dropup">
+      <button class="btn" onclick="document.querySelector('.dropup').classList.toggle('dropup-open')">
+        <svg fill="currentcolor" viewBox="0 0 8 8" class="icon"><path d="M4 0c-1.105 0-2 1.119-2 2.5s.895 2.5 2 2.5 2-1.119 2-2.5-.895-2.5-2-2.5zm-2.094 5c-1.07.04-1.906.92-1.906 2v1h8v-1c0-1.08-.836-1.96-1.906-2-.54.61-1.284 1-2.094 1-.81 0-1.554-.39-2.094-1z"></path></svg>
+        Samantha Carter
+      </button>
+      <div class="dropup-menu">
+        <a href="#" class="menu-item ">
+          <svg fill="currentcolor" viewBox="0 0 8 8" class="icon"><path d="M4 0c-1.105 0-2 1.119-2 2.5s.895 2.5 2 2.5 2-1.119 2-2.5-.895-2.5-2-2.5zm-2.094 5c-1.07.04-1.906.92-1.906 2v1h8v-1c0-1.08-.836-1.96-1.906-2-.54.61-1.284 1-2.094 1-.81 0-1.554-.39-2.094-1z"></path></svg>
+          <span>Profile</span>
+        </a>
+        <a href="#" class="menu-item">
+          <svg fill="currentcolor" viewBox="0 0 8 8" class="icon"><path d="M3 0v1h4v5h-4v1h5v-7h-5zm-1 2l-2 1.5 2 1.5v-1h4v-1h-4v-1z"></path></svg>
+          <span>Logout</span>
+        </a>
+      </div>
+    </div>
+  </p>
+
+  <p>Tooltip:<br>
+    <div class="tooltip">
+      <label> Hover me for tooltip</label>
+      <span class="tooltiptext">Hooray!</span>
+    </div>
+  </p>
+
+
   <a href="javascipt:;">link to external website</a><br>
 
   <hr />
@@ -685,6 +712,7 @@ <h2>App layout</h2>
               split in half to preview some element at the bottom and have a menu at the top.</p>
             <p class="measure">Sidebar can also grow is more place is needed, use <code>.sidebar-extend</code>
               or just specify the width you want with a style attribute.</p>
+            <p class="measure">Sidebar can also be used in a minimal iconic way if needed, use <code>.sidebar-minimal</code></p>
             <p class="measure">Only flex (<code>.flex-row</code> or <code>.flex-column</code> with <code>.flex-grow</code>)
               and position (<code>.relative</code> and <code>.absolute-fill</code>) are required for most of your needs.</p>
             <p class="measure"><code>.scroll-y</code> should be applied to layouts before content.</p>

Framework/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliceo2/web-ui",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "ALICE O2 Web UX framework",
   "author": "Adam Wegrzynek",
   "license": "GPL-3.0",