forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
801 lines
16 KiB
SCSS
801 lines
16 KiB
SCSS
.media-library-wrapper
|
|
{
|
|
display: flex;
|
|
|
|
margin: 0 !important;
|
|
> ul
|
|
{
|
|
margin-right: 30px !important;
|
|
margin-left: -15px !important;
|
|
}
|
|
}
|
|
.glb-form-type--checkbox input[type='checkbox']
|
|
{
|
|
margin-left: 0 !important;
|
|
}
|
|
.glb-media-library-add-form--without-input .glb-form-item
|
|
{
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.glb-media-library-add-form--oembed
|
|
{
|
|
.glb-media-library-add-form__input-wrapper
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-add-form__added-media
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.glb-media-library-add-form__media
|
|
{
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
border-bottom: 1px solid #c0c0c0;
|
|
|
|
&:last-child
|
|
{
|
|
padding-bottom: 0;
|
|
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-add-form__preview
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 13.75em;
|
|
margin-right: 1.25em;
|
|
|
|
background: var(--gin-bg-app);
|
|
|
|
img
|
|
{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-add-form__fields
|
|
{
|
|
flex-grow: 1;
|
|
|
|
.glb-form-item
|
|
{
|
|
max-width: 32em;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-add-form__remove-button
|
|
{
|
|
position: absolute;
|
|
right: 0;
|
|
|
|
background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\'%3e%3cpath fill=\'%23000000\' d=\'M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z\'/%3e%3c/svg%3e');
|
|
background-repeat: no-repeat;
|
|
background-position: .5em center;
|
|
background-size: .75em;
|
|
|
|
&.glb-button--extrasmall
|
|
{
|
|
font-size: .79em !important;
|
|
|
|
margin: .5em 0 !important;
|
|
padding: calc(.25em - 1px) calc(.75em - 1px) calc(.25em - 1px) 1.5em !important;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-item
|
|
{
|
|
position: relative !important;
|
|
|
|
background: none !important;
|
|
|
|
&--table
|
|
{
|
|
img
|
|
{
|
|
max-width: 100px;
|
|
height: auto;
|
|
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&--grid
|
|
{
|
|
justify-content: center !important;
|
|
|
|
box-sizing: border-box !important;
|
|
padding: 8px !important;
|
|
|
|
vertical-align: top !important;
|
|
|
|
border-radius: $borderBig !important;
|
|
outline: none !important;
|
|
background: #fff !important;
|
|
&::before
|
|
{
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 7px;
|
|
|
|
width: calc(100% - 16px);
|
|
height: calc(100% - 16px);
|
|
|
|
content: '';
|
|
transition: border-color .2s, color .2s, background .2s;
|
|
pointer-events: none;
|
|
|
|
border: 1px solid #dbdbdb;
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
|
}
|
|
&::before,
|
|
&.is-hover::before,
|
|
&.checked::before,
|
|
&.is-focus::before
|
|
{
|
|
border-color: transparent !important;
|
|
border-radius: #{$borderBig + 2px} !important;
|
|
}
|
|
|
|
// User is dragging item.
|
|
&.sortable-chosen
|
|
{
|
|
outline: none;
|
|
background: var(--gin-bg-layer);
|
|
box-shadow: 0 0 48px rgba(0, 0, 0, .075) !important;
|
|
|
|
// Hide emove button on ghost.
|
|
.glb-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%;
|
|
}
|
|
}
|
|
|
|
&__name
|
|
{
|
|
font-size: 14px !important;
|
|
|
|
overflow: visible !important;
|
|
|
|
margin: 0 !important;
|
|
|
|
white-space: initial !important;
|
|
text-overflow: initial !important;
|
|
word-break: break-all;
|
|
|
|
color: var(--gin-color-text);
|
|
}
|
|
|
|
&__attributes
|
|
{
|
|
position: static;
|
|
|
|
padding: .5em;
|
|
|
|
background: none;
|
|
}
|
|
|
|
&__preview
|
|
{
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
padding-bottom: 100%;
|
|
|
|
border: 3px solid transparent;
|
|
border-radius: $borderBig;
|
|
|
|
img
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&.is-hover &__preview
|
|
{
|
|
border-color: var(--gin-color-text);
|
|
}
|
|
|
|
&.checked &__preview,
|
|
&.is-active &__preview
|
|
{
|
|
border-color: var(--gin-color-primary);
|
|
}
|
|
.media-library-edit__link
|
|
{
|
|
font-size: 0 !important;
|
|
|
|
top: 18px !important;
|
|
right: 5px !important;
|
|
|
|
width: 29px !important;
|
|
height: 29px !important;
|
|
|
|
color: transparent !important;
|
|
border-color: var(--gin-border-color) !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
& &__edit,
|
|
& &__remove,
|
|
& &__remove.glb-button
|
|
{
|
|
font-size: 0 !important;
|
|
|
|
position: absolute !important;
|
|
z-index: 1 !important;
|
|
top: 10px !important;
|
|
|
|
overflow: hidden !important;
|
|
|
|
padding: 0 !important;
|
|
|
|
transition: .2s border-color !important;
|
|
|
|
color: transparent !important;
|
|
border-color: var(--gin-border-color) !important;
|
|
background-image: url('data:image/svg+xml,%3csvg width=\'16\' height=\'16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343\' stroke=\'%2355565B\' stroke-width=\'3\'/%3e%3c/svg%3e') !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
background-size: 12px !important;
|
|
text-shadow: none !important;
|
|
|
|
&:link,
|
|
&:not(:hover):not(:checked)
|
|
{
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus
|
|
{
|
|
border-color: var(--gin-color-primary) !important;
|
|
}
|
|
|
|
&,
|
|
&:hover,
|
|
&:focus
|
|
{
|
|
width: 29px !important;
|
|
height: 29px !important;
|
|
// We can't use em for the margin since the button font-size is 0.
|
|
margin: 12px !important;
|
|
|
|
border-radius: 50% !important;
|
|
background-color: white !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .15) !important;
|
|
}
|
|
}
|
|
& .glb-media-library-item__edit
|
|
{
|
|
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"%3E%3C/path%3E%3C/svg%3E%0A') !important;
|
|
right: 3.125em;
|
|
}
|
|
|
|
&__click-to-select-checkbox .form-boolean
|
|
{
|
|
width: 29px;
|
|
height: 29px;
|
|
|
|
border-radius: $borderSmall;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
|
|
|
|
&,
|
|
.gin--dark-mode &
|
|
{
|
|
border-radius: $borderSmall;
|
|
|
|
&:not(:checked)
|
|
{
|
|
background-color: white;
|
|
}
|
|
|
|
&:not(:hover):not(:checked)
|
|
{
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
&:checked
|
|
{
|
|
border-color: var(--gin-color-primary);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-item
|
|
{
|
|
margin: .5em;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-views-form
|
|
{
|
|
flex-wrap: initial;
|
|
|
|
&__rows
|
|
{
|
|
display: flex;
|
|
flex-basis: 100%;
|
|
flex-wrap: wrap;
|
|
|
|
margin: 0 -8px;
|
|
}
|
|
}
|
|
|
|
.js-media-library-widget-toggle-weight
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.media-library-item__click-to-select-checkbox
|
|
{
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 16px;
|
|
left: 16px;
|
|
|
|
display: block;
|
|
& .glb-form-type--checkbox
|
|
{
|
|
margin: 0 !important;
|
|
}
|
|
& .glb-form-checkbox
|
|
{
|
|
width: 29px !important;
|
|
height: 29px !important;
|
|
|
|
border-radius: 4px !important;
|
|
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.15) !important;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,.15) !important;
|
|
&:checked
|
|
{
|
|
border-color: var(--gin-color-primary) !important;
|
|
background-image: url('data:image/svg+xml,%3csvg width=\'16\' height=\'16\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z\' fill=\'%23fff\'/%3e%3c/svg%3e') !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset.glb-media-library-widget
|
|
{
|
|
padding: 1.5em;
|
|
|
|
border: 1px solid var(--gin-border-color);
|
|
border-radius: 6px;
|
|
|
|
.media-library-widget__toggle-weight
|
|
{
|
|
font-size: .75em;
|
|
|
|
padding: 8px;
|
|
}
|
|
|
|
.fieldset__wrapper
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.glb-field--widget-media-library-widget
|
|
{
|
|
.glb-media-library-item--grid
|
|
{
|
|
width: 33.3% !important;
|
|
}
|
|
}
|
|
.glb-media-library-widget-empty-text
|
|
{
|
|
color: var(--gin-color-textLight);
|
|
}
|
|
|
|
.glb-media-library-add-form
|
|
{
|
|
&__preview
|
|
{
|
|
background: var(--gin-bg-app);
|
|
}
|
|
|
|
&__input-wrapper
|
|
{
|
|
padding: 0;
|
|
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.glb-media-library-menu
|
|
{
|
|
position: relative !important;
|
|
|
|
display: block !important;
|
|
|
|
width: 20em !important;
|
|
margin: 0 !important;
|
|
padding-top: .5em !important;
|
|
padding-left: 0 !important;
|
|
|
|
list-style: none !important;
|
|
|
|
border-color: var(--gin-border-color) !important;
|
|
background-color: var(--gin-bg-app) !important;
|
|
|
|
&__item
|
|
{
|
|
overflow: hidden;
|
|
|
|
margin: -1em -1px -.5em -.5em;
|
|
padding: .5em 0;
|
|
|
|
&:before
|
|
{
|
|
z-index: 0;
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
margin-top: -1px;
|
|
|
|
content: '';
|
|
|
|
border-top: 1px solid #d4d4d8;
|
|
}
|
|
}
|
|
|
|
&__link
|
|
{
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
margin-top: -1px;
|
|
padding: .75em .75em .75em calc(1.5em - .25em);
|
|
|
|
text-decoration: none;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
|
|
color: var(--gin-color-text);
|
|
border: 1px solid var(--gin-border-color);
|
|
border-width: 1px 0 1px 4px;
|
|
border-radius: 2px 0 0 2px;
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:focus,
|
|
&.active
|
|
{
|
|
color: var(--gin-color-primary);
|
|
border-right: 0 none;
|
|
border-bottom: 1px solid var(--gin-border-color);
|
|
background-color: var(--gin-bg-layer);
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
&:before
|
|
{
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: -1px;
|
|
right: 0;
|
|
bottom: -1px;
|
|
left: -.25em;
|
|
|
|
content: '';
|
|
pointer-events: none;
|
|
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
&.active
|
|
{
|
|
z-index: 2;
|
|
}
|
|
|
|
&.active:before
|
|
{
|
|
z-index: 1;
|
|
|
|
border-left: 4px solid #003cc5;
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
}
|
|
|
|
& + .media-library-content
|
|
{
|
|
z-index: 0;
|
|
|
|
width: 100%;
|
|
padding: 1em;
|
|
|
|
border-left: 1px solid var(--gin-border-color);
|
|
outline: none;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
|
}
|
|
}
|
|
|
|
.glb-media-library-view
|
|
{
|
|
.form-actions
|
|
{
|
|
display: none !important;
|
|
}
|
|
.glb-view-header
|
|
{
|
|
display: inline-block;
|
|
align-self: flex-end;
|
|
|
|
margin: 1em 0;
|
|
padding: 1em;
|
|
|
|
text-align: right;
|
|
text-decoration: none;
|
|
|
|
color: var(--gin-color-text);
|
|
border-radius: $borderDefault;
|
|
background: var(--gin-bg-layer3);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .08),
|
|
20px 20px 40px rgba(0, 0, 0, .12);
|
|
}
|
|
}
|
|
|
|
.glb-view-header
|
|
{
|
|
.views-display-link
|
|
{
|
|
font-size: 15px;
|
|
line-height: 16px;
|
|
|
|
position: relative;
|
|
|
|
margin-right: 15px;
|
|
padding-left: 22px;
|
|
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
|
|
color: var(--gin-color-text);
|
|
color: #333;
|
|
|
|
&:before
|
|
{
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0;
|
|
|
|
display: inline-block;
|
|
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
content: '';
|
|
|
|
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') !important;
|
|
}
|
|
}
|
|
|
|
.views-display-link-widget_table
|
|
{
|
|
&:before
|
|
{
|
|
mask-image: icon('list');
|
|
}
|
|
}
|
|
}
|
|
|
|
.glb-media-library-content
|
|
{
|
|
border-color: var(--gin-border-color);
|
|
}
|
|
|
|
.glb-media-library-select-all
|
|
{
|
|
margin-top: 0;
|
|
padding: 1em;
|
|
|
|
color: var(--gin-color-title);
|
|
border-radius: $borderDefault;
|
|
background: var(--gin-bg-header);
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
|
|
}
|
|
|
|
.glb-views-field-thumbnail__target-id
|
|
{
|
|
img
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// UI Dialog overrode
|
|
.ui-dialog
|
|
{
|
|
.glb-views-exposed-form,
|
|
.glb-views-form
|
|
{
|
|
.gin--dark-mode &
|
|
{
|
|
background: var(--gin-bg-layer2) !important;
|
|
box-shadow: 0 6px 16px rgba(0,0,0,.05) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[data-media-library-widget-update]
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
.glb-media-library-selection
|
|
{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
margin: 1em -.5em;
|
|
}
|
|
|
|
.glb-media-library-item--grid
|
|
{
|
|
justify-content: center;
|
|
|
|
box-sizing: border-box;
|
|
width: 50%;
|
|
padding: .5em;
|
|
|
|
background: none !important;
|
|
}
|
|
|
|
@media screen and (min-width: 45em)
|
|
{
|
|
.glb-media-library-item--grid
|
|
{
|
|
width: 33.3%;
|
|
}
|
|
|
|
/* Change the width for the modal and widget since there is less space. */
|
|
.glb-media-library-widget-modal .glb-media-library-item--grid,
|
|
.glb-media-library-selection .glb-media-library-item--grid
|
|
{
|
|
width: 50%;
|
|
}
|
|
|
|
/* The selected items in the add form should be shown a bit smaller. */
|
|
.glb-media-library-add-form__selected-media .glb-media-library-item--small
|
|
{
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em)
|
|
{
|
|
.glb-media-library-item--grid
|
|
{
|
|
width: 25%;
|
|
}
|
|
|
|
/* Change the width for the modal and widget since there is less space. */
|
|
.glb-media-library-widget-modal .glb-media-library-item--grid,
|
|
.glb-media-library-selection .glb-media-library-item--grid
|
|
{
|
|
width: 33.3%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 77em)
|
|
{
|
|
/* Change the width for the modal and widget since there is less space. */
|
|
.glb-media-library-widget-modal .glb-media-library-item--grid,
|
|
.glb-media-library-selection .glb-media-library-item--grid
|
|
{
|
|
width: 25%;
|
|
}
|
|
}
|
|
.glb-media-library-item--grid:before
|
|
{
|
|
position: absolute;
|
|
top: .4375em;
|
|
left: .4375em;
|
|
|
|
width: calc(100% - 1em);
|
|
height: calc(100% - 1em);
|
|
|
|
content: '';
|
|
transition: border-color .2s, color .2s, background .2s;
|
|
pointer-events: none;
|
|
|
|
border: 1px solid #dbdbdb;
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.glb-media-form > .form-actions
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.media-library-widget-modal .ui-dialog-buttonpane
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.ui-dialog-buttonset
|
|
{
|
|
flex: 1;
|
|
}
|
|
|
|
.glb-button
|
|
{
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;;
|
|
}
|
|
}
|
|
|
|
#media-library-content
|
|
{
|
|
flex: 1;
|
|
}
|