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

110
web/themes/gin/styles/base/_action-link.scss Normal file
View File

@@ -0,0 +1,110 @@
.action-link {
color: var(--gin-color-primary);
background: transparent;
border-radius: var(--gin-border-s);
&:hover {
color: var(--gin-color-primary-hover);
background: var(--gin-bg-item-hover);
}
&:focus {
color: var(--gin-color-primary-active);
background: var(--gin-color-primary-light-hover);
}
&.action-link--extrasmall {
font-size: var(--gin-font-size-xxs);
}
&:before {
background-image: none;
background: var(--gin-color-primary) !important;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
&--icon-plus:hover:before,
&--icon-ex:hover::before,
&--icon-checkmark:hover:before,
&--icon-show:hover::before,
&--icon-cog:hover::before,
&--icon-hide:hover::before,
&--icon-show:before,
&--icon-hide:before {
background-image: none;
background-color: var(--gin-color-primary);
}
&--icon-plus:before {
mask-image: icon('add');
}
&--icon-checkmark:before {
mask-image: icon('checkmark');
}
&--icon-show:before {
mask-image: icon('show');
}
&--icon-hide:before {
mask-image: icon('hide');
}
&--icon-cog::before {
mask-image: icon('config');
}
&--icon-ex::before {
mask-image: icon('remove');
}
&--icon-key::before {
mask-image: icon('devel');
}
&--icon-questionmark::before {
mask-image: icon('help');
}
}
.action-link--icon-trash.action-link--danger,
.button.button--danger,
a.button.button--danger {
color: var(--gin-color-danger);
box-shadow: 0 1px 2px var(--gin-color-danger-lightest);
&,
&:hover,
&:focus,
&:active {
// border-color: transparent !important;
border-color: var(--gin-color-danger) !important;
&:before {
background-image: none;
background-color: var(--gin-color-danger) !important;
mask-image: icon('trash');
}
}
&:hover,
&:focus,
&:active {
color: var(--gin-bg-layer);
background-color: var(--gin-color-danger);
&:before {
background-color: var(--gin-bg-layer) !important;
}
}
}
// Primary danger button
.button--primary.button--danger,
a.button--primary.button--danger {
color: var(--gin-bg-layer);
background-color: var(--gin-color-danger);
}

90
web/themes/gin/styles/base/_admin-item.scss Normal file
View File

@@ -0,0 +1,90 @@
.admin-list {
padding: var(--gin-spacing-s) 0;
}
.admin-item {
position: relative;
padding: var(--gin-spacing-density-s) calc(var(--gin-spacing-xs) + var(--gin-spacing-xl)) var(--gin-spacing-density-s) var(--gin-spacing-l);
margin: var(--gin-spacing-l) var(--gin-spacing-s);
&--panel {
margin: 0 calc(var(--gin-spacing-l) * -1);
}
&:not(:last-child) {
border-bottom: 0 none;
&::after {
content: "";
opacity: .75;
display: block;
position: absolute;
left: calc(var(--gin-spacing-s) * -1);
bottom: calc(var(--gin-spacing-s) * -1);
width: calc(100% + var(--gin-spacing-l));
height: 1px;
border-bottom: 1px solid var(--gin-border-color-table);
}
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&__title {
font-size: var(--gin-font-size);
font-weight: var(--gin-font-weight-semibold);
}
&__description {
font-size: var(--gin-font-size-s);
color: var(--gin-color-text-light);
}
& &__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-indent: -999em;
&::before {
right: var(--gin-spacing-m);
left: auto;
top: 50%;
transform: translateY(-50%) unquote("/*! rtl:append scaleX(-1) */");
background-image: none;
background-color: var(--gin-color-primary);
mask-image: icon('handle');
mask-size: 1em 1em;
mask-repeat: no-repeat;
mask-position: center center;
@media (forced-colors: active) {
background-color: linktext;
}
}
&:hover,
&:focus {
background: var(--gin-color-primary-light);
border-radius: var(--gin-border-m);
~ .admin-item__title,
~ .admin-item__description {
color: var(--gin-color-primary);
}
}
&:focus {
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
}
}

5
web/themes/gin/styles/base/_batch.scss Normal file
View File

@@ -0,0 +1,5 @@
.path-batch {
.region-header {
display: flex;
}
}

6
web/themes/gin/styles/base/_blocks.scss Normal file
View File

@@ -0,0 +1,6 @@
.block-disabled {
&:not(:hover) {
opacity: .6;
background: transparent;
}
}

95
web/themes/gin/styles/base/_body.scss Normal file
View File

@@ -0,0 +1,95 @@
html {
font-family: var(--gin-font);
scroll-padding-top: var(--gin-scroll-offset) !important;
}
body {
color: var(--gin-color-text);
background: var(--gin-bg-app);
overflow-x: hidden;
@include mq(large) {
overflow-x: auto;
}
}
h1, h2, h3 {
letter-spacing: -.025em;
font-weight: var(--gin-font-weight-normal);
}
h2 {
font-size: var(--gin-font-size-h2);
}
h3 {
font-size: var(--gin-font-size-h3);
}
::selection {
background: var(--gin-color-primary-light-hover);
}
::-moz-selection {
background: var(--gin-color-primary-light-hover);
}
a {
overflow-wrap: break-word;
word-wrap: break-word;
}
// Enforcing colors on visually hidden text does not change anything for the
// user, but it prevents accessibilty scanners like Wave from reporting contrast
// errors on visually hidden elements. While this is certainly an issue with the
// scanners and not Gin, this ensures that scans provide an accurate account of
// Gin's contrast support.
.visually-hidden {
color: #000;
.gin--dark-mode & {
color: #FFF;
}
&.skip-link {
color: var(--gin-color-button-text);
}
}
// Set a dark color scheme to style native browser elements.
.gin--dark-mode {
color-scheme: dark;
}
// Flags.
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.gin-new-flag
{
font-size: 10px;
font-weight: var(--gin-font-weight-semibold);
text-transform: uppercase;
letter-spacing: .1em;
display: inline-block;
padding: .125em .5em;
vertical-align: .125em;
border-radius: var(--gin-border-xs);
}
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag {
color: #555;
background: #ddd;
.gin--dark-mode & {
color: #eee;
background: #444;
}
}
.gin-new-flag {
color: #fff;
background-color: #26a769;
}

133
web/themes/gin/styles/base/_button.scss Normal file
View File

@@ -0,0 +1,133 @@
.button,
.dropbutton__item:first-of-type > *,
.dropbutton__toggle {
font-size: var(--gin-font-size-s);
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-primary);
background-color: transparent;
box-shadow: none;
transition: var(--gin-transition);
@include mq(wide) {
font-size: var(--gin-font-size);
}
&:hover {
background-color: var(--gin-color-primary-hover);
}
&:active, &:focus {
background-color: var(--gin-color-primary-active);
}
&:hover, &:active, &:focus {
color: var(--gin-color-button-text);
}
}
.button,
.button:not(:focus),
.form-actions .button,
.action-link--icon-trash.action-link {
font-size: var(--gin-font-size-s);
padding: calc(var(--gin-spacing-s) - 2px) var(--gin-spacing-m);
border: 2px solid var(--gin-color-primary) !important;
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px var(--gin-color-primary-light);
transition: var(--gin-transition);
&:hover {
background-color: var(--gin-color-primary-hover);
border-color: var(--gin-color-primary-hover) !important;
}
&:active, &:focus {
border-color: var(--gin-color-primary-active) !important;
}
&:hover, &:active, &:focus, &:hover:focus {
color: var(--gin-color-button-text);
}
}
.form-actions .button {
margin-right: var(--gin-spacing-xs);
}
.button.button--small {
padding: calc(var(--gin-spacing-xxs) + 2px) var(--gin-spacing-m);
border-radius: var(--gin-border-s);
}
.button.button--extrasmall {
padding: var(--gin-spacing-xxs) var(--gin-spacing-s);
border-radius: var(--gin-border-s);
}
.button--primary,
.button--primary:not(:focus),
.ief-entity-submit {
background: var(--gin-color-primary);
box-shadow: .1em .25em .5em var(--gin-color-primary-light);
&:hover {
background-color: var(--gin-color-primary-hover);
}
&:active, &:focus {
background-color: var(--gin-color-primary-active);
}
&, &:hover, &:active, &:focus {
color: var(--gin-color-button-text);
}
}
a.button:hover,
a.button:active {
color: var(--gin-color-button-text);
}
a.button--primary:hover,
a.button--primary:active,
a.button--primary:focus,
a.button--primary:focus:hover {
.gin--dark-mode & {
color: var(--gin-bg-app);
}
}
.button.button:disabled, .button.button.is-disabled {
&, &:hover, &:active, &:focus {
color: var(--gin-color-disabled);
background: transparent;
border: 2px solid var(--gin-color-disabled-border) !important;
box-shadow: none;
}
}
.button.button--primary:disabled, .button.button--primary.is-disabled {
&, &:hover, &:active, &:focus {
color: var(--gin-color-disabled);
background-color: var(--gin-color-disabled-bg);
}
}
.action-link.action-link--icon-trash {
line-height: 1;
min-height: 2.5rem;
box-sizing: border-box;
&, &:hover, &:active, &:focus, &:focus:hover {
border: 2px solid var(--gin-color-danger) !important;
}
}
// Autocomplete field remove button
.multiple-fields-remove-button.button {
border: 0 none !important;
mask-image: icon('remove');
mask-size: 16px 16px;
mask-repeat: no-repeat;
mask-position: center center;
}

43
web/themes/gin/styles/base/_card.scss Normal file
View File

@@ -0,0 +1,43 @@
.card {
padding: 0;
background: transparent;
border: 1px solid var(--gin-border-color-layer2);
border-radius: var(--gin-border-m);
box-shadow: none;
overflow: hidden;
.gin--dark-mode & {
box-shadow: none;
}
&-list {
margin-bottom: var(--gin-spacing-xl);
}
&__image {
img {
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
@include mq(xsmall) {
border-radius: var(--gin-border-m) 0 0 var(--gin-border-m);
}
}
}
&__content-wrapper {
background-color: var(--gin-bg-layer);
border-radius: 0 0 var(--gin-border-xs) var(--gin-border-xs);
@include mq(xsmall) {
border-radius: 0 var(--gin-border-xs) var(--gin-border-xs) 0;
}
.gin--dark-mode & {
background-color: var(--gin-bg-layer2);
}
}
.heading-f {
color: var(--gin-color-title);
}
}

31
web/themes/gin/styles/base/_claro_improvements.scss Normal file
View File

@@ -0,0 +1,31 @@
// Summary
details summary {
padding: var(--gin-spacing-m);
background-color: rgba(#e6e4df, .2);
}
// Claro form--inline fixes
.form--inline,
[data-drupal-selector*="-bulk-form"],
.layout-region-node-footer__content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding-top: var(--gin-spacing-m);
.form-item,
.form-actions {
margin: var(--gin-spacing-xs) var(--gin-spacing-xs) var(--gin-spacing-xs) 0;
align-self: flex-start;
}
.button,
.action-link {
margin-top: 0;
margin-bottom: 0;
}
.field-add-more-submit {
margin-top: var(--gin-spacing-s);
}
}

68
web/themes/gin/styles/base/_color-overrides.scss Normal file
View File

@@ -0,0 +1,68 @@
// Color
a,
.link,
button.link,
.tabs__link.is-active,
[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item,
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link
{
color: var(--gin-color-primary);
text-decoration-style: var(--gin-link-decoration-style);
&:hover {
color: var(--gin-color-primary-hover);
}
&:active {
color: var(--gin-color-primary-active);
}
}
*|*:any-link:not(svg|a) {
text-decoration: underline;
text-decoration-style: var(--gin-link-decoration-style);
}
// Only hover
.is-horizontal .tabs__link,
.claro-details__summary,
.action-link
{
&:hover {
color: var(--gin-color-primary-hover);
}
}
// Only focus
.claro-details[open] > .claro-details__summary
{
&:focus {
color: var(--gin-color-primary-active);
}
}
// Border color
.form-boolean--type-checkbox:checked,
.form-boolean--type-radio:checked:not(:disabled),
.is-horizontal .tabs__link.is-active::before,
.tabs__tab.is-active::before,
[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after,
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before
{
border-color: var(--gin-color-primary);
&:hover {
border-color: var(--gin-color-primary-hover);
}
&:active {
border-color: var(--gin-color-primary-active);
}
}

3
web/themes/gin/styles/base/_divider.scss Normal file
View File

@@ -0,0 +1,3 @@
.divider {
background-color: var(--gin-border-color);
}

294
web/themes/gin/styles/base/_dropbutton.scss Normal file
View File

@@ -0,0 +1,294 @@
.dropbutton-widget,
html.js .dropbutton-widget {
background-color: transparent;
}
.dropbutton {
border: 2px solid var(--gin-color-primary);
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px var(--gin-color-primary-light);
// Offset for select button on first item
&--multiple > .dropbutton__item:first-of-type {
height: 100%;
margin-right: var(--gin-spacing-xxl);
border-right: 1px solid var(--gin-color-primary-light-active);
input {
color: var(--gin-color-primary);
height: 100%;
background-color: transparent;
border: 0 none !important;
border-radius: 0 !important;
}
}
.gin--dark-mode & {
box-shadow: 0 4px 18px var(--gin-shadow-button);
}
&:hover {
border-color: var(--gin-color-primary);
}
&:active, &:focus {
border-color: var(--gin-color-primary-active);
}
&-wrapper {
box-shadow: none;
}
&__item:first-of-type > *,
&__toggle {
background: none;
white-space: nowrap;
@media (forced-colors: active) {
border-width: 0 !important;
}
}
&__item:first-of-type > * {
padding: calc(.875rem - 1px) calc(var(--gin-spacing-l) - 1px);
}
&__toggle {
top: 2px;
right: 2px;
width: calc(var(--gin-spacing-xxl) + 1px);
height: 2.75rem;
border-inline-start: var(--dropbutton-border-size, 1px) solid var(--gin-color-primary) !important;
&:hover {
background-color: var(--gin-color-primary);
}
@media not (forced-colors: active) {
&::before {
background-image: none;
background-color: var(--gin-color-primary);
mask-image: icon('drop');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 12px 12px;
}
&:hover::before,
&:active::before,
&:focus::before {
background-color: var(--gin-color-button-text);
}
}
}
& &__items {
position: absolute;
right: 0;
list-style: none;
padding: .5em;
margin: 0;
min-width: 120px;
background: var(--gin-bg-layer3);
border-radius: var(--gin-border-l);
box-shadow: var(--gin-shadow-l2);
.node-form & {
left: 0;
right: auto;
}
@media (forced-colors: active) {
border: 1px solid linktext;
}
}
& > &__items > .dropbutton__item:first-of-type {
> a,
> input,
> .button {
border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
}
}
// Drupal 10.2.x fix
&.dropbutton--gin .dropbutton-action > .button {
border: var(--dropbutton-border-size) solid transparent !important;
}
// The ugly part: make it work for all different dropbutton versions out there
&:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item,
& &__items > .dropbutton__item,
& &__items > .dropbutton__item ~ .dropbutton__item {
background-color: var(--gin-bg-app);
border: 0 none;
box-shadow: none;
&:first-of-type {
margin-right: 0;
}
// Mutiple Dropbutton only has one item
&:first-of-type:last-of-type > * {
.js .dropbutton--multiple & {
border-radius: var(--gin-border-s);
}
}
> a,
> input,
> .button {
font-weight: var(--gin-font-weight-heavy);
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--gin-color-primary);
display: block;
width: 100%;
max-width: 320px;
margin: 0;
border: 0 none !important;
border-radius: 0;
background: var(--gin-bg-layer3);
box-shadow: none;
box-sizing: border-box;
&:hover, &:active, &:focus {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
border-radius: var(--gin-border-s);
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: -2px;
}
}
&:focus {
@media (forced-colors: active) {
outline-style: dotted;
}
}
}
}
& > .dropbutton__item:first-of-type {
> a,
> input,
> .button {
&:hover, &:active, &:focus {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
}
}
}
& &__items > .dropbutton__item {
border-radius: var(--gin-border-s);
}
// Shadow for pseudo dropdown on views page
&:not(.dropbutton--gin) > .dropbutton__item.secondary-action {
box-shadow: var(--gin-shadow-l2);
}
&:not(.dropbutton--gin) > .dropbutton__item:not(:first-of-type),
& &__items > .dropbutton__item,
& > &__items > .dropbutton__item ~ .dropbutton__item {
> a,
> input,
> .button {
font-size: var(--gin-font-size-s) !important;
padding: .75em 1em !important;
}
}
&__item:first-of-type ~ .dropbutton__item {
max-width: unset;
border-color: var(--gin-color-primary);
& > *:hover {
background-color: var(--gin-bg-layer3);
}
&__item ~ .dropbutton__item:last-child {
border-color: var(--gin-color-primary);
}
}
}
html.js {
.dropbutton {
height: 3rem;
min-height: 3rem;
box-sizing: border-box;
}
.dropbutton-wrapper:not(.open) .dropbutton__items {
display: none;
}
.dropbutton-wrapper .dropbutton__items {
display: block;
}
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__items {
display: none;
}
.dropbutton-wrapper:not(.open) .dropbutton__items .dropbutton__item:first-of-type ~ .dropbutton__item {
display: block;
}
}
html.js.no-touchevents {
.dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
margin-right: 0;
}
.dropbutton--multiple.dropbutton--small > .dropbutton__item:first-of-type {
margin-right: var(--gin-spacing-xl);
}
.dropbutton--multiple.dropbutton--extrasmall > .dropbutton__item:first-of-type {
margin-right: var(--gin-spacing-l);
}
.dropbutton--small {
min-width: 0;
height: 2.25rem;
min-height: 2.25rem;
border-radius: var(--gin-border-s);
.dropbutton__toggle {
width: calc(var(--dropbutton-small-toggle-size, 2rem) + 1px);
}
}
.dropbutton--extrasmall {
min-width: 0;
height: 1.75rem;
min-height: 1.75rem;
border-radius: var(--gin-border-s);
.dropbutton__toggle {
width: calc(var(--dropbutton-extrasmall-toggle-size, 1.5rem) + 1px);
}
.dropbutton__item:first-of-type > * {
padding-left: var(--gin-spacing-s);
padding-right: var(--gin-spacing-s);
}
}
.dropbutton--multiple.dropbutton--extrasmall .dropbutton__items .dropbutton__item {
margin-right: 0;
}
}
// Last item in table
table tr:not(:first-of-type):nth-last-child(2) td .dropbutton__items,
table tr:not(:first-of-type):last-of-type td .dropbutton__items {
bottom: 100%;
}

3
web/themes/gin/styles/base/_elements.scss Normal file
View File

@@ -0,0 +1,3 @@
hr {
margin: var(--gin-spacing-xl) 0;
}

48
web/themes/gin/styles/base/_extend.scss Normal file
View File

@@ -0,0 +1,48 @@
.modules-table-filter {
padding: 0;
border: 0 none;
box-shadow: none;
}
.package-listing {
margin-top: var(--gin-spacing-m);
}
.claro-details__summary {
padding-left: 2.75rem;
}
.claro-details.claro-details--package-listing,
.claro-details.module-list__module-details,
.system-status-report .claro-details {
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-m);
}
.claro-details__summary,
.claro-details__summary.claro-details__summary--package-listing,
.claro-details__summary.claro-details__summary--system-status-report {
color: var(--gin-color-text);
background-color: transparent;
}
.claro-details__wrapper,
.claro-details__wrapper.claro-details__wrapper--package-listing,
.claro-details__wrapper.claro-details__wrapper--system-status-report {
margin: var(--gin-spacing-m) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
margin: 0;
}
.claro-details__summary-summary {
color: var(--gin-color-text-light);
opacity: .8;
}
.module-list__module {
border-bottom: 1px solid var(--gin-border-color);
}

86
web/themes/gin/styles/base/_field-ui.scss Normal file
View File

@@ -0,0 +1,86 @@
.draggable.field-plugin-settings-editing, .draggable.drag-previous.field-plugin-settings-editing {
background: var(--gin-bg-app);
}
.field-plugin-summary {
font-size: var(--gin-font-size-xs);
color: var(--gin-color-text-light);
}
.field-option {
--thumb-size: 5rem;
gap: var(--gin-spacing-m);
align-items: baseline;
padding: 0;
background-color: transparent;
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-m);
&__thumb {
// background-color: var(--gin-bg-header);
background-color: var(--gin-bg-layer2);
border-radius: 0;
border-top-left-radius: var(--gin-border-s);
border-bottom-left-radius: var(--gin-border-s);
}
&__icon {
filter: brightness(0);
.gin--dark-mode & {
filter: brightness(0) invert(1);
}
}
&__item {
column-gap: 0;
padding-block: var(--gin-spacing-s);
.form-item__label {
margin-bottom: var(--gin-spacing-xxs);
}
}
& &__description {
font-size: var(--gin-font-size-xs);
line-height: 1.3;
color: var(--gin-color-text-light);
}
.field-option-radio {
visibility: hidden;
}
&.selected,
&:has(.field-option-radio:checked) {
background-color: var(--gin-bg-layer2);
.field-option__thumb {
background-color: var(--gin-color-primary);
}
.field-option__icon {
filter: brightness(0) invert(1);
.gin--dark-mode & {
filter: brightness(0);
}
}
}
}
.subfield-option {
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-m);
.item-list {
font-size: var(--gin-font-size-xs);
color: var(--gin-color-text-light);
margin-top: var(--gin-spacing-xs);
}
&.selected {
background-color: var(--gin-bg-layer2);
}
}

71
web/themes/gin/styles/base/_focus.scss Normal file
View File

@@ -0,0 +1,71 @@
.page-wrapper *:focus,
.ui-dialog *:focus,
.dropbutton .dropbutton__item > *:focus,
.dropbutton .dropbutton__item > *:focus:hover,
.dropbutton__items > .dropbutton__item:first-of-type > *:focus,
.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus,
.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus:hover,
.form-boolean:focus:active,
.form-boolean:focus:hover,
.cke.cke_chrome.cke_focus,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus,
.form-element:focus,
.form-element:hover:focus,
.form-element.error:hover:focus,
.form-actions .action-link:focus,
.paragraphs-tabs-wrapper .field-multiple-table .draggable.drag,
.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-edit:focus,
.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-remove:focus,
.ck .ck.ck-button:active,
.ck .ck.ck-button:focus,
.ck .ck.ck-button:active:focus,
.toolbar-box .toolbar-handle:focus,
.field-option:has(.field-option-radio:checked),
.subfield-option:has(.field-option-radio:checked)
{
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
.admin-item__link:focus {
border-radius: calc(var(--gin-border-xs) / 2);
}
.claro-details {
&:focus,
&:focus:hover,
&__summary:focus,
&__summary:focus:hover {
box-shadow: none;
}
&__summary {
&:after {
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
}
}
.tabs__link:focus {
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
.vertical-tabs__menu-link:focus:after,
.tabs__trigger:focus {
box-shadow: none;
border: var(--gin-border-xs) solid var(--gin-color-focus);
}
@include mq(small) {
.is-horizontal .tabs__link:focus,
.is-horizontal .tabs--primary .tabs__link:focus {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
}
.vertical-tabs__menu-link:focus,
.vertical-tabs__menu-item:focus {
outline: 0;
box-shadow: none;
}

541
web/themes/gin/styles/base/_form.scss Normal file
View File

@@ -0,0 +1,541 @@
.form-element {
color: var(--gin-color-text);
line-height: var(--input-line-height);
padding: calc(var(--input-padding-vertical) - 1px) var(--input-padding-horizontal);
min-height: calc((var(--input-padding-vertical) * 2) + var(--input-line-height));
background-color: 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);
&:hover {
border-color: var(--gin-color-text);
box-shadow: inset 0 0 0 1px var(--gin-color-text);
}
&--small,
&--extrasmall {
font-size: var(--gin-font-size-s);
line-height: 1.5;
border-radius: var(--gin-border-s);
}
&[disabled],
&[disabled]:hover {
cursor: not-allowed;
color: var(--gin-color-disabled);
background-color: var(--gin-color-disabled-bg) !important;
border-color: var(--gin-color-disabled-border);
box-shadow: none;
}
.gin--dark-mode & {
color-scheme: dark;
}
}
.form-textarea-wrapper {
// box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
border-radius: var(--gin-border-m);
textarea {
max-width: 100%;
}
}
.form-item--editor-format,
.form-element--editor-format {
width: auto;
.form-item__label {
top: 3px;
padding-bottom: 0;
}
}
// Password
.password-field {
width: 100%;
}
.password-confirm {
width: 100%;
max-width: var(--gin-max-line-length);
}
.password-strength {
&__title {
color: var(--gin-color-text-light);
}
&__text {
color: var(--gin-color-title);
}
}
.password-suggestions {
color: var(--gin-color-text-light);
border: 1px solid var(--gin-border-color-layer2);
background-color: transparent;
}
// Select
.form-element--type-select {
padding-right: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
.gin--dark-mode & {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
}
}
.form-element--type-select--small {
font-size: var(--gin-font-size-xs);
min-height: 2.25rem;
line-height: 1.4;
padding-top: .474rem; // 0.79rem * 1.2 / 2
padding-bottom: .474rem; // 0.79rem * 1.2 / 2
background-position: 100% 52%;
}
.form-boolean {
width: 21px;
height: 21px;
border-color: var(--gin-border-color-form-element);
border-radius: var(--gin-border-xs);
}
// Darkmode Checkbox
.form-boolean--type-checkbox {
&:not(:checked) {
.gin--dark-mode & {
background: var(--gin-bg-input);
}
}
&:checked {
background-color: var(--gin-color-primary);
&:not(:disabled) {
.gin--dark-mode & {
background-image: icon('checked');
}
}
&:hover {
background-color: var(--gin-color-primary-hover);
}
&:active {
background-color: var(--gin-color-primary-active);
}
}
}
// Single Checkbox: show as toggle
:not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
position: relative;
margin-left: 0;
.checkbox-toggle {
z-index: 0;
display: inline-block;
vertical-align: top;
width: 2.5rem;
height: 1.5rem;
border-radius: var(--gin-border-l);
box-sizing: border-box;
&__inner {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: circle(var(--gin-spacing-l) at 50% 50%); // Fix Safari bug
background-color: var(--gin-color-disabled);
border: 3px solid transparent;
border-radius: var(--gin-border-l);
box-sizing: border-box;
.gin--dark-mode & {
background-color: var(--gin-bg-input);
}
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 21px;
transform: translateX(-16px);
transition: transform .3s;
.gin--dark-mode & {
background-color: var(--gin-border-color-form-element);
}
}
}
}
input {
@include visually-hidden;
width: 40px;
height: 24px;
clip: auto;
margin-left: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
&:hover,
&:focus,
&:active,
&:hover:focus,
&:active:focus {
outline: none;
box-shadow: none;
border: none;
}
&:hover ~ .checkbox-toggle {
opacity: .9;
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}
&:checked ~ .checkbox-toggle {
border-color: var(--gin-color-primary-light-active);
.gin--high-contrast-mode & {
border-color: var(--gin-border-color);
}
.checkbox-toggle__inner {
background-color: var(--gin-switch);
.gin--dark-mode & {
background-color: var(--gin-color-primary-light-active);
}
&:before {
transform: translateX(16px);
background-color: #fff;
.gin--dark-mode & {
background-color: var(--gin-color-primary-hover);
}
.gin--high-contrast-mode & {
background-color: var(--gin-border-color);
}
}
}
}
&:active ~ .checkbox-toggle .checkbox-toggle__inner,
&:focus ~ .checkbox-toggle .checkbox-toggle__inner {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
// Disabled state: set cursor to not-allowed
&:disabled {
cursor: not-allowed;
}
// Disabled styles
&:disabled ~ .checkbox-toggle,
&:disabled ~ .checkbox-toggle:hover,
&:disabled:checked ~ .checkbox-toggle .checkbox-toggle__inner,
&:disabled:checked ~ .checkbox-toggle:hover .checkbox-toggle__inner {
background-color: var(--gin-color-disabled);
&::before {
background-color: #fff;
opacity: .4;
}
}
}
label {
z-index: 1;
position: relative;
padding-left: var(--gin-spacing-xxs);
padding-bottom: 0;
color: var(--gin-color-text);
}
}
// Correctly align bulk action checkboxes when used in combination with tabledrag
table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
margin-left: calc(var(--tabledrag-handle-icon-size, calc(17rem / 16)) + var(--gin-spacing-m));
}
.form-boolean {
&:hover, &:active {
.gin--dark-mode & {
box-shadow: none;
border-color: var(--gin-color-text);
}
}
}
.form-boolean--type-radio {
&, &:hover, &:active, &:focus, &:hover:focus {
background-image: none;
background-color: var(--gin-bg-input);
border-color: var(--gin-border-color-form-element);
border-radius: 50%;
}
&:hover {
box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);
&, .gin--dark-mode & {
border-color: var(--gin-color-text);
}
}
&:active, &:focus {
box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2),
0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus);
}
&:checked:not(:disabled) {
&, &:hover {
background-image: none;
background-color: var(--gin-bg-layer);
box-shadow: inset 0 0 0 5px var(--gin-color-primary);
}
&:active, &:focus, &:hover:focus {
box-shadow: inset 0 0 0 5px var(--gin-color-primary),
0 0 0 1px var(--gin-color-focus-border),
0 0 0 4px var(--gin-color-focus);
border-color: var(--gin-color-focus-border);
}
}
&:disabled {
&, &:hover {
cursor: not-allowed;
background: var(--gin-color-disabled-bg);
border-color: var(--gin-color-disabled-border);
}
}
&:checked:disabled {
&, &:hover {
background: var(--gin-color-disabled);
box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
}
}
}
.form-boolean--type-checkbox[disabled] {
&, &:hover {
cursor: not-allowed;
background-color: var(--gin-color-disabled-bg);
border-color: var(--gin-color-disabled-border);
&:checked {
border-color: var(--gin-color-disabled-border);
background-color: var(--gin-color-disabled-bg);
box-shadow: none;
}
}
}
.form-radios,
.form-checkboxes {
.form-type--boolean {
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xs);
}
}
.form-actions {
margin-bottom: 0;
}
.form-edit .form-actions {
padding: 0;
margin-bottom: 0;
border: 0 none;
background-color: transparent;
}
// Fieldgroup
fieldset:not(.fieldgroup) {
color: var(--gin-color-text-light);
padding-top: var(--gin-spacing-xs);
padding-left: 0;
padding-right: 0;
background: transparent;
border-color: var(--gin-border-color);
border-radius: var(--gin-border-m);
box-shadow: none;
> legend {
top: 20px;
}
> .fieldset-wrapper {
margin-top: 20px;
}
&.error {
border: 2px solid var(--gin-color-danger);
}
}
.fieldset__label,
.fieldset__label--group,
.form-item__label {
font-size: var(--gin-font-size-s);
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title);
margin-top: 0;
margin-bottom: var(--gin-spacing-xs);
}
.form-item__label.has-error,
.form-item__error-message {
color: var(--gin-color-danger);
}
.form-item__description,
.fieldset__description {
max-width: var(--gin-max-line-length);
color: var(--gin-color-text-light);
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.form-required > .fieldset__label::after,
.horizontal-tab-button .form-required::after,
.vertical-tabs__menu-link .form-required::after {
content: "*";
color: var(--gin-color-danger);
line-height: 1;
margin-right: .15em;
margin-left: .15em;
vertical-align: text-top;
background: none;
}
.claro-details.error {
border: 2px solid var(--gin-color-danger);
}
.claro-details__summary:not(.form-required) {
.required-mark {
display: none;
}
}
.form-item__warning {
display: inline-block;
margin-top: var(--gin-spacing-xs);
}
html.js .form-autocomplete {
padding-right: 36px;
}
.entity-form-display-form {
> .form-actions {
margin-top: 0;
margin-bottom: 0;
}
}
.required-mark {
&::after {
background: var(--gin-color-danger);
mask-image: icon('asterisk');
mask-position: center center;
mask-size: 100% 100%;
}
}
.form-wrapper,
.form-composite {
.form-item__label {
position: relative;
}
}
.field--type-text-with-summary,
.field--widget-text-textarea {
.form-item {
margin-bottom: 0;
}
.filter-wrapper {
border: 0 none;
padding-left: 0;
padding-right: 0;
}
}
// Autocomplete field
html.js input.form-linkit-autocomplete {
padding-right: var(--gin-spacing-xl);
background-position: right 8px center;
}
.claro-autocomplete {
width: calc(100% - var(--gin-spacing-m));
.form-autocomplete {
width: 100%;
}
}
.no-touchevents .form-element--type-select.form-element--extrasmall {
font-size: var(--gin-font-size-s);
line-height: 1.5;
min-height: 1.75rem;
}
// Special case, form starts with a form item, remove margin-top.
#block-gin-content > form > .form-item:first-of-type {
margin-top: 0;
}
.image-style-new {
.form-item {
margin-right: var(--gin-spacing-xxs);
}
}
tr .form-item {
margin-top: 0;
margin-bottom: 0;
}
.container-inline .form-item {
margin-top: var(--gin-spacing-density-s);
margin-bottom: var(--gin-spacing-density-s);
}
.field-plugin-settings-edit-form {
margin-top: var(--gin-spacing-s);
.form-item {
margin-top: var(--gin-spacing-m);
margin-bottom: var(--gin-spacing-m);
}
.form-boolean-group .form-item {
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xs);
}
}
// Length indicator
.length-indicator {
margin-bottom: var(--gin-spacing-l);
}

15
web/themes/gin/styles/base/_help.scss Normal file
View File

@@ -0,0 +1,15 @@
.block-help-block {
font-size: var(--gin-font-size-s);
margin: 0 0 var(--gin-spacing-m) 0;
max-width: 1024px;
p {
color: var(--gin-color-text-light);
margin: 0;
}
}
#edit-help {
font-size: var(--gin-font-size-s);
color: var(--gin-color-text-light);
}

5
web/themes/gin/styles/base/_image-preview.scss Normal file
View File

@@ -0,0 +1,5 @@
.image-preview {
img {
@include color-pattern;
}
}

11
web/themes/gin/styles/base/_insert.scss Normal file
View File

@@ -0,0 +1,11 @@
[data-drupal-selector=edit-fields-field-image-settings-edit-form-third-party-settings-insert] {
.gin-layer-wrapper {
margin-top: var(--gin-spacing-m);
}
}
[data-drupal-selector=edit-fields-field-image-settings-edit-form-third-party-settings-insert-styles] {
td {
vertical-align: middle;
}
}

94
web/themes/gin/styles/base/_layers.scss Normal file
View File

@@ -0,0 +1,94 @@
.page-content {
margin-top: 0;
> .help,
> .region-content,
> .region-highlighted {
@include mq(small) {
margin-top: var(--gin-spacing-l);
}
}
}
.gin-layer-wrapper,
.gin-layer-wrapper-shadow,
.block-system > form,
.views-exposed-form.views-exposed-form,
.views-edit-view,
.views-preview-wrapper,
.modules-tabs,
#views-entity-list,
.admin.my-workbench,
.media-library-views-form,
.user-admin-permissions
{
margin-top: 0;
box-shadow: var(--gin-shadow-l1);
border-radius: var(--gin-border-l);
.gin--dark-mode & {
box-shadow: 0 6px 16px var(--gin-border-color-layer);
}
.gin--high-contrast-mode & {
box-shadow: none;
}
}
.gin-layer-wrapper,
.block-system-main-block > form,
.views-exposed-form.views-exposed-form,
.views-edit-view,
.views-preview-wrapper,
#views-entity-list,
.admin.my-workbench,
.media-library-views-form,
.user-admin-permissions
{
width: 100%;
padding: var(--gin-spacing-s);
background: var(--gin-bg-layer);
border: 1px solid var(--gin-border-color-layer);
box-sizing: border-box;
@include mq(small) {
padding: var(--gin-spacing-l);
}
// Remove extra spacing on top of form.
> .form-wrapper:first-of-type .form-item,
.layout-region-node-main > .form-wrapper:first-of-type .form-item {
margin-top: 0;
}
}
#system-clear-cache + #system-performance-settings,
.gin-layer-wrapper + .imageapi-optimize-default-pipeline {
margin-top: var(--gin-spacing-l);
}
// Unplublished node
.node--unpublished {
background-color: var(--gin-bg-unpublished);
}
// Has table filter
.block-system-main-block > form:has(.table-filter) {
.table-filter {
padding: 0;
margin-bottom: var(--gin-spacing-l);
background: none;
border: none;
box-shadow: none;
.form-type--search {
margin-block: 0;
}
.table-filter-text {
width: 100%;
padding: var(--gin-spacing-m);
margin-top: 0;
}
}
}

14
web/themes/gin/styles/base/_local-actions.scss Normal file
View File

@@ -0,0 +1,14 @@
/**
* Action link layout styles.
*/
.local-actions {
font-size: 0; // Chrome fix.
margin: var(--gin-spacing-s) calc(var(--gin-spacing-xxs) * -1) var(--gin-spacing-xxs);
padding: 0;
list-style: none;
&__item {
display: inline-block;
margin: 0 var(--gin-spacing-xxs) var(--gin-spacing-xs);
}
}

6
web/themes/gin/styles/base/_maxlength.scss Normal file
View File

@@ -0,0 +1,6 @@
.form-item .counter {
color: var(--gin-color-text);
font-size: var(--gin-font-size-xs);
line-height: 1.3;
margin-top: var(--gin-spacing-xs);
}

193
web/themes/gin/styles/base/_messages.scss Normal file
View File

@@ -0,0 +1,193 @@
.messages {
position: relative;
padding: var(--gin-spacing-m);
border: 2px solid transparent;
border-radius: var(--gin-border-l);
transition: opacity var(--gin-transition-fast);
opacity: 1;
.gin--dark-mode & {
box-shadow: 0 6px 16px var(--gin-border-color-layer);
}
&, &-list {
margin-top: 0;
}
&-list {
margin-bottom: 0;
}
a {
&,
&:hover,
&:active {
color: #fff;
}
}
&__title {
font-weight: var(--gin-font-weight-bold);
}
&__title,
&__content {
margin-left: 2.125rem;
}
.messages__header {
position: relative;
background-image: none;
margin-bottom: var(--gin-spacing-xs);
margin-right: 1.5em;
&:before {
content: "";
display: block;
position: absolute;
top: 2px;
left: 0;
width: 1.5rem;
height: 1.5rem;
@media (forced-colors: active) {
background-color: linktext !important;
}
}
}
.button--dismiss {
position: absolute;
top: 0;
right: 0;
margin: var(--gin-spacing-s);
padding: 0;
height: 29px;
width: 29px;
color: transparent;
text-indent: -99999px;
border-radius: var(--gin-border-m);
border-color: transparent !important;
transition: var(--gin-transition);
box-shadow: none;
&:hover:not(:focus) {
color: transparent;
background-color: transparent;
border-color: #fff !important;
}
&:focus,
&:hover:focus {
.icon-close {
background-color: var(--gin-bg-app);
}
}
.icon-close {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
mask-image: icon('close');
mask-size: 16px 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: #fff;
@media (forced-colors: active) {
background-color: buttonBorder;
}
}
}
// Hide our close button as Webform has it's own
&--webform .button--dismiss {
display: none;
}
&.messages--info {
color: var(--gin-color-info-light);
background: var(--gin-bg-info);
border-color: var(--gin-bg-info);
.messages__header {
background: none;
&:before {
background-color: var(--gin-color-info-light);
mask-image: icon('info');
mask-repeat: no-repeat;
mask-position: center left;
}
}
.button--dismiss {
.icon-close:link {
background-color: var(--gin-color-info-light);
}
}
}
&.messages--status {
color: var(--gin-color-green-light);
background: var(--gin-bg-green);
.messages__header {
&:before {
background-color: var(--gin-color-green-light);
mask-image: icon('status');
mask-repeat: no-repeat;
mask-position: center left;
}
}
.button--dismiss {
.icon-close:link {
background-color: var(--gin-color-green-light);
}
}
}
&.messages--warning {
color: var(--gin-color-warning-light);
background: var(--gin-bg-warning);
.messages__header {
&:before {
background-color: var(--gin-color-warning-light);
mask-image: icon('warning');
mask-repeat: no-repeat;
mask-position: center left;
}
}
.button--dismiss {
.icon-close:link {
background-color: var(--gin-color-warning-light);
}
}
}
&--error {
color: var(--gin-color-danger-light);
background: var(--gin-bg-danger);
.messages__header {
&:before {
background-color: var(--gin-color-danger-light);
mask-image: icon('error');
mask-repeat: no-repeat;
mask-position: center left;
}
}
.button--dismiss {
.icon-close:link {
background-color: var(--gin-color-danger-light);
}
}
}
}

51
web/themes/gin/styles/base/_pager.scss Normal file
View File

@@ -0,0 +1,51 @@
.pager__link {
color: var(--gin-color-text);
background-color: transparent;
}
.pager__link.is-active,
.pager__item--current {
color: var(--gin-bg-app);
}
.pager__link:hover,
.pager__link.is-active:hover {
color: var(--gin-color-button-text);
background: var(--gin-color-primary-hover);
}
.pager__item--first .pager__link::before {
mask-image: icon('first');
}
.pager__item--previous .pager__link::before {
mask-image: icon('prev');
}
.pager__item--next .pager__link::after {
mask-image: icon('next');
}
.pager__item--last .pager__link::after {
mask-image: icon('last');
}
.pager__item--first .pager__link,
.pager__item--previous .pager__link,
.pager__item--next .pager__link,
.pager__item--last .pager__link {
&::before,
&::after {
background: var(--gin-color-text-light);
}
&:hover::before,
&:hover::after {
background: var(--gin-bg-app);
}
}
.pager__link.is-active,
.pager__item--current {
background-color: var(--gin-color-primary);
}

34
web/themes/gin/styles/base/_panel.scss Normal file
View File

@@ -0,0 +1,34 @@
.block-system > .node-confirm-form,
.block-system > .confirmation {
padding-top: var(--gin-spacing-l);
}
.panel__title,
.system-status-general-info__header,
.system-status-report__requirements-group > h3,
.system-themes-list__header {
font-size: var(--gin-font-size-l);
font-weight: var(--gin-font-weight-bold);
color: var(--gin-color-primary-active);
padding: var(--gin-spacing-m) var(--gin-spacing-l);
margin-top: 0;
background: var(--gin-bg-header);
border: 0 none;
border-radius: var(--gin-border-m);
}
.panel {
padding: 0;
&__title {
margin: var(--gin-spacing-s);
}
&__content {
padding: 0;
}
.admin-list {
margin: var(--gin-spacing-s) 0;
}
}

0
web/themes/gin/styles/base/_permissions.scss Normal file
View File

24
web/themes/gin/styles/base/_progress.scss Normal file
View File

@@ -0,0 +1,24 @@
.progress {
&__bar {
border-color: var(--gin-color-primary);
background-color: var(--gin-color-primary);
box-shadow: 0 .125em .25em var(--gin-color-primary-light),
1.25em .9375em 2em var(--gin-color-primary-light);
}
&__track {
padding: var(--gin-spacing-xs);
border-color: var(--gin-border-color);
background-color: var(--gin-bg-layer3);
}
&__description,
&__percentage {
color: var(--gin-color-text);
}
}
// Autocomplete z-index issue
.ui-autocomplete {
z-index: 2000;
}

18
web/themes/gin/styles/base/_quotation.scss Normal file
View File

@@ -0,0 +1,18 @@
blockquote {
font-size: var(--gin-font-size-quote);
position: relative;
padding-left: var(--gin-spacing-l);
margin: var(--gin-spacing-m);
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--gin-color-primary);
border-radius: 2px;
}
}

230
web/themes/gin/styles/base/_regions.scss Normal file
View File

@@ -0,0 +1,230 @@
.region-sticky {
position: sticky;
top: var(--gin-toolbar-y-offset);
z-index: 101;
padding: 0;
width: 100%;
display: flex;
align-items: center;
min-height: var(--gin-height-sticky);
background: var(--gin-bg-app);
box-sizing: border-box;
transition: var(--gin-transition);
.gin--edit-form & {
top: calc(var(--gin-toolbar-y-offset) - var(--gin-spacing-xxl) - var(--gin-spacing-xxs));
padding-top: var(--gin-spacing-m);
@include mq(large) {
top: var(--gin-toolbar-y-offset);
padding-top: var(--gin-spacing-s);
}
}
&-watcher {
position: sticky;
top: -1px;
height: 0;
}
&--is-sticky {
opacity: .95;
background: var(--gin-bg-app);
@supports (backdrop-filter: blur()) {
opacity: .999;
background: rgba(var(--gin-bg-app-rgb), .8);
backdrop-filter: blur(12px);
}
.gin--high-contrast-mode & {
background: var(--gin-bg-app);
backdrop-filter: none;
}
}
.gin--classic-toolbar:not(.gin--edit-form) & {
position: static;
}
@include mq(large) {
top: -1px;
padding: var(--gin-spacing-s) 0;
height: var(--gin-height-sticky);
margin-bottom: 0;
.gin--navigation &,
.gin--vertical-toolbar &,
.gin--horizontal-toolbar &,
.gin--classic-toolbar & {
top: var(--gin-toolbar-y-offset);
}
}
&__items {
display: flex;
align-items: center;
min-width: 0;
width: 100%;
height: 100%;
@include mq(small) {
.settings-tray-editable {
flex-shrink: 0;
}
}
&__inner {
display: flex;
flex-wrap: wrap;
width: 100%;
@include mq(large) {
flex-wrap: nowrap;
align-items: center;
margin-bottom: 0;
.block-page-title-block {
margin: 0;
}
}
}
.block-page-title-block {
flex-grow: 1;
align-self: center;
display: flex;
margin: 0;
min-width: 0;
.page-title {
align-self: center;
margin: 0;
}
}
.gin-sticky {
display: flex;
@include mq(large) {
padding-left: var(--gin-spacing-l);
}
}
}
}
.content-header {
padding-top: 0;
margin-bottom: 0;
background-color: transparent;
overflow: initial;
// Normalize whitespace if empty.
@include mq(small) {
&:not(:has(.layout-container *)) {
margin-top: calc(var(--gin-spacing-m) * -1);
}
}
}
.sticky-shadow {
@include mq(large) {
z-index: 98;
position: relative;
pointer-events: none;
height: 40px;
margin: calc(var(--gin-spacing-xxxl) * -1) auto var(--gin-spacing-l);
box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .4);
.gin--dark-mode & {
box-shadow: none;
}
}
@include mq(large) {
position: sticky;
top: calc(var(--gin-toolbar-y-offset) + (var(--gin-height-sticky) - 40px));
width: calc(100% - min(10vw, 96px) + var(--gin-spacing-l));
// Classic, legacy toolbar
.gin--classic-toolbar:not(.gin--edit-form) & {
display: none;
}
.gin--edit-form & {
max-width: 1300px;
}
}
}
.page-wrapper {
@include mq(large) {
margin-top: 1px; // fix for top: auto;
}
}
.toolbar-tray-open:not(.toolbar-vertical) .layout-container,
body:not(.toolbar-tray-open) .layout-container {
margin-left: var(--gin-spacing-m);
margin-right: var(--gin-spacing-m);
@include mq(small) {
margin-left: var(--gin-spacing-xl);
margin-right: var(--gin-spacing-xl);
}
@include mq(medium) {
margin-left: m#{i}n(5vw, var(--gin-spacing-xxl));
margin-right: m#{i}n(5vw, var(--gin-spacing-xxl));
.layout-container {
margin-left: 0;
margin-right: 0;
}
}
}
// Hide action bar
.layout-node-form__actions {
display: none;
}
.gin-sticky {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
width: 100%;
@include mq(large) {
flex-wrap: nowrap;
width: max-content;
}
.form-actions {
margin: 0;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
:last-child {
margin-right: 0;
}
}
.field--name-status {
display: flex;
align-items: center;
margin-right: var(--gin-spacing-xxs);
@include mq(medium) {
margin-right: var(--gin-spacing-l);
}
.form-type--checkbox {
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xs);
}
}
}

200
web/themes/gin/styles/base/_status-report.scss Normal file
View File

@@ -0,0 +1,200 @@
// Unknown
.upgrade-status-counter__status-icon--not-scanned:before,
.upgrade-status-summary tr.not-scanned > td.status-info:before {
background-image: none;
background-color: var(--gin-color-text);
mask-image: icon('info');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 20px 20px;
}
// Checked
.system-status-counter__status-icon--checked:before,
.admin-dblog .dblog-info .icon,
.admin-dblog .dblog-notice .icon,
.system-status-report__status-icon--checked .details-title:before,
.details .system-status-report__status-icon--checked:before,
.color-checked .system-status-report__status-title:before,
.upgrade-status-counter__status-icon--checked:before,
.upgrade-status-error-list tr.no-known-error > td.status-info:before,
.upgrade-status-summary tr.no-known-error > td.status-info:before,
#checked + .claro-details__wrapper--system-status-report .system-status-report__status-title:before {
background-image: none;
background-color: var(--gin-color-green);
mask-image: icon('status');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 20px 20px;
}
// Warning
.system-status-counter__status-icon--warning:before,
.admin-dblog .dblog-warning .icon,
.system-status-report__status-icon--warning .details-title:before,
.details .system-status-report__status-icon--warning:before,
.upgrade-status-counter__status-icon--warning:before,
.upgrade-status-error-list tr.known-warnings > td.status-info:before,
.upgrade-status-summary tr.known-warnings > td.status-info:before {
background-image: none;
background-color: var(--gin-color-warning);
mask-image: icon('warning');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 20px 20px;
}
// Error
.system-status-counter__status-icon--error:before,
.admin-dblog .dblog-error .icon,
.admin-dblog .dblog-critical .icon,
.admin-dblog .dblog-alert .icon,
.admin-dblog .dblog-emergency .icon,
.system-status-report__status-icon--error .details-title:before,
.details .system-status-report__status-icon--error:before,
.upgrade-status-counter__status-icon--error:before,
.upgrade-status-error-list tr.known-errors > td.status-info:before,
.upgrade-status-summary tr.known-errors > td.status-info:before {
background-image: none;
background-color: var(--gin-color-danger);
mask-image: icon('error');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 20px 20px;
}
.system-status-counter,
.upgrade-status-counter {
height: auto;
padding: var(--gin-spacing-m) 0;
background: var(--gin-bg-layer);
border-radius: var(--gin-border-m);
&__status-title {
padding-left: 0;
}
&__status-icon {
background-color: transparent;
border-right: 0 none;
box-shadow: none;
&--checked:before,
&--warning:before,
&--error:before {
mask-position: center 16px;
mask-size: 32px 32px;
}
}
&__title-count {
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title);
text-transform: none;
}
}
.system-status-general-info {
&__header {
margin-bottom: var(--gin-spacing-xs);
}
&__items {
border-bottom: 0 none;
}
&__item {
padding: var(--gin-spacing-m);
background: transparent;
box-shadow: none;
}
&__item-title {
font-size: var(--gin-font-size);
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title);
}
&__sub-item-title {
font-weight: var(--gin-font-weight-bold);
&:after {
content: ":\00a0";
}
}
&__item-icon {
&--d8:before,
&--drupal:before {
mask-image: icon('drupal');
}
&--clock:before {
mask-image: icon('clock');
}
&--server:before {
mask-image: icon('server');
}
&--php:before {
mask-image: icon('php');
}
&--database:before {
mask-image: icon('database');
}
&:before {
background-image: none;
background-color: var(--gin-color-primary);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 32px 32px;
}
}
&__run-cron {
&.button {
margin: 0;
}
}
}
.cron-description__run-cron {
margin-top: var(--gin-spacing-m);
}
.system-status-report {
margin-top: var(--gin-spacing-l);
&-counters &-counters__item {
border: 1px solid var(--gin-border-color-layer);
box-shadow: var(--gin-shadow-l1);
}
&__status-title {
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title) !important;
}
}
.color-checked .system-status-report__status-title,
#checked + .claro-details__wrapper--system-status-report .system-status-report__status-title {
&:before {
content: "";
position: absolute;
top: 1em;
left: 10px;
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.system-status-report__status-title .details-title:before,
.details .system-status-report__status-icon:before {
width: 24px;
height: 24px;
}

53
web/themes/gin/styles/base/_system-diff.scss Normal file
View File

@@ -0,0 +1,53 @@
table.diff {
.diffchange {
color: var(--gin-color-danger);
}
.diff-context {
background-color: transparent;
}
td {
padding: var(--gin-spacing-xs);
height: initial;
}
tr {
color: var(--gin-color-title);
.field-name {
background-color: var(--gin-bg-header);
}
.diff-deletedline {
background-color: var(--gin-color-danger-lightest);
.diffchange {
color: var(--gin-bg-danger);
}
.gin--dark-mode & {
.diffchange {
color: var(--gin-color-button-text);
}
}
}
.diff-addedline {
background-color: var(--gin-color-green-lightest);
.diffchange {
color: var(--gin-bg-green);
}
.gin--dark-mode & {
background: var(--gin-bg-green);
.diffchange {
color: var(--gin-color-button-text);
}
}
}
}
}

15
web/themes/gin/styles/base/_system-modules.scss Normal file
View File

@@ -0,0 +1,15 @@
.system-modules,
.system-modules-uninstall {
label {
color: var(--gin-color-title);
}
details {
color: var(--gin-color-text);
}
}
.admin-requirements,
.admin-required {
color: var(--gin-color-text-light);
}

48
web/themes/gin/styles/base/_system-report.scss Normal file
View File

@@ -0,0 +1,48 @@
.system-status-report__requirements-group {
h3 {
margin-top: 0;
}
}
.system-status-report__row {
border-bottom: 1px solid var(--gin-border-color);
}
.system-status-counter__status-icon {
background-color: transparent;
border: 0 none;
box-shadow: none;
}
.system-status-general-info,
.system-status-report__requirements-group,
.system-status-report {
padding: var(--gin-spacing-m);
h3 + .divider,
.divider:last-child {
display: none;
}
}
.system-status-general-info {
&__items {
margin: var(--gin-spacing-m) 0 0;
}
&__item {
border: 0 none;
box-shadow: none;
}
}
.system-status-general-info__header,
.system-status-report__requirements-group > h3,
.system-themes-list__header {
text-transform: none;
margin: calc(var(--gin-spacing-xs) * -1) 0 var(--gin-spacing-m) 0;
}
.claro-details__summary--system-status-report {
background: transparent;
}

9
web/themes/gin/styles/base/_system-themes.scss Normal file
View File

@@ -0,0 +1,9 @@
.system-themes-list {
margin-bottom: var(--gin-spacing-l);
}
#system-themes-page {
hr {
display: none;
}
}

267
web/themes/gin/styles/base/_table.scss Normal file
View File

@@ -0,0 +1,267 @@
.gin-table-scroll-wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 240px;
margin-top: calc(var(--gin-spacing-xs) * -1);
margin-bottom: -240px;
}
table.sticky-header {
visibility: hidden;
z-index: 98;
position: fixed;
left: auto !important;
top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset)) !important;
background: transparent;
&::before,
&::after {
content: '';
position: absolute;
top: 0;
width: 1.5rem;
height: 100%;
}
&::before {
left: calc(var(--gin-spacing-l) * -1);
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--gin-bg-layer));
}
&::after {
right: calc(var(--gin-spacing-l) * -1);
background: linear-gradient(90deg, var(--gin-bg-layer), rgba(255, 255, 255, 0));
}
.--is-sticky & {
box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .4);
@include mq(medium) {
visibility: visible !important;
}
thead tr {
border-bottom: none;
}
th {
background: var(--gin-bg-layer);
}
}
}
table {
thead {
background: transparent;
border-radius: var(--gin-border-m);
tr {
border-bottom: 2px solid var(--gin-border-color-table-header);
&:hover {
background: transparent;
}
}
}
th {
font-size: var(--gin-font-size-s);
font-weight: var(--gin-font-weight-bold);
background: var(--gin-bg-layer);
&, .form-item__label {
color: var(--gin-color-title);
}
@include mq(medium) {
height: auto;
padding: var(--gin-spacing-m);
}
}
tbody {
tr {
border-bottom: 1px solid var(--gin-border-color-table);
}
td {
height: auto;
padding: var(--gin-spacing-density-m) var(--gin-spacing-m);
}
}
tr,
.draggable-table.tabledrag-disabled tr {
color: var(--gin-color-text);
background-color: transparent;
&:hover {
color: var(--gin-color-text);
background: var(--gin-bg-item-hover);
}
&.selected:hover {
background: transparent;
}
}
tr.selected {
.gin--dark-mode & {
border-color: rgba(white, .2);
}
td {
background-color: var(--gin-color-primary-light);
}
}
td {
a {
text-decoration: none;
&:hover {
text-decoration: underline;
text-decoration-style: var(--gin-link-decoration-style);
}
}
.group-label {
color: var(--gin-color-title);
}
}
}
.sortable-heading {
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
> a::before {
bottom: -1px;
}
> a::after {
background: var(--gin-color-text-light);
mask-image: icon('sort');
mask-repeat: no-repeat;
mask-position: center center;
@media (forced-colors: active) {
background: linktext;
}
}
&.is-active > a {
&, &:hover, &:active {
color: var(--gin-color-primary-active);
}
&::before {
border-bottom: .1875rem solid var(--gin-color-primary-active);
}
}
}
.tablesort {
background-color: var(--gin-color-primary-active);
background-image: none;
mask-image: icon('sort');
mask-repeat: no-repeat;
mask-position: 0 50%;
}
.tablesort--asc,
[dir="rtl"] .tablesort--asc {
mask-image: icon('sort-asc');
@media (forced-colors: active) {
background: linktext;
}
}
.tablesort--desc,
[dir="rtl"] .tablesort--desc {
mask-image: icon('sort-desc');
@media (forced-colors: active) {
background: linktext;
}
}
.field-plugin-settings-edit-wrapper {
float: right;
+ a {
float: left;
}
}
.region-title {
border-bottom: 2px solid var(--gin-color-text);
}
td.webform-has-field-suffix > .form-item > .form-element {
max-width: 100%;
width: auto;
}
.field-multiple-table {
th {
padding: var(--gin-spacing-xs) var(--gin-spacing-m) var(--gin-spacing-xs) var(--gin-spacing-l);
border-bottom: 0;
background: transparent;
&.th__order {
font-size: 0;
padding: 0;
}
}
thead {
position: relative;
z-index: 0;
&::after {
content: "";
z-index: -1;
display: block;
width: 100%;
height: 100%;
background: var(--gin-bg-header);
position: absolute;
top: 0;
left: 0;
border-radius: var(--gin-border-m);
}
tr {
border-bottom: 0;
}
.field-label .label,
.form-item__label--multiple-value-form {
display: inline-block;
font-size: var(--gin-font-size-l);
font-weight: var(--gin-font-weight-bold);
letter-spacing: -0.025em;
line-height: 1.33333em;
color: var(--gin-color-primary-active);
padding: var(--gin-spacing-xs) 0;
margin: 0;
}
}
tr .form-item:not(:last-of-type) {
margin-bottom: var(--gin-spacing-m);
}
}
.gin-layer-wrapper .views-table {
margin-top: 0;
}
table td.field-plugin-summary-cell {
vertical-align: middle;
}
table .views-field.views-field-operations {
text-align: right;
}

141
web/themes/gin/styles/base/_tabledrag.scss Normal file
View File

@@ -0,0 +1,141 @@
.draggable {
a.tabledrag-handle {
float: none;
vertical-align: middle;
&:focus::before {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
}
&.drag-previous {
background-color: #ffffe9;
}
&.drag, &.drag:focus {
background-color: #f0f1f9;
}
}
.tabledrag-toggle-weight-wrapper {
margin-top: 0;
.action-link {
margin-bottom: var(--gin-spacing-xs);
.action-link {
margin-bottom: 0;
}
}
}
#field-display-overview,
#field-display-overview-wrapper,
.field--widget-entity-reference-paragraphs,
.field--type-link,
.field--type-smartdate {
.gin-layer-wrapper > .tabledrag-toggle-weight-wrapper {
@include mq(small) {
position: relative;
z-index: 1;
margin-right: var(--gin-spacing-m);
margin-bottom: calc(var(--gin-spacing-xxl) * -1);
pointer-events: none;
}
.action-link {
pointer-events: all;
}
}
}
.tabledrag-handle {
&::after {
background-image: none;
mask-image: icon('drag');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 16px 16px;
@media (forced-colors: none) {
background-color: var(--gin-color-text-light);
}
@supports (-webkit-mask-image: url()) and (mask-composite: source-over) {
background-color: var(--gin-color-text-light);
}
}
&:hover {
&::after {
transform: scale(1);
@media (forced-colors: none) {
background-color: var(--gin-color-primary);
}
}
}
}
.draggable.drag, .draggable.drag:focus {
background-color: var(--gin-bg-layer2);
.gin--dark-mode & {
background-color: var(--gin-color-primary-light-hover);
}
}
.draggable.drag-previous {
background-color: var(--gin-bg-layer2);
box-shadow: inset 6px 0 0 0 var(--gin-color-warning);
&::after {
content: "";
position: absolute;
height: 100%;
width: 6px;
}
@media (forced-colors: active) {
position: relative;
&::after {
border-left: 6px solid linktext;
left:0
}
}
}
.tabledrag-leaf td,
.tabledrag-cell {
vertical-align: top;
}
.tabledrag-cell {
padding-top: var(--gin-spacing-density-m);
padding-bottom: var(--gin-spacing-density-m);
&-content {
margin-top: var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xs);
}
&-content__item {
.checkbox-toggle:hover {
cursor: pointer;
}
}
}
.field-plugin-settings-edit-wrapper,
.field-plugin-settings-edit-wrapper + a {
margin-top: var(--gin-spacing-m);
margin-bottom: var(--gin-spacing-m);
}
.field-plugin-settings-edit-wrapper + a {
margin-top: var(--gin-spacing-s);
}
.table-file-multiple-widget .tabledrag-cell-content {
display: flex;
}

6
web/themes/gin/styles/base/_taxonomy.scss Normal file
View File

@@ -0,0 +1,6 @@
// For visibility issue in Taxonomy terms
.taxonomy-overview-terms:not(:has(.action-link)) {
#edit-help {
margin-bottom: var(--gin-spacing-m);
}
}

95
web/themes/gin/styles/base/_title.scss Normal file
View File

@@ -0,0 +1,95 @@
.block-page-title-block {
&:last-child {
margin-bottom: 0;
}
}
.page-title {
font-size: var(--gin-font-size-h1);
font-weight: var(--gin-font-weight-semibold);
line-height: normal;
letter-spacing: -.05em;
color: var(--gin-color-title);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: .25em;
max-width: 90%;
transition: font-size 0.25s ease;
@include mq(large) {
.region-sticky--is-sticky & {
font-size: var(--gin-font-size-h3);
}
}
&__language {
display: block;
font-size: var(--gin-font-size-xs);
font-weight: var(--gin-font-weight-normal);
letter-spacing: normal;
color: var(--gin-color-text);
}
&--is-translation + .shortcut-action .shortcut-action__icon {
top: -3px;
}
}
.shortcut-action {
position: relative;
align-self: center;
margin-left: 0;
border-radius: var(--gin-border-m);
&__icon {
position: relative;
top: 3px;
background: var(--gin-icon-color);
mask-image: icon('shortcut');
mask-size: 75% 75%;
mask-position: center center;
mask-repeat: no-repeat;
@include mq(large) {
top: var(--gin-spacing-xxs);
mask-size: 85% 85%;
}
.gin--edit-form & {
top: 3px;
}
}
&:hover &__icon {
opacity: 1;
background: var(--gin-color-primary);
}
&--remove {
.shortcut-action__icon {
mask-image: icon('shortcut-filled');
background: var(--gin-color-primary);
}
&:hover .shortcut-action__icon {
opacity: 1;
background: var(--gin-color-disabled);
}
}
&__message {
z-index: 2;
position: absolute;
top: 0;
left: 100%;
min-width: 120px;
pointer-events: none;
white-space: nowrap;
padding: var(--gin-spacing-xs);
margin-top: calc(var(--gin-spacing-xxs) * -1);
color: var(--gin-color-contextual-text);
background: var(--gin-color-contextual);
border-radius: var(--gin-border-xs);
}
}

8
web/themes/gin/styles/base/_tour.scss Normal file
View File

@@ -0,0 +1,8 @@
.shepherd-element {
border-radius: var(--gin-border-m);
}
.joyride-content-wrapper .button,
.button:not(:focus).shepherd-button {
box-shadow: none;
}

146
web/themes/gin/styles/base/_update.scss Normal file
View File

@@ -0,0 +1,146 @@
.project-update {
&__version-links {
padding-right: 0;
}
&__status {
&-icon {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: bottom;
img {
display: none;
}
}
// Error
& &-icon {
padding-left: 0;
background-color: var(--gin-color-danger);
mask-image: icon('error');
mask-position: center right;
mask-repeat: no-repeat;
mask-size: 20px 20px;
}
&--security-error {
color: var(--gin-color-danger);
span {
position: relative;
top: 2px;
}
}
// Outdated
&--not-current &-icon {
background-color: var(--gin-color-warning);
mask-image: icon('warning');
mask-position: center right;
mask-repeat: no-repeat;
mask-size: 20px 20px;
}
// Current
&--current &-icon {
background-color: var(--gin-color-green);
mask-image: icon('status');
mask-position: center right;
mask-repeat: no-repeat;
mask-size: 20px 20px;
}
}
}
.color-success,
tr.color-success,
.color-checked,
.drupal-upgrade-status-summary-form tr.no-known-error
{
border-left: var(--gin-border-m) solid var(--gin-color-green);
background-color: transparent;
&:hover, &:active, &:focus {
background-color: var(--gin-bg-green-light);
}
}
.color-warning,
tr.color-warning,
.upgrade-status-next-step-remove tr,
.drupal-upgrade-status-summary-form tr.known-warnings {
border-left: var(--gin-border-m) solid var(--gin-color-warning);
background-color: transparent;
&:hover, &:active, &:focus {
background-color: var(--gin-bg-warning-light);
.gin--dark-mode & {
color: var(--gin-color-warning);
}
}
}
.color-error,
tr.color-error,
.drupal-upgrade-status-summary-form tr.known-errors {
border-left: var(--gin-border-m) solid var(--gin-color-danger);
background-color: transparent;
&:hover, &:active, &:focus {
background-color: var(--gin-bg-danger-light);
.gin--dark-mode & {
color: var(--gin-color-danger);
}
}
}
.color-success,
.color-warning,
.color-error,
.color-checked {
color: var(--gin-color-text);
box-sizing: border-box;
}
.update {
margin: 0;
border: 0 none;
tbody {
tr:last-child {
border-bottom: 0 none;
}
}
}
.gin-layer-wrapper {
.responsive-enabled {
margin-top: 0;
}
}
.block-system > form .gin-layer-wrapper,
.panel .admin-list,
.block-system > form .dataset-table-wrapper {
padding: 0;
border: 0 none;
box-shadow: none;
}
// fix overflow issue in FF
.block-system > form .gin-layer-wrapper {
padding-bottom: 1px;
}
.compact-link {
font-size: var(--gin-font-size-s);
text-align: right;
}
#update-status > p {
margin-bottom: var(--gin-spacing-xl);
}

448
web/themes/gin/styles/base/_views.scss Normal file
View File

@@ -0,0 +1,448 @@
@keyframes fadeInBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
// Option for 6 column layout
.show-6 {
.views-row {
@include mq(tiny) {
float: left;
width: 50%;
}
@include mq(small) {
width: 25%;
}
@include mq(large) {
width: 20%;
}
@include mq(wide) {
width: 16.666666667%;
}
}
}
.views-exposed-form.views-exposed-form {
padding-top: var(--gin-spacing-xs);
.form-element--type-select {
max-width: 240px;
}
.form-type--boolean .form-boolean {
margin-left: 0;
margin-right: var(--gin-spacing-xs);
}
// Single on/off checkbox (through Better Exposed Filters)
.form-type--boolean.form-type--checkbox {
margin-top: auto;
margin-bottom: var(--gin-spacing-s);
.form-item__label {
margin-bottom: 0;
}
}
.fieldset--group {
margin-top: var(--gin-spacing-s);
}
// Exposed filter with fieldgroup
fieldset {
margin-right: var(--gin-spacing-s);
margin-bottom: .4rem;
> .fieldset__legend > .fieldset__label {
font-size: var(--gin-font-size-s);
padding: 0 var(--gin-spacing-xs);
margin-bottom: var(--gin-spacing-xxs);
}
.fieldset__wrapper {
display: flex;
margin: 0 0 0 var(--gin-spacing-xs);
}
.form-item {
margin: 0 var(--gin-spacing-xs) var(--gin-spacing-xs) 0;
}
}
}
.views-exposed-form.views-exposed-form.views-exposed-form--preview {
background: none;
border-color: var(--gin-border-color);
border-radius: var(--gin-border-l);
}
.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
margin-right: var(--gin-spacing-xs);
}
.gin-layer-wrapper {
padding: var(--gin-spacing-l);
@include mq($to: large) {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
& + .gin-layer-wrapper {
margin-top: var(--gin-spacing-l);
}
& + h2,
& + h3 {
margin-top: var(--gin-spacing-xl);
}
}
.views-edit-view {
.unit-title {
margin-top: 0;
margin-bottom: var(--gin-spacing-m);
@extend h2;
}
}
// Preview form
.view-preview-form {
&__title {
padding: 0;
background-color: transparent;
border-bottom: 0 none;
}
.preview-section {
padding: var(--gin-spacing-m);
border: 1px dashed var(--gin-border-color-layer2)
}
.view-filters .preview-section {
display: flex;
flex-wrap: wrap;
}
.form-actions {
align-items: flex-end;
}
.form-item--live-preview {
position: static !important;
margin-top: var(--gin-spacing-l);
}
.arguments-preview {
margin-left: 0;
}
}
.views-live-preview {
padding: 0;
.gin-layer-wrapper {
border-color: var(--gin-border-color);
}
}
.views-displays {
border: 1px solid var(--gin-border-color);
border-radius: var(--gin-border-l);
}
.views-admin {
.icon.add {
background: none;
&:before {
content: "+";
font-size: var(--gin-font-size);
line-height: .1;
}
}
}
.views-display-top {
padding: var(--gin-spacing-m);
background-color: var(--gin-bg-header);
border: 0 none;
border-radius: var(--gin-border-l);
// #3186729: Drupal 9.1 fix
&__extra-actions-wrapper {
margin-bottom: 0;
}
.dropbutton-wrapper {
top: 20px;
right: var(--gin-spacing-l);
}
}
#edit-displays {
.views-display-top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.edit-display-settings {
padding: var(--gin-spacing-l);
margin: 0;
}
.views-tabs {
a {
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
&.views-display-disabled-link {
padding-inline-start: var(--gin-spacing-l);
&::before {
mask-image: icon('hide');
mask-repeat: no-repeat;
mask-position: center left;
mask-size: contain;
width: var(--gin-spacing-l);
height: var(--gin-spacing-s);
margin-inline-start: calc(var(--gin-spacing-m) * -1);
background-color: currentColor;
display: inline-block;
content: '';
}
}
}
.add a,
li a {
font-size: var(--gin-font-size-xs);
font-weight: var(--gin-font-weight-heavy);
color: var(--gin-color-primary);
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
background: transparent;
border: 2px solid var(--gin-color-primary);
border-radius: var(--gin-border-xs);
&::before {
display: none;
}
.icon.add {
display: block;
}
}
.add a:hover,
.add a:focus,
li a:hover,
li a:focus,
li.is-active a,
li.is-active a.is-active {
color: var(--gin-bg-app);
background: var(--gin-color-primary);
border-color: transparent;
}
.add a:focus,
li a:focus {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
.add {
&.open {
a {
background: var(--gin-bg-layer2);
color: var(--gin-color-primary);
&:hover, &:focus, &:active {
color: var(--gin-color-primary);
}
}
}
}
.action-list {
top: 36px;
background: var(--gin-bg-layer3);
box-shadow: 0 1px 2px var(--gin-shadow-button);
li {
background-color: transparent;
border: none;
input.button {
width: 100%;
text-align: left;
line-height: 1.2;
box-shadow: none;
border: none !important;
}
&:hover, &:focus, &:active {
&,
input.button {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
}
}
}
}
}
.views-ui-display-tab-bucket {
// #3186729: Drupal 9.1 fix
&__header {
padding: 0;
}
& &__title {
font-size: var(--gin-font-size-xl);
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title);
text-transform: none;
padding: var(--gin-spacing-m);
}
// #3186729: Drupal 9.1 fix
&__header {
padding: var(--gin-spacing-m) 0 var(--gin-spacing-xs);
.views-ui-display-tab-bucket__title {
padding: 0 var(--gin-spacing-m);
}
.views-ui-display-tab-bucket__actions {
margin-right: var(--gin-spacing-m);
}
}
.views-display-setting,
.views-ui-display-tab-bucket > .views-display-setting {
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
}
.views-display-setting {
color: var(--gin-color-text);
}
.views-display-setting:nth-of-type(even) {
background-color: transparent;
}
.dropbutton-wrapper {
top: 14px;
right: var(--gin-spacing-m);
}
&.pager {
margin: 0;
}
}
.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
padding-top: 0;
margin-bottom: 0;
border-bottom-color: var(--gin-border-color);
}
.views-ui-display-tab-actions {
.views-ui-display-tab-setting {
padding: var(--gin-spacing-m);
}
}
.views-query-info table tr {
background-color: var(--gin-bg-layer2);
td {
color: var(--gin-color-text);
}
}
.system-modules,
.locale-translation-status-form {
tr.even,
tr.odd {
background: none;
border-top: 1px solid var(--gin-border-color);
border-bottom: none;
}
}
.system-modules td {
padding: var(--gin-spacing-m);
height: auto;
details summary {
background-color: transparent;
}
}
.views-display-column,
.edit-display-settings-top.views-ui-display-tab-bucket {
margin-bottom: var(--gin-spacing-m);
border-color: var(--gin-border-color);
border-radius: var(--gin-border-m);
box-shadow: none;
}
.views-ui-dialog {
.form--inline {
padding-top: 0;
}
.views-override:not(:empty) {
background-color: var(--gin-bg-app);
border-bottom: 0 none;
}
.form-item--fields-area-text-custom-removed {
display: inline-block;
margin-right: var(--gin-spacing-xxs);
}
}
a.views-field-excluded {
color: var(--gin-color-disabled);
}
.views-filterable-options {
border-top: none;
}
.view-block-content .views-table {
margin-top: 0;
}
.views-display-columns {
.details-wrapper {
margin: 0;
}
}
.machine-name-label {
color: var(--gin-color-text);
}
.machine-name-value {
color: var(--gin-color-title);
}
.views-exposed-form .form-datetime-wrapper {
margin-bottom: 0;
margin-right: var(--gin-spacing-xs);
}
.view-header {
margin-bottom: var(--gin-spacing-l);
}