From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 9 Mar 2016 15:35:48 +0000 (+0100)
Subject: Improved flexibleButtonGroup
X-Git-Tag: 3.0.0_Beta_1~2030^2~46
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=435f14c75b4ca5bb15fdebe50dc27f602d7b8701;p=GitHub%2FWoltLab%2FWCF.git

Improved flexibleButtonGroup
---

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 1cedb5fdcd..92d71f37e9 100644
--- 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
index 0000000000..7043abc3a3
--- /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;
+			}
+		}
+	}
+}