v1/web/themes/contrib/gin/styles/components/entity_browser.scss

174 lines
3.4 KiB
SCSS

// 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.
}
}