MediaFolder.js
5 years ago
MediaItem.js
5 years ago
MediaPopup.js
1 month ago
MediaPopup.scss
1 month ago
MediaPopupTemplate.js
1 month ago
MediaPopupTemplate.scss
1 month ago
chunk-upload.js
5 years ago
MediaPopupTemplate.scss
88 lines
| 1 | .presto-media-popup-template { |
| 2 | .components-modal__header { |
| 3 | border-bottom: 1px solid #ddd; |
| 4 | } |
| 5 | |
| 6 | .components-modal__content { |
| 7 | display: flex; |
| 8 | flex-direction: column; |
| 9 | padding: 0; |
| 10 | |
| 11 | > :not(.components-modal__header) { |
| 12 | flex: 1; |
| 13 | } |
| 14 | } |
| 15 | |
| 16 | &__grid { |
| 17 | @media screen and (min-width: 780px) { |
| 18 | height: 100%; |
| 19 | display: grid; |
| 20 | flex: 1; |
| 21 | max-height: calc(100vh - 68px); |
| 22 | grid-template-columns: 1fr 1fr minmax(0px, 267px); |
| 23 | grid-template-rows: minmax(50px, auto) 1fr 60px; |
| 24 | grid-template-areas: |
| 25 | "header header sidebar" |
| 26 | "main main sidebar" |
| 27 | "footer footer footer"; |
| 28 | overflow: hidden; |
| 29 | } |
| 30 | } |
| 31 | |
| 32 | &__header { |
| 33 | grid-area: header; |
| 34 | padding: 24px 24px 12px 24px; |
| 35 | } |
| 36 | |
| 37 | &__header-row { |
| 38 | display: flex; |
| 39 | align-items: center; |
| 40 | |
| 41 | > * { |
| 42 | margin-right: 10px; |
| 43 | } |
| 44 | } |
| 45 | |
| 46 | &__main { |
| 47 | grid-area: main; |
| 48 | display: grid; |
| 49 | overflow: hidden; |
| 50 | |
| 51 | .components-drop-zone__provider { |
| 52 | overflow: hidden; |
| 53 | display: grid; |
| 54 | } |
| 55 | |
| 56 | .components-drop-zone { |
| 57 | z-index: 99; |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | &__sidebar { |
| 62 | display: none; |
| 63 | grid-area: sidebar; |
| 64 | padding: 0 16px; |
| 65 | z-index: 75; |
| 66 | background: #f3f3f3; |
| 67 | border-left: 1px solid #ddd; |
| 68 | overflow: auto; |
| 69 | |
| 70 | @media screen and (min-width: 780px) { |
| 71 | display: block; |
| 72 | } |
| 73 | |
| 74 | .sidebar-content { |
| 75 | padding: 16px 0; |
| 76 | } |
| 77 | } |
| 78 | |
| 79 | &__footer { |
| 80 | grid-area: footer; |
| 81 | border-top: 1px solid #ddd; |
| 82 | display: flex; |
| 83 | align-items: center; |
| 84 | justify-content: flex-end; |
| 85 | padding: 8px; |
| 86 | } |
| 87 | } |
| 88 |