summary statistics is now bigger and icons fits it

skrub-data · Dec 20, 2024 · c2d9c0e · c2d9c0e
1 parent 03747fa
commit c2d9c0e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 30 deletions.
diff --git a/skrub/_reporting/_data/templates/_variables.css b/skrub/_reporting/_data/templates/_variables.css
@@ -96,7 +96,7 @@
 
     /* buttons */
     --color-background-button-primary: #212121;
-    --color-background-button-primary-hover: #272727;
+    --color-background-button-primary-hover: #313131;
     --color-background-button-primary-active: #353535;
     --color-background-button-secondary: transparent;
     --color-background-button-secondary-hover: #457b9d;

diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css
@@ -264,10 +264,6 @@ dd {
   padding-top: var(--spacing-s);
 }
 
-#report svg {
-  max-width: 100%;
-}
-
 .report-header {
   font-size: var(--font-size-l);
   padding-block-start: var(--spacing-s);

diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
@@ -14,7 +14,7 @@
 .box {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     border: var(--border-s) solid var(--color-border-primary);
     padding: 0;
     max-width: 100%;
@@ -33,7 +33,7 @@
     padding: var(--spacing-s);
     border: none;
     position: relative;
-    min-width: 20px;
+    min-width: 24px;
 }
 
 .copybutton-left {
@@ -82,8 +82,3 @@
 [data-shows-placeholder] {
     color: var(--color-background-secondary);
 }
-
-.table-bar .box {
-    flex-grow: 1;
-    max-width: 100%;
-}
diff --git a/skrub/_reporting/_data/templates/summary-statistics.css b/skrub/_reporting/_data/templates/summary-statistics.css
@@ -62,44 +62,40 @@
 
 #report th.sort-button-group-wrapper {
   --btn-width: 22px;
-  --btn-group-width: calc(var(--btn-width) * 2);
+
   position: relative;
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
-  padding-right: calc(var(--spacing-m) + var(--btn-group-width));
+  padding: var(--spacing-s) calc((var(--btn-width) * 2) + var(--spacing-m)) 0 var(--spacing-s);
+  text-align: left;
 }
 
 .sort-button-group {
+  display: flex;
   position: absolute;
   top: 0;
-  bottom: var(--border-s);
-  right: calc(-1 * var(--btn-group-width));
-  left: 100%;
-  transform: translateX(calc(-1 * var(--btn-group-width)));
-  display: flex;
-  gap: 0;
-  padding: 0;
+  right: 0;
 }
 
 .sort-button {
-  margin: 0;
   box-sizing: border-box;
   height: 100%;
-  flex-grow: 1;
+  margin: 0;
+  padding: 0;
   border-radius: 0;
   border: var(--border-s) solid var(--color-border-primary);
   background-color: var(--color-background-button-primary);
   color: var(--color-text-secondary);
-  padding: var(--spacing-s);
   transition: background-color var(--animation-duration) var(--animation-easing);
 }
 
-.sort-button-group > .sort-button:focus-visible {
-  z-index: 2;
+.sort-button > svg {
+  --inner-size: calc(var(--btn-width) - (var(--border-s) * 3));
+
+  height: var(--inner-size);
+  width: var(--inner-size);
 }
 
-.sort-button-group > .sort-button ~ .sort-button {
-  margin-left: calc(-1 * var(--border-s));
+.sort-button-group > .sort-button:focus-visible {
+  z-index: 2;
 }
 
 .sort-button:hover {