forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
639 lines
16 KiB
SCSS
639 lines
16 KiB
SCSS
// Toolbar Variables
|
|
:root {
|
|
--gin-toolbar-secondary-height: 48px;
|
|
--gin-toolbar-height: 39px;
|
|
--gin-scroll-offset: 72px;
|
|
--gin-toolbar-y-offset: var(--gin-toolbar-height); // Needs px to work in calc() functions.
|
|
--gin-toolbar-x-offset: 0px; // Needs px to work in calc() functions.
|
|
--gin-sticky-offset: 0px; // Needs px to work in calc() functions.
|
|
|
|
@include mq(medium) {
|
|
--gin-toolbar-secondary-height: 60px;
|
|
--gin-icon-size-toolbar: 22px;
|
|
--gin-scroll-offset: 130px;
|
|
--gin-toolbar-y-offset: 0px; // Needs px to work in calc() functions.
|
|
--gin-toolbar-x-offset: var(--gin-toolbar-width-collapsed);
|
|
--gin-sticky-offset: var(--gin-height-sticky);
|
|
}
|
|
}
|
|
|
|
.toolbar-fixed[data-toolbar-menu=open] {
|
|
@include mq(medium) {
|
|
--gin-toolbar-x-offset: var(--gin-toolbar-width, 240px);
|
|
}
|
|
}
|
|
|
|
// Toolbar
|
|
#toolbar-item-administration-tray {
|
|
@include mq(medium) {
|
|
border: 0 none;
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
.toolbar-bar {
|
|
box-shadow: none;
|
|
// Reset `box-shadow` style from the `.toolbar-bar` class if we use RTL mode.
|
|
[dir="rtl"] & {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@include mq(xsmall) {
|
|
display: flex;
|
|
}
|
|
|
|
@include mq(large) {
|
|
height: 0;
|
|
}
|
|
|
|
.toolbar-tab > .toolbar-item {
|
|
font-weight: var(--gin-font-weight-normal);;
|
|
}
|
|
|
|
#toolbar-item-administration-tray .toolbar-icon,
|
|
.toolbar-tab > .toolbar-icon-edit.toolbar-item {
|
|
&::before {
|
|
@include mq(medium) {
|
|
left: calc((var(--gin-toolbar-width-collapsed) - var(--gin-icon-size-toolbar)) / 2 - 9px);
|
|
width: var(--gin-icon-size-toolbar);
|
|
height: var(--gin-icon-size-toolbar);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar-tab > .toolbar-icon-edit.toolbar-item::before {
|
|
@include mq($to: xsmall) {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@include mq(medium) {
|
|
// Toolbar logo
|
|
.toolbar-logo {
|
|
height: var(--gin-height-sticky);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
z-index: 3;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
// Admin tray: Home icon
|
|
.toolbar-icon-home {
|
|
display: block;
|
|
width: 100%;
|
|
margin: var(--gin-spacing-xs) 0;
|
|
}
|
|
|
|
#toolbar-item-administration-tray a.toolbar-icon.override-icon {
|
|
&:before {
|
|
left: 0;
|
|
width: 0;
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom logo
|
|
#toolbar-item-administration-tray .toolbar-logo {
|
|
padding: var(--gin-spacing-xs) 0;
|
|
|
|
img {
|
|
max-width: calc(var(--gin-toolbar-width-collapsed) - 1px);
|
|
max-height: 40px;
|
|
}
|
|
}
|
|
|
|
#toolbar-item-administration-tray a.toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {
|
|
@include mq(medium) {
|
|
height: 74px;
|
|
margin-bottom: 6px;
|
|
transition: top var(--gin-transition);
|
|
}
|
|
|
|
&::before {
|
|
$logoSize: 32px;
|
|
|
|
@include mq(medium) {
|
|
width: $logoSize;
|
|
height: $logoSize;
|
|
left: calc((var(--gin-toolbar-width-collapsed) - #{$logoSize}) / 2 - 9px);
|
|
mask-size: $logoSize $logoSize;
|
|
mask-position: center center;
|
|
}
|
|
}
|
|
|
|
&:hover::before {
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
|
|
&::after {
|
|
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border),
|
|
inset 0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar-tray a,
|
|
.toolbar-tray a:visited,
|
|
.toolbar-tray span {
|
|
color: var(--gin-color-text);
|
|
}
|
|
|
|
#gin-toolbar-bar.js-settings-tray-edit-mode {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#toolbar-item-administration-tray a.toolbar-icon.override-icon {
|
|
&:before {
|
|
@include mq(medium) {
|
|
left: 0;
|
|
width: 0;
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar .toolbar-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.toolbar .toolbar-menu {
|
|
background: transparent;
|
|
|
|
.toolbar-menu a,
|
|
.toolbar-menu span {
|
|
color: var(--gin-color-text);
|
|
}
|
|
}
|
|
|
|
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
|
|
.toolbar .toolbar-tray a.is-active {
|
|
color: var(--gin-color-primary);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
text-decoration: none;
|
|
|
|
@include mq($to: medium) {
|
|
width: 100%;
|
|
background: var(--gin-color-primary-light);
|
|
}
|
|
}
|
|
|
|
// Mobile: hide menu titles
|
|
.toolbar-menu__title,
|
|
.toolbar-menu__sub-title,
|
|
a.toolbar-menu__trigger,
|
|
.toolbar-menu__logo {
|
|
display: none;
|
|
}
|
|
|
|
// New Desktop Toolbar
|
|
@include mq(medium) {
|
|
#toolbar-item-administration-tray {
|
|
display: block;
|
|
}
|
|
|
|
.toolbar .toolbar-menu .toolbar-menu {
|
|
background: var(--gin-bg-app);
|
|
}
|
|
|
|
.toolbar-fixed {
|
|
transition: var(--gin-transition);
|
|
}
|
|
|
|
.toolbar .toolbar-box {
|
|
position: static;
|
|
}
|
|
|
|
.toolbar-tab > .toolbar-item {
|
|
&.toolbar-icon-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.toolbar-menu-administration a.toolbar-menu__trigger {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-size: var(--gin-font-size-s);
|
|
color: var(--gin-color-text-light);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
width: var(--gin-toolbar-width-collapsed);
|
|
height: 64px;
|
|
padding: var(--gin-spacing-m) 0 var(--gin-spacing-m) var(--gin-toolbar-width-collapsed);
|
|
margin: 0;
|
|
transition: width var(--gin-transition);
|
|
overflow: hidden;
|
|
|
|
&, &:active, &:focus {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
&::before {
|
|
background-color: var(--gin-color-title);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc((var(--gin-toolbar-width-collapsed) - 36px) / 2);
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--gin-border-color);
|
|
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: 11px 11px;
|
|
transition: transform var(--gin-transition);
|
|
}
|
|
|
|
&.is-active {
|
|
display: flex;
|
|
font-weight: var(--gin-font-weight-normal);
|
|
color: var(--gin-color-text-light);
|
|
width: var(--gin-toolbar-width);
|
|
|
|
&:hover {
|
|
color: var(--gin-color-title);
|
|
}
|
|
|
|
&:before {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
display: none;
|
|
}
|
|
|
|
.close {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.toolbar-tab--toolbar-item-administration {
|
|
order: -1;
|
|
}
|
|
|
|
.toolbar-menu-administration {
|
|
display: flex;
|
|
position: fixed;
|
|
top: auto;
|
|
left: 0;
|
|
width: var(--gin-toolbar-width-collapsed);
|
|
height: 100vh;
|
|
max-width: calc(100% - var(--gin-toolbar-height));
|
|
background: var(--gin-bg-layer);
|
|
border-right: 1px solid var(--gin-border-color-layer);
|
|
transition: var(--gin-transition);
|
|
|
|
.gin--dark-mode & {
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-toolbar-menu='open'] & {
|
|
width: var(--gin-toolbar-width);
|
|
}
|
|
|
|
.toolbar-tray-horizontal & {
|
|
ul li.menu-item--expanded .menu-item.hover-intent ul,
|
|
ul li.menu-item--expanded .menu-item:focus-within ul {
|
|
margin-top: 0;
|
|
margin-left: calc(var(--gin-toolbar-width) - 2px);
|
|
}
|
|
|
|
// admin_toolbar 3.3.1 fix
|
|
// hide for vertical toolbar
|
|
.toolbar-icon.toolbar-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Open Menu
|
|
.toolbar-vertical & {
|
|
width: var(--gin-toolbar-width);
|
|
|
|
> .toolbar-menu {
|
|
> .menu-item {
|
|
border-top: 0 none;
|
|
border-bottom: 0 none;
|
|
|
|
> .toolbar-icon,
|
|
> .toolbar-box > .toolbar-icon {
|
|
width: auto;
|
|
padding-left: calc(var(--gin-spacing-xxl) + var(--gin-spacing-xs))
|
|
}
|
|
|
|
.toolbar-menu {
|
|
left: var(--gin-toolbar-width);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .toolbar-menu {
|
|
align-self: flex-start;
|
|
height: 100%;
|
|
max-height: calc(100% - var(--gin-toolbar-width-collapsed));
|
|
overflow-y: auto;
|
|
background: transparent;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
|
|
> .menu-item {
|
|
> .toolbar-icon,
|
|
> .toolbar-box > .toolbar-icon {
|
|
font-size: var(--gin-font-size);
|
|
font-weight: 475;
|
|
letter-spacing: -.0125rem;
|
|
color: var(--gin-color-text);
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(var(--gin-toolbar-x-offset) - var(--gin-spacing-m));
|
|
height: 48px;
|
|
padding-left: calc(var(--gin-toolbar-width-collapsed) - var(--gin-spacing-m));
|
|
padding-right: 0;
|
|
margin: 0 var(--gin-spacing-xs) 1px;
|
|
border-radius: var(--gin-border-m);
|
|
overflow: hidden;
|
|
transition: width var(--gin-transition);
|
|
|
|
&:hover {
|
|
color: var(--gin-color-primary);
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.is-active {
|
|
color: var(--gin-color-primary-active);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
|
|
&:before {
|
|
background: var(--gin-color-primary);
|
|
}
|
|
}
|
|
|
|
&.toolbar-handle {
|
|
width: var(--gin-toolbar-width-collapsed);
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar-menu {
|
|
display: none;
|
|
top: 0;
|
|
margin-left: calc(var(--gin-toolbar-x-offset) - 1px);
|
|
height: 100vh;
|
|
max-width: calc(100% - var(--gin-toolbar-height));
|
|
box-shadow: none;
|
|
border-left: 1px solid var(--gin-border-color-layer);
|
|
transition: margin-left var(--gin-transition);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
&,
|
|
[dir] & {
|
|
position: fixed;
|
|
width: var(--gin-toolbar-width);
|
|
}
|
|
|
|
// Link color
|
|
a,
|
|
span {
|
|
color: var(--gin-color-text);
|
|
|
|
&.is-active {
|
|
color: var(--gin-color-primary);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
background: var(--gin-color-primary-light);
|
|
|
|
&:hover {
|
|
color: var(--gin-color-primary-hover);
|
|
background: var(--gin-color-primary-light-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title,
|
|
&__sub-title {
|
|
position: relative;
|
|
display: block;
|
|
min-height: 36px;
|
|
font-size: var(--gin-font-size-h3);
|
|
letter-spacing: -.025em;
|
|
padding: 0;
|
|
margin: var(--gin-spacing-m) var(--gin-spacing-s) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)) var(--gin-spacing-s);
|
|
|
|
a {
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
color: var(--gin-color-title);
|
|
padding: var(--gin-spacing-s);
|
|
border-radius: var(--gin-border-m);
|
|
}
|
|
}
|
|
|
|
&__sub-title {
|
|
font-size: var(--gin-font-size-xl);
|
|
letter-spacing: -.01em;
|
|
margin-bottom: 1.275rem;
|
|
|
|
a {
|
|
padding: .9rem var(--gin-spacing-s);
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
border-top: 0 none;
|
|
border-left: 0 none;
|
|
border-bottom: 0 none;
|
|
|
|
.toolbar-icon {
|
|
font-size:var(--gin-font-size);
|
|
display: block;
|
|
width: 100%;
|
|
max-width: calc(100% - var(--gin-spacing-l));
|
|
padding: var(--gin-spacing-s) var(--gin-spacing-xl) var(--gin-spacing-s) var(--gin-spacing-s);
|
|
margin: .25em var(--gin-spacing-s);
|
|
border-radius: var(--gin-border-m);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Shadow as scrolling indicator
|
|
&, .toolbar-menu {
|
|
background: linear-gradient(var(--gin-bg-layer) 30%, var(--gin-bg-layer)),
|
|
linear-gradient(var(--gin-bg-layer), var(--gin-bg-layer) 80%) 0 100%,
|
|
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)),
|
|
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;
|
|
background-color: var(--gin-bg-layer);
|
|
background-repeat: no-repeat;
|
|
background-attachment: local, local, scroll, scroll;
|
|
background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px;
|
|
}
|
|
|
|
.toolbar-menu {
|
|
background-size: 100% 40px, 100% 40px, 100% 24px, 100% 24px;
|
|
}
|
|
}
|
|
|
|
.menu-item.hover-intent > .toolbar-menu,
|
|
.menu-item:focus-within > .toolbar-menu {
|
|
z-index: 2;
|
|
display: block;
|
|
border-right: 1px solid rgba(0,0,0,.075);
|
|
box-shadow: 7px 0 16px rgba(0,0,0,.075),
|
|
-12px 0 0 0 var(--gin-bg-layer);
|
|
}
|
|
|
|
.menu-item .menu-item:hover > .toolbar-icon,
|
|
.menu-item .menu-item:hover > .toolbar-box .toolbar-icon {
|
|
color: var(--gin-color-primary-hover);
|
|
background: var(--gin-color-primary-light);
|
|
}
|
|
}
|
|
|
|
// Hide Drupal's default toggle for sidebar
|
|
.toolbar .toolbar-toggle-orientation button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.toolbar .toolbar-icon.toolbar-handle:focus {
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
#toolbar-item-administration-search-tray input {
|
|
width: 100%;
|
|
max-width: calc(100% - var(--gin-spacing-m));
|
|
outline: none;
|
|
}
|
|
|
|
.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
|
|
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
|
|
position: relative;
|
|
|
|
&::before {
|
|
z-index: 1;
|
|
top: 1em;
|
|
right: 20px;
|
|
}
|
|
}
|
|
|
|
// New Main level hover; needs refactoring at some point.
|
|
.toolbar-menu-administration > .toolbar-menu > .menu-item {
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
&:hover > .toolbar-icon,
|
|
&:hover > .toolbar-box > a.toolbar-icon,
|
|
> .toolbar-icon:focus,
|
|
&.menu-item--active-trail > .toolbar-icon,
|
|
&.menu-item--active-trail:hover > .toolbar-icon,
|
|
&.menu-item--active-trail > .toolbar-box > a.toolbar-icon {
|
|
@include mq(medium) {
|
|
color: var(--gin-color-primary-hover);
|
|
box-shadow: none;
|
|
|
|
&::before {
|
|
background: var(--gin-color-primary-active);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: calc((var(--gin-toolbar-width-collapsed) - var(--gin-spacing-xl) - var(--gin-spacing-xs)) / 2 - 9px);
|
|
width: calc(100% - 10px);
|
|
height: 42px;
|
|
background: var(--gin-color-primary-light);
|
|
border-radius: var(--gin-border-m);
|
|
}
|
|
|
|
&:focus {
|
|
background: transparent;
|
|
|
|
&::after {
|
|
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.menu-item--active-trail > .toolbar-icon,
|
|
&.menu-item--active-trail > .toolbar-box > a.toolbar-icon,
|
|
> .toolbar-icon.is-active {
|
|
@include mq(medium) {
|
|
&::after {
|
|
background: var(--gin-bg-item-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// New navigation approach.
|
|
// .toolbar-fixed[data-toolbar-menu=open] {
|
|
// @include mq(medium) {
|
|
// padding-left: calc(var(--gin-toolbar-width-collapsed) + var(--gin-toolbar-width));
|
|
|
|
// .toolbar-menu-administration > .toolbar-menu > .menu-item--active-trail > .toolbar-menu {
|
|
// z-index: 1;
|
|
// display: block;
|
|
// border-right: 1px solid var(--gin-border-color-layer);
|
|
// box-shadow: 7px 0 16px rgba(0,0,0,.075);
|
|
|
|
// > li {
|
|
// float: none;
|
|
// }
|
|
// }
|
|
|
|
// .toolbar-menu-administration > .toolbar-menu > .menu-item:not(.menu-item--active-trail) > .toolbar-menu {
|
|
// box-shadow: none;
|
|
// }
|
|
|
|
// // Submenu
|
|
// .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-menu > .menu-item:hover .toolbar-menu,
|
|
// .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-menu > .menu-item.menu-item--active-trail .toolbar-menu {
|
|
// position: relative;
|
|
// opacity: 1;
|
|
// display: block;
|
|
// margin-left: var(--gin-spacing-l);
|
|
// border-left-color: var(--gin-color-text-light);
|
|
// height: auto;
|
|
|
|
// .menu-item-title {
|
|
// display: none;
|
|
// }
|
|
|
|
// .toolbar-icon {
|
|
// padding: .75em;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|