123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- // On both mobile and .md+ screens
- .uppy-Dashboard-Item-action {
- @include blue-border-focus;
- cursor: pointer;
- color: $gray-500;
- &:hover {
- opacity: 1;
- color: $gray-900;
- }
- [data-uppy-theme="dark"] & {
- @include blue-border-focus--dark;
- color: $gray-300;
- }
- [data-uppy-theme="dark"] &:hover {
- color: $gray-200;
- }
- }
- .uppy-Dashboard-Item-action--remove {
- color: $gray-900;
- opacity: 0.95;
- &:hover {
- opacity: 1;
- color: $black;
- }
- [data-uppy-theme="dark"] & {
- color: $gray-700;
- }
- [data-uppy-theme="dark"] &:hover {
- color: $gray-800;
- }
- }
- // Only for mobile screens
- .uppy-Dashboard:not(.uppy-size--md) {
- // Vertically center Edit&Remove buttons on mobile
- .uppy-Dashboard-Item-actionWrapper {
- display: flex;
- align-items: center;
- }
- // Same inline design for Edit, Remove, and CopyLink buttons
- .uppy-Dashboard-Item-action {
- width: 22px;
- height: 22px;
- padding: 3px;
- margin-left: 3px;
- &:focus{
- border-radius: 3px;
- }
- }
- }
- // Only for screens bigger than .md
- .uppy-size--md {
- // Edit and CopyLink buttons are inline
- .uppy-Dashboard-Item-action--copyLink,
- .uppy-Dashboard-Item-action--edit {
- width: 16px;
- height: 16px;
- padding: 0;
- &:focus {
- border-radius: 3px;
- }
- }
- // Remove button is in the top right corner
- .uppy-Dashboard-Item-action--remove {
- z-index: $zIndex-3;
- position: absolute;
- top: -8px;
- inset-inline-end: -8px;
- width: 18px;
- height: 18px;
- padding: 0;
- &:focus {
- border-radius: 50%;
- }
- }
- }
|