Use prettier for SCSS (#3895)
[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / bbcode / inlineCode.scss
index 7e34235116316adbfbfc1b0b927674adaeadd9d2..dec857b632f74a02068627e6a0d645c4c125946f 100644 (file)
@@ -1,13 +1,13 @@
 .inlineCode, /* deprecated, legacy class */
 kbd {
        /* do not use inline-block, it breaks arrow key navigation in Firefox and Internet Explorer 11 */
-       
+
        /* update: `inline` styling breaks even more things, in particular the caret position is way off */
        /* this reverts 8d381dc61e8183adcb770457f9fba25c29c00bd2 */
-       
+
        /* new update: `display: inline` + `box-decoration-break` deliver the proper visual appearance,
                       and the `::after` element in the editor is used to fix the caret position at the end */
-       
+
        background-color: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(196, 196, 196, 1) !important;
        border-radius: 2px;
@@ -15,7 +15,7 @@ kbd {
        -webkit-box-decoration-break: clone;
        color: rgba(68, 68, 68, 1) !important;
        display: inline;
-       font-family: Consolas, 'Courier New', monospace;
+       font-family: Consolas, "Courier New", monospace;
        font-style: normal;
        font-weight: normal;
        margin: 0 2px;
@@ -25,6 +25,13 @@ kbd {
        vertical-align: middle;
        word-break: break-all;
        word-wrap: break-word;
+
+       @include screen-sm-down {
+               /* Reduce the padding to prevent pixel rounding errors in the font rendering that
+                  can cause the page to display a horizontal scrollbar when <kbd> appears at the
+                  edge of the content container. */
+               padding: 0 3px;
+       }
 }
 
 @supports (-webkit-overflow-scrolling: touch) {