@stratusjs/angular 0.13.9 → 0.13.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/media-selector/media-selector.component.css +3 -3
  3. package/src/media-selector/media-selector.component.css.map +1 -1
  4. package/src/media-selector/media-selector.component.min.css +1 -1
  5. package/src/media-selector/media-selector.component.scss +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stratusjs/angular",
3
- "version": "0.13.9",
3
+ "version": "0.13.10",
4
4
  "description": "This is the angular package for StratusJS.",
5
5
  "scripts": {},
6
6
  "repository": {
package/src/media-selector/media-selector.component.css CHANGED
@@ -259,7 +259,7 @@ sa-internal-media-selector .shapeholder,
259
259
  .media-selector .library-toggle ::ng-deep .library-toggle-icon svg rect {
260
260
  fill: #FF5B3A;
261
261
  }
262
- .media-selector .info-hover-container {
262
+ .media-selector .selected-media-item .info-hover-container {
263
263
  left: 50%;
264
264
  opacity: 0;
265
265
  pointer-events: none;
@@ -272,7 +272,7 @@ sa-internal-media-selector .shapeholder,
272
272
  z-index: 100400;
273
273
  padding-bottom: 8px;
274
274
  }
275
- .media-selector .info-hover-container::before {
275
+ .media-selector .selected-media-item .info-hover-container::before {
276
276
  content: "";
277
277
  height: 8px;
278
278
  left: 0;
@@ -280,7 +280,7 @@ sa-internal-media-selector .shapeholder,
280
280
  right: 0;
281
281
  top: 100%;
282
282
  }
283
- .media-selector .image-hover-info {
283
+ .media-selector .selected-media-item .image-hover-info {
284
284
  position: relative;
285
285
  pointer-events: none;
286
286
  z-index: 1;
package/src/media-selector/media-selector.component.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/angular/src/media-selector/media-selector.component.scss"],"names":[],"mappings":"AACA;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;AAAA;EACE;EACA;;;AAIF;EACE;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AASE;EACE;EACA;;;AAMR;AAEA;EACE;EACA;EACA;;;AAGF;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;;AAQF;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;AAIA;AAAA;EACE;;AAEF;AAAA;EACE;EACA;;AAMJ;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAIA;EAKA;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAvCJ;AAAA;EA0CE;;AAEA;AAAA;EACE;;AAGJ;AAAA;EAIE;;AAOF;EACE;;AAMJ;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAKN;EACE;;AAGF;EACE;;AAEA;AAAA;EAEE;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EAIE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAIA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;;AAeJ;EACE;EAGA;EACA;;AAEF;EACE;;AAIA;EACE;;AAFJ;EAIE;;;AAIJ;EACE;EACA;EACA;;;AAIF;AAMI;AAAA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAIJ;AAGE;EACE;;AAEF;EACE;;;AAIJ;AACA;EACE;;;AAEF;EACE","file":"media-selector.component.css","sourcesContent":["\n/* Styles for Both Media Selector and Media Selected Areas */\n\nsa-media-selector,\nsa-internal-media-selector,\n.media-selected-box.cdk-drag-preview {\n --sa-media-selector-tile-size: 80px;\n --sa-media-selector-tile-gap: 6px;\n --sa-media-selector-empty-button-size: 35px;\n\n .content-type {\n margin-bottom: 2px;\n md-icon,\n mat-icon {\n margin-right: 4px;\n height: 14px;\n width: 14px;\n min-height: 14px;\n min-width: 14px;\n }\n .content-type-name {\n font-weight: bold;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n }\n .no-image-icon {\n md-icon,\n mat-icon {\n height: 28px;\n width: 28px;\n min-height: 28px;\n min-width: 28px;\n svg g {\n fill: #FFF;\n }\n }\n }\n .shapeholder {\n width: 100%;\n display: block;\n }\n}\n.media-selected-box.cdk-drag-preview {\n .column-title h3 {\n margin: 0 0 5px;\n font-size: 16px;\n }\n\n &,\n .selected-media-item,\n .image-draggable {\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n max-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n max-height: var(--sa-media-selector-tile-size);\n overflow: hidden;\n }\n}\n\n// the dragging class appears on the\n// placeholder of what is being dragged\n.media-selector {\n .cdk-drop-list {\n &.cdk-drop-list-dragging {\n .shapeholder {\n width: 80px;\n display: block;\n }\n }\n }\n}\n\n/* Draggable Media Selected List */\n\n.media-selector-wrapper {\n background: rgba(255, 255, 255, .4);\n margin-top: 20px;\n padding: 16px;\n}\n\n/* Based on Angular Material 8+ */\n\n.media-selector {\n box-sizing: border-box;\n\n .selected-container {\n background: #fff;\n box-sizing: border-box;\n padding: 16px;\n border-radius: 2px;\n }\n\n &.media-selector--empty {\n .selected-container {\n min-height: var(--sa-media-selector-empty-button-size);\n }\n\n .media-selected-container {\n align-items: center;\n flex-wrap: nowrap;\n min-height: var(--sa-media-selector-empty-button-size);\n }\n\n .media-selected-list,\n .media-selected-box,\n .library-toggle,\n .library-toggle > a,\n .library-toggle .position-anchor {\n flex: 0 0 var(--sa-media-selector-empty-button-size);\n width: var(--sa-media-selector-empty-button-size);\n min-width: var(--sa-media-selector-empty-button-size);\n max-width: var(--sa-media-selector-empty-button-size);\n height: var(--sa-media-selector-empty-button-size);\n min-height: var(--sa-media-selector-empty-button-size);\n max-height: var(--sa-media-selector-empty-button-size);\n }\n\n .library-toggle mat-icon,\n .library-toggle md-icon {\n width: 18px;\n height: 18px;\n min-width: 18px;\n min-height: 18px;\n }\n\n .media-selector-empty-instruction {\n flex: 1 1 auto;\n align-self: center;\n min-width: 0;\n padding: 0 0 0 10px;\n color: rgba(0, 0, 0, .48);\n font-size: 12px;\n line-height: var(--sa-media-selector-empty-button-size);\n letter-spacing: .02em;\n }\n }\n\n .media-selected {\n // Note: an ampersand appears twice in this selector\n &-list.cdk-drop-list-dragging &-box:not(.cdk-drag-placeholder) {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n // Note: I added a selector for the cdk-drag-placeholder class because we lose the outer container when dragging,\n // but it doesn't work.\n //.cdk-drag-placeholder,\n .media-selected,\n ul.media-selected {\n &-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sa-media-selector-tile-gap);\n }\n &-list {\n flex: 0 0 var(--sa-media-selector-tile-size);\n width: var(--sa-media-selector-tile-size);\n max-width: 100%;\n //border: solid 1px #ccc;\n min-height: var(--sa-media-selector-tile-size);\n display: flex;\n flex-direction: row;\n //background: white;\n //border-radius: 4px;\n //overflow: hidden;\n &-grid {\n flex-wrap: wrap;\n }\n .shapeholder {\n width: 100%;\n display: block;\n }\n }\n }\n .media-selected,\n li.media-selected {\n &-box {\n //width: 75px;\n //height: 75px;\n //padding: 20px 10px;\n //width: 12.5%;\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n padding: 0;\n //border-right: solid 1px #ccc;\n color: rgba(0, 0, 0, 0.87);\n // FIXME: when this uses display:flex, the box collapses\n display: flex;\n flex-direction: row;\n //align-items: center;\n //justify-content: center;\n //justify-content: space-between;\n text-align: center;\n //border-radius: 4px;\n //position: relative;\n //box-sizing: border-box;\n //background: white;\n font-size: 14px;\n transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);\n //box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),\n //0 2px 2px 0 rgba(0, 0, 0, 0.14),\n //0 1px 5px 0 rgba(0, 0, 0, 0.12);\n // this forces the cells to grow to fit the row\n &-grow {\n flex-grow: 1;\n }\n // this forces all cells to wrap\n &-grid {\n flex-wrap: wrap;\n }\n // this forces all cells on one line instead of wrapping\n &-row {\n flex-basis: 0;\n }\n // this is the default cursor for boxes\n cursor: pointer;\n // this changes the cursor for movable boxes\n &.cdk-drag {\n cursor: move;\n }\n }\n &-box:active {\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n opacity: 0.6;\n }\n &-box:last-child {\n //border: none;\n }\n }\n .cdk-drop {\n &-list {\n display: flex;\n //padding-right: 10px;\n //padding-bottom: 10px;\n }\n }\n\n .selected-media-item,\n .image-draggable,\n .library-toggle,\n .library-toggle > a,\n .library-toggle .position-anchor {\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n max-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n max-height: var(--sa-media-selector-tile-size);\n border-radius: 2px;\n overflow: hidden;\n }\n\n .selected-media-item {\n overflow: visible;\n position: relative;\n z-index: 1;\n\n &:hover,\n &:focus-within {\n z-index: 100401;\n\n .info-hover-container {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n\n .image-hover-info {\n pointer-events: auto;\n }\n }\n }\n\n .selected-media-item .image-draggable {\n overflow: hidden;\n }\n\n .library-toggle {\n display: block;\n\n > a,\n .position-anchor {\n display: block;\n }\n\n mat-icon,\n md-icon,\n .library-toggle-icon {\n color: #FF5B3A;\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n }\n\n ::ng-deep .library-toggle-icon svg,\n ::ng-deep .library-toggle-icon svg g,\n ::ng-deep .library-toggle-icon svg path,\n ::ng-deep .library-toggle-icon svg rect {\n fill: #FF5B3A;\n }\n\n }\n\n .info-hover-container {\n left: 50%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n transform: translate(-50%, -100%);\n transform-origin: center bottom;\n transition: opacity 120ms ease, visibility 120ms ease;\n visibility: hidden;\n z-index: 100400;\n padding-bottom: 8px;\n\n &::before {\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n right: 0;\n top: 100%;\n }\n }\n\n .image-hover-info {\n position: relative;\n pointer-events: none;\n z-index: 1;\n }\n\n &.media-selector--empty {\n .library-toggle mat-icon,\n .library-toggle md-icon,\n .library-toggle .library-toggle-icon {\n width: 18px;\n height: 18px;\n min-width: 18px;\n min-height: 18px;\n }\n }\n}\n\n.cdk-drag {\n &-preview {\n // Note: these are the original drag preview styles Angular+\n //box-sizing: border-box;\n //border-radius: 4px;\n //box-shadow: 2px 2px 4px rgba(0,0,0,.3)\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n }\n &-placeholder {\n opacity: 0.3;\n //opacity: 0.7;\n //opacity: 0;\n background: rgba(0, 0, 0, .4);\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n &-animating {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n // hide tooltip in preview (dragged element) and placeholder in the list\n &-preview, &-placeholder {\n .info-hover-container {\n display: none;\n }\n list-style: none;\n }\n}\n\n.custom-ghost-placeholder {\n background: rgba(0, 0, 0, .4);\n min-height: 60px;\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n/* Selected List Custom */\n\nsa-media-selector,\nsa-internal-media-selector,\n.media-selected-box.cdk-drag-preview {\n .image-hover-info {\n .action-btns {\n margin: 0 auto;\n padding-top: 2px;\n width: 112px;\n\n span {\n display: inline-block;\n margin: 0 2px;\n }\n\n a {\n display: inline-block;\n }\n }\n }\n\n .column-image,\n .column-title,\n .column-action {\n float: left;\n }\n}\n\n/* Full Size */\n\n.full {\n &-width {\n width: 100%;\n }\n &-height {\n height: 100%;\n }\n}\n\n/* Text Transforms */\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n"]}
1
+ {"version":3,"sources":["packages/angular/src/media-selector/media-selector.component.scss"],"names":[],"mappings":"AACA;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;AAAA;EACE;EACA;;;AAIF;EACE;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AASE;EACE;EACA;;;AAMR;AAEA;EACE;EACA;EACA;;;AAGF;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;;AAQF;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;AAIA;AAAA;EACE;;AAEF;AAAA;EACE;EACA;;AAMJ;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAIA;EAKA;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAvCJ;AAAA;EA0CE;;AAEA;AAAA;EACE;;AAGJ;AAAA;EAIE;;AAOF;EACE;;AAMJ;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAKN;EACE;;AAGF;EACE;;AAEA;AAAA;EAEE;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EAIE;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAIA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;;AAeJ;EACE;EAGA;EACA;;AAEF;EACE;;AAIA;EACE;;AAFJ;EAIE;;;AAIJ;EACE;EACA;EACA;;;AAIF;AAMI;AAAA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAIJ;AAGE;EACE;;AAEF;EACE;;;AAIJ;AACA;EACE;;;AAEF;EACE","file":"media-selector.component.css","sourcesContent":["\n/* Styles for Both Media Selector and Media Selected Areas */\n\nsa-media-selector,\nsa-internal-media-selector,\n.media-selected-box.cdk-drag-preview {\n --sa-media-selector-tile-size: 80px;\n --sa-media-selector-tile-gap: 6px;\n --sa-media-selector-empty-button-size: 35px;\n\n .content-type {\n margin-bottom: 2px;\n md-icon,\n mat-icon {\n margin-right: 4px;\n height: 14px;\n width: 14px;\n min-height: 14px;\n min-width: 14px;\n }\n .content-type-name {\n font-weight: bold;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n }\n .no-image-icon {\n md-icon,\n mat-icon {\n height: 28px;\n width: 28px;\n min-height: 28px;\n min-width: 28px;\n svg g {\n fill: #FFF;\n }\n }\n }\n .shapeholder {\n width: 100%;\n display: block;\n }\n}\n.media-selected-box.cdk-drag-preview {\n .column-title h3 {\n margin: 0 0 5px;\n font-size: 16px;\n }\n\n &,\n .selected-media-item,\n .image-draggable {\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n max-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n max-height: var(--sa-media-selector-tile-size);\n overflow: hidden;\n }\n}\n\n// the dragging class appears on the\n// placeholder of what is being dragged\n.media-selector {\n .cdk-drop-list {\n &.cdk-drop-list-dragging {\n .shapeholder {\n width: 80px;\n display: block;\n }\n }\n }\n}\n\n/* Draggable Media Selected List */\n\n.media-selector-wrapper {\n background: rgba(255, 255, 255, .4);\n margin-top: 20px;\n padding: 16px;\n}\n\n/* Based on Angular Material 8+ */\n\n.media-selector {\n box-sizing: border-box;\n\n .selected-container {\n background: #fff;\n box-sizing: border-box;\n padding: 16px;\n border-radius: 2px;\n }\n\n &.media-selector--empty {\n .selected-container {\n min-height: var(--sa-media-selector-empty-button-size);\n }\n\n .media-selected-container {\n align-items: center;\n flex-wrap: nowrap;\n min-height: var(--sa-media-selector-empty-button-size);\n }\n\n .media-selected-list,\n .media-selected-box,\n .library-toggle,\n .library-toggle > a,\n .library-toggle .position-anchor {\n flex: 0 0 var(--sa-media-selector-empty-button-size);\n width: var(--sa-media-selector-empty-button-size);\n min-width: var(--sa-media-selector-empty-button-size);\n max-width: var(--sa-media-selector-empty-button-size);\n height: var(--sa-media-selector-empty-button-size);\n min-height: var(--sa-media-selector-empty-button-size);\n max-height: var(--sa-media-selector-empty-button-size);\n }\n\n .library-toggle mat-icon,\n .library-toggle md-icon {\n width: 18px;\n height: 18px;\n min-width: 18px;\n min-height: 18px;\n }\n\n .media-selector-empty-instruction {\n flex: 1 1 auto;\n align-self: center;\n min-width: 0;\n padding: 0 0 0 10px;\n color: rgba(0, 0, 0, .48);\n font-size: 12px;\n line-height: var(--sa-media-selector-empty-button-size);\n letter-spacing: .02em;\n }\n }\n\n .media-selected {\n // Note: an ampersand appears twice in this selector\n &-list.cdk-drop-list-dragging &-box:not(.cdk-drag-placeholder) {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n // Note: I added a selector for the cdk-drag-placeholder class because we lose the outer container when dragging,\n // but it doesn't work.\n //.cdk-drag-placeholder,\n .media-selected,\n ul.media-selected {\n &-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sa-media-selector-tile-gap);\n }\n &-list {\n flex: 0 0 var(--sa-media-selector-tile-size);\n width: var(--sa-media-selector-tile-size);\n max-width: 100%;\n //border: solid 1px #ccc;\n min-height: var(--sa-media-selector-tile-size);\n display: flex;\n flex-direction: row;\n //background: white;\n //border-radius: 4px;\n //overflow: hidden;\n &-grid {\n flex-wrap: wrap;\n }\n .shapeholder {\n width: 100%;\n display: block;\n }\n }\n }\n .media-selected,\n li.media-selected {\n &-box {\n //width: 75px;\n //height: 75px;\n //padding: 20px 10px;\n //width: 12.5%;\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n padding: 0;\n //border-right: solid 1px #ccc;\n color: rgba(0, 0, 0, 0.87);\n // FIXME: when this uses display:flex, the box collapses\n display: flex;\n flex-direction: row;\n //align-items: center;\n //justify-content: center;\n //justify-content: space-between;\n text-align: center;\n //border-radius: 4px;\n //position: relative;\n //box-sizing: border-box;\n //background: white;\n font-size: 14px;\n transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);\n //box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),\n //0 2px 2px 0 rgba(0, 0, 0, 0.14),\n //0 1px 5px 0 rgba(0, 0, 0, 0.12);\n // this forces the cells to grow to fit the row\n &-grow {\n flex-grow: 1;\n }\n // this forces all cells to wrap\n &-grid {\n flex-wrap: wrap;\n }\n // this forces all cells on one line instead of wrapping\n &-row {\n flex-basis: 0;\n }\n // this is the default cursor for boxes\n cursor: pointer;\n // this changes the cursor for movable boxes\n &.cdk-drag {\n cursor: move;\n }\n }\n &-box:active {\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n opacity: 0.6;\n }\n &-box:last-child {\n //border: none;\n }\n }\n .cdk-drop {\n &-list {\n display: flex;\n //padding-right: 10px;\n //padding-bottom: 10px;\n }\n }\n\n .selected-media-item,\n .image-draggable,\n .library-toggle,\n .library-toggle > a,\n .library-toggle .position-anchor {\n box-sizing: border-box;\n width: var(--sa-media-selector-tile-size);\n min-width: var(--sa-media-selector-tile-size);\n max-width: var(--sa-media-selector-tile-size);\n height: var(--sa-media-selector-tile-size);\n min-height: var(--sa-media-selector-tile-size);\n max-height: var(--sa-media-selector-tile-size);\n border-radius: 2px;\n overflow: hidden;\n }\n\n .selected-media-item {\n overflow: visible;\n position: relative;\n z-index: 1;\n\n &:hover,\n &:focus-within {\n z-index: 100401;\n\n .info-hover-container {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n }\n\n .image-hover-info {\n pointer-events: auto;\n }\n }\n }\n\n .selected-media-item .image-draggable {\n overflow: hidden;\n }\n\n .library-toggle {\n display: block;\n\n > a,\n .position-anchor {\n display: block;\n }\n\n mat-icon,\n md-icon,\n .library-toggle-icon {\n color: #FF5B3A;\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n }\n\n ::ng-deep .library-toggle-icon svg,\n ::ng-deep .library-toggle-icon svg g,\n ::ng-deep .library-toggle-icon svg path,\n ::ng-deep .library-toggle-icon svg rect {\n fill: #FF5B3A;\n }\n\n }\n\n // The adjacent AngularJS library also uses .media-selector. Its popups must\n // remain interactive; only modern selected items use these hidden defaults.\n .selected-media-item .info-hover-container {\n left: 50%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n transform: translate(-50%, -100%);\n transform-origin: center bottom;\n transition: opacity 120ms ease, visibility 120ms ease;\n visibility: hidden;\n z-index: 100400;\n padding-bottom: 8px;\n\n &::before {\n content: '';\n height: 8px;\n left: 0;\n position: absolute;\n right: 0;\n top: 100%;\n }\n }\n\n .selected-media-item .image-hover-info {\n position: relative;\n pointer-events: none;\n z-index: 1;\n }\n\n &.media-selector--empty {\n .library-toggle mat-icon,\n .library-toggle md-icon,\n .library-toggle .library-toggle-icon {\n width: 18px;\n height: 18px;\n min-width: 18px;\n min-height: 18px;\n }\n }\n}\n\n.cdk-drag {\n &-preview {\n // Note: these are the original drag preview styles Angular+\n //box-sizing: border-box;\n //border-radius: 4px;\n //box-shadow: 2px 2px 4px rgba(0,0,0,.3)\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n }\n &-placeholder {\n opacity: 0.3;\n //opacity: 0.7;\n //opacity: 0;\n background: rgba(0, 0, 0, .4);\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n &-animating {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n // hide tooltip in preview (dragged element) and placeholder in the list\n &-preview, &-placeholder {\n .info-hover-container {\n display: none;\n }\n list-style: none;\n }\n}\n\n.custom-ghost-placeholder {\n background: rgba(0, 0, 0, .4);\n min-height: 60px;\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n/* Selected List Custom */\n\nsa-media-selector,\nsa-internal-media-selector,\n.media-selected-box.cdk-drag-preview {\n .image-hover-info {\n .action-btns {\n margin: 0 auto;\n padding-top: 2px;\n width: 112px;\n\n span {\n display: inline-block;\n margin: 0 2px;\n }\n\n a {\n display: inline-block;\n }\n }\n }\n\n .column-image,\n .column-title,\n .column-action {\n float: left;\n }\n}\n\n/* Full Size */\n\n.full {\n &-width {\n width: 100%;\n }\n &-height {\n height: 100%;\n }\n}\n\n/* Text Transforms */\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n"]}
package/src/media-selector/media-selector.component.min.css CHANGED
@@ -1 +1 @@
1
- .media-selected-box.cdk-drag-preview,sa-internal-media-selector,sa-media-selector{--sa-media-selector-tile-size:80px;--sa-media-selector-tile-gap:6px;--sa-media-selector-empty-button-size:35px}.media-selected-box.cdk-drag-preview .content-type,sa-internal-media-selector .content-type,sa-media-selector .content-type{margin-bottom:2px}.media-selected-box.cdk-drag-preview .content-type mat-icon,.media-selected-box.cdk-drag-preview .content-type md-icon,sa-internal-media-selector .content-type mat-icon,sa-internal-media-selector .content-type md-icon,sa-media-selector .content-type mat-icon,sa-media-selector .content-type md-icon{margin-right:4px;height:14px;width:14px;min-height:14px;min-width:14px}.media-selected-box.cdk-drag-preview .content-type .content-type-name,sa-internal-media-selector .content-type .content-type-name,sa-media-selector .content-type .content-type-name{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon,.media-selected-box.cdk-drag-preview .no-image-icon md-icon,sa-internal-media-selector .no-image-icon mat-icon,sa-internal-media-selector .no-image-icon md-icon,sa-media-selector .no-image-icon mat-icon,sa-media-selector .no-image-icon md-icon{height:28px;width:28px;min-height:28px;min-width:28px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon svg g,.media-selected-box.cdk-drag-preview .no-image-icon md-icon svg g,sa-internal-media-selector .no-image-icon mat-icon svg g,sa-internal-media-selector .no-image-icon md-icon svg g,sa-media-selector .no-image-icon mat-icon svg g,sa-media-selector .no-image-icon md-icon svg g{fill:#fff}.media-selected-box.cdk-drag-preview .shapeholder,sa-internal-media-selector .shapeholder,sa-media-selector .shapeholder{width:100%;display:block}.media-selected-box.cdk-drag-preview .column-title h3{margin:0 0 5px;font-size:16px}.media-selected-box.cdk-drag-preview,.media-selected-box.cdk-drag-preview .image-draggable,.media-selected-box.cdk-drag-preview .selected-media-item{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);max-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);max-height:var(--sa-media-selector-tile-size);overflow:hidden}.media-selector .cdk-drop-list.cdk-drop-list-dragging .shapeholder{width:80px;display:block}.media-selector-wrapper{background:rgba(255,255,255,.4);margin-top:20px;padding:16px}.media-selector{box-sizing:border-box}.media-selector .selected-container{background:#fff;box-sizing:border-box;padding:16px;border-radius:2px}.media-selector.media-selector--empty .selected-container{min-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .media-selected-container{align-items:center;flex-wrap:nowrap;min-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .library-toggle,.media-selector.media-selector--empty .library-toggle .position-anchor,.media-selector.media-selector--empty .library-toggle>a,.media-selector.media-selector--empty .media-selected-box,.media-selector.media-selector--empty .media-selected-list{flex:0 0 var(--sa-media-selector-empty-button-size);width:var(--sa-media-selector-empty-button-size);min-width:var(--sa-media-selector-empty-button-size);max-width:var(--sa-media-selector-empty-button-size);height:var(--sa-media-selector-empty-button-size);min-height:var(--sa-media-selector-empty-button-size);max-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .library-toggle mat-icon,.media-selector.media-selector--empty .library-toggle md-icon{width:18px;height:18px;min-width:18px;min-height:18px}.media-selector.media-selector--empty .media-selector-empty-instruction{flex:1 1 auto;align-self:center;min-width:0;padding:0 0 0 10px;color:rgba(0,0,0,.48);font-size:12px;line-height:var(--sa-media-selector-empty-button-size);letter-spacing:.02em}.media-selector .media-selected-list.cdk-drop-list-dragging .media-selector .media-selected-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selector .media-selected-container,.media-selector ul.media-selected-container{display:flex;flex-wrap:wrap;gap:var(--sa-media-selector-tile-gap)}.media-selector .media-selected-list,.media-selector ul.media-selected-list{flex:0 0 var(--sa-media-selector-tile-size);width:var(--sa-media-selector-tile-size);max-width:100%;min-height:var(--sa-media-selector-tile-size);display:flex;flex-direction:row}.media-selector .media-selected-list-grid,.media-selector ul.media-selected-list-grid{flex-wrap:wrap}.media-selector .media-selected-list .shapeholder,.media-selector ul.media-selected-list .shapeholder{width:100%;display:block}.media-selector .media-selected-box,.media-selector li.media-selected-box{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);padding:0;color:rgba(0,0,0,.87);display:flex;flex-direction:row;text-align:center;font-size:14px;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.media-selector .media-selected-box-grow,.media-selector li.media-selected-box-grow{flex-grow:1}.media-selector .media-selected-box-grid,.media-selector li.media-selected-box-grid{flex-wrap:wrap}.media-selector .media-selected-box-row,.media-selector li.media-selected-box-row{flex-basis:0}.media-selector .media-selected-box,.media-selector li.media-selected-box{cursor:pointer}.media-selector .media-selected-box.cdk-drag,.media-selector li.media-selected-box.cdk-drag{cursor:move}.media-selector .media-selected-box:active,.media-selector li.media-selected-box:active{opacity:.6}.media-selector .cdk-drop-list{display:flex}.media-selector .image-draggable,.media-selector .library-toggle,.media-selector .library-toggle .position-anchor,.media-selector .library-toggle>a,.media-selector .selected-media-item{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);max-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);max-height:var(--sa-media-selector-tile-size);border-radius:2px;overflow:hidden}.media-selector .selected-media-item{overflow:visible;position:relative;z-index:1}.media-selector .selected-media-item:focus-within,.media-selector .selected-media-item:hover{z-index:100401}.media-selector .selected-media-item:focus-within .info-hover-container,.media-selector .selected-media-item:hover .info-hover-container{opacity:1;pointer-events:auto;visibility:visible}.media-selector .selected-media-item:focus-within .image-hover-info,.media-selector .selected-media-item:hover .image-hover-info{pointer-events:auto}.media-selector .selected-media-item .image-draggable{overflow:hidden}.media-selector .library-toggle{display:block}.media-selector .library-toggle .position-anchor,.media-selector .library-toggle>a{display:block}.media-selector .library-toggle .library-toggle-icon,.media-selector .library-toggle mat-icon,.media-selector .library-toggle md-icon{color:#ff5b3a;width:24px;height:24px;min-width:24px;min-height:24px}.media-selector .library-toggle ::ng-deep .library-toggle-icon svg,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg g,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg path,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg rect{fill:#ff5b3a}.media-selector .info-hover-container{left:50%;opacity:0;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-100%);transform-origin:center bottom;transition:opacity 120ms ease,visibility 120ms ease;visibility:hidden;z-index:100400;padding-bottom:8px}.media-selector .info-hover-container::before{content:"";height:8px;left:0;position:absolute;right:0;top:100%}.media-selector .image-hover-info{position:relative;pointer-events:none;z-index:1}.media-selector.media-selector--empty .library-toggle .library-toggle-icon,.media-selector.media-selector--empty .library-toggle mat-icon,.media-selector.media-selector--empty .library-toggle md-icon{width:18px;height:18px;min-width:18px;min-height:18px}.cdk-drag-placeholder{opacity:.3;background:rgba(0,0,0,.4);transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder .info-hover-container,.cdk-drag-preview .info-hover-container{display:none}.cdk-drag-placeholder,.cdk-drag-preview{list-style:none}.custom-ghost-placeholder{background:rgba(0,0,0,.4);min-height:60px;transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns,sa-internal-media-selector .image-hover-info .action-btns,sa-media-selector .image-hover-info .action-btns{margin:0 auto;padding-top:2px;width:112px}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns span,sa-internal-media-selector .image-hover-info .action-btns span,sa-media-selector .image-hover-info .action-btns span{display:inline-block;margin:0 2px}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns a,sa-internal-media-selector .image-hover-info .action-btns a,sa-media-selector .image-hover-info .action-btns a{display:inline-block}.media-selected-box.cdk-drag-preview .column-action,.media-selected-box.cdk-drag-preview .column-image,.media-selected-box.cdk-drag-preview .column-title,sa-internal-media-selector .column-action,sa-internal-media-selector .column-image,sa-internal-media-selector .column-title,sa-media-selector .column-action,sa-media-selector .column-image,sa-media-selector .column-title{float:left}.full-width{width:100%}.full-height{height:100%}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}
1
+ .media-selected-box.cdk-drag-preview,sa-internal-media-selector,sa-media-selector{--sa-media-selector-tile-size:80px;--sa-media-selector-tile-gap:6px;--sa-media-selector-empty-button-size:35px}.media-selected-box.cdk-drag-preview .content-type,sa-internal-media-selector .content-type,sa-media-selector .content-type{margin-bottom:2px}.media-selected-box.cdk-drag-preview .content-type mat-icon,.media-selected-box.cdk-drag-preview .content-type md-icon,sa-internal-media-selector .content-type mat-icon,sa-internal-media-selector .content-type md-icon,sa-media-selector .content-type mat-icon,sa-media-selector .content-type md-icon{margin-right:4px;height:14px;width:14px;min-height:14px;min-width:14px}.media-selected-box.cdk-drag-preview .content-type .content-type-name,sa-internal-media-selector .content-type .content-type-name,sa-media-selector .content-type .content-type-name{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon,.media-selected-box.cdk-drag-preview .no-image-icon md-icon,sa-internal-media-selector .no-image-icon mat-icon,sa-internal-media-selector .no-image-icon md-icon,sa-media-selector .no-image-icon mat-icon,sa-media-selector .no-image-icon md-icon{height:28px;width:28px;min-height:28px;min-width:28px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon svg g,.media-selected-box.cdk-drag-preview .no-image-icon md-icon svg g,sa-internal-media-selector .no-image-icon mat-icon svg g,sa-internal-media-selector .no-image-icon md-icon svg g,sa-media-selector .no-image-icon mat-icon svg g,sa-media-selector .no-image-icon md-icon svg g{fill:#fff}.media-selected-box.cdk-drag-preview .shapeholder,sa-internal-media-selector .shapeholder,sa-media-selector .shapeholder{width:100%;display:block}.media-selected-box.cdk-drag-preview .column-title h3{margin:0 0 5px;font-size:16px}.media-selected-box.cdk-drag-preview,.media-selected-box.cdk-drag-preview .image-draggable,.media-selected-box.cdk-drag-preview .selected-media-item{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);max-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);max-height:var(--sa-media-selector-tile-size);overflow:hidden}.media-selector .cdk-drop-list.cdk-drop-list-dragging .shapeholder{width:80px;display:block}.media-selector-wrapper{background:rgba(255,255,255,.4);margin-top:20px;padding:16px}.media-selector{box-sizing:border-box}.media-selector .selected-container{background:#fff;box-sizing:border-box;padding:16px;border-radius:2px}.media-selector.media-selector--empty .selected-container{min-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .media-selected-container{align-items:center;flex-wrap:nowrap;min-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .library-toggle,.media-selector.media-selector--empty .library-toggle .position-anchor,.media-selector.media-selector--empty .library-toggle>a,.media-selector.media-selector--empty .media-selected-box,.media-selector.media-selector--empty .media-selected-list{flex:0 0 var(--sa-media-selector-empty-button-size);width:var(--sa-media-selector-empty-button-size);min-width:var(--sa-media-selector-empty-button-size);max-width:var(--sa-media-selector-empty-button-size);height:var(--sa-media-selector-empty-button-size);min-height:var(--sa-media-selector-empty-button-size);max-height:var(--sa-media-selector-empty-button-size)}.media-selector.media-selector--empty .library-toggle mat-icon,.media-selector.media-selector--empty .library-toggle md-icon{width:18px;height:18px;min-width:18px;min-height:18px}.media-selector.media-selector--empty .media-selector-empty-instruction{flex:1 1 auto;align-self:center;min-width:0;padding:0 0 0 10px;color:rgba(0,0,0,.48);font-size:12px;line-height:var(--sa-media-selector-empty-button-size);letter-spacing:.02em}.media-selector .media-selected-list.cdk-drop-list-dragging .media-selector .media-selected-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selector .media-selected-container,.media-selector ul.media-selected-container{display:flex;flex-wrap:wrap;gap:var(--sa-media-selector-tile-gap)}.media-selector .media-selected-list,.media-selector ul.media-selected-list{flex:0 0 var(--sa-media-selector-tile-size);width:var(--sa-media-selector-tile-size);max-width:100%;min-height:var(--sa-media-selector-tile-size);display:flex;flex-direction:row}.media-selector .media-selected-list-grid,.media-selector ul.media-selected-list-grid{flex-wrap:wrap}.media-selector .media-selected-list .shapeholder,.media-selector ul.media-selected-list .shapeholder{width:100%;display:block}.media-selector .media-selected-box,.media-selector li.media-selected-box{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);padding:0;color:rgba(0,0,0,.87);display:flex;flex-direction:row;text-align:center;font-size:14px;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.media-selector .media-selected-box-grow,.media-selector li.media-selected-box-grow{flex-grow:1}.media-selector .media-selected-box-grid,.media-selector li.media-selected-box-grid{flex-wrap:wrap}.media-selector .media-selected-box-row,.media-selector li.media-selected-box-row{flex-basis:0}.media-selector .media-selected-box,.media-selector li.media-selected-box{cursor:pointer}.media-selector .media-selected-box.cdk-drag,.media-selector li.media-selected-box.cdk-drag{cursor:move}.media-selector .media-selected-box:active,.media-selector li.media-selected-box:active{opacity:.6}.media-selector .cdk-drop-list{display:flex}.media-selector .image-draggable,.media-selector .library-toggle,.media-selector .library-toggle .position-anchor,.media-selector .library-toggle>a,.media-selector .selected-media-item{box-sizing:border-box;width:var(--sa-media-selector-tile-size);min-width:var(--sa-media-selector-tile-size);max-width:var(--sa-media-selector-tile-size);height:var(--sa-media-selector-tile-size);min-height:var(--sa-media-selector-tile-size);max-height:var(--sa-media-selector-tile-size);border-radius:2px;overflow:hidden}.media-selector .selected-media-item{overflow:visible;position:relative;z-index:1}.media-selector .selected-media-item:focus-within,.media-selector .selected-media-item:hover{z-index:100401}.media-selector .selected-media-item:focus-within .info-hover-container,.media-selector .selected-media-item:hover .info-hover-container{opacity:1;pointer-events:auto;visibility:visible}.media-selector .selected-media-item:focus-within .image-hover-info,.media-selector .selected-media-item:hover .image-hover-info{pointer-events:auto}.media-selector .selected-media-item .image-draggable{overflow:hidden}.media-selector .library-toggle{display:block}.media-selector .library-toggle .position-anchor,.media-selector .library-toggle>a{display:block}.media-selector .library-toggle .library-toggle-icon,.media-selector .library-toggle mat-icon,.media-selector .library-toggle md-icon{color:#ff5b3a;width:24px;height:24px;min-width:24px;min-height:24px}.media-selector .library-toggle ::ng-deep .library-toggle-icon svg,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg g,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg path,.media-selector .library-toggle ::ng-deep .library-toggle-icon svg rect{fill:#ff5b3a}.media-selector .selected-media-item .info-hover-container{left:50%;opacity:0;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-100%);transform-origin:center bottom;transition:opacity 120ms ease,visibility 120ms ease;visibility:hidden;z-index:100400;padding-bottom:8px}.media-selector .selected-media-item .info-hover-container::before{content:"";height:8px;left:0;position:absolute;right:0;top:100%}.media-selector .selected-media-item .image-hover-info{position:relative;pointer-events:none;z-index:1}.media-selector.media-selector--empty .library-toggle .library-toggle-icon,.media-selector.media-selector--empty .library-toggle mat-icon,.media-selector.media-selector--empty .library-toggle md-icon{width:18px;height:18px;min-width:18px;min-height:18px}.cdk-drag-placeholder{opacity:.3;background:rgba(0,0,0,.4);transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder .info-hover-container,.cdk-drag-preview .info-hover-container{display:none}.cdk-drag-placeholder,.cdk-drag-preview{list-style:none}.custom-ghost-placeholder{background:rgba(0,0,0,.4);min-height:60px;transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns,sa-internal-media-selector .image-hover-info .action-btns,sa-media-selector .image-hover-info .action-btns{margin:0 auto;padding-top:2px;width:112px}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns span,sa-internal-media-selector .image-hover-info .action-btns span,sa-media-selector .image-hover-info .action-btns span{display:inline-block;margin:0 2px}.media-selected-box.cdk-drag-preview .image-hover-info .action-btns a,sa-internal-media-selector .image-hover-info .action-btns a,sa-media-selector .image-hover-info .action-btns a{display:inline-block}.media-selected-box.cdk-drag-preview .column-action,.media-selected-box.cdk-drag-preview .column-image,.media-selected-box.cdk-drag-preview .column-title,sa-internal-media-selector .column-action,sa-internal-media-selector .column-image,sa-internal-media-selector .column-title,sa-media-selector .column-action,sa-media-selector .column-image,sa-media-selector .column-title{float:left}.full-width{width:100%}.full-height{height:100%}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}
package/src/media-selector/media-selector.component.scss CHANGED
@@ -312,7 +312,9 @@ sa-internal-media-selector,
312
312
 
313
313
  }
314
314
 
315
- .info-hover-container {
315
+ // The adjacent AngularJS library also uses .media-selector. Its popups must
316
+ // remain interactive; only modern selected items use these hidden defaults.
317
+ .selected-media-item .info-hover-container {
316
318
  left: 50%;
317
319
  opacity: 0;
318
320
  pointer-events: none;
@@ -335,7 +337,7 @@ sa-internal-media-selector,
335
337
  }
336
338
  }
337
339
 
338
- .image-hover-info {
340
+ .selected-media-item .image-hover-info {
339
341
  position: relative;
340
342
  pointer-events: none;
341
343
  z-index: 1;