From eed27f35ccaf86adf84fda78e501427c7088df4b Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 15 Apr 2020 14:54:25 +0200
Subject: [PATCH] Add bs prefix
---
scss/_tables.scss | 32 ++++++++++++-------------
scss/mixins/_table-variants.scss | 14 +++++------
site/content/docs/4.3/content/tables.md | 8 +++----
3 files changed, 27 insertions(+), 27 deletions(-)
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 4969d89496..6b161434fa 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,14 +3,14 @@
//
.table {
- --table-bg: #{$table-bg};
- --table-accent-bg: transparent;
- --table-striped-color: #{$table-striped-color};
- --table-striped-bg: #{$table-striped-bg};
- --table-active-color: #{$table-active-color};
- --table-active-bg: #{$table-active-bg};
- --table-hover-color: #{$table-hover-color};
- --table-hover-bg: #{$table-hover-bg};
+ --bs-table-bg: #{$table-bg};
+ --bs-table-accent-bg: transparent;
+ --bs-table-striped-color: #{$table-striped-color};
+ --bs-table-striped-bg: #{$table-striped-bg};
+ --bs-table-active-color: #{$table-active-color};
+ --bs-table-active-bg: #{$table-active-bg};
+ --bs-table-hover-color: #{$table-hover-color};
+ --bs-table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
@@ -25,8 +25,8 @@
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding;
- background-color: var(--table-bg);
- background-image: linear-gradient(var(--table-accent-bg), var(--table-accent-bg));
+ background-color: var(--bs-table-bg);
+ background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
border-bottom-width: $table-border-width;
}
@@ -101,8 +101,8 @@
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) {
- --table-accent-bg: var(--table-striped-bg);
- color: var(--table-striped-color);
+ --bs-table-accent-bg: var(--bs-table-striped-bg);
+ color: var(--bs-table-striped-color);
}
}
@@ -111,8 +111,8 @@
// The `.table-active` class can be added to highlight rows or cells
.table-active {
- --table-accent-bg: var(--table-active-bg);
- color: var(--table-active-color);
+ --bs-table-accent-bg: var(--bs-table-active-bg);
+ color: var(--bs-table-active-color);
}
// Hover effect
@@ -121,8 +121,8 @@
.table-hover {
> tbody > tr:hover {
- --table-accent-bg: var(--table-hover-bg);
- color: var(--table-hover-color);
+ --bs-table-accent-bg: var(--bs-table-hover-bg);
+ color: var(--bs-table-hover-color);
}
}
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 9fd066edbc..89f482c353 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -6,13 +6,13 @@
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
- --table-bg: #{$background};
- --table-striped-bg: #{$striped-bg};
- --table-striped-color: #{color-contrast($striped-bg)};
- --table-active-bg: #{$active-bg};
- --table-active-color: #{color-contrast($active-bg)};
- --table-hover-bg: #{$hover-bg};
- --table-hover-color: #{color-contrast($hover-bg)};
+ --bs-table-bg: #{$background};
+ --bs-table-striped-bg: #{$striped-bg};
+ --bs-table-striped-color: #{color-contrast($striped-bg)};
+ --bs-table-active-bg: #{$active-bg};
+ --bs-table-active-color: #{color-contrast($active-bg)};
+ --bs-table-hover-bg: #{$hover-bg};
+ --bs-table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md
index bcf4007205..0f0d2baa4e 100644
--- a/site/content/docs/4.3/content/tables.md
+++ b/site/content/docs/4.3/content/tables.md
@@ -212,10 +212,10 @@ Highlight a table row or cell by adding a `.table-active` class.
For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows) and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
-- First of all we set the background of a table cell with the `--table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add a linear background to the table cells with `background-image: linear-gradient(var(--table-accent-bg), var(--table-accent-bg));`. Since `--table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
-- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--table-accent-bg` is set to a semitransparent color to colorize the background.
-- For each table variant the `--table-accent-bg` color with the most contrast is generated, therefor `.table-primary` has a darkened accent color and `.table-dark` has a lightened accent color.
+- First of all we set the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add a linear background to the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
+- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
+- For each table variant the `--bs-table-accent-bg` color with the most contrast is generated, therefor `.table-primary` has a darkened accent color and `.table-dark` has a lightened accent color.
- The text color and border color are also generated the same way. The colors and border colors are inherited by default.
Behind the scenes it looks like this:
--
GitLab