peceful/scss/base/_drupal.scss

130 lines
2.8 KiB
SCSS
Executable file

// 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;
}