davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Merge pull request #105 from Andreymazepas/main

Browse Source 
Adding Status Bar
This commit is contained in:
Juan Garay
2021-04-07 15:01:33 -03:00
committed by GitHub
parent fa4d637525 b659e4a991
commit b7c9fa5e7d
2 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/index.html.ejs
View File

@@ -37,6 +37,7 @@
<ul>
<li><a href="#title-bar">Title Bar</a></li>
<li><a href="#window-contents">Window contents</a></li>
<li><a href="#status-bar">Status Bar</a></li>
</ul>
</li>
<li><a href="#tree-view">TreeView</a></li>
@@ -648,6 +649,48 @@
</div>
</section>
<section class="component">
<h4 id="status-bar">Status Bar</h4>
<div>
<blockquote>
A status bar is a special area within a window, typically the bottom, that displays information
about the current state of what is being viewed in the window or any other contextual information, such as keyboard
state.
<footer>
&mdash; Microsoft Windows User Experience p. 146
</footer>
</blockquote>
<p>
You can render a status bar with the <code>status-bar</code> class,
and <code>status-bar-field</code> for every child text element.
</p>
<%- example(`
<div class="window" style="width: 320px">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
`) %>
</section>
<section class="component">
<h3 id="tree-view">TreeView</h3>
<div>

14
style.css
View File

@@ -259,6 +259,20 @@ button:disabled,
background-position: top 3px left 4px;
}
.status-bar {
margin: 0px 1px;
display: flex;
gap: 1px;
}
.status-bar-field {
box-shadow: inset -1px -1px #dfdfdf,
inset 1px 1px #808080;
flex-grow: 1;
padding: 2px 3px;
margin: 0;
}
.window-body {
margin: var(--element-spacing);
}