Checkboxify yesno-fields, but use CSS to show them as switches in Redbasic

5 files changed, 17 insertions, 9 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index 12287ba4f..5d9bb6e90 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -79,3 +79,7 @@ nav .navbar-toggle {
 code {
 	white-space: normal;
 }
+
+/* Bootstrap assumes that checkboxes are on the left of labels, while it's usually the opposite in Red */
+.field.checkbox input[type="checkbox"] { margin-left: 0px; }
+.field.checkbox label { padding-left: 0px; font-weight: 700}
diff --git a/view/css/mod_connect.css b/view/css/mod_connect.css
index d1a46ec48..da1265c52 100644
--- a/view/css/mod_connect.css
+++ b/view/css/mod_connect.css
@@ -6,6 +6,7 @@
 	margin-top: 25px;
 }
 
-#sellpage-edit label{
+/* first-of-type needed to style switches */
+#sellpage-edit label:first-of-type {
 	width: 300px;
-}
\ No newline at end of file
+}
diff --git a/view/css/mod_group.css b/view/css/mod_group.css
index cc5f15843..cd6b7acc7 100644
--- a/view/css/mod_group.css
+++ b/view/css/mod_group.css
@@ -3,7 +3,8 @@
 	margin-top: 30px;
 }
 
-#group-edit-form label {
+/* first-of-type needed to style switches */
+#group-edit-form label:first-of-type {
 	float: left;
 	width: 300px;
 }
diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css
index b03023e21..7b0c8e7ed 100644
--- a/view/css/mod_settings.css
+++ b/view/css/mod_settings.css
@@ -28,7 +28,8 @@ ul#settings-privacy-macros {
 	margin-bottom: 10px;
 }
 
-#settings-permissions-wrapper .field label{
+/* first-of-type needed to be able to style switches */
+#settings-permissions-wrapper .field label:first-of-type {
 	width: 350px;
 }
 
@@ -41,7 +42,8 @@ ul#settings-privacy-macros {
 	margin-bottom: 45px;
 }
 
-#settings-notifications label {
+/* first-of-type needed to be able to style switches */
+#settings-notifications .field label:first-of-type {
 	margin-left: 20px;
 	width: 330px;
 }
@@ -63,4 +65,4 @@ ul#settings-privacy-macros {
 #settings-channel-menu-end {
 	clear: both;
 	margin-bottom: 15px;
-}
\ No newline at end of file
+}
diff --git a/view/css/mod_thing.css b/view/css/mod_thing.css
index 125230b38..9c1eb2b21 100644
--- a/view/css/mod_thing.css
+++ b/view/css/mod_thing.css
@@ -4,8 +4,8 @@
 	margin-left: 0;
 }
 
-
-.thing-label, .field label, .thing-verb-label, .thing-profile-label{
+/* first-of-type needed to style switches */
+.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{
 	float: left;
 	width: 350px;
 }
@@ -18,4 +18,4 @@
 
 .thing-field-end {
 	clear: both;
-}
\ No newline at end of file
+}