From 8d75da524d544a7d1fc8604197f2cdb15e0e4c90 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 20 Jul 2022 15:16:17 +0200
Subject: [PATCH] UI: Style <button> elements same as .btn class

---
 web/app/src/assets/base.css | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index c902dd08..64b222fc 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -286,6 +286,12 @@ dl dd:empty {
   margin-left: auto;
 }
 
+.btn-bar .align-center,
+.btn-bar-group .align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .btn-bar-group {
   align-items: center;
   display: flex;
@@ -297,7 +303,9 @@ dl dd:empty {
 }
 
 .btn-bar-group select+.btn,
-.btn-bar-group .btn+select {
+.btn-bar-group select+button,
+.btn-bar-group .btn+select,
+.btn-bar-group button+select {
   margin-left: var(--spacer-sm)
 }
 
@@ -312,7 +320,7 @@ select {
   padding: var(--spacer-xs) var(--spacer-sm);
 }
 
-.btn {
+button, .btn {
   align-items: center;
   background-color: var(--color-button-background);
   border-radius: var(--border-radius);
@@ -325,13 +333,21 @@ select {
   padding: var(--spacer-xs) var(--spacer-sm);
   touch-action: manipulation;
   transition-duration: var(--transition-speed);
-  transition-property: color, background-color, border-color;
+  transition-property: background-color, border-color, color;
+  user-select: none;
 }
 
-.btn-bar .btn+.btn {
+.btn-bar.btn-bar-wide {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.btn-bar .btn+.btn,
+.btn-bar button+button {
   margin-left: var(--spacer-sm);
 }
 
+button[disabled],
 .btn[disabled] {
   background-color: transparent;
   border-color: var(--color-button-background);
@@ -340,11 +356,13 @@ select {
   pointer-events: none;
 }
 
+button:hover:not([disabled]),
 .btn:hover:not([disabled]) {
   transition: all 100ms;
   color: white;
 }
 
+button:focus,
 .btn:focus {
   /* Make sure the outline is clearly visible inside the button. */
   outline-offset: -0.5em;