Fixes #16430: Some alignement issues

Normation · Apr 14, 2020 · b53ff65 · b53ff65
1 parent 9e105ec
commit b53ff65
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 8 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-groups.css
@@ -79,3 +79,47 @@
   margin-bottom: 10px;
 }
 
+
+/* === TOGGLE BUTTONS === */
+label.radio-inline {
+  padding: 0;
+  margin: 0 !important;
+}
+label.radio-inline > input {
+  display: none;
+}
+label.radio-inline > span {
+  border: 1px solid #d0d0d0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding: 6px 12px;
+  margin: 0;
+  transition-duration: .2s;
+  min-width: 50px;
+  display: inline-block;
+  color: #555;
+}
+label.radio-inline + label.radio-inline > span {
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin: 0;
+}
+label.radio-inline > input:checked + span {
+  background-color: #3694d1;
+  color: #fff;
+  border-color: #2173a9;
+}
+label.radio-inline:hover > input:checked + span {
+  background-color: #337ab7;
+
+}
+label.radio-inline:hover > span {
+  background-color: #f7f7f7;
+  color: #333;
+}
+.align-radio-generate-input span{
+  vertical-align: initial;
+}
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -233,6 +233,16 @@ pre.json-beautify.toggle:after, .content-wrapper pre.json-beautify.toggle:after{
   background-color: #81a927;
   border-color: #62801e;
 }
+
+.content-wrapper .radio input[type="radio"],
+.content-wrapper .radio-inline input[type="radio"],
+.content-wrapper .checkbox input[type="checkbox"],
+.content-wrapper .checkbox-inline input[type="checkbox"] {
+  margin: 0;
+  left: 0;
+  top: calc(50% - 7px);
+}
+
 /* SPINNERS */
 .content-wrapper .btn i.fa-spin {
   position: absolute;
@@ -2006,7 +2016,8 @@ form.rudder-form .btn-group .btn{
   min-width: 85px;
 }
 form.rudder-form .policymode-group .btn-group .btn,form.rudder-form .btn-group.yesno .btn{
-	font-size:14px;
+  font-size:14px;
+  line-height: 21px;
 }
 form.rudder-form .policymode-group .btn-group .btn .mode{
   color: #3694d1;
@@ -2339,10 +2350,13 @@ form.rudder-form .policymode-group .btn-group .btn.enforce.active{
   text-align: center;
   line-height: 34px;
   position: relative;
-  top: 5px;
+  top: 1px;
   margin-bottom:0;
   background-color: #fff;
 }
+.rudder-form  input[type=checkbox] + .label-radio{
+  top: 5px;
+}
 .rudder-form input[type=radio] + .label-radio{
   border-radius: 50%;
 }

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder.css
@@ -202,24 +202,28 @@ input.deleteNetwork * {
 }
 
 @media screen and (min-width: 993px) {
-  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child{
-    width:30% !important;
+  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child,
+  #nodeReportsGrid tr>th:last-child,#nodeReportsGrid tr>td:last-child{
+    width:350px!important;
     white-space:nowrap;
   }
 }
 @media screen and (max-width: 992px) {
-  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child{
-    width:40% !important;
+  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child,
+  #nodeReportsGrid tr>th:last-child,#nodeReportsGrid tr>td:last-child{
+    width:300px !important;
     white-space:nowrap;
   }
 }
 @media screen and (max-width: 768px) {
-  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child{
+  #reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child,
+  #nodeReportsGrid tr>th:last-child,#nodeReportsGrid tr>td:last-child{
     width:50% !important;
     white-space:nowrap;
   }
 }
-#reportsGrid tr>th:first-child,#reportsGrid tr>td:first-child{
+#reportsGrid tr>th:last-child,#reportsGrid tr>td:last-child,
+#nodeReportsGrid tr>th:last-child,#nodeReportsGrid tr>td:last-child{
   width:auto !important;
   white-space: normal;
 }