_dashboard.scss 20 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091
  1. .uppy-Dashboard--modal {
  2. z-index: $zIndex-2;
  3. }
  4. .uppy-Dashboard--modal[aria-hidden=true] {
  5. display: none;
  6. }
  7. // Modal open/close animations
  8. @keyframes uppy-Dashboard-fadeIn {
  9. from { opacity: 0; }
  10. to { opacity: 1; }
  11. }
  12. @keyframes uppy-Dashboard-fadeOut {
  13. from { opacity: 1; }
  14. to { opacity: 0; }
  15. }
  16. @keyframes uppy-Dashboard-slideDownAndFadeIn {
  17. from { transform: translate3d(-50%, -70%, 0); opacity: 0; }
  18. to { transform: translate3d(-50%, -50%, 0); opacity: 1; }
  19. }
  20. @keyframes uppy-Dashboard-slideUpFadeOut {
  21. from { transform: translate3d(-50%, -50%, 0); opacity: 1; }
  22. to { transform: translate3d(-50%, -70%, 0); opacity: 0; }
  23. }
  24. .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-inner {
  25. animation: uppy-Dashboard-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, .2, 1);
  26. }
  27. .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-overlay {
  28. animation: uppy-Dashboard-fadeIn 0.3s cubic-bezier(0, 0, .2, 1);
  29. }
  30. .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-inner {
  31. animation: uppy-Dashboard-slideUpFadeOut 0.3s cubic-bezier(0, 0, .2, 1);
  32. }
  33. .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-overlay {
  34. animation: uppy-Dashboard-fadeOut 0.3s cubic-bezier(0, 0, .2, 1);
  35. }
  36. // Added to body to prevent the page from scrolling when Modal is open
  37. .uppy-Dashboard-isFixed {
  38. overflow: hidden;
  39. height: 100vh;
  40. }
  41. .uppy-Dashboard--modal .uppy-Dashboard-overlay {
  42. position: fixed;
  43. top: 0;
  44. left: 0;
  45. right: 0;
  46. bottom: 0;
  47. // background-color: rgba($color-white, 0.8);
  48. background-color: rgba($color-black, 0.5);
  49. z-index: $zIndex-2;
  50. }
  51. .uppy-Dashboard-inner {
  52. position: relative;
  53. background-color: darken($color-white, 2%);
  54. max-width: 100%; /* no !important */
  55. max-height: 100%; /* no !important */
  56. width: 100%; /* no !important */
  57. height: 100%; /* no !important */
  58. min-width: 300px;
  59. min-height: 400px;
  60. outline: none;
  61. border: 1px solid rgba($color-gray, 0.2);
  62. margin-bottom: 30px;
  63. .uppy-Dashboard--modal & {
  64. z-index: $zIndex-3;
  65. }
  66. @media #{$screen-medium} {
  67. width: 750px; /* no !important */
  68. height: 550px; /* no !important */
  69. border-radius: 5px;
  70. }
  71. }
  72. .uppy-Dashboard-poweredBy {
  73. display: block;
  74. font-size: 11px;
  75. color: rgba($color-gray, 0.8);
  76. text-align: right;
  77. text-decoration: none;
  78. padding-top: 8px;
  79. padding-right: 2px;
  80. }
  81. .uppy-Dashboard--modal .uppy-Dashboard-poweredBy {
  82. color: rgba($color-white, 0.7);
  83. }
  84. .uppy-Dashboard-poweredByUppy {
  85. color: $color-gray;
  86. }
  87. .uppy-Dashboard--modal .uppy-Dashboard-poweredByUppy {
  88. color: $color-white;
  89. }
  90. .uppy-Dashboard-poweredByIcon {
  91. stroke: $color-gray;
  92. fill: none;
  93. margin-left: 1px;
  94. margin-right: 1px;
  95. position: relative;
  96. top: 1px;
  97. opacity: 0.9;
  98. }
  99. .uppy-Dashboard--modal .uppy-Dashboard-poweredByIcon {
  100. stroke: transparent;
  101. fill: $color-uppy-pink;
  102. }
  103. .uppy-Dashboard-innerWrap {
  104. display: flex;
  105. flex-direction: column;
  106. height: 100%;
  107. overflow: hidden;
  108. min-height: 300px;
  109. position: relative;
  110. @media #{$screen-medium} {
  111. border-radius: 5px;
  112. }
  113. }
  114. .uppy-Dashboard--modal .uppy-Dashboard-inner {
  115. position: fixed;
  116. top: 0;
  117. left: 0;
  118. border: none;
  119. @media #{$screen-medium} {
  120. top: 50%;
  121. left: 50%;
  122. transform: translate(-50%, -50%);
  123. box-shadow: 0 5px 15px 4px rgba($color-black, 0.15);
  124. }
  125. }
  126. .uppy-Dashboard-close {
  127. @include reset-button;
  128. display: none;
  129. position: absolute;
  130. top: 2px;
  131. right: 8px;
  132. cursor: pointer;
  133. color: rgba($color-asphalt-gray, 0.5);
  134. transition: all 0.3s;
  135. font-size: 23px;
  136. .uppy-Dashboard--wide & {
  137. font-size: 30px;
  138. top: 2px;
  139. right: 8px;
  140. }
  141. .uppy-Dashboard--modal & {
  142. z-index: $zIndex-5;
  143. display: block;
  144. }
  145. }
  146. .uppy-Dashboard-close:hover {
  147. color: $color-cornflower-blue;
  148. }
  149. .uppy-DashboardTabs {
  150. padding-top: 7px;
  151. padding-bottom: 7px;
  152. border-bottom: 1px solid rgba($color-gray, 0.3);
  153. }
  154. .uppy-DashboardTabs[aria-hidden=true] {
  155. display: none;
  156. }
  157. .uppy-DashboardTabs-title {
  158. font-size: 15px;
  159. line-height: 30px;
  160. font-weight: 400;
  161. margin: 0;
  162. padding: 0;
  163. text-align: center;
  164. color: $color-asphalt-gray;
  165. .uppy-Dashboard--wide & {
  166. font-size: 17px;
  167. line-height: 40px;
  168. }
  169. }
  170. .uppy-Dashboard-browse {
  171. @include reset-button;
  172. cursor: pointer;
  173. color: rgba($color-cornflower-blue, 0.9);
  174. }
  175. .uppy-Dashboard-browse:focus {
  176. outline: none;
  177. border-bottom: 2px solid $color-cornflower-blue;
  178. }
  179. .uppy-DashboardTabs-list {
  180. list-style-type: none;
  181. margin: 0;
  182. padding: 0;
  183. display: flex;
  184. justify-content: center;
  185. align-items: center;
  186. }
  187. .uppy-DashboardTab {
  188. width: 70px;
  189. margin: 0;
  190. display: inline-block;
  191. text-align: center;
  192. .uppy-Dashboard--wide & {
  193. width: 75px;
  194. margin: 0 5px;
  195. }
  196. }
  197. .uppy-DashboardTab-btn {
  198. width: 100%;
  199. cursor: pointer;
  200. border: 0;
  201. background-color: transparent;
  202. -webkit-appearance: none;
  203. appearance: none;
  204. // outline: none;
  205. transition: all 0.3s;
  206. color: darken($color-gray, 25%);
  207. }
  208. // .uppy-DashboardTab-btn:focus,
  209. // .uppy-DashboardTab-btn:active,
  210. .uppy-DashboardTab-btn:hover {
  211. color: $color-cornflower-blue;
  212. }
  213. .uppy-DashboardTab-name {
  214. font-size: 8px;
  215. margin-top: 5px;
  216. margin-bottom: 0;
  217. font-weight: 500;
  218. overflow: hidden;
  219. text-overflow: ellipsis;
  220. white-space: nowrap;
  221. .uppy-Dashboard--wide & {
  222. font-size: 9px;
  223. }
  224. }
  225. // On SVG sizing: https://sarasoueidan.com/blog/svg-style-inheritance-and-FOUSVG/
  226. .uppy-DashboardTab .UppyIcon {
  227. width: 18px;
  228. height: 18px;
  229. vertical-align: middle;
  230. .uppy-Dashboard--wide & {
  231. width: 23px;
  232. height: 23px;
  233. }
  234. }
  235. .uppy-Dashboard-input {
  236. width: 0.1px;
  237. height: 0.1px;
  238. opacity: 0;
  239. overflow: hidden;
  240. position: absolute;
  241. z-index: -1;
  242. }
  243. .uppy-DashboardContent-bar {
  244. position: absolute;
  245. top: 0;
  246. left: 0;
  247. display: flex;
  248. align-items: center;
  249. height: 40px;
  250. width: 100%;
  251. border-bottom: 1px solid rgba($color-gray, 0.3);
  252. z-index: $zIndex-4;
  253. background-color: darken($color-white, 4%);
  254. padding: 0 15px;
  255. .uppy-Dashboard--wide & {
  256. height: 50px;
  257. }
  258. }
  259. .uppy-DashboardContent-title {
  260. position: absolute;
  261. top: 0;
  262. left: 0;
  263. right: 0;
  264. text-align: center;
  265. font-size: 14px;
  266. line-height: 40px;
  267. font-weight: normal;
  268. max-width: 170px;
  269. text-overflow: ellipsis;
  270. white-space: nowrap;
  271. overflow-x: hidden;
  272. margin: auto;
  273. .uppy-Dashboard--wide & {
  274. font-size: 16px;
  275. line-height: 50px;
  276. max-width: 300px;
  277. }
  278. }
  279. .uppy-DashboardContent-back {
  280. @include reset-button;
  281. font-size: 14px;
  282. font-weight: 500;
  283. cursor: pointer;
  284. color: $color-cornflower-blue;
  285. .uppy-Dashboard--wide & {
  286. font-size: 15px;
  287. }
  288. }
  289. .uppy-DashboardContent-panel {
  290. position: absolute;
  291. top: 0;
  292. bottom: 0;
  293. left: 0;
  294. right: 0;
  295. transform: translate3d(0, -105%, 0);
  296. transition: transform 0.2s ease-in-out;
  297. background-color: darken($color-white, 4%);
  298. box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
  299. padding-top: 40px;
  300. overflow: hidden;
  301. z-index: $zIndex-4;
  302. .uppy-Dashboard--wide & {
  303. padding-top: 50px;
  304. }
  305. }
  306. .uppy-DashboardContent-panel[aria-hidden=false] {
  307. transform: translate3d(0, 0, 0);
  308. }
  309. // Progress bar placeholder
  310. .uppy-Dashboard-progress {
  311. position: absolute;
  312. bottom: 0;
  313. left: 0;
  314. width: 100%;
  315. height: 12%;
  316. }
  317. .uppy-Dashboard-progressBarContainer.is-active {
  318. z-index: $zIndex-4;
  319. position: absolute;
  320. top: 0;
  321. left: 0;
  322. width: 100%;
  323. height: 100%;
  324. }
  325. .uppy-Dashboard-next {
  326. position: absolute;
  327. top: 0;
  328. left: 0;
  329. width: 100%;
  330. height: 100%;
  331. background: none;
  332. background-color: rgba($color-gray, 0.7);
  333. -webkit-appearance: none;
  334. appearance: none;
  335. border: 0;
  336. z-index: $zIndex-3;
  337. transition: background-color 0.5s;
  338. color: $color-white;
  339. font-family: inherit;
  340. font-size: 14px;
  341. line-height: 1;
  342. padding: 0;
  343. margin: 0;
  344. outline: none;
  345. cursor: not-allowed;
  346. }
  347. .uppy-Dashboard-next.is-active {
  348. cursor: pointer;
  349. background-color: $color-cornflower-blue;
  350. &:hover {
  351. background-color: darken($color-cornflower-blue, 20%);
  352. }
  353. }
  354. .uppy-Dashboard-filesContainer {
  355. @include clearfix;
  356. position: relative;
  357. overflow-y: hidden;
  358. margin: 0;
  359. flex: 1;
  360. }
  361. .uppy-Dashboard-files {
  362. margin: 0;
  363. padding: 0 0 10px 0;
  364. overflow-y: auto;
  365. position: absolute;
  366. top: 0;
  367. left: 0;
  368. right: 0;
  369. bottom: 0;
  370. }
  371. .uppy-Dashboard--wide .uppy-Dashboard-files {
  372. padding: 15px 10px 10px 10px;
  373. }
  374. .uppy-Dashboard.drag .uppy-Dashboard-innerWrap {
  375. background-color: darken($color-white, 20%)
  376. }
  377. .uppy-Dashboard.drag .uppy-Dashboard-files--noFiles {
  378. border-color: darken($color-white, 20%);
  379. }
  380. .uppy-Dashboard-bgIcon {
  381. height: 100%;
  382. display: flex;
  383. align-items: center;
  384. justify-content: center;
  385. }
  386. .uppy-Dashboard.drag .uppy-Dashboard-bgIcon {
  387. opacity: 1;
  388. }
  389. .uppy-Dashboard-dropFilesTitle {
  390. max-width: 460px;
  391. text-align: center;
  392. font-size: 18px;
  393. line-height: 1.45;
  394. font-weight: 400;
  395. color: rgba($color-asphalt-gray, 0.8);
  396. padding: 0 15px;
  397. // margin: 0;
  398. // margin-top: 25px;
  399. .uppy-Dashboard--wide & {
  400. font-size: 24px;
  401. }
  402. }
  403. .uppy-Dashboard-note {
  404. font-size: 13px;
  405. line-height: 1.2;
  406. text-align: center;
  407. // margin-top: 20px;
  408. color: rgba($color-asphalt-gray, 0.7);
  409. position: absolute;
  410. bottom: 20px;
  411. left: 0;
  412. width: 100%;
  413. .uppy-Dashboard--wide & {
  414. font-size: 14px;
  415. }
  416. }
  417. .uppy-DashboardItem {
  418. list-style: none;
  419. margin: 10px 0;
  420. position: relative;
  421. // background-color: $color-white;
  422. display: flex;
  423. align-items: center;
  424. border-bottom: 1px solid lighten($color-gray, 35%);
  425. padding-bottom: 10px;
  426. padding-left: 10px;
  427. .uppy-Dashboard--wide & {
  428. flex-direction: column;
  429. float: left;
  430. width: 140px;
  431. height: 170px;
  432. margin: 5px 15px;
  433. border: 0;
  434. background-color: initial;
  435. border-bottom: none;
  436. padding-bottom: 0;
  437. padding-left: 0;
  438. }
  439. }
  440. .uppy-DashboardItem-preview {
  441. width: 60px;
  442. height: 60px;
  443. border-bottom: 0;
  444. position: relative;
  445. display: flex;
  446. justify-content: center;
  447. align-items: center;
  448. .uppy-Dashboard--wide & {
  449. width: 100%;
  450. height: 100px;
  451. border: 0;
  452. }
  453. }
  454. .uppy-DashboardItem-previewLink {
  455. position: absolute;
  456. left: 0;
  457. top: 0;
  458. right: 0;
  459. bottom: 0;
  460. z-index: $zIndex-3;
  461. }
  462. .uppy-DashboardItem-sourceIcon {
  463. display: inline-block;
  464. vertical-align: middle;
  465. width: 10px;
  466. height: 10px;
  467. color: rgba($color-gray, 0.6);
  468. .uppy-Dashboard--wide & {
  469. width: 10px;
  470. height: 10px;
  471. }
  472. }
  473. .uppy-DashboardItem-previewInnerWrap {
  474. width: 100%;
  475. height: 100%;
  476. overflow: hidden;
  477. position: relative;
  478. display: flex;
  479. justify-content: center;
  480. align-items: center;
  481. flex-direction: column;
  482. box-shadow: 0 0 2px 0 rgba($color-gray, 0.7);
  483. border-radius: 3px;
  484. .uppy-Dashboard--wide & {
  485. // box-shadow: 0 0 2px 0 rgba(175, 175, 175, 0.7);
  486. box-shadow: 0 1px 3px rgba(0,0,0,.2);
  487. border-radius: 3px;
  488. // border-top-left-radius: 6px;
  489. // border-top-right-radius: 6px;
  490. }
  491. }
  492. .uppy-DashboardItem-previewInnerWrap:after {
  493. content: '';
  494. position: absolute;
  495. top: 0;
  496. bottom: 0;
  497. left: 0;
  498. right: 0;
  499. background-color: rgba($color-black, 0.65) /* no !important */;
  500. display: none;
  501. z-index: $zIndex-2;
  502. }
  503. .uppy-DashboardItem-preview img {
  504. width: 100%;
  505. height: 100%;
  506. object-fit: cover;
  507. }
  508. .uppy-DashboardItem-previewIconWrap {
  509. height: 80px;
  510. max-height: 90%;
  511. position: relative;
  512. }
  513. .uppy-DashboardItem-previewIconBg {
  514. width: 100%;
  515. height: 100%;
  516. filter: drop-shadow(rgba($color-black, 0.1) 0px 0px 1px);
  517. }
  518. .uppy-DashboardItem-previewIcon {
  519. width: 18px;
  520. height: 18px;
  521. z-index: $zIndex-1;
  522. position: absolute;
  523. top: 50%;
  524. left: 50%;
  525. transform: translate(-50%, -50%);
  526. .uppy-Dashboard--wide & {
  527. width: 25px;
  528. height: 25px;
  529. }
  530. }
  531. .uppy-DashboardItem-previewType {
  532. position: absolute;
  533. bottom: 14px;
  534. left: 50%;
  535. transform: translate(-50%, 0);
  536. text-transform: uppercase;
  537. font-size: 9px;
  538. letter-spacing: 1px;
  539. color: $color-asphalt-gray;
  540. z-index: $zIndex-1;
  541. user-select: none;
  542. }
  543. .uppy-DashboardItem-info {
  544. // padding: 10px 19px 0 25px;
  545. padding-left: 15px;
  546. position: relative;
  547. max-width: 65%;
  548. .uppy-Dashboard--wide & {
  549. width: 100%;
  550. max-width: 100%;
  551. flex: 1;
  552. padding: 10px 19px 0 3px;
  553. // border-bottom-left-radius: 6px;
  554. // border-bottom-right-radius: 6px;
  555. // border: 1px solid rgba($color-gray, 0.2);
  556. border-top: 0;
  557. }
  558. }
  559. .uppy-DashboardItem-name {
  560. font-size: 11px;
  561. line-height: 1.35;
  562. font-weight: 500;
  563. margin: 0;
  564. padding: 0;
  565. max-height: 28px;
  566. margin-bottom: 3px;
  567. text-overflow: ellipsis;
  568. white-space: nowrap;
  569. overflow: hidden;
  570. .uppy-Dashboard--wide & {
  571. word-break: break-all;
  572. white-space: normal;
  573. }
  574. }
  575. .uppy-DashboardItem-name a {
  576. text-decoration: underline;
  577. color: $color-black;
  578. }
  579. .uppy-DashboardItem-status {
  580. font-size: 11px;
  581. font-weight: normal;
  582. color: $color-gray;
  583. margin-bottom: 4px;
  584. }
  585. .uppy-DashboardItem-statusSize {
  586. display: inline-block;
  587. vertical-align: bottom;
  588. text-transform: uppercase;
  589. margin-right: 3px;
  590. }
  591. .uppy-DashboardItem-edit,
  592. .uppy-DashboardItem-copyLink {
  593. @include reset-button;
  594. font-size: 12px;
  595. text-align: left;
  596. cursor: pointer;
  597. position: absolute;
  598. top: 0;
  599. right: -20px;
  600. .uppy-Dashboard--wide & {
  601. top: 9px;
  602. right: 3px;
  603. }
  604. }
  605. .uppy-DashboardItem-edit .UppyIcon {
  606. width: 11px;
  607. height: 11px;
  608. color: $color-asphalt-gray;
  609. .uppy-Dashboard--wide & {
  610. width: 12px;
  611. height: 12px;
  612. }
  613. }
  614. .uppy-DashboardItem-copyLink .UppyIcon {
  615. width: 11px;
  616. height: 11px;
  617. color: $color-asphalt-gray;
  618. .uppy-Dashboard--wide & {
  619. width: 13px;
  620. height: 13px;
  621. }
  622. }
  623. .uppy-DashboardItem-action {
  624. position: absolute;
  625. top: 23px;
  626. right: 5px;
  627. z-index: $zIndex-3;
  628. .uppy-Dashboard--wide & {
  629. top: -8px;
  630. right: -8px;
  631. }
  632. }
  633. .uppy-DashboardItem-remove {
  634. @include reset-button;
  635. cursor: pointer;
  636. color: lighten($color-asphalt-gray, 20%);
  637. width: 16px;
  638. height: 16px;
  639. .uppy-Dashboard--wide & {
  640. width: 20px;
  641. height: 20px;
  642. color: lighten($color-asphalt-gray, 8%);
  643. }
  644. }
  645. .uppy-DashboardItem.is-inprogress:not(.is-resumable) .uppy-DashboardItem-remove {
  646. display: none;
  647. }
  648. .uppy-DashboardItem-progress {
  649. position: absolute;
  650. top: 50%;
  651. left: 50%;
  652. transform: translate(-50%, -50%);
  653. z-index: $zIndex-3;
  654. color: $color-white;
  655. text-align: center;
  656. width: 120px;
  657. display: none;
  658. transition: all .35 ease;
  659. }
  660. .uppy-DashboardItem.is-complete .uppy-DashboardItem-progress {
  661. transform: initial;
  662. top: -9px;
  663. right: -8px;
  664. left: initial;
  665. width: auto;
  666. }
  667. .uppy-DashboardItem.is-inprogress .uppy-DashboardItem-progress,
  668. .uppy-DashboardItem.is-complete .uppy-DashboardItem-progress,
  669. .uppy-DashboardItem.is-error .uppy-DashboardItem-progress {
  670. display: block;
  671. }
  672. .uppy-DashboardItem-progressIndicator {
  673. @include reset-button;
  674. width: 38px;
  675. height: 38px;
  676. opacity: 0.9;
  677. cursor: pointer;
  678. transition: all .35s ease;
  679. .uppy-Dashboard--wide & {
  680. width: 55px;
  681. height: 55px;
  682. }
  683. }
  684. .uppy-DashboardItem.is-error .uppy-DashboardItem-progressIndicator {
  685. width: 18px;
  686. height: 18px;
  687. .uppy-Dashboard--wide & {
  688. width: 28px;
  689. height: 28px;
  690. }
  691. }
  692. .uppy-DashboardItem.is-complete .uppy-DashboardItem-progressIndicator {
  693. width: 18px;
  694. height: 18px;
  695. opacity: 1;
  696. .uppy-Dashboard--wide & {
  697. width: 25px;
  698. height: 25px;
  699. }
  700. }
  701. .uppy-DashboardItem-progressInfo {
  702. font-size: 9px;
  703. line-height: 1;
  704. font-weight: 500;
  705. height: 10px;
  706. display: none;
  707. position: absolute;
  708. bottom: -10px;
  709. left: 0;
  710. width: 100%;
  711. text-shadow: 0 1px 0 rgba($color-black, 0.3);
  712. .uppy-Dashboard--wide & {
  713. display: block;
  714. }
  715. }
  716. .UppyIcon-progressCircle {
  717. width: 100%;
  718. height: 100%;
  719. }
  720. .uppy-DashboardItem .bg {
  721. stroke: rgba($color-white, 0.4);
  722. opacity: 0;
  723. }
  724. .uppy-DashboardItem .progress {
  725. stroke: $color-white;
  726. transition: stroke-dashoffset .5s ease-out;
  727. opacity: 0;
  728. }
  729. .uppy-DashboardItem .play {
  730. stroke: $color-white;
  731. fill: $color-white;
  732. opacity: 0;
  733. transition: all 0.2s;
  734. display: none;
  735. }
  736. .uppy-DashboardItem .cancel {
  737. fill: $color-white;
  738. opacity: 0;
  739. transition: all 0.2s;
  740. }
  741. .uppy-DashboardItem .pause {
  742. stroke: $color-white;
  743. fill: $color-white;
  744. opacity: 0;
  745. transition: all 0.2s;
  746. display: none;
  747. }
  748. .uppy-DashboardItem.is-error .retry {
  749. fill: $color-white;
  750. }
  751. .uppy-DashboardItem.is-resumable {
  752. .pause, .play { display: block; }
  753. .cancel { display: none; }
  754. }
  755. .UppyIcon-progressCircle .check {
  756. opacity: 0;
  757. fill: $color-white;
  758. transition: all 0.2s;
  759. }
  760. .uppy-DashboardItem.is-inprogress {
  761. .bg, .progress, .pause, .cancel {
  762. opacity: 1;
  763. }
  764. .uppy-DashboardItem-previewInnerWrap:after {
  765. display: block;
  766. }
  767. }
  768. .uppy-DashboardItem.is-error {
  769. .uppy-DashboardItem-previewInnerWrap:after {
  770. display: block;
  771. }
  772. }
  773. .uppy-DashboardItem.is-paused {
  774. .pause {
  775. opacity: 0;
  776. }
  777. .play {
  778. opacity: 1;
  779. }
  780. }
  781. .uppy-DashboardItem.is-complete {
  782. .uppy-DashboardItem-progressIndicator {
  783. cursor: default;
  784. }
  785. .progress {
  786. stroke: $color-green;
  787. fill: $color-green;
  788. opacity: 1;
  789. }
  790. .check {
  791. opacity: 1;
  792. }
  793. }
  794. .uppy-DashboardItem-progressNum {
  795. position: relative;
  796. z-index: $zIndex-2;
  797. }
  798. .uppy-DashboardItem-progressInner {
  799. height: 15px;
  800. background-color: $color-cornflower-blue;
  801. position: absolute;
  802. top: 0;
  803. left: 0;
  804. }
  805. .uppy-Dashboard-actions {
  806. height: 55px;
  807. border-top: 1px solid rgba($color-gray, 0.2);
  808. display: flex;
  809. align-items: center;
  810. padding: 0 15px;
  811. }
  812. .uppy-Dashboard--wide .uppy-Dashboard-actions {
  813. height: 65px;
  814. }
  815. .uppy-Dashboard-actionsBtn {
  816. margin-right: 10px;
  817. }
  818. .uppy-Dashboard-pauseResume .UppyIcon {
  819. width: 100%;
  820. height: 100%;
  821. }
  822. .uppy-Dashboard-upload {
  823. position: relative;
  824. width: 50px;
  825. height: 50px;
  826. .uppy-Dashboard--wide & {
  827. width: 60px;
  828. height: 60px;
  829. }
  830. }
  831. .uppy-Dashboard-upload .UppyIcon {
  832. position: relative;
  833. top: 1px;
  834. width: 50%;
  835. }
  836. .uppy-Dashboard-uploadCount {
  837. position: absolute;
  838. top: -12px;
  839. right: -12px;
  840. background-color: $color-green;
  841. color: $color-white;
  842. border-radius: 50%;
  843. width: 16px;
  844. height: 16px;
  845. line-height: 16px;
  846. font-size: 8px;
  847. .uppy-Dashboard--wide & {
  848. width: 18px;
  849. height: 18px;
  850. line-height: 18px;
  851. font-size: 9px;
  852. }
  853. }
  854. //
  855. // File Card
  856. //
  857. .uppy-DashboardFileCard {
  858. transform: translate3d(0, 0, 0);
  859. transition: transform 0.2s ease-in-out;
  860. width: 100%;
  861. height: 100%;
  862. position: absolute;
  863. top: 0;
  864. left: 0;
  865. right: 0;
  866. bottom: 0;
  867. z-index: $zIndex-4;
  868. box-shadow: 0px 0px 10px 4px rgba($color-black, 0.1);
  869. background-color: $color-white;
  870. }
  871. .uppy-DashboardFileCard[aria-hidden=true] {
  872. transform: translate3d(0, -105%, 0);
  873. }
  874. .uppy-DashboardFileCard-inner {
  875. display: flex;
  876. flex-direction: column;
  877. height: 100%;
  878. padding-top: 40px;
  879. .uppy-Dashboard--wide & {
  880. padding-top: 50px;
  881. }
  882. }
  883. .uppy-DashboardFileCard-preview {
  884. display: flex;
  885. align-items: center;
  886. justify-content: center;
  887. flex-grow: 1;
  888. border-bottom: 1px solid rgba($color-gray, 0.3);
  889. background-color: lighten($color-gray, 40%); /* no !important */
  890. position: relative;
  891. }
  892. .uppy-DashboardFileCard-preview img {
  893. box-shadow: 0px 3px 20px rgba($color-black, 0.15);
  894. max-width: 90%;
  895. max-height: 90%;
  896. object-fit: cover;
  897. border-radius: 3px;
  898. position: absolute;
  899. }
  900. .uppy-DashboardFileCard-info {
  901. padding: 30px 20px 20px 20px;
  902. max-height: 40%;
  903. flex-grow: 1;
  904. overflow-y: auto;
  905. }
  906. .uppy-DashboardFileCard-fieldset {
  907. font-size: 0;
  908. border: 0;
  909. padding: 0;
  910. max-width: 640px;
  911. margin: auto;
  912. margin-bottom: 12px;
  913. }
  914. .uppy-DashboardFileCard-label {
  915. display: inline-block;
  916. vertical-align: middle;
  917. width: 22%;
  918. font-size: 12px;
  919. color: $color-asphalt-gray;
  920. .uppy-Dashboard--wide & {
  921. font-size: 13px;
  922. }
  923. }
  924. .uppy-DashboardFileCard-input {
  925. display: inline-block;
  926. vertical-align: middle;
  927. width: 78%;
  928. }