diff --git a/.mvn/wrapper/maven-wrapper.jar b/.mvn/wrapper/maven-wrapper.jar
index bf82ff0..cb28b0e 100644
Binary files a/.mvn/wrapper/maven-wrapper.jar and b/.mvn/wrapper/maven-wrapper.jar differ
diff --git a/.mvn/wrapper/maven-wrapper.properties b/.mvn/wrapper/maven-wrapper.properties
index ca5ab4b..281ebbf 100644
--- a/.mvn/wrapper/maven-wrapper.properties
+++ b/.mvn/wrapper/maven-wrapper.properties
@@ -14,5 +14,5 @@
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.8.7/apache-maven-3.8.7-bin.zip
-wrapperUrl=https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.1/maven-wrapper-3.1.1.jar
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.1/apache-maven-3.9.1-bin.zip
+wrapperUrl=https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar
diff --git a/.springjavaformatconfig b/.springjavaformatconfig
deleted file mode 100644
index 1264378..0000000
--- a/.springjavaformatconfig
+++ /dev/null
@@ -1 +0,0 @@
-java-baseline=8
\ No newline at end of file
diff --git a/build.gradle b/build.gradle
index d0a34bf..c19b5f7 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,14 +1,14 @@
plugins {
id 'java'
- id 'org.springframework.boot' version '3.0.4'
+ id 'org.springframework.boot' version '3.1.0'
id 'io.spring.dependency-management' version '1.1.0'
- id 'org.graalvm.buildtools.native' version '0.9.20'
+ id 'org.graalvm.buildtools.native' version '0.9.22'
}
apply plugin: 'java'
group = 'org.springframework.samples'
-version = '3.0.0'
+version = '3.1.0'
sourceCompatibility = '17'
repositories {
diff --git a/docker-compose.yml b/docker-compose.yml
index 39601f1..9c34d2a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,7 +14,7 @@ services:
volumes:
- "./conf.d:/etc/mysql/conf.d:ro"
postgres:
- image: postgres:15.2
+ image: postgres:15.3
ports:
- "5432:5432"
environment:
diff --git a/mvnw b/mvnw
index 8a8fb22..66df285 100755
--- a/mvnw
+++ b/mvnw
@@ -19,7 +19,7 @@
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
-# Maven Start Up Batch script
+# Apache Maven Wrapper startup batch script, version 3.2.0
#
# Required ENV vars:
# ------------------
@@ -27,7 +27,6 @@
#
# Optional ENV vars
# -----------------
-# M2_HOME - location of maven2's installed home dir
# MAVEN_OPTS - parameters passed to the Java VM when running Maven
# e.g. to debug Maven itself, use
# set MAVEN_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=y,address=8000
@@ -54,7 +53,7 @@ fi
cygwin=false;
darwin=false;
mingw=false
-case "`uname`" in
+case "$(uname)" in
CYGWIN*) cygwin=true ;;
MINGW*) mingw=true;;
Darwin*) darwin=true
@@ -62,9 +61,9 @@ case "`uname`" in
# See https://developer.apple.com/library/mac/qa/qa1170/_index.html
if [ -z "$JAVA_HOME" ]; then
if [ -x "/usr/libexec/java_home" ]; then
- export JAVA_HOME="`/usr/libexec/java_home`"
+ JAVA_HOME="$(/usr/libexec/java_home)"; export JAVA_HOME
else
- export JAVA_HOME="/Library/Java/Home"
+ JAVA_HOME="/Library/Java/Home"; export JAVA_HOME
fi
fi
;;
@@ -72,68 +71,38 @@ esac
if [ -z "$JAVA_HOME" ] ; then
if [ -r /etc/gentoo-release ] ; then
- JAVA_HOME=`java-config --jre-home`
+ JAVA_HOME=$(java-config --jre-home)
fi
fi
-if [ -z "$M2_HOME" ] ; then
- ## resolve links - $0 may be a link to maven's home
- PRG="$0"
-
- # need this for relative symlinks
- while [ -h "$PRG" ] ; do
- ls=`ls -ld "$PRG"`
- link=`expr "$ls" : '.*-> \(.*\)$'`
- if expr "$link" : '/.*' > /dev/null; then
- PRG="$link"
- else
- PRG="`dirname "$PRG"`/$link"
- fi
- done
-
- saveddir=`pwd`
-
- M2_HOME=`dirname "$PRG"`/..
-
- # make it fully qualified
- M2_HOME=`cd "$M2_HOME" && pwd`
-
- cd "$saveddir"
- # echo Using m2 at $M2_HOME
-fi
-
# For Cygwin, ensure paths are in UNIX format before anything is touched
if $cygwin ; then
- [ -n "$M2_HOME" ] &&
- M2_HOME=`cygpath --unix "$M2_HOME"`
[ -n "$JAVA_HOME" ] &&
- JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+ JAVA_HOME=$(cygpath --unix "$JAVA_HOME")
[ -n "$CLASSPATH" ] &&
- CLASSPATH=`cygpath --path --unix "$CLASSPATH"`
+ CLASSPATH=$(cygpath --path --unix "$CLASSPATH")
fi
# For Mingw, ensure paths are in UNIX format before anything is touched
if $mingw ; then
- [ -n "$M2_HOME" ] &&
- M2_HOME="`(cd "$M2_HOME"; pwd)`"
- [ -n "$JAVA_HOME" ] &&
- JAVA_HOME="`(cd "$JAVA_HOME"; pwd)`"
+ [ -n "$JAVA_HOME" ] && [ -d "$JAVA_HOME" ] &&
+ JAVA_HOME="$(cd "$JAVA_HOME" || (echo "cannot cd into $JAVA_HOME."; exit 1); pwd)"
fi
if [ -z "$JAVA_HOME" ]; then
- javaExecutable="`which javac`"
- if [ -n "$javaExecutable" ] && ! [ "`expr \"$javaExecutable\" : '\([^ ]*\)'`" = "no" ]; then
+ javaExecutable="$(which javac)"
+ if [ -n "$javaExecutable" ] && ! [ "$(expr "\"$javaExecutable\"" : '\([^ ]*\)')" = "no" ]; then
# readlink(1) is not available as standard on Solaris 10.
- readLink=`which readlink`
- if [ ! `expr "$readLink" : '\([^ ]*\)'` = "no" ]; then
+ readLink=$(which readlink)
+ if [ ! "$(expr "$readLink" : '\([^ ]*\)')" = "no" ]; then
if $darwin ; then
- javaHome="`dirname \"$javaExecutable\"`"
- javaExecutable="`cd \"$javaHome\" && pwd -P`/javac"
+ javaHome="$(dirname "\"$javaExecutable\"")"
+ javaExecutable="$(cd "\"$javaHome\"" && pwd -P)/javac"
else
- javaExecutable="`readlink -f \"$javaExecutable\"`"
+ javaExecutable="$(readlink -f "\"$javaExecutable\"")"
fi
- javaHome="`dirname \"$javaExecutable\"`"
- javaHome=`expr "$javaHome" : '\(.*\)/bin'`
+ javaHome="$(dirname "\"$javaExecutable\"")"
+ javaHome=$(expr "$javaHome" : '\(.*\)/bin')
JAVA_HOME="$javaHome"
export JAVA_HOME
fi
@@ -149,7 +118,7 @@ if [ -z "$JAVACMD" ] ; then
JAVACMD="$JAVA_HOME/bin/java"
fi
else
- JAVACMD="`\\unset -f command; \\command -v java`"
+ JAVACMD="$(\unset -f command 2>/dev/null; \command -v java)"
fi
fi
@@ -163,12 +132,9 @@ if [ -z "$JAVA_HOME" ] ; then
echo "Warning: JAVA_HOME environment variable is not set."
fi
-CLASSWORLDS_LAUNCHER=org.codehaus.plexus.classworlds.launcher.Launcher
-
# traverses directory structure from process work directory to filesystem root
# first directory with .mvn subdirectory is considered project base directory
find_maven_basedir() {
-
if [ -z "$1" ]
then
echo "Path not specified to find_maven_basedir"
@@ -184,96 +150,99 @@ find_maven_basedir() {
fi
# workaround for JBEAP-8937 (on Solaris 10/Sparc)
if [ -d "${wdir}" ]; then
- wdir=`cd "$wdir/.."; pwd`
+ wdir=$(cd "$wdir/.." || exit 1; pwd)
fi
# end of workaround
done
- echo "${basedir}"
+ printf '%s' "$(cd "$basedir" || exit 1; pwd)"
}
# concatenates all lines of a file
concat_lines() {
if [ -f "$1" ]; then
- echo "$(tr -s '\n' ' ' < "$1")"
+ # Remove \r in case we run on Windows within Git Bash
+ # and check out the repository with auto CRLF management
+ # enabled. Otherwise, we may read lines that are delimited with
+ # \r\n and produce $'-Xarg\r' rather than -Xarg due to word
+ # splitting rules.
+ tr -s '\r\n' ' ' < "$1"
fi
}
-BASE_DIR=`find_maven_basedir "$(pwd)"`
+log() {
+ if [ "$MVNW_VERBOSE" = true ]; then
+ printf '%s\n' "$1"
+ fi
+}
+
+BASE_DIR=$(find_maven_basedir "$(dirname "$0")")
if [ -z "$BASE_DIR" ]; then
exit 1;
fi
+MAVEN_PROJECTBASEDIR=${MAVEN_BASEDIR:-"$BASE_DIR"}; export MAVEN_PROJECTBASEDIR
+log "$MAVEN_PROJECTBASEDIR"
+
##########################################################################################
# Extension to allow automatically downloading the maven-wrapper.jar from Maven-central
# This allows using the maven wrapper in projects that prohibit checking in binary data.
##########################################################################################
-if [ -r "$BASE_DIR/.mvn/wrapper/maven-wrapper.jar" ]; then
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Found .mvn/wrapper/maven-wrapper.jar"
- fi
+wrapperJarPath="$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.jar"
+if [ -r "$wrapperJarPath" ]; then
+ log "Found $wrapperJarPath"
else
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Couldn't find .mvn/wrapper/maven-wrapper.jar, downloading it ..."
- fi
+ log "Couldn't find $wrapperJarPath, downloading it ..."
+
if [ -n "$MVNW_REPOURL" ]; then
- jarUrl="$MVNW_REPOURL/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+ wrapperUrl="$MVNW_REPOURL/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar"
else
- jarUrl="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+ wrapperUrl="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar"
fi
- while IFS="=" read key value; do
- case "$key" in (wrapperUrl) jarUrl="$value"; break ;;
+ while IFS="=" read -r key value; do
+ # Remove '\r' from value to allow usage on windows as IFS does not consider '\r' as a separator ( considers space, tab, new line ('\n'), and custom '=' )
+ safeValue=$(echo "$value" | tr -d '\r')
+ case "$key" in (wrapperUrl) wrapperUrl="$safeValue"; break ;;
esac
- done < "$BASE_DIR/.mvn/wrapper/maven-wrapper.properties"
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Downloading from: $jarUrl"
- fi
- wrapperJarPath="$BASE_DIR/.mvn/wrapper/maven-wrapper.jar"
+ done < "$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.properties"
+ log "Downloading from: $wrapperUrl"
+
if $cygwin; then
- wrapperJarPath=`cygpath --path --windows "$wrapperJarPath"`
+ wrapperJarPath=$(cygpath --path --windows "$wrapperJarPath")
fi
if command -v wget > /dev/null; then
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Found wget ... using wget"
- fi
+ log "Found wget ... using wget"
+ [ "$MVNW_VERBOSE" = true ] && QUIET="" || QUIET="--quiet"
if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
- wget "$jarUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
+ wget $QUIET "$wrapperUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
else
- wget --http-user=$MVNW_USERNAME --http-password=$MVNW_PASSWORD "$jarUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
+ wget $QUIET --http-user="$MVNW_USERNAME" --http-password="$MVNW_PASSWORD" "$wrapperUrl" -O "$wrapperJarPath" || rm -f "$wrapperJarPath"
fi
elif command -v curl > /dev/null; then
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Found curl ... using curl"
- fi
+ log "Found curl ... using curl"
+ [ "$MVNW_VERBOSE" = true ] && QUIET="" || QUIET="--silent"
if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
- curl -o "$wrapperJarPath" "$jarUrl" -f
+ curl $QUIET -o "$wrapperJarPath" "$wrapperUrl" -f -L || rm -f "$wrapperJarPath"
else
- curl --user $MVNW_USERNAME:$MVNW_PASSWORD -o "$wrapperJarPath" "$jarUrl" -f
+ curl $QUIET --user "$MVNW_USERNAME:$MVNW_PASSWORD" -o "$wrapperJarPath" "$wrapperUrl" -f -L || rm -f "$wrapperJarPath"
fi
-
else
- if [ "$MVNW_VERBOSE" = true ]; then
- echo "Falling back to using Java to download"
- fi
- javaClass="$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.java"
+ log "Falling back to using Java to download"
+ javaSource="$MAVEN_PROJECTBASEDIR/.mvn/wrapper/MavenWrapperDownloader.java"
+ javaClass="$MAVEN_PROJECTBASEDIR/.mvn/wrapper/MavenWrapperDownloader.class"
# For Cygwin, switch paths to Windows format before running javac
if $cygwin; then
- javaClass=`cygpath --path --windows "$javaClass"`
+ javaSource=$(cygpath --path --windows "$javaSource")
+ javaClass=$(cygpath --path --windows "$javaClass")
fi
- if [ -e "$javaClass" ]; then
- if [ ! -e "$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.class" ]; then
- if [ "$MVNW_VERBOSE" = true ]; then
- echo " - Compiling MavenWrapperDownloader.java ..."
- fi
- # Compiling the Java class
- ("$JAVA_HOME/bin/javac" "$javaClass")
+ if [ -e "$javaSource" ]; then
+ if [ ! -e "$javaClass" ]; then
+ log " - Compiling MavenWrapperDownloader.java ..."
+ ("$JAVA_HOME/bin/javac" "$javaSource")
fi
- if [ -e "$BASE_DIR/.mvn/wrapper/MavenWrapperDownloader.class" ]; then
- # Running the downloader
- if [ "$MVNW_VERBOSE" = true ]; then
- echo " - Running MavenWrapperDownloader.java ..."
- fi
- ("$JAVA_HOME/bin/java" -cp .mvn/wrapper MavenWrapperDownloader "$MAVEN_PROJECTBASEDIR")
+ if [ -e "$javaClass" ]; then
+ log " - Running MavenWrapperDownloader.java ..."
+ ("$JAVA_HOME/bin/java" -cp .mvn/wrapper MavenWrapperDownloader "$wrapperUrl" "$wrapperJarPath") || rm -f "$wrapperJarPath"
fi
fi
fi
@@ -282,35 +251,58 @@ fi
# End of extension
##########################################################################################
-export MAVEN_PROJECTBASEDIR=${MAVEN_BASEDIR:-"$BASE_DIR"}
-if [ "$MVNW_VERBOSE" = true ]; then
- echo $MAVEN_PROJECTBASEDIR
+# If specified, validate the SHA-256 sum of the Maven wrapper jar file
+wrapperSha256Sum=""
+while IFS="=" read -r key value; do
+ case "$key" in (wrapperSha256Sum) wrapperSha256Sum=$value; break ;;
+ esac
+done < "$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.properties"
+if [ -n "$wrapperSha256Sum" ]; then
+ wrapperSha256Result=false
+ if command -v sha256sum > /dev/null; then
+ if echo "$wrapperSha256Sum $wrapperJarPath" | sha256sum -c > /dev/null 2>&1; then
+ wrapperSha256Result=true
+ fi
+ elif command -v shasum > /dev/null; then
+ if echo "$wrapperSha256Sum $wrapperJarPath" | shasum -a 256 -c > /dev/null 2>&1; then
+ wrapperSha256Result=true
+ fi
+ else
+ echo "Checksum validation was requested but neither 'sha256sum' or 'shasum' are available."
+ echo "Please install either command, or disable validation by removing 'wrapperSha256Sum' from your maven-wrapper.properties."
+ exit 1
+ fi
+ if [ $wrapperSha256Result = false ]; then
+ echo "Error: Failed to validate Maven wrapper SHA-256, your Maven wrapper might be compromised." >&2
+ echo "Investigate or delete $wrapperJarPath to attempt a clean download." >&2
+ echo "If you updated your Maven version, you need to update the specified wrapperSha256Sum property." >&2
+ exit 1
+ fi
fi
+
MAVEN_OPTS="$(concat_lines "$MAVEN_PROJECTBASEDIR/.mvn/jvm.config") $MAVEN_OPTS"
# For Cygwin, switch paths to Windows format before running java
if $cygwin; then
- [ -n "$M2_HOME" ] &&
- M2_HOME=`cygpath --path --windows "$M2_HOME"`
[ -n "$JAVA_HOME" ] &&
- JAVA_HOME=`cygpath --path --windows "$JAVA_HOME"`
+ JAVA_HOME=$(cygpath --path --windows "$JAVA_HOME")
[ -n "$CLASSPATH" ] &&
- CLASSPATH=`cygpath --path --windows "$CLASSPATH"`
+ CLASSPATH=$(cygpath --path --windows "$CLASSPATH")
[ -n "$MAVEN_PROJECTBASEDIR" ] &&
- MAVEN_PROJECTBASEDIR=`cygpath --path --windows "$MAVEN_PROJECTBASEDIR"`
+ MAVEN_PROJECTBASEDIR=$(cygpath --path --windows "$MAVEN_PROJECTBASEDIR")
fi
# Provide a "standardized" way to retrieve the CLI args that will
# work with both Windows and non-Windows executions.
-MAVEN_CMD_LINE_ARGS="$MAVEN_CONFIG $@"
+MAVEN_CMD_LINE_ARGS="$MAVEN_CONFIG $*"
export MAVEN_CMD_LINE_ARGS
WRAPPER_LAUNCHER=org.apache.maven.wrapper.MavenWrapperMain
+# shellcheck disable=SC2086 # safe args
exec "$JAVACMD" \
$MAVEN_OPTS \
$MAVEN_DEBUG_OPTS \
-classpath "$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.jar" \
- "-Dmaven.home=${M2_HOME}" \
"-Dmaven.multiModuleProjectDirectory=${MAVEN_PROJECTBASEDIR}" \
${WRAPPER_LAUNCHER} $MAVEN_CONFIG "$@"
diff --git a/mvnw.cmd b/mvnw.cmd
index 1d8ab01..95ba6f5 100644
--- a/mvnw.cmd
+++ b/mvnw.cmd
@@ -18,13 +18,12 @@
@REM ----------------------------------------------------------------------------
@REM ----------------------------------------------------------------------------
-@REM Maven Start Up Batch script
+@REM Apache Maven Wrapper startup batch script, version 3.2.0
@REM
@REM Required ENV vars:
@REM JAVA_HOME - location of a JDK home dir
@REM
@REM Optional ENV vars
-@REM M2_HOME - location of maven2's installed home dir
@REM MAVEN_BATCH_ECHO - set to 'on' to enable the echoing of the batch commands
@REM MAVEN_BATCH_PAUSE - set to 'on' to wait for a keystroke before ending
@REM MAVEN_OPTS - parameters passed to the Java VM when running Maven
@@ -120,10 +119,10 @@ SET MAVEN_JAVA_EXE="%JAVA_HOME%\bin\java.exe"
set WRAPPER_JAR="%MAVEN_PROJECTBASEDIR%\.mvn\wrapper\maven-wrapper.jar"
set WRAPPER_LAUNCHER=org.apache.maven.wrapper.MavenWrapperMain
-set DOWNLOAD_URL="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+set WRAPPER_URL="https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar"
FOR /F "usebackq tokens=1,2 delims==" %%A IN ("%MAVEN_PROJECTBASEDIR%\.mvn\wrapper\maven-wrapper.properties") DO (
- IF "%%A"=="wrapperUrl" SET DOWNLOAD_URL=%%B
+ IF "%%A"=="wrapperUrl" SET WRAPPER_URL=%%B
)
@REM Extension to allow automatically downloading the maven-wrapper.jar from Maven-central
@@ -134,11 +133,11 @@ if exist %WRAPPER_JAR% (
)
) else (
if not "%MVNW_REPOURL%" == "" (
- SET DOWNLOAD_URL="%MVNW_REPOURL%/org/apache/maven/wrapper/maven-wrapper/3.1.0/maven-wrapper-3.1.0.jar"
+ SET WRAPPER_URL="%MVNW_REPOURL%/org/apache/maven/wrapper/maven-wrapper/3.2.0/maven-wrapper-3.2.0.jar"
)
if "%MVNW_VERBOSE%" == "true" (
echo Couldn't find %WRAPPER_JAR%, downloading it ...
- echo Downloading from: %DOWNLOAD_URL%
+ echo Downloading from: %WRAPPER_URL%
)
powershell -Command "&{"^
@@ -146,7 +145,7 @@ if exist %WRAPPER_JAR% (
"if (-not ([string]::IsNullOrEmpty('%MVNW_USERNAME%') -and [string]::IsNullOrEmpty('%MVNW_PASSWORD%'))) {"^
"$webclient.Credentials = new-object System.Net.NetworkCredential('%MVNW_USERNAME%', '%MVNW_PASSWORD%');"^
"}"^
- "[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; $webclient.DownloadFile('%DOWNLOAD_URL%', '%WRAPPER_JAR%')"^
+ "[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; $webclient.DownloadFile('%WRAPPER_URL%', '%WRAPPER_JAR%')"^
"}"
if "%MVNW_VERBOSE%" == "true" (
echo Finished downloading %WRAPPER_JAR%
@@ -154,6 +153,24 @@ if exist %WRAPPER_JAR% (
)
@REM End of extension
+@REM If specified, validate the SHA-256 sum of the Maven wrapper jar file
+SET WRAPPER_SHA_256_SUM=""
+FOR /F "usebackq tokens=1,2 delims==" %%A IN ("%MAVEN_PROJECTBASEDIR%\.mvn\wrapper\maven-wrapper.properties") DO (
+ IF "%%A"=="wrapperSha256Sum" SET WRAPPER_SHA_256_SUM=%%B
+)
+IF NOT %WRAPPER_SHA_256_SUM%=="" (
+ powershell -Command "&{"^
+ "$hash = (Get-FileHash \"%WRAPPER_JAR%\" -Algorithm SHA256).Hash.ToLower();"^
+ "If('%WRAPPER_SHA_256_SUM%' -ne $hash){"^
+ " Write-Output 'Error: Failed to validate Maven wrapper SHA-256, your Maven wrapper might be compromised.';"^
+ " Write-Output 'Investigate or delete %WRAPPER_JAR% to attempt a clean download.';"^
+ " Write-Output 'If you updated your Maven version, you need to update the specified wrapperSha256Sum property.';"^
+ " exit 1;"^
+ "}"^
+ "}"
+ if ERRORLEVEL 1 goto error
+)
+
@REM Provide a "standardized" way to retrieve the CLI args that will
@REM work with both Windows and non-Windows executions.
set MAVEN_CMD_LINE_ARGS=%*
diff --git a/pom.xml b/pom.xml
index 2631c6f..3f330a9 100644
--- a/pom.xml
+++ b/pom.xml
@@ -3,12 +3,12 @@
4.0.0
org.springframework.samples
spring-petclinic
- 3.0.0-SNAPSHOT
+ 3.1.0-SNAPSHOT
org.springframework.boot
spring-boot-starter-parent
- 3.0.6
+ 3.1.0
petclinic
@@ -25,9 +25,13 @@
5.2.3
4.7.0
- 0.8.8
+ 10.11.0
+ 0.8.10
+ 0.2.29
+ 1.0.0
+ 3.2.2
0.0.11
- 0.0.38
+ 0.0.39
@@ -154,12 +158,12 @@
org.apache.maven.plugins
maven-checkstyle-plugin
- 3.2.1
+ ${maven-checkstyle.version}
com.puppycrawl.tools
checkstyle
- 10.8.1
+ ${checkstyle.version}
io.spring.nohttp
@@ -174,7 +178,6 @@
src/checkstyle/nohttp-checkstyle.xml
src/checkstyle/nohttp-checkstyle-suppressions.xml
- UTF-8
${basedir}
**/*
**/.git/**/*,**/.idea/**/*,**/target/**/,**/.flattened-pom.xml,**/*.class
@@ -203,8 +206,8 @@
${project.build.sourceEncoding}
${project.reporting.outputEncoding}
- ${maven.compiler.source}
- ${maven.compiler.target}
+ ${java.version}
+ ${java.version}
@@ -322,7 +325,7 @@
com.gitlab.haynes
libsass-maven-plugin
- 0.2.29
+ ${libsass.version}
generate-resources
@@ -356,7 +359,7 @@
org.eclipse.m2e
lifecycle-mapping
- 1.0.0
+ ${lifecycle-mapping}
diff --git a/src/main/resources/static/resources/css/petclinic.css b/src/main/resources/static/resources/css/petclinic.css
index 38b04a3..2e0fed8 100644
--- a/src/main/resources/static/resources/css/petclinic.css
+++ b/src/main/resources/static/resources/css/petclinic.css
@@ -12,11 +12,11 @@
* limitations under the License.
*/
/*!
- * Bootstrap v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
+ * Bootstrap v5.2.3 (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
@@ -28,6 +28,7 @@
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
+ --bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
@@ -60,7 +61,7 @@
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
- --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
@@ -68,7 +69,21 @@
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
- --bs-body-bg: #fff; }
+ --bs-body-bg: #fff;
+ --bs-border-width: 1px;
+ --bs-border-style: solid;
+ --bs-border-color: #dee2e6;
+ --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+ --bs-border-radius: 0.375rem;
+ --bs-border-radius-sm: 0.25rem;
+ --bs-border-radius-lg: 0.5rem;
+ --bs-border-radius-xl: 1rem;
+ --bs-border-radius-2xl: 2rem;
+ --bs-border-radius-pill: 50rem;
+ --bs-link-color: #0d6efd;
+ --bs-link-hover-color: #0a58ca;
+ --bs-code-color: #d63384;
+ --bs-highlight-bg: #fff3cd; }
*,
*::before,
@@ -94,13 +109,10 @@ body {
hr {
margin: 1rem 0;
color: inherit;
- background-color: currentColor;
border: 0;
+ border-top: 1px solid;
opacity: 0.25; }
-hr:not([size]) {
- height: 1px; }
-
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
@@ -137,8 +149,7 @@ p {
margin-top: 0;
margin-bottom: 1rem; }
-abbr[title],
-abbr[data-bs-original-title] {
+abbr[title] {
text-decoration: underline dotted;
cursor: help;
text-decoration-skip-ink: none; }
@@ -182,8 +193,8 @@ small, .small {
font-size: 0.875em; }
mark, .mark {
- padding: 0.2em;
- background-color: #fcf8e3; }
+ padding: 0.1875em;
+ background-color: var(--bs-highlight-bg); }
sub,
sup {
@@ -199,10 +210,10 @@ sup {
top: -.5em; }
a {
- color: #0d6efd;
+ color: var(--bs-link-color);
text-decoration: underline; }
a:hover {
- color: #0a58ca; }
+ color: var(--bs-link-hover-color); }
a:not([href]):not([class]), a:not([href]):not([class]):hover {
color: inherit;
@@ -213,9 +224,7 @@ code,
kbd,
samp {
font-family: var(--bs-font-monospace);
- font-size: 1em;
- direction: ltr /* rtl:ignore */;
- unicode-bidi: bidi-override; }
+ font-size: 1em; }
pre {
display: block;
@@ -230,21 +239,20 @@ pre {
code {
font-size: 0.875em;
- color: #d63384;
+ color: var(--bs-code-color);
word-wrap: break-word; }
a > code {
color: inherit; }
kbd {
- padding: 0.2rem 0.4rem;
+ padding: 0.1875rem 0.375rem;
font-size: 0.875em;
- color: #fff;
- background-color: #212529;
- border-radius: 0.2rem; }
+ color: var(--bs-body-bg);
+ background-color: var(--bs-body-color);
+ border-radius: 0.25rem; }
kbd kbd {
padding: 0;
- font-size: 1em;
- font-weight: 700; }
+ font-size: 1em; }
figure {
margin: 0 0 1rem; }
@@ -308,8 +316,8 @@ select {
select:disabled {
opacity: 1; }
-[list]::-webkit-calendar-picker-indicator {
- display: none; }
+[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+ display: none !important; }
button,
[type="button"],
@@ -379,9 +387,6 @@ legend {
padding: 0; }
::file-selector-button {
- font: inherit; }
-
-::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button; }
@@ -485,8 +490,8 @@ progress {
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
- border: 1px solid #dee2e6;
- border-radius: 0.25rem;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 0.375rem;
max-width: 100%;
height: auto; }
@@ -508,9 +513,11 @@ progress {
.container-lg,
.container-md,
.container-sm {
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
width: 100%;
- padding-right: var(--bs-gutter-x, 0.75rem);
- padding-left: var(--bs-gutter-x, 0.75rem);
+ padding-right: calc(var(--bs-gutter-x) * .5);
+ padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto; }
@@ -1335,19 +1342,21 @@ progress {
--bs-gutter-y: 3rem; } }
.table {
+ --bs-table-color: var(--bs-body-color);
--bs-table-bg: transparent;
+ --bs-table-border-color: var(--bs-border-color);
--bs-table-accent-bg: transparent;
- --bs-table-striped-color: #212529;
+ --bs-table-striped-color: var(--bs-body-color);
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
- --bs-table-active-color: #212529;
+ --bs-table-active-color: var(--bs-body-color);
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
- --bs-table-hover-color: #212529;
+ --bs-table-hover-color: var(--bs-body-color);
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%;
margin-bottom: 1rem;
- color: #212529;
+ color: var(--bs-table-color);
vertical-align: top;
- border-color: #dee2e6; }
+ border-color: var(--bs-table-border-color); }
.table > :not(caption) > * > * {
padding: 0.5rem 0.5rem;
background-color: var(--bs-table-bg);
@@ -1357,8 +1366,9 @@ progress {
vertical-align: inherit; }
.table > thead {
vertical-align: bottom; }
- .table > :not(:first-child) {
- border-top: 2px solid currentColor; }
+
+.table-group-divider {
+ border-top: 2px solid currentcolor; }
.caption-top {
caption-side: top; }
@@ -1381,6 +1391,10 @@ progress {
--bs-table-accent-bg: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color); }
+.table-striped-columns > :not(caption) > tr > :nth-child(even) {
+ --bs-table-accent-bg: var(--bs-table-striped-bg);
+ color: var(--bs-table-striped-color); }
+
.table-active {
--bs-table-accent-bg: var(--bs-table-active-bg);
color: var(--bs-table-active-color); }
@@ -1390,92 +1404,108 @@ progress {
color: var(--bs-table-hover-color); }
.table-primary {
+ --bs-table-color: #000;
--bs-table-bg: #cfe2ff;
+ --bs-table-border-color: #bacbe6;
--bs-table-striped-bg: #c5d7f2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bacbe6;
--bs-table-active-color: #000;
--bs-table-hover-bg: #bfd1ec;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #bacbe6; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-secondary {
+ --bs-table-color: #000;
--bs-table-bg: #e2e3e5;
+ --bs-table-border-color: #cbccce;
--bs-table-striped-bg: #d7d8da;
--bs-table-striped-color: #000;
--bs-table-active-bg: #cbccce;
--bs-table-active-color: #000;
--bs-table-hover-bg: #d1d2d4;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #cbccce; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-success {
+ --bs-table-color: #000;
--bs-table-bg: #d1e7dd;
+ --bs-table-border-color: #bcd0c7;
--bs-table-striped-bg: #c7dbd2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bcd0c7;
--bs-table-active-color: #000;
--bs-table-hover-bg: #c1d6cc;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #bcd0c7; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-info {
+ --bs-table-color: #000;
--bs-table-bg: #cff4fc;
+ --bs-table-border-color: #badce3;
--bs-table-striped-bg: #c5e8ef;
--bs-table-striped-color: #000;
--bs-table-active-bg: #badce3;
--bs-table-active-color: #000;
--bs-table-hover-bg: #bfe2e9;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #badce3; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-warning {
+ --bs-table-color: #000;
--bs-table-bg: #fff3cd;
+ --bs-table-border-color: #e6dbb9;
--bs-table-striped-bg: #f2e7c3;
--bs-table-striped-color: #000;
--bs-table-active-bg: #e6dbb9;
--bs-table-active-color: #000;
--bs-table-hover-bg: #ece1be;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #e6dbb9; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-danger {
+ --bs-table-color: #000;
--bs-table-bg: #f8d7da;
+ --bs-table-border-color: #dfc2c4;
--bs-table-striped-bg: #eccccf;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfc2c4;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e5c7ca;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #dfc2c4; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-light {
+ --bs-table-color: #000;
--bs-table-bg: #f8f9fa;
+ --bs-table-border-color: #dfe0e1;
--bs-table-striped-bg: #ecedee;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfe0e1;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e5e6e7;
--bs-table-hover-color: #000;
- color: #000;
- border-color: #dfe0e1; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-dark {
+ --bs-table-color: #fff;
--bs-table-bg: #212529;
+ --bs-table-border-color: #373b3e;
--bs-table-striped-bg: #2c3034;
--bs-table-striped-color: #fff;
--bs-table-active-bg: #373b3e;
--bs-table-active-color: #fff;
--bs-table-hover-bg: #323539;
--bs-table-hover-color: #fff;
- color: #fff;
- border-color: #373b3e; }
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color); }
.table-responsive {
overflow-x: auto;
@@ -1543,7 +1573,7 @@ progress {
background-clip: padding-box;
border: 1px solid #ced4da;
appearance: none;
- border-radius: 0.25rem;
+ border-radius: 0.375rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.form-control {
@@ -1563,7 +1593,7 @@ progress {
.form-control::placeholder {
color: #6c757d;
opacity: 1; }
- .form-control:disabled, .form-control[readonly] {
+ .form-control:disabled {
background-color: #e9ecef;
opacity: 1; }
.form-control::file-selector-button {
@@ -1584,24 +1614,6 @@ progress {
transition: none; } }
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: #dde0e3; }
- .form-control::-webkit-file-upload-button {
- padding: 0.375rem 0.75rem;
- margin: -0.375rem -0.75rem;
- margin-inline-end: 0.75rem;
- color: #212529;
- background-color: #e9ecef;
- pointer-events: none;
- border-color: inherit;
- border-style: solid;
- border-width: 0;
- border-inline-end-width: 1px;
- border-radius: 0;
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
- @media (prefers-reduced-motion: reduce) {
- .form-control::-webkit-file-upload-button {
- transition: none; } }
- .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
- background-color: #dde0e3; }
.form-control-plaintext {
display: block;
@@ -1613,6 +1625,8 @@ progress {
background-color: transparent;
border: solid transparent;
border-width: 1px 0; }
+ .form-control-plaintext:focus {
+ outline: 0; }
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0; }
@@ -1621,29 +1635,21 @@ progress {
min-height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
- border-radius: 0.2rem; }
+ border-radius: 0.25rem; }
.form-control-sm::file-selector-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
margin-inline-end: 0.5rem; }
- .form-control-sm::-webkit-file-upload-button {
- padding: 0.25rem 0.5rem;
- margin: -0.25rem -0.5rem;
- margin-inline-end: 0.5rem; }
.form-control-lg {
min-height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
- border-radius: 0.3rem; }
+ border-radius: 0.5rem; }
.form-control-lg::file-selector-button {
padding: 0.5rem 1rem;
margin: -0.5rem -1rem;
margin-inline-end: 1rem; }
- .form-control-lg::-webkit-file-upload-button {
- padding: 0.5rem 1rem;
- margin: -0.5rem -1rem;
- margin-inline-end: 1rem; }
textarea.form-control {
min-height: calc(1.5em + 0.75rem + 2px); }
@@ -1656,16 +1662,19 @@ textarea.form-control-lg {
.form-control-color {
width: 3rem;
- height: auto;
+ height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem; }
.form-control-color:not(:disabled):not([readonly]) {
cursor: pointer; }
.form-control-color::-moz-color-swatch {
- height: 1.5em;
- border-radius: 0.25rem; }
+ border: 0 !important;
+ border-radius: 0.375rem; }
.form-control-color::-webkit-color-swatch {
- height: 1.5em;
- border-radius: 0.25rem; }
+ border-radius: 0.375rem; }
+ .form-control-color.form-control-sm {
+ height: calc(1.5em + 0.5rem + 2px); }
+ .form-control-color.form-control-lg {
+ height: calc(1.5em + 1rem + 2px); }
.form-select {
display: block;
@@ -1677,12 +1686,12 @@ textarea.form-control-lg {
line-height: 1.5;
color: #212529;
background-color: #fff;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: 1px solid #ced4da;
- border-radius: 0.25rem;
+ border-radius: 0.375rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
appearance: none; }
@media (prefers-reduced-motion: reduce) {
@@ -1706,14 +1715,14 @@ textarea.form-control-lg {
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
- border-radius: 0.2rem; }
+ border-radius: 0.25rem; }
.form-select-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.25rem;
- border-radius: 0.3rem; }
+ border-radius: 0.5rem; }
.form-check {
display: block;
@@ -1724,6 +1733,15 @@ textarea.form-control-lg {
float: left;
margin-left: -1.5em; }
+.form-check-reverse {
+ padding-right: 1.5em;
+ padding-left: 0;
+ text-align: right; }
+ .form-check-reverse .form-check-input {
+ float: right;
+ margin-right: -1.5em;
+ margin-left: 0; }
+
.form-check-input {
width: 1em;
height: 1em;
@@ -1735,7 +1753,7 @@ textarea.form-control-lg {
background-size: contain;
border: 1px solid rgba(0, 0, 0, 0.25);
appearance: none;
- color-adjust: exact; }
+ print-color-adjust: exact; }
.form-check-input[type="checkbox"] {
border-radius: 0.25em; }
.form-check-input[type="radio"] {
@@ -1750,7 +1768,7 @@ textarea.form-control-lg {
background-color: #0d6efd;
border-color: #0d6efd; }
.form-check-input[type="checkbox"]:checked {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input[type="radio"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input[type="checkbox"]:indeterminate {
@@ -1762,6 +1780,7 @@ textarea.form-control-lg {
filter: none;
opacity: 0.5; }
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
+ cursor: default;
opacity: 0.5; }
.form-switch {
@@ -1781,6 +1800,12 @@ textarea.form-control-lg {
.form-switch .form-check-input:checked {
background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
+ .form-switch.form-check-reverse {
+ padding-right: 2.5em;
+ padding-left: 0; }
+ .form-switch.form-check-reverse .form-check-input {
+ margin-right: -2.5em;
+ margin-left: 0; }
.form-check-inline {
display: inline-block;
@@ -1862,6 +1887,7 @@ textarea.form-control-lg {
.form-floating {
position: relative; }
.form-floating > .form-control,
+ .form-floating > .form-control-plaintext,
.form-floating > .form-select {
height: calc(3.5rem + 2px);
line-height: 1.25; }
@@ -1869,8 +1895,13 @@ textarea.form-control-lg {
position: absolute;
top: 0;
left: 0;
+ width: 100%;
height: 100%;
padding: 1rem 0.75rem;
+ overflow: hidden;
+ text-align: start;
+ text-overflow: ellipsis;
+ white-space: nowrap;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
@@ -1878,14 +1909,19 @@ textarea.form-control-lg {
@media (prefers-reduced-motion: reduce) {
.form-floating > label {
transition: none; } }
- .form-floating > .form-control {
+ .form-floating > .form-control,
+ .form-floating > .form-control-plaintext {
padding: 1rem 0.75rem; }
- .form-floating > .form-control::placeholder {
+ .form-floating > .form-control::placeholder,
+ .form-floating > .form-control-plaintext::placeholder {
color: transparent; }
- .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
+ .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
+ .form-floating > .form-control-plaintext:focus,
+ .form-floating > .form-control-plaintext:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: 0.625rem; }
- .form-floating > .form-control:-webkit-autofill {
+ .form-floating > .form-control:-webkit-autofill,
+ .form-floating > .form-control-plaintext:-webkit-autofill {
padding-top: 1.625rem;
padding-bottom: 0.625rem; }
.form-floating > .form-select {
@@ -1893,12 +1929,15 @@ textarea.form-control-lg {
padding-bottom: 0.625rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
+ .form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
opacity: 0.65;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); }
.form-floating > .form-control:-webkit-autofill ~ label {
opacity: 0.65;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); }
+ .form-floating > .form-control-plaintext ~ label {
+ border-width: 1px 0; }
.input-group {
position: relative;
@@ -1907,19 +1946,21 @@ textarea.form-control-lg {
align-items: stretch;
width: 100%; }
.input-group > .form-control,
- .input-group > .form-select {
+ .input-group > .form-select,
+ .input-group > .form-floating {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0; }
.input-group > .form-control:focus,
- .input-group > .form-select:focus {
- z-index: 3; }
+ .input-group > .form-select:focus,
+ .input-group > .form-floating:focus-within {
+ z-index: 5; }
.input-group .btn {
position: relative;
z-index: 2; }
.input-group .btn:focus {
- z-index: 3; }
+ z-index: 5; }
.input-group-text {
display: flex;
@@ -1933,7 +1974,7 @@ textarea.form-control-lg {
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
- border-radius: 0.25rem; }
+ border-radius: 0.375rem; }
.input-group-lg > .form-control,
.input-group-lg > .form-select,
@@ -1941,7 +1982,7 @@ textarea.form-control-lg {
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
- border-radius: 0.3rem; }
+ border-radius: 0.5rem; }
.input-group-sm > .form-control,
.input-group-sm > .form-select,
@@ -1949,19 +1990,23 @@ textarea.form-control-lg {
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
- border-radius: 0.2rem; }
+ border-radius: 0.25rem; }
.input-group-lg > .form-select,
.input-group-sm > .form-select {
padding-right: 3rem; }
-.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
+.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
-.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
-.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4) {
+.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4),
+.input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-control,
+.input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-select {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@@ -1970,6 +2015,11 @@ textarea.form-control-lg {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
+.input-group > .form-floating:not(:first-child) > .form-control,
+.input-group > .form-floating:not(:first-child) > .form-select {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
+
.valid-feedback {
display: none;
width: 100%;
@@ -1988,7 +2038,7 @@ textarea.form-control-lg {
font-size: 0.875rem;
color: #fff;
background-color: rgba(25, 135, 84, 0.9);
- border-radius: 0.25rem; }
+ border-radius: 0.375rem; }
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
@@ -1999,7 +2049,7 @@ textarea.form-control-lg {
.was-validated .form-control:valid, .form-control.is-valid {
border-color: #198754;
padding-right: calc(1.5em + 0.75rem);
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); }
@@ -2015,13 +2065,16 @@ textarea.form-control-lg {
border-color: #198754; }
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select[size="1"]:valid:not([multiple]), .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid[size="1"]:not([multiple]) {
padding-right: 4.125rem;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); }
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
border-color: #198754;
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); }
+.was-validated .form-control-color:valid, .form-control-color.is-valid {
+ width: calc(3rem + calc(1.5em + 0.75rem)); }
+
.was-validated .form-check-input:valid, .form-check-input.is-valid {
border-color: #198754; }
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
@@ -2034,12 +2087,10 @@ textarea.form-control-lg {
.form-check-inline .form-check-input ~ .valid-feedback {
margin-left: .5em; }
-.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid, .was-validated .input-group .form-select:valid,
-.input-group .form-select.is-valid {
- z-index: 1; }
- .was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus, .was-validated .input-group .form-select:valid:focus,
- .input-group .form-select.is-valid:focus {
- z-index: 3; }
+.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control.is-valid:not(:focus), .was-validated .input-group > .form-select:not(:focus):valid,
+.input-group > .form-select.is-valid:not(:focus), .was-validated .input-group > .form-floating:not(:focus-within):valid,
+.input-group > .form-floating.is-valid:not(:focus-within) {
+ z-index: 3; }
.invalid-feedback {
display: none;
@@ -2059,7 +2110,7 @@ textarea.form-control-lg {
font-size: 0.875rem;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
- border-radius: 0.25rem; }
+ border-radius: 0.375rem; }
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
@@ -2086,13 +2137,16 @@ textarea.form-control-lg {
border-color: #dc3545; }
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select[size="1"]:invalid:not([multiple]), .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid[size="1"]:not([multiple]) {
padding-right: 4.125rem;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); }
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); }
+.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
+ width: calc(3rem + calc(1.5em + 0.75rem)); }
+
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
border-color: #dc3545; }
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
@@ -2105,403 +2159,363 @@ textarea.form-control-lg {
.form-check-inline .form-check-input ~ .invalid-feedback {
margin-left: .5em; }
-.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid, .was-validated .input-group .form-select:invalid,
-.input-group .form-select.is-invalid {
- z-index: 2; }
- .was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus, .was-validated .input-group .form-select:invalid:focus,
- .input-group .form-select.is-invalid:focus {
- z-index: 3; }
+.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control.is-invalid:not(:focus), .was-validated .input-group > .form-select:not(:focus):invalid,
+.input-group > .form-select.is-invalid:not(:focus), .was-validated .input-group > .form-floating:not(:focus-within):invalid,
+.input-group > .form-floating.is-invalid:not(:focus-within) {
+ z-index: 4; }
.btn {
+ --bs-btn-padding-x: 0.75rem;
+ --bs-btn-padding-y: 0.375rem;
+ --bs-btn-font-family: ;
+ --bs-btn-font-size: 1rem;
+ --bs-btn-font-weight: 400;
+ --bs-btn-line-height: 1.5;
+ --bs-btn-color: #212529;
+ --bs-btn-bg: transparent;
+ --bs-btn-border-width: 1px;
+ --bs-btn-border-color: transparent;
+ --bs-btn-border-radius: 0.375rem;
+ --bs-btn-hover-border-color: transparent;
+ --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+ --bs-btn-disabled-opacity: 0.65;
+ --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
- font-weight: 400;
- line-height: 1.5;
- color: #212529;
+ padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+ font-family: var(--bs-btn-font-family);
+ font-size: var(--bs-btn-font-size);
+ font-weight: var(--bs-btn-font-weight);
+ line-height: var(--bs-btn-line-height);
+ color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
- background-color: transparent;
- border: 1px solid transparent;
- padding: 0.375rem 0.75rem;
- font-size: 1rem;
- border-radius: 0.25rem;
+ border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+ border-radius: var(--bs-btn-border-radius);
+ background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none; } }
.btn:hover {
- color: #212529; }
- .btn-check:focus + .btn, .btn:focus {
+ color: var(--bs-btn-hover-color);
+ background-color: var(--bs-btn-hover-bg);
+ border-color: var(--bs-btn-hover-border-color); }
+ .btn-check + .btn:hover {
+ color: var(--bs-btn-color);
+ background-color: var(--bs-btn-bg);
+ border-color: var(--bs-btn-border-color); }
+ .btn:focus-visible {
+ color: var(--bs-btn-hover-color);
+ background-color: var(--bs-btn-hover-bg);
+ border-color: var(--bs-btn-hover-border-color);
outline: 0;
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
+ box-shadow: var(--bs-btn-focus-box-shadow); }
+ .btn-check:focus-visible + .btn {
+ border-color: var(--bs-btn-hover-border-color);
+ outline: 0;
+ box-shadow: var(--bs-btn-focus-box-shadow); }
+ .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
+ color: var(--bs-btn-active-color);
+ background-color: var(--bs-btn-active-bg);
+ border-color: var(--bs-btn-active-border-color); }
+ .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
+ box-shadow: var(--bs-btn-focus-box-shadow); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
+ color: var(--bs-btn-disabled-color);
pointer-events: none;
- opacity: 0.65; }
+ background-color: var(--bs-btn-disabled-bg);
+ border-color: var(--bs-btn-disabled-border-color);
+ opacity: var(--bs-btn-disabled-opacity); }
.btn-primary {
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
- .btn-primary:hover {
- color: #fff;
- background-color: #0b5ed7;
- border-color: #0a58ca; }
- .btn-check:focus + .btn-primary, .btn-primary:focus {
- color: #fff;
- background-color: #0b5ed7;
- border-color: #0a58ca;
- box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); }
- .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
- color: #fff;
- background-color: #0a58ca;
- border-color: #0a53be; }
- .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); }
- .btn-primary:disabled, .btn-primary.disabled {
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
+ --bs-btn-color: #fff;
+ --bs-btn-bg: #0d6efd;
+ --bs-btn-border-color: #0d6efd;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #0b5ed7;
+ --bs-btn-hover-border-color: #0a58ca;
+ --bs-btn-focus-shadow-rgb: 49, 132, 253;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #0a58ca;
+ --bs-btn-active-border-color: #0a53be;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #fff;
+ --bs-btn-disabled-bg: #0d6efd;
+ --bs-btn-disabled-border-color: #0d6efd; }
.btn-secondary {
- color: #fff;
- background-color: #6c757d;
- border-color: #6c757d; }
- .btn-secondary:hover {
- color: #fff;
- background-color: #5c636a;
- border-color: #565e64; }
- .btn-check:focus + .btn-secondary, .btn-secondary:focus {
- color: #fff;
- background-color: #5c636a;
- border-color: #565e64;
- box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); }
- .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
- color: #fff;
- background-color: #565e64;
- border-color: #51585e; }
- .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); }
- .btn-secondary:disabled, .btn-secondary.disabled {
- color: #fff;
- background-color: #6c757d;
- border-color: #6c757d; }
+ --bs-btn-color: #fff;
+ --bs-btn-bg: #6c757d;
+ --bs-btn-border-color: #6c757d;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #5c636a;
+ --bs-btn-hover-border-color: #565e64;
+ --bs-btn-focus-shadow-rgb: 130, 138, 145;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #565e64;
+ --bs-btn-active-border-color: #51585e;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #fff;
+ --bs-btn-disabled-bg: #6c757d;
+ --bs-btn-disabled-border-color: #6c757d; }
.btn-success {
- color: #fff;
- background-color: #198754;
- border-color: #198754; }
- .btn-success:hover {
- color: #fff;
- background-color: #157347;
- border-color: #146c43; }
- .btn-check:focus + .btn-success, .btn-success:focus {
- color: #fff;
- background-color: #157347;
- border-color: #146c43;
- box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); }
- .btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
- color: #fff;
- background-color: #146c43;
- border-color: #13653f; }
- .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); }
- .btn-success:disabled, .btn-success.disabled {
- color: #fff;
- background-color: #198754;
- border-color: #198754; }
+ --bs-btn-color: #fff;
+ --bs-btn-bg: #198754;
+ --bs-btn-border-color: #198754;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #157347;
+ --bs-btn-hover-border-color: #146c43;
+ --bs-btn-focus-shadow-rgb: 60, 153, 110;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #146c43;
+ --bs-btn-active-border-color: #13653f;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #fff;
+ --bs-btn-disabled-bg: #198754;
+ --bs-btn-disabled-border-color: #198754; }
.btn-info {
- color: #000;
- background-color: #0dcaf0;
- border-color: #0dcaf0; }
- .btn-info:hover {
- color: #000;
- background-color: #31d2f2;
- border-color: #25cff2; }
- .btn-check:focus + .btn-info, .btn-info:focus {
- color: #000;
- background-color: #31d2f2;
- border-color: #25cff2;
- box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); }
- .btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
- color: #000;
- background-color: #3dd5f3;
- border-color: #25cff2; }
- .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); }
- .btn-info:disabled, .btn-info.disabled {
- color: #000;
- background-color: #0dcaf0;
- border-color: #0dcaf0; }
+ --bs-btn-color: #000;
+ --bs-btn-bg: #0dcaf0;
+ --bs-btn-border-color: #0dcaf0;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #31d2f2;
+ --bs-btn-hover-border-color: #25cff2;
+ --bs-btn-focus-shadow-rgb: 11, 172, 204;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #3dd5f3;
+ --bs-btn-active-border-color: #25cff2;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #000;
+ --bs-btn-disabled-bg: #0dcaf0;
+ --bs-btn-disabled-border-color: #0dcaf0; }
.btn-warning {
- color: #000;
- background-color: #ffc107;
- border-color: #ffc107; }
- .btn-warning:hover {
- color: #000;
- background-color: #ffca2c;
- border-color: #ffc720; }
- .btn-check:focus + .btn-warning, .btn-warning:focus {
- color: #000;
- background-color: #ffca2c;
- border-color: #ffc720;
- box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); }
- .btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
- color: #000;
- background-color: #ffcd39;
- border-color: #ffc720; }
- .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); }
- .btn-warning:disabled, .btn-warning.disabled {
- color: #000;
- background-color: #ffc107;
- border-color: #ffc107; }
+ --bs-btn-color: #000;
+ --bs-btn-bg: #ffc107;
+ --bs-btn-border-color: #ffc107;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #ffca2c;
+ --bs-btn-hover-border-color: #ffc720;
+ --bs-btn-focus-shadow-rgb: 217, 164, 6;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #ffcd39;
+ --bs-btn-active-border-color: #ffc720;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #000;
+ --bs-btn-disabled-bg: #ffc107;
+ --bs-btn-disabled-border-color: #ffc107; }
.btn-danger {
- color: #fff;
- background-color: #dc3545;
- border-color: #dc3545; }
- .btn-danger:hover {
- color: #fff;
- background-color: #bb2d3b;
- border-color: #b02a37; }
- .btn-check:focus + .btn-danger, .btn-danger:focus {
- color: #fff;
- background-color: #bb2d3b;
- border-color: #b02a37;
- box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); }
- .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
- color: #fff;
- background-color: #b02a37;
- border-color: #a52834; }
- .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); }
- .btn-danger:disabled, .btn-danger.disabled {
- color: #fff;
- background-color: #dc3545;
- border-color: #dc3545; }
+ --bs-btn-color: #fff;
+ --bs-btn-bg: #dc3545;
+ --bs-btn-border-color: #dc3545;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #bb2d3b;
+ --bs-btn-hover-border-color: #b02a37;
+ --bs-btn-focus-shadow-rgb: 225, 83, 97;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #b02a37;
+ --bs-btn-active-border-color: #a52834;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #fff;
+ --bs-btn-disabled-bg: #dc3545;
+ --bs-btn-disabled-border-color: #dc3545; }
.btn-light {
- color: #000;
- background-color: #f8f9fa;
- border-color: #f8f9fa; }
- .btn-light:hover {
- color: #000;
- background-color: #f9fafb;
- border-color: #f9fafb; }
- .btn-check:focus + .btn-light, .btn-light:focus {
- color: #000;
- background-color: #f9fafb;
- border-color: #f9fafb;
- box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
- .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
- color: #000;
- background-color: #f9fafb;
- border-color: #f9fafb; }
- .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
- .btn-light:disabled, .btn-light.disabled {
- color: #000;
- background-color: #f8f9fa;
- border-color: #f8f9fa; }
+ --bs-btn-color: #000;
+ --bs-btn-bg: #f8f9fa;
+ --bs-btn-border-color: #f8f9fa;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #d3d4d5;
+ --bs-btn-hover-border-color: #c6c7c8;
+ --bs-btn-focus-shadow-rgb: 211, 212, 213;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #c6c7c8;
+ --bs-btn-active-border-color: #babbbc;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #000;
+ --bs-btn-disabled-bg: #f8f9fa;
+ --bs-btn-disabled-border-color: #f8f9fa; }
.btn-dark {
- color: #fff;
- background-color: #212529;
- border-color: #212529; }
- .btn-dark:hover {
- color: #fff;
- background-color: #1c1f23;
- border-color: #1a1e21; }
- .btn-check:focus + .btn-dark, .btn-dark:focus {
- color: #fff;
- background-color: #1c1f23;
- border-color: #1a1e21;
- box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
- .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
- color: #fff;
- background-color: #1a1e21;
- border-color: #191c1f; }
- .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
- box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
- .btn-dark:disabled, .btn-dark.disabled {
- color: #fff;
- background-color: #212529;
- border-color: #212529; }
+ --bs-btn-color: #fff;
+ --bs-btn-bg: #212529;
+ --bs-btn-border-color: #212529;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #424649;
+ --bs-btn-hover-border-color: #373b3e;
+ --bs-btn-focus-shadow-rgb: 66, 70, 73;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #4d5154;
+ --bs-btn-active-border-color: #373b3e;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #fff;
+ --bs-btn-disabled-bg: #212529;
+ --bs-btn-disabled-border-color: #212529; }
.btn-outline-primary {
- color: #0d6efd;
- border-color: #0d6efd; }
- .btn-outline-primary:hover {
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
- .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); }
- .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
- .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); }
- .btn-outline-primary:disabled, .btn-outline-primary.disabled {
- color: #0d6efd;
- background-color: transparent; }
+ --bs-btn-color: #0d6efd;
+ --bs-btn-border-color: #0d6efd;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #0d6efd;
+ --bs-btn-hover-border-color: #0d6efd;
+ --bs-btn-focus-shadow-rgb: 13, 110, 253;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #0d6efd;
+ --bs-btn-active-border-color: #0d6efd;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #0d6efd;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #0d6efd;
+ --bs-gradient: none; }
.btn-outline-secondary {
- color: #6c757d;
- border-color: #6c757d; }
- .btn-outline-secondary:hover {
- color: #fff;
- background-color: #6c757d;
- border-color: #6c757d; }
- .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
- box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); }
- .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
- color: #fff;
- background-color: #6c757d;
- border-color: #6c757d; }
- .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); }
- .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
- color: #6c757d;
- background-color: transparent; }
+ --bs-btn-color: #6c757d;
+ --bs-btn-border-color: #6c757d;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #6c757d;
+ --bs-btn-hover-border-color: #6c757d;
+ --bs-btn-focus-shadow-rgb: 108, 117, 125;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #6c757d;
+ --bs-btn-active-border-color: #6c757d;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #6c757d;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #6c757d;
+ --bs-gradient: none; }
.btn-outline-success {
- color: #198754;
- border-color: #198754; }
- .btn-outline-success:hover {
- color: #fff;
- background-color: #198754;
- border-color: #198754; }
- .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
- box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); }
- .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
- color: #fff;
- background-color: #198754;
- border-color: #198754; }
- .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); }
- .btn-outline-success:disabled, .btn-outline-success.disabled {
- color: #198754;
- background-color: transparent; }
+ --bs-btn-color: #198754;
+ --bs-btn-border-color: #198754;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #198754;
+ --bs-btn-hover-border-color: #198754;
+ --bs-btn-focus-shadow-rgb: 25, 135, 84;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #198754;
+ --bs-btn-active-border-color: #198754;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #198754;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #198754;
+ --bs-gradient: none; }
.btn-outline-info {
- color: #0dcaf0;
- border-color: #0dcaf0; }
- .btn-outline-info:hover {
- color: #000;
- background-color: #0dcaf0;
- border-color: #0dcaf0; }
- .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
- box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); }
- .btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
- color: #000;
- background-color: #0dcaf0;
- border-color: #0dcaf0; }
- .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); }
- .btn-outline-info:disabled, .btn-outline-info.disabled {
- color: #0dcaf0;
- background-color: transparent; }
+ --bs-btn-color: #0dcaf0;
+ --bs-btn-border-color: #0dcaf0;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #0dcaf0;
+ --bs-btn-hover-border-color: #0dcaf0;
+ --bs-btn-focus-shadow-rgb: 13, 202, 240;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #0dcaf0;
+ --bs-btn-active-border-color: #0dcaf0;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #0dcaf0;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #0dcaf0;
+ --bs-gradient: none; }
.btn-outline-warning {
- color: #ffc107;
- border-color: #ffc107; }
- .btn-outline-warning:hover {
- color: #000;
- background-color: #ffc107;
- border-color: #ffc107; }
- .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
- box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); }
- .btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
- color: #000;
- background-color: #ffc107;
- border-color: #ffc107; }
- .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); }
- .btn-outline-warning:disabled, .btn-outline-warning.disabled {
- color: #ffc107;
- background-color: transparent; }
+ --bs-btn-color: #ffc107;
+ --bs-btn-border-color: #ffc107;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #ffc107;
+ --bs-btn-hover-border-color: #ffc107;
+ --bs-btn-focus-shadow-rgb: 255, 193, 7;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #ffc107;
+ --bs-btn-active-border-color: #ffc107;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #ffc107;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #ffc107;
+ --bs-gradient: none; }
.btn-outline-danger {
- color: #dc3545;
- border-color: #dc3545; }
- .btn-outline-danger:hover {
- color: #fff;
- background-color: #dc3545;
- border-color: #dc3545; }
- .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
- box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); }
- .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
- color: #fff;
- background-color: #dc3545;
- border-color: #dc3545; }
- .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); }
- .btn-outline-danger:disabled, .btn-outline-danger.disabled {
- color: #dc3545;
- background-color: transparent; }
+ --bs-btn-color: #dc3545;
+ --bs-btn-border-color: #dc3545;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #dc3545;
+ --bs-btn-hover-border-color: #dc3545;
+ --bs-btn-focus-shadow-rgb: 220, 53, 69;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #dc3545;
+ --bs-btn-active-border-color: #dc3545;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #dc3545;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #dc3545;
+ --bs-gradient: none; }
.btn-outline-light {
- color: #f8f9fa;
- border-color: #f8f9fa; }
- .btn-outline-light:hover {
- color: #000;
- background-color: #f8f9fa;
- border-color: #f8f9fa; }
- .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
- box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
- .btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
- color: #000;
- background-color: #f8f9fa;
- border-color: #f8f9fa; }
- .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
- .btn-outline-light:disabled, .btn-outline-light.disabled {
- color: #f8f9fa;
- background-color: transparent; }
+ --bs-btn-color: #f8f9fa;
+ --bs-btn-border-color: #f8f9fa;
+ --bs-btn-hover-color: #000;
+ --bs-btn-hover-bg: #f8f9fa;
+ --bs-btn-hover-border-color: #f8f9fa;
+ --bs-btn-focus-shadow-rgb: 248, 249, 250;
+ --bs-btn-active-color: #000;
+ --bs-btn-active-bg: #f8f9fa;
+ --bs-btn-active-border-color: #f8f9fa;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #f8f9fa;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #f8f9fa;
+ --bs-gradient: none; }
.btn-outline-dark {
- color: #212529;
- border-color: #212529; }
- .btn-outline-dark:hover {
- color: #fff;
- background-color: #212529;
- border-color: #212529; }
- .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
- box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
- .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
- color: #fff;
- background-color: #212529;
- border-color: #212529; }
- .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
- box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
- .btn-outline-dark:disabled, .btn-outline-dark.disabled {
- color: #212529;
- background-color: transparent; }
+ --bs-btn-color: #212529;
+ --bs-btn-border-color: #212529;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-hover-bg: #212529;
+ --bs-btn-hover-border-color: #212529;
+ --bs-btn-focus-shadow-rgb: 33, 37, 41;
+ --bs-btn-active-color: #fff;
+ --bs-btn-active-bg: #212529;
+ --bs-btn-active-border-color: #212529;
+ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+ --bs-btn-disabled-color: #212529;
+ --bs-btn-disabled-bg: transparent;
+ --bs-btn-disabled-border-color: #212529;
+ --bs-gradient: none; }
.btn-link {
- font-weight: 400;
- color: #0d6efd;
+ --bs-btn-font-weight: 400;
+ --bs-btn-color: var(--bs-link-color);
+ --bs-btn-bg: transparent;
+ --bs-btn-border-color: transparent;
+ --bs-btn-hover-color: var(--bs-link-hover-color);
+ --bs-btn-hover-border-color: transparent;
+ --bs-btn-active-color: var(--bs-link-hover-color);
+ --bs-btn-active-border-color: transparent;
+ --bs-btn-disabled-color: #6c757d;
+ --bs-btn-disabled-border-color: transparent;
+ --bs-btn-box-shadow: none;
+ --bs-btn-focus-shadow-rgb: 49, 132, 253;
text-decoration: underline; }
+ .btn-link:focus-visible {
+ color: var(--bs-btn-color); }
.btn-link:hover {
- color: #0a58ca; }
- .btn-link:disabled, .btn-link.disabled {
- color: #6c757d; }
+ color: var(--bs-btn-hover-color); }
.btn-lg, .btn-group-lg > .btn {
- padding: 0.5rem 1rem;
- font-size: 1.25rem;
- border-radius: 0.3rem; }
+ --bs-btn-padding-y: 0.5rem;
+ --bs-btn-padding-x: 1rem;
+ --bs-btn-font-size: 1.25rem;
+ --bs-btn-border-radius: 0.5rem; }
.btn-sm, .btn-group-sm > .btn {
- padding: 0.25rem 0.5rem;
- font-size: 0.875rem;
- border-radius: 0.2rem; }
+ --bs-btn-padding-y: 0.25rem;
+ --bs-btn-padding-x: 0.5rem;
+ --bs-btn-font-size: 0.875rem;
+ --bs-btn-border-radius: 0.25rem; }
.fade {
transition: opacity 0.15s linear; }
@@ -2531,7 +2545,9 @@ textarea.form-control-lg {
.dropup,
.dropend,
.dropdown,
-.dropstart {
+.dropstart,
+.dropup-center,
+.dropdown-center {
position: relative; }
.dropdown-toggle {
@@ -2549,24 +2565,50 @@ textarea.form-control-lg {
margin-left: 0; }
.dropdown-menu {
+ --bs-dropdown-zindex: 1000;
+ --bs-dropdown-min-width: 10rem;
+ --bs-dropdown-padding-x: 0;
+ --bs-dropdown-padding-y: 0.5rem;
+ --bs-dropdown-spacer: 0.125rem;
+ --bs-dropdown-font-size: 1rem;
+ --bs-dropdown-color: #212529;
+ --bs-dropdown-bg: #fff;
+ --bs-dropdown-border-color: var(--bs-border-color-translucent);
+ --bs-dropdown-border-radius: 0.375rem;
+ --bs-dropdown-border-width: 1px;
+ --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
+ --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+ --bs-dropdown-divider-margin-y: 0.5rem;
+ --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ --bs-dropdown-link-color: #212529;
+ --bs-dropdown-link-hover-color: #1e2125;
+ --bs-dropdown-link-hover-bg: #e9ecef;
+ --bs-dropdown-link-active-color: #fff;
+ --bs-dropdown-link-active-bg: #0d6efd;
+ --bs-dropdown-link-disabled-color: #adb5bd;
+ --bs-dropdown-item-padding-x: 1rem;
+ --bs-dropdown-item-padding-y: 0.25rem;
+ --bs-dropdown-header-color: #6c757d;
+ --bs-dropdown-header-padding-x: 1rem;
+ --bs-dropdown-header-padding-y: 0.5rem;
position: absolute;
- z-index: 1000;
+ z-index: var(--bs-dropdown-zindex);
display: none;
- min-width: 10rem;
- padding: 0.5rem 0;
+ min-width: var(--bs-dropdown-min-width);
+ padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
margin: 0;
- font-size: 1rem;
- color: #212529;
+ font-size: var(--bs-dropdown-font-size);
+ color: var(--bs-dropdown-color);
text-align: left;
list-style: none;
- background-color: #fff;
+ background-color: var(--bs-dropdown-bg);
background-clip: padding-box;
- border: 1px solid rgba(0, 0, 0, 0.15);
- border-radius: 0.25rem; }
+ border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+ border-radius: var(--bs-dropdown-border-radius); }
.dropdown-menu[data-bs-popper] {
top: 100%;
left: 0;
- margin-top: 0.125rem; }
+ margin-top: var(--bs-dropdown-spacer); }
.dropdown-menu-start {
--bs-position: start; }
@@ -2644,7 +2686,7 @@ textarea.form-control-lg {
top: auto;
bottom: 100%;
margin-top: 0;
- margin-bottom: 0.125rem; }
+ margin-bottom: var(--bs-dropdown-spacer); }
.dropup .dropdown-toggle::after {
display: inline-block;
@@ -2664,7 +2706,7 @@ textarea.form-control-lg {
right: auto;
left: 100%;
margin-top: 0;
- margin-left: 0.125rem; }
+ margin-left: var(--bs-dropdown-spacer); }
.dropend .dropdown-toggle::after {
display: inline-block;
@@ -2687,7 +2729,7 @@ textarea.form-control-lg {
right: 100%;
left: auto;
margin-top: 0;
- margin-right: 0.125rem; }
+ margin-right: var(--bs-dropdown-spacer); }
.dropstart .dropdown-toggle::after {
display: inline-block;
@@ -2715,31 +2757,32 @@ textarea.form-control-lg {
.dropdown-divider {
height: 0;
- margin: 0.5rem 0;
+ margin: var(--bs-dropdown-divider-margin-y) 0;
overflow: hidden;
- border-top: 1px solid rgba(0, 0, 0, 0.15); }
+ border-top: 1px solid var(--bs-dropdown-divider-bg);
+ opacity: 1; }
.dropdown-item {
display: block;
width: 100%;
- padding: 0.25rem 1rem;
+ padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
clear: both;
font-weight: 400;
- color: #212529;
+ color: var(--bs-dropdown-link-color);
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0; }
.dropdown-item:hover, .dropdown-item:focus {
- color: #1e2125;
- background-color: #e9ecef; }
+ color: var(--bs-dropdown-link-hover-color);
+ background-color: var(--bs-dropdown-link-hover-bg); }
.dropdown-item.active, .dropdown-item:active {
- color: #fff;
+ color: var(--bs-dropdown-link-active-color);
text-decoration: none;
- background-color: #0d6efd; }
+ background-color: var(--bs-dropdown-link-active-bg); }
.dropdown-item.disabled, .dropdown-item:disabled {
- color: #adb5bd;
+ color: var(--bs-dropdown-link-disabled-color);
pointer-events: none;
background-color: transparent; }
@@ -2748,37 +2791,30 @@ textarea.form-control-lg {
.dropdown-header {
display: block;
- padding: 0.5rem 1rem;
+ padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
margin-bottom: 0;
font-size: 0.875rem;
- color: #6c757d;
+ color: var(--bs-dropdown-header-color);
white-space: nowrap; }
.dropdown-item-text {
display: block;
- padding: 0.25rem 1rem;
- color: #212529; }
+ padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+ color: var(--bs-dropdown-link-color); }
.dropdown-menu-dark {
- color: #dee2e6;
- background-color: #343a40;
- border-color: rgba(0, 0, 0, 0.15); }
- .dropdown-menu-dark .dropdown-item {
- color: #dee2e6; }
- .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
- color: #fff;
- background-color: rgba(255, 255, 255, 0.15); }
- .dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
- color: #fff;
- background-color: #0d6efd; }
- .dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
- color: #adb5bd; }
- .dropdown-menu-dark .dropdown-divider {
- border-color: rgba(0, 0, 0, 0.15); }
- .dropdown-menu-dark .dropdown-item-text {
- color: #dee2e6; }
- .dropdown-menu-dark .dropdown-header {
- color: #adb5bd; }
+ --bs-dropdown-color: #dee2e6;
+ --bs-dropdown-bg: #343a40;
+ --bs-dropdown-border-color: var(--bs-border-color-translucent);
+ --bs-dropdown-box-shadow: ;
+ --bs-dropdown-link-color: #dee2e6;
+ --bs-dropdown-link-hover-color: #fff;
+ --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+ --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
+ --bs-dropdown-link-active-color: #fff;
+ --bs-dropdown-link-active-bg: #0d6efd;
+ --bs-dropdown-link-disabled-color: #adb5bd;
+ --bs-dropdown-header-color: #adb5bd; }
.btn-group,
.btn-group-vertical {
@@ -2810,20 +2846,21 @@ textarea.form-control-lg {
.btn-toolbar .input-group {
width: auto; }
-.btn-group > .btn:not(:first-child),
-.btn-group > .btn-group:not(:first-child) {
- margin-left: -1px; }
-
-.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
-.btn-group > .btn-group:not(:last-child) > .btn {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0; }
-
-.btn-group > .btn:nth-child(n + 3),
-.btn-group > :not(.btn-check) + .btn,
-.btn-group > .btn-group:not(:first-child) > .btn {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0; }
+.btn-group {
+ border-radius: 0.375rem; }
+ .btn-group > :not(.btn-check:first-child) + .btn,
+ .btn-group > .btn-group:not(:first-child) {
+ margin-left: -1px; }
+ .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+ .btn-group > .btn.dropdown-toggle-split:first-child,
+ .btn-group > .btn-group:not(:last-child) > .btn {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0; }
+ .btn-group > .btn:nth-child(n + 3),
+ .btn-group > :not(.btn-check) + .btn,
+ .btn-group > .btn-group:not(:first-child) > .btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
.dropdown-toggle-split {
padding-right: 0.5625rem;
@@ -2861,6 +2898,12 @@ textarea.form-control-lg {
border-top-right-radius: 0; }
.nav {
+ --bs-nav-link-padding-x: 1rem;
+ --bs-nav-link-padding-y: 0.5rem;
+ --bs-nav-link-font-weight: ;
+ --bs-nav-link-color: var(--bs-link-color);
+ --bs-nav-link-hover-color: var(--bs-link-hover-color);
+ --bs-nav-link-disabled-color: #6c757d;
display: flex;
flex-wrap: wrap;
padding-left: 0;
@@ -2869,54 +2912,70 @@ textarea.form-control-lg {
.nav-link {
display: block;
- padding: 0.5rem 1rem;
- color: #0d6efd;
+ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+ font-size: var(--bs-nav-link-font-size);
+ font-weight: var(--bs-nav-link-font-weight);
+ color: var(--bs-nav-link-color);
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.nav-link {
transition: none; } }
.nav-link:hover, .nav-link:focus {
- color: #0a58ca; }
+ color: var(--bs-nav-link-hover-color); }
.nav-link.disabled {
- color: #6c757d;
+ color: var(--bs-nav-link-disabled-color);
pointer-events: none;
cursor: default; }
.nav-tabs {
- border-bottom: 1px solid #dee2e6; }
+ --bs-nav-tabs-border-width: 1px;
+ --bs-nav-tabs-border-color: #dee2e6;
+ --bs-nav-tabs-border-radius: 0.375rem;
+ --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
+ --bs-nav-tabs-link-active-color: #495057;
+ --bs-nav-tabs-link-active-bg: #fff;
+ --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
+ border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); }
.nav-tabs .nav-link {
- margin-bottom: -1px;
+ margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
background: none;
- border: 1px solid transparent;
- border-top-left-radius: 0.25rem;
- border-top-right-radius: 0.25rem; }
+ border: var(--bs-nav-tabs-border-width) solid transparent;
+ border-top-left-radius: var(--bs-nav-tabs-border-radius);
+ border-top-right-radius: var(--bs-nav-tabs-border-radius); }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
- border-color: #e9ecef #e9ecef #dee2e6;
- isolation: isolate; }
- .nav-tabs .nav-link.disabled {
- color: #6c757d;
+ isolation: isolate;
+ border-color: var(--bs-nav-tabs-link-hover-border-color); }
+ .nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
+ color: var(--bs-nav-link-disabled-color);
background-color: transparent;
border-color: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
- color: #495057;
- background-color: #fff;
- border-color: #dee2e6 #dee2e6 #fff; }
+ color: var(--bs-nav-tabs-link-active-color);
+ background-color: var(--bs-nav-tabs-link-active-bg);
+ border-color: var(--bs-nav-tabs-link-active-border-color); }
.nav-tabs .dropdown-menu {
- margin-top: -1px;
+ margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
border-top-left-radius: 0;
border-top-right-radius: 0; }
-.nav-pills .nav-link {
- background: none;
- border: 0;
- border-radius: 0.25rem; }
-
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
- color: #fff;
- background-color: #0d6efd; }
+.nav-pills {
+ --bs-nav-pills-border-radius: 0.375rem;
+ --bs-nav-pills-link-active-color: #fff;
+ --bs-nav-pills-link-active-bg: #0d6efd; }
+ .nav-pills .nav-link {
+ background: none;
+ border: 0;
+ border-radius: var(--bs-nav-pills-border-radius); }
+ .nav-pills .nav-link:disabled {
+ color: var(--bs-nav-link-disabled-color);
+ background-color: transparent;
+ border-color: transparent; }
+ .nav-pills .nav-link.active,
+ .nav-pills .show > .nav-link {
+ color: var(--bs-nav-pills-link-active-color);
+ background-color: var(--bs-nav-pills-link-active-bg); }
.nav-fill > .nav-link,
.nav-fill .nav-item {
@@ -2940,13 +2999,32 @@ textarea.form-control-lg {
display: block; }
.navbar {
+ --bs-navbar-padding-x: 0;
+ --bs-navbar-padding-y: 0.5rem;
+ --bs-navbar-color: rgba(0, 0, 0, 0.55);
+ --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
+ --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
+ --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
+ --bs-navbar-brand-padding-y: 0.3125rem;
+ --bs-navbar-brand-margin-end: 1rem;
+ --bs-navbar-brand-font-size: 1.25rem;
+ --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
+ --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
+ --bs-navbar-nav-link-padding-x: 0.5rem;
+ --bs-navbar-toggler-padding-y: 0.25rem;
+ --bs-navbar-toggler-padding-x: 0.75rem;
+ --bs-navbar-toggler-font-size: 1.25rem;
+ --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+ --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
+ --bs-navbar-toggler-border-radius: 0.375rem;
+ --bs-navbar-toggler-focus-width: 0.25rem;
+ --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem; }
+ padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); }
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
@@ -2960,28 +3038,42 @@ textarea.form-control-lg {
justify-content: space-between; }
.navbar-brand {
- padding-top: 0.3125rem;
- padding-bottom: 0.3125rem;
- margin-right: 1rem;
- font-size: 1.25rem;
+ padding-top: var(--bs-navbar-brand-padding-y);
+ padding-bottom: var(--bs-navbar-brand-padding-y);
+ margin-right: var(--bs-navbar-brand-margin-end);
+ font-size: var(--bs-navbar-brand-font-size);
+ color: var(--bs-navbar-brand-color);
text-decoration: none;
white-space: nowrap; }
+ .navbar-brand:hover, .navbar-brand:focus {
+ color: var(--bs-navbar-brand-hover-color); }
.navbar-nav {
+ --bs-nav-link-padding-x: 0;
+ --bs-nav-link-padding-y: 0.5rem;
+ --bs-nav-link-font-weight: ;
+ --bs-nav-link-color: var(--bs-navbar-color);
+ --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
+ --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none; }
- .navbar-nav .nav-link {
- padding-right: 0;
- padding-left: 0; }
+ .navbar-nav .show > .nav-link,
+ .navbar-nav .nav-link.active {
+ color: var(--bs-navbar-active-color); }
.navbar-nav .dropdown-menu {
position: static; }
.navbar-text {
padding-top: 0.5rem;
- padding-bottom: 0.5rem; }
+ padding-bottom: 0.5rem;
+ color: var(--bs-navbar-color); }
+ .navbar-text a,
+ .navbar-text a:hover,
+ .navbar-text a:focus {
+ color: var(--bs-navbar-active-color); }
.navbar-collapse {
flex-basis: 100%;
@@ -2989,13 +3081,14 @@ textarea.form-control-lg {
align-items: center; }
.navbar-toggler {
- padding: 0.25rem 0.75rem;
- font-size: 1.25rem;
+ padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
+ font-size: var(--bs-navbar-toggler-font-size);
line-height: 1;
+ color: var(--bs-navbar-color);
background-color: transparent;
- border: 1px solid transparent;
- border-radius: 0.25rem;
- transition: box-shadow 0.15s ease-in-out; }
+ border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
+ border-radius: var(--bs-navbar-toggler-border-radius);
+ transition: var(--bs-navbar-toggler-transition); }
@media (prefers-reduced-motion: reduce) {
.navbar-toggler {
transition: none; } }
@@ -3004,13 +3097,14 @@ textarea.form-control-lg {
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
- box-shadow: 0 0 0 0.25rem; }
+ box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); }
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
+ background-image: var(--bs-navbar-toggler-icon-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%; }
@@ -3028,8 +3122,8 @@ textarea.form-control-lg {
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-sm .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand-sm .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-sm .navbar-collapse {
@@ -3037,29 +3131,24 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand-sm .navbar-toggler {
display: none; }
- .navbar-expand-sm .offcanvas-header {
- display: none; }
.navbar-expand-sm .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand-sm .offcanvas-top,
- .navbar-expand-sm .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand-sm .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; } }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand-sm .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand-sm .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; } }
@media (min-width: 768px) {
.navbar-expand-md {
@@ -3070,8 +3159,8 @@ textarea.form-control-lg {
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-md .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand-md .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-md .navbar-collapse {
@@ -3079,29 +3168,24 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand-md .navbar-toggler {
display: none; }
- .navbar-expand-md .offcanvas-header {
- display: none; }
.navbar-expand-md .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand-md .offcanvas-top,
- .navbar-expand-md .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand-md .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; } }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand-md .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand-md .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; } }
@media (min-width: 992px) {
.navbar-expand-lg {
@@ -3112,8 +3196,8 @@ textarea.form-control-lg {
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-lg .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand-lg .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-lg .navbar-collapse {
@@ -3121,29 +3205,24 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand-lg .navbar-toggler {
display: none; }
- .navbar-expand-lg .offcanvas-header {
- display: none; }
.navbar-expand-lg .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand-lg .offcanvas-top,
- .navbar-expand-lg .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand-lg .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; } }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand-lg .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand-lg .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; } }
@media (min-width: 1200px) {
.navbar-expand-xl {
@@ -3154,8 +3233,8 @@ textarea.form-control-lg {
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-xl .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand-xl .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-xl .navbar-collapse {
@@ -3163,29 +3242,24 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand-xl .navbar-toggler {
display: none; }
- .navbar-expand-xl .offcanvas-header {
- display: none; }
.navbar-expand-xl .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand-xl .offcanvas-top,
- .navbar-expand-xl .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand-xl .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; } }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand-xl .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand-xl .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; } }
@media (min-width: 1400px) {
.navbar-expand-xxl {
@@ -3196,8 +3270,8 @@ textarea.form-control-lg {
.navbar-expand-xxl .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand-xxl .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand-xxl .navbar-nav-scroll {
overflow: visible; }
.navbar-expand-xxl .navbar-collapse {
@@ -3205,29 +3279,24 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand-xxl .navbar-toggler {
display: none; }
- .navbar-expand-xxl .offcanvas-header {
- display: none; }
.navbar-expand-xxl .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand-xxl .offcanvas-top,
- .navbar-expand-xxl .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand-xxl .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; } }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand-xxl .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand-xxl .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; } }
.navbar-expand {
flex-wrap: nowrap;
@@ -3237,8 +3306,8 @@ textarea.form-control-lg {
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute; }
.navbar-expand .navbar-nav .nav-link {
- padding-right: 0.5rem;
- padding-left: 0.5rem; }
+ padding-right: var(--bs-navbar-nav-link-padding-x);
+ padding-left: var(--bs-navbar-nav-link-padding-x); }
.navbar-expand .navbar-nav-scroll {
overflow: visible; }
.navbar-expand .navbar-collapse {
@@ -3246,100 +3315,63 @@ textarea.form-control-lg {
flex-basis: auto; }
.navbar-expand .navbar-toggler {
display: none; }
- .navbar-expand .offcanvas-header {
- display: none; }
.navbar-expand .offcanvas {
- position: inherit;
- bottom: 0;
- z-index: 1000;
+ position: static;
+ z-index: auto;
flex-grow: 1;
+ width: auto !important;
+ height: auto !important;
visibility: visible !important;
- background-color: transparent;
- border-right: 0;
- border-left: 0;
- transition: none;
- transform: none; }
- .navbar-expand .offcanvas-top,
- .navbar-expand .offcanvas-bottom {
- height: auto;
- border-top: 0;
- border-bottom: 0; }
- .navbar-expand .offcanvas-body {
- display: flex;
- flex-grow: 0;
- padding: 0;
- overflow-y: visible; }
+ background-color: transparent !important;
+ border: 0 !important;
+ transform: none !important;
+ transition: none; }
+ .navbar-expand .offcanvas .offcanvas-header {
+ display: none; }
+ .navbar-expand .offcanvas .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible; }
-.navbar-light .navbar-brand {
- color: rgba(0, 0, 0, 0.9); }
- .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
- color: rgba(0, 0, 0, 0.9); }
-
-.navbar-light .navbar-nav .nav-link {
- color: rgba(0, 0, 0, 0.55); }
- .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
- color: rgba(0, 0, 0, 0.7); }
- .navbar-light .navbar-nav .nav-link.disabled {
- color: rgba(0, 0, 0, 0.3); }
-
-.navbar-light .navbar-nav .show > .nav-link,
-.navbar-light .navbar-nav .nav-link.active {
- color: rgba(0, 0, 0, 0.9); }
-
-.navbar-light .navbar-toggler {
- color: rgba(0, 0, 0, 0.55);
- border-color: rgba(0, 0, 0, 0.1); }
-
-.navbar-light .navbar-toggler-icon {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
-
-.navbar-light .navbar-text {
- color: rgba(0, 0, 0, 0.55); }
- .navbar-light .navbar-text a,
- .navbar-light .navbar-text a:hover,
- .navbar-light .navbar-text a:focus {
- color: rgba(0, 0, 0, 0.9); }
-
-.navbar-dark .navbar-brand {
- color: #fff; }
- .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
- color: #fff; }
-
-.navbar-dark .navbar-nav .nav-link {
- color: rgba(255, 255, 255, 0.55); }
- .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
- color: rgba(255, 255, 255, 0.75); }
- .navbar-dark .navbar-nav .nav-link.disabled {
- color: rgba(255, 255, 255, 0.25); }
-
-.navbar-dark .navbar-nav .show > .nav-link,
-.navbar-dark .navbar-nav .nav-link.active {
- color: #fff; }
-
-.navbar-dark .navbar-toggler {
- color: rgba(255, 255, 255, 0.55);
- border-color: rgba(255, 255, 255, 0.1); }
-
-.navbar-dark .navbar-toggler-icon {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
-
-.navbar-dark .navbar-text {
- color: rgba(255, 255, 255, 0.55); }
- .navbar-dark .navbar-text a,
- .navbar-dark .navbar-text a:hover,
- .navbar-dark .navbar-text a:focus {
- color: #fff; }
+.navbar-dark {
+ --bs-navbar-color: rgba(255, 255, 255, 0.55);
+ --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
+ --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+ --bs-navbar-active-color: #fff;
+ --bs-navbar-brand-color: #fff;
+ --bs-navbar-brand-hover-color: #fff;
+ --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
+ --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.card {
+ --bs-card-spacer-y: 1rem;
+ --bs-card-spacer-x: 1rem;
+ --bs-card-title-spacer-y: 0.5rem;
+ --bs-card-border-width: 1px;
+ --bs-card-border-color: var(--bs-border-color-translucent);
+ --bs-card-border-radius: 0.375rem;
+ --bs-card-box-shadow: ;
+ --bs-card-inner-border-radius: calc(0.375rem - 1px);
+ --bs-card-cap-padding-y: 0.5rem;
+ --bs-card-cap-padding-x: 1rem;
+ --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
+ --bs-card-cap-color: ;
+ --bs-card-height: ;
+ --bs-card-color: ;
+ --bs-card-bg: #fff;
+ --bs-card-img-overlay-padding: 1rem;
+ --bs-card-group-margin: 0.75rem;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
+ height: var(--bs-card-height);
word-wrap: break-word;
- background-color: #fff;
+ background-color: var(--bs-card-bg);
background-clip: border-box;
- border: 1px solid rgba(0, 0, 0, 0.125);
- border-radius: 0.25rem; }
+ border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+ border-radius: var(--bs-card-border-radius); }
.card > hr {
margin-right: 0;
margin-left: 0; }
@@ -3348,57 +3380,63 @@ textarea.form-control-lg {
border-bottom: inherit; }
.card > .list-group:first-child {
border-top-width: 0;
- border-top-left-radius: calc(0.25rem - 1px);
- border-top-right-radius: calc(0.25rem - 1px); }
+ border-top-left-radius: var(--bs-card-inner-border-radius);
+ border-top-right-radius: var(--bs-card-inner-border-radius); }
.card > .list-group:last-child {
border-bottom-width: 0;
- border-bottom-right-radius: calc(0.25rem - 1px);
- border-bottom-left-radius: calc(0.25rem - 1px); }
+ border-bottom-right-radius: var(--bs-card-inner-border-radius);
+ border-bottom-left-radius: var(--bs-card-inner-border-radius); }
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
border-top: 0; }
.card-body {
flex: 1 1 auto;
- padding: 1rem 1rem; }
+ padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+ color: var(--bs-card-color); }
.card-title {
- margin-bottom: 0.5rem; }
+ margin-bottom: var(--bs-card-title-spacer-y); }
.card-subtitle {
- margin-top: -0.25rem;
+ margin-top: calc(-.5 * var(--bs-card-title-spacer-y));
margin-bottom: 0; }
.card-text:last-child {
margin-bottom: 0; }
.card-link + .card-link {
- margin-left: 1rem; }
+ margin-left: var(--bs-card-spacer-x); }
.card-header {
- padding: 0.5rem 1rem;
+ padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
margin-bottom: 0;
- background-color: rgba(0, 0, 0, 0.03);
- border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
+ color: var(--bs-card-cap-color);
+ background-color: var(--bs-card-cap-bg);
+ border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color); }
.card-header:first-child {
- border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; }
+ border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.card-footer {
- padding: 0.5rem 1rem;
- background-color: rgba(0, 0, 0, 0.03);
- border-top: 1px solid rgba(0, 0, 0, 0.125); }
+ padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+ color: var(--bs-card-cap-color);
+ background-color: var(--bs-card-cap-bg);
+ border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); }
.card-footer:last-child {
- border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }
+ border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
.card-header-tabs {
- margin-right: -0.5rem;
- margin-bottom: -0.5rem;
- margin-left: -0.5rem;
+ margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
+ margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
+ margin-left: calc(-.5 * var(--bs-card-cap-padding-x));
border-bottom: 0; }
+ .card-header-tabs .nav-link.active {
+ background-color: var(--bs-card-bg);
+ border-bottom-color: var(--bs-card-bg); }
.card-header-pills {
- margin-right: -0.5rem;
- margin-left: -0.5rem; }
+ margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
+ margin-left: calc(-.5 * var(--bs-card-cap-padding-x)); }
.card-img-overlay {
position: absolute;
@@ -3406,8 +3444,8 @@ textarea.form-control-lg {
right: 0;
bottom: 0;
left: 0;
- padding: 1rem;
- border-radius: calc(0.25rem - 1px); }
+ padding: var(--bs-card-img-overlay-padding);
+ border-radius: var(--bs-card-inner-border-radius); }
.card-img,
.card-img-top,
@@ -3416,16 +3454,16 @@ textarea.form-control-lg {
.card-img,
.card-img-top {
- border-top-left-radius: calc(0.25rem - 1px);
- border-top-right-radius: calc(0.25rem - 1px); }
+ border-top-left-radius: var(--bs-card-inner-border-radius);
+ border-top-right-radius: var(--bs-card-inner-border-radius); }
.card-img,
.card-img-bottom {
- border-bottom-right-radius: calc(0.25rem - 1px);
- border-bottom-left-radius: calc(0.25rem - 1px); }
+ border-bottom-right-radius: var(--bs-card-inner-border-radius);
+ border-bottom-left-radius: var(--bs-card-inner-border-radius); }
.card-group > .card {
- margin-bottom: 0.75rem; }
+ margin-bottom: var(--bs-card-group-margin); }
@media (min-width: 576px) {
.card-group {
@@ -3456,40 +3494,64 @@ textarea.form-control-lg {
.card-group > .card:not(:first-child) .card-footer {
border-bottom-left-radius: 0; } }
+.accordion {
+ --bs-accordion-color: #212529;
+ --bs-accordion-bg: #fff;
+ --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+ --bs-accordion-border-color: var(--bs-border-color);
+ --bs-accordion-border-width: 1px;
+ --bs-accordion-border-radius: 0.375rem;
+ --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
+ --bs-accordion-btn-padding-x: 1.25rem;
+ --bs-accordion-btn-padding-y: 1rem;
+ --bs-accordion-btn-color: #212529;
+ --bs-accordion-btn-bg: var(--bs-accordion-bg);
+ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ --bs-accordion-btn-icon-width: 1.25rem;
+ --bs-accordion-btn-icon-transform: rotate(-180deg);
+ --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+ --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ --bs-accordion-btn-focus-border-color: #86b7fe;
+ --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+ --bs-accordion-body-padding-x: 1.25rem;
+ --bs-accordion-body-padding-y: 1rem;
+ --bs-accordion-active-color: #0c63e4;
+ --bs-accordion-active-bg: #e7f1ff; }
+
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
- padding: 1rem 1.25rem;
+ padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 1rem;
- color: #212529;
+ color: var(--bs-accordion-btn-color);
text-align: left;
- background-color: #fff;
+ background-color: var(--bs-accordion-btn-bg);
border: 0;
border-radius: 0;
overflow-anchor: none;
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; }
+ transition: var(--bs-accordion-transition); }
@media (prefers-reduced-motion: reduce) {
.accordion-button {
transition: none; } }
.accordion-button:not(.collapsed) {
- color: #0c63e4;
- background-color: #e7f1ff;
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125); }
+ color: var(--bs-accordion-active-color);
+ background-color: var(--bs-accordion-active-bg);
+ box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }
.accordion-button:not(.collapsed)::after {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
- transform: rotate(-180deg); }
+ background-image: var(--bs-accordion-btn-active-icon);
+ transform: var(--bs-accordion-btn-icon-transform); }
.accordion-button::after {
flex-shrink: 0;
- width: 1.25rem;
- height: 1.25rem;
+ width: var(--bs-accordion-btn-icon-width);
+ height: var(--bs-accordion-btn-icon-width);
margin-left: auto;
content: "";
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+ background-image: var(--bs-accordion-btn-icon);
background-repeat: no-repeat;
- background-size: 1.25rem;
- transition: transform 0.2s ease-in-out; }
+ background-size: var(--bs-accordion-btn-icon-width);
+ transition: var(--bs-accordion-btn-icon-transition); }
@media (prefers-reduced-motion: reduce) {
.accordion-button::after {
transition: none; } }
@@ -3497,36 +3559,37 @@ textarea.form-control-lg {
z-index: 2; }
.accordion-button:focus {
z-index: 3;
- border-color: #86b7fe;
+ border-color: var(--bs-accordion-btn-focus-border-color);
outline: 0;
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
+ box-shadow: var(--bs-accordion-btn-focus-box-shadow); }
.accordion-header {
margin-bottom: 0; }
.accordion-item {
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.125); }
+ color: var(--bs-accordion-color);
+ background-color: var(--bs-accordion-bg);
+ border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); }
.accordion-item:first-of-type {
- border-top-left-radius: 0.25rem;
- border-top-right-radius: 0.25rem; }
+ border-top-left-radius: var(--bs-accordion-border-radius);
+ border-top-right-radius: var(--bs-accordion-border-radius); }
.accordion-item:first-of-type .accordion-button {
- border-top-left-radius: calc(0.25rem - 1px);
- border-top-right-radius: calc(0.25rem - 1px); }
+ border-top-left-radius: var(--bs-accordion-inner-border-radius);
+ border-top-right-radius: var(--bs-accordion-inner-border-radius); }
.accordion-item:not(:first-of-type) {
border-top: 0; }
.accordion-item:last-of-type {
- border-bottom-right-radius: 0.25rem;
- border-bottom-left-radius: 0.25rem; }
+ border-bottom-right-radius: var(--bs-accordion-border-radius);
+ border-bottom-left-radius: var(--bs-accordion-border-radius); }
.accordion-item:last-of-type .accordion-button.collapsed {
- border-bottom-right-radius: calc(0.25rem - 1px);
- border-bottom-left-radius: calc(0.25rem - 1px); }
+ border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
+ border-bottom-left-radius: var(--bs-accordion-inner-border-radius); }
.accordion-item:last-of-type .accordion-collapse {
- border-bottom-right-radius: 0.25rem;
- border-bottom-left-radius: 0.25rem; }
+ border-bottom-right-radius: var(--bs-accordion-border-radius);
+ border-bottom-left-radius: var(--bs-accordion-border-radius); }
.accordion-body {
- padding: 1rem 1.25rem; }
+ padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); }
.accordion-flush .accordion-collapse {
border-width: 0; }
@@ -3539,28 +3602,59 @@ textarea.form-control-lg {
border-top: 0; }
.accordion-flush .accordion-item:last-child {
border-bottom: 0; }
- .accordion-flush .accordion-item .accordion-button {
+ .accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
border-radius: 0; }
.breadcrumb {
+ --bs-breadcrumb-padding-x: 0;
+ --bs-breadcrumb-padding-y: 0;
+ --bs-breadcrumb-margin-bottom: 1rem;
+ --bs-breadcrumb-bg: ;
+ --bs-breadcrumb-border-radius: ;
+ --bs-breadcrumb-divider-color: #6c757d;
+ --bs-breadcrumb-item-padding-x: 0.5rem;
+ --bs-breadcrumb-item-active-color: #6c757d;
display: flex;
flex-wrap: wrap;
- padding: 0 0;
- margin-bottom: 1rem;
- list-style: none; }
+ padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
+ margin-bottom: var(--bs-breadcrumb-margin-bottom);
+ font-size: var(--bs-breadcrumb-font-size);
+ list-style: none;
+ background-color: var(--bs-breadcrumb-bg);
+ border-radius: var(--bs-breadcrumb-border-radius); }
.breadcrumb-item + .breadcrumb-item {
- padding-left: 0.5rem; }
+ padding-left: var(--bs-breadcrumb-item-padding-x); }
.breadcrumb-item + .breadcrumb-item::before {
float: left;
- padding-right: 0.5rem;
- color: #6c757d;
+ padding-right: var(--bs-breadcrumb-item-padding-x);
+ color: var(--bs-breadcrumb-divider-color);
content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; }
.breadcrumb-item.active {
- color: #6c757d; }
+ color: var(--bs-breadcrumb-item-active-color); }
.pagination {
+ --bs-pagination-padding-x: 0.75rem;
+ --bs-pagination-padding-y: 0.375rem;
+ --bs-pagination-font-size: 1rem;
+ --bs-pagination-color: var(--bs-link-color);
+ --bs-pagination-bg: #fff;
+ --bs-pagination-border-width: 1px;
+ --bs-pagination-border-color: #dee2e6;
+ --bs-pagination-border-radius: 0.375rem;
+ --bs-pagination-hover-color: var(--bs-link-hover-color);
+ --bs-pagination-hover-bg: #e9ecef;
+ --bs-pagination-hover-border-color: #dee2e6;
+ --bs-pagination-focus-color: var(--bs-link-hover-color);
+ --bs-pagination-focus-bg: #e9ecef;
+ --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+ --bs-pagination-active-color: #fff;
+ --bs-pagination-active-bg: #0d6efd;
+ --bs-pagination-active-border-color: #0d6efd;
+ --bs-pagination-disabled-color: #6c757d;
+ --bs-pagination-disabled-bg: #fff;
+ --bs-pagination-disabled-border-color: #dee2e6;
display: flex;
padding-left: 0;
list-style: none; }
@@ -3568,87 +3662,78 @@ textarea.form-control-lg {
.page-link {
position: relative;
display: block;
- color: #0d6efd;
+ padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
+ font-size: var(--bs-pagination-font-size);
+ color: var(--bs-pagination-color);
text-decoration: none;
- background-color: #fff;
- border: 1px solid #dee2e6;
+ background-color: var(--bs-pagination-bg);
+ border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.page-link {
transition: none; } }
.page-link:hover {
z-index: 2;
- color: #0a58ca;
- background-color: #e9ecef;
- border-color: #dee2e6; }
+ color: var(--bs-pagination-hover-color);
+ background-color: var(--bs-pagination-hover-bg);
+ border-color: var(--bs-pagination-hover-border-color); }
.page-link:focus {
z-index: 3;
- color: #0a58ca;
- background-color: #e9ecef;
+ color: var(--bs-pagination-focus-color);
+ background-color: var(--bs-pagination-focus-bg);
outline: 0;
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
+ box-shadow: var(--bs-pagination-focus-box-shadow); }
+ .page-link.active, .active > .page-link {
+ z-index: 3;
+ color: var(--bs-pagination-active-color);
+ background-color: var(--bs-pagination-active-bg);
+ border-color: var(--bs-pagination-active-border-color); }
+ .page-link.disabled, .disabled > .page-link {
+ color: var(--bs-pagination-disabled-color);
+ pointer-events: none;
+ background-color: var(--bs-pagination-disabled-bg);
+ border-color: var(--bs-pagination-disabled-border-color); }
.page-item:not(:first-child) .page-link {
margin-left: -1px; }
-.page-item.active .page-link {
- z-index: 3;
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
-
-.page-item.disabled .page-link {
- color: #6c757d;
- pointer-events: none;
- background-color: #fff;
- border-color: #dee2e6; }
-
-.page-link {
- padding: 0.375rem 0.75rem; }
-
.page-item:first-child .page-link {
- border-top-left-radius: 0.25rem;
- border-bottom-left-radius: 0.25rem; }
+ border-top-left-radius: var(--bs-pagination-border-radius);
+ border-bottom-left-radius: var(--bs-pagination-border-radius); }
.page-item:last-child .page-link {
- border-top-right-radius: 0.25rem;
- border-bottom-right-radius: 0.25rem; }
+ border-top-right-radius: var(--bs-pagination-border-radius);
+ border-bottom-right-radius: var(--bs-pagination-border-radius); }
-.pagination-lg .page-link {
- padding: 0.75rem 1.5rem;
- font-size: 1.25rem; }
+.pagination-lg {
+ --bs-pagination-padding-x: 1.5rem;
+ --bs-pagination-padding-y: 0.75rem;
+ --bs-pagination-font-size: 1.25rem;
+ --bs-pagination-border-radius: 0.5rem; }
-.pagination-lg .page-item:first-child .page-link {
- border-top-left-radius: 0.3rem;
- border-bottom-left-radius: 0.3rem; }
-
-.pagination-lg .page-item:last-child .page-link {
- border-top-right-radius: 0.3rem;
- border-bottom-right-radius: 0.3rem; }
-
-.pagination-sm .page-link {
- padding: 0.25rem 0.5rem;
- font-size: 0.875rem; }
-
-.pagination-sm .page-item:first-child .page-link {
- border-top-left-radius: 0.2rem;
- border-bottom-left-radius: 0.2rem; }
-
-.pagination-sm .page-item:last-child .page-link {
- border-top-right-radius: 0.2rem;
- border-bottom-right-radius: 0.2rem; }
+.pagination-sm {
+ --bs-pagination-padding-x: 0.5rem;
+ --bs-pagination-padding-y: 0.25rem;
+ --bs-pagination-font-size: 0.875rem;
+ --bs-pagination-border-radius: 0.25rem; }
.badge {
+ --bs-badge-padding-x: 0.65em;
+ --bs-badge-padding-y: 0.35em;
+ --bs-badge-font-size: 0.75em;
+ --bs-badge-font-weight: 700;
+ --bs-badge-color: #fff;
+ --bs-badge-border-radius: 0.375rem;
display: inline-block;
- padding: 0.35em 0.65em;
- font-size: 0.75em;
- font-weight: 700;
+ padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+ font-size: var(--bs-badge-font-size);
+ font-weight: var(--bs-badge-font-weight);
line-height: 1;
- color: #fff;
+ color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
- border-radius: 0.25rem; }
+ border-radius: var(--bs-badge-border-radius); }
.badge:empty {
display: none; }
@@ -3657,11 +3742,21 @@ textarea.form-control-lg {
top: -1px; }
.alert {
+ --bs-alert-bg: transparent;
+ --bs-alert-padding-x: 1rem;
+ --bs-alert-padding-y: 1rem;
+ --bs-alert-margin-bottom: 1rem;
+ --bs-alert-color: inherit;
+ --bs-alert-border-color: transparent;
+ --bs-alert-border: 1px solid var(--bs-alert-border-color);
+ --bs-alert-border-radius: 0.375rem;
position: relative;
- padding: 1rem 1rem;
- margin-bottom: 1rem;
- border: 1px solid transparent;
- border-radius: 0.25rem; }
+ padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+ margin-bottom: var(--bs-alert-margin-bottom);
+ color: var(--bs-alert-color);
+ background-color: var(--bs-alert-bg);
+ border: var(--bs-alert-border);
+ border-radius: var(--bs-alert-border-radius); }
.alert-heading {
color: inherit; }
@@ -3679,58 +3774,58 @@ textarea.form-control-lg {
padding: 1.25rem 1rem; }
.alert-primary {
- color: #084298;
- background-color: #cfe2ff;
- border-color: #b6d4fe; }
+ --bs-alert-color: #084298;
+ --bs-alert-bg: #cfe2ff;
+ --bs-alert-border-color: #b6d4fe; }
.alert-primary .alert-link {
color: #06357a; }
.alert-secondary {
- color: #41464b;
- background-color: #e2e3e5;
- border-color: #d3d6d8; }
+ --bs-alert-color: #41464b;
+ --bs-alert-bg: #e2e3e5;
+ --bs-alert-border-color: #d3d6d8; }
.alert-secondary .alert-link {
color: #34383c; }
.alert-success {
- color: #0f5132;
- background-color: #d1e7dd;
- border-color: #badbcc; }
+ --bs-alert-color: #0f5132;
+ --bs-alert-bg: #d1e7dd;
+ --bs-alert-border-color: #badbcc; }
.alert-success .alert-link {
color: #0c4128; }
.alert-info {
- color: #055160;
- background-color: #cff4fc;
- border-color: #b6effb; }
+ --bs-alert-color: #055160;
+ --bs-alert-bg: #cff4fc;
+ --bs-alert-border-color: #b6effb; }
.alert-info .alert-link {
color: #04414d; }
.alert-warning {
- color: #664d03;
- background-color: #fff3cd;
- border-color: #ffecb5; }
+ --bs-alert-color: #664d03;
+ --bs-alert-bg: #fff3cd;
+ --bs-alert-border-color: #ffecb5; }
.alert-warning .alert-link {
color: #523e02; }
.alert-danger {
- color: #842029;
- background-color: #f8d7da;
- border-color: #f5c2c7; }
+ --bs-alert-color: #842029;
+ --bs-alert-bg: #f8d7da;
+ --bs-alert-border-color: #f5c2c7; }
.alert-danger .alert-link {
color: #6a1a21; }
.alert-light {
- color: #636464;
- background-color: #fefefe;
- border-color: #fdfdfe; }
+ --bs-alert-color: #636464;
+ --bs-alert-bg: #fefefe;
+ --bs-alert-border-color: #fdfdfe; }
.alert-light .alert-link {
color: #4f5050; }
.alert-dark {
- color: #141619;
- background-color: #d3d3d4;
- border-color: #bcbebf; }
+ --bs-alert-color: #141619;
+ --bs-alert-bg: #d3d3d4;
+ --bs-alert-border-color: #bcbebf; }
.alert-dark .alert-link {
color: #101214; }
@@ -3739,29 +3834,37 @@ textarea.form-control-lg {
background-position-x: 1rem; } }
.progress {
+ --bs-progress-height: 1rem;
+ --bs-progress-font-size: 0.75rem;
+ --bs-progress-bg: #e9ecef;
+ --bs-progress-border-radius: 0.375rem;
+ --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+ --bs-progress-bar-color: #fff;
+ --bs-progress-bar-bg: #0d6efd;
+ --bs-progress-bar-transition: width 0.6s ease;
display: flex;
- height: 1rem;
+ height: var(--bs-progress-height);
overflow: hidden;
- font-size: 0.75rem;
- background-color: #e9ecef;
- border-radius: 0.25rem; }
+ font-size: var(--bs-progress-font-size);
+ background-color: var(--bs-progress-bg);
+ border-radius: var(--bs-progress-border-radius); }
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
- color: #fff;
+ color: var(--bs-progress-bar-color);
text-align: center;
white-space: nowrap;
- background-color: #0d6efd;
- transition: width 0.6s ease; }
+ background-color: var(--bs-progress-bar-bg);
+ transition: var(--bs-progress-bar-transition); }
@media (prefers-reduced-motion: reduce) {
.progress-bar {
transition: none; } }
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-size: 1rem 1rem; }
+ background-size: var(--bs-progress-height) var(--bs-progress-height); }
.progress-bar-animated {
animation: 1s linear infinite progress-bar-stripes; }
@@ -3769,40 +3872,57 @@ textarea.form-control-lg {
.progress-bar-animated {
animation: none; } }
.list-group {
+ --bs-list-group-color: #212529;
+ --bs-list-group-bg: #fff;
+ --bs-list-group-border-color: rgba(0, 0, 0, 0.125);
+ --bs-list-group-border-width: 1px;
+ --bs-list-group-border-radius: 0.375rem;
+ --bs-list-group-item-padding-x: 1rem;
+ --bs-list-group-item-padding-y: 0.5rem;
+ --bs-list-group-action-color: #495057;
+ --bs-list-group-action-hover-color: #495057;
+ --bs-list-group-action-hover-bg: #f8f9fa;
+ --bs-list-group-action-active-color: #212529;
+ --bs-list-group-action-active-bg: #e9ecef;
+ --bs-list-group-disabled-color: #6c757d;
+ --bs-list-group-disabled-bg: #fff;
+ --bs-list-group-active-color: #fff;
+ --bs-list-group-active-bg: #0d6efd;
+ --bs-list-group-active-border-color: #0d6efd;
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
- border-radius: 0.25rem; }
+ border-radius: var(--bs-list-group-border-radius); }
.list-group-numbered {
list-style-type: none;
counter-reset: section; }
- .list-group-numbered > li::before {
+ .list-group-numbered > .list-group-item::before {
content: counters(section, ".") ". ";
counter-increment: section; }
.list-group-item-action {
width: 100%;
- color: #495057;
+ color: var(--bs-list-group-action-color);
text-align: inherit; }
.list-group-item-action:hover, .list-group-item-action:focus {
z-index: 1;
- color: #495057;
+ color: var(--bs-list-group-action-hover-color);
text-decoration: none;
- background-color: #f8f9fa; }
+ background-color: var(--bs-list-group-action-hover-bg); }
.list-group-item-action:active {
- color: #212529;
- background-color: #e9ecef; }
+ color: var(--bs-list-group-action-active-color);
+ background-color: var(--bs-list-group-action-active-bg); }
.list-group-item {
position: relative;
display: block;
- padding: 0.5rem 1rem;
- color: #212529;
+ padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+ color: var(--bs-list-group-color);
text-decoration: none;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.125); }
+ background-color: var(--bs-list-group-bg);
+ border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color); }
.list-group-item:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit; }
@@ -3810,131 +3930,131 @@ textarea.form-control-lg {
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit; }
.list-group-item.disabled, .list-group-item:disabled {
- color: #6c757d;
+ color: var(--bs-list-group-disabled-color);
pointer-events: none;
- background-color: #fff; }
+ background-color: var(--bs-list-group-disabled-bg); }
.list-group-item.active {
z-index: 2;
- color: #fff;
- background-color: #0d6efd;
- border-color: #0d6efd; }
+ color: var(--bs-list-group-active-color);
+ background-color: var(--bs-list-group-active-bg);
+ border-color: var(--bs-list-group-active-border-color); }
.list-group-item + .list-group-item {
border-top-width: 0; }
.list-group-item + .list-group-item.active {
- margin-top: -1px;
- border-top-width: 1px; }
+ margin-top: calc(-1 * var(--bs-list-group-border-width));
+ border-top-width: var(--bs-list-group-border-width); }
.list-group-horizontal {
flex-direction: row; }
- .list-group-horizontal > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); }
@media (min-width: 576px) {
.list-group-horizontal-sm {
flex-direction: row; }
- .list-group-horizontal-sm > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal-sm > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal-sm > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-sm > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal-sm > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; } }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); } }
@media (min-width: 768px) {
.list-group-horizontal-md {
flex-direction: row; }
- .list-group-horizontal-md > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal-md > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal-md > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-md > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal-md > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; } }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); } }
@media (min-width: 992px) {
.list-group-horizontal-lg {
flex-direction: row; }
- .list-group-horizontal-lg > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal-lg > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal-lg > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-lg > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal-lg > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; } }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); } }
@media (min-width: 1200px) {
.list-group-horizontal-xl {
flex-direction: row; }
- .list-group-horizontal-xl > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal-xl > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal-xl > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-xl > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal-xl > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; } }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); } }
@media (min-width: 1400px) {
.list-group-horizontal-xxl {
flex-direction: row; }
- .list-group-horizontal-xxl > .list-group-item:first-child {
- border-bottom-left-radius: 0.25rem;
+ .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
+ border-bottom-left-radius: var(--bs-list-group-border-radius);
border-top-right-radius: 0; }
- .list-group-horizontal-xxl > .list-group-item:last-child {
- border-top-right-radius: 0.25rem;
+ .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
+ border-top-right-radius: var(--bs-list-group-border-radius);
border-bottom-left-radius: 0; }
.list-group-horizontal-xxl > .list-group-item.active {
margin-top: 0; }
.list-group-horizontal-xxl > .list-group-item + .list-group-item {
- border-top-width: 1px;
+ border-top-width: var(--bs-list-group-border-width);
border-left-width: 0; }
.list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
- margin-left: -1px;
- border-left-width: 1px; } }
+ margin-left: calc(-1 * var(--bs-list-group-border-width));
+ border-left-width: var(--bs-list-group-border-width); } }
.list-group-flush {
border-radius: 0; }
.list-group-flush > .list-group-item {
- border-width: 0 0 1px; }
+ border-width: 0 0 var(--bs-list-group-border-width); }
.list-group-flush > .list-group-item:last-child {
border-bottom-width: 0; }
@@ -4032,9 +4152,9 @@ textarea.form-control-lg {
height: 1em;
padding: 0.25em 0.25em;
color: #000;
- background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+ background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
border: 0;
- border-radius: 0.25rem;
+ border-radius: 0.375rem;
opacity: 0.5; }
.btn-close:hover {
color: #000;
@@ -4053,50 +4173,90 @@ textarea.form-control-lg {
filter: invert(1) grayscale(100%) brightness(200%); }
.toast {
- width: 350px;
+ --bs-toast-zindex: 1090;
+ --bs-toast-padding-x: 0.75rem;
+ --bs-toast-padding-y: 0.5rem;
+ --bs-toast-spacing: 1.5rem;
+ --bs-toast-max-width: 350px;
+ --bs-toast-font-size: 0.875rem;
+ --bs-toast-color: ;
+ --bs-toast-bg: rgba(255, 255, 255, 0.85);
+ --bs-toast-border-width: 1px;
+ --bs-toast-border-color: var(--bs-border-color-translucent);
+ --bs-toast-border-radius: 0.375rem;
+ --bs-toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ --bs-toast-header-color: #6c757d;
+ --bs-toast-header-bg: rgba(255, 255, 255, 0.85);
+ --bs-toast-header-border-color: rgba(0, 0, 0, 0.05);
+ width: var(--bs-toast-max-width);
max-width: 100%;
- font-size: 0.875rem;
+ font-size: var(--bs-toast-font-size);
+ color: var(--bs-toast-color);
pointer-events: auto;
- background-color: rgba(255, 255, 255, 0.85);
+ background-color: var(--bs-toast-bg);
background-clip: padding-box;
- border: 1px solid rgba(0, 0, 0, 0.1);
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
- border-radius: 0.25rem; }
+ border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
+ box-shadow: var(--bs-toast-box-shadow);
+ border-radius: var(--bs-toast-border-radius); }
.toast.showing {
opacity: 0; }
.toast:not(.show) {
display: none; }
.toast-container {
+ --bs-toast-zindex: 1090;
+ position: absolute;
+ z-index: var(--bs-toast-zindex);
width: max-content;
max-width: 100%;
pointer-events: none; }
.toast-container > :not(:last-child) {
- margin-bottom: 0.75rem; }
+ margin-bottom: var(--bs-toast-spacing); }
.toast-header {
display: flex;
align-items: center;
- padding: 0.5rem 0.75rem;
- color: #6c757d;
- background-color: rgba(255, 255, 255, 0.85);
+ padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
+ color: var(--bs-toast-header-color);
+ background-color: var(--bs-toast-header-bg);
background-clip: padding-box;
- border-bottom: 1px solid rgba(0, 0, 0, 0.05);
- border-top-left-radius: calc(0.25rem - 1px);
- border-top-right-radius: calc(0.25rem - 1px); }
+ border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
+ border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
+ border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); }
.toast-header .btn-close {
- margin-right: -0.375rem;
- margin-left: 0.75rem; }
+ margin-right: calc(-.5 * var(--bs-toast-padding-x));
+ margin-left: var(--bs-toast-padding-x); }
.toast-body {
- padding: 0.75rem;
+ padding: var(--bs-toast-padding-x);
word-wrap: break-word; }
.modal {
+ --bs-modal-zindex: 1055;
+ --bs-modal-width: 500px;
+ --bs-modal-padding: 1rem;
+ --bs-modal-margin: 0.5rem;
+ --bs-modal-color: ;
+ --bs-modal-bg: #fff;
+ --bs-modal-border-color: var(--bs-border-color-translucent);
+ --bs-modal-border-width: 1px;
+ --bs-modal-border-radius: 0.5rem;
+ --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+ --bs-modal-inner-border-radius: calc(0.5rem - 1px);
+ --bs-modal-header-padding-x: 1rem;
+ --bs-modal-header-padding-y: 1rem;
+ --bs-modal-header-padding: 1rem 1rem;
+ --bs-modal-header-border-color: var(--bs-border-color);
+ --bs-modal-header-border-width: 1px;
+ --bs-modal-title-line-height: 1.5;
+ --bs-modal-footer-gap: 0.5rem;
+ --bs-modal-footer-bg: ;
+ --bs-modal-footer-border-color: var(--bs-border-color);
+ --bs-modal-footer-border-width: 1px;
position: fixed;
top: 0;
left: 0;
- z-index: 1055;
+ z-index: var(--bs-modal-zindex);
display: none;
width: 100%;
height: 100%;
@@ -4107,7 +4267,7 @@ textarea.form-control-lg {
.modal-dialog {
position: relative;
width: auto;
- margin: 0.5rem;
+ margin: var(--bs-modal-margin);
pointer-events: none; }
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
@@ -4121,7 +4281,7 @@ textarea.form-control-lg {
transform: scale(1.02); }
.modal-dialog-scrollable {
- height: calc(100% - 1rem); }
+ height: calc(100% - var(--bs-modal-margin) * 2); }
.modal-dialog-scrollable .modal-content {
max-height: 100%;
overflow: hidden; }
@@ -4131,87 +4291,92 @@ textarea.form-control-lg {
.modal-dialog-centered {
display: flex;
align-items: center;
- min-height: calc(100% - 1rem); }
+ min-height: calc(100% - var(--bs-modal-margin) * 2); }
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
+ color: var(--bs-modal-color);
pointer-events: auto;
- background-color: #fff;
+ background-color: var(--bs-modal-bg);
background-clip: padding-box;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 0.3rem;
+ border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+ border-radius: var(--bs-modal-border-radius);
outline: 0; }
.modal-backdrop {
+ --bs-backdrop-zindex: 1050;
+ --bs-backdrop-bg: #000;
+ --bs-backdrop-opacity: 0.5;
position: fixed;
top: 0;
left: 0;
- z-index: 1050;
+ z-index: var(--bs-backdrop-zindex);
width: 100vw;
height: 100vh;
- background-color: #000; }
+ background-color: var(--bs-backdrop-bg); }
.modal-backdrop.fade {
opacity: 0; }
.modal-backdrop.show {
- opacity: 0.5; }
+ opacity: var(--bs-backdrop-opacity); }
.modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
- padding: 1rem 1rem;
- border-bottom: 1px solid #dee2e6;
- border-top-left-radius: calc(0.3rem - 1px);
- border-top-right-radius: calc(0.3rem - 1px); }
+ padding: var(--bs-modal-header-padding);
+ border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
+ border-top-left-radius: var(--bs-modal-inner-border-radius);
+ border-top-right-radius: var(--bs-modal-inner-border-radius); }
.modal-header .btn-close {
- padding: 0.5rem 0.5rem;
- margin: -0.5rem -0.5rem -0.5rem auto; }
+ padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
+ margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto; }
.modal-title {
margin-bottom: 0;
- line-height: 1.5; }
+ line-height: var(--bs-modal-title-line-height); }
.modal-body {
position: relative;
flex: 1 1 auto;
- padding: 1rem; }
+ padding: var(--bs-modal-padding); }
.modal-footer {
display: flex;
- flex-wrap: wrap;
flex-shrink: 0;
+ flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
- padding: 0.75rem;
- border-top: 1px solid #dee2e6;
- border-bottom-right-radius: calc(0.3rem - 1px);
- border-bottom-left-radius: calc(0.3rem - 1px); }
+ padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
+ background-color: var(--bs-modal-footer-bg);
+ border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
+ border-bottom-right-radius: var(--bs-modal-inner-border-radius);
+ border-bottom-left-radius: var(--bs-modal-inner-border-radius); }
.modal-footer > * {
- margin: 0.25rem; }
+ margin: calc(var(--bs-modal-footer-gap) * .5); }
@media (min-width: 576px) {
+ .modal {
+ --bs-modal-margin: 1.75rem;
+ --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.modal-dialog {
- max-width: 500px;
- margin: 1.75rem auto; }
- .modal-dialog-scrollable {
- height: calc(100% - 3.5rem); }
- .modal-dialog-centered {
- min-height: calc(100% - 3.5rem); }
+ max-width: var(--bs-modal-width);
+ margin-right: auto;
+ margin-left: auto; }
.modal-sm {
- max-width: 300px; } }
+ --bs-modal-width: 300px; } }
@media (min-width: 992px) {
.modal-lg,
.modal-xl {
- max-width: 800px; } }
+ --bs-modal-width: 800px; } }
@media (min-width: 1200px) {
.modal-xl {
- max-width: 1140px; } }
+ --bs-modal-width: 1140px; } }
.modal-fullscreen {
width: 100vw;
@@ -4222,12 +4387,11 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen .modal-header {
+ .modal-fullscreen .modal-header,
+ .modal-fullscreen .modal-footer {
border-radius: 0; }
.modal-fullscreen .modal-body {
overflow-y: auto; }
- .modal-fullscreen .modal-footer {
- border-radius: 0; }
@media (max-width: 575.98px) {
.modal-fullscreen-sm-down {
@@ -4239,12 +4403,11 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen-sm-down .modal-header {
+ .modal-fullscreen-sm-down .modal-header,
+ .modal-fullscreen-sm-down .modal-footer {
border-radius: 0; }
.modal-fullscreen-sm-down .modal-body {
- overflow-y: auto; }
- .modal-fullscreen-sm-down .modal-footer {
- border-radius: 0; } }
+ overflow-y: auto; } }
@media (max-width: 767.98px) {
.modal-fullscreen-md-down {
@@ -4256,12 +4419,11 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen-md-down .modal-header {
+ .modal-fullscreen-md-down .modal-header,
+ .modal-fullscreen-md-down .modal-footer {
border-radius: 0; }
.modal-fullscreen-md-down .modal-body {
- overflow-y: auto; }
- .modal-fullscreen-md-down .modal-footer {
- border-radius: 0; } }
+ overflow-y: auto; } }
@media (max-width: 991.98px) {
.modal-fullscreen-lg-down {
@@ -4273,12 +4435,11 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen-lg-down .modal-header {
+ .modal-fullscreen-lg-down .modal-header,
+ .modal-fullscreen-lg-down .modal-footer {
border-radius: 0; }
.modal-fullscreen-lg-down .modal-body {
- overflow-y: auto; }
- .modal-fullscreen-lg-down .modal-footer {
- border-radius: 0; } }
+ overflow-y: auto; } }
@media (max-width: 1199.98px) {
.modal-fullscreen-xl-down {
@@ -4290,12 +4451,11 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen-xl-down .modal-header {
+ .modal-fullscreen-xl-down .modal-header,
+ .modal-fullscreen-xl-down .modal-footer {
border-radius: 0; }
.modal-fullscreen-xl-down .modal-body {
- overflow-y: auto; }
- .modal-fullscreen-xl-down .modal-footer {
- border-radius: 0; } }
+ overflow-y: auto; } }
@media (max-width: 1399.98px) {
.modal-fullscreen-xxl-down {
@@ -4307,18 +4467,29 @@ textarea.form-control-lg {
height: 100%;
border: 0;
border-radius: 0; }
- .modal-fullscreen-xxl-down .modal-header {
+ .modal-fullscreen-xxl-down .modal-header,
+ .modal-fullscreen-xxl-down .modal-footer {
border-radius: 0; }
.modal-fullscreen-xxl-down .modal-body {
- overflow-y: auto; }
- .modal-fullscreen-xxl-down .modal-footer {
- border-radius: 0; } }
+ overflow-y: auto; } }
.tooltip {
- position: absolute;
- z-index: 1080;
+ --bs-tooltip-zindex: 1080;
+ --bs-tooltip-max-width: 200px;
+ --bs-tooltip-padding-x: 0.5rem;
+ --bs-tooltip-padding-y: 0.25rem;
+ --bs-tooltip-margin: ;
+ --bs-tooltip-font-size: 0.875rem;
+ --bs-tooltip-color: #fff;
+ --bs-tooltip-bg: #000;
+ --bs-tooltip-border-radius: 0.375rem;
+ --bs-tooltip-opacity: 0.9;
+ --bs-tooltip-arrow-width: 0.8rem;
+ --bs-tooltip-arrow-height: 0.4rem;
+ z-index: var(--bs-tooltip-zindex);
display: block;
- margin: 0;
+ padding: var(--bs-tooltip-arrow-height);
+ margin: var(--bs-tooltip-margin);
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
@@ -4330,80 +4501,92 @@ textarea.form-control-lg {
text-transform: none;
letter-spacing: normal;
word-break: normal;
- word-spacing: normal;
white-space: normal;
+ word-spacing: normal;
line-break: auto;
- font-size: 0.875rem;
+ font-size: var(--bs-tooltip-font-size);
word-wrap: break-word;
opacity: 0; }
.tooltip.show {
- opacity: 0.9; }
+ opacity: var(--bs-tooltip-opacity); }
.tooltip .tooltip-arrow {
- position: absolute;
display: block;
- width: 0.8rem;
- height: 0.4rem; }
+ width: var(--bs-tooltip-arrow-width);
+ height: var(--bs-tooltip-arrow-height); }
.tooltip .tooltip-arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid; }
-.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^="top"] {
- padding: 0.4rem 0; }
- .bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
- bottom: 0; }
- .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
- top: -1px;
- border-width: 0.4rem 0.4rem 0;
- border-top-color: #000; }
+.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
+ bottom: 0; }
+ .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
+ top: -1px;
+ border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
+ border-top-color: var(--bs-tooltip-bg); }
-.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^="right"] {
- padding: 0 0.4rem; }
- .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
- left: 0;
- width: 0.4rem;
- height: 0.8rem; }
- .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
- right: -1px;
- border-width: 0.4rem 0.4rem 0.4rem 0;
- border-right-color: #000; }
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
+ left: 0;
+ width: var(--bs-tooltip-arrow-height);
+ height: var(--bs-tooltip-arrow-width); }
+ .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
+ right: -1px;
+ border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
+ border-right-color: var(--bs-tooltip-bg); }
-.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^="bottom"] {
- padding: 0.4rem 0; }
- .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
- top: 0; }
- .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
- bottom: -1px;
- border-width: 0 0.4rem 0.4rem;
- border-bottom-color: #000; }
+/* rtl:end:ignore */
+.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
+ top: 0; }
+ .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
+ bottom: -1px;
+ border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
+ border-bottom-color: var(--bs-tooltip-bg); }
-.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^="left"] {
- padding: 0 0.4rem; }
- .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
- right: 0;
- width: 0.4rem;
- height: 0.8rem; }
- .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
- left: -1px;
- border-width: 0.4rem 0 0.4rem 0.4rem;
- border-left-color: #000; }
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
+ right: 0;
+ width: var(--bs-tooltip-arrow-height);
+ height: var(--bs-tooltip-arrow-width); }
+ .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
+ left: -1px;
+ border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
+ border-left-color: var(--bs-tooltip-bg); }
+/* rtl:end:ignore */
.tooltip-inner {
- max-width: 200px;
- padding: 0.25rem 0.5rem;
- color: #fff;
+ max-width: var(--bs-tooltip-max-width);
+ padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
+ color: var(--bs-tooltip-color);
text-align: center;
- background-color: #000;
- border-radius: 0.25rem; }
+ background-color: var(--bs-tooltip-bg);
+ border-radius: var(--bs-tooltip-border-radius); }
.popover {
- position: absolute;
- top: 0;
- left: 0 /* rtl:ignore */;
- z-index: 1070;
+ --bs-popover-zindex: 1070;
+ --bs-popover-max-width: 276px;
+ --bs-popover-font-size: 0.875rem;
+ --bs-popover-bg: #fff;
+ --bs-popover-border-width: 1px;
+ --bs-popover-border-color: var(--bs-border-color-translucent);
+ --bs-popover-border-radius: 0.5rem;
+ --bs-popover-inner-border-radius: calc(0.5rem - 1px);
+ --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+ --bs-popover-header-padding-x: 1rem;
+ --bs-popover-header-padding-y: 0.5rem;
+ --bs-popover-header-font-size: 1rem;
+ --bs-popover-header-color: ;
+ --bs-popover-header-bg: #f0f0f0;
+ --bs-popover-body-padding-x: 1rem;
+ --bs-popover-body-padding-y: 1rem;
+ --bs-popover-body-color: #212529;
+ --bs-popover-arrow-width: 1rem;
+ --bs-popover-arrow-height: 0.5rem;
+ --bs-popover-arrow-border: var(--bs-popover-border-color);
+ z-index: var(--bs-popover-zindex);
display: block;
- max-width: 276px;
+ max-width: var(--bs-popover-max-width);
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
@@ -4415,99 +4598,104 @@ textarea.form-control-lg {
text-transform: none;
letter-spacing: normal;
word-break: normal;
- word-spacing: normal;
white-space: normal;
+ word-spacing: normal;
line-break: auto;
- font-size: 0.875rem;
+ font-size: var(--bs-popover-font-size);
word-wrap: break-word;
- background-color: #fff;
+ background-color: var(--bs-popover-bg);
background-clip: padding-box;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 0.3rem; }
+ border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+ border-radius: var(--bs-popover-border-radius); }
.popover .popover-arrow {
- position: absolute;
display: block;
- width: 1rem;
- height: 0.5rem; }
+ width: var(--bs-popover-arrow-width);
+ height: var(--bs-popover-arrow-height); }
.popover .popover-arrow::before, .popover .popover-arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
- border-style: solid; }
+ border-style: solid;
+ border-width: 0; }
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
- bottom: calc(-0.5rem - 1px); }
+ bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); }
+ .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
+ border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0; }
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
bottom: 0;
- border-width: 0.5rem 0.5rem 0;
- border-top-color: rgba(0, 0, 0, 0.25); }
+ border-top-color: var(--bs-popover-arrow-border); }
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
- bottom: 1px;
- border-width: 0.5rem 0.5rem 0;
- border-top-color: #fff; }
+ bottom: var(--bs-popover-border-width);
+ border-top-color: var(--bs-popover-bg); }
+/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
- left: calc(-0.5rem - 1px);
- width: 0.5rem;
- height: 1rem; }
+ left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+ width: var(--bs-popover-arrow-height);
+ height: var(--bs-popover-arrow-width); }
+ .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
+ border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0; }
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
left: 0;
- border-width: 0.5rem 0.5rem 0.5rem 0;
- border-right-color: rgba(0, 0, 0, 0.25); }
+ border-right-color: var(--bs-popover-arrow-border); }
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
- left: 1px;
- border-width: 0.5rem 0.5rem 0.5rem 0;
- border-right-color: #fff; }
+ left: var(--bs-popover-border-width);
+ border-right-color: var(--bs-popover-bg); }
+/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
- top: calc(-0.5rem - 1px); }
+ top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); }
+ .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
+ border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height); }
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
top: 0;
- border-width: 0 0.5rem 0.5rem 0.5rem;
- border-bottom-color: rgba(0, 0, 0, 0.25); }
+ border-bottom-color: var(--bs-popover-arrow-border); }
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
- top: 1px;
- border-width: 0 0.5rem 0.5rem 0.5rem;
- border-bottom-color: #fff; }
+ top: var(--bs-popover-border-width);
+ border-bottom-color: var(--bs-popover-bg); }
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
- width: 1rem;
- margin-left: -0.5rem;
+ width: var(--bs-popover-arrow-width);
+ margin-left: calc(-.5 * var(--bs-popover-arrow-width));
content: "";
- border-bottom: 1px solid #f0f0f0; }
+ border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg); }
+/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
- right: calc(-0.5rem - 1px);
- width: 0.5rem;
- height: 1rem; }
+ right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+ width: var(--bs-popover-arrow-height);
+ height: var(--bs-popover-arrow-width); }
+ .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
+ border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height); }
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
right: 0;
- border-width: 0.5rem 0 0.5rem 0.5rem;
- border-left-color: rgba(0, 0, 0, 0.25); }
+ border-left-color: var(--bs-popover-arrow-border); }
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
- right: 1px;
- border-width: 0.5rem 0 0.5rem 0.5rem;
- border-left-color: #fff; }
+ right: var(--bs-popover-border-width);
+ border-left-color: var(--bs-popover-bg); }
+/* rtl:end:ignore */
.popover-header {
- padding: 0.5rem 1rem;
+ padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
margin-bottom: 0;
- font-size: 1rem;
- background-color: #f0f0f0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
- border-top-left-radius: calc(0.3rem - 1px);
- border-top-right-radius: calc(0.3rem - 1px); }
+ font-size: var(--bs-popover-header-font-size);
+ color: var(--bs-popover-header-color);
+ background-color: var(--bs-popover-header-bg);
+ border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+ border-top-left-radius: var(--bs-popover-inner-border-radius);
+ border-top-right-radius: var(--bs-popover-inner-border-radius); }
.popover-header:empty {
display: none; }
.popover-body {
- padding: 1rem 1rem;
- color: #212529; }
+ padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
+ color: var(--bs-popover-body-color); }
.carousel {
position: relative; }
@@ -4540,7 +4728,6 @@ textarea.form-control-lg {
.carousel-item-prev {
display: block; }
-/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%); }
@@ -4549,7 +4736,6 @@ textarea.form-control-lg {
.active.carousel-item-start {
transform: translateX(-100%); }
-/* rtl:end:ignore */
.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
@@ -4684,24 +4870,33 @@ textarea.form-control-lg {
.carousel-dark .carousel-caption {
color: #000; }
+.spinner-grow,
+.spinner-border {
+ display: inline-block;
+ width: var(--bs-spinner-width);
+ height: var(--bs-spinner-height);
+ vertical-align: var(--bs-spinner-vertical-align);
+ border-radius: 50%;
+ animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name); }
+
@keyframes spinner-border {
to {
transform: rotate(360deg) /* rtl:ignore */; } }
.spinner-border {
- display: inline-block;
- width: 2rem;
- height: 2rem;
- vertical-align: -0.125em;
- border: 0.25em solid currentColor;
- border-right-color: transparent;
- border-radius: 50%;
- animation: 0.75s linear infinite spinner-border; }
+ --bs-spinner-width: 2rem;
+ --bs-spinner-height: 2rem;
+ --bs-spinner-vertical-align: -0.125em;
+ --bs-spinner-border-width: 0.25em;
+ --bs-spinner-animation-speed: 0.75s;
+ --bs-spinner-animation-name: spinner-border;
+ border: var(--bs-spinner-border-width) solid currentcolor;
+ border-right-color: transparent; }
.spinner-border-sm {
- width: 1rem;
- height: 1rem;
- border-width: 0.2em; }
+ --bs-spinner-width: 1rem;
+ --bs-spinner-height: 1rem;
+ --bs-spinner-border-width: 0.2em; }
@keyframes spinner-grow {
0% {
@@ -4711,39 +4906,403 @@ textarea.form-control-lg {
transform: none; } }
.spinner-grow {
- display: inline-block;
- width: 2rem;
- height: 2rem;
- vertical-align: -0.125em;
- background-color: currentColor;
- border-radius: 50%;
- opacity: 0;
- animation: 0.75s linear infinite spinner-grow; }
+ --bs-spinner-width: 2rem;
+ --bs-spinner-height: 2rem;
+ --bs-spinner-vertical-align: -0.125em;
+ --bs-spinner-animation-speed: 0.75s;
+ --bs-spinner-animation-name: spinner-grow;
+ background-color: currentcolor;
+ opacity: 0; }
.spinner-grow-sm {
- width: 1rem;
- height: 1rem; }
+ --bs-spinner-width: 1rem;
+ --bs-spinner-height: 1rem; }
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
- animation-duration: 1.5s; } }
+ --bs-spinner-animation-speed: 1.5s; } }
+
+.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
+ --bs-offcanvas-zindex: 1045;
+ --bs-offcanvas-width: 400px;
+ --bs-offcanvas-height: 30vh;
+ --bs-offcanvas-padding-x: 1rem;
+ --bs-offcanvas-padding-y: 1rem;
+ --bs-offcanvas-color: ;
+ --bs-offcanvas-bg: #fff;
+ --bs-offcanvas-border-width: 1px;
+ --bs-offcanvas-border-color: var(--bs-border-color-translucent);
+ --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
+
+@media (max-width: 575.98px) {
+ .offcanvas-sm {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--bs-offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--bs-offcanvas-color);
+ visibility: hidden;
+ background-color: var(--bs-offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ transition: transform 0.3s ease-in-out; } }
+ @media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
+ .offcanvas-sm {
+ transition: none; } }
+@media (max-width: 575.98px) {
+ .offcanvas-sm.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas-sm.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas-sm.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas-sm.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
+ transform: none; }
+ .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
+ visibility: visible; } }
+
+@media (min-width: 576px) {
+ .offcanvas-sm {
+ --bs-offcanvas-height: auto;
+ --bs-offcanvas-border-width: 0;
+ background-color: transparent !important; }
+ .offcanvas-sm .offcanvas-header {
+ display: none; }
+ .offcanvas-sm .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ background-color: transparent !important; } }
+
+@media (max-width: 767.98px) {
+ .offcanvas-md {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--bs-offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--bs-offcanvas-color);
+ visibility: hidden;
+ background-color: var(--bs-offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ transition: transform 0.3s ease-in-out; } }
+ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+ .offcanvas-md {
+ transition: none; } }
+@media (max-width: 767.98px) {
+ .offcanvas-md.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas-md.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas-md.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas-md.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
+ transform: none; }
+ .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
+ visibility: visible; } }
+
+@media (min-width: 768px) {
+ .offcanvas-md {
+ --bs-offcanvas-height: auto;
+ --bs-offcanvas-border-width: 0;
+ background-color: transparent !important; }
+ .offcanvas-md .offcanvas-header {
+ display: none; }
+ .offcanvas-md .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ background-color: transparent !important; } }
+
+@media (max-width: 991.98px) {
+ .offcanvas-lg {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--bs-offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--bs-offcanvas-color);
+ visibility: hidden;
+ background-color: var(--bs-offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ transition: transform 0.3s ease-in-out; } }
+ @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+ .offcanvas-lg {
+ transition: none; } }
+@media (max-width: 991.98px) {
+ .offcanvas-lg.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas-lg.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas-lg.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas-lg.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
+ transform: none; }
+ .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
+ visibility: visible; } }
+
+@media (min-width: 992px) {
+ .offcanvas-lg {
+ --bs-offcanvas-height: auto;
+ --bs-offcanvas-border-width: 0;
+ background-color: transparent !important; }
+ .offcanvas-lg .offcanvas-header {
+ display: none; }
+ .offcanvas-lg .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ background-color: transparent !important; } }
+
+@media (max-width: 1199.98px) {
+ .offcanvas-xl {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--bs-offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--bs-offcanvas-color);
+ visibility: hidden;
+ background-color: var(--bs-offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ transition: transform 0.3s ease-in-out; } }
+ @media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
+ .offcanvas-xl {
+ transition: none; } }
+@media (max-width: 1199.98px) {
+ .offcanvas-xl.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas-xl.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas-xl.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas-xl.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
+ transform: none; }
+ .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
+ visibility: visible; } }
+
+@media (min-width: 1200px) {
+ .offcanvas-xl {
+ --bs-offcanvas-height: auto;
+ --bs-offcanvas-border-width: 0;
+ background-color: transparent !important; }
+ .offcanvas-xl .offcanvas-header {
+ display: none; }
+ .offcanvas-xl .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ background-color: transparent !important; } }
+
+@media (max-width: 1399.98px) {
+ .offcanvas-xxl {
+ position: fixed;
+ bottom: 0;
+ z-index: var(--bs-offcanvas-zindex);
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--bs-offcanvas-color);
+ visibility: hidden;
+ background-color: var(--bs-offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ transition: transform 0.3s ease-in-out; } }
+ @media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
+ .offcanvas-xxl {
+ transition: none; } }
+@media (max-width: 1399.98px) {
+ .offcanvas-xxl.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas-xxl.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas-xxl.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas-xxl.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
+ transform: none; }
+ .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
+ visibility: visible; } }
+
+@media (min-width: 1400px) {
+ .offcanvas-xxl {
+ --bs-offcanvas-height: auto;
+ --bs-offcanvas-border-width: 0;
+ background-color: transparent !important; }
+ .offcanvas-xxl .offcanvas-header {
+ display: none; }
+ .offcanvas-xxl .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ background-color: transparent !important; } }
.offcanvas {
position: fixed;
bottom: 0;
- z-index: 1045;
+ z-index: var(--bs-offcanvas-zindex);
display: flex;
flex-direction: column;
max-width: 100%;
+ color: var(--bs-offcanvas-color);
visibility: hidden;
- background-color: #fff;
+ background-color: var(--bs-offcanvas-bg);
background-clip: padding-box;
outline: 0;
transition: transform 0.3s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.offcanvas {
transition: none; } }
+ .offcanvas.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--bs-offcanvas-width);
+ border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(-100%); }
+ .offcanvas.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--bs-offcanvas-width);
+ border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateX(100%); }
+ .offcanvas.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(-100%); }
+ .offcanvas.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--bs-offcanvas-height);
+ max-height: 100%;
+ border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+ transform: translateY(100%); }
+ .offcanvas.showing, .offcanvas.show:not(.hiding) {
+ transform: none; }
+ .offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
+ visibility: visible; }
+
.offcanvas-backdrop {
position: fixed;
top: 0;
@@ -4761,12 +5320,12 @@ textarea.form-control-lg {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 1rem 1rem; }
+ padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); }
.offcanvas-header .btn-close {
- padding: 0.5rem 0.5rem;
- margin-top: -0.5rem;
- margin-right: -0.5rem;
- margin-bottom: -0.5rem; }
+ padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
+ margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
+ margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
+ margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y)); }
.offcanvas-title {
margin-bottom: 0;
@@ -4774,49 +5333,15 @@ textarea.form-control-lg {
.offcanvas-body {
flex-grow: 1;
- padding: 1rem 1rem;
+ padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
overflow-y: auto; }
-.offcanvas-start {
- top: 0;
- left: 0;
- width: 400px;
- border-right: 1px solid rgba(0, 0, 0, 0.2);
- transform: translateX(-100%); }
-
-.offcanvas-end {
- top: 0;
- right: 0;
- width: 400px;
- border-left: 1px solid rgba(0, 0, 0, 0.2);
- transform: translateX(100%); }
-
-.offcanvas-top {
- top: 0;
- right: 0;
- left: 0;
- height: 30vh;
- max-height: 100%;
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
- transform: translateY(-100%); }
-
-.offcanvas-bottom {
- right: 0;
- left: 0;
- height: 30vh;
- max-height: 100%;
- border-top: 1px solid rgba(0, 0, 0, 0.2);
- transform: translateY(100%); }
-
-.offcanvas.show {
- transform: none; }
-
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
- background-color: currentColor;
+ background-color: currentcolor;
opacity: 0.5; }
.placeholder.btn::before {
display: inline-block;
@@ -4852,45 +5377,77 @@ textarea.form-control-lg {
clear: both;
content: ""; }
+.text-bg-primary {
+ color: #fff !important;
+ background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-secondary {
+ color: #fff !important;
+ background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-success {
+ color: #fff !important;
+ background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-info {
+ color: #000 !important;
+ background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-warning {
+ color: #000 !important;
+ background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-danger {
+ color: #fff !important;
+ background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-light {
+ color: #000 !important;
+ background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important; }
+
+.text-bg-dark {
+ color: #fff !important;
+ background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; }
+
.link-primary {
- color: #0d6efd; }
+ color: #0d6efd !important; }
.link-primary:hover, .link-primary:focus {
- color: #0a58ca; }
+ color: #0a58ca !important; }
.link-secondary {
- color: #6c757d; }
+ color: #6c757d !important; }
.link-secondary:hover, .link-secondary:focus {
- color: #565e64; }
+ color: #565e64 !important; }
.link-success {
- color: #198754; }
+ color: #198754 !important; }
.link-success:hover, .link-success:focus {
- color: #146c43; }
+ color: #146c43 !important; }
.link-info {
- color: #0dcaf0; }
+ color: #0dcaf0 !important; }
.link-info:hover, .link-info:focus {
- color: #3dd5f3; }
+ color: #3dd5f3 !important; }
.link-warning {
- color: #ffc107; }
+ color: #ffc107 !important; }
.link-warning:hover, .link-warning:focus {
- color: #ffcd39; }
+ color: #ffcd39 !important; }
.link-danger {
- color: #dc3545; }
+ color: #dc3545 !important; }
.link-danger:hover, .link-danger:focus {
- color: #b02a37; }
+ color: #b02a37 !important; }
.link-light {
- color: #f8f9fa; }
+ color: #f8f9fa !important; }
.link-light:hover, .link-light:focus {
- color: #f9fafb; }
+ color: #f9fafb !important; }
.link-dark {
- color: #212529; }
+ color: #212529 !important; }
.link-dark:hover, .link-dark:focus {
- color: #1a1e21; }
+ color: #1a1e21 !important; }
.ratio {
position: relative;
@@ -4937,34 +5494,59 @@ textarea.form-control-lg {
top: 0;
z-index: 1020; }
+.sticky-bottom {
+ position: sticky;
+ bottom: 0;
+ z-index: 1020; }
+
@media (min-width: 576px) {
.sticky-sm-top {
position: sticky;
top: 0;
+ z-index: 1020; }
+ .sticky-sm-bottom {
+ position: sticky;
+ bottom: 0;
z-index: 1020; } }
@media (min-width: 768px) {
.sticky-md-top {
position: sticky;
top: 0;
+ z-index: 1020; }
+ .sticky-md-bottom {
+ position: sticky;
+ bottom: 0;
z-index: 1020; } }
@media (min-width: 992px) {
.sticky-lg-top {
position: sticky;
top: 0;
+ z-index: 1020; }
+ .sticky-lg-bottom {
+ position: sticky;
+ bottom: 0;
z-index: 1020; } }
@media (min-width: 1200px) {
.sticky-xl-top {
position: sticky;
top: 0;
+ z-index: 1020; }
+ .sticky-xl-bottom {
+ position: sticky;
+ bottom: 0;
z-index: 1020; } }
@media (min-width: 1400px) {
.sticky-xxl-top {
position: sticky;
top: 0;
+ z-index: 1020; }
+ .sticky-xxl-bottom {
+ position: sticky;
+ bottom: 0;
z-index: 1020; } }
.hstack {
@@ -5010,7 +5592,7 @@ textarea.form-control-lg {
align-self: stretch;
width: 1px;
min-height: 1em;
- background-color: currentColor;
+ background-color: currentcolor;
opacity: 0.25; }
.align-baseline {
@@ -5170,76 +5752,100 @@ textarea.form-control-lg {
transform: translateY(-50%) !important; }
.border {
- border: 1px solid #dee2e6 !important; }
+ border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-0 {
border: 0 !important; }
.border-top {
- border-top: 1px solid #dee2e6 !important; }
+ border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-top-0 {
border-top: 0 !important; }
.border-end {
- border-right: 1px solid #dee2e6 !important; }
+ border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-end-0 {
border-right: 0 !important; }
.border-bottom {
- border-bottom: 1px solid #dee2e6 !important; }
+ border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-bottom-0 {
border-bottom: 0 !important; }
.border-start {
- border-left: 1px solid #dee2e6 !important; }
+ border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
.border-start-0 {
border-left: 0 !important; }
.border-primary {
- border-color: #0d6efd !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; }
.border-secondary {
- border-color: #6c757d !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; }
.border-success {
- border-color: #198754 !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; }
.border-info {
- border-color: #0dcaf0 !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; }
.border-warning {
- border-color: #ffc107 !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; }
.border-danger {
- border-color: #dc3545 !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; }
.border-light {
- border-color: #f8f9fa !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; }
.border-dark {
- border-color: #212529 !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; }
.border-white {
- border-color: #fff !important; }
+ --bs-border-opacity: 1;
+ border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; }
.border-1 {
- border-width: 1px !important; }
+ --bs-border-width: 1px; }
.border-2 {
- border-width: 2px !important; }
+ --bs-border-width: 2px; }
.border-3 {
- border-width: 3px !important; }
+ --bs-border-width: 3px; }
.border-4 {
- border-width: 4px !important; }
+ --bs-border-width: 4px; }
.border-5 {
- border-width: 5px !important; }
+ --bs-border-width: 5px; }
+
+.border-opacity-10 {
+ --bs-border-opacity: 0.1; }
+
+.border-opacity-25 {
+ --bs-border-opacity: 0.25; }
+
+.border-opacity-50 {
+ --bs-border-opacity: 0.5; }
+
+.border-opacity-75 {
+ --bs-border-opacity: 0.75; }
+
+.border-opacity-100 {
+ --bs-border-opacity: 1; }
.w-25 {
width: 25% !important; }
@@ -5325,24 +5931,6 @@ textarea.form-control-lg {
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important; }
-.gap-0 {
- gap: 0 !important; }
-
-.gap-1 {
- gap: 0.25rem !important; }
-
-.gap-2 {
- gap: 0.5rem !important; }
-
-.gap-3 {
- gap: 1rem !important; }
-
-.gap-4 {
- gap: 1.5rem !important; }
-
-.gap-5 {
- gap: 3rem !important; }
-
.justify-content-start {
justify-content: flex-start !important; }
@@ -5735,6 +6323,24 @@ textarea.form-control-lg {
.ps-5 {
padding-left: 3rem !important; }
+.gap-0 {
+ gap: 0 !important; }
+
+.gap-1 {
+ gap: 0.25rem !important; }
+
+.gap-2 {
+ gap: 0.5rem !important; }
+
+.gap-3 {
+ gap: 1rem !important; }
+
+.gap-4 {
+ gap: 1.5rem !important; }
+
+.gap-5 {
+ gap: 3rem !important; }
+
.font-monospace {
font-family: var(--bs-font-monospace) !important; }
@@ -5774,6 +6380,9 @@ textarea.form-control-lg {
.fw-bold {
font-weight: 700 !important; }
+.fw-semibold {
+ font-weight: 600 !important; }
+
.fw-bolder {
font-weight: bolder !important; }
@@ -5982,41 +6591,47 @@ textarea.form-control-lg {
pointer-events: auto !important; }
.rounded {
- border-radius: 0.25rem !important; }
+ border-radius: var(--bs-border-radius) !important; }
.rounded-0 {
border-radius: 0 !important; }
.rounded-1 {
- border-radius: 0.2rem !important; }
+ border-radius: var(--bs-border-radius-sm) !important; }
.rounded-2 {
- border-radius: 0.25rem !important; }
+ border-radius: var(--bs-border-radius) !important; }
.rounded-3 {
- border-radius: 0.3rem !important; }
+ border-radius: var(--bs-border-radius-lg) !important; }
+
+.rounded-4 {
+ border-radius: var(--bs-border-radius-xl) !important; }
+
+.rounded-5 {
+ border-radius: var(--bs-border-radius-2xl) !important; }
.rounded-circle {
border-radius: 50% !important; }
.rounded-pill {
- border-radius: 50rem !important; }
+ border-radius: var(--bs-border-radius-pill) !important; }
.rounded-top {
- border-top-left-radius: 0.25rem !important;
- border-top-right-radius: 0.25rem !important; }
+ border-top-left-radius: var(--bs-border-radius) !important;
+ border-top-right-radius: var(--bs-border-radius) !important; }
.rounded-end {
- border-top-right-radius: 0.25rem !important;
- border-bottom-right-radius: 0.25rem !important; }
+ border-top-right-radius: var(--bs-border-radius) !important;
+ border-bottom-right-radius: var(--bs-border-radius) !important; }
.rounded-bottom {
- border-bottom-right-radius: 0.25rem !important;
- border-bottom-left-radius: 0.25rem !important; }
+ border-bottom-right-radius: var(--bs-border-radius) !important;
+ border-bottom-left-radius: var(--bs-border-radius) !important; }
.rounded-start {
- border-bottom-left-radius: 0.25rem !important;
- border-top-left-radius: 0.25rem !important; }
+ border-bottom-left-radius: var(--bs-border-radius) !important;
+ border-top-left-radius: var(--bs-border-radius) !important; }
.visible {
visibility: visible !important; }
@@ -6075,18 +6690,6 @@ textarea.form-control-lg {
flex-wrap: nowrap !important; }
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important; }
- .gap-sm-0 {
- gap: 0 !important; }
- .gap-sm-1 {
- gap: 0.25rem !important; }
- .gap-sm-2 {
- gap: 0.5rem !important; }
- .gap-sm-3 {
- gap: 1rem !important; }
- .gap-sm-4 {
- gap: 1.5rem !important; }
- .gap-sm-5 {
- gap: 3rem !important; }
.justify-content-sm-start {
justify-content: flex-start !important; }
.justify-content-sm-end {
@@ -6357,6 +6960,18 @@ textarea.form-control-lg {
padding-left: 1.5rem !important; }
.ps-sm-5 {
padding-left: 3rem !important; }
+ .gap-sm-0 {
+ gap: 0 !important; }
+ .gap-sm-1 {
+ gap: 0.25rem !important; }
+ .gap-sm-2 {
+ gap: 0.5rem !important; }
+ .gap-sm-3 {
+ gap: 1rem !important; }
+ .gap-sm-4 {
+ gap: 1.5rem !important; }
+ .gap-sm-5 {
+ gap: 3rem !important; }
.text-sm-start {
text-align: left !important; }
.text-sm-end {
@@ -6415,18 +7030,6 @@ textarea.form-control-lg {
flex-wrap: nowrap !important; }
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important; }
- .gap-md-0 {
- gap: 0 !important; }
- .gap-md-1 {
- gap: 0.25rem !important; }
- .gap-md-2 {
- gap: 0.5rem !important; }
- .gap-md-3 {
- gap: 1rem !important; }
- .gap-md-4 {
- gap: 1.5rem !important; }
- .gap-md-5 {
- gap: 3rem !important; }
.justify-content-md-start {
justify-content: flex-start !important; }
.justify-content-md-end {
@@ -6697,6 +7300,18 @@ textarea.form-control-lg {
padding-left: 1.5rem !important; }
.ps-md-5 {
padding-left: 3rem !important; }
+ .gap-md-0 {
+ gap: 0 !important; }
+ .gap-md-1 {
+ gap: 0.25rem !important; }
+ .gap-md-2 {
+ gap: 0.5rem !important; }
+ .gap-md-3 {
+ gap: 1rem !important; }
+ .gap-md-4 {
+ gap: 1.5rem !important; }
+ .gap-md-5 {
+ gap: 3rem !important; }
.text-md-start {
text-align: left !important; }
.text-md-end {
@@ -6755,18 +7370,6 @@ textarea.form-control-lg {
flex-wrap: nowrap !important; }
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important; }
- .gap-lg-0 {
- gap: 0 !important; }
- .gap-lg-1 {
- gap: 0.25rem !important; }
- .gap-lg-2 {
- gap: 0.5rem !important; }
- .gap-lg-3 {
- gap: 1rem !important; }
- .gap-lg-4 {
- gap: 1.5rem !important; }
- .gap-lg-5 {
- gap: 3rem !important; }
.justify-content-lg-start {
justify-content: flex-start !important; }
.justify-content-lg-end {
@@ -7037,6 +7640,18 @@ textarea.form-control-lg {
padding-left: 1.5rem !important; }
.ps-lg-5 {
padding-left: 3rem !important; }
+ .gap-lg-0 {
+ gap: 0 !important; }
+ .gap-lg-1 {
+ gap: 0.25rem !important; }
+ .gap-lg-2 {
+ gap: 0.5rem !important; }
+ .gap-lg-3 {
+ gap: 1rem !important; }
+ .gap-lg-4 {
+ gap: 1.5rem !important; }
+ .gap-lg-5 {
+ gap: 3rem !important; }
.text-lg-start {
text-align: left !important; }
.text-lg-end {
@@ -7095,18 +7710,6 @@ textarea.form-control-lg {
flex-wrap: nowrap !important; }
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important; }
- .gap-xl-0 {
- gap: 0 !important; }
- .gap-xl-1 {
- gap: 0.25rem !important; }
- .gap-xl-2 {
- gap: 0.5rem !important; }
- .gap-xl-3 {
- gap: 1rem !important; }
- .gap-xl-4 {
- gap: 1.5rem !important; }
- .gap-xl-5 {
- gap: 3rem !important; }
.justify-content-xl-start {
justify-content: flex-start !important; }
.justify-content-xl-end {
@@ -7377,6 +7980,18 @@ textarea.form-control-lg {
padding-left: 1.5rem !important; }
.ps-xl-5 {
padding-left: 3rem !important; }
+ .gap-xl-0 {
+ gap: 0 !important; }
+ .gap-xl-1 {
+ gap: 0.25rem !important; }
+ .gap-xl-2 {
+ gap: 0.5rem !important; }
+ .gap-xl-3 {
+ gap: 1rem !important; }
+ .gap-xl-4 {
+ gap: 1.5rem !important; }
+ .gap-xl-5 {
+ gap: 3rem !important; }
.text-xl-start {
text-align: left !important; }
.text-xl-end {
@@ -7435,18 +8050,6 @@ textarea.form-control-lg {
flex-wrap: nowrap !important; }
.flex-xxl-wrap-reverse {
flex-wrap: wrap-reverse !important; }
- .gap-xxl-0 {
- gap: 0 !important; }
- .gap-xxl-1 {
- gap: 0.25rem !important; }
- .gap-xxl-2 {
- gap: 0.5rem !important; }
- .gap-xxl-3 {
- gap: 1rem !important; }
- .gap-xxl-4 {
- gap: 1.5rem !important; }
- .gap-xxl-5 {
- gap: 3rem !important; }
.justify-content-xxl-start {
justify-content: flex-start !important; }
.justify-content-xxl-end {
@@ -7717,6 +8320,18 @@ textarea.form-control-lg {
padding-left: 1.5rem !important; }
.ps-xxl-5 {
padding-left: 3rem !important; }
+ .gap-xxl-0 {
+ gap: 0 !important; }
+ .gap-xxl-1 {
+ gap: 0.25rem !important; }
+ .gap-xxl-2 {
+ gap: 0.5rem !important; }
+ .gap-xxl-3 {
+ gap: 1rem !important; }
+ .gap-xxl-4 {
+ gap: 1.5rem !important; }
+ .gap-xxl-5 {
+ gap: 3rem !important; }
.text-xxl-start {
text-align: left !important; }
.text-xxl-end {
@@ -7865,6 +8480,9 @@ table td.action-column {
.status-help-content-table td {
color: #34302D; }
+.logo {
+ width: 200px; }
+
.myspinner {
animation-name: spinner;
animation-duration: 2s;
diff --git a/src/main/resources/static/resources/images/platform-bg.png b/src/main/resources/static/resources/images/platform-bg.png
deleted file mode 100644
index 5121858..0000000
Binary files a/src/main/resources/static/resources/images/platform-bg.png and /dev/null differ
diff --git a/src/main/resources/static/resources/images/spring-logo.svg b/src/main/resources/static/resources/images/spring-logo.svg
new file mode 100644
index 0000000..5b2a27a
--- /dev/null
+++ b/src/main/resources/static/resources/images/spring-logo.svg
@@ -0,0 +1,66 @@
+
diff --git a/src/main/resources/static/resources/images/spring-pivotal-logo.png b/src/main/resources/static/resources/images/spring-pivotal-logo.png
deleted file mode 100644
index 1840af2..0000000
Binary files a/src/main/resources/static/resources/images/spring-pivotal-logo.png and /dev/null differ
diff --git a/src/main/resources/templates/fragments/layout.html b/src/main/resources/templates/fragments/layout.html
index f58a18c..024ea0e 100755
--- a/src/main/resources/templates/fragments/layout.html
+++ b/src/main/resources/templates/fragments/layout.html
@@ -80,8 +80,8 @@
-
+
+
diff --git a/src/main/scss/petclinic.scss b/src/main/scss/petclinic.scss
index febc6ee..7f3e64e 100644
--- a/src/main/scss/petclinic.scss
+++ b/src/main/scss/petclinic.scss
@@ -188,6 +188,10 @@ table td.action-column {
color: $spring-brown;
}
+.logo {
+ width: 200px;
+}
+
.myspinner {
animation-name: spinner;
animation-duration: 2s;