Reduced size of form submit buttons (on mobile)
authorMarcel Werk <burntime@woltlab.com>
Sun, 1 May 2022 12:42:14 +0000 (14:42 +0200)
committerMarcel Werk <burntime@woltlab.com>
Sun, 1 May 2022 12:42:14 +0000 (14:42 +0200)
wcfsetup/install/files/style/layout/form.scss

index 6c9de433c648978df91b32950e7fa91ee8df5cdd..4d3f1c1898724fb02ce162b3d97103fb11b91ecc 100644 (file)
@@ -113,40 +113,29 @@ select {
                margin-top: 30px;
        }
 
-       @include screen-xs {
-               > .button,
-               > button,
-               > input {
-                       display: block;
-                       padding: 7px 10px;
-                       width: 100%;
+       /* the `margin-bottom` styles are required to deal with buttons wrapping
+          into the next row, also requires some changes to `.dialogFormSubmit`! */
+       margin-bottom: -10px;
 
-                       &:not(:first-child) {
-                               margin-top: 10px;
-                       }
-               }
+       > button,
+       > input[type="button"],
+       > input[type="reset"],
+       > input[type="submit"],
+       > .button,
+       > a.button {
+               margin-bottom: 10px;
        }
 
-       @include screen-sm-up {
-               /* the `margin-bottom` styles are required to deal with buttons wrapping
-                  into the next row, also requires some changes to `.dialogFormSubmit`! */
-               margin-bottom: -10px;
-
-               > button,
-               > input[type="button"],
-               > input[type="reset"],
-               > input[type="submit"],
-               > .button,
-               > a.button {
-                       margin-bottom: 10px;
-               }
-
-               > :not(:first-child) {
-                       margin-left: 10px;
-               }
+       > :not(:first-child) {
+               margin-left: 10px;
        }
 }
 
+.formSubmit.formSubmit.formSubmit + .section {
+       /* Intentional selector to overwrite existing selector. */
+       margin-top: 20px;
+}
+
 .inputAddon {
        display: flex;