matze/farmOS-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean install

Browse Source
This commit is contained in:
matze
2024-12-10 15:08:16 +01:00
commit e14eb2d8fd
31193 changed files with 3555714 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
web/themes/gin/styles/components/ajax.scss Normal file
View File

@@ -0,0 +1,111 @@
@keyframes gin-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
// Normal Throbber
.ajax-progress {
&__throbber {
border: 3px solid var(--gin-color-primary);
border-right: 3px dotted transparent;
}
.ajax-progress__message {
color: var(--gin-color-text);
}
&--fullscreen {
[dir].gin--dark-mode & {
background-color: var(--gin-color-primary);
border-color: transparent;
box-shadow: 0 2px 6px 0 var(--gin-bg-app);
.ajax-progress__throbber {
border: 3px solid var(--gin-bg-app);
border-right: 3px dotted transparent;
}
}
}
}
// Media library Throbber
.media-library-widget {
.ajax-progress__throbber {
border: 2px solid var(--gin-color-primary);
border-right: 2px dotted transparent;
}
}
// UI Dialog Throbber
.ui-dialog .ajax-progress-throbber {
padding: var(--gin-spacing-xs);
background: var(--gin-bg-app);
border-radius: 50%;
box-shadow: 0 2px 6px 0 rgba(34, 35, 48, 0.1);
border: 1px solid rgba(216, 217, 224, 0.8);
.gin--dark-mode & {
background-color: var(--gin-color-primary);
border-color: transparent;
box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}
}
.ui-dialog .ajax-progress-throbber,
.contextual-links .ajax-progress-throbber {
&::before {
content: "";
display: block;
position: absolute;
top: var(--gin-spacing-xs);
left: var(--gin-spacing-xs);
width: 1.125rem;
height: 1.125rem;
border: 2px solid var(--gin-color-primary);
border-right: 2px dotted transparent;
border-radius: 50%;
animation: gin-throbber 0.75s linear infinite;
}
}
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber,
.media-library-item .ajax-progress__throbber {
@extend .ajax-progress__throbber;
}
// Darkmode background.
.ui-dialog .ajax-progress,
.media-library-item .ajax-progress.ajax-progress.ajax-progress {
.gin--dark-mode & {
background-color: var(--gin-bg-app);
border-color: var(--gin-bg-app);
}
}
.contextual-links {
li {
position: relative;
}
.ajax-progress-throbber {
position: absolute;
top: 0;
right: var(--gin-spacing-xxs);
width: 24px;
height: 24px;
&::before {
top: 0;
left: .25em;
}
}
}
.claro-autocomplete__message {
color: var(--gin-color-primary);
}

120
web/themes/gin/styles/components/autocomplete.scss Normal file
View File

@@ -0,0 +1,120 @@
.ui-autocomplete,
.ui-dialog .ui-autocomplete {
color: var(--gin-color-text);
background: var(--gin-bg-input);
border-radius: 0 0 var(--gin-border-m) var(--gin-border-m);
.ui-menu-item-wrapper.ui-state-active {
color: var(--gin-color-primary-hover);
background-color: var(--gin-bg-item-hover);
}
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
&,
.ui-dialog & {
border: none;
}
}
.ui-autocomplete .ui-menu-item a {
color: var(--gin-color-text);
&:hover {
color: var(--gin-color-primary-hover);
background-color: var(--gin-bg-item-hover);
}
}
.ui-widget.ui-widget-content {
padding: 0;
border: 1px solid var(--gin-border-color);
}
.js .form-autocomplete {
transition: var(--gin-transition), background-position none;
}
.js .form-autocomplete.is-autocompleting,
.js input.form-autocomplete.ui-autocomplete-loading,
div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
background-image: none;
}
.form-autocomplete.is-autocompleting + .claro-autocomplete__message,
div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
display: block;
&::after {
content: "";
position: absolute;
top: 35px;
right: 12px;
display: block;
text-align: right;
border: 2px solid var(--gin-bg-input);
border-radius: 50%;
border-top: 2px solid var(--gin-color-primary);
width: 14px;
height: 14px;
animation: gin-throbber 1s linear infinite;
}
}
div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
&::after {
top: 2px;
}
}
// Autocomplete Deluxe
div.autocomplete-deluxe-multiple {
color: var(--gin-color-text);
background: var(--gin-bg-input);
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
transition: var(--gin-transition);
}
.autocomplete-deluxe-container {
input.autocomplete-deluxe-form {
min-height: 0;
background: none;
}
}
.autocomplete-deluxe-item {
color: var(--gin-color-primary-hover);
padding: 6px var(--gin-spacing-l) 6px 12px;
background-color: var(--gin-color-primary-light-hover);
border-radius: var(--gin-border-l);
border: 0 none;
box-shadow: none;
&:hover,
&:active {
color: var(--gin-color-button-text);
background-color: var(--gin-color-primary);
}
.autocomplete-deluxe-item-delete {
top: 6px;
right: 6px;
mask-image: icon("close");
mask-size: 10px 10px;
mask-repeat: no-repeat;
mask-position: center;
background: var(--gin-color-primary);
}
&:hover .autocomplete-deluxe-item-delete,
.autocomplete-deluxe-item-delete:hover {
background: var(--gin-color-button-text);
}
}

6
web/themes/gin/styles/components/autosave.scss Normal file
View File

@@ -0,0 +1,6 @@
#autosave-notification {
font-size: var(--gin-font-size-s);
bottom: var(--gin-spacing-xs);
right: var(--gin-spacing-xs);
border-radius: var(--gin-border-xs);
}

122
web/themes/gin/styles/components/breadcrumb.scss Normal file
View File

@@ -0,0 +1,122 @@
.gin-breadcrumb {
color: var(--gin-color-text);
padding: 0;
&-wrapper {
min-width: 1px; // Fixes ellipsis with flex overfloating issue.
}
&__list {
list-style-type: none;
padding: 0;
margin: 0;
width: auto;
text-overflow: ellipsis;
overflow: hidden;
padding-left: var(--gin-spacing-xxs);
margin-top: 0;
margin-left: calc(var(--gin-spacing-xxs) * -1);
}
&__item,
&__link,
&__text {
display: inline;
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-text-light);
text-decoration: none;
vertical-align: middle;
}
&__item {
font-size: 0;
}
&__item + &__item::before {
content: "/";
opacity: .3;
font-size: var(--gin-font-size-xs);
vertical-align: middle;
display: inline-block;
padding: 0 .5em;
background: none;
@media (forced-colors: active) {
opacity: 1;
}
}
&__item:first-of-type &__link {
position: relative;
padding-left: 1.75em;
&::before {
content: "";
display: inline-block;
position: absolute;
top: calc(50% - 1px);
left: 0;
width: var(--gin-icon-size-toolbar-secondary);
height: var(--gin-icon-size-toolbar-secondary);
transform: translateY(-50%);
background-color: var(--gin-icon-color);
mask-image: icon('backtosite');
mask-size: 100% 100%;
mask-position: center center;
// forced color style for breadcrumbs
@media (forced-colors: active) {
background: linktext;
}
}
&:hover::before {
background-color: var(--gin-color-primary);
@media (forced-colors: active) {
background: linktext;
}
}
}
&__item:first-of-type + &__item::before {
content: "";
opacity: .3;
border-right: 1px solid var(--gin-color-text);
width: 1px;
height: 20px;
padding-left: .75em;
padding-right: 0;
margin-right: .75em;
@media (forced-colors: active) {
opacity: 1;
}
}
&__link,
&__text {
font-size: var(--gin-font-size-xs);
line-height: 2; // make sure we have enough room for focus ring
border-radius: var(--gin-border-xxs);
&, em {
&, &:link, &:visited {
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-text-light);
}
}
em {
font-style: italic;
}
}
&__link {
&:hover {
&, em {
color: var(--gin-color-primary-hover);
}
}
}
}

31
web/themes/gin/styles/components/chosen.scss Normal file
View File

@@ -0,0 +1,31 @@
.form-element.chosen-container-single {
width: auto !important;
padding: 0;
.chosen-single {
min-width: 160px;
background: none;
border: none;
box-shadow: none;
width: 100%;
height: 100%;
display: block;
line-height: 1.5rem;
padding: calc(var(--gin-spacing-s) - 1px) calc(var(--gin-spacing-m) - 1px);
b {
background: none !important;
}
}
}
.form-element.chosen-container-multi {
width: auto !important;
.chosen-choices {
min-width: 160px;
border: 0 none;
background: none;
box-shadow: none;
}
}

167
web/themes/gin/styles/components/ckeditor.scss Normal file
View File

@@ -0,0 +1,167 @@
.cke.cke {
.cke_inner,
.cke_wysiwyg_frame,
.cke_wysiwyg_div {
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
}
&.cke_chrome {
width: 100% !important; // Fix issue with field_group
border-color: var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
}
.cke_inner {
border-radius: var(--gin-border-m);
}
.cke_top {
background: var(--gin-bg-layer);
border-bottom: 1px solid var(--gin-border-color);
border-radius: calc(var(--gin-border-m) - 1px) calc(var(--gin-border-m) - 1px) 0 0;
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
}
.cke_bottom {
background: var(--gin-bg-layer3);
border-radius: 0 0 calc(var(--gin-border-m) - 1px) calc(var(--gin-border-m) - 1px);
}
.cke_contents {
padding-left: var(--gin-spacing-xs);
padding-right: var(--gin-spacing-xs);
}
.cke_path_empty:only-child::after {
background: transparent;
}
.cke_combo {
&::after {
border-right: 1px solid var(--gin-border-color);
}
}
.cke_combo_text {
color: var(--gin-color-text);
}
.cke_combo_on a.cke_combo_button,
.cke_combo_off a.cke_combo_button:hover,
.cke_combo_off a.cke_combo_button:focus,
.cke_combo_off a.cke_combo_button:active {
background: var(--gin-bg-app);
border: 1px solid var(--gin-bg-layer2);
}
a.cke_path_item,
span.cke_path_empty {
color: var(--gin-color-text-light);
}
a.cke_button {
border-radius: 3px;
}
a.cke_button_on {
background: none;
}
a.cke_button_off {
&:hover,
&:focus,
&:active {
background: var(--gin-bg-item-hover);
border: 1px solid var(--gin-border-color-layer2);
}
}
.cke_button {
span {
.gin--dark-mode & {
filter: invert(1);
}
}
}
&.cke_panel {
background-color: var(--gin-bg-app);
border: 0 none;
}
}
.cke.cke_chrome.cke_focus,
.cke.cke_chrome:hover,
.cke:hover .cke_contents,
.cke:hover .cke_top,
.cke:hover .cke_bottom {
border-color: var(--gin-color-text);
.gin--dark-mode & {
border-color: var(--gin-border-color-layer2);
}
}
.cke:hover .cke_top {
&,
.gin--dark-mode & {
border-bottom-color: var(--gin-border-color);
}
}
.cke.cke_chrome.cke_focus:hover,
.cke.cke_focus .cke_contents,
.cke.cke_focus .cke_top,
.cke.cke_focus .cke_bottom,
.error + .cke.cke_chrome.cke_focus:hover,
.error + .cke.cke_focus .cke_contents,
.error + .cke.cke_focus .cke_top,
.error + .cke.cke_focus .cke_bottom {
border-color: var(--gin-color-text);
}
.cke_top,
.cke.cke_chrome.cke_focus:hover .cke_top,
.cke.cke_focus .cke_top,
.error + .cke.cke_focus .cke_top,
.error + .cke.cke_chrome.cke_focus:hover .cke_top {
border-bottom: 1px solid var(--gin-border-color);
}
.cke textarea.cke_source {
padding: var(--gin-spacing-s) var(--gin-spacing-xs);
color: var(--gin-color-text);
background-color: transparent;
}
body .cke_notification_info {
opacity: 1;
padding: var(--gin-spacing-xs);
background: var(--gin-bg-layer4);
border: 0 none;
border-radius: var(--gin-border-m);
box-shadow: var(--gin-shadow-l1);
.cke_notification_message {
color: var(--gin-color-text);
}
.cke_notification_close {
top: var(--gin-spacing-xxs);
right: var(--gin-spacing-xxs);
background: var(--gin-color-text);
mask-image: icon('close');
mask-position: center center;
mask-repeat: no-repeat;
mask-size: 12px 12px;
}
}
.filter-tips {
color: var(--gin-color-text-light);
}

122
web/themes/gin/styles/components/ckeditor5.scss Normal file
View File

@@ -0,0 +1,122 @@
.ck {
--ck-spacing-small: var(--gin-spacing-xxs);
--ck-color-text: var(--gin-color-text);
--ck-color-toolbar-background: var(--gin-bg-layer3);
--ck-color-toolbar-border: var(--gin-border-color-form-element);
--ck-color-base-foreground: var(--gin-bg-layer3);
--ck-color-base-background: var(--gin-bg-input);
--ck-color-base-border: var(--ck-color-toolbar-border);
--ck-color-list-button-on-text: var(--gin-color-button-text);
--ck-color-list-button-on-background: var(--gin-color-primary);
--ck-color-list-button-on-background-focus: var(--gin-color-primary-hover);
--ck-color-list-button-hover-background: var(--gin-color-primary-light-hover);
--ck-color-panel-background: var(--gin-bg-layer3);
--ck-color-panel-border: transparent;
--ck-color-button-default-background: transparent;
--ck-color-button-default-hover-background: var(--gin-color-primary-light);
--ck-color-button-default-active-background: var(--gin-color-primary-light-active);
--ck-color-button-default-disabled-background: transparent;
--ck-color-button-on-color: var(--gin-color-primary);
--ck-color-button-on-background: var(--gin-color-primary-light);
--ck-color-button-on-hover-background: var(--gin-color-primary-light-hover);
--ck-color-button-on-active-background: var(--gin-color-primary-active);
--ck-color-split-button-hover-background: var(--gin-bg-layer2);
--ck-color-split-button-hover-border: var(--gin-border-color-layer);
--ck-color-button-save: var(--gin-color-green);
--ck-color-button-cancel: var(--gin-color-danger);
--ck-color-link-default: var(--gin-color-primary);
--ck-color-link-selected-background: var(--gin-bg-item-hover);
--ck-color-input-background: var(--gin-bg-input);
--ck-color-input-border: var(--gin-border-color-form-element);
--ck-color-labeled-field-label-background: var(--gin-bg-layer3);
--ck-color-list-background: var(--gin-bg-layer3);
--ck-focus-ring: 1px solid var(--gin-color-focus);
--ck-focus-outer-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
--ck-inner-shadow: var(--ck-focus-outer-shadow);
--ck-drop-shadow: var(--gin-shadow-l2);
--ck-color-focus-border: var(--gin-color-primary);
--ck-color-widget-type-around-button-active: var(--gin-color-primary);
--ck-color-widget-blurred-border: var(--gin-color-primary-hover);
--ck-color-widget-hover-border: var(--gin-color-text);
--ck-color-widget-type-around-button-hover: var(--gin-color-text);
--ck-color-image-caption-text: var(--gin-color-text-light);
--ck-color-image-caption-background: transparent;
--ck-border-radius: var(--gin-border-m);
// Overrides
.ck-content blockquote,
.ck.ck-dropdown__panel {
border: none;
}
&.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
z-index: 2;
top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;
}
.ck-toolbar__separator {
opacity: .3;
}
.ck-toolbar_grouping:focus,
.ck-toolbar__items:focus {
box-shadow: none;
}
.ck.ck-editor__editable_inline {
padding: 0 var(--gin-spacing-s);
}
.ck-button[aria-pressed=true] {
color: var(--gin-color-primary-active);
border: 2px solid var(--gin-color-primary);
}
.ck-button.ck-source-editing-button {
padding-left: var(--gin-spacing-m);
}
&.ck-button:not(.ck-disabled):hover {
color: var(--gin-color-primary-active);
}
.ck-source-editing-area {
overflow: inherit;
}
textarea {
color: var(--ck-color-text);
background: var(--ck-color-base-background);
&:focus {
outline: none;
box-shadow: var(--ck-focus-outer-shadow);
}
}
.ck.ck-media-alternative-text-form .ck-button {
border: none;
}
.ck-content .drupal-media > figcaption {
color: var(--ck-color-image-caption-text);
background: var(--ck-color-image-caption-background);
}
}

46
web/themes/gin/styles/components/coffee.scss Normal file
View File

@@ -0,0 +1,46 @@
#coffee-form {
padding: var(--gin-spacing-xxs);
background: #000;
border-radius: var(--gin-border-l);
#coffee-form-inner,
#coffee-q {
color: var(--gin-color-title);
background: var(--gin-bg-layer);
border-radius: var(--gin-border-m);
}
#coffee-results {
a {
color: var(--gin-color-title);
border-radius: var(--gin-border-m);
.description {
color: var(--gin-color-text-light);
padding-top: var(--gin-spacing-xxs);
}
&:hover,
&.ui-state-active {
background: var(--gin-color-primary);
&, .description {
color: var(--gin-color-button-text);
}
.description {
opacity: .9;
}
}
}
}
.ui-autocomplete {
background: transparent;
box-shadow: none;
.ui-menu-item-wrapper {
padding: var(--gin-spacing-m);
}
}
}

111
web/themes/gin/styles/components/contextual_links.scss Normal file
View File

@@ -0,0 +1,111 @@
.contextual {
z-index: 100;
.trigger {
width: 32px !important;
height: 32px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
border-radius: 50%;
box-sizing: border-box;
// Icon
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: .75rem;
height: .75rem;
mask-image: icon('media-edit');
mask-size: var(--gin-spacing-s) var(--gin-spacing-s);
mask-position: 100% 100%;
background: var(--gin-color-primary);
}
&,
&:hover,
&:focus {
background: var(--gin-bg-layer3);
border: 1px solid var(--gin-border-color-layer2);
}
&:hover,
&:focus {
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus);
}
}
// Open trigger
&.open .trigger {
border-radius: 50%;
border-bottom: 0 none;
}
}
.contextual-region .contextual {
// Contextual Link list
.contextual-links {
top: var(--gin-spacing-xxs);
padding: .5em;
margin: 0;
min-width: 120px;
background: var(--gin-bg-layer3);
border: 0 none;
border-radius: var(--gin-border-l);
box-shadow: var(--gin-shadow-l2);
li {
background: transparent;
a {
font-family: var(--gin-font);
color: var(--gin-color-primary);
line-height: 1;
white-space: nowrap;
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
margin: 0;
background: transparent;
border-radius: var(--gin-border-s);
&:hover, &:active {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
}
&:focus {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus);
}
}
}
// Throbber
.ajax-progress-throbber {
top: .125rem;
background: var(--gin-color-primary);
border-radius: 50%;
&::before {
top: var(--gin-spacing-xxs);
left: var(--gin-spacing-xxs);
width: 1rem;
height: 1rem;
border: 2px solid var(--gin-color-button-text);
border-right: 2px dotted transparent;
}
}
}
}
.no-touchevents .contextual-region .contextual {
.contextual-links li a {
&:hover, &:active {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
}
}
}

98
web/themes/gin/styles/components/description_toggle.scss Normal file
View File

@@ -0,0 +1,98 @@
// Base wrapper
.help-icon {
display: flex;
}
// Size of svg + border added by claro
.help-icon__description-toggle {
all: unset;
flex-shrink: 0;
margin: .1rem var(--gin-spacing-m) 0 .3rem;
height: 16px;
width: 16px;
border-radius: 50%;
&:before {
background-color: var(--gin-icon-color);
content: "";
display: block;
width: 100%;
height: 100%;
mask-image: icon('help');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% 100%;
}
&:hover:before {
background-color: var(--gin-color-primary);
}
}
.form-type--checkbox,
.form-type--radio {
> .help-icon__element-has-description {
display: flex;
align-items: normal;
> label {
margin-left: 6px;
}
}
.checkbox-toggle + .help-icon {
padding-left: var(--gin-spacing-xxs);
}
}
.form-type-checkbox {
.help-icon__element-has-description {
.checkbox-toggle {
width: 50px !important;
}
}
}
// Detail summary
.field-group-details.help-icon__description-container .help-icon__description-toggle {
margin-top: 0;
}
// Fieldgroup adjustments
fieldset:not(.fieldgroup) {
.help-icon {
> .fieldset__legend .fieldset__label {
padding-right: 0;
}
}
}
.field-group-fieldset >,
fieldset.media-library-widget,
.field--type-datetime fieldset {
.help-icon {
> .help-icon__description-toggle {
margin-top: 1rem;
}
}
.fieldset__description {
padding-left: var(--gin-spacing-m);
@include mq(small) {
padding-left: var(--gin-spacing-l);
}
}
}
// System Modules Search fields
.system-modules .table-filter .form-type--search,
.system-modules-uninstall .table-filter .form-type--search {
position: relative;
.help-icon__description-toggle {
position: absolute;
right: calc(var(--gin-spacing-xs) * -1);
top: var(--gin-spacing-m);
}
}

251
web/themes/gin/styles/components/dialog.scss Normal file
View File

@@ -0,0 +1,251 @@
.ui-dialog:not(.ui-dialog-off-canvas) {
max-width: $breakpointWide;
border: 0 none !important;
border-radius: var(--gin-border-m);
background: var(--gin-bg-layer);
@media (forced-colors: active) {
border: 1px solid buttonBorder !important;
}
// Dialog without title
.ui-dialog-content:first-of-type {
border-top-left-radius: var(--gin-border-m);
border-top-right-radius: var(--gin-border-m);
}
// Node actions placement
.layout-region-node-actions {
position: absolute;
bottom: 0;
left: var(--gin-spacing-m);
top: auto;
right: auto;
}
// Show meta full width
.layout-region-node-secondary {
width: 100%;
}
// Views exposed form override for dialog
.views-exposed-form.views-exposed-form,
.views-displays {
border: 1px solid var(--gin-border-color-layer);
}
}
@include mq($to: small) {
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog {
position: absolute;
/*rtl:ignore*/
left: 0;
top: 0;
font-family: var(--gin-font);
outline: none;
&,
&:focus,
&:focus:active,
&:focus:hover {
box-shadow: var(--gin-shadow-l1);
}
.ui-dialog-titlebar {
line-height: 1.2;
padding: var(--gin-spacing-m) var(--gin-spacing-l);
background: $colorDarkAppBackground;
border: 0 none;
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
position: relative;
@media (forced-colors: active) {
border-bottom: 1px solid buttonBorder;
}
}
.ui-dialog-title {
font-size: var(--gin-font-size-l);
font-weight: var(--gin-font-weight-normal);
color: #fff;
width: 100%;
padding-right: var(--gin-spacing-xl);
box-sizing: border-box;
}
.ui-dialog-content {
color: var(--gin-color-text);
}
.ui-widget-content.ui-dialog-buttonpane {
padding: var(--gin-spacing-s) var(--gin-spacing-l);
border-top: 1px solid var(--gin-border-color-layer);
border-bottom-left-radius: var(--gin-border-m);
border-bottom-right-radius: var(--gin-border-m);
background: var(--gin-bg-app);
.button {
font-weight: var(--gin-font-weight-heavy);
margin-top: 0;
margin-bottom: 0;
&:last-of-type {
margin-right: 0;
}
}
}
.ui-widget-content.ui-dialog-buttonpane,
[data-drupal-selector*="-remove-form"] {
.button.button--danger {
border-color: var(--gin-color-danger) !important;
}
}
.ui-dialog-buttonset {
margin-top: 0;
}
.ui-dialog-titlebar-close {
position: absolute;
top: 50%;
left: auto;
right: 0;
width: 2rem;
height: 2rem;
opacity: .8;
margin: 0 var(--gin-spacing-m);
transform: translateY(-50%);
background: none;
border: none;
.ui-icon-closethick {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
transform: none;
background: #fff;
mask-image: icon('close');
mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
mask-repeat: no-repeat;
mask-position: center center;
@media (forced-colors: active) {
background: linktext;
}
}
&:hover {
opacity: 1;
}
}
.ui-widget-content.ui-dialog-content {
padding-left: var(--gin-spacing-l);
padding-right: var(--gin-spacing-l);
background: var(--gin-bg-layer);
}
.gin-layer-wrapper {
margin-bottom: var(--gin-spacing-l);
}
}
.erl-overlay,
.layout-paragraphs-dialog {
position: fixed !important;
top: 50% !important;
left: 50% !important;
width: calc(100% - var(--gin-spacing-xl)) !important;
transform: translate(-50%, -50%);
@include mq(large) {
width: calc(100% - var(--gin-spacing-xxxl)) !important;
}
}
ul.paragraphs-add-dialog-list {
margin: var(--gin-spacing-l) 0;
}
.ui-widget-overlay {
opacity: .9;
background: var(--gin-bg-layer2);
}
.views-ui-dialog {
.views-offset-bottom {
border-top: 1px solid var(--gin-border-color);
@media (forced-colors: active) {
border-top: none;
}
}
}
.ui-widget-content a {
color: var(--gin-color-primary);
}
// Off canvas dialog.
.ui-widget.ui-dialog.ui-dialog-off-canvas {
--gin-offcanvas-active: var(--gin-color-primary);
background: #444;
border: 0 none;
box-shadow: 0 0 48px rgba(0, 0, 0, .075);
.ui-dialog-titlebar {
background: $colorDarkAppBackground;
border-radius: 0;
}
.ui-resizable-w {
border: 0 none;
background-color: transparent;
}
.fieldset {
color: var(--gin-color-text);
}
#drupal-off-canvas {
.button--primary[type=submit] {
background: var(--gin-offcanvas-active);
}
}
}
// Scroll
.ui-dialog .ui-widget-content.ui-dialog-content {
overflow: auto;
}
// Webform Off canvas
.ui-dialog.webform-off-canvas .ui-widget-content.ui-dialog-content {
background: var(--gin-bg-layer);
}
// Token
table.treetable {
tr.branch {
background-color: transparent;
}
}
.ui-dialog .gin-layer-wrapper {
margin-bottom: var(--gin-spacing-l);
margin-top: var(--gin-spacing-l);
}
// Removes spacing from views dialog
.views-ui-dialog.views-ui-dialog > .ui-dialog-content {
padding: 0;
}

13
web/themes/gin/styles/components/dropzonejs.scss Normal file
View File

@@ -0,0 +1,13 @@
.dropzone {
margin: 0;
background: var(--gin-bg-layer2);
border: 0 none;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2300000066' stroke-width='5' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: var(--gin-border-m);
// Dropping
&.dz-drag-hover {
border: 0 none;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23000000' stroke-width='5' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}
}

262
web/themes/gin/styles/components/edit_form.scss Normal file
View File

@@ -0,0 +1,262 @@
// Node layout
.gin--edit-form {
// Has sidebar, save the space
@include mq(large) {
padding-right: var(--gin-sidebar-offset);
.dialog-off-canvas-main-canvas {
transition: padding-left var(--gin-transition-fast);
}
// If off-canvas dialog is shown
&.js-off-canvas-dialog-open {
padding-right: 0;
// Hide sidebar when off-canvas is shown
.layout-region.layout-region-node-secondary {
visibility: hidden;
opacity: 0;
}
}
}
// Hide delete Tab
[data-drupal-link-system-path*="/delete"] {
display: none;
}
// Hide edit secondary toolbar item
.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .contextual-toolbar-tab {
display: none;
}
.layout-node-form {
overflow: inherit;
display: block;
}
.layout-region-node-main,
.layout-region-node-secondary
.layout-region-node-footer {
float: none;
}
.layout-region-node-main,
.layout-region-node-footer {
width: 100%;
padding-right: 0;
@include mq(large) {
flex-basis: 40%;
flex-shrink: 1;
flex-grow: 1;
min-width: 0;
}
}
.page-wrapper__node-edit-form {
.block-page-title-block {
@include mq(1730px) {
width: 100%;
}
.page-title {
@include mq(large) {
width: auto;
margin: 0;
overflow: hidden;
}
}
}
.block-local-tasks-block,
.block-system-main-block,
.messages-list,
.node-form,
.node-confirm-form,
.admin-list,
.help {
width: 100%;
max-width: $breakpointWide;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.layout-region-node-secondary {
z-index: 103;
width: var(--gin-sidebar-width);
height: calc(100% - var(--gin-toolbar-y-offset));
position: fixed;
top: var(--gin-toolbar-y-offset);
right: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background:var(--gin-bg-layer);
border-left: 1px solid var(--gin-border-color-layer);
transition: all var(--gin-transition-fast);
.gin--dark-mode & {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.gin-sidebar {
.form-actions {
margin: 0;
.action-link {
margin-top: var(--gin-spacing-xs);
margin-bottom: 0;
}
}
}
.field--name-revision-log,
.field--name-revision-log-message {
margin-top: var(--gin-spacing-l);
}
.accordion {
background: none;
border: 0 none;
box-shadow: none;
}
.entity-meta {
$sidebarSpacer: 1.5rem;
&__header {
color: var(--gin-color-text);
padding-left: $sidebarSpacer;
padding-right: $sidebarSpacer;
background-color: var(--gin-bg-layer);
border: 0 none;
@include mq($to: medium) {
padding-top: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
padding-right: var(--gin-spacing-l);
}
}
&__title {
color: var(--gin-color-title);
font-weight: var(--gin-font-weight-semibold);
margin-top: var(--gin-spacing-xxs);
margin-bottom: var(--gin-spacing-m);
text-shadow: none;
}
> .accordion__item {
margin: 0;
border: 0 none;
border-bottom: 1px solid var(--gin-border-color-layer);
border-radius: 0;
.gin--dark-mode & {
border-color: var(--gin-border-color);
}
> .claro-details__summary {
display: block;
padding-left: #{$sidebarSpacer + 1.5rem};
.details-title {
position: static;
padding-left: 0;
}
&::before {
top: var(--gin-spacing-xl);
left: $sidebarSpacer;
}
&:focus::after {
border-radius: 6px;
}
}
.claro-details__content {
margin-left: $sidebarSpacer;
margin-right: $sidebarSpacer;
.claro-details__wrapper {
margin: var(--gin-spacing-l);
}
}
.redirect-table__path {
width: 47%;
}
.form-type--entity-autocomplete .claro-autocomplete {
width: 100%;
}
.form-datetime-wrapper {
.form-items-inline {
display: flex;
flex-wrap: wrap;
@include mq(tiny) {
flex-wrap: nowrap;
}
@include mq(large, wide) {
flex-wrap: wrap;
}
}
.form-type--date {
display: block;
flex-basis: 100%;
flex-grow: 1;
@include mq(tiny) {
flex-basis: 50%;
}
@include mq(large, wide) {
flex-basis: 100%;
}
&:first-of-type {
@include mq(tiny) {
margin-right: var(--gin-spacing-xs);
}
@include mq(large, wide) {
margin-right: 0;
}
}
&:nth-of-type(2) {
flex-basis: 134px;
}
.form-element {
min-width: 0;
width: 100%;
}
}
}
}
}
}
}
.revision-current {
background-color: var(--gin-color-primary-light-active);
}
.field--name-title .form-element {
font-size: var(--gin-font-size-h3);
font-weight: var(--gin-font-weight-semibold);
line-height: normal;
letter-spacing: -0.025em;
width: 100%;
padding-top: var(--gin-spacing-s);
padding-bottom: var(--gin-spacing-s);
}
}

173
web/themes/gin/styles/components/entity_browser.scss Normal file
View File

@@ -0,0 +1,173 @@
// Entity list in widget and browser selection.
.entities-list {
&:not(.entities-list--single-item) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: var(--gin-spacing-m);
margin-bottom: var(--gin-spacing-m);
}
&.entities-list--single-item .item-container {
max-width: 180px;
}
.item-container {
word-break: break-all;
position: relative;
margin: 0;
min-height: 80px;
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-l);
.field__item {
border: 3px solid transparent;
border-radius: var(--gin-border-xl);
overflow: hidden;
&:hover,
&:focus {
border-color: var(--gin-color-primary) !important;
cursor: pointer;
}
}
&.label {
padding: var(--gin-spacing-s) var(--gin-spacing-xxl) var(--gin-spacing-s) var(--gin-spacing-s);
}
img {
vertical-align: middle;
}
> .entity-browser-remove-selected-entity,
> .remove-button {
@include custom-icon-button('trash');
position: absolute;
top: 0;
right: 0;
}
> .replace-button,
> .edit-button {
@include custom-icon-button('edit');
position: absolute;
top: 0;
right: 2.6rem;
}
}
}
// Entity list in table views.
table.entities-list {
&:not(.entities-list--single-item) {
display: block;
}
td {
height: auto;
padding: 10px 12px;
}
}
// Entity browser view in overlay
.gin-entity-browser {
.entity-browser-form {
padding: 0;
border: 0 none;
box-shadow: none;
.page-wrapper > .layout-container {
margin: 0;
}
.views-view-grid {
.views-col {
position: relative;
}
}
.view-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: var(--gin-spacing-m);
margin-bottom: var(--gin-spacing-m);
}
.views-row {
border: 1px solid var(--gin-border-color);
border-radius: calc(var(--gin-border-xl) + 2px);
position: relative;
.views-field-thumbnail__target-id {
&:hover,
&:focus {
cursor: pointer;
border-color: var(--gin-color-primary);
}
}
.views-field-name {
padding: var(--gin-spacing-xs);
}
.views-field-entity-browser-select {
position: absolute;
top: 0;
left: 0;
margin: var(--gin-spacing-s);
.form-item {
margin: 0;
}
}
}
.media-info {
word-wrap: break-word;
font-size: var(--gin-font-size-s);
}
.views-field-thumbnail__target-id {
border: 3px solid transparent;
border-radius: var(--gin-border-xl);
overflow: hidden;
&:hover,
&:focus {
border-color: var(--gin-color-primary);
}
}
.entities-list {
border-top: var(--gin-border-xs) solid var(--gin-border-color-form-element);
padding-top: var(--gin-spacing-m);
}
}
.views-exposed-form {
box-shadow: none;
}
}
// Widget sorting.
.field--widget-entity-browser-entity-reference {
.entities-list.sortable {
.item-container,
.field__item {
&:hover,
&:focus {
cursor: move;
opacity: 1;
}
}
}
}
.eb-tabs {
margin-left: var(--gin-spacing-xxs); // Fix for outline
margin-bottom: 0.75em;
ul {
border-bottom: none; // Remove superflous bottom.
}
}

221
web/themes/gin/styles/components/entity_reference_layout.scss Normal file
View File

@@ -0,0 +1,221 @@
.erl-field {
// Overlay
.layout-radio-item.active {
background: transparent;
}
}
// Disabled
.erl-field .erl-disabled-items,
.erl-field .erl-disabled-items.form-item.form-wrapper {
padding: var(--gin-spacing-m);
margin-bottom: -6rem;
background: #f1f1f3;
border-radius: var(--gin-border-m);
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
&, &:hover, &:active {
border: 0 none;
}
.fieldset__label {
padding: var(--gin-spacing-m) 0 var(--gin-spacing-l);
}
&__description {
font-size: var(--gin-font-size-s);
color: #999;
}
}
// Disabled items wrapper
.erl-disabled-items > .fieldset__wrapper {
margin: 0;
}
// Add content
.erl-field .erl-add-content {
&:focus {
outline: none;
box-shadow: none;
}
}
// Edit / Remove
.erl-field .erl-actions .erl-edit,
.erl-field .erl-actions .erl-remove {
&, &:hover {
box-shadow: none;
border-color: transparent !important;
border-radius: 50%;
}
}
// Add section button
.erl-field .erl-add-section,
.erl-field .erl-add-content--single button {
position: static;
display: block;
width: 100%;
color: var(--gin-color-primary);
line-height: 1.3;
background: var(--gin-bg-item-hover);
padding: var(--gin-spacing-m) var(--gin-spacing-m) 34px var(--gin-spacing-m);
border: 1px dashed var(--gin-color-primary);
border-radius: var(--gin-border-m);
transform: none;
&,
&:hover,
&:active {
text-decoration: none;
}
&:hover,
&:active {
color: var(--gin-color-primary-hover);
background: var(--gin-color-primary-light);
}
}
.erl-field {
.erl-item:last-of-type > .erl-add-content--single {
opacity: 1;
}
.erl-add-content--single {
button {
.icon {
margin-right: var(--gin-spacing-xs);
}
}
}
.layout-radio-item {
> div {
display: flex;
align-items: center;
}
.form-item {
margin-left: var(--gin-spacing-xs);
}
&.active {
outline: var(--gin-border-xs) solid var(--gin-color-focus);
}
}
}
.erl-layout-region:hover button.erl-add-content__toggle {
opacity: 1;
}
// ERL overlay
.erl-overlay {
.erl-form {
overflow-x: hidden;
overflow-y: visible;
max-height: 85vh !important;
}
}
// ERL overlay loader
.erl-overlay.erl-loading div.loading {
border-radius: 6px;
.gin--dark-mode & {
background: rgba(0, 0, 0, .3);
}
}
// Disabled item
.erl-disabled-wrapper .erl-item {
border-color: #fff;
&:not(:last-of-type) {
margin-bottom: var(--gin-spacing-m);
}
}
// Disabled description position
.erl-disabled-wrapper .erl-disabled-items__description {
top: var(--gin-spacing-m);
}
// Basic item styles
.erl-item {
label.paragraph-type-label,
label.paragraph-type--label {
margin: -1px;
position: absolute;
top: 12px;
left: 50%;
transform: translate(-50%);
border: 0 none;
font-style: normal;
color: var(--gin-color-text-light);
opacity: .75;
}
.layout-controls {
opacity: 1;
position: absolute;
left: var(--gin-spacing-xxs);
top: var(--gin-spacing-xs);
}
.paragraph {
.field {
line-height: 1.5;
margin: .5em 0;
}
.field--name-field-title {
font-weight: var(--gin-font-weight-heavy);
}
.field--type-image {
max-height: 400px;
overflow: hidden;
}
.field--name-field-paragraphs {
display: flex;
flex-wrap: wrap;
.field__item {
flex-basis: 100%;
margin-right: var(--gin-spacing-xs);
}
}
}
}
// Actions
.erl-item .erl-actions {
visibility: visible;
position: absolute;
right: var(--gin-spacing-xxs);
top: var(--gin-spacing-xs);
}
// Form wrapper
.erl-layout.erl-item.form-wrapper {
&:hover > button.erl-add-content__toggle,
&:hover > button.layout-paragraphs-add-content__toggle {
opacity: 1;
}
.erl-actions input.erl-edit,
.erl-actions input.erl-remove {
opacity: .75;
&:hover {
opacity: 1;
}
}
}

54
web/themes/gin/styles/components/inline_entity_form.scss Normal file
View File

@@ -0,0 +1,54 @@
.ief-entity-table {
.ief-row-form {
border: 1px solid var(--gin-border-color);
&:hover {
background: transparent;
}
td {
padding-bottom: 0;
}
.form-item {
margin-top: var(--gin-spacing-density-s);
margin-bottom: var(--gin-spacing-density-s);
}
}
}
.ief-form {
> .form-wrapper > .form-wrapper:last-of-type {
background: var(--gin-bg-layer2);
padding: 0 var(--gin-spacing-m);
margin: 0 calc(var(--gin-spacing-m) * -1);
}
}
.ief-form.ief-form-bottom {
border: 1px solid var(--gin-border-color);
.fieldset__wrapper {
margin-bottom: 0;
}
}
/* Fixes for 'Inline entity form - Complex' widgets inside paragraphs */
.paragraphs-tabs-wrapper .field-multiple-table {
.ief-entity-table .draggable {
display: table-row;
/* The .draggable padding is not applied because of display: table-row */
&.drag-previous > .tabledrag-cell::before {
left: var(--gin-spacing-xs);
}
.tabledrag-cell-content__item {
padding-left: var(--gin-spacing-s);
}
}
.ief-entity-operations {
display: flex;
}
}

659
web/themes/gin/styles/components/layout_paragraphs.scss Normal file
View File

@@ -0,0 +1,659 @@
.layout-paragraphs-field,
.erl-field {
border: 0 none;
box-shadow: none;
}
.layout-paragraphs-field .layout-paragraphs-layout,
.erl-field .erl-layout {
background: none;
.layout {
border-left: 1px solid var(--gin-border-color);
border-bottom: 1px solid var(--gin-border-color);
background: var(--gin-bg-layer);
border-bottom-left-radius: var(--gin-border-m);
border-bottom-right-radius: var(--gin-border-m);
}
.layout-controls,
.layout-paragraphs-actions,
.erl-actions {
background: transparent;
}
}
.layout-paragraphs-field {
// Overlay
.layout-radio-item.active {
background: transparent;
}
// Edit / Remove
.layout-paragraphs-actions {
.layout-paragraphs-edit,
.layout-paragraphs-remove {
&, &:hover {
box-shadow: none;
border-color: transparent !important;
border-radius: 50%;
}
}
}
.layout-paragraphs-item:last-of-type > .layout-paragraphs-add-content--single {
opacity: 1;
}
.layout-paragraphs-add-content--single {
button {
.icon {
margin-right: var(--gin-spacing-xs);
}
}
}
// Spacer
.active-items {
padding-bottom: var(--gin-spacing-xl);
}
.layout-handle,
.layout-up,
.layout-down {
font-size: 0;
}
// Layout selection
.layout-select {
&__item {
margin-left: 0;
input + label {
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-m);
}
input:checked + label {
border: 1px solid var(--gin-color-primary);
box-shadow: 0 0 0 1px var(--gin-color-primary);
outline: none;
}
}
}
.layout-radio-item {
> div {
display: flex;
align-items: center;
}
.form-item {
margin-left: var(--gin-spacing-xs);
}
&.active {
outline: var(--gin-border-xs) solid var(--gin-color-focus);
}
}
// Form wrapper
.layout-paragraphs-layout.layout-paragraphs-item {
// Item in layout
.layout-paragraphs-item {
margin-bottom: var(--gin-spacing-m);
&:last-of-type {
margin-bottom: var(--gin-spacing-s);
}
}
&:hover > button.layout-paragraphs-add-content__toggle {
opacity: 1;
}
.layout-paragraphs-actions input.layout-paragraphs-edit,
.layout-paragraphs-actions input.layout-paragraphs-remove {
opacity: .75;
&:hover {
opacity: 1;
}
}
.layout-controls,
.layout-paragraphs-actions {
height: 24px;
background-color: transparent;
}
}
// Paragraph preview
.paragraph--view-mode--preview {
padding-right: 0;
}
// Disabled wrapper
.layout-paragraphs-disabled-items > .fieldset__wrapper {
.layout-paragraphs-item {
border: var(--gin-border-xs) solid #fff;
&:not(:last-of-type) {
margin-bottom: var(--gin-spacing-m);
}
.layout-paragraphs-add-content__toggle {
display: none;
}
}
}
// Disabled items
.layout-paragraphs-disabled-items {
&__description {
margin-bottom: calc((var(--gin-spacing-xs) + var(--gin-spacing-xl)) * -1);
pointer-events: none;
}
&__items {
padding: 20px;
}
}
.layout-paragraphs-disabled-items,
.layout-paragraphs-disabled-items.form-item.form-wrapper {
padding: var(--gin-spacing-m);
margin-top: 0;
margin-bottom: -6rem;
background: #f1f1f3;
border-radius: var(--gin-border-m);
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
&, &:hover, &:active {
border: 0 none;
}
.fieldset__wrapper {
padding: 0;
margin: 0;
}
.fieldset__label {
padding: var(--gin-spacing-m) 0 var(--gin-spacing-l);
}
&__description {
font-size: var(--gin-font-size-s);
color: #999;
}
}
}
// Disabled wrapper
.layout-paragraphs-field .layout-paragraphs-disabled-items > .fieldset__wrapper,
.erl-field .erl-disabled-wrapper {
padding: var(--gin-spacing-xs);
background-color: transparent;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2300000045' stroke-width='5' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border: 0 none;
border-radius: var(--gin-border-m);
}
// Regions
.layout-paragraphs-layout-region,
.layout-paragraphs-field .layout-paragraphs-layout-region,
.layout-paragraphs-disabled-items,
.erl-layout-region,
.erl-field .erl-layout-region,
.erl-disabled-items {
padding: var(--gin-spacing-xs);
background: #fff;
box-shadow: none;
box-sizing: border-box;
&,
&:hover,
&:focus-within {
background: transparent;
border: 0 none;
border-top: 1px solid var(--gin-border-color);
border-right: 1px solid var(--gin-border-color);
&:last-of-type {
border-bottom-right-radius: var(--gin-border-m);
}
}
.layout-label {
display: none;
}
}
// Item
.layout-paragraphs-item,
.active-items .layout-paragraphs-item,
.layout-paragraphs-field.is-moving .layout-paragraphs-item:hover,
.erl-item,
.erl-field .erl-layout .erl-item,
.erl-field .erl-disabled-items .erl-item {
position: relative;
padding: calc(var(--gin-spacing-xl) + var(--gin-spacing-xs)) var(--gin-spacing-l) 0 var(--gin-spacing-l);
background: #fff;
border: var(--gin-border-xs) solid #fff;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2300000045' stroke-width='4' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: var(--gin-border-l);
&:not(:last-of-type) {
margin-bottom: var(--gin-spacing-xl);
}
&:hover,
&:active,
&:focus,
&:focus-within {
border-color: #fff;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23000000' stroke-width='4' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
.layout-label {
display: block;
margin: 0;
}
}
}
// Item is moving, outline
.layout-paragraphs-field.is-moving .layout-paragraphs-item.is-moving {
border-color: #fff;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
// Paragraph labels
.erl-item,
.layout-paragraphs-item {
label.paragraph-type-label,
label.paragraph-type--label {
margin: -1px;
position: absolute;
top: 12px;
left: 50%;
transform: translate(-50%);
border: 0 none;
font-style: normal;
color: var(--gin-color-text-light);
opacity: .75;
}
.layout-controls {
opacity: 1;
position: absolute;
left: var(--gin-spacing-xxs);
top: var(--gin-spacing-xs);
}
// Actions
.layout-paragraphs-actions {
visibility: visible;
position: absolute;
right: var(--gin-spacing-xxs);
top: var(--gin-spacing-xs);
}
// Basic Paragraph style adjustments
.paragraph {
.field {
color: #222;
line-height: 1.5;
margin: .5em 0;
}
.field--name-field-title {
font-weight: var(--gin-font-weight-heavy);
}
.field--type-image {
max-height: 400px;
overflow: hidden;
}
.field--name-field-paragraphs {
display: flex;
flex-wrap: wrap;
.field__item {
flex-basis: 100%;
margin-right: var(--gin-spacing-xs);
}
}
}
}
// Form wrapper
.layout-paragraphs-item.layout-paragraphs-layout,
.active-items .layout-paragraphs-item.layout-paragraphs-layout,
.layout-paragraphs-field.is-moving .layout-paragraphs-item.layout-paragraphs-layout:hover,
.erl-layout.erl-item.form-wrapper {
position: relative;
padding: 47px 0 0;
margin-bottom: var(--gin-spacing-m);
background: none;
border: 0 none;
border-radius: var(--gin-border-m);
transition: none;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 48px;
background: #fff;
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
box-shadow: inset 0 0 0 1px var(--gin-border-color);
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
}
.paragraph-layout-label,
.paragraph-layout--label {
opacity: .6;
position: absolute;
top: 12px;
transform: translateX(-50%);
font-style: normal;
font-weight: var(--gin-font-weight-heavy) !important;
color: var(--gin-color-text);
padding: 0;
}
}
// Loader
.layout-paragraphs-loading div.spinner,
.erl-loading div.spinner {
width: 1.125rem;
height: 1.125rem;
animation: gin-throbber 0.75s linear infinite;
border: 2px solid var(--gin-color-primary);
border-right: 2px dotted transparent;
border-radius: 50%;
}
// Add item menu
.layout-paragraphs-add-content,
.erl-add-content {
&:focus {
outline: none;
box-shadow: none;
}
// Add Toggle
&__toggle {
opacity: 1;
bottom: 2px;
background: var(--gin-color-primary);
border-radius: 50%;
&:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--gin-color-button-text);
mask-image: icon('add');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 16px 16px;
}
}
// Toggle group
&__group,
&--group {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
transform: translateX(-50%);
max-height: 480px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--gin-bg-app);
border: 0 none;
border-radius: var(--gin-border-m);
button {
color: #000;
text-align: center;
flex-basis: 33.333%;
margin-bottom: var(--gin-spacing-m);
@include mq(large) {
flex-basis: 25%;
}
img {
width: 24px;
height: 24px;
float: none;
display: block;
margin: var(--gin-spacing-xs) auto;
@include mq(large) {
width: 30px;
height: 40px;
}
}
}
}
}
// Add content single
.layout-paragraphs-add-content--single,
.layout-paragraphs-item > .layout-paragraphs-add-content--single,
.erl-field .erl-add-content--single,
.erl-field .erl-item > .erl-add-content--single {
position: static;
width: 100%;
left: 0;
margin: var(--gin-spacing-m) 0 0 0;
box-sizing: border-box;
}
// Add content menu
.layout-paragraphs-add-more-menu,
.erl-add-more-menu {
outline: none;
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08),
0 10px 40px rgba(0, 0, 0, .15);
overflow: hidden;
@include mq(large) {
width: 400px;
}
&.beneath::before,
&.above::after {
display: none;
}
// Search
&__search {
background: var(--gin-bg-layer3);
border-bottom: 1px solid var(--gin-border-color-layer2);
border-radius: 0;
}
// Add more item
&__item {
position: relative;
display: flex;
align-self: stretch;
&:last-of-type {
margin-bottom: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl));
}
&.hidden {
display: none;
}
a {
align-self: stretch;
width: 100%;
color: var(--gin-color-text);
padding: var(--gin-spacing-xs);
border-radius: var(--gin-border-m);
&:hover {
background-color: var(--gin-color-primary-light);
}
}
img {
width: 24px;
height: 24px;
margin-bottom: var(--gin-spacing-xs);
@include mq(large) {
width: 32px;
height: 32px;
}
}
}
// Group
&__group {
background: var(--gin-bg-layer3);
border: 0 none;
border-radius: 0;
&--layout,
&--content {
justify-content: flex-start;
overflow-x: hidden;
padding-bottom: var(--gin-spacing-xxs);
}
&--layout:not(:empty),
&--content {
&::before {
color: var(--gin-color-title);
flex-basis: 100%;
padding: var(--gin-spacing-m) var(--gin-spacing-m) 0;
font-size: var(--gin-font-size-s);
opacity: .4;
}
}
// If layout is empty: show label
&--layout:not(:empty) {
&::before {
content: var(--gin-lp-layout, 'Layout');
display: block;
width: 100%;
padding-left: 0;
margin-left: var(--gin-spacing-m);
}
}
// Show content label
&--content::before {
content: var(--gin-lp-content, 'Content');
}
&--layout + &--content {
margin-top: -2.6rem;
margin-bottom: -2.6rem;
z-index: 1;
position: relative;
background: var(--gin-bg-layer3);
border-top: 1px solid var(--gin-border-color-layer);
}
}
// If search is visible
&__search + &__group &__group--layout + &__group--content {
margin-bottom: 0;
> div:last-of-type {
margin-bottom: 0;
}
}
}
// Fieldset
fieldset.layout-paragraphs-field,
fieldset.fieldset.erl-field {
position: relative;
padding-top: 0;
padding-left: 0;
padding-right: 0;
background: transparent;
box-shadow: none;
> legend {
display: none;
}
> .fieldset__wrapper {
margin: 0;
// If there is content
> .active-items:not(:empty) ~ .layout-paragraphs-add-content__toggle {
display: none;
}
}
}
// Move message
.layout-paragraphs-field .layout-paragraphs-moving-message {
z-index: 2;
top: calc(var(--gin-spacing-xs) * -1);
width: calc(100% - var(--gin-spacing-xxl));
padding: var(--gin-spacing-xs);
margin: var(--gin-spacing-m);
border-radius: var(--gin-border-s);
}
// Drag & Drop
.gu-transit,
.layout-paragraphs-field .layout-paragraphs-item.gu-transit,
.erl-field .erl-item.gu-transit {
background: var(--gin-color-primary-light-active);
border: var(--gin-border-xs) solid var(--gin-color-primary);
}
.gu-mirror,
.layout-paragraphs-layout.layout-paragraphs-item.gu-mirror,
.erl-layout.erl-item.gu-mirror {
border: var(--gin-border-xs) solid var(--gin-color-focus);
border-radius: var(--gin-border-m);
&::before,
.layout-paragraphs-actions,
.layout-paragraphs-add-content__toggle,
.erl-actions {
display: none;
}
}
// Modal
.ui-widget-content {
&:focus {
outline: none;
box-shadow: none;
}
.layout-paragraphs-form-actions {
margin-bottom: 0 !important;
padding-top: 0;
padding-bottom: 0;
}
}

38
web/themes/gin/styles/components/layout_paragraphs_2.0.scss Normal file
View File

@@ -0,0 +1,38 @@
// Version 2.0
.lpb-controls.is-layout {
background-color: var(--gin-color-contextual);
}
.lp-builder:not(.is-navigating) .js-lpb-component:hover,
.lp-builder:not(.is-navigating) .js-lpb-component:focus-within {
outline: 2px solid var(--gin-color-primary);
}
.lp-builder:not(.is-navigating) .lpb-layout.js-lpb-component:hover,
.lp-builder:not(.is-navigating) .lpb-layout.js-lpb-component:focus-within {
outline: 1px solid var(--gin-color-primary);
}
.lp-builder:not(.is-navigating) .js-lpb-component:hover .js-lpb-region:hover,
.lp-builder:not(.is-navigating) .js-lpb-component:focus-within .js-lpb-region:focus-within {
outline: 1px dashed var(--gin-color-primary);
}
.js-lpb-component:hover .js-lpb-region,
.js-lpb-component:focus-within .js-lpb-region {
outline: 1px dashed var(--gin-color-primary);
}
.lpb-component-list {
padding-top: var(--gin-spacing-l);
padding-bottom: var(--gin-spacing-l);
}
.layout-paragraphs-delete-component-form {
padding-top: var(--gin-spacing-l);
padding-bottom: var(--gin-spacing-s);
}
.layout-select__item input.form-boolean:checked + label.option {
outline: 2px solid var(--gin-color-primary);
}

6
web/themes/gin/styles/components/linkit.scss Normal file
View File

@@ -0,0 +1,6 @@
.linkit-matcher-add-form,
.linkit-attribute-add-form {
.form-type--boolean .form-boolean {
top: var(--gin-spacing-xxs);
}
}

465
web/themes/gin/styles/components/media_library.scss Normal file
View File

@@ -0,0 +1,465 @@
.media-library {
&-edit__link,
&-item &-item__edit,
&-item &-item__remove,
&-item &-item__remove.button {
border-color: var(--gin-border-color) !important;
&:link,
&:hover,
&:focus,
&:active,
&:not(:hover):not(:checked) {
border-color: transparent !important;
}
&:hover,
&:focus,
&:active {
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus) !important;
}
&,
&:hover,
&:focus,
&:active {
width: 32px;
height: 32px;
margin: var(--gin-spacing-s);
background-color: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
box-sizing: border-box;
}
}
&-edit__link,
&-item &-item__edit {
top: .625rem;
right: 3.125rem;
background-image: icon('media-edit');
background-size: .75rem .75rem;
}
&-item &-item__remove,
&-item &-item__remove.button {
background-image: icon('media-remove');
background-size: .75rem .75rem;
}
}
.media-library-item {
background: none;
img {
@include color-pattern;
}
&--grid {
border-radius: var(--gin-border-xl);
&::before,
&.is-hover::before,
&.checked::before,
&.is-focus::before {
display: none;
}
// User is dragging item.
&.sortable-chosen {
background: var(--gin-bg-layer);
box-shadow: 0 0 48px rgba(0, 0, 0, 0.075) !important;
outline: none;
// Hide remove button on ghost.
.media-library-item__remove {
display: none;
}
}
// Show where to drag to.
&.sortable-ghost {
border: 2px dashed var(--gin-border-color);
}
}
&__content {
display: flex;
height: 100%;
article {
width: 100%;
}
}
&__click-to-select-trigger {
overflow: inherit;
}
&__name {
color: var(--gin-color-text);
word-break: break-all;
text-overflow: initial;
white-space: initial;
overflow: visible;
margin: 0;
}
&__attributes {
position: static;
padding: var(--gin-spacing-xs);
background: none;
}
// Hide Claro outline, we use Gin's instead
&:focus &__preview-wrapper {
box-shadow: none;
}
& &__preview {
position: relative;
padding-bottom: 100%;
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-xl);
overflow: hidden;
.field {
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&.is-hover &__preview {
border-color: var(--gin-color-text);
box-shadow: 0 0 0 2px var(--gin-color-text);
}
&.checked &__preview,
&.is-active &__preview {
border-color: var(--gin-color-primary);
box-shadow: 0 0 0 2px var(--gin-color-primary);
}
&__click-to-select-checkbox .form-boolean {
width: 29px;
height: 29px;
border-radius: var(--gin-border-xs);
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
&,
.gin--dark-mode & {
border-radius: var(--gin-border-xs);
&:not(:checked) {
background-color: white;
}
&:not(:hover):not(:checked) {
border-color: transparent !important;
}
&:focus {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus) !important;
}
&:checked {
background-color: var(--gin-color-primary);
border-color: var(--gin-color-primary);
box-shadow: none;
}
}
}
.form-item {
margin: var(--gin-spacing-xs);
}
// Drupal 9.2 Throbber Fix
.ajax-progress {
transform: translateY(-50%);
}
}
.media-library-views-form {
flex-wrap: initial;
flex-direction: column;
}
fieldset.media-library-widget {
.media-library-widget__toggle-weight {
font-size: var(--gin-font-size-xxs);
padding: var(--gin-spacing-xs);
}
.media-library {
&-edit__link,
&-item .media-library-item__edit,
&-item .media-library-item__remove,
&-item .media-library-item__remove.button {
margin: var(--gin-spacing-xs);
}
}
}
.media-library-widget-empty-text {
color: var(--gin-color-text-light);
margin: 0 0 calc(var(--gin-spacing-xs) * -1) 0;
}
.media-library-open-button {
margin-top: 0;
}
.media-library-add-form {
&__preview {
background: var(--gin-bg-app);
}
&__input-wrapper {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
.form-item--upload {
margin-top: 0;
margin-right: 0;
}
.dropzone-enable {
.button {
margin: 0;
}
}
}
}
.media-library-menu {
border-color: var(--gin-border-color);
background-color: var(--gin-bg-app);
&__link {
color: var(--gin-color-text);
text-shadow: none;
border-color: var(--gin-border-color);
background-color: transparent;
&:active,
&:hover,
&:focus,
&.active,
&:hover:focus,
&.active:hover,
&.active:focus {
color: var(--gin-color-primary);
text-shadow: none;
background-color: var(--gin-bg-layer);
border-right: 0 none;
border-bottom: 1px solid var(--gin-border-color);
box-shadow: none;
}
&.active::before {
border-left-color: var(--gin-color-primary);
}
&:focus::after {
border: var(--gin-border-xs) solid var(--gin-color-focus);
}
}
}
+ .media-library-content {
border-left: 1px solid var(--gin-border-color);
}
.media-library-view {
.view-header {
padding: var(--gin-spacing-m);
color: var(--gin-color-text);
text-decoration: none;
background: var(--gin-bg-layer3);
border-radius: var(--gin-border-m);
box-shadow: var(--gin-shadow-l1);
}
.views-form {
background: transparent !important;
}
}
.media-library-wrapper {
margin-top: 0;
margin-left: calc(var(--gin-spacing-m) * -1);
margin-right: calc(var(--gin-spacing-m) * -1);
.views-display-link {
position: relative;
color: var(--gin-color-text);
text-decoration: none;
background-image: none;
white-space: nowrap;
&::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 1px;
background-color: var(--gin-color-text);
}
&.is-active {
color: var(--gin-color-primary);
&::before {
background-color: var(--gin-color-primary);
}
}
}
.views-display-link-widget {
&::before {
mask-image: icon('grid');
}
}
.views-display-link-widget_table {
&::before {
mask-image: icon('list');
}
}
}
.media-library-content {
border-left: 0 none;
border-color: var(--gin-border-color);
}
.media-library-select-all {
color: var(--gin-color-title);
padding: 0 var(--gin-spacing-m) var(--gin-spacing-m);
margin-left: 0;
margin-top: 0;
background: var(--gin-bg-layer);
border-bottom: 1px solid var(--gin-border-color-table-header);
border-radius: 0;
box-sizing: border-box;
// @include mq(medium) {
// z-index: 98;
// position: sticky;
// top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
// }
}
.views-field-thumbnail__target-id {
img {
vertical-align: middle;
}
}
// UI Dialog overrode
.ui-dialog {
.views-exposed-form,
.views-form {
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
}
}
.media-library-widget-modal .media-library-item--grid {
@include mq(ultra) {
width: 20%;
}
}
.media-library-widget-modal .ui-dialog-buttonpane {
flex-direction: column;
.form-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
white-space: nowrap;
margin-top: 0;
.button:not(:last-child) {
margin-right: var(--gin-spacing-xs);
}
}
.media-library-selected-count {
flex-grow: 1;
margin-bottom: var(--gin-spacing-s);
}
@include mq(xsmall) {
flex-direction: row;
.media-library-selected-count {
margin-bottom: 0;
margin-left: 0;
}
}
}
.media-library-selection .media-library-item--grid {
@include mq(wide) {
width: 20%;
}
}
// Sidebar override
.layout-region-node-secondary .media-library-selection .media-library-item--grid {
width: auto;
}
.field--name-field-media {
&.field--widget-entity-reference-autocomplete {
fieldset.form-item {
padding: var(--gin-spacing-xl) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)) var(--gin-spacing-m) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
border: 1px solid var(--gin-border-color);
> legend {
font-weight: var(--gin-font-weight-heavy);
position: relative;
top: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
transform: translateY(50%);
&::before {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: calc((var(--gin-spacing-l) - var(--gin-spacing-xxs)) * -1);
left: 0;
background: var(--gin-border-color);
}
}
> .form-item {
h4 {
margin-bottom: 0;
}
}
}
}
}
.media-library-selected-count {
color: var(--gin-color-text-light);
}

101
web/themes/gin/styles/components/module_filter.scss Normal file
View File

@@ -0,0 +1,101 @@
.modules-tabs {
background: transparent;
border: 0 none;
&__pane,
&__menu,
&__menu-item {
background: var(--gin-bg-layer);
}
&__pane {
padding: var(--gin-spacing-l) var(--gin-spacing-l) 0 var(--gin-spacing-l);
border-left: 1px solid var(--gin-border-color);
table {
tr.enabling {
background: var(--gin-bg-green-light);
}
}
}
&__menu-item {
border-top: 1px solid var(--gin-border-color);
&.tab__new {
border-bottom: 1px solid var(--gin-border-color);
}
&.disabled {
background-color: transparent;
border-top-color: var(--gin-border-color);
border-bottom-color: transparent;
}
&.suggest,
a:hover,
a:focus,
a:active {
background: var(--gin-bg-item-hover);
}
&.is-selected {
a,
a:hover,
a:focus,
a:active {
background: var(--gin-bg-layer);
}
}
ul.enabling {
color: var(--gin-color-green);
}
}
}
#module-filter-update-status-form .table-filter {
float: none;
text-align: left;
.winnow-input {
width: 100%;
}
.winnow-clear {
width: 44px;
&:after {
top: 10px;
right: var(--gin-spacing-xs);
}
}
input.form-search {
width: 100%;
padding: var(--gin-spacing-m);
}
.form-type--search {
margin-top: 0;
margin-bottom: var(--gin-spacing-xs);
}
}
.system-modules-uninstall {
.winnow-input {
width: 100%;
}
}
.module-filter-status {
margin-left: -1em;
}
.modules-tabs .module-filter-status {
margin-left: 0;
}
.system-modules td details a {
color: var(--gin-color-primary);
}

136
web/themes/gin/styles/components/node_preview.scss Normal file
View File

@@ -0,0 +1,136 @@
.node-preview-container.node-preview-container {
font-size: var(--gin-font-size-xs);
z-index: 501; /* on top of the Drupal world */
position: sticky;
top: 0;
padding: 0;
width: 100%;
height: var(--gin-toolbar-secondary-height);
background: rgba(#fff, .98);
border-bottom: 1px solid var(--gin-border-color-layer);
@supports (backdrop-filter: blur()) {
opacity: .999; /* Fix Chrome issue with mask */
background: rgba(#fff, .8);
backdrop-filter: blur(12px);
}
.gin--dark-mode & {
background: rgba($colorDarkAppBackground, .98);
@supports (backdrop-filter: blur()) {
background: #{rgba(mix(black, $colorDarkAppBackground, 20%), .9)};
}
}
.gin--high-contrast-mode & {
background: var(--gin-bg-app);
backdrop-filter: none;
}
.gin--navigation & {
margin-left: var(--gin-toolbar-x-offset);
width: calc(100% - var(--gin-toolbar-x-offset));
}
.gin-layout-container {
box-sizing: border-box;
}
.node-preview-backlink,
.node-preview-form-select label {
color: var(--gin-color-text-light);
}
.node-preview-backlink {
all: revert;
position: relative;
padding-left: 1.75em;
text-decoration: none;
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-text-light);
border-radius: var(--gin-border-xxs);
&:hover {
color: var(--gin-color-primary-hover);
}
&:active {
color: var(--gin-color-primary-active);
}
&::before {
content: "";
display: inline-block;
position: absolute;
top: calc(50% - 1px);
left: 0;
width: var(--gin-icon-size-toolbar-secondary);
height: var(--gin-icon-size-toolbar-secondary);
transform: translateY(-50%);
background-color: var(--gin-icon-color);
mask-image: icon('backtosite');
mask-size: 100% 100%;
mask-position: center center;
}
}
.form-item {
all: revert;
&__label {
font-size: var(--gin-font-size-s);
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-title);
margin: 0;
}
}
.node-preview-form-select {
display: flex;
align-items: center;
justify-content: space-between;
width: auto;
padding: var(--gin-spacing-m) 0;
margin: 0 var(--gin-spacing-m);
height: 100%;
@include mq(small) {
margin: 0 var(--gin-spacing-xl);
}
@include mq(medium) {
margin: 0 m#{i}n(5vw, var(--gin-spacing-xxl));
}
label {
padding-right: .5em;
}
}
.form-element {
all: revert;
font-size: var(--gin-font-size-s);
line-height: 1.5;
color: var(--gin-color-text);
background-color: var(--gin-bg-input);
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-s);
box-sizing: border-box;
transition: var(--gin-transition);
}
.js-hide {
display: none;
}
// Hide Secondary Toolbar while in Preview mode.
~ .gin-secondary-toolbar--frontend {
display: none;
}
*:focus {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
}

393
web/themes/gin/styles/components/paragraphs.scss Normal file
View File

@@ -0,0 +1,393 @@
.paragraphs-tabs-wrapper {
.gin-table-scroll-wrapper {
overflow: initial;
}
tr {
&:hover, &:focus {
.gin--dark-mode &, & {
background-color: inherit;
}
}
}
.paragraphs-subform {
margin-top: 0;
margin-right: var(--gin-spacing-m);
}
.field-multiple-table {
> tbody {
> .draggable {
> td + td {
width: 100%;
}
}
}
.draggable {
display: block;
padding: var(--gin-spacing-m) var(--gin-spacing-xs);
margin-top: var(--gin-spacing-m);
border: 1px solid var(--gin-border-color-table);
border-radius: var(--gin-border-m);
box-shadow: 4px 4px 10px var(--gin-bg-layer2);
// Current draggable item
&.drag {
background-color: var(--gin-bg-warning-light);
}
// Flag Changes
&.drag-previous > .tabledrag-cell {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: var(--gin-spacing-xs);
left: 0;
width: 4px;
height: calc(100% - var(--gin-spacing-m));
background: var(--gin-color-warning);
border-radius: var(--gin-border-xxs);
}
}
td {
padding: var(--gin-spacing-xxs);
}
.has-multiple-fields-remove-button {
width: 100%;
padding-right: 0 !important;
}
.tabledrag-handle::after {
mask-image: icon('drag-dots');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 16px 16px;
}
.tabledrag-changed {
display: none;
}
// Highlight current paragraph.
&:hover,
&:focus-within {
position: relative;
border: 1px solid var(--gin-color-text);
box-shadow: 0 0 0 1px var(--gin-color-text);
}
}
}
.paragraph-type-label {
font-size: var(--gin-font-size);
font-weight: var(--gin-font-weight-heavy) !important;
font-style: normal;
color: var(--gin-color-title);
position: static;
border: 0 none;
padding-left: 0;
}
.paragraphs-subform {
.paragraph-type-label {
font-size: var(--gin-font-size-s);
}
}
.paragraph-type-add-modal,
.field--widget-paragraphs .paragraphs-dropbutton-wrapper {
margin-right: var(--gin-spacing-xs);
}
}
.paragraph {
.contextual {
display: none;
}
}
.paragraphs-subform {
.form-item,
.field--type-text-with-summary .form-item,
.field--widget-text-textarea .form-item {
margin-bottom: var(--gin-spacing-l);
}
}
.paragraphs-add-wrapper,
.paragraphs-dropbutton-wrapper {
.button--small {
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xs);
}
&.button--small {
padding: 0;
margin: 0;
}
}
.paragraphs-dropdown-toggle {
position: relative;
margin: var(--gin-spacing-xs) 0;
background: none;
&::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: none;
background-color: var(--gin-color-text-light);
mask-image: icon('more');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 16px 16px;
}
&:hover,
&:active,
&:focus {
background-color: var(--gin-color-primary-light);
border: 0 none;
&::after {
background-color: var(--gin-color-primary);
}
}
}
.field--widget-paragraphs .paragraphs-tabs-wrapper .field-multiple-table tr[class*="paragraph-type--"] {
margin-top: var(--gin-spacing-m);
}
html.js .field--widget-entity-reference-paragraphs,
html.js .field--widget-paragraphs {
.draggable .tabledrag-handle {
min-width: 20px;
@include mq(medium) {
min-width: 24px;
}
&::after {
position: relative;
left: 0;
padding: 0;
margin-left: 0;
}
}
}
.js .paragraphs-collapsed-description::after,
.js .draggable:hover .paragraphs-collapsed-description::after {
top: 2px;
background: var(--gin-bg-layer2);
}
html.js .field--widget-entity-reference-paragraphs {
.draggable .tabledrag-handle {
min-width: 32px;
@include mq(medium) {
min-width: 48px;
&::after {
top: -2px;
left: 8px;
}
}
}
}
.paragraphs-collapsed-description::after,
.draggable:hover .paragraphs-collapsed-description::after {
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--gin-bg-layer) 100%);
}
.js .field--widget-paragraphs .paragraphs-dropbutton-wrapper .dropbutton-multiple {
padding: var(--gin-spacing-xs);
}
html.js .field--widget-paragraphs .paragraphs-dropbutton-wrapper .dropbutton-multiple {
.dropbutton-widget {
margin-right: var(--gin-spacing-xs);
}
}
html.js .field--widget-paragraphs th .paragraphs-actions .paragraphs-dropdown {
top: 0;
right: var(--gin-spacing-xxs);
}
.paragraphs-dropdown-actions {
color: var(--gin-color-button-text);
background: var(--gin-bg-layer3);
border: 0 none;
border-radius: var(--gin-border-xs);
box-shadow: var(--gin-shadow-l2);
.paragraphs-dropdown-action.button {
font-size: var(--gin-font-size-xs);
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
margin: 0;
border: 0 none !important;
}
}
.js .paragraph-type-title {
align-self: center;
}
html.js .paragraph-type-icon {
padding: var(--gin-spacing-xxs);
margin-right: var(--gin-spacing-xs);
}
.js .paragraph-top {
grid-template-columns: auto auto 1fr auto;
}
.paragraphs-icon-changed {
background-size: auto;
height: 32px;
width: 32px;
}
// Darkmode overrides
.gin--dark-mode {
.paragraphs-tabs-wrapper .field-multiple-table .draggable {
background: var(--gin-bg-layer2);
box-shadow: none;
}
.paragraphs-dropdown-actions {
background: var(--gin-bg-layer2);
border-color: var(--gin-border-color);
box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}
.paragraph-type-icon {
background-color: var(--gin-color-primary);
}
.paragraphs-type-icon {
box-shadow: inset 0 0 0 10px var(--gin-bg-layer);
background-color: #fff;
}
}
.js .paragraphs-description .summary-content {
color: var(--gin-color-text);
}
// Drag & Drop
.paragraphs-dragdrop {
&__list {
--dnd-item-ghost-border: var(--gin-color-primary);
--dnd-item-ghost-bg: var(--gin-bg-item-hover);
}
&__item {
padding-top: var(--gin-spacing-xs);
padding-bottom: var(--gin-spacing-xs);
background-color: var(--gin-bg-layer3);
border-radius: var(--gin-border-m);
}
&__icon {
top: var(--gin-spacing-xxxs);
}
}
.js .paragraph-type-add-modal-button:hover {
background: var(--gin-color-primary);
}
.paragraphs-dragdrop__label--field {
text-transform: none;
}
// Classic Paragraphs
.field--widget-entity-reference-paragraphs {
// Ugly addressing the title, but let's go
> div > .form-wrapper > strong {
display: block;
margin-top: var(--gin-spacing-xl);
}
// No Paragraph added yet text
// No dedicated classes so targeting the element as good as possible
.form-wrapper .form-wrapper > em {
display: block;
padding: var(--gin-spacing-m) 0;
}
// Add buttons
.form-actions {
align-items: center;
.dropbutton-multiple {
margin-right: var(--gin-spacing-xs);
// Support different paragraphs versions
.placeholder,
~ .placeholder {
margin-left: var(--gin-spacing-xxs);
}
}
}
tr.draggable .tabledrag-handle::after {
left: 8px;
}
}
.toolbar-fixed .is-horizontal .paragraphs-tabs {
padding: var(--gin-spacing-xs) var(--gin-spacing-m) !important;
background-color: var(--gin-bg-layer3);
border-radius: var(--gin-border-s);
&:first-of-type {
z-index: 100;
top: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky));
}
.tabs__tab {
float: left;
margin-right: var(--gin-spacing-m);
a {
display: block;
padding: var(--gin-spacing-xs) 0;
color: var(--gin-color-text);
}
&.is-active {
a {
color: var(--gin-color-primary);
&::after {
pointer-events: none;
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
border-bottom: 2px solid var(--gin-color-primary);
}
}
}
}
}

93
web/themes/gin/styles/components/responsive_preview.scss Normal file
View File

@@ -0,0 +1,93 @@
.responsive-preview {
z-index: 502;
&-item-list {
top: 36px !important;
}
}
.toolbar {
.toolbar-tab-responsive-preview.toolbar-tab {
// Trigger
.responsive-preview-trigger {
width: 4em;
background: none;
border-radius: var(--gin-border-s);
// Hover
&:hover::before {
background-color: var(--gin-color-title);
.gin--classic-toolbar & {
background-color: #fff;
}
}
// Icon
&::after {
width: 1rem;
height: 1rem;
top: var(--gin-spacing-s);
right: var(--gin-spacing-xs);
margin: 0;
background-color: var(--gin-color-text-light);
mask-image: icon('drop');
mask-size: .75rem .75rem;
mask-position: center center;
mask-repeat: no-repeat;
box-sizing: border-box;
transition: transform .2s var(--gin-easing);
}
}
// Menu style
.responsive-preview-options {
padding: var(--gin-spacing-xs);
margin: 0;
background-color: var(--gin-bg-layer3);
border-bottom: 0 none;
border-radius: var(--gin-border-l);
box-shadow: var(--gin-shadow-l2);
// Device links
.responsive-preview-device.responsive-preview-device {
color: var(--gin-color-primary);
width: 100%;
padding: .625rem var(--gin-spacing-m);
border-radius: var(--gin-border-s);
&:hover {
color: var(--gin-color-button-text);
background-color: var(--gin-color-primary);
}
}
// Configuration link
.responsive-preview-configure {
color: var(--gin-color-text-light);
text-decoration: none;
&:hover {
color: var(--gin-color-primary);
}
}
}
// Open menu item
&.open {
&, &::before {
background-color: var(--gin-bg-layer3);
}
.responsive-preview-trigger::before {
.gin--classic-toolbar & {
background-color: #111;
}
}
.responsive-preview-trigger::after {
transform: rotate(180deg);
}
}
}
}

18
web/themes/gin/styles/components/revisions.scss Normal file
View File

@@ -0,0 +1,18 @@
.revision-current {
background-color: transparent;
td:first-of-type {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
border-left: 6px solid var(--gin-color-green);
}
}
}

291
web/themes/gin/styles/components/settings.scss Normal file
View File

@@ -0,0 +1,291 @@
// Settings: Custom accent color selector.
[data-drupal-selector="edit-preset-accent-color"] {
.form-radios {
display: flex;
flex-wrap: wrap;
margin-top: var(--gin-spacing-xs);
.form-item--preset-accent-color {
position: relative;
input {
cursor: pointer;
width: 32px;
height: 32px;
top: var(--gin-spacing-m);
margin-right: var(--gin-spacing-xs);
border-color: transparent;
&,
.gin--dark-mode & {
background-color: var(--gin-color-primary);
}
&:hover {
box-shadow: none;
}
&:hover,
&:focus,
&:focus:hover,
&:checked {
border-color: var(--gin-color-primary);
}
&:focus:checked,
&:focus,
&:checked {
background-color: var(--gin-color-primary);
box-shadow: inset 0 0 0 2px var(--gin-bg-layer),
inset 0 0 0 4px var(--gin-color-primary);
}
// Custom
&[data-gin-accent="custom"] {
background-color: #fff;
background-image: url(~settings/custom-color.jpg);
background-size: 100%;
background-repeat: no-repeat;
border-color: var(--gin-border-color);
&:checked {
background-color: #fff;
border-color: var(--gin-border-color);
border-width: 1px;
}
}
}
.form-item__label {
display: none;
visibility: hidden;
z-index: 1;
position: absolute;
top: 100%;
left: -10px;
padding: var(--gin-spacing-xs);
color: var(--gin-color-contextual-text);
background: var(--gin-color-contextual);
border-radius: var(--gin-border-xs);
transform: translateX(-50%);
}
&:hover .form-item__label,
input:active ~ .form-item__label,
input:focus ~ .form-item__label {
display: block;
visibility: visible;
}
}
}
}
// Groups
[data-drupal-selector="edit-accent-group"],
[data-drupal-selector="edit-focus-group"] {
.form-type--color,
.form-type--textfield {
float: left;
margin: 0 0 0var(--gin-spacing-xs) 0;
}
.form-type--color {
margin-right: var(--gin-spacing-xs);
}
.fieldset__description {
clear: both;
}
}
// Darkmode
[data-drupal-selector="edit-enable-darkmode"] {
.form-radios {
display: inline-flex;
flex-wrap: wrap;
padding: .1875rem var(--gin-spacing-xs);
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-spacing-xl);
.gin--dark-mode & {
background: var(--gin-bg-layer2);
}
.form-type--radio {
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
}
.form-item__label {
display: inline-block;
padding: .375rem var(--gin-spacing-m);
margin: var(--gin-spacing-xxs) 0;
border: 2px solid transparent;
border-radius: var(--gin-border-xl);
box-sizing: border-box;
&:hover {
color: var(--gin-color-primary);
background: var(--gin-color-primary-light-hover);
}
}
input {
opacity: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
border: 0;
&:focus + .form-item__label {
box-shadow: 0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus);
}
&:checked + .form-item__label {
font-weight: var(--gin-font-weight-bold);
color: var(--gin-color-primary-active);
background: var(--gin-color-primary-light-active);
}
}
}
}
// Settings with images.
[data-drupal-selector="edit-classic-toolbar"],
[data-drupal-selector="edit-layout-density"] {
.form-radios {
display: flex;
flex-wrap: wrap;
margin-top: var(--gin-spacing-xs);
.form-item {
position: relative;
display: flex;
flex-wrap: wrap;
width: 140px;
margin: 0 var(--gin-spacing-s) 0 0;
input {
cursor: pointer;
position: static;
width: 140px;
height: 100px;
margin-left: 0;
border-radius: var(--gin-border-l);
transform: none;
&
&:focus {
border-color: var(--gin-color-text);
box-shadow: none;
}
&:checked {
border-color: var(--gin-color-primary);
box-shadow: inset 0 0 0 1px var(--gin-color-primary);
}
&:focus {
box-shadow: 0 0 0 3px var(--gin-color-focus);
}
&:checked:focus {
box-shadow: inset 0 0 0 1px var(--gin-color-primary),
0 0 0 3px var(--gin-color-focus);
}
background-repeat: no-repeat;
background-size: 100% 100%;
}
.form-item__label {
font-size: var(--gin-font-size-xxs);
display: block;
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-m);
}
}
}
}
// Settings: Toolbar selector.
[data-drupal-selector="edit-classic-toolbar"] {
.form-radios .form-item input {
// Standard: Sidebar
&[data-gin-toolbar=vertical] {
background-image: url(~settings/toolbar_sidebar.png);
.gin--dark-mode & {
background-image: url(~settings/toolbar_sidebar_darkmode.png);
}
}
// New Drupal Navigation
&[data-gin-toolbar=new] {
background-image: url(~settings/toolbar_new.png);
.gin--dark-mode & {
background-image: url(~settings/toolbar_new_darkmode.png);
}
}
// Minimal
&[data-gin-toolbar=horizontal] {
background-image: url(~settings/toolbar_minimal.png);
.gin--dark-mode & {
background-image: url(~settings/toolbar_minimal_darkmode.png);
}
}
// Classic/Legacy
&[data-gin-toolbar=classic] {
background-image: url(~settings/toolbar_legacy.png);
.gin--dark-mode & {
background-image: url(~settings/toolbar_legacy_darkmode.png);
}
}
}
}
// Settings: Layout density.
[data-drupal-selector="edit-layout-density"] {
.form-radios .form-item input {
// Default
&[data-drupal-selector=edit-layout-density-default] {
background-image: url(~settings/layout_density_default.png);
.gin--dark-mode & {
background-image: url(~settings/layout_density_default_darkmode.png);
}
}
// Medium
&[data-drupal-selector=edit-layout-density-medium] {
background-image: url(~settings/layout_density_medium.png);
.gin--dark-mode & {
background-image: url(~settings/layout_density_default_darkmode.png);
}
}
// Small
&[data-drupal-selector=edit-layout-density-small] {
background-image: url(~settings/layout_density_small.png);
.gin--dark-mode & {
background-image: url(~settings/layout_density_small_darkmode.png);
}
}
}
}
input[data-gin-toolbar="new"] + label .gin-new-flag {
position: absolute;
top: -100px;
right: 8px;
}

39
web/themes/gin/styles/components/settings_tray.scss Normal file
View File

@@ -0,0 +1,39 @@
#gin-toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
color: var(--gin-bg-app);
}
#gin-toolbar-bar.js-settings-tray-edit-mode {
background: var(--gin-color-primary);
}
#gin-toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background: var(--gin-color-primary-hover);
}
#gin-toolbar-bar {
position: fixed;
.contextual-toolbar-tab {
order: 100;
}
}
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
background-color: transparent;
border-radius: var(--gin-border-s);
.toolbar-item,
.toolbar-item.is-active:hover {
background: var(--gin-switch);
border-radius: var(--gin-border-s);
&::before {
background-color: #fff;
}
}
button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-image: none;
}
}

6
web/themes/gin/styles/components/settings_tray_edit.scss Normal file
View File

@@ -0,0 +1,6 @@
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode {
.settings-tray-editable.settings-tray-editable:hover,
.settings-tray-editable.settings-tray-editable.settings-tray-active-editable {
background-color: var(--gin-bg-item-hover);
}
}

118
web/themes/gin/styles/components/sidebar.scss Normal file
View File

@@ -0,0 +1,118 @@
.layout-region-node-secondary {
transition: transform var(--gin-transition-fast);
// Fixes the flickering happinging on smaller devices.
@include mq($to: large) {
opacity: 0;
visibility: hidden;
}
}
body[data-meta-sidebar=closed] {
--gin-sidebar-offset: 0px;
.layout-region-node-secondary {
transform: translateX(var(--gin-sidebar-width));
visibility: hidden;
}
}
// RTL handling.
[dir=rtl] body[data-meta-sidebar=closed] .layout-region-node-secondary {
/*rtl:ignore*/
transform: translateX(calc(var(--gin-sidebar-width) * -1));
}
body[data-meta-sidebar=open] {
.layout-region-node-secondary {
@include mq($to: large) {
opacity: 1;
visibility: visible;
}
}
}
.meta-sidebar {
&__trigger,
&__close {
cursor: pointer;
background: transparent;
height: 32px;
width: 32px;
border-radius: var(--gin-border-m);
transition: background var(--gin-transition-fast);
&::before {
display: inline-block;
width: 100%;
height: 100%;
content: "";
mask-repeat: no-repeat;
mask-position: center center;
background-color: var(--gin-icon-color);
}
&:hover, &:focus {
background-color: var(--gin-color-primary-light);
&::before {
background-color: var(--gin-color-primary);
}
}
&.is-active {
background-color: var(--gin-color-primary-light-hover);
&::before {
background-color: var(--gin-color-primary-active);
}
}
}
&__trigger {
margin-left: var(--gin-spacing-xs);
&::before {
mask-image: icon('sidebar');
mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);
border-radius: 50%;
}
}
&__close {
z-index: 104;
position: absolute;
top: 18px;
right: var(--gin-spacing-m);
@include mq(large) {
display: none;
}
&::before {
mask-image: icon('close');
mask-size: 16px 16px;
}
}
&__overlay {
z-index: 102;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background: var(--gin-bg-layer2);
body[data-meta-sidebar=open] & {
opacity: .9;
visibility: visible;
}
@include mq(large) {
display: none;
}
}
}

113
web/themes/gin/styles/components/tableselect.scss Normal file
View File

@@ -0,0 +1,113 @@
.block-system > .views-form,
.view-content .views-form {
.claro-details {
box-shadow: none;
}
form {
display: flex;
flex-direction: column;
}
.views-table {
order: -1;
margin-top: 0;
}
[data-drupal-selector*=edit-header] {
order: 99;
position: relative;
left: 0;
> .form-wrapper {
padding: var(--gin-spacing-m);
}
[data-drupal-selector*='edit-views-bulk-operations-bulk-form'] {
> * {
margin-right: var(--gin-spacing-xs);
}
.form-type--select,
.form-actions {
flex: 0 0 100%;
max-width: 100%;
}
.form-actions {
justify-content: flex-end;
}
.form-type--checkbox {
align-self: center;
}
}
.form-item__label:not([for='edit-select-all']) {
display: block;
float: left;
top: 2px;
margin-top: var(--gin-spacing-xxs);
margin-right: var(--gin-spacing-m);
line-height: 1.75;
}
&.is-sticky {
z-index: 4;
animation: fadeInBottom 320ms 1 forwards;
}
}
[data-drupal-selector*=edit-header],
.views-bulk-actions {
border: 0 none;
border-radius: var(--gin-border-m);
background: rgba(var(--gin-color-sticky-rgb), .95);
@supports (backdrop-filter: blur()) {
opacity: .999; /* Fix Chrome issue with mask */
background: rgba(var(--gin-color-sticky-rgb), .9);
backdrop-filter: blur(12px);
.gin--dark-mode & {
background: rgba($colorDarkAppBackground, .8);
}
}
}
[data-drupal-selector*=edit-header].is-sticky,
.views-bulk-actions[data-drupal-sticky-vbo="true"] {
opacity: 1;
position: sticky;
left: 0;
bottom: var(--gin-spacing-xs);
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
}
}
.views-bulk-actions {
padding: var(--gin-spacing-m);
&__item {
color: var(--gin-color-text);
font-weight: var(--gin-font-weight-semibold);
margin-right: var(--gin-spacing-xs);
&--status {
color: var(--gin-color-text-light);
margin-right: var(--gin-spacing-l);
}
.button--primary:not(:disabled, .is-disabled) {
background-color: var(--gin-color-primary);
&:hover {
background-color: var(--gin-color-primary-hover);
}
&:active {
background-color: var(--gin-color-primary-active);
}
}
}
}

509
web/themes/gin/styles/components/tabs.scss Normal file
View File

@@ -0,0 +1,509 @@
.tabs {
box-shadow: none;
}
// Tabs
.tabs-wrapper,
.horizontal-tabs ul.horizontal-tabs-list {
padding: 0 var(--gin-spacing-xs);
margin-left: calc(var(--gin-spacing-xs) * -1);
margin-right: calc(var(--gin-spacing-xs) * -1);
@include mq(small) {
padding: 0;
}
}
// Vertical tabs
.tabs-wrapper:not(.is-horizontal) {
.tabs {
.gin--dark-mode & {
border-color: #8E929C;
}
&__tab {
.gin--dark-mode & {
background-color: var(--gin-bg-item-hover);
border-color: #8E929C;
}
}
}
}
.vertical-tabs {
&__items {
z-index: inherit;
}
}
.gin--dark-mode {
.tabs {
border-color: var(--gin-border-color-layer2);
.tabs__tab,
.tabs__tab.is-active {
border-color: var(--gin-border-color-layer2);
background-color: transparent;
}
}
}
.tabs__link,
.claro-details__summary,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {
color: var(--gin-color-text);
font-size: var(--gin-font-size);
font-weight: var(--gin-font-weight-bold);
padding-top: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
padding-bottom: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
strong {
font-weight: inherit;
}
}
.tabs__link.is-active,
.claro-details__summary[aria-expanded=true],
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {
font-weight: var(--gin-font-weight-bold);
}
.is-horizontal .tabs__link,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a {
&:hover,
&:focus {
color: var(--gin-color-primary);
background: var(--gin-bg-item-hover);
}
}
.claro-details {
color: var(--gin-color-text);
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-m);
box-shadow: none;
}
.claro-details__summary {
&::after {
border-radius: var(--gin-border-m);
}
&:hover {
color: var(--gin-color-primary);
background-color: var(--gin-bg-item-hover);
}
}
.is-horizontal .tabs--primary,
.is-horizontal .tabs--secondary,
.horizontal-tabs ul.horizontal-tabs-list {
position: relative;
@include mq(small) {
width: 100%;
padding: .3125rem var(--gin-spacing-xs) var(--gin-spacing-l);
margin-bottom: calc(var(--gin-spacing-l) * -1);
overflow-x: auto;
.gin--edit-form & {
padding-top: .4rem;
}
}
&::after {
pointer-events: none;
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
max-width: calc(100% + var(--gin-spacing-xs));
border-bottom: 1px solid var(--gin-border-color);
transition: var(--gin-transition);
@include mq(small) {
left: var(--gin-spacing-xs);
bottom: var(--gin-spacing-l);
max-width: calc(100% - var(--gin-spacing-m));
}
}
.tabs__tab,
.horizontal-tab-button {
position: relative;
&:focus-within {
&::after {
content: "";
width: calc(100% + var(--gin-spacing-xs));
height: 4px;
background: var(--gin-bg-app);
display: block;
position: absolute;
bottom: calc(var(--gin-spacing-xxs) * -1);
left: calc(var(--gin-spacing-xxs) * -1);
z-index: 3;
}
}
}
.horizontal-tab-button {
&:focus-within {
&::after {
background: var(--gin-bg-layer);
}
}
}
}
.horizontal-tabs ul.horizontal-tabs-list {
&::before {
z-index: 1;
background: var(--gin-bg-layer);
}
&::after {
left: var(--gin-spacing-xs);
max-width: calc(100% - var(--gin-spacing-m));
}
}
.is-horizontal .tabs--primary,
.is-horizontal .tabs--secondary {
@include mq(small) {
margin-left: 0;
margin-right: 0;
}
}
.tabs--primary {
@include mq(small) {
margin-bottom: 0;
}
}
.is-horizontal .tabs--primary {
@include mq(small) {
&::after {
border-bottom: 0 none;
.gin--high-contrast-mode & {
border-bottom: 1px solid;
}
}
}
.tabs__tab {
@include mq($to: small) {
background-color: var(--gin-bg-layer);
border-bottom: 1px solid var(--gin-border-color-layer2);
&[data-original-order="0"] {
border-bottom: none;
}
}
@include mq(small) {
&:focus-within::after {
display: none;
}
}
}
.tabs__link {
min-height: var(--gin-spacing-xxl);
height: 100%;
@include mq(small) {
padding: calc(var(--gin-spacing-s) - 2px) var(--gin-spacing-m);
margin-right: 0.25em;
min-height: 2.5rem;
border-radius: 2.5rem;
}
&.is-active {
@include mq(small) {
color: var(--gin-color-primary-active);
background: var(--gin-color-primary-light);
}
&::before {
display: none;
}
}
}
}
.tabs__trigger {
svg {
stroke: var(--gin-color-primary);
}
}
.is-horizontal .tabs--secondary {
@include mq(small) {
margin-top: var(--gin-spacing-m);
&::before {
width: 100%;
}
}
.tabs__link {
min-height: 2.5rem;
padding: var(--gin-spacing-xs) var(--gin-spacing-m) var(--gin-spacing-m);
font-size: var(--gin-font-size-s);
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
}
}
// Horizontal Tabs in Claro style
.horizontal-tabs {
position: static !important;
display: flex;
flex-wrap: wrap;
width: 100%;
border: 0 none;
margin-top: calc(var(--gin-spacing-m) * -1);
ul.horizontal-tabs-list {
background: none;
border-right: 0 none;
border-bottom: 0 none;
overflow: hidden;
&:after {
@include mq(small) {
left: var(--gin-spacing-xs);
max-width: calc(100% - var(--gin-spacing-m));
}
}
li.horizontal-tab-button {
background: none;
border-right: 0 none;
border-bottom: 0 none;
a {
padding: var(--gin-spacing-xs) var(--gin-spacing-m) var(--gin-spacing-m);
font-size: var(--gin-font-size-s);
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
&::before {
content: '';
display: block;
position: absolute;
}
}
&.selected a {
color: var(--gin-color-primary);
&::before {
z-index: 1;
border-left: none;
border-right: none;
border-bottom: 3px solid var(--gin-color-primary);
top: auto;
bottom: 0;
left: 0;
right: 0;
height: 3px;
width: 100%;
}
}
}
}
// Nested horizontal tabs.
.horizontal-tabs {
margin-top: var(--gin-spacing-m);
}
.horizontal-tabs-panes,
[data-horizontal-tabs-panes] {
width: 100%;
}
.horizontal-tabs-pane {
padding: 0;
margin: 0;
box-shadow: none;
> .details-wrapper {
margin: 0;
> .claro-details__description {
margin-top: var(--gin-spacing-m);
}
}
}
}
.claro-details__description {
max-width: var(--gin-max-line-length);
}
// Icon
.claro-details__summary::before,
.claro-details[open] > .claro-details__summary::before {
left: 1.125rem;
background: var(--gin-color-text);
mask-image: icon('handle');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% 100%;
@media (forced-colors: active) {
background-color: buttonBorder;
}
}
.claro-details__summary::before {
@media (forced-colors: active) {
transform: rotate(90deg);
}
}
.claro-details[open] > .claro-details__summary::before {
@media (forced-colors: active) {
transform: rotate(270deg);
margin-top: -6px;
}
}
.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:hover::before,
.claro-details[open] > .claro-details__summary:focus::before,
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
background: var(--gin-color-primary);
@media (forced-colors: active) {
background-color: linkText;
}
}
.claro-details {
&__description {
color: var(--gin-color-text-light);
}
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
border-top: 1px solid var(--gin-border-color);
background: var(--gin-bg-app);
}
.gin--dark-mode {
.claro-details,
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
background-color: transparent;
}
.claro-details {
border-color: var(--gin-border-color);
}
.vertical-tabs {
&__items {
background: none;
border: 0 none;
}
&__menu-item.is-selected .vertical-tabs__menu-link {
background: var(--gin-bg-app);
border-color: transparent;
}
&__menu-link {
color: var(--gin-color-text);
}
&__menu-link-summary {
color: var(--gin-color-text-light);
}
.claro-details__wrapper {
background: var(--gin-bg-app);
}
}
}
.vertical-tabs {
&__items {
border-radius: var(--gin-border-m);
@include mq(large) {
border-top-left-radius: 0;
}
.vertical-tabs__item {
border-radius: 0;
@include mq(1360px) {
border-top-right-radius: var(--gin-border-m);
border-bottom-right-radius: var(--gin-border-m);
border-bottom-left-radius: var(--gin-border-m);
~ .vertical-tabs__item {
border-top-left-radius: var(--gin-border-m);
}
}
.claro-details__summary {
@include mq(large) {
padding-left: var(--gin-spacing-xxl);
&::before {
left: var(--gin-spacing-m);
}
}
}
> .claro-details__wrapper {
display: inline-block;
width: 100%;
}
}
}
&__menu-item {
&::before,
&::after {
border-color: var(--gin-border-color);
}
}
&__menu-link,
&__menu-item.is-selected &__menu-link {
&:hover {
color: var(--gin-color-primary);
&::before {
background: var(--gin-bg-item-hover);
}
}
}
}
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after {
border-left-width: 5px;
}
@media screen and (min-width: 85em) {
html.js .vertical-tabs__item {
overflow: visible;
float: left;
width: 100%;
}
}

849
web/themes/gin/styles/components/toolbar.scss Normal file
View File

@@ -0,0 +1,849 @@
// Offset
body.gin--vertical-toolbar,
body.gin--horizontal-toolbar,
body.gin--classic-toolbar {
padding-top: var(--gin-toolbar-y-offset) !important;
padding-left: var(--gin-toolbar-x-offset, 256px) !important;
margin-left: 0; // Fix for Drupal 9.3+
}
.toolbar {
font-family: var(--gin-font);
.toolbar-bar {
box-shadow: none;
@include mq(xsmall) {
.user-menu {
flex-grow: 1;
flex-shrink: 0;
text-align: right;
.toolbar-menu {
text-align: left;
}
}
}
.toolbar-tab > .toolbar-item {
white-space: nowrap;
}
.contextual-toolbar-tab.toolbar-tab {
float: right; // Set contextual to right
}
.toolbar-tab > .toolbar-item {
font-weight: var(--gin-font-weight-normal);
}
.toolbar-tab > .toolbar-icon {
&:hover {
background: rgba(255, 255, 255, .1);
&::before {
background-color: #fff;
}
}
&.is-active {
color: var(--gin-color-button-text);
background-image: none;
background-color: var(--gin-color-primary);
.gin--dark-mode & {
color: var(--gin-color-primary-active);
background-color: var(--gin-color-primary-light-active);
}
&::before {
background-color: var(--gin-color-button-text);
.gin--dark-mode & {
background-color: var(--gin-color-primary-active);
}
}
}
}
.toolbar-tab > .toolbar-icon:before {
@media only screen and (min-width: 36em) {
background-size: 90% auto;
}
}
.toolbar-icon.toolbar-handle,
.toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle
{
&::before {
transform: rotate(90deg);
background-position: center center;
background-size: 14px 14px;
}
&.open::before {
transform: rotate(-90deg);
}
}
// Inline Edit toggle
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
color: var(--gin-bg-app);
background: var(--gin-color-primary);
&::before {
background: var(--gin-bg-app);
}
}
// Overrides for default toolbar items
#toolbar-item-administration-search,
.toolbar-menu-administration .toolbar-icon,
.toolbar-tab > .toolbar-icon-edit.toolbar-item,
.toolbar-icon-toggle-vertical,
.toolbar-icon-toggle-horizontal {
&::before {
background: var(--gin-icon-color);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
@media (forced-colors: active) {
background: linktext !important;
}
}
&.toolbar-icon-default::before {
mask-size: 26px 26px;
}
&:hover::before {
@include mq(medium) {
background: var(--gin-color-primary);
}
}
&.is-active:hover::before {
@include mq(medium) {
background: var(--gin-color-primary);
}
}
}
#toolbar-item-administration-tray .toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {
&:before {
$logoSize: 28px;
$iconFill: 333333;
padding-left: 0;
padding-right: 0;
margin-left: 0;
background-color: var(--gin-color-text);
mask-image: icon('gin');
mask-position: center center;
}
&.is-active {
background-color: transparent;
&::after {
display: none;
}
}
}
.toolbar-icon-default {
&::before {
padding-top: 0;
}
}
// Fallback icon if none is set
.toolbar-icon {
&:before {
mask-image: icon('fallback');
}
}
// Hamburger
.toolbar-icon-menu {
&:before {
mask-image: icon('hamburger');
}
}
// Admin tray: Add content
.toolbar-icon-system-admin-content {
&:before {
mask-image: icon('content');
}
}
// Admin tray: Structure
.toolbar-icon-system-admin-structure {
&:before {
mask-image: icon('structure');
}
}
// Admin tray: Appearance
.toolbar-icon-system-themes-page {
&:before {
mask-image: icon('appearance');
}
}
// Admin tray: Extend
.toolbar-icon-system-modules-list {
&:before {
mask-image: icon('extend');
}
}
// Admin tray: Configuration
.toolbar-icon-system-admin-config {
&:before {
mask-image: icon('config');
}
}
// Admin tray: People
.toolbar-icon-entity-user-collection {
&:before {
mask-image: icon('people');
}
}
// Admin tray: Announcements
.toolbar-icon-announcements-feed-announcement,
.toolbar-icon-announce {
&:before {
mask-image: icon('announcement');
}
}
// Groups
.toolbar-icon-system-admin-group {
&:before {
mask-image: icon('group');
}
}
// Admin tray: Statistics
.toolbar-icon-system-admin-reports {
&:before {
mask-image: icon('reports');
}
}
// Admin tray: Help
.toolbar-icon-help-main,
.toolbar-icon-help {
&:before {
mask-image: icon('help');
}
}
// Commerce
.toolbar-icon-commerce-admin-commerce {
&:before {
mask-image: icon('commerce');
}
}
// Webform
.toolbar-icon-entity-webform-collection {
&:before {
mask-image: icon('webform');
}
}
// Admin tray: TMGMT Translation.
.toolbar-icon-tmgmt-admin-tmgmt {
&:before {
mask-image: icon('tmgmt');
}
}
// Admin Toolbar Language Switcher
.toolbar-icon-language {
&:before {
mask-image: icon('tmgmt');
}
}
// BAT
.toolbar-icon-bat-admin {
&:before {
mask-image: icon('bat');
}
}
// Commerce Inbox
.toolbar-icon-commerce-inbox {
&:before {
mask-image: icon('commerce-inbox');
}
}
// Back to site
.toolbar-icon-escape-admin {
display: none;
}
// Edit
.toolbar-icon-edit,
.toolbar-tab > .toolbar-icon-edit.toolbar-item {
&:before {
mask-image: icon('edit');
mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
}
}
// Local tasks
.toolbar-icon-local-tasks {
&:before {
mask-image: icon('local-tasks');
mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
}
}
// Shortcuts
.toolbar-icon-shortcut {
&:before {
mask-image: icon('shortcut');
}
}
// Coffee & Search
.toolbar-icon-coffee,
#toolbar-item-administration-search,
#admin-toolbar-mobile-search-tab .toolbar-icon {
&:before {
mask-image: icon('search');
}
}
// Devel
.toolbar-icon-devel {
&:before {
mask-image: icon('devel');
}
}
// Rebuild Cache Access
.toolbar-icon-rebuild-cache-access {
&:before {
mask-image: icon('rebuild-cache');
}
}
// Responsive Preview
.responsive-preview-icon {
&:before {
mask-image: icon('responsive-preview');
}
}
// User
.toolbar-icon-user {
&:before {
mask-image: icon('user');
}
}
// Environment
.toolbar-icon-environment {
&:before {
mask-image: icon('server');
}
}
// Toggle vertical
.toolbar-icon-toggle-vertical {
&:before {
mask-image: icon('nav-toggle-toleft');
}
}
// Toogle horizontal
.toolbar-icon-toggle-horizontal {
&:before {
mask-image: icon('nav-toggle-totop');
}
}
// Workbench
.toolbar-icon-workbench-content-tab {
&:before {
mask-image: icon('tool');
}
}
}
}
.toolbar-horizontal .toolbar-tray {
border-bottom: 1px solid var(--gin-border-color);
&,
[dir=rtl] & {
box-shadow: none;
}
a,
span {
color: var(--gin-color-text);
font-weight: var(--gin-font-weight-normal);
&:hover, &:active, &:focus, &.is-active {
text-decoration: none;
}
}
.menu-item {
a:hover, a:focus {
color: var(--gin-color-primary-hover);
background-color: var(--gin-bg-item-hover);
.toolbar-icon::before {
background-color: var(--gin-color-title);
}
.toolbar-icon.is-active::before {
background-color: var(--gin-color-primary);
}
}
&--no-link {
&:hover, a:focus {
background-color: transparent;
}
}
// Hide icons for sub-items.
.menu-item .toolbar-icon::before {
display: none;
}
a:focus {
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
}
.menu-item + .menu-item {
border-left: 0 none;
&:last-child {
border-right: 0 none;
}
}
}
.gin--dark-mode.toolbar-horizontal .toolbar-tray {
border-bottom: 1px solid var(--gin-border-color-layer);
}
// Fix for Admin_toolbar 2.4+: Remove white borders added by the admin_toolbar module
.toolbar .toolbar-tray-horizontal {
ul ul li.menu-item:first-child {
border-top: 0;
}
.menu-item:last-child {
border-left: 0;
border-right: 0;
}
}
.toolbar .toolbar-tray-vertical {
box-shadow: none;
border-right: 1px solid var(--gin-border-color);
background: var(--gin-bg-layer);
.menu-item + .menu-item {
border-top: 1px solid var(--gin-border-color-layer);
}
.menu-item + .menu-item__spacer {
border-top: 0 none;
}
.menu-item .toolbar-menu,
.menu-item:last-child {
border-bottom: 0 none;
}
// Custom logo
.menu-item .toolbar-logo {
padding-left: var(--gin-spacing-m);
}
.level-1.menu-item:last-child {
border-bottom: 1px solid var(--gin-border-color-layer);
}
.level-2 .toolbar-menu {
background-color: var(--gin-toolbar-bg-level2);
}
.level-3 .toolbar-menu {
background-color: var(--gin-toolbar-bg-level3);
}
.gin--dark-mode & {
.toolbar-menu ul ul {
border-color: transparent;
}
.level-1 .toolbar-menu {
background: var(--gin-bg-layer2);
}
.level-2 .toolbar-menu {
background: var(--gin-bg-layer3);
}
.level-3 .toolbar-menu {
background: #5a5a61;
}
}
}
.toolbar-tray-horizontal {
// admin_toolbar 3.3.1 fix
.menu-item.hover-intent,
.menu-item:focus-within,
.menu-item--expanded {
background-color: transparent;
}
ul {
li {
&.menu-item {
.menu-item {
background: transparent;
border-left: none;
border-right: none;
border-bottom: 0 none;
}
&--expanded {
&.hover-intent ul,
&:focus-within ul {
box-shadow: 0 8px 14px rgba(0, 0, 0, .15);
}
}
}
}
}
}
#toolbar-administration .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item {
font-weight: var(--gin-font-weight-bold);
&:hover::before {
background: #fff;
}
}
.toolbar .toolbar-icon.toolbar-handle::before,
.toolbar .toolbar-icon.toolbar-handle.open::before,
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle::before,
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open::before,
.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 {
background-image: none;
[dir="rtl"] & {
background-image: none;
}
}
.toolbar .toolbar-icon.toolbar-handle,
.toolbar .toolbar-icon.toolbar-handle.open,
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle,
.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open,
.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded {
&::before {
content: "";
display: block;
position: absolute;
right: 0;
top: 18px;
width: 16px;
height: 16px;
background-color: var(--gin-color-disabled);
mask-image: icon('handle');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 14px 14px;
/*! rtl:raw:transform: scaleX(-1); */
}
&.menu-item--active-trail,
&:hover,
&:focus,
&:focus-within {
&::before {
background-color: var(--gin-color-primary);
}
}
}
// Mobile.
.toolbar .toolbar-tray-vertical .toolbar-menu a,
.toolbar .toolbar-tray-vertical .toolbar-menu span {
display: block;
padding-left: 3.25em;
padding-top: 1.5em;
padding-bottom: 1.5em;
&:visited,
&:hover,
&:focus {
color: var(--gin-color-text);
}
&:focus {
background: var(--gin-color-primary-light);
}
&.is-active {
&::before {
background-color: var(--gin-color-primary);
}
}
}
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
&::before {
background: none;
background-color: rgba(255, 255, 255, .75);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
}
&.is-active:before,
&.is-active:hover:before {
@include mq(medium) {
background-color: var(--gin-color-button-text);
}
}
}
.toolbar-secondary .toolbar-bar .toolbar-icon,
.toolbar-icon-edit,
.toolbar-icon-menu,
.toolbar-icon-local-tasks,
#toolbar-item-administration-search,
.toolbar-tab > .toolbar-icon-edit.toolbar-item {
&:hover:before,
&.is-active:before {
@include mq($to: medium) {
background: #fff;
}
}
}
.toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon::before {
background-color: var(--gin-icon-color);
@media (forced-colors: active) {
background: linktext !important;
}
}
.toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item::before {
left: .55rem;
}
// Custom logo
#toolbar-item-administration-tray .toolbar-logo {
padding-top: var(--gin-spacing-xs);
padding-bottom: var(--gin-spacing-xs);
img {
max-width: 100px;
max-height: 35px;
object-fit: contain;
object-position: center;
}
}
#toolbar-item-user,
#toolbar-item-user-secondary {
display: inline-block;
vertical-align: top;
min-width: unset;
&.icon-user {
padding-left: 0;
margin-left: var(--gin-spacing-xs);
margin-top: 2px;
}
}
// Hide logo if accidentally shown in Devel.
[data-toolbar-tray=toolbar-item-devel-tray] {
.toolbar-icon-admin-toolbar-tools-help,
.menu-item__tools,
.toolbar-logo {
display: none;
}
}
// Hide announcements tab
.menu-item__announcements_feed-announcement {
display: none !important;
}
.responsive-preview-icon {
@extend .toolbar-icon;
&::before {
mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
}
}
// Admin Toolbar QuickSearch
#admin-toolbar-search-input {
color: var(--gin-color-text);
width: 245px;
padding-left: calc(var(--gin-spacing-xl) + var(--gin-spacing-xs));
background-color: #fff;
border: 1px solid var(--gin-border-color);
border-radius: 25px;
box-sizing: border-box;
&:not(:hover):not(:focus) {
box-shadow: none;
}
.gin--dark-mode & {
background-color: rgba(255, 255, 255, .075);
border: 1px solid transparent;
&:hover {
border-color: var(--gin-border-color-form-element);
}
}
}
#admin-toolbar-search-tab .js-form-type-search {
position: relative;
margin: 0;
&::before {
content: "";
opacity: .75;
display: block;
width: var(--gin-icon-size-toolbar-secondary);
height: var(--gin-icon-size-toolbar-secondary);
position: absolute;
top: 11px;
left: var(--gin-spacing-m);
background-color: var(--gin-icon-color);
mask-image: icon('search');
mask-size: 100% 100%;
mask-position: center center;
@media (forced-colors: active) {
background-color: buttonBorder;
}
}
}
// Admin Toolbar QuickSearch Results
.ui-autocomplete.admin-toolbar-search-autocomplete-list {
color: var(--gin-color-text);
background-color: var(--gin-bg-layer3);
border-radius: var(--gin-border-l);
box-shadow: var(--gin-shadow-l2);
&.ui-widget-content {
padding-top: var(--gin-spacing-xs);
padding-bottom: var(--gin-spacing-xs);
border: 0 none;
overflow-y: auto;
}
.ui-menu-item {
padding: 0 var(--gin-spacing-xs);
// Hide url
span.admin-toolbar-search-url {
display: none;
}
}
.ui-menu-item-wrapper {
font-size: var(--gin-font-size-s);
line-height: 1.3;
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
border-radius: var(--gin-border-s);
&.ui-state-active {
background-color: var(--gin-color-primary);
border: 0 none;
&, a {
color: var(--gin-color-button-text);
}
}
}
}
// admin_toolbar 3.3.1 fix
.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
position: absolute;
right: .5rem;
top: 1.1875rem;
width: 1rem;
height: 1rem;
padding: 0;
&::before {
top: 0;
left: 0;
mask-size: 12px 12px;
}
}
.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle {
position: absolute;
top: 0;
right: 0;
width: 39px;
height: 100%;
padding: 0;
background: none;
&:focus {
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
&::before {
display: none !important;
}
}
.toolbar-tray-horizontal .toolbar-icon:not(.toolbar-handle) {
width: 100%;
}
// Drupal 10.1 Toolbar loading overrides
.toolbar-loading #toolbar-item-administration-tray {
border-right: 0;
background-color: transparent;
.menu-item + .menu-item {
border-left: 0;
border-right: 0;
}
}
.toolbar-loading #toolbar-item-administration-tray.toolbar-tray {
background: var(--gin-bg-layer);
}

443
web/themes/gin/styles/components/toolbar_secondary.scss Normal file
View File

@@ -0,0 +1,443 @@
.gin-secondary-toolbar__layout-container *:focus {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
.gin-secondary-toolbar {
z-index: 102;
position: relative;
display: flex;
align-items: center;
padding-top: var(--gin-spacing-xs);
padding-bottom: var(--gin-spacing-xs);
margin-top: -1px;
height: var(--gin-toolbar-secondary-height);
border-bottom: 1px solid var(--gin-border-color-secondary);
box-sizing: border-box;
@include mq(medium) {
padding: 10px 0;
}
&--frontend {
z-index: 501; /* on top of the Drupal world */
position: sticky;
top: 0;
margin-top: 0;
height: var(--gin-toolbar-secondary-height);
background: rgba(#fff, .98);
border-bottom: 1px solid var(--gin-border-color-layer);
box-sizing: border-box;
@supports (backdrop-filter: blur()) {
opacity: .999; /* Fix Chrome issue with mask */
background: rgba(#fff, .8);
backdrop-filter: blur(12px);
}
.gin--dark-mode & {
background: rgba($colorDarkAppBackground, .98);
@supports (backdrop-filter: blur()) {
background: #{rgba(mix(black, $colorDarkAppBackground, 75%), .9)};
}
}
.gin--high-contrast-mode & {
background: var(--gin-bg-app);
backdrop-filter: none;
}
}
.gin--edit-form & {
@include mq(ultra) {
position: relative;
left: calc(50% - var(--gin-spacing-xxl));
transform: translateX(-50%);
}
}
&__layout-container {
display: flex;
align-items: center;
min-width: 1px; // Fixes broken flex layout due to white-space: nowrap in breadcrumbs.
width: 100%;
margin: 0 var(--gin-spacing-m);
@include mq(small) {
margin: 0 var(--gin-spacing-xl);
}
@include mq(medium) {
margin: 0 m#{i}n(5vw, var(--gin-spacing-xxl));
}
}
.region-breadcrumb {
min-height: 1.25rem;
}
}
.gin-breadcrumb-wrapper {
flex-grow: 1;
white-space: nowrap;
margin-right: var(--gin-spacing-xl);
}
.gin-back-to-admin {
font-family: var(--gin-font);
font-size: var(--gin-font-size-xs);
font-weight: var(--gin-font-weight-normal);
line-height: 2;
color: var(--gin-color-text-light);
text-decoration: none;
position: relative;
padding-left: 2em;
border-bottom: 0 none;
border-radius: var(--gin-border-xxs);
&::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0;
width: var(--gin-icon-size-toolbar-secondary);
height: var(--gin-icon-size-toolbar-secondary);
transform: translateY(-50%);
background-color: var(--gin-icon-color);
mask-image: icon('backtosite');
mask-size: 100% 100%;
mask-position: center center;
}
&:hover {
color: var(--gin-color-primary-hover);
&::before {
background-color: var(--gin-color-primary-hover);
}
}
}
@include mq(medium) {
// Hide unused tabs
.toolbar .toolbar-bar {
background: transparent;
box-shadow: none !important; // fixes an RTL issue
.toolbar-tab {
&, .toolbar-menu__logo {
display: none;
}
&.toolbar-tab--toolbar-item-administration {
display: block;
}
}
}
.toolbar-tab--toolbar-item-administration {
> .toolbar-icon-menu {
display: none;
}
}
#toolbar-item-administration-tray {
display: block;
position: absolute;
top: 0;
}
}
#toolbar-administration-secondary {
@include mq(medium) {
.toolbar-bar {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
}
}
.gin-secondary-toolbar .toolbar-secondary {
display: none;
@include mq(medium) {
display: block;
.toolbar-bar {
height: var(--gin-toolbar-height);
z-index: 102;
.toolbar-tab {
display: block;
position: relative;
&:hover, &:focus-within {
border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
> .toolbar-item {
color: var(--gin-color-title);
&:before {
background: var(--gin-color-title);
}
}
.toolbar-tray {
display: block;
}
}
.toolbar-item {
font-size: 0;
color: var(--gin-color-text-light);
width: 32px;
height: 32px;
margin: 0;
border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
&:before {
top: 0;
left: 10px;
}
&:focus {
border-radius: var(--gin-border-s);
}
&:focus ~ .toolbar-tray {
display: block;
}
&:hover,
&:focus {
color: var(--gin-color-title);
background: none;
&::before {
background-color: var(--gin-color-title);
}
}
&:focus,
&:hover:focus {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
}
&:hover,
&:focus {
.trigger {
text-decoration: none;
background: var(--gin-bg-layer3);
}
}
.toolbar-tray {
position: absolute;
left: 0;
width: 170px;
background-color: var(--gin-bg-layer3);
border-bottom: 0 none;
border-radius: 0 var(--gin-border-l) var(--gin-border-l) var(--gin-border-l);
box-shadow: var(--gin-shadow-l2);
a {
color: var(--gin-color-primary);
padding: var(--gin-spacing-s) var(--gin-spacing-m);
border-radius: var(--gin-border-s);
font-size: var(--gin-font-size-xs);
font-weight: normal;
&:hover, &:active {
color: var(--gin-color-button-text);
background-color: var(--gin-color-primary);
}
// Has icon
&.action-link {
&::before {
background-color: var(--gin-color-primary);
}
&:hover::before {
background-color: var(--gin-color-button-text);
}
}
}
.toolbar-lining:not(:empty) {
padding: var(--gin-spacing-xs);
}
// Hide icons for custom modules
.toolbar-icon {
&:before {
display: none;
}
}
}
&.hidden {
display: none;
}
}
div:nth-last-child(2),
div:last-child {
.toolbar-tray {
left: auto;
right: 0;
border-radius: var(--gin-border-l) 0 var(--gin-border-l) var(--gin-border-l);
}
}
// Edit button
.toolbar-tab > .toolbar-icon-edit.toolbar-item {
&,
&:hover,
&:active,
&:focus,
&.is-active,
&.is-active:hover {
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-text-light);
background-color: transparent;
&::before {
background-image: none;
background-color: var(--gin-icon-color);
}
}
}
.toolbar-id--toolbar-icon-user {
@include mq(wide) {
margin-right: -1.333em;
}
&:hover {
.icon-user {
box-shadow: 0 0 0 2px var(--gin-bg-app),
0 0 0 5px var(--gin-bg-layer3);
}
}
.icon-user {
border: 1px solid var(--gin-border-color);
overflow: hidden;
margin-left: var(--gin-spacing-m);
padding: 0;
line-height: 0;
&,
&:focus {
border-radius: 50%;
}
&__image {
width: 100%;
height: 100%;
object-fit: cover;
}
&,
~ .toolbar-tray {
@include mq(wide) {
margin-right: 1.333em;
}
}
}
}
.toolbar-menu {
background-color: transparent;
float: unset;
}
}
}
}
// Show expanded
.gin-secondary-toolbar .toolbar-secondary {
@include mq(wide) {
.toolbar-bar {
.toolbar-tab {
margin-left: -.25em;
.toolbar-item {
font-size: var(--gin-font-size-xs);
width: auto;
height: auto;
padding-left: 2.875em;
&::before {
width: var(--gin-icon-size-toolbar-secondary);
height: var(--gin-icon-size-toolbar-secondary);
top: calc(50% - 1px);
left: 12px;
transform: translateY(-50%);
}
.icon-user {
&__image {
width: 34px;
height: 34px;
}
}
}
}
}
}
}
#toolbar-item-administration-search::before {
mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary) !important;
}
#admin-toolbar-search-input {
line-height: 1; // FF fix
padding-top: 10px;
padding-bottom: 10px;
margin-right: 12px;
font-size: var(--gin-font-size-xs);
&::placeholder {
color: var(--gin-color-disabled);
opacity: 1;
.gin--dark-mode & {
color: var(--gin-color-text-light);
opacity: .75;
}
}
}
#admin-toolbar-search-tab .js-form-item.form-item {
margin-top: 0;
}
.ui-autocomplete.admin-toolbar-search-autocomplete-list {
max-width: 320px;
border-radius: var(--gin-border-m);
.ui-menu-item-wrapper {
font-size: var(--gin-font-size-xs);
}
}
.announce-toolbar-tab {
> .ajax-progress {
position: absolute;
top: 12px;
z-index: 999;
background-color: var(--gin-bg-layer);
.ajax-progress__throbber {
border-width: 2px;
}
}
}

73
web/themes/gin/styles/components/upgrade_status.scss Normal file
View File

@@ -0,0 +1,73 @@
.drupal-upgrade-status-summary-form tr.known-errors,
.upgrade-status-error-list tr.rector-covered,
.upgrade-status-next-step-collaborate tr,
.upgrade-status-error-list tr.no-known-error,
.upgrade-status-next-step-relax tr,
.upgrade-status-summary-environment tr.no-known-error {
color: var(--gin-color-text);
}
.upgrade-status-summary > summary {
background-color: transparent;
border-bottom: 1px solid transparent;
}
.upgrade-status-summary tr.not-scanned > td.status-info,
.upgrade-status-error-list tr.no-known-error > td.status-info,
.upgrade-status-summary tr.no-known-error > td.status-info,
.upgrade-status-error-list tr.known-warnings > td.status-info,
.upgrade-status-summary tr.known-warnings > td.status-info,
.upgrade-status-error-list tr.known-errors > td.status-info,
.upgrade-status-summary tr.known-errors > td.status-info {
position: relative;
background-image: none;
&:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
left: var(--gin-spacing-xs);
margin-top: 2px;
}
}
.upgrade-status-counter__status-icon--not-scanned:before {
mask-size: 24px 24px;
}
.upgrade-status-summary .select-all,
.upgrade-status-summary th.project-label, .upgrade-status-summary th.requirement-label {
border-left: var(--gin-border-m) solid var(--gin-bg-header);
}
.upgrade-status-error-list tr.rector-covered,
.upgrade-status-next-step-collaborate tr,
.upgrade-status-error-list tr.no-known-error,
.upgrade-status-next-step-relax tr,
.upgrade-status-summary-environment tr.no-known-error {
background-color: transparent;
}
.upgrade-status-summary > summary,
.upgrade-status-summary-environment > summary {
background-color: transparent;
border-bottom: 0 none;
}
// Passed
.drupal-upgrade-status-summary-form tr.no-known-error {
color: var(--gin-color-green);
}
// Warning
.upgrade-status-next-step-remove tr,
.drupal-upgrade-status-summary-form tr.known-warnings {
color: var(--gin-color-warning);
}
// Error
.drupal-upgrade-status-summary-form tr.known-errors {
color: var(--gin-color-danger);
}

77
web/themes/gin/styles/components/webform.scss Normal file
View File

@@ -0,0 +1,77 @@
.webform-filter-form {
margin-bottom: var(--gin-spacing-xl);
> .container-inline {
margin-block: 0;
}
.details-wrapper {
margin-top: 0;
margin-bottom: var(--gin-spacing-xs);
}
// Followed by a title
+ div:not(.gin-layer-wrapper) {
// @extend h3;
margin-bottom: var(--gin-spacing-s);
}
}
.webform-ui-element-type-change-form {
.gin-layer-wrapper {
padding: 0;
}
}
.webform-element-help {
color: var(--gin-color-text);
background: transparent;
border-color: var(--gin-color-text);
&:hover,
&:active,
&:focus {
color: var(--gin-color-primary);
border-color: var(--gin-color-primary);
background-color: transparent;
}
}
.ui-tooltip.ui-widget {
font-size: var(--gin-font-size-s);
color: var(--gin-color-text);
padding: var(--gin-spacing-m);
background: var(--gin-bg-layer3);
box-shadow: 20px 20px 60px rgba(0, 0, 0, .2);
border: 0 none;
border-radius: 6px;
hr {
margin: var(--gin-spacing-xs) 0;
}
}
.webform-details-toggle-state {
color: var(--gin-color-primary);
}
.webform-ui-elements-table {
tr.webform-ui-element-type-webform_actions {
td {
border-top: none;
border-bottom: none;
background: none;
}
}
}
.webform-tabs.ui-tabs {
.ui-tabs-nav {
border-bottom: 0 none;
.ui-tabs-active.ui-state-active a {
border: 2px solid var(--gin-color-primary);
border-radius: var(--gin-border-m);
}
}
}

62
web/themes/gin/styles/components/workbench.scss Normal file
View File

@@ -0,0 +1,62 @@
#toolbar-item-workbench-tray {
// Hide logo
.menu-item__tools {
display: none;
}
// Custom icons
.toolbar-icon {
&:before {
left: var(--gin-spacing-s);
background: var(--gin-icon-color);
background-image: none;
mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);
mask-repeat: no-repeat;
mask-position: center center;
}
&:hover:before,
&.is-active:before {
background: var(--gin-color-primary);
}
}
.toolbar-icon-workbench-content {
&:before {
mask-image: icon('tool');
}
}
.toolbar-icon-workbench-create-content {
&:before {
mask-image: icon('edit');
}
}
.toolbar-icon-workbench-my-edited {
&:before {
mask-image: icon('list');
}
}
.toolbar-icon-workbench-all-content {
&:before {
mask-image: icon('content');
}
}
.toolbar-icon-workbench-configure {
&:before {
mask-image: icon('config');
}
}
}
.gin-secondary-toolbar .toolbar-secondary {
// Hide icons
.toolbar-tray .toolbar-icon {
&:before {
display: none;
}
}
}

6
web/themes/gin/styles/components/workspaces.scss Normal file
View File

@@ -0,0 +1,6 @@
tr.active-workspace {
color: var(--gin-color-primary-active);
font-size: var(--gin-font-size);
font-weight: var(--gin-font-weight-semibold);
background: var(--gin-bg-header);
}