131 lines
2.8 KiB
SCSS
131 lines
2.8 KiB
SCSS
|
// Place any Drupal-related quirks here.
|
||
|
/*
|
||
|
* zurb_foundation.scss - Contains all Drupal-specific SASS for this theme.
|
||
|
*
|
||
|
* @todo Split this into multiple folders/files.
|
||
|
*/
|
||
|
|
||
|
// A fix for https://www.drupal.org/node/953034 - Themes currently cannot
|
||
|
// determine if a region is empty
|
||
|
|
||
|
.region-highlighted:empty {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
// This has been an issue since 7.x, Foundation rules about list elements
|
||
|
// affect Navbar sizing.
|
||
|
|
||
|
.toolbar-tray a {
|
||
|
font-size: 13px;
|
||
|
}
|
||
|
|
||
|
// Remove Foundation's top margin from the toggle orientation button.
|
||
|
|
||
|
.toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||
|
margin: 0;
|
||
|
// Fix offset problem where half of orientation button is not visible.
|
||
|
&:before {
|
||
|
min-height: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Override styles from /core/modules/system/css/components/menu.theme.css
|
||
|
|
||
|
.top-bar-section ul li {
|
||
|
padding-top: 0;
|
||
|
a.is-active {
|
||
|
color: #FFFFFF;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Preventing Top Bar FOUC
|
||
|
// http://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
|
||
|
// More info: https://www.drupal.org/node/2783573
|
||
|
.no-js .top-bar {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width: 40em) {
|
||
|
.no-js .top-bar {
|
||
|
display: block;
|
||
|
}
|
||
|
.no-js .title-bar {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Offset the top bar if the Navbar (toolbar) is present.
|
||
|
|
||
|
body.toolbar-fixed .sticky.is-stuck .top-bar {
|
||
|
margin-top: 39px;
|
||
|
}
|
||
|
|
||
|
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .sticky.is-stuck .top-bar {
|
||
|
margin-top: 78px;
|
||
|
}
|
||
|
|
||
|
body.toolbar-fixed .sticky.is-stuck.is-at-top {
|
||
|
margin-top: 0 !important;
|
||
|
}
|
||
|
|
||
|
// Removes core arrow image from menu items.
|
||
|
|
||
|
.top-bar {
|
||
|
.menu-item--collapsed,.menu-item--expanded {
|
||
|
list-style: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Style the search form, if embedded in the Top Bar.
|
||
|
|
||
|
.top-bar .search-block-form {
|
||
|
.form-item-keys, .form-actions {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Dropdown button styling.
|
||
|
|
||
|
.dropbutton-wrapper {
|
||
|
// Sub-themes will have to override this color, unfortunately.
|
||
|
background-color: #008CBA;
|
||
|
margin: 0 0 1.25rem;
|
||
|
.button {
|
||
|
margin-bottom: 0;
|
||
|
width: 100%;
|
||
|
text-align: left;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Add A11y-related Classy styling for required form fields.
|
||
|
.form-required:after {
|
||
|
display: inline-block;
|
||
|
width: 6px;
|
||
|
height: 6px;
|
||
|
margin: 0 0.3em;
|
||
|
content: "";
|
||
|
vertical-align: super;
|
||
|
// Use a background image to prevent screen readers from announcing the text.
|
||
|
background-image: url(../images/foundation/misc/required.svg);
|
||
|
background-repeat: no-repeat;
|
||
|
background-size: 6px 6px;
|
||
|
}
|
||
|
|
||
|
// Fix overlapping dropdown on node preview page.
|
||
|
.node-preview-container {
|
||
|
position: relative;
|
||
|
|
||
|
.node-preview-backlink {
|
||
|
margin-right: 1rem;
|
||
|
}
|
||
|
|
||
|
select {
|
||
|
width: auto;
|
||
|
}
|
||
|
}
|
||
|
//Spacing between comment box and action buttons
|
||
|
#edit-comment-body-wrapper {
|
||
|
margin: 0 0 0.625rem;
|
||
|
}
|