Improved flexibleButtonGroup

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 1cedb5fdcdcc2fb38187d137a084477329749506..92d71f37e9ef8f1287939940354445cf87edcc1a 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -122,79 +122,6 @@ textarea {
        }
 }
 
-.flexibleButtonGroup {
-       display: flex;
-       
-       > li {
-               flex: 0 0 auto;
-               
-               &:not(:last-child) {
-                       margin-right: 5px;
-               }
-               
-               > input[type="radio"] {
-                       display: none;
-                       
-                       &:checked + label {
-                               cursor: default;
-                               
-                               > .icon {
-                                       cursor: default !important;
-                               }
-                       }
-                       
-                       &:checked + label,
-                       & + label:hover {
-                               color: #fff;
-                               
-                               &.green {
-                                       background-color: rgb(148, 170, 114);
-                                       //background-color: rgb(92, 184, 92);
-                               }
-                               
-                               &.red {
-                                       background-color: rgb(232, 151, 149);
-                                       //background-color: rgb(217, 83, 79);
-                               }
-                               
-                               &.yellow {
-                                       background-color: rgb(203, 172, 91);
-                                       //background-color: rgb(240, 173, 78);
-                               }
-                               
-                               > .icon {
-                                       color: #fff;
-                               }
-                       }
-               }
-               
-               > label {
-                       background-color: rgb(242, 242, 242);
-                       cursor: pointer;
-                       padding: 5px 10px;
-                       
-                       &.green,
-                       &.green > .icon {
-                               color: rgb(54, 125, 54);
-                       }
-                       
-                       &.red,
-                       &.red > .icon {
-                               color: rgb(201, 48, 44);
-                       }
-                       
-                       &.yellow,
-                       &.yellow > .icon {
-                               color: rgb(236, 151, 31);
-                       }
-                       
-                       > .icon {
-                               cursor: pointer !important;
-                       }
-               }
-       }
-}
-
 .inputAddon {
        display: flex;
        

diff --git a/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss b/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss
new file mode 100644 (file)
index 0000000..7043abc
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss
@@ -0,0 +1,76 @@
+.flexibleButtonGroup {
+       display: flex;
+       
+       > li {
+               display: flex;
+               flex: 0 0 auto;
+               
+               &:not(:last-child) {
+                       margin-right: 5px;
+                       
+                       &.spaceAfter {
+                               margin-right: 20px;
+                       }
+               }
+               
+               > input[type="radio"] {
+                       display: none;
+                       
+                       &:checked + label {
+                               cursor: default;
+                               
+                               > .icon {
+                                       cursor: default !important;
+                               }
+                       }
+               }
+               
+               > a,
+               > label {
+                       background-color: rgb(242, 242, 242);
+                       cursor: pointer;
+                       padding: 5px 10px;
+                       
+                       &.green,
+                       &.green > .icon {
+                               color: rgb(54, 125, 54);
+                       }
+                       
+                       &.red,
+                       &.red > .icon {
+                               color: rgb(201, 48, 44);
+                       }
+                       
+                       &.yellow,
+                       &.yellow > .icon {
+                               color: rgb(236, 151, 31);
+                       }
+                       
+                       > .icon {
+                               cursor: pointer !important;
+                       }
+               }
+               
+               > a.active,
+               > input[type="radio"]:checked + label,
+               > input[type="radio"] + label:hover {
+                       color: #fff;
+                       
+                       &.green {
+                               background-color: rgb(148, 170, 114);
+                       }
+                       
+                       &.red {
+                               background-color: rgb(232, 151, 149);
+                       }
+                       
+                       &.yellow {
+                               background-color: rgb(203, 172, 91);
+                       }
+                       
+                       > .icon {
+                               color: #fff;
+                       }
+               }
+       }
+}