aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/assets/scss/_buttons.scss')
-rw-r--r--vendor/twbs/bootstrap/site/assets/scss/_buttons.scss80
1 files changed, 35 insertions, 45 deletions
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
index b266d3e88..13bd6e48a 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
@@ -2,54 +2,44 @@
//
// Custom buttons for the docs.
+// scss-docs-start btn-css-vars-example
.btn-bd-primary {
- font-weight: 600;
- color: $white;
- background-color: $bd-purple-bright;
- border-color: $bd-purple-bright;
-
- &:hover,
- &:active {
- color: $white;
- background-color: shade-color($bd-purple-bright, 20%);
- border-color: shade-color($bd-purple-bright, 20%);
- }
-
- &:focus {
- box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
- }
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet);
+ --bs-btn-border-color: var(--bd-violet);
+ --bs-btn-border-radius: .5rem;
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+ --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+ --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}
-
-.btn-bd-download {
- font-weight: 600;
- color: $bd-download;
- border-color: $bd-download;
-
- &:hover,
- &:active {
- color: $bd-dark;
- background-color: $bd-download;
- border-color: $bd-download;
- }
-
- &:focus {
- box-shadow: 0 0 0 3px rgba($bd-download, .25);
- }
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bd-accent);
+ --bs-btn-border-color: var(--bd-accent);
+ --bs-btn-hover-color: var(--bd-dark);
+ --bs-btn-hover-bg: var(--bd-accent);
+ --bs-btn-hover-border-color: var(--bd-accent);
+ --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: var(--bs-btn-hover-bg);
+ --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
}
.btn-bd-light {
- color: $gray-600;
- border-color: $gray-300;
-
- .show > &,
- &:hover,
- &:active {
- color: $bd-purple-bright;
- background-color: $white;
- border-color: $bd-purple-bright;
- }
-
- &:focus {
- box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
- }
+ --bs-btn-color: var(--bs-gray-600);
+ --bs-btn-border-color: var(--bs-gray-400);
+ --bs-btn-hover-color: var(--bd-violet);
+ --bs-btn-hover-border-color: var(--bd-violet);
+ --bs-btn-active-color: var(--bd-violet);
+ --bs-btn-active-bg: var(--bs-white);
+ --bs-btn-active-border-color: var(--bd-violet);
+ --bs-btn-focus-border-color: var(--bd-violet);
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}