Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / attachment.scss

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index 1bcdf8b810124743afd192ebb8c6cce8a361b7ba..f4af329b45a3bee1bdb59ad8a1dd2d5584d6f0bc 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -8,31 +8,31 @@
 /* attachment in messages */
 .attachmentThumbnailList > ul {
        margin-bottom: -15px;
-       
+
        @include screen-sm-up {
                margin-right: -10px;
        }
 }
 
 .attachmentThumbnail {
-       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+       box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        margin-bottom: 15px !important;
        position: relative;
-       
+
        @include screen-sm-up {
                margin-right: 10px !important;
        }
-       
+
        @include screen-xs {
                margin-right: 0 !important;
                width: 100%;
        }
-       
+
        .attachmentThumbnailContainer {
                position: relative;
                padding: 2px 2px 0;
        }
-       
+
        .attachmentThumbnailImage {
                align-items: center;
                background-color: #333;
@@ -40,35 +40,35 @@
                justify-content: center;
                overflow: hidden;
                text-align: center;
-               
+
                @include screen-sm-up {
                        height: #{$wcf_option_attachment_thumbnail_height}px;
                        width: #{$wcf_option_attachment_thumbnail_width}px;
                }
-               
+
                @include screen-xs {
                        max-height: #{$wcf_option_attachment_thumbnail_height}px;
                        min-height: 100px;
                }
-               
+
                img {
                        backface-visibility: hidden;
                        max-width: 100%;
-                       opacity: .85;
-                       transform: translate3d(0,0,0);
-                       transition: .2s ease opacity;
+                       opacity: 0.85;
+                       transform: translate3d(0, 0, 0);
+                       transition: 0.2s ease opacity;
                }
-               
+
                .attachmentThumbnailImageScalable {
                        @include screen-xs {
                                width: 100%;
                        }
                }
        }
-       
+
        .attachmentThumbnailData {
                backface-visibility: hidden;
-               background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .5) 100%);
+               background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%);
                bottom: 0;
                left: 2px;
                pointer-events: none;
@@ -77,7 +77,7 @@
                top: 2px;
                transform: translate3d(0, 0, 0);
        }
-       
+
        .attachmentFilename {
                color: #fff;
                bottom: 0;
@@ -86,33 +86,33 @@
                position: absolute;
                text-overflow: ellipsis;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
-               transition: .2s ease opacity;
+               transition: 0.2s ease opacity;
                width: 100%;
                white-space: nowrap;
-               
+
                @include wcfFontHeadline;
        }
-       
+
        .attachmentMetaData {
                color: $wcfContentDimmedText;
                padding: 10px 15px;
-               
+
                li:not(:last-child) {
                        margin-right: 10px;
                }
-               
+
                .icon {
                        color: inherit;
                }
        }
-       
+
        &:hover {
                .attachmentThumbnailImage {
                        img {
                                opacity: 1;
                        }
                }
-               
+
                .attachmentFilename {
                        opacity: 0;
                }
@@ -121,57 +121,60 @@
 
 /* attachments tab in editor */
 .formAttachmentContent {
-       > .formAttachmentList {
+       .formAttachmentList {
                display: flex;
                flex-wrap: wrap;
                margin-left: 0 !important;
-               
+
                > li {
                        display: flex;
                        flex: 0 0 100%;
                        margin-bottom: 20px;
-                       
+
                        > .attachmentTinyThumbnail {
                                border-bottom-width: 0;
                        }
                }
        }
-       
+
        @include screen-md-up {
-               > .formAttachmentList {
+               .formAttachmentList {
                        margin-right: -20px;
-                       
+
                        > li {
                                /* Safari sometimes trips over fractional values, causing two
                                   items to be exactly 1 pixel wider than the available space.
                                   Reserving 21px covers all sort of rounding errors, without
                                   being visually noticeable */
-                               flex: 0 0 calc(50% - 21px);
-                               max-width: calc(50% - 21px); /* IE fix */
+                               /* The `flex` shorthand fails in IE11 if `calc()` is used. */
+                               flex-grow: 0;
+                               flex-shrink: 0;
+                               flex-basis: calc(50% - 21px);
                                margin-right: 20px;
                        }
                }
        }
-       
+
        > dl {
                margin-top: 0 !important;
-               
-               > dd > div {
-                       align-items: center;
-                       display: flex;
-                       
-                       > .button {
-                               flex: 0 0 auto;
-                               
-                               &:not(:first-child) {
-                                       margin-left: 10px;
-                               }
-                       }
-                       
-                       & + small {
-                               margin-top: 10px !important;
+       }
+
+       > dl > dd > div,
+       .formAttachmentButtons {
+               align-items: center;
+               display: flex;
+
+               > .button {
+                       flex: 0 0 auto;
+
+                       &:not(:first-child) {
+                               margin-left: 10px;
                        }
                }
+
+               & + small {
+                       margin-top: 10px !important;
+               }
        }
 }
 
@@ -185,15 +188,16 @@
 .embeddedImageLink {
        border: 1px solid $wcfContentBorderInner;
        display: inline-block;
+       margin: 2px 0;
        max-width: 100%;
        min-height: 48px;
        padding: 2px;
        position: relative;
-       
+
        &::after {
-               background-color: rgba(0, 0, 0, .8);
+               background-color: rgba(0, 0, 0, 0.8);
                border-radius: 2px;
-               box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
+               box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
                bottom: 5px;
                color: white;
                content: $fa-var-search;
@@ -202,17 +206,17 @@
                font-size: 21px;
                font-style: normal;
                font-weight: normal;
-               opacity: .5;
+               opacity: 0.5;
                padding: 2px 8px;
                position: absolute;
                right: 5px;
                text-decoration: none;
-               transition: .2s ease opacity;
+               transition: 0.2s ease opacity;
        }
-       
+
        &:hover {
                &::after {
-                       opacity: .8;
+                       opacity: 0.8;
                }
        }
 }