Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
298
web/core/themes/stable9/css/toolbar/toolbar.icons.theme.css
Normal file
298
web/core/themes/stable9/css/toolbar/toolbar.icons.theme.css
Normal file
@ -0,0 +1,298 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for toolbar module icons.
|
||||
*/
|
||||
|
||||
.toolbar .toolbar-icon {
|
||||
position: relative;
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
}
|
||||
.toolbar .toolbar-icon::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.6667em; /* LTR */
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: auto;
|
||||
}
|
||||
.toolbar button.toolbar-icon {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
}
|
||||
.toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-left: 1.3333em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
|
||||
padding-right: 1.3333em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.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-right: 2.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.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-right: 3.75em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 4em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 16.5em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: 4em;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0; /* LTR */
|
||||
width: 100%;
|
||||
background-size: 42% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 36em) {
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
width: auto;
|
||||
padding-right: 1.3333em; /* LTR */
|
||||
padding-left: 2.75em; /* LTR */
|
||||
text-indent: 0;
|
||||
background-position: left center; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
padding-right: 2.75em;
|
||||
padding-left: 1.3333em;
|
||||
background-position: right center;
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
left: 0.6667em; /* LTR */
|
||||
width: 20px;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
background-size: auto auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
|
||||
right: 0.6667em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility/focus
|
||||
*/
|
||||
.toolbar-tab a:focus {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
.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 {
|
||||
right: 1.6667em;
|
||||
left: auto;
|
||||
}
|
||||
.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 {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
padding: 0;
|
||||
text-indent: -999em;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button::before {
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
|
||||
padding: 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,
|
||||
.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus::before {
|
||||
background-image: url(../../../../misc/icons/787878/push-up.svg);
|
||||
}
|
||||
119
web/core/themes/stable9/css/toolbar/toolbar.menu.css
Normal file
119
web/core/themes/stable9/css/toolbar/toolbar.menu.css
Normal file
@ -0,0 +1,119 @@
|
||||
/**
|
||||
* @file toolbar.menu.css
|
||||
*/
|
||||
.toolbar .toolbar-menu,
|
||||
[dir="rtl"] .toolbar .toolbar-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.toolbar .toolbar-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: auto;
|
||||
line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
|
||||
}
|
||||
|
||||
/**
|
||||
* Hidden vertical toolbar sub-menus by default.
|
||||
*/
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hidden horizontal toolbar handle icon.
|
||||
*/
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle {
|
||||
display: none;
|
||||
}
|
||||
/**
|
||||
* Hidden toolbar sub-menus by default.
|
||||
*/
|
||||
.toolbar-tray-open .toolbar-menu .menu-item--expanded 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-right: 0;
|
||||
margin-left: 3em;
|
||||
}
|
||||
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
|
||||
.toolbar .toolbar-tray a.is-active {
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
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 {
|
||||
border-top-color: #e5e5e5;
|
||||
border-bottom-color: #ccc;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.toolbar .level-3 > ul {
|
||||
border-top-color: #ddd;
|
||||
border-bottom-color: #c5c5c5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar .level-4 > ul {
|
||||
border-top-color: #d5d5d5;
|
||||
border-bottom-color: #bbb;
|
||||
background-color: #eee;
|
||||
}
|
||||
.toolbar .level-5 > ul {
|
||||
border-top-color: #ccc;
|
||||
border-bottom-color: #b5b5b5;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.toolbar .level-6 > ul {
|
||||
border-top-color: #c5c5c5;
|
||||
border-bottom-color: #aaa;
|
||||
background-color: #eee;
|
||||
}
|
||||
.toolbar .level-7 > ul {
|
||||
border-top-color: #ccc;
|
||||
border-bottom-color: #b5b5b5;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.toolbar .level-8 > ul {
|
||||
border-top-color: #ddd;
|
||||
border-bottom-color: #ccc;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle.
|
||||
*/
|
||||
.toolbar .toolbar-handle:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar .toolbar-icon.toolbar-handle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0; /* LTR */
|
||||
bottom: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
|
||||
right: auto;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
283
web/core/themes/stable9/css/toolbar/toolbar.module.css
Normal file
283
web/core/themes/stable9/css/toolbar/toolbar.module.css
Normal file
@ -0,0 +1,283 @@
|
||||
/**
|
||||
* @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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: small;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media print {
|
||||
#toolbar-administration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.toolbar-loading #toolbar-administration {
|
||||
overflow: hidden;
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* 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. */
|
||||
.toolbar-oriented .toolbar-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup
|
||||
* style to avoid extra reflow & flicker. */
|
||||
@media (min-width: 61em) {
|
||||
.toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
|
||||
display: none;
|
||||
}
|
||||
.toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
|
||||
width: 999em;
|
||||
}
|
||||
.toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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,
|
||||
html.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,
|
||||
html.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-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
|
||||
.toolbar .toolbar-bar .toolbar-tab,
|
||||
.toolbar .toolbar-tray-horizontal li {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
|
||||
[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 {
|
||||
z-index: 501;
|
||||
display: none;
|
||||
}
|
||||
.toolbar-oriented .toolbar-tray-vertical {
|
||||
position: absolute;
|
||||
left: -100%; /* LTR */
|
||||
width: 240px;
|
||||
width: 15rem;
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
|
||||
right: -100%;
|
||||
left: auto;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical > .toolbar-lining {
|
||||
min-height: 100%;
|
||||
}
|
||||
/* Layer the links just above the toolbar-tray. */
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
|
||||
position: relative;
|
||||
z-index: 502;
|
||||
}
|
||||
/* 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
|
||||
* 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,
|
||||
html.toolbar-fixed .toolbar .toolbar-tray-vertical {
|
||||
position: fixed;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.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 {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
/* 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,
|
||||
html.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,
|
||||
html.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed,
|
||||
[dir="rtl"].toolbar-tray-open.toolbar-vertical.toolbar-fixed {
|
||||
margin-right: 240px;
|
||||
margin-right: 15rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media print {
|
||||
[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed,
|
||||
[dir="rtl"].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 {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0; /* LTR */
|
||||
bottom: 0;
|
||||
}
|
||||
[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar home button toggle.
|
||||
*/
|
||||
.toolbar .toolbar-bar .home-toolbar-tab {
|
||||
display: none;
|
||||
}
|
||||
.path-admin .toolbar-bar .home-toolbar-tab {
|
||||
display: block;
|
||||
}
|
||||
167
web/core/themes/stable9/css/toolbar/toolbar.theme.css
Normal file
167
web/core/themes/stable9/css/toolbar/toolbar.theme.css
Normal file
@ -0,0 +1,167 @@
|
||||
/**
|
||||
* @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: rgb(0, 0, 0, 0);
|
||||
-o-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
tap-highlight-color: rgb(0, 0, 0, 0);
|
||||
-moz-touch-callout: none;
|
||||
-o-touch-callout: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-callout: none;
|
||||
}
|
||||
.toolbar .toolbar-item {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
}
|
||||
.toolbar .toolbar-item:hover,
|
||||
.toolbar .toolbar-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar bar.
|
||||
*/
|
||||
.toolbar .toolbar-bar {
|
||||
color: #ddd;
|
||||
background-color: #0f0f0f;
|
||||
box-shadow: -1px 0 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-bar {
|
||||
box-shadow: 1px 0 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-item {
|
||||
color: #fff;
|
||||
}
|
||||
.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: linear-gradient(rgb(255, 255, 255, 0.125) 20%, transparent 200%);
|
||||
}
|
||||
.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
|
||||
background-image: linear-gradient(rgb(255, 255, 255, 0.25) 20%, transparent 200%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar tray.
|
||||
*/
|
||||
.toolbar .toolbar-tray {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 5em; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
|
||||
padding-right: 0;
|
||||
padding-left: 5em;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical {
|
||||
border-right: 1px solid #aaa; /* LTR */
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: -1px 0 5px 2px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-tray-vertical {
|
||||
border-right: 0 none;
|
||||
border-left: 1px solid #aaa;
|
||||
box-shadow: 1px 0 5px 2px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray {
|
||||
border-bottom: 1px solid #aaa;
|
||||
box-shadow: -2px 1px 3px 1px rgb(0, 0, 0, 0.3333); /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray {
|
||||
box-shadow: 2px 1px 3px 1px rgb(0, 0, 0, 0.3333);
|
||||
}
|
||||
.toolbar .toolbar-tray-horizontal .toolbar-tray {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-tray a,
|
||||
.toolbar-tray a:visited {
|
||||
padding: 1em 1.3333em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #565656;
|
||||
}
|
||||
.toolbar-tray a:hover,
|
||||
.toolbar-tray a:active,
|
||||
.toolbar-tray a:focus,
|
||||
.toolbar-tray a.is-active {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
.toolbar .toolbar-menu {
|
||||
background-color: #fff;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-left: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-right: 1px solid #ddd; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item + .menu-item {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item:last-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .menu-item .menu-item {
|
||||
border: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.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-right: 0.25em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.toolbar .toolbar-menu .toolbar-menu a {
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
/**
|
||||
* Orientation toggle.
|
||||
*/
|
||||
.toolbar .toolbar-toggle-orientation {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-left: 1px solid #c9c9c9; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
|
||||
border-right: 1px solid #c9c9c9;
|
||||
border-left: 0 none;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
|
||||
float: left;
|
||||
}
|
||||
.toolbar .toolbar-toggle-orientation button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user