Drupal 8.0.0 beta 12. More info: https://www.drupal.org/node/2514176
This commit is contained in:
Pantheon Automation
Greg Anderson
commit
9921556621
13277 changed files with 1459781 additions and 0 deletions
299
core/modules/toolbar/css/toolbar.icons.theme.css
Normal file
299
core/modules/toolbar/css/toolbar.icons.theme.css
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
/**
|
||||
* @file
|
||||
* Styling for toolbar module icons.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-icon {
|
||||
padding-left: 2.75em; /* LTR */
|
||||
position: relative;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon {
|
||||
padding-left: 1.3333em;
|
||||
padding-right: 2.75em;
|
||||
}
|
||||
.toolbar .toolbar-icon:before {
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0.6667em; /* LTR */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon:before {
|
||||
left: auto;
|
||||
right: 0.6667em;
|
||||
}
|
||||
.toolbar button.toolbar-icon {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-left: 1.3333em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-left: 0;
|
||||
padding-right: 1.3333em;
|
||||
}
|
||||
.toolbar .toolbar-menu ul a.toolbar-icon:before {
|
||||
display: none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
|
||||
padding-left: 0;
|
||||
padding-right: 2.75em;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-left: 3.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
|
||||
padding-left: 0;
|
||||
padding-right: 3.75em;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-left: 2.75em; /* LTR */
|
||||
padding-right: 4em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-left: 4em;
|
||||
padding-right: 2.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top level icons.
|
||||
*/
|
||||
.toolbar-bar .toolbar-icon-menu:before {
|
||||
background-image: url(../../../misc/icons/bebebe/hamburger.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-menu:active:before,
|
||||
.toolbar-bar .toolbar-icon-menu.is-active:before {
|
||||
background-image: url(../../../misc/icons/ffffff/hamburger.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-help:before {
|
||||
background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
|
||||
}
|
||||
.toolbar-bar .toolbar-icon-help:active:before,
|
||||
.toolbar-bar .toolbar-icon-help.is-active:before {
|
||||
background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Main menu icons.
|
||||
*/
|
||||
.toolbar-icon-system-admin-content:before {
|
||||
background-image: url(../../../misc/icons/787878/file.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-content:active:before,
|
||||
.toolbar-icon-system-admin-content.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/file.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-structure:before {
|
||||
background-image: url(../../../misc/icons/787878/orgchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-structure:active:before,
|
||||
.toolbar-icon-system-admin-structure.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/orgchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-themes-page:before {
|
||||
background-image: url(../../../misc/icons/787878/paintbrush.svg);
|
||||
}
|
||||
.toolbar-icon-system-themes-page:active:before,
|
||||
.toolbar-icon-system-themes-page.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/paintbrush.svg);
|
||||
}
|
||||
.toolbar-icon-entity-user-collection:before {
|
||||
background-image: url(../../../misc/icons/787878/people.svg);
|
||||
}
|
||||
.toolbar-icon-entity-user-collection:active:before,
|
||||
.toolbar-icon-entity-user-collection.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/people.svg);
|
||||
}
|
||||
.toolbar-icon-system-modules-list:before {
|
||||
background-image: url(../../../misc/icons/787878/puzzlepiece.svg);
|
||||
}
|
||||
.toolbar-icon-system-modules-list:active:before,
|
||||
.toolbar-icon-system-modules-list.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/puzzlepiece.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-config:before {
|
||||
background-image: url(../../../misc/icons/787878/wrench.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-config:active:before,
|
||||
.toolbar-icon-system-admin-config.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/wrench.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-reports:before {
|
||||
background-image: url(../../../misc/icons/787878/barchart.svg);
|
||||
}
|
||||
.toolbar-icon-system-admin-reports:active:before,
|
||||
.toolbar-icon-system-admin-reports.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/barchart.svg);
|
||||
}
|
||||
.toolbar-icon-help-main:before {
|
||||
background-image: url(../../../misc/icons/787878/questionmark-disc.svg);
|
||||
}
|
||||
.toolbar-icon-help-main:active:before,
|
||||
.toolbar-icon-help-main.is-active:before {
|
||||
background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-icon:before {
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 16.5em) {
|
||||
.toolbar .toolbar-bar .toolbar-icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-indent: -9999px;
|
||||
width: 4em;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-icon:before {
|
||||
background-size: 42% auto;
|
||||
left: 0; /* LTR */
|
||||
width: 100%;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.toolbar .toolbar-bar .toolbar-icon {
|
||||
background-position: left center; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
padding-right: 1.3333em; /* LTR */
|
||||
text-indent: 0;
|
||||
width: auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
|
||||
background-position: right center;
|
||||
padding-left: 1.3333em;
|
||||
padding-right: 2.75em;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-icon:before {
|
||||
background-size: 100% auto;
|
||||
left: 0.6667em; /* LTR */
|
||||
width: 20px;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
|
||||
left: 0;
|
||||
right: 0.6667em;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility/focus
|
||||
*/
|
||||
.toolbar-tab a:focus {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.toolbar-lining button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.toolbar-tray-horizontal a:focus,
|
||||
.toolbar-box a:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-box a:hover:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle:focus {
|
||||
outline: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handle.
|
||||
*/
|
||||
.toolbar .toolbar-icon.toolbar-handle {
|
||||
width: 4em;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle:before {
|
||||
left: 1.6667em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
|
||||
left: auto;
|
||||
right: 1.6667em;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle:before {
|
||||
background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle.open:before {
|
||||
background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
|
||||
background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
|
||||
background-size: 75%;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
|
||||
background-image: url(../../../misc/icons/787878/twistie-up.svg);
|
||||
background-size: 75%;
|
||||
}
|
||||
.toolbar .toolbar-icon-escape-admin:before {
|
||||
background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
|
||||
background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
|
||||
}
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
text-indent: -999em;
|
||||
width: 20px;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button:before {
|
||||
left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation button:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
padding-right: 0;
|
||||
}
|
||||
/**
|
||||
* In order to support a hover effect on the SVG images, while also supporting
|
||||
* RTL text direction and no SVG support, this little icon requires some very
|
||||
* specific targeting, setting and unsetting.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
|
||||
background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
|
||||
.toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before
|
||||
{
|
||||
background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
|
||||
background-image: url(../../../misc/icons/bebebe/push-right.svg);
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
|
||||
background-image: url(../../../misc/icons/787878/push-right.svg);
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
|
||||
background-image: url(../../../misc/icons/bebebe/push-up.svg);
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before {
|
||||
background-image: url(../../../misc/icons/787878/push-up.svg);
|
||||
}
|
||||
|
||||
103
core/modules/toolbar/css/toolbar.menu.css
Normal file
103
core/modules/toolbar/css/toolbar.menu.css
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/**
|
||||
* @file toolbar.menu.css
|
||||
*/
|
||||
.toolbar .toolbar-menu,
|
||||
[dir="rtl"] .toolbar .toolbar-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.toolbar .toolbar-box {
|
||||
display: block;
|
||||
line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle,
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-menu ul,
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul {
|
||||
display: none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical li.open > ul {
|
||||
display: block; /* Show the sub-menus */
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-handle + a {
|
||||
margin-right: 3em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-handle + a {
|
||||
margin-left: 3em;
|
||||
margin-right: 0;
|
||||
}
|
||||
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
|
||||
.toolbar .toolbar-tray a.is-active {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ----- Toolbar menu tray for viewports less than 320px ------ */
|
||||
@media screen and (max-width: 319px) {
|
||||
.toolbar .toolbar-tray-vertical.is-active {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Items.
|
||||
*/
|
||||
.toolbar .level-2 > ul {
|
||||
background-color: #fafafa;
|
||||
border-bottom-color: #cccccc;
|
||||
border-top-color: #e5e5e5;
|
||||
}
|
||||
.toolbar .level-3 > ul {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom-color: #c5c5c5;
|
||||
border-top-color: #dddddd;
|
||||
}
|
||||
.toolbar .level-4 > ul {
|
||||
background-color: #eeeeee;
|
||||
border-bottom-color: #bbbbbb;
|
||||
border-top-color: #d5d5d5;
|
||||
}
|
||||
.toolbar .level-5 > ul {
|
||||
background-color: #e5e5e5;
|
||||
border-bottom-color: #b5b5b5;
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
.toolbar .level-6 > ul {
|
||||
background-color: #eeeeee;
|
||||
border-bottom-color: #aaaaaa;
|
||||
border-top-color: #c5c5c5;
|
||||
}
|
||||
.toolbar .level-7 > ul {
|
||||
background-color: #fafafa;
|
||||
border-bottom-color: #b5b5b5;
|
||||
border-top-color: #cccccc;
|
||||
}
|
||||
.toolbar .level-8 > ul {
|
||||
background-color: #dddddd;
|
||||
border-bottom-color: #cccccc;
|
||||
border-top-color: #dddddd;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle.
|
||||
*/
|
||||
.toolbar .toolbar-handle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle {
|
||||
bottom: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0; /* LTR */
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
|
||||
left: 0;
|
||||
padding: 0;
|
||||
right: auto;
|
||||
}
|
||||
255
core/modules/toolbar/css/toolbar.module.css
Normal file
255
core/modules/toolbar/css/toolbar.module.css
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/**
|
||||
* @file toolbar.module.css
|
||||
*
|
||||
*
|
||||
* Aggressive resets so we can achieve a consistent look in hostile CSS
|
||||
* environments.
|
||||
*/
|
||||
#toolbar-administration,
|
||||
#toolbar-administration * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toolbar-administration {
|
||||
font-size: small;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@media print {
|
||||
#toolbar-administration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Very specific overrides for Drupal system CSS.
|
||||
*/
|
||||
.toolbar li,
|
||||
.toolbar .item-list,
|
||||
.toolbar .item-list li,
|
||||
.toolbar .menu-item,
|
||||
.toolbar .menu-item--expanded {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.toolbar .menu-item {
|
||||
padding-top: 0;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab,
|
||||
.toolbar .menu-item {
|
||||
display: block;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab.hidden {
|
||||
display: none;
|
||||
}
|
||||
.toolbar a {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Administration menu.
|
||||
*/
|
||||
.toolbar .toolbar-bar,
|
||||
.toolbar .toolbar-tray {
|
||||
position: relative;
|
||||
z-index: 1250;
|
||||
}
|
||||
/* Position the admin toolbar absolutely when the configured standard breakpoint
|
||||
* is active. The toolbar container, that contains the bar and the trays, is
|
||||
* position absolutely so that it scrolls with the page. Otherwise, on smaller
|
||||
* screens, the components of the admin toolbar are positioned statically. */
|
||||
body.toolbar-fixed .toolbar-oriented,
|
||||
.toolbar-oriented .toolbar-bar,
|
||||
.toolbar-oriented .toolbar-tray {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
/* Layer the bar just above the trays and above contextual link triggers. */
|
||||
.toolbar-oriented .toolbar-bar {
|
||||
z-index: 502;
|
||||
}
|
||||
/* Position the admin toolbar fixed when the configured standard breakpoint is
|
||||
* active. */
|
||||
body.toolbar-fixed .toolbar-oriented .toolbar-bar {
|
||||
position: fixed;
|
||||
}
|
||||
/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
|
||||
* around the trays in order to provide a context for scrolling tray content
|
||||
* that is taller than the viewport. */
|
||||
body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
|
||||
bottom: 0;
|
||||
width: 240px;
|
||||
width: 15rem;
|
||||
}
|
||||
/* Present the admin toolbar tabs horizontally as a default on user agents that
|
||||
* do not understand media queries or on user agents where JavaScript is
|
||||
* disabled. */
|
||||
.toolbar .toolbar-bar .toolbar-tab,
|
||||
.toolbar .toolbar-tray-horizontal li {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
|
||||
float: right;
|
||||
}
|
||||
/* Present the admin toolbar tabs vertically by default on user agents that
|
||||
* that understand media queries. This will be the small screen default. */
|
||||
@media only screen {
|
||||
.toolbar .toolbar-bar .toolbar-tab,
|
||||
.toolbar .toolbar-tray-horizontal li {
|
||||
float: none; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
/* This min-width media query is meant to provide basic horizontal layout to
|
||||
* the main menu tabs when JavaScript is disabled on user agents that understand
|
||||
* media queries. */
|
||||
@media (min-width:16.5em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab,
|
||||
.toolbar .toolbar-tray-horizontal li {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
/* Present the admin toolbar tabs horizontally when the configured narrow
|
||||
* breakpoint is active. */
|
||||
.toolbar-oriented .toolbar-bar .toolbar-tab,
|
||||
.toolbar-oriented .toolbar-tray-horizontal li {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar tray.
|
||||
*/
|
||||
.toolbar .toolbar-tray {
|
||||
display: none;
|
||||
z-index: 501;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray-vertical {
|
||||
left: -100%; /* LTR */
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
width: 15rem;
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
|
||||
left: auto;
|
||||
right: -100%;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical > .toolbar-lining {
|
||||
min-height: 100%;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical > .toolbar-lining:before {
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 0; /* LTR */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 240px;
|
||||
width: 14rem;
|
||||
z-index: -1;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
/* Hide secondary menus when the tray is horizontal. */
|
||||
.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
|
||||
display: none;
|
||||
}
|
||||
/* When the configured standard breakpoint is active and the tray is in a
|
||||
* horizontal position, the tray is fixed to the top of the viewport and does
|
||||
* not scroll with the page contents. */
|
||||
body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
|
||||
position: fixed;
|
||||
}
|
||||
/* When the configured standard breakpoint is active and the tray is in a
|
||||
* vertical position, the tray does not scroll with the page. The contents of
|
||||
* the tray scroll within the confines of the viewport. */
|
||||
.toolbar .toolbar-tray-vertical.is-active,
|
||||
body.toolbar-fixed .toolbar .toolbar-tray-vertical {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
}
|
||||
.toolbar .toolbar-tray.is-active {
|
||||
display: block;
|
||||
}
|
||||
/* Bring the tray into the viewport. By default it is just off-screen. */
|
||||
.toolbar-oriented .toolbar-tray-vertical.is-active {
|
||||
left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
/* When the configured standard breakpoint is active, the tray appears to push
|
||||
* the page content away from the edge of the viewport. */
|
||||
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-left: 240px; /* LTR */
|
||||
margin-left: 15rem; /* LTR */
|
||||
}
|
||||
@media print {
|
||||
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
margin-right: 240px;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
@media print {
|
||||
[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* ToolBar tray orientation toggle.
|
||||
*/
|
||||
/* Hide the orientation toggle when the configured narrow breakpoint is not
|
||||
* active. */
|
||||
.toolbar .toolbar-tray .toolbar-toggle-orientation {
|
||||
display: none;
|
||||
}
|
||||
/* Show the orientation toggle when the configured narrow breakpoint is
|
||||
* active. */
|
||||
.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
|
||||
display: block;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0; /* LTR */
|
||||
top: auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
|
||||
float: right; /* LTR */
|
||||
width: 100%;
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
|
||||
float: left;
|
||||
}
|
||||
168
core/modules/toolbar/css/toolbar.theme.css
Normal file
168
core/modules/toolbar/css/toolbar.theme.css
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
/**
|
||||
* @file toolbar.theme.css
|
||||
*/
|
||||
.toolbar {
|
||||
font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
|
||||
/* Set base font size to 13px based on root ems. */
|
||||
font-size: 0.8125rem;
|
||||
-moz-tap-highlight-color: rgba(0,0,0,0);
|
||||
-o-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
tap-highlight-color: rgba(0,0,0,0);
|
||||
-moz-touch-callout: none;
|
||||
-o-touch-callout: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-callout: none;
|
||||
}
|
||||
.toolbar .toolbar-item {
|
||||
cursor: pointer;
|
||||
padding: 1em 1.3333em;
|
||||
line-height: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toolbar .toolbar-item:hover, .toolbar .toolbar-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar bar.
|
||||
*/
|
||||
.toolbar .toolbar-bar {
|
||||
background-color: #0f0f0f;
|
||||
box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
|
||||
color: #dddddd;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar {
|
||||
box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-item {
|
||||
color: #ffffff;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar tray.
|
||||
*/
|
||||
.toolbar .toolbar-tray {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal > .toolbar-lining {
|
||||
padding-right: 5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
|
||||
padding-right: 0;
|
||||
padding-left: 5em;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #aaaaaa; /* LTR */
|
||||
box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical {
|
||||
border-left: 1px solid #aaaaaa;
|
||||
border-right: 0 none;
|
||||
box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal {
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal {
|
||||
box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-tray {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-tray a {
|
||||
color: #565656;
|
||||
cursor: pointer;
|
||||
padding: 1em 1.3333em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toolbar-tray a:hover,
|
||||
.toolbar-tray a:active,
|
||||
.toolbar-tray a:focus,
|
||||
.toolbar-tray a.is-active
|
||||
{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.toolbar .toolbar-menu {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
|
||||
border-left: 1px solid #dddddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
|
||||
border-left: 0 none ;
|
||||
border-right: 1px solid #dddddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .menu-item:last-child {
|
||||
border-right: 1px solid #dddddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item:last-child {
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item .menu-item {
|
||||
border: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-left: 0.25em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu a {
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0.6667em;
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
|
||||
border-left: 1px solid #c9c9c9; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-horizontal .toolbar-toggle-orientation {
|
||||
border-left: 0 none;
|
||||
border-right: 1px solid #c9c9c9;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: right; /* LTR */
|
||||
padding: 0.1667em;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: left;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
Reference in a new issue