diff --git a/css/bootstrap.css b/css/bootstrap.css
index 831de14..5d1a852 100644
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
@@ -43,3 +43,4 @@
@import "carousel.css";
@import "hero-unit.css";
@import "utilities.css";
+@import "caret.css";
diff --git a/css/button-groups.css b/css/button-groups.css
index 065bad4..cd65b2b 100644
--- a/css/button-groups.css
+++ b/css/button-groups.css
@@ -68,6 +68,13 @@
border-bottom-right-radius: var(--base-border-radius);
}
+/* Ensure proper alignment of dropdown-toggle button */
+.btn-group > .dropdown-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
/* Reset corners for large buttons */
.btn-group > .btn.large:first-child {
margin-left: 0;
@@ -87,6 +94,7 @@
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
+ position: relative; /* Ensure z-index works properly */
}
/* On active and open, don't show outline */
@@ -148,23 +156,18 @@
/* Reposition the caret */
.btn .caret {
- margin-top: 8px;
+ display: inline-block;
+ vertical-align: middle;
margin-left: 0;
}
/* Carets in other button sizes */
.btn-large .caret {
- margin-top: 6px;
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
-.btn-mini .caret,
-.btn-small .caret {
- margin-top: 8px;
-}
-
/* Upside down carets for .dropup */
.dropup .btn-large .caret {
border-bottom-width: 5px;
diff --git a/css/buttons.css b/css/buttons.css
index 8ac926c..8f94523 100644
--- a/css/buttons.css
+++ b/css/buttons.css
@@ -27,8 +27,39 @@
.btn:focus {
color: var(--gray-dark);
text-decoration: none;
- background-position: 0 -15px;
- transition: background-position 0.1s linear;
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-background) 80%, black), color-mix(in srgb, var(--btn-background-highlight) 80%, black));
+ transition: background-image 0.2s ease;
+}
+
+/* Specific hover states for colored buttons */
+.btn-primary:hover, .btn-primary:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-primary-background) 80%, black), color-mix(in srgb, var(--btn-primary-background-highlight) 80%, black));
+}
+
+.btn-warning:hover, .btn-warning:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-warning-background) 80%, black), color-mix(in srgb, var(--btn-warning-background-highlight) 80%, black));
+}
+
+.btn-danger:hover, .btn-danger:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-danger-background) 80%, black), color-mix(in srgb, var(--btn-danger-background-highlight) 80%, black));
+}
+
+.btn-success:hover, .btn-success:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-success-background) 80%, black), color-mix(in srgb, var(--btn-success-background-highlight) 80%, black));
+}
+
+.btn-info:hover, .btn-info:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-info-background) 80%, black), color-mix(in srgb, var(--btn-info-background-highlight) 80%, black));
+}
+
+.btn-inverse:hover, .btn-inverse:focus {
+ color: var(--white);
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-inverse-background) 80%, black), color-mix(in srgb, var(--btn-inverse-background-highlight) 80%, black));
}
/* Focus state for keyboard and accessibility */
diff --git a/css/caret.css b/css/caret.css
new file mode 100644
index 0000000..2c1e2e8
--- /dev/null
+++ b/css/caret.css
@@ -0,0 +1,22 @@
+/*
+ Caret
+ ========================================
+*/
+
+/* Define the caret appearance */
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ vertical-align: middle;
+ border-top: 4px solid;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ content: "";
+}
+
+/* Upside down caret for dropup */
+.dropup .caret {
+ border-top: 0;
+ border-bottom: 4px solid;
+}
diff --git a/css/tests/buttons.html b/css/tests/buttons.html
index 8cb85e9..fc442d1 100644
--- a/css/tests/buttons.html
+++ b/css/tests/buttons.html
@@ -1,127 +1,133 @@
-
-
- Buttons · Bootstrap
-
-
-
-
-
-
-
-
+
+
+ Buttons · Bootstrap
+
+
+
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-