/*
AUTHOR: Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration.
DATE: 10/20/2015.
DESCRIPTION: CSS classes for SBA "Button Bar".
NOTES: This file contains all styles used by the cf_buttonbar custom tag. Changed the icons to
classes instead of ids, because the icons themselves no longer use absolute positioning. But
the menus still use absolute positioning, so to make that obvious, keeping them as ids.
INPUT: None.
OUTPUT: CSS classes for SBA "Button Bar".
REVISION HISTORY: 05/28/2021, SMJ: OPSMDEV-2586: Modified phone/mail icon to be more consistent.
05/06/2016, SRS&SL: OPSMDEV-909: When a div.icon is *NOT* a menu control, allowed it be an
a.icon instead. (Just added some selectors to existing classes.) Without
this change, we have to fudge div.icon into behaving like a hotlink with
onclick handlers. For accessibility reasons (screen readers for the blind
recognizing its behavior), it's much better for a hotlink to actually be a
hotlink. (SRS) Designed layout of combined phone and email icons. (SL)
Added new selectors to allow combined icons. (FontAwesome character names
moved from div/a tags to spans.) Eliminated conflicts with body.th6. (SRS)
02/18/2016, SMJ: Changes for small screens.
01/07/2016, SRS: Added support for "stateful menus" (menus controlled by hidden checkboxes).
12/01/2015, SRS: Added th1 as an override of default, now called Home Page Theme.
10/28/2015, SRS: Converted to using FontAwesome instead of image files. Got rid of id-based
markup, which makes sense in the context of SBA Look-and-Feel, but forces
a bunch of !important overrides when used in the new Home page. Eliminated
all JavaScript except for show/hide, which jQuery handles better than CSS.
10/20/2015, SRS: Original implementation. Cannibalized existing sbalookandfeel.strict.css.
*/
/* ************************************************************************************************** */
/* Selectors include tag names to speed up rendering. Browsers have native elt.getElementsByTagName() nowadays. */
div.buttonbar
{
border: none;
display: inline-block;
margin: none;
padding: none;
position: absolute;
white-space: nowrap;
}
div.buttonbar.left
{
top: 3px;
right: auto;
bottom: auto;
left: 3px;
}
div.buttonbar:not(.left)/* Nominally, in the HTML, we'll say class="buttonbar right", but :not(.left) effectively makes .right the default. */
{
top: 3px;
right: 3px;
bottom: auto;
left: auto;
}
/* ************************************************************************************************** */
/* Under div.buttonbar, the first div down is div.icon, and some div.icons are in labels. */
div.buttonbar div.icon.spacer
{
background: transparent;
border: none;
cursor: auto;
display: inline-block;
height: 24px;
margin: 0px;
position: static;
width: 2px;
}
div.buttonbar div.icon:not(.spacer),
div.buttonbar a.icon:not(.spacer)
{
border: none;
color: #69c;
cursor: pointer;
display: inline-block;
height: 24px;
margin: 0px;
overflow: visible;
width: 24px;
}
div.buttonbar a.icon:not(.spacer)
{
text-decoration: none; /* That is, no underline for sighted users. */
}
/*Fix for buttonbar on small screens - SMJ*/
@media screen and (min-width: 1024px)
{
div.buttonbar div.icon:not(.spacer),
div.buttonbar a.icon:not(.spacer)
{
position: relative; /* Establishes icon as menu's offset parent ... */
top: 0px; /* ... but without moving it at all. */
left: 0px; /* ... but without moving it at all. */
}
}
body:not(.th6) div.buttonbar div.icon:not(.spacer) span.icon,
body:not(.th6) div.buttonbar a.icon:not(.spacer) span.icon
{
/* From .fa: */
font: normal normal normal 14px/1 FontAwesome;
font-size: 24px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div.buttonbar input.menu /* (checkbox) */
{
/* For some reason, **NONE** of this prevents Flash Of Unstyled Content (FOUC). Using style="display:none;" in the HTML instead. */
display: none;
position: absolute;
left: -9999px;
}
div.buttonbar label.menu
{
border: none;
display: inline-block;
margin: 0px;
padding: 0px;
}
body:not(.th6) div.buttonbar div.icon:not(.spacer):hover
{/* Make it a little easier for the user to keep a menu up. Almost unnoticeable because of the 0.1 opacity: */
background-color: rgba(255,255,255,0.1);
}
div.buttonbar span.icon.help:before {content: "\f059"; } /* .fa-question-circle */
div.buttonbar span.icon.home:before {content: "\f015"; } /* .fa-home */
div.buttonbar span.icon.logout:before {content: "\f08b"; } /* .fa-sign-out */
div.buttonbar span.icon.messages:before {content: "\f0e6"; } /* .fa-comments-o */
div.buttonbar span.icon.printer:before {content: "\f02f"; } /* .fa-print */
div.buttonbar span.icon.settings:before {content: "\f007"; } /* .fa-user */
div.buttonbar span.icon.unknown {background:transparent;} /* No ":before". Caller gave bad icon name. */
div.buttonbar span.icon.user:before {content: "\f007"; } /* .fa-user */
/*
The following combines the phone and email icons with nested absolute positioning, which requires
to inhabit the same space (= overlap).
Needs body:not(.th6) because otherwise, they cascade and interfere with body.th6's span.icons (below).
*/
/*
SMJ-- Changed the logic to simply use :before and :after so we only need a single element instead of two nested elements
This also means that both elements are highlighted on hover if one of them is.
*/
body:not(.th6) div.buttonbar span.icon.phone {position: relative;}
body:not(.th6) div.buttonbar span.icon.phone::before {content: "\f095";} /* .fa-phone */
body:not(.th6) div.buttonbar span.icon.phone::after {content: "\f0e0"; /* .fa-envelope */
position:absolute;
right : 1px;
font-size:0.4em;
}
/*SMJ -- For some reason in SLAF this icon is shifted up 4px. This is the temporary fix to make sure the contact icon remains on the same level.*/
body:not(.th6) div#DivEnvelopeTop div.buttonbar span.icon.phone:before {top: 4px; } /* .fa-phone */
body:not(.th6) div#DivEnvelopeTop div.buttonbar span.icon.phone:after {top:5px; } /* .fa-envelope */
/* th1 is the default. */
body.th1 div.buttonbar span.icon {color: white;} /* th1 is Home Page Theme. */
body.th2 div.buttonbar span.icon {color: white;
/* Add outline if browser supports it. (If not, it's hinky but usable.) */
text-shadow: -1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
} /* th2 is OCIO Classic Theme */
body.th3 div.buttonbar span.icon {color: #c69;} /* th3 is Breast Cancer Awareness Month Pink */
body.th4 div.buttonbar span.icon {color: #6c9;} /* th4 is Financial Green */
body.th5 div.buttonbar span.icon {} /* th5 uses the same color as the default, th1. */
body.th6 div.buttonbar span.icon /* th6 is Text-Only: */
{
background-color: #fff;
background-image: none;
border: 1px solid black;
color: black;
font-size: 16px;
padding-left: 6px;
padding-right: 6px;
text-align: center;
vertical-align: middle;
}
body.th6 div.buttonbar span.icon.email {display: none;}/* Because it's the inner one. */
body.th6 div.buttonbar span.icon.help:before {content: "?";}
body.th6 div.buttonbar span.icon.home:before {content: "H";}
body.th6 div.buttonbar span.icon.logout:before {content: "X";}
body.th6 div.buttonbar span.icon.messages:before {content: "M";}
body.th6 div.buttonbar span.icon.phone:before {content: "C";} /* Was E for email. Now C for contact. */
body.th6 div.buttonbar span.icon.printer:before {content: "P";}
body.th6 div.buttonbar span.icon.settings:before {content: "S";}
body.th6 div.buttonbar span.icon.user:before {content: "U";}
/* ************************************************************************************************** */
/* Under div.buttonbar, the first div down is div.icon. The second div down, if present, is div.icon's div.menu. */
div.buttonbar div.menu
{
background-color: #acf;
border: 1px solid #000;
display: none;
height: auto;
padding: 2px;
position: absolute;
top: 24px;
white-space: nowrap;
width: auto;
z-index: 20; /* Guarantee AppInfo and AppData won't overlay us. AppData is 9 to overlay BotMost. */
}
div.buttonbar.left div.menu
{
text-align: left;
left: 0px;
bottom: auto;
right: auto;
}
div.buttonbar:not(.left) div.menu
{
text-align: right;
right: 0px;
bottom: auto;
left: auto;
}
/* This is what makes the menu statful: */
div.buttonbar input.menu:checked + label.menu div.menu
{
display: inline-block;
}
/* th1 is the default. */
body.th1 div.buttonbar div.menu,
body.th1 div.buttonbar div.menu .menuitem {background-color: white; color: #333; } /* th1 is Home Page Theme */
body.th1 div.buttonbar div.menu .menuitem:hover { color: #0071bc;} /* th1 is Home Page Theme */
body.th2 div.buttonbar div.menu {background-color: #059; color: #ccc; } /* th2 is OCIO Classic Theme */
body.th3 div.buttonbar div.menu {background-color: #fac; } /* th3 is Breast Cancer Awareness Month Pink */
body.th4 div.buttonbar div.menu {background-color: #afc; } /* th4 is Financial Green */
body.th5 div.buttonbar div.menu {background-color: #f0f7ff; } /* th5 is Lighter Shade of Pale Blue */
body.th6 div.buttonbar div.menu {background-color: white; } /* th6 is Text-Only Black-and-white */
/* ************************************************************************************************** */
/* Unless suppressed with class="nobr", every a tag or span class="menuitem" in every menu automatically breaks: */
div.buttonbar div.menu a:not(.nobr):after,
div.buttonbar div.menu span.menuitem:not(.nobr):after
{
content: "\A";
white-space: pre;
}
/*SMJ -- CSS for unread badge on the messages icon*/
div.buttonbar span.icon.messages.unread:after
{
position: absolute;
bottom: 9pt; /*use explicit units instead of relative units since SLAF and non SLAF pages have different rem*/
left:10pt;
background: #fa3e3e;
border-radius: 2px;
min-width: 10pt;
width:auto;
height:11pt;
text-align: center;
line-height:12pt;
font-size: 7pt;
color:white;
font-family: "Merriweather";
}