Improve icons layout

madeyourday · Mar 6, 2023 · fbc8e06 · fbc8e06
1 parent 54df5ad
commit fbc8e06
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/Resources/public/css/be_main.css b/src/Resources/public/css/be_main.css
@@ -20,21 +20,21 @@
 	background: var(--form-bg, #fff);
 }
 .rip_icons {
-	display: inline-block;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(41px, 1fr));
 	margin-bottom: 20px;
-	padding-right: 3px;
+	padding-right: 1px;
+}
+.rip_icons > * {
+	grid-column: 1 / -1;
 }
 .rip_icons_toolbar {
 	position: relative;
-	margin-bottom: -1px;
+	margin: 0 -1px -1px 0;
 	padding: 2px 2px 2px 10px;
 	border: 1px solid var(--form-border, #aaa);
 	font-family: Verdana, Arial, sans-serif;
-	background: var(--form-bg, #fff);
+	background: var(--form-button, #eee);
 }
 .rip_icons_toolbar input {
 	width: 40%;
@@ -49,8 +49,7 @@
 	font-size: 18px;
 }
 .rip_icons > a {
-	float: left;
-	width: 32px;
+	grid-column: auto;
 	height: 32px;
 	margin: 0 -1px -1px 0;
 	padding: 4px;