j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-24 15:15:22 +00:00
Code Issues Projects Releases Wiki Activity

Bootstrap5 (#17)

Browse source 
* Bootstrap5 migration
This commit is contained in:
catborise 2021-07-07 14:12:38 +03:00 committed by GitHub
parent 1663a49cee
commit 073b7b6717
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 9494 additions and 8597 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
accounts/templates/account.html
View file

@ -23,11 +23,15 @@
{% block content %} {% block content %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#instances">{% trans "Instances" %}</a> <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#instances" type="button" role="tab" aria-controls="instances" aria-selected="true">
{% trans "Instances" %}
</button>
</li> </li>
<li class="nav-item"> <li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#public-keys">{% trans "Public Keys" %}</a> <button class="nav-link" data-bs-toggle="tab" data-bs-target="#public-keys" type="button" role="tab" aria-controls="public-keys" aria-selected="false">
{% trans "Public Keys" %}
</button>
</li> </li>
</ul> </ul>

4
accounts/templates/accounts/change_password_form.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load i18n %} {% load i18n %}
{% load icons %} {% load icons %}
@ -20,7 +20,7 @@
</form> </form>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="float-right"> <div class="float-end">
<a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %}
{% trans "Cancel" %}</a> {% trans "Cancel" %}</a>
<button type="submit" form="password-change" class="btn btn-success"> <button type="submit" form="password-change" class="btn btn-success">

4
accounts/templates/accounts/email_otp_form.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load icons %} {% load icons %}
{% load i18n %} {% load i18n %}
@ -21,7 +21,7 @@
</form> </form>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="form-group mb-0 float-right"> <div class="mb-0 float-end">
<a class="btn btn-primary" href="javascript:history.back()">{% icon 'arrow-left' %} {% trans "Cancel" %}</a> <a class="btn btn-primary" href="javascript:history.back()">{% icon 'arrow-left' %} {% trans "Cancel" %}</a>
<button type="submit" form="create-update" class="btn btn-success"> <button type="submit" form="create-update" class="btn btn-success">
{% icon 'envelope-o' %} {% trans "Send" %} {% icon 'envelope-o' %} {% trans "Send" %}

4
accounts/templates/accounts/otp_login.html
View file

@ -1,7 +1,7 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% load static %} {% load static %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% block title %}WebVirtCloud{% endblock title %} {% block title %}WebVirtCloud{% endblock title %}
@ -20,7 +20,7 @@
{% bootstrap_field form.username layout='horizontal' %} {% bootstrap_field form.username layout='horizontal' %}
{% bootstrap_field form.password layout='horizontal' %} {% bootstrap_field form.password layout='horizontal' %}
{% bootstrap_field form.otp_token layout='horizontal' %} {% bootstrap_field form.otp_token layout='horizontal' %}
<a href="{% url 'accounts:email_otp' %}" class="float-right mb-2">{% trans "I do not have/lost my OTP!" %}</a> <a href="{% url 'accounts:email_otp' %}" class="float-end mb-2">{% trans "I do not have/lost my OTP!" %}</a>
<button class="btn btn-lg btn-success btn-block" type="submit">{% trans "Sign In" %}</button> <button class="btn btn-lg btn-success btn-block" type="submit">{% trans "Sign In" %}</button>
</form> </form>
</div> </div>

6
accounts/templates/login.html
View file

@ -15,7 +15,7 @@
<div class="col-12" role="main"> <div class="col-12" role="main">
{% if form.errors %} {% if form.errors %}
<div class="alert alert-danger"> <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
{% trans "Incorrect username or password." %} {% trans "Incorrect username or password." %}
</div> </div>
{% endif %} {% endif %}
@ -24,7 +24,9 @@
<input type="text" class="form-control" name="username" placeholder="{% trans "User" %}" autocapitalize="none" autocorrect="off" autofocus> <input type="text" class="form-control" name="username" placeholder="{% trans "User" %}" autocapitalize="none" autocorrect="off" autofocus>
<input type="password" class="form-control" name="password" placeholder="{% trans "Password" %}"> <input type="password" class="form-control" name="password" placeholder="{% trans "Password" %}">
<input type="hidden" name="next" value="{{ next }}"> <input type="hidden" name="next" value="{{ next }}">
<button class="btn btn-lg btn-success btn-block" type="submit">{% trans "Sign In" %}</button> <div class="d-grid">
<button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
</div>
</form> </form>
</div> </div>
{% endblock %} {% endblock %}

22
accounts/templates/profile.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load icons %} {% load icons %}
{% load tags_fingerprint %} {% load tags_fingerprint %}
@ -10,15 +10,19 @@
{% block content %} {% block content %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#edit-profile">{% trans "Edit Profile" %}</a> <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#editprofile" type="button" role="tab" aria-controls="editprofile" aria-selected="true">
{% trans "Edit Profile" %}
</button>
</li> </li>
<li class="nav-item"> <li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#ssh-keys">{% trans "SSH Keys" %}</a> <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sshkeys" type="button" role="tab" aria-controls="sshkeys" aria-selected="false">
{% trans "SSH Keys" %}
</button>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane tab-pane-bordered active" id="edit-profile"> <div class="tab-pane tab-pane-bordered active" id="editprofile">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<form method="post" action="" role="form" aria-label="Edit user info form"> <form method="post" action="" role="form" aria-label="Edit user info form">
@ -29,7 +33,7 @@
{% icon 'lock' %} {% trans "Change Password" %} {% icon 'lock' %} {% trans "Change Password" %}
</a> </a>
{% endif %} {% endif %}
<div class="form-group mb-0 float-right"> <div class="mb-0 float-end">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
{% icon 'pencil' %} {% trans "Update" %} {% icon 'pencil' %} {% trans "Update" %}
</button> </button>
@ -38,7 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane tab-pane-bordered fade" id="ssh-keys"> <div class="tab-pane tab-pane-bordered fade" id="sshkeys">
{% if publickeys %} {% if publickeys %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="table-responsive"> <div class="table-responsive">
@ -67,7 +71,7 @@
<form method="post" action="{% url 'accounts:ssh_key_create' %}" role="form" aria-label="Add key to user form"> <form method="post" action="{% url 'accounts:ssh_key_create' %}" role="form" aria-label="Add key to user form">
{% csrf_token %} {% csrf_token %}
{% bootstrap_form ssh_key_form layout='horizontal' %} {% bootstrap_form ssh_key_form layout='horizontal' %}
<div class="form-group mb-0 float-right"> <div class="mb-0 float-end">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
{% icon 'plus' %} {% trans "Add" %} {% icon 'plus' %} {% trans "Add" %}
</button> </button>

9
admin/templates/admin/group_list.html
View file

@ -6,7 +6,7 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-right"> <a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-end">
{% icon 'plus' %} {% icon 'plus' %}
</a> </a>
{% include 'search_block.html' %} {% include 'search_block.html' %}
@ -16,8 +16,7 @@
<div class="row"> <div class="row">
{% if not groups %} {% if not groups %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="alert alert-warning alert-dismissable"> <div class="alert alert-warning shadow-sm">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any groups" %} {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any groups" %}
</div> </div>
</div> </div>
@ -37,7 +36,7 @@
<a href=""><strong>{{ group.name }}</strong></a> <a href=""><strong>{{ group.name }}</strong></a>
</td> </td>
<td> <td>
<div class="float-right btn-group"> <div class="float-end btn-group">
<a class="btn btn-primary" href="{% url 'admin:group_update' group.id %}" title="{%trans "Edit" %}"> <a class="btn btn-primary" href="{% url 'admin:group_update' group.id %}" title="{%trans "Edit" %}">
{% icon 'pencil' %} {% icon 'pencil' %}
</a> </a>
@ -56,5 +55,5 @@
{% endblock content %} {% endblock content %}
{% block script %} {% block script %}
<script src="{% static "js/filter-table.js" %}"></script> <script src="{% static 'js/filter-table.js' %}"></script>
{% endblock script %} {% endblock script %}

5
admin/templates/admin/logs.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% block title %}{% trans "Logs" %}{% endblock %} {% block title %}{% trans "Logs" %}{% endblock %}
@ -11,8 +11,7 @@
<div class="col-lg-12"> <div class="col-lg-12">
{% if not logs %} {% if not logs %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="alert alert-warning alert-dismissable"> <div class="alert alert-warning shadow-sm">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<i class="fa fa-exclamation-triangle"></i> <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any Logs" %} <i class="fa fa-exclamation-triangle"></i> <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any Logs" %}
</div> </div>
</div> </div>

4
admin/templates/admin/user_form.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load icons %} {% load icons %}
{% load i18n %} {% load i18n %}
@ -15,7 +15,7 @@
{% bootstrap_form user_form layout='horizontal' %} {% bootstrap_form user_form layout='horizontal' %}
{% bootstrap_form attributes_form layout='horizontal' %} {% bootstrap_form attributes_form layout='horizontal' %}
</form> </form>
<div class="form-group float-right"> <div class="float-end">
<a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a> <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a>
<button type="submit" form="create-update" class="btn btn-success"> <button type="submit" form="create-update" class="btn btn-success">
{% icon 'check' %} {% trans "Save" %} {% icon 'check' %} {% trans "Save" %}

7
admin/templates/admin/user_list.html
View file

@ -9,7 +9,7 @@
{% block page_heading %}{{ title }}{% endblock page_heading %} {% block page_heading %}{{ title }}{% endblock page_heading %}
{% block page_heading_extra %} {% block page_heading_extra %}
<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-right"> <a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-end">
{% icon 'plus' %} {% icon 'plus' %}
</a> </a>
{% include 'search_block.html' %} {% include 'search_block.html' %}
@ -19,8 +19,7 @@
<div class="row"> <div class="row">
{% if not users %} {% if not users %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="alert alert-warning alert-dismissable"> <div class="alert alert-warning shadow-sm">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any user" %} {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any user" %}
</div> </div>
</div> </div>
@ -55,7 +54,7 @@
<td>{% if user.is_superuser %}{% icon 'check' %}</span>{% endif %}</td> <td>{% if user.is_superuser %}{% icon 'check' %}</span>{% endif %}</td>
<td>{% if can_clone %}{% icon 'check' %}{% endif %}</td> <td>{% if can_clone %}{% icon 'check' %}{% endif %}</td>
<td> <td>
<div class="float-right btn-group"> <div class="float-end btn-group">
<a class="btn btn-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% icon 'eye' %}</a> <a class="btn btn-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% icon 'eye' %}</a>
<a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% icon 'pencil' %}</a> <a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% icon 'pencil' %}</a>
{% if user.is_active %} {% if user.is_active %}

12
appsettings/templates/appsettings.html
View file

@ -10,7 +10,7 @@
<div class="col-lg-12"> <div class="col-lg-12">
<h3 class="page-header">{% trans "App Settings" %}</h3> <h3 class="page-header">{% trans "App Settings" %}</h3>
<form action="{% url 'set_language' %}" method="post" style="display:inline" aria-label="Edit language.name_local settings form">{% csrf_token %} <form action="{% url 'set_language' %}" method="post" style="display:inline" aria-label="Edit language.name_local settings form">{% csrf_token %}
<div class="form-group row"> <div class="row mb-1">
<input name="next" type="hidden" value="{{ redirect_to }}"> <input name="next" type="hidden" value="{{ redirect_to }}">
<label class="col-sm-3 col-form-label">{% trans "Language" %}</label> <label class="col-sm-3 col-form-label">{% trans "Language" %}</label>
<div class="col-sm-6"> <div class="col-sm-6">
@ -29,7 +29,7 @@
</form> </form>
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<form method="post" action="" role="form" aria-label="Edit sass directory settings form">{% csrf_token %} <form method="post" action="" role="form" aria-label="Edit sass directory settings form">{% csrf_token %}
<div class="form-group row"> <div class="row mb-1">
<label class="col-sm-3 col-form-label">{% trans sass_dir.name %}</label> <label class="col-sm-3 col-form-label">{% trans sass_dir.name %}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input class="form-control" name="{{ sass_dir.key }}" value="{{ sass_dir.value }}" onchange="this.form.submit()" title="{% trans sass_dir.description %}"/> <input class="form-control" name="{{ sass_dir.key }}" value="{{ sass_dir.value }}" onchange="this.form.submit()" title="{% trans sass_dir.description %}"/>
@ -37,10 +37,10 @@
</div> </div>
</form> </form>
<form method="post" action="" role="form" aria-label="Edit theme settings form">{% csrf_token %} <form method="post" action="" role="form" aria-label="Edit theme settings form">{% csrf_token %}
<div class="form-group row"> <div class="row mb-1">
<label class="col-sm-3 col-form-label">{% trans bootstrap_theme.name %}</label> <label class="col-sm-3 col-form-label">{% trans bootstrap_theme.name %}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" name="{{ bootstrap_theme.key }}" onchange="this.form.submit()" title="{% trans bootstrap_theme.description %}"> <select class="form-select" name="{{ bootstrap_theme.key }}" onchange="this.form.submit()" title="{% trans bootstrap_theme.description %}">
{% for theme in themes_list %} {% for theme in themes_list %}
<option {% if bootstrap_theme.value == theme %}selected{% endif %} value="{{ theme }}">{{ theme }}</option> <option {% if bootstrap_theme.value == theme %}selected{% endif %} value="{{ theme }}">{{ theme }}</option>
{% endfor %} {% endfor %}
@ -53,11 +53,11 @@
<h3 class="page-header">{% trans "Other Settings" %}</h3> <h3 class="page-header">{% trans "Other Settings" %}</h3>
{% for setting in appsettings %} {% for setting in appsettings %}
<form method="post" action="" role="form" aria-label="{{setting.name}} form">{% csrf_token %} <form method="post" action="" role="form" aria-label="{{setting.name}} form">{% csrf_token %}
<div class="form-group row"> <div class="row mb-1">
<label class="col-sm-3 col-form-label">{% trans setting.name %}</label> <label class="col-sm-3 col-form-label">{% trans setting.name %}</label>
<div class="col-sm-6"> <div class="col-sm-6">
{% if setting.choices %} {% if setting.choices %}
<select class="form-control" name="{{ setting.key }}" onchange="this.form.submit()" title="{% trans setting.description %}"> <select class="form-select" name="{{ setting.key }}" onchange="this.form.submit()" title="{% trans setting.description %}">
{% for choice in setting.choices_as_list %} {% for choice in setting.choices_as_list %}
<option {% if setting.value == choice %} selected {% endif %} value={{ choice }}>{% trans choice %}</option> <option {% if setting.value == choice %} selected {% endif %} value={{ choice }}>{% trans choice %}</option>
{% endfor %} {% endfor %}

5
appsettings/views.py
View file

@ -47,8 +47,11 @@ def appsettings(request):
if "BOOTSTRAP_THEME" in request.POST: if "BOOTSTRAP_THEME" in request.POST:
theme = request.POST.get("BOOTSTRAP_THEME", "") theme = request.POST.get("BOOTSTRAP_THEME", "")
scss_var = f"@import '{sass_dir.value}/wvc-theme/{theme}/variables';" scss_var = f"@import '{sass_dir.value}/wvc-theme/{theme}/variables';"
scss_bootswatch = f"@import '{sass_dir.value}/wvc-theme/{theme}/bootswatch';" #scss_boot = f"@import '{sass_dir.value}/bootstrap/bootstrap.scss';"
scss_boot = f"@import '{sass_dir.value}/bootstrap-overrides.scss';" scss_boot = f"@import '{sass_dir.value}/bootstrap-overrides.scss';"
scss_bootswatch = f"@import '{sass_dir.value}/wvc-theme/{theme}/bootswatch';"
try: try:
with open(sass_dir.value + "/wvc-main.scss", "w") as main: with open(sass_dir.value + "/wvc-main.scss", "w") as main:

4
computes/templates/computes/form.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load icons %} {% load icons %}
{% load i18n %} {% load i18n %}
@ -17,7 +17,7 @@
{% csrf_token %} {% csrf_token %}
{% bootstrap_form form layout='horizontal' %} {% bootstrap_form form layout='horizontal' %}
</form> </form>
<div class="form-group float-right"> <div class="float-end">
<a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a> <a class="btn btn-primary" href="javascript:history.back()">{% icon 'times' %} {% trans "Cancel" %}</a>
<button type="submit" form="create-update" class="btn btn-success"> <button type="submit" form="create-update" class="btn btn-success">
{% icon 'check' %} {% trans "Save" %} {% icon 'check' %} {% trans "Save" %}

13
computes/templates/computes/instances.html
View file

@ -10,7 +10,7 @@
{% block page_heading_extra %} {% block page_heading_extra %}
<a href="{% url 'instances:create_instance_select_type' compute.id %}" <a href="{% url 'instances:create_instance_select_type' compute.id %}"
class="btn btn-success btn-header float-right"> class="btn btn-success btn-header float-end">
{% icon 'plus' %} {% icon 'plus' %}
</a> </a>
{% if instances %} {% if instances %}
@ -22,12 +22,12 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light shadow-sm"> <ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item active"> <li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% icon 'dashboard' %} {% trans "Overview" %}</a> <a href="{% url 'overview' compute.id %}">{% icon 'dashboard' %} {% trans "Overview" %}</a>
</li> </li>
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<span class="font-weight-bold">{% icon 'server' %} {% trans "Instances" %}</span> <span class="fw-bold">{% icon 'server' %} {% trans "Instances" %}</span>
</li> </li>
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a> <a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a>
@ -51,10 +51,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
{% if not instances %} {% if not instances %}
<div class="alert alert-warning alert-dismissable fade show"> <div class="alert alert-warning shadow-sm fade show">
{% icon 'exclamation-triangle' %} <strong>{% trans "Warning" %}:</strong> {% icon 'exclamation-triangle' %} <strong>{% trans "Warning" %}:</strong>
{% trans "Hypervisor doesn't have any Instances" %} {% trans "Hypervisor doesn't have any Instances" %}
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div> </div>
</div> </div>
{% else %} {% else %}
@ -73,7 +72,7 @@
{% for instance in instances %} {% for instance in instances %}
<tr> <tr>
<td> <td>
<a class="text-secondary" href="{% url 'instances:instance' instance.id %}"> <a class="link-primary" href="{% url 'instances:instance' instance.id %}">
{{ instance.name }} {{ instance.name }}
</a> </a>
</td> </td>

5
computes/templates/computes/list.html
View file

@ -15,8 +15,7 @@
<div class="row"> <div class="row">
{% if not computes %} {% if not computes %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="alert alert-warning alert-dismissable"> <div class="alert alert-warning shadow-sm">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
{% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %} {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
</div> </div>
</div> </div>
@ -44,7 +43,7 @@
{{ compute.details|default:"" }} {{ compute.details|default:"" }}
</td> </td>
<td class="col-sm-2"> <td class="col-sm-2">
<div class="float-right btn-group"> <div class="float-end btn-group">
{% if compute.status is True %} {% if compute.status is True %}
<a class="btn btn-success" title="{%trans "Overview" %}" href="{% url 'overview' compute.id %}">{% icon 'eye' %}</a> <a class="btn btn-success" title="{%trans "Overview" %}" href="{% url 'overview' compute.id %}">{% icon 'eye' %}</a>
{% else %} {% else %}

4
computes/templates/create_comp_block.html
View file

@ -1,7 +1,7 @@
{% load i18n %} {% load i18n %}
{% load bootstrap4 %} {% load django_bootstrap5 %}
{% load icons %} {% load icons %}
<div class="btn-group float-right mt-1" role="group" aria-label="Add host button group"> <div class="btn-group float-end mt-1" role="group" aria-label="Add host button group">
<a href="{% url 'add_tcp_host' %}" class="btn btn-success">{% trans "TCP" %}</a> <a href="{% url 'add_tcp_host' %}" class="btn btn-success">{% trans "TCP" %}</a>
<a href="{% url 'add_ssh_host' %}" class="btn btn-success">{% trans "SSH" %}</a> <a href="{% url 'add_ssh_host' %}" class="btn btn-success">{% trans "SSH" %}</a>
<a href="{% url 'add_tls_host' %}" class="btn btn-success">{% trans "TLS" %}</a> <a href="{% url 'add_tls_host' %}" class="btn btn-success">{% trans "TLS" %}</a>

68
computes/templates/overview.html
View file

@ -9,34 +9,32 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-lg-12"> <nav aria-label="breadcrumb">
<nav aria-label="breadcrumb"> <ol class="breadcrumb shadow-sm">
<ol class="breadcrumb bg-light shadow-sm"> <li class="breadcrumb-item" aria-current="page">
<li class="breadcrumb-item"> <span class="fw-bold">{% icon 'dashboard' %} {% trans "Overview" %}</span>
<span class="font-weight-bold">{% icon 'dashboard' %} {% trans "Overview" %}</span> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'instances' compute.id %}">{% icon 'server' %} {% trans "Instances" %}</a>
<a href="{% url 'instances' compute.id %}">{% icon 'server' %} {% trans "Instances" %}</a> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a>
<a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'networks' compute.id %}">{% icon 'sitemap' %} {% trans "Networks" %}</a>
<a href="{% url 'networks' compute.id %}">{% icon 'sitemap' %} {% trans "Networks" %}</a> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'interfaces' compute.id %}">{% icon 'wifi' %} {% trans "Interfaces" %}</a>
<a href="{% url 'interfaces' compute.id %}">{% icon 'wifi' %} {% trans "Interfaces" %}</a> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'nwfilters' compute.id %}">{% icon 'filter' %} {% trans "NWFilters" %}</a>
<a href="{% url 'nwfilters' compute.id %}">{% icon 'filter' %} {% trans "NWFilters" %}</a> </li>
</li> <li class="breadcrumb-item">
<li class="breadcrumb-item"> <a href="{% url 'virtsecrets' compute.id %}">{% icon 'key' %} {% trans "Secrets" %}</a>
<a href="{% url 'virtsecrets' compute.id %}">{% icon 'key' %} {% trans "Secrets" %}</a> </li>
</li> </ol>
</ol> </nav>
</nav>
</div> </div>
</div>
<div class="shadow-sm"> <div class="shadow-sm">
<h3 class="page-header">{% trans "Basic details" %}</h3> <h3 class="page-header">{% trans "Basic details" %}</h3>
@ -47,10 +45,10 @@
<dd class="col-9"> <dd class="col-9">
<div class="dropdown"> <div class="dropdown">
{% for arch, hpv in hypervisor.items|slice:":4" %} {% for arch, hpv in hypervisor.items|slice:":4" %}
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvArchDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ arch }} {{ arch }}
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="hpvArchDrop{{ forloop.counter0 }}">
{% for h in hpv %} {% for h in hpv %}
<a class="dropdown-item" href="#">{{ h }}</a> <a class="dropdown-item" href="#">{{ h }}</a>
{% endfor %} {% endfor %}
@ -59,10 +57,10 @@
</div> </div>
<div class="dropdown"> <div class="dropdown">
{% if hypervisor.items|length > 4 %} {% if hypervisor.items|length > 4 %}
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ forloop.counter0 }}" data-toggle="dropdown"> <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown">
{{ hypervisor.items|slice:"4:"|length }} {% trans 'more' %}... {{ hypervisor.items|slice:"4:"|length }} {% trans 'more' %}...
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ forloop.counter0 }}" role="menu"> <div class="dropdown-menu" aria-labelledby="hpvDrop{{ forloop.counter0 }}" role="menu">
{% for arc in hypervisor.keys|slice:"4:" %} {% for arc in hypervisor.keys|slice:"4:" %}
<a class="dropdown-item" tabindex="-1" href="#">{{ arc }}</a> <a class="dropdown-item" tabindex="-1" href="#">{{ arc }}</a>
{% endfor %} {% endfor %}
@ -74,10 +72,10 @@
<dd class="col-9">{{ emulator }}</dd> <dd class="col-9">{{ emulator }}</dd>
<dt class="col-3">{% trans "Version" %}</dt> <dt class="col-3">{% trans "Version" %}</dt>
<dd class="col-9"> <dd class="col-9">
<span class="badge bg-secondary text-light">{% trans 'Qemu' %} </span> <span class="badge bg-secondary">{% trans 'Qemu' %} </span>
<span class="badge bg-primary text-light">{{ version }}</span> &nbsp; <span class="badge bg-primary">{{ version }}</span> &nbsp;
<span class="badge bg-secondary text-light">{% trans 'Libvirt' %} </span> <span class="badge bg-secondary">{% trans 'Libvirt' %} </span>
<span class="badge bg-primary text-light">{{ lib_version }}</span> &nbsp; <span class="badge bg-primary">{{ lib_version }}</span> &nbsp;
</dd> </dd>
<dt class="col-3">{% trans "Memory" %}</dt> <dt class="col-3">{% trans "Memory" %}</dt>
<dd class="col-9">{{ host_memory|filesizeformat }}</dd> <dd class="col-9">{{ host_memory|filesizeformat }}</dd>

6
conf/requirements.txt
View file

@ -1,5 +1,5 @@
Django==3.2.4 Django==3.2.5
django-bootstrap4==3.0.1 django_bootstrap5==2.0.1
django-icons==4.0.0 django-icons==4.0.0
django-login-required-middleware==0.6.1 django-login-required-middleware==0.6.1
django-otp==1.0.6 django-otp==1.0.6
@ -8,7 +8,7 @@ gunicorn==20.1.0
libsass==0.21.0 libsass==0.21.0
libvirt-python==7.4.0 libvirt-python==7.4.0
lxml==4.6.3 lxml==4.6.3
qrcode==6.1 qrcode==7.0
rwlock==0.0.7 rwlock==0.0.7
websockify==0.9.0 websockify==0.9.0
zipp==3.4.1 zipp==3.4.1

10
console/templates/console-base.html
View file

@ -38,16 +38,16 @@
<nav class="navbar navbar-expand-md navbar-dark bg-primary" arial-label="console navbar"> <nav class="navbar navbar-expand-md navbar-dark bg-primary" arial-label="console navbar">
<div class="container"> <div class="container">
<a class="navbar-brand">{{ instance.name }}</a> <a class="navbar-brand">{{ instance.name }}</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-md-0"> <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">
{% trans "Send key(s)" %} {% trans "Send key(s)" %}
</a> </a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
@ -83,7 +83,7 @@
<script> <script>
function log_message(msg, type) { function log_message(msg, type) {
var exist = $('#status').is('div'); var exist = $('#status').is('div');
status_div = $('<div id="status" class="alert alert-' + type + ' role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + msg + '</div>'); status_div = $('<div id="status" class="alert alert-' + type + ' role="alert"><button type="button" class="btn-close" aria-label="Close"></button>' + msg + '</div>');
if (exist) { if (exist) {
$('#status').remove(); $('#status').remove();
$('body').prepend(status_div); $('body').prepend(status_div);

2
console/templates/console-vnc-full.html
View file

@ -145,7 +145,7 @@
<div class="noVNC_heading"> <div class="noVNC_heading">
<img src="{% static "js/novnc/app/images/clipboard.svg" %}"> Clipboard <img src="{% static "js/novnc/app/images/clipboard.svg" %}"> Clipboard
</div> </div>
<textarea id="noVNC_clipboard_text" rows=5></textarea> <textarea id="noVNC_clipboard_text"rows=5></textarea>
<br /> <br />
<input id="noVNC_clipboard_clear_button" type="button" value="Clear" class="noVNC_submit" /> <input id="noVNC_clipboard_clear_button" type="button" value="Clear" class="noVNC_submit" />
</div> </div>

100
dev/scss/bootstrap-overrides.scss vendored
View file

@ -1,46 +1,62 @@
/*! /*!
* Bootstrap v4.5.0 (https://getbootstrap.com/) * Bootstrap v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */
$enable-gradients: true; $enable-gradients: true;
@import "bootstrap/functions";
@import "bootstrap/variables"; /*!
@import "bootstrap/mixins"; * Bootstrap v5.0.2 (https://getbootstrap.com/)
@import "bootstrap/root"; * Copyright 2011-2021 The Bootstrap Authors
@import "bootstrap/reboot"; * Copyright 2011-2021 Twitter, Inc.
@import "bootstrap/type"; * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@import "bootstrap/images"; */
@import "bootstrap/code";
@import "bootstrap/grid"; // scss-docs-start import-stack
@import "bootstrap/tables"; // Configuration
@import "bootstrap/forms"; @import "bootstrap/functions";
@import "bootstrap/buttons"; @import "bootstrap/variables";
@import "bootstrap/transitions"; @import "bootstrap/mixins";
@import "bootstrap/dropdown"; @import "bootstrap/utilities";
@import "bootstrap/button-group";
@import "bootstrap/input-group"; // Layout & components
@import "bootstrap/custom-forms"; @import "bootstrap/root";
@import "bootstrap/nav"; @import "bootstrap/reboot";
@import "bootstrap/navbar"; @import "bootstrap/type";
@import "bootstrap/card"; @import "bootstrap/images";
@import "bootstrap/breadcrumb"; @import "bootstrap/containers";
@import "bootstrap/pagination"; @import "bootstrap/grid";
@import "bootstrap/badge"; @import "bootstrap/tables";
@import "bootstrap/jumbotron"; @import "bootstrap/forms";
@import "bootstrap/alert"; @import "bootstrap/buttons";
@import "bootstrap/progress"; @import "bootstrap/transitions";
@import "bootstrap/media"; @import "bootstrap/dropdown";
@import "bootstrap/list-group"; @import "bootstrap/button-group";
@import "bootstrap/close"; @import "bootstrap/nav";
@import "bootstrap/toasts"; @import "bootstrap/navbar";
@import "bootstrap/modal"; @import "bootstrap/card";
@import "bootstrap/tooltip"; @import "bootstrap/accordion";
@import "bootstrap/popover"; @import "bootstrap/breadcrumb";
@import "bootstrap/carousel"; @import "bootstrap/pagination";
@import "bootstrap/spinners"; @import "bootstrap/badge";
@import "bootstrap/utilities"; @import "bootstrap/alert";
@import "bootstrap/print"; @import "bootstrap/progress";
@import "bootstrap/list-group";
@import "bootstrap/close";
@import "bootstrap/toasts";
@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
@import "bootstrap/carousel";
@import "bootstrap/spinners";
@import "bootstrap/offcanvas";
// Helpers
@import "bootstrap/helpers";
// Utilities
@import "bootstrap/utilities/api";
// scss-docs-end import-stack

118
dev/scss/bootstrap/_accordion.scss Executable file
View file

@ -0,0 +1,118 @@
//
// Base styles
//
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: $accordion-button-padding-y $accordion-button-padding-x;
@include font-size($font-size-base);
color: $accordion-button-color;
text-align: left; // Reset button style
background-color: $accordion-button-bg;
border: 0;
@include border-radius(0);
overflow-anchor: none;
@include transition($accordion-transition);
&:not(.collapsed) {
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
&::after {
background-image: escape-svg($accordion-button-active-icon);
transform: $accordion-icon-transform;
}
}
// Accordion icon
&::after {
flex-shrink: 0;
width: $accordion-icon-width;
height: $accordion-icon-width;
margin-left: auto;
content: "";
background-image: escape-svg($accordion-button-icon);
background-repeat: no-repeat;
background-size: $accordion-icon-width;
@include transition($accordion-icon-transition);
}
&:hover {
z-index: 2;
}
&:focus {
z-index: 3;
border-color: $accordion-button-focus-border-color;
outline: 0;
box-shadow: $accordion-button-focus-box-shadow;
}
}
.accordion-header {
margin-bottom: 0;
}
.accordion-item {
background-color: $accordion-bg;
border: $accordion-border-width solid $accordion-border-color;
&:first-of-type {
@include border-top-radius($accordion-border-radius);
.accordion-button {
@include border-top-radius($accordion-inner-border-radius);
}
}
&:not(:first-of-type) {
border-top: 0;
}
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
@include border-bottom-radius($accordion-border-radius);
.accordion-button {
&.collapsed {
@include border-bottom-radius($accordion-inner-border-radius);
}
}
.accordion-collapse {
@include border-bottom-radius($accordion-border-radius);
}
}
}
.accordion-body {
padding: $accordion-body-padding-y $accordion-body-padding-x;
}
// Flush accordion items
//
// Remove borders and border-radius to keep accordion items edge-to-edge.
.accordion-flush {
.accordion-collapse {
border-width: 0;
}
.accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }
.accordion-button {
@include border-radius(0);
}
}
}

25
dev/scss/bootstrap/_alert.scss Normal file → Executable file
View file

@ -27,26 +27,31 @@
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissible { .alert-dismissible {
padding-right: $close-font-size + $alert-padding-x * 2; padding-right: $alert-dismissible-padding-r;
// Adjust close link position // Adjust close link position
.close { .btn-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 2; z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y $alert-padding-x; padding: $alert-padding-y * 1.25 $alert-padding-x;
color: inherit;
} }
} }
// Alternate styles // scss-docs-start alert-modifiers
//
// Generate contextual modifier classes for colorizing the alert. // Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors { @each $state, $value in $theme-colors {
.alert-#{$color} { $alert-background: shift-color($value, $alert-bg-scale);
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); $alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
} }
} }
// scss-docs-end alert-modifiers

29
dev/scss/bootstrap/_badge.scss Normal file → Executable file
View file

@ -9,17 +9,12 @@
@include font-size($badge-font-size); @include font-size($badge-font-size);
font-weight: $badge-font-weight; font-weight: $badge-font-weight;
line-height: 1; line-height: 1;
color: $badge-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@include border-radius($badge-border-radius); @include border-radius($badge-border-radius);
@include transition($badge-transition); @include gradient-bg();
@at-root a#{&} {
@include hover-focus() {
text-decoration: none;
}
}
// Empty badges collapse automatically // Empty badges collapse automatically
&:empty { &:empty {
@ -32,23 +27,3 @@
position: relative; position: relative;
top: -1px; top: -1px;
} }
// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
@include border-radius($badge-pill-border-radius);
}
// Colors
//
// Contextual variations (linked badges get darker on :hover).
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}

20
dev/scss/bootstrap/_breadcrumb.scss Normal file → Executable file
View file

@ -12,30 +12,16 @@
.breadcrumb-item { .breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/") // The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item { + .breadcrumb-item {
padding-left: $breadcrumb-item-padding; padding-left: $breadcrumb-item-padding-x;
&::before { &::before {
float: left; // Suppress inline spacings and underlining of the separator float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding; padding-right: $breadcrumb-item-padding-x;
color: $breadcrumb-divider-color; color: $breadcrumb-divider-color;
content: escape-svg($breadcrumb-divider); content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
} }
} }
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active { &.active {
color: $breadcrumb-active-color; color: $breadcrumb-active-color;
} }

66
dev/scss/bootstrap/_button-group.scss Normal file → Executable file
View file

@ -1,5 +1,3 @@
// stylelint-disable selector-no-qualifying-type
// Make the div behave like a button // Make the div behave like a button
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
@ -10,17 +8,17 @@
> .btn { > .btn {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
}
// Bring the hover, focused, and "active" buttons to the front to overlay // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly // the borders properly
@include hover() { > .btn-check:checked + .btn,
z-index: 1; > .btn-check:focus + .btn,
} > .btn:hover,
&:focus, > .btn:focus,
&:active, > .btn:active,
&.active { > .btn.active {
z-index: 1; z-index: 1;
}
} }
} }
@ -45,12 +43,17 @@
// Reset rounded corners // Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle), > .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn { > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0); @include border-end-radius(0);
} }
> .btn:not(:first-child), // The left radius should be 0 if the button is:
// - the "third or more" child
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
// - part of a btn-group which isn't the first child
> .btn:nth-child(n + 3),
> :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .btn { > .btn-group:not(:first-child) > .btn {
@include border-left-radius(0); @include border-start-radius(0);
} }
} }
@ -72,11 +75,11 @@
&::after, &::after,
.dropup &::after, .dropup &::after,
.dropright &::after { .dropend &::after {
margin-left: 0; margin-left: 0;
} }
.dropleft &::before { .dropstart &::before {
margin-right: 0; margin-right: 0;
} }
} }
@ -129,35 +132,8 @@
@include border-bottom-radius(0); @include border-bottom-radius(0);
} }
> .btn:not(:first-child), > .btn ~ .btn,
> .btn-group:not(:first-child) > .btn { > .btn-group:not(:first-child) > .btn {
@include border-top-radius(0); @include border-top-radius(0);
} }
} }
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
.btn-group-toggle {
> .btn,
> .btn-group > .btn {
margin-bottom: 0; // Override default `<label>` value
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}

89
dev/scss/bootstrap/_buttons.scss Normal file → Executable file
View file

@ -1,5 +1,3 @@
// stylelint-disable selector-no-qualifying-type
// //
// Base styles // Base styles
// //
@ -8,53 +6,48 @@
display: inline-block; display: inline-block;
font-family: $btn-font-family; font-family: $btn-font-family;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
line-height: $btn-line-height;
color: $body-color; color: $body-color;
text-align: center; text-align: center;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space; white-space: $btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null);
user-select: none; user-select: none;
background-color: transparent; background-color: transparent;
border: $btn-border-width solid transparent; border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
@include transition($btn-transition); @include transition($btn-transition);
@include hover() { &:hover {
color: $body-color; color: $body-color;
text-decoration: none; text-decoration: if($link-hover-decoration == underline, none, null);
} }
&:focus, .btn-check:focus + &,
&.focus { &:focus {
outline: 0; outline: 0;
box-shadow: $btn-focus-box-shadow; box-shadow: $btn-focus-box-shadow;
} }
// Disabled comes first so active can properly restyle .btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
&:disabled,
&.disabled, &.disabled,
&:disabled { fieldset:disabled & {
pointer-events: none;
opacity: $btn-disabled-opacity; opacity: $btn-disabled-opacity;
@include box-shadow(none); @include box-shadow(none);
} }
&:not(:disabled):not(.disabled) {
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
} }
@ -62,6 +55,7 @@ fieldset:disabled a.btn {
// Alternate buttons // Alternate buttons
// //
// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.btn-#{$color} { .btn-#{$color} {
@include button-variant($value, $value); @include button-variant($value, $value);
@ -73,6 +67,7 @@ fieldset:disabled a.btn {
@include button-outline-variant($value); @include button-outline-variant($value);
} }
} }
// scss-docs-end btn-variant-loops
// //
@ -82,23 +77,21 @@ fieldset:disabled a.btn {
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link { .btn-link {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: $link-color; color: $btn-link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
@include hover() { &:hover {
color: $link-hover-color; color: $btn-link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
&:focus, &:focus {
&.focus {
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
color: $btn-link-disabled-color; color: $btn-link-disabled-color;
pointer-events: none;
} }
// No need for an active state here // No need for an active state here
@ -110,33 +103,9 @@ fieldset:disabled a.btn {
// //
.btn-lg { .btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
} }
.btn-sm { .btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
// Vertically space out multiple block buttons
+ .btn-block {
margin-top: $btn-block-spacing-y;
}
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
} }

111
dev/scss/bootstrap/_card.scss Normal file → Executable file
View file

@ -46,19 +46,16 @@
// Enable `flex-grow: 1` for decks and groups so that card blocks take up // Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom. // as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto; flex: 1 1 auto;
// Workaround for the image size bug in IE padding: $card-spacer-y $card-spacer-x;
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
padding: $card-spacer-x;
color: $card-color; color: $card-color;
} }
.card-title { .card-title {
margin-bottom: $card-spacer-y; margin-bottom: $card-title-spacer-y;
} }
.card-subtitle { .card-subtitle {
margin-top: -$card-spacer-y / 2; margin-top: -$card-title-spacer-y * .5;
margin-bottom: 0; margin-bottom: 0;
} }
@ -67,7 +64,7 @@
} }
.card-link { .card-link {
@include hover() { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -81,7 +78,7 @@
// //
.card-header { .card-header {
padding: $card-spacer-y $card-spacer-x; padding: $card-cap-padding-y $card-cap-padding-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN> margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color; color: $card-cap-color;
background-color: $card-cap-bg; background-color: $card-cap-bg;
@ -93,7 +90,7 @@
} }
.card-footer { .card-footer {
padding: $card-spacer-y $card-spacer-x; padding: $card-cap-padding-y $card-cap-padding-x;
color: $card-cap-color; color: $card-cap-color;
background-color: $card-cap-bg; background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color; border-top: $card-border-width solid $card-border-color;
@ -109,15 +106,22 @@
// //
.card-header-tabs { .card-header-tabs {
margin-right: -$card-spacer-x / 2; margin-right: -$card-cap-padding-x * .5;
margin-bottom: -$card-spacer-y; margin-bottom: -$card-cap-padding-y;
margin-left: -$card-spacer-x / 2; margin-left: -$card-cap-padding-x * .5;
border-bottom: 0; border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg {
.nav-link.active {
background-color: $card-bg;
border-bottom-color: $card-bg;
}
}
} }
.card-header-pills { .card-header-pills {
margin-right: -$card-spacer-x / 2; margin-right: -$card-cap-padding-x * .5;
margin-left: -$card-spacer-x / 2; margin-left: -$card-cap-padding-x * .5;
} }
// Card image // Card image
@ -134,7 +138,6 @@
.card-img, .card-img,
.card-img-top, .card-img-top,
.card-img-bottom { .card-img-bottom {
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
} }
@ -149,30 +152,6 @@
} }
// Card deck
.card-deck {
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}
// //
// Card groups // Card groups
// //
@ -202,7 +181,7 @@
// Handle rounded corners // Handle rounded corners
@if $enable-rounded { @if $enable-rounded {
&:not(:last-child) { &:not(:last-child) {
@include border-right-radius(0); @include border-end-radius(0);
.card-img-top, .card-img-top,
.card-header { .card-header {
@ -217,7 +196,7 @@
} }
&:not(:first-child) { &:not(:first-child) {
@include border-left-radius(0); @include border-start-radius(0);
.card-img-top, .card-img-top,
.card-header { .card-header {
@ -234,53 +213,3 @@
} }
} }
} }
//
// Columns
//
.card-columns {
.card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}
//
// Accordion
//
.accordion {
overflow-anchor: none;
> .card {
overflow: hidden;
&:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}
&:not(:first-of-type) {
@include border-top-radius(0);
}
> .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
}
}
}

100
dev/scss/bootstrap/_carousel.scss Normal file → Executable file
View file

@ -3,12 +3,12 @@
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox) // even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead // we're preventing all actions instead
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
// the active slide is heading. // the active slide is heading.
// 3. .active.carousel-item is the current slide. // 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-left and .active.carousel-item-right is the current // 4. .active.carousel-item-start and .active.carousel-item-end is the current
// slide in its in-transition state. Only one of these occurs at a time. // slide in its in-transition state. Only one of these occurs at a time.
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition. // is the upcoming slide in transition.
.carousel { .carousel {
@ -42,16 +42,19 @@
display: block; display: block;
} }
.carousel-item-next:not(.carousel-item-left), /* rtl:begin:ignore */
.active.carousel-item-right { .carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%); transform: translateX(100%);
} }
.carousel-item-prev:not(.carousel-item-right), .carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-left { .active.carousel-item-start {
transform: translateX(-100%); transform: translateX(-100%);
} }
/* rtl:end:ignore */
// //
// Alternate transitions // Alternate transitions
@ -65,14 +68,14 @@
} }
.carousel-item.active, .carousel-item.active,
.carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-right { .carousel-item-prev.carousel-item-end {
z-index: 1; z-index: 1;
opacity: 1; opacity: 1;
} }
.active.carousel-item-left, .active.carousel-item-start,
.active.carousel-item-right { .active.carousel-item-end {
z-index: 0; z-index: 0;
opacity: 0; opacity: 0;
@include transition(opacity 0s $carousel-transition-duration); @include transition(opacity 0s $carousel-transition-duration);
@ -95,13 +98,17 @@
align-items: center; // 2. vertically center contents align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents justify-content: center; // 3. horizontally center contents
width: $carousel-control-width; width: $carousel-control-width;
padding: 0;
color: $carousel-control-color; color: $carousel-control-color;
text-align: center; text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity; opacity: $carousel-control-opacity;
@include transition($carousel-control-transition); @include transition($carousel-control-transition);
// Hover/focus state // Hover/focus state
@include hover-focus() { &:hover,
&:focus {
color: $carousel-control-color; color: $carousel-control-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
@ -110,15 +117,11 @@
} }
.carousel-control-prev { .carousel-control-prev {
left: 0; left: 0;
@if $enable-gradients { background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
} }
.carousel-control-next { .carousel-control-next {
right: 0; right: 0;
@if $enable-gradients { background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
} }
// Icons for within // Icons for within
@ -127,8 +130,19 @@
display: inline-block; display: inline-block;
width: $carousel-control-icon-width; width: $carousel-control-icon-width;
height: $carousel-control-icon-width; height: $carousel-control-icon-width;
background: 50% / 100% 100% no-repeat; background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
} }
/* rtl:options: {
"autoRename": true,
"stringMap":[ {
"name" : "prev-next",
"search" : "prev",
"replace" : "next"
} ]
} */
.carousel-control-prev-icon { .carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg); background-image: escape-svg($carousel-control-prev-icon-bg);
} }
@ -136,46 +150,48 @@
background-image: escape-svg($carousel-control-next-icon-bg); background-image: escape-svg($carousel-control-next-icon-bg);
} }
// Optional indicator pips/controls
// Optional indicator pips
// //
// Add an ordered list with the following class and add a list item for each // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
// slide your carousel holds. // like a button) with data-bs-target for each slide your carousel holds.
.carousel-indicators { .carousel-indicators {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-left: 0; // override <ol> default padding: 0;
// Use the .carousel-control's width as margin so we don't overlay those // Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width; margin-right: $carousel-control-width;
margin-bottom: 1rem;
margin-left: $carousel-control-width; margin-left: $carousel-control-width;
list-style: none; list-style: none;
li { [data-bs-target] {
box-sizing: content-box; box-sizing: content-box;
flex: 0 1 auto; flex: 0 1 auto;
width: $carousel-indicator-width; width: $carousel-indicator-width;
height: $carousel-indicator-height; height: $carousel-indicator-height;
padding: 0;
margin-right: $carousel-indicator-spacer; margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
background-color: $carousel-indicator-active-bg; background-color: $carousel-indicator-active-bg;
background-clip: padding-box; background-clip: padding-box;
border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom. // Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent; border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent; border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5; opacity: $carousel-indicator-opacity;
@include transition($carousel-indicator-transition); @include transition($carousel-indicator-transition);
} }
.active { .active {
opacity: 1; opacity: $carousel-indicator-active-opacity;
} }
} }
@ -186,12 +202,28 @@
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: (100% - $carousel-caption-width) / 2; right: (100% - $carousel-caption-width) * .5;
bottom: 20px; bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) / 2; left: (100% - $carousel-caption-width) * .5;
z-index: 10; padding-top: $carousel-caption-padding-y;
padding-top: 20px; padding-bottom: $carousel-caption-padding-y;
padding-bottom: 20px;
color: $carousel-caption-color; color: $carousel-caption-color;
text-align: center; text-align: center;
} }
// Dark mode carousel
.carousel-dark {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
}
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg;
}
.carousel-caption {
color: $carousel-dark-caption-color;
}
}

66
dev/scss/bootstrap/_close.scss Normal file → Executable file
View file

@ -1,40 +1,40 @@
.close { // transparent background and border properties included for button version.
float: right;
@include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
// Override <a>'s hover style
@include hover() {
color: $close-color;
text-decoration: none;
}
&:not(:disabled):not(.disabled) {
@include hover-focus() {
opacity: .75;
}
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag. // iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`. // If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable-next-line selector-no-qualifying-type .btn-close {
button.close { box-sizing: content-box;
padding: 0; width: $btn-close-width;
background-color: transparent; height: $btn-close-height;
border: 0; padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color;
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
border: 0; // for button elements
@include border-radius();
opacity: $btn-close-opacity;
// Override <a>'s hover style
&:hover {
color: $btn-close-color;
text-decoration: none;
opacity: $btn-close-hover-opacity;
}
&:focus {
outline: 0;
box-shadow: $btn-close-focus-shadow;
opacity: $btn-close-focus-opacity;
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
opacity: $btn-close-disabled-opacity;
}
} }
// Future-proof disabling of clicks on `<a>` elements .btn-close-white {
filter: $btn-close-white-filter;
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
pointer-events: none;
} }

48
dev/scss/bootstrap/_code.scss
View file

@ -1,48 +0,0 @@
// Inline code
code {
@include font-size($code-font-size);
color: $code-color;
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);
kbd {
padding: 0;
@include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
}
// Blocks of code
pre {
display: block;
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

41
dev/scss/bootstrap/_containers.scss Executable file
View file

@ -0,0 +1,41 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
}
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
@each $name, $width in $grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
}
}
}
}
}
}

526
dev/scss/bootstrap/_custom-forms.scss
View file

@ -1,526 +0,0 @@
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.custom-control {
position: relative;
z-index: 1;
display: block;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
color-adjust: exact; // Keep themed appearance for print
}
.custom-control-inline {
display: inline-flex;
margin-right: $custom-control-spacer-x;
}
.custom-control-input {
position: absolute;
left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
width: $custom-control-indicator-size;
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
opacity: 0;
&:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color;
border-color: $custom-control-indicator-checked-border-color;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow);
}
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {
box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: $custom-control-indicator-focus-border-color;
}
&:not(:disabled):active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg;
border-color: $custom-control-indicator-active-border-color;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .custom-control-label {
color: $custom-control-label-disabled-color;
&::before {
background-color: $custom-control-indicator-disabled-bg;
}
}
}
}
// Custom control indicators
//
// Build the custom controls out of pseudo-elements.
.custom-control-label {
position: relative;
margin-bottom: 0;
color: $custom-control-label-color;
vertical-align: top;
cursor: $custom-control-cursor;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
background-color: $custom-control-indicator-bg;
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
}
}
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox {
.custom-control-label::before {
@include border-radius($custom-checkbox-indicator-border-radius);
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: escape-svg($custom-checkbox-indicator-icon-checked);
}
}
.custom-control-input:indeterminate ~ .custom-control-label {
&::before {
border-color: $custom-checkbox-indicator-indeterminate-border-color;
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
&:indeterminate ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// Radios
//
// Tweak just a few things for radios.
.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-image: escape-svg($custom-radio-indicator-icon-checked);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// switches
//
// Tweak a few things for switches
.custom-switch {
padding-left: $custom-switch-width + $custom-control-gutter;
.custom-control-label {
&::before {
left: -($custom-switch-width + $custom-control-gutter);
width: $custom-switch-width;
pointer-events: all;
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;
}
&::after {
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-color: $custom-control-indicator-bg;
transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
//
.custom-select {
display: inline-block;
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
font-family: $custom-select-font-family;
@include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-background;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow);
appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $custom-select-focus-box-shadow;
}
&::-ms-value {
// For visual consistency with other platforms/browsers,
// suppress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $custom-select-padding-x;
background-image: none;
}
&:disabled {
color: $custom-select-disabled-color;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
display: none;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $custom-select-color;
}
}
.custom-select-sm {
height: $custom-select-height-sm;
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
@include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
height: $custom-select-height-lg;
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
@include font-size($custom-select-font-size-lg);
}
// File
//
// Custom file input.
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: $custom-file-height;
margin-bottom: 0;
}
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: $custom-file-height;
margin: 0;
overflow: hidden;
opacity: 0;
&:focus ~ .custom-file-label {
border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
}
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .custom-file-label,
&:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}
~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
}
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.custom-range {
width: 100%;
height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&:focus {
outline: 0;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
border: 0;
}
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent; // Why?
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent;
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: $custom-range-track-bg;
border-color: transparent; // Firefox specific?
@include border-radius($custom-range-track-border-radius);
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: 0; // Edge specific
margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);
appearance: none;
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
}
&::-ms-track {
width: $custom-range-track-width;
height: $custom-range-track-height;
color: transparent;
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}
&::-ms-fill-lower {
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&::-ms-fill-upper {
margin-right: 15px; // arbitrary?
background-color: $custom-range-track-bg;
@include border-radius($custom-range-track-border-radius);
}
&:disabled {
&::-webkit-slider-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-webkit-slider-runnable-track {
cursor: default;
}
&::-moz-range-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
&::-moz-range-track {
cursor: default;
}
&::-ms-thumb {
background-color: $custom-range-thumb-disabled-bg;
}
}
}
.custom-control-label::before,
.custom-file-label,
.custom-select {
@include transition($custom-forms-transition);
}

120
dev/scss/bootstrap/_dropdown.scss Normal file → Executable file
View file

@ -1,8 +1,8 @@
// The dropdown wrapper (`<div>`) // The dropdown wrapper (`<div>`)
.dropup, .dropup,
.dropright, .dropend,
.dropdown, .dropdown,
.dropleft { .dropstart {
position: relative; position: relative;
} }
@ -16,14 +16,11 @@
// The dropdown menu // The dropdown menu
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
float: left;
min-width: $dropdown-min-width; min-width: $dropdown-min-width;
padding: $dropdown-padding-y $dropdown-padding-x; padding: $dropdown-padding-y $dropdown-padding-x;
margin: $dropdown-spacer 0 0; // override default ul margin: 0; // Override default margin of ul
@include font-size($dropdown-font-size); @include font-size($dropdown-font-size);
color: $dropdown-color; color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@ -33,28 +30,47 @@
border: $dropdown-border-width solid $dropdown-border-color; border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius); @include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow); @include box-shadow($dropdown-box-shadow);
&[data-bs-popper] {
top: 100%;
left: 0;
margin-top: $dropdown-spacer;
}
} }
// scss-docs-start responsive-breakpoints
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left { .dropdown-menu#{$infix}-start {
right: auto; --bs-position: start;
left: 0;
&[data-bs-popper] {
right: auto;
left: 0;
}
} }
.dropdown-menu#{$infix}-right { .dropdown-menu#{$infix}-end {
right: 0; --bs-position: end;
left: auto;
&[data-bs-popper] {
right: 0;
left: auto;
}
} }
} }
} }
// scss-docs-end responsive-breakpoints
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set. // Just add .dropup after the standard .dropdown class and you're set.
.dropup { .dropup {
.dropdown-menu { .dropdown-menu[data-bs-popper] {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-top: 0; margin-top: 0;
@ -66,8 +82,8 @@
} }
} }
.dropright { .dropend {
.dropdown-menu { .dropdown-menu[data-bs-popper] {
top: 0; top: 0;
right: auto; right: auto;
left: 100%; left: 100%;
@ -76,15 +92,15 @@
} }
.dropdown-toggle { .dropdown-toggle {
@include caret(right); @include caret(end);
&::after { &::after {
vertical-align: 0; vertical-align: 0;
} }
} }
} }
.dropleft { .dropstart {
.dropdown-menu { .dropdown-menu[data-bs-popper] {
top: 0; top: 0;
right: 100%; right: 100%;
left: auto; left: auto;
@ -93,28 +109,20 @@
} }
.dropdown-toggle { .dropdown-toggle {
@include caret(left); @include caret(start);
&::before { &::before {
vertical-align: 0; vertical-align: 0;
} }
} }
} }
// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
&[x-placement^="right"],
&[x-placement^="bottom"],
&[x-placement^="left"] {
right: auto;
bottom: auto;
}
}
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); height: 0;
margin: $dropdown-divider-margin-y 0;
overflow: hidden;
border-top: 1px solid $dropdown-divider-bg;
} }
// Links, buttons, and more within the dropdown menu // Links, buttons, and more within the dropdown menu
@ -145,9 +153,10 @@
} }
} }
@include hover-focus() { &:hover,
&:focus {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
text-decoration: none; text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg($dropdown-link-hover-bg); @include gradient-bg($dropdown-link-hover-bg);
} }
@ -164,9 +173,7 @@
pointer-events: none; pointer-events: none;
background-color: transparent; background-color: transparent;
// Remove CSS gradients if they're enabled // Remove CSS gradients if they're enabled
@if $enable-gradients { background-image: if($enable-gradients, none, null);
background-image: none;
}
} }
} }
@ -190,3 +197,44 @@
padding: $dropdown-item-padding-y $dropdown-item-padding-x; padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color; color: $dropdown-link-color;
} }
// Dark dropdowns
.dropdown-menu-dark {
color: $dropdown-dark-color;
background-color: $dropdown-dark-bg;
border-color: $dropdown-dark-border-color;
@include box-shadow($dropdown-dark-box-shadow);
.dropdown-item {
color: $dropdown-dark-link-color;
&:hover,
&:focus {
color: $dropdown-dark-link-hover-color;
@include gradient-bg($dropdown-dark-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-dark-link-active-color;
@include gradient-bg($dropdown-dark-link-active-bg);
}
&.disabled,
&:disabled {
color: $dropdown-dark-link-disabled-color;
}
}
.dropdown-divider {
border-color: $dropdown-dark-divider-bg;
}
.dropdown-item-text {
color: $dropdown-dark-link-color;
}
.dropdown-header {
color: $dropdown-dark-header-color;
}
}

356
dev/scss/bootstrap/_forms.scss Normal file → Executable file
View file

@ -1,347 +1,9 @@
// stylelint-disable selector-no-qualifying-type @import "forms/labels";
@import "forms/form-text";
// @import "forms/form-control";
// Textual form controls @import "forms/form-select";
// @import "forms/form-check";
@import "forms/form-range";
.form-control { @import "forms/floating-labels";
display: block; @import "forms/input-group";
width: 100%; @import "forms/validation";
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Remove select outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus($ignore-warning: true);
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-disabled-bg;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
appearance: none; // Fix appearance for date inputs in Safari
}
}
select.form-control {
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
// match the appearance of the native widget.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
display: block;
width: 100%;
}
//
// Labels
//
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
}
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext {
display: block;
width: 100%;
padding: $input-padding-y 0;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
@include font-size($input-font-size);
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 0;
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
// stylelint-disable-next-line no-duplicate-selectors
select.form-control {
&[size],
&[multiple] {
height: auto;
}
}
textarea.form-control {
height: auto;
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
}
.form-text {
display: block;
margin-top: $form-text-margin-top;
}
// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -$form-grid-gutter-width / 2;
margin-left: -$form-grid-gutter-width / 2;
> .col,
> [class*="col-"] {
padding-right: $form-grid-gutter-width / 2;
padding-left: $form-grid-gutter-width / 2;
}
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check {
position: relative;
display: block;
padding-left: $form-check-input-gutter;
}
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .form-check-label,
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
.form-check-label {
margin-bottom: 0; // Override default `<label>` bottom margin
}
.form-check-inline {
display: inline-flex;
align-items: center;
padding-left: 0; // Override base .form-check
margin-right: $form-check-inline-margin-x;
// Undo .form-check-input defaults and add some `margin-right`.
.form-check-input {
position: static;
margin-top: 0;
margin-right: $form-check-inline-input-margin-x;
margin-left: 0;
}
}
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check {
width: 100%;
}
// Kick in the inline
@include media-breakpoint-up(sm) {
label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
// Inline-block all the things for "inline"
.form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0;
}
// Allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-plaintext {
display: inline-block;
}
.input-group,
.custom-select {
width: auto;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding-left: 0;
}
.form-check-input {
position: relative;
flex-shrink: 0;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;
}
.custom-control {
align-items: center;
justify-content: center;
}
.custom-control-label {
margin-bottom: 0;
}
}
}

165
dev/scss/bootstrap/_functions.scss Normal file → Executable file
View file

@ -32,6 +32,29 @@
} }
} }
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value));
}
}
@return $result;
}
// Replace `$search` with `$replace` in `$string` // Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms. // Used on our SVG icon backgrounds for custom forms.
// //
@ -70,42 +93,80 @@
} }
// Color contrast // Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { // See https://github.com/twbs/bootstrap/pull/30168
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@if ($yiq >= $yiq-contrasted-threshold) { @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
@return $dark; $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
} @else { $max-ratio: 0;
@return $light; $max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
} }
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color;
} }
// Retrieve color Sass maps @function contrast-ratio($background, $foreground: $color-contrast-light) {
@function color($key: "blue") { $l1: luminance($background);
@return map-get($colors, $key); $l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
} }
@function theme-color($key: "primary") { // Return WCAG2.0 relative luminance
@return map-get($theme-colors, $key); // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
} }
@function gray($key: "100") { // Return opaque color
@return map-get($grays, $key); // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
} }
// Request a theme color level // scss-docs-start color-functions
@function theme-color-level($color-name: "primary", $level: 0) { // Tint a color: mix a color with white
$color: theme-color($color-name); @function tint-color($color, $weight) {
$color-base: if($level > 0, $black, $white); @return mix(white, $color, $weight);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
} }
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc // Return valid calc
@function add($value1, $value2, $return-calc: true) { @function add($value1, $value2, $return-calc: true) {
@if $value1 == null { @if $value1 == null {
@ -120,6 +181,14 @@
@return $value1 + $value2; @return $value1 + $value2;
} }
@if type-of($value1) != number {
$value1: unquote("(") + $value1 + unquote(")");
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
} }
@ -140,5 +209,55 @@
@return $value1 - $value2; @return $value1 - $value2;
} }
@if type-of($value1) != number {
$value1: unquote("(") + $value1 + unquote(")");
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
} }
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}

57
dev/scss/bootstrap/_grid.scss Normal file → Executable file
View file

@ -1,46 +1,3 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
}
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
@each $name, $width in $grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
}
}
}
}
}
}
// Row // Row
// //
// Rows contain your columns. // Rows contain your columns.
@ -48,22 +5,14 @@
@if $enable-grid-classes { @if $enable-grid-classes {
.row { .row {
@include make-row(); @include make-row();
}
// Remove the negative margin from default .row, then the horizontal padding > * {
// from all immediate children columns (to prevent runaway style inheritance). @include make-col-ready();
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
} }
} }
} }
// Columns // Columns
// //
// Common styles for small and large grid columns // Common styles for small and large grid columns

7
dev/scss/bootstrap/_helpers.scss Executable file
View file

@ -0,0 +1,7 @@
@import "helpers/clearfix";
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
@import "helpers/visually-hidden";
@import "helpers/stretched-link";
@import "helpers/text-truncation";

2
dev/scss/bootstrap/_images.scss Normal file → Executable file
View file

@ -32,7 +32,7 @@
} }
.figure-img { .figure-img {
margin-bottom: $spacer / 2; margin-bottom: $spacer * .5;
line-height: 1; line-height: 1;
} }

208
dev/scss/bootstrap/_input-group.scss
View file

@ -1,208 +0,0 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control,
> .form-control-plaintext,
> .custom-select,
> .custom-file {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
margin-bottom: 0;
+ .form-control,
+ .custom-select,
+ .custom-file {
margin-left: -$input-border-width;
}
}
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .custom-select:focus,
> .custom-file .custom-file-input:focus ~ .custom-file-label {
z-index: 3;
}
// Bring the custom file input above the label
> .custom-file .custom-file-input:focus {
z-index: 4;
}
> .form-control,
> .custom-select {
&:not(:first-child) { @include border-left-radius(0); }
}
// Custom file inputs have more complex markup, thus requiring different
// border-radius overrides.
> .custom-file {
display: flex;
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
&:not(.has-validation) {
> .form-control:not(:last-child),
> .custom-select:not(:last-child),
> .custom-file:not(:last-child) .custom-file-label::after {
@include border-right-radius(0);
}
}
&.has-validation {
> .form-control:nth-last-child(n + 3),
> .custom-select:nth-last-child(n + 3),
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
@include border-right-radius(0);
}
}
}
// Prepend and append
//
// While it requires one extra layer of HTML for each, dedicated prepend and
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
// 3) support HTML5 form validation.
.input-group-prepend,
.input-group-append {
display: flex;
// Ensure buttons are always above inputs for more visually pleasing borders.
// This isn't needed for `.input-group-text` since it shares the same border-color
// as our inputs.
.btn {
position: relative;
z-index: 2;
&:focus {
z-index: 3;
}
}
.btn + .btn,
.btn + .input-group-text,
.input-group-text + .input-group-text,
.input-group-text + .btn {
margin-left: -$input-border-width;
}
}
.input-group-prepend { margin-right: -$input-border-width; }
.input-group-append { margin-left: -$input-border-width; }
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
height: $input-height-lg;
}
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: $input-height-sm;
}
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}
// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
@include border-left-radius(0);
}

17
dev/scss/bootstrap/_jumbotron.scss
View file

@ -1,17 +0,0 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
@include media-breakpoint-up(sm) {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
}
}
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
@include border-radius(0);
}

36
dev/scss/bootstrap/_list-group.scss Normal file → Executable file
View file

@ -12,6 +12,17 @@
@include border-radius($list-group-border-radius); @include border-radius($list-group-border-radius);
} }
.list-group-numbered {
list-style-type: none;
counter-reset: section;
> li::before {
// Increments only this instance of the section counter
content: counters(section, ".") ". ";
counter-increment: section;
}
}
// Interactive list items // Interactive list items
// //
@ -24,7 +35,8 @@
text-align: inherit; // For `<button>`s (anchors inherit) text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state // Hover state
@include hover-focus() { &:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color; color: $list-group-action-hover-color;
text-decoration: none; text-decoration: none;
@ -98,13 +110,13 @@
> .list-group-item { > .list-group-item {
&:first-child { &:first-child {
@include border-bottom-left-radius($list-group-border-radius); @include border-bottom-start-radius($list-group-border-radius);
@include border-top-right-radius(0); @include border-top-end-radius(0);
} }
&:last-child { &:last-child {
@include border-top-right-radius($list-group-border-radius); @include border-top-end-radius($list-group-border-radius);
@include border-bottom-left-radius(0); @include border-bottom-start-radius(0);
} }
&.active { &.active {
@ -144,11 +156,19 @@
} }
// Contextual variants // scss-docs-start list-group-modifiers
// List group contextual variants
// //
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors { @each $state, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
} }
// scss-docs-end list-group-modifiers

8
dev/scss/bootstrap/_media.scss
View file

@ -1,8 +0,0 @@
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}

21
dev/scss/bootstrap/_mixins.scss Normal file → Executable file
View file

@ -8,19 +8,17 @@
// Deprecate // Deprecate
@import "mixins/deprecate"; @import "mixins/deprecate";
// Utilities // Helpers
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/hover"; @import "mixins/color-scheme";
@import "mixins/image"; @import "mixins/image";
@import "mixins/badge";
@import "mixins/resize"; @import "mixins/resize";
@import "mixins/screen-reader"; @import "mixins/visually-hidden";
@import "mixins/size";
@import "mixins/reset-text"; @import "mixins/reset-text";
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate"; @import "mixins/text-truncate";
@import "mixins/visibility";
// Utilities
@import "mixins/utilities";
// Components // Components
@import "mixins/alert"; @import "mixins/alert";
@ -29,12 +27,10 @@
@import "mixins/pagination"; @import "mixins/pagination";
@import "mixins/lists"; @import "mixins/lists";
@import "mixins/list-group"; @import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/table-row"; @import "mixins/table-variants";
// Skins // Skins
@import "mixins/background-variant";
@import "mixins/border-radius"; @import "mixins/border-radius";
@import "mixins/box-shadow"; @import "mixins/box-shadow";
@import "mixins/gradients"; @import "mixins/gradients";
@ -42,6 +38,5 @@
// Layout // Layout
@import "mixins/clearfix"; @import "mixins/clearfix";
@import "mixins/grid-framework"; @import "mixins/container";
@import "mixins/grid"; @import "mixins/grid";
@import "mixins/float";

115
dev/scss/bootstrap/_modal.scss Normal file → Executable file
View file

@ -4,16 +4,6 @@
// .modal-content - actual modal w/ bg and corners and stuff // .modal-content - actual modal w/ bg and corners and stuff
.modal-open {
// Kill the scroll on the body
overflow: hidden;
.modal {
overflow-x: hidden;
overflow-y: auto;
}
}
// Container that the modal scrolls within // Container that the modal scrolls within
.modal { .modal {
position: fixed; position: fixed;
@ -23,7 +13,8 @@
display: none; display: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
// Prevent Chrome on Windows from adding a focus outline. For details, see // Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951. // https://github.com/twbs/bootstrap/pull/10951.
outline: 0; outline: 0;
@ -56,19 +47,13 @@
} }
.modal-dialog-scrollable { .modal-dialog-scrollable {
display: flex; // IE10/11 height: subtract(100%, $modal-dialog-margin * 2);
max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content { .modal-content {
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11 max-height: 100%;
overflow: hidden; overflow: hidden;
} }
.modal-header,
.modal-footer {
flex-shrink: 0;
}
.modal-body { .modal-body {
overflow-y: auto; overflow-y: auto;
} }
@ -78,29 +63,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-height: subtract(100%, $modal-dialog-margin * 2); min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
height: subtract(100vh, $modal-dialog-margin * 2);
height: min-content; // Reset height to 0 except on IE
content: "";
}
// Ensure `.modal-body` shows scrollbar (IE10/11)
&.modal-dialog-scrollable {
flex-direction: column;
justify-content: center;
height: 100%;
.modal-content {
max-height: none;
}
&::before {
content: none;
}
}
} }
// Actual modal // Actual modal
@ -140,16 +102,16 @@
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
display: flex; display: flex;
align-items: flex-start; // so the close btn always stays on the upper right corner flex-shrink: 0;
align-items: center;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding; padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius); @include border-top-radius($modal-content-inner-border-radius);
.close { .btn-close {
padding: $modal-header-padding; padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
// auto on the left force icon to the right even when there is no .modal-title margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
} }
} }
@ -173,9 +135,10 @@
.modal-footer { .modal-footer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-shrink: 0;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding - $modal-footer-margin-between / 2; padding: $modal-inner-padding - $modal-footer-margin-between * .5;
border-top: $modal-footer-border-width solid $modal-footer-border-color; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius); @include border-bottom-radius($modal-content-inner-border-radius);
@ -183,19 +146,10 @@
// This solution is far from ideal because of the universal selector usage, // This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800 // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * { > * {
margin: $modal-footer-margin-between / 2; margin: $modal-footer-margin-between * .5;
} }
} }
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal // Scale up the modal
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
@ -205,20 +159,11 @@
} }
.modal-dialog-scrollable { .modal-dialog-scrollable {
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
.modal-content {
max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
} }
.modal-dialog-centered { .modal-dialog-centered {
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
height: min-content;
}
} }
.modal-content { .modal-content {
@ -238,3 +183,37 @@
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; } .modal-xl { max-width: $modal-xl; }
} }
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
// scss-docs-end modal-fullscreen-loop

27
dev/scss/bootstrap/_nav.scss Normal file → Executable file
View file

@ -14,10 +14,16 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding-y $nav-link-padding-x; padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight;
color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition);
@include hover-focus() { &:hover,
text-decoration: none; &:focus {
color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
} }
// Disabled state lightens text // Disabled state lightens text
@ -37,11 +43,15 @@
.nav-link { .nav-link {
margin-bottom: -$nav-tabs-border-width; margin-bottom: -$nav-tabs-border-width;
background: none;
border: $nav-tabs-border-width solid transparent; border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius); @include border-top-radius($nav-tabs-border-radius);
@include hover-focus() { &:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color; border-color: $nav-tabs-link-hover-border-color;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
} }
&.disabled { &.disabled {
@ -73,13 +83,15 @@
.nav-pills { .nav-pills {
.nav-link { .nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
} }
.nav-link.active, .nav-link.active,
.show > .nav-link { .show > .nav-link {
color: $nav-pills-link-active-color; color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg; @include gradient-bg($nav-pills-link-active-bg);
} }
} }
@ -105,6 +117,13 @@
} }
} }
.nav-fill,
.nav-justified {
.nav-item .nav-link {
width: 100%; // Make sure button will grow
}
}
// Tabbable tabs // Tabbable tabs
// //

116
dev/scss/bootstrap/_navbar.scss Normal file → Executable file
View file

@ -4,7 +4,6 @@
// Navbar brand // Navbar brand
// Navbar nav // Navbar nav
// Navbar text // Navbar text
// Navbar divider
// Responsive navbar // Responsive navbar
// Navbar position // Navbar position
// Navbar themes // Navbar themes
@ -21,19 +20,24 @@
flex-wrap: wrap; // allow us to do the line break for collapsing content flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center; align-items: center;
justify-content: space-between; // space out brand from logo justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x; padding-top: $navbar-padding-y;
padding-right: $navbar-padding-x; // default: null
padding-bottom: $navbar-padding-y;
padding-left: $navbar-padding-x; // default: null
@include gradient-bg();
// Because flex properties aren't inherited, we need to redeclare these first // Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly. // few properties so that content nested within behave properly.
// The `flex-wrap` property is inherited to simplify the expanded navbars
%container-flex-properties { %container-flex-properties {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: inherit;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.container, > .container,
.container-fluid { > .container-fluid {
@extend %container-flex-properties; @extend %container-flex-properties;
} }
@ -50,16 +54,16 @@
// Used for brand, project, or site names. // Used for brand, project, or site names.
.navbar-brand { .navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y; padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x; margin-right: $navbar-brand-margin-end;
@include font-size($navbar-brand-font-size); @include font-size($navbar-brand-font-size);
line-height: inherit; text-decoration: if($link-decoration == none, null, none);
white-space: nowrap; white-space: nowrap;
@include hover-focus() { &:hover,
text-decoration: none; &:focus {
text-decoration: if($link-hover-decoration == underline, none, null);
} }
} }
@ -82,7 +86,6 @@
.dropdown-menu { .dropdown-menu {
position: static; position: static;
float: none;
} }
} }
@ -92,7 +95,6 @@
// //
.navbar-text { .navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y; padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y; padding-bottom: $nav-link-padding-y;
} }
@ -122,10 +124,17 @@
background-color: transparent; // remove default button style background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius); @include border-radius($navbar-toggler-border-radius);
@include transition($navbar-toggler-transition);
@include hover-focus() { &:hover {
text-decoration: none; text-decoration: none;
} }
&:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 $navbar-toggler-focus-width;
}
} }
// Keep as a separate element so folks can easily override it with another icon // Keep as a separate element so folks can easily override it with another icon
@ -135,15 +144,17 @@
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
vertical-align: middle; vertical-align: middle;
content: ""; background-repeat: no-repeat;
background: 50% / 100% 100% no-repeat; background-position: center;
background-size: 100%;
} }
.navbar-nav-scroll { .navbar-nav-scroll {
max-height: $navbar-nav-scroll-max-height; max-height: var(--#{$variable-prefix}scroll-height, 75vh);
overflow-y: auto; overflow-y: auto;
} }
// scss-docs-start navbar-expand-loop
// Generate series of `.navbar-expand-*` responsive classes for configuring // Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses. // where your navbar collapses.
.navbar-expand { .navbar-expand {
@ -151,27 +162,10 @@
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} { &#{$infix} {
@include media-breakpoint-down($breakpoint) {
%container-navbar-expand-#{$breakpoint} {
padding-right: 0;
padding-left: 0;
}
> .container,
> .container-fluid {
@extend %container-navbar-expand-#{$breakpoint};
}
@each $size, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($size, $container-max-widths)} {
@extend %container-navbar-expand-#{$breakpoint};
}
}
}
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
flex-flow: row nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
.navbar-nav { .navbar-nav {
@ -187,30 +181,12 @@
} }
} }
// For nesting containers, have to redeclare for alignment purposes
%container-nesting-#{$breakpoint} {
flex-wrap: nowrap;
}
> .container,
> .container-fluid {
@extend %container-nesting-#{$breakpoint};
}
@each $size, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($size, $container-max-widths)} {
@extend %container-nesting-#{$breakpoint};
}
}
.navbar-nav-scroll { .navbar-nav-scroll {
overflow: visible; overflow: visible;
} }
.navbar-collapse { .navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto; flex-basis: auto;
} }
@ -221,6 +197,7 @@
} }
} }
} }
// scss-docs-end navbar-expand-loop
// Navbar themes // Navbar themes
@ -232,7 +209,8 @@
.navbar-brand { .navbar-brand {
color: $navbar-light-brand-color; color: $navbar-light-brand-color;
@include hover-focus() { &:hover,
&:focus {
color: $navbar-light-brand-hover-color; color: $navbar-light-brand-hover-color;
} }
} }
@ -241,7 +219,8 @@
.nav-link { .nav-link {
color: $navbar-light-color; color: $navbar-light-color;
@include hover-focus() { &:hover,
&:focus {
color: $navbar-light-hover-color; color: $navbar-light-hover-color;
} }
@ -251,8 +230,6 @@
} }
.show > .nav-link, .show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-light-active-color; color: $navbar-light-active-color;
} }
@ -269,12 +246,11 @@
.navbar-text { .navbar-text {
color: $navbar-light-color; color: $navbar-light-color;
a {
color: $navbar-light-active-color;
@include hover-focus() { a,
color: $navbar-light-active-color; a:hover,
} a:focus {
color: $navbar-light-active-color;
} }
} }
} }
@ -284,7 +260,8 @@
.navbar-brand { .navbar-brand {
color: $navbar-dark-brand-color; color: $navbar-dark-brand-color;
@include hover-focus() { &:hover,
&:focus {
color: $navbar-dark-brand-hover-color; color: $navbar-dark-brand-hover-color;
} }
} }
@ -293,7 +270,8 @@
.nav-link { .nav-link {
color: $navbar-dark-color; color: $navbar-dark-color;
@include hover-focus() { &:hover,
&:focus {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
@ -303,8 +281,6 @@
} }
.show > .nav-link, .show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
@ -321,12 +297,10 @@
.navbar-text { .navbar-text {
color: $navbar-dark-color; color: $navbar-dark-color;
a { a,
a:hover,
a:focus {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
@include hover-focus() {
color: $navbar-dark-active-color;
}
} }
} }
} }

79
dev/scss/bootstrap/_offcanvas.scss Executable file
View file

@ -0,0 +1,79 @@
.offcanvas {
position: fixed;
bottom: 0;
z-index: $zindex-offcanvas;
display: flex;
flex-direction: column;
max-width: 100%;
color: $offcanvas-color;
visibility: hidden;
background-color: $offcanvas-bg-color;
background-clip: padding-box;
outline: 0;
@include box-shadow($offcanvas-box-shadow);
@include transition(transform $offcanvas-transition-duration ease-in-out);
}
.offcanvas-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close {
padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
margin-top: $offcanvas-padding-y * -.5;
margin-right: $offcanvas-padding-x * -.5;
margin-bottom: $offcanvas-padding-y * -.5;
}
}
.offcanvas-title {
margin-bottom: 0;
line-height: $offcanvas-title-line-height;
}
.offcanvas-body {
flex-grow: 1;
padding: $offcanvas-padding-y $offcanvas-padding-x;
overflow-y: auto;
}
.offcanvas-start {
top: 0;
left: 0;
width: $offcanvas-horizontal-width;
border-right: $offcanvas-border-width solid $offcanvas-border-color;
transform: translateX(-100%);
}
.offcanvas-end {
top: 0;
right: 0;
width: $offcanvas-horizontal-width;
border-left: $offcanvas-border-width solid $offcanvas-border-color;
transform: translateX(100%);
}
.offcanvas-top {
top: 0;
right: 0;
left: 0;
height: $offcanvas-vertical-height;
max-height: 100%;
border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
transform: translateY(-100%);
}
.offcanvas-bottom {
right: 0;
left: 0;
height: $offcanvas-vertical-height;
max-height: 100%;
border-top: $offcanvas-border-width solid $offcanvas-border-color;
transform: translateY(100%);
}
.offcanvas.show {
transform: none;
}

30
dev/scss/bootstrap/_pagination.scss Normal file → Executable file
View file

@ -1,60 +1,49 @@
.pagination { .pagination {
display: flex; display: flex;
@include list-unstyled(); @include list-unstyled();
@include border-radius();
} }
.page-link { .page-link {
position: relative; position: relative;
display: block; display: block;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -$pagination-border-width;
line-height: $pagination-line-height;
color: $pagination-color; color: $pagination-color;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
background-color: $pagination-bg; background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color; border: $pagination-border-width solid $pagination-border-color;
@include transition($pagination-transition);
&:hover { &:hover {
z-index: 2; z-index: 2;
color: $pagination-hover-color; color: $pagination-hover-color;
text-decoration: none; text-decoration: if($link-hover-decoration == underline, none, null);
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color; border-color: $pagination-hover-border-color;
} }
&:focus { &:focus {
z-index: 3; z-index: 3;
color: $pagination-focus-color;
background-color: $pagination-focus-bg;
outline: $pagination-focus-outline; outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow; box-shadow: $pagination-focus-box-shadow;
} }
} }
.page-item { .page-item {
&:first-child { &:not(:first-child) .page-link {
.page-link { margin-left: $pagination-margin-start;
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
} }
&.active .page-link { &.active .page-link {
z-index: 3; z-index: 3;
color: $pagination-active-color; color: $pagination-active-color;
background-color: $pagination-active-bg; @include gradient-bg($pagination-active-bg);
border-color: $pagination-active-border-color; border-color: $pagination-active-border-color;
} }
&.disabled .page-link { &.disabled .page-link {
color: $pagination-disabled-color; color: $pagination-disabled-color;
pointer-events: none; pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto;
background-color: $pagination-disabled-bg; background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color; border-color: $pagination-disabled-border-color;
} }
@ -64,11 +53,12 @@
// //
// Sizing // Sizing
// //
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
.pagination-lg { .pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg); @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
} }
.pagination-sm { .pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm); @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
} }

60
dev/scss/bootstrap/_popover.scss Normal file → Executable file
View file

@ -1,7 +1,7 @@
.popover { .popover {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0 #{"/* rtl:ignore */"};
z-index: $zindex-popover; z-index: $zindex-popover;
display: block; display: block;
max-width: $popover-max-width; max-width: $popover-max-width;
@ -17,12 +17,11 @@
@include border-radius($popover-border-radius); @include border-radius($popover-border-radius);
@include box-shadow($popover-box-shadow); @include box-shadow($popover-box-shadow);
.arrow { .popover-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
height: $popover-arrow-height; height: $popover-arrow-height;
margin: 0 $popover-border-radius;
&::before, &::before,
&::after { &::after {
@ -36,63 +35,56 @@
} }
.bs-popover-top { .bs-popover-top {
margin-bottom: $popover-arrow-height; > .popover-arrow {
> .arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width); bottom: subtract(-$popover-arrow-height, $popover-border-width);
&::before { &::before {
bottom: 0; bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
&::after { &::after {
bottom: $popover-border-width; bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
} }
} }
.bs-popover-right { .bs-popover-end {
margin-left: $popover-arrow-height; > .popover-arrow {
> .arrow {
left: subtract(-$popover-arrow-height, $popover-border-width); left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before { &::before {
left: 0; left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
&::after { &::after {
left: $popover-border-width; left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
} }
} }
.bs-popover-bottom { .bs-popover-bottom {
margin-top: $popover-arrow-height; > .popover-arrow {
> .arrow {
top: subtract(-$popover-arrow-height, $popover-border-width); top: subtract(-$popover-arrow-height, $popover-border-width);
&::before { &::before {
top: 0; top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
&::after { &::after {
top: $popover-border-width; top: $popover-border-width;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
} }
@ -104,51 +96,47 @@
left: 50%; left: 50%;
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2; margin-left: -$popover-arrow-width * .5;
content: ""; content: "";
border-bottom: $popover-border-width solid $popover-header-bg; border-bottom: $popover-border-width solid $popover-header-bg;
} }
} }
.bs-popover-left { .bs-popover-start {
margin-right: $popover-arrow-height; > .popover-arrow {
> .arrow {
right: subtract(-$popover-arrow-height, $popover-border-width); right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before { &::before {
right: 0; right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
&::after { &::after {
right: $popover-border-width; right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
} }
} }
.bs-popover-auto { .bs-popover-auto {
&[x-placement^="top"] { &[data-popper-placement^="top"] {
@extend .bs-popover-top; @extend .bs-popover-top;
} }
&[x-placement^="right"] { &[data-popper-placement^="right"] {
@extend .bs-popover-right; @extend .bs-popover-end;
} }
&[x-placement^="bottom"] { &[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom; @extend .bs-popover-bottom;
} }
&[x-placement^="left"] { &[data-popper-placement^="left"] {
@extend .bs-popover-left; @extend .bs-popover-start;
} }
} }
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
.popover-header { .popover-header {
padding: $popover-header-padding-y $popover-header-padding-x; padding: $popover-header-padding-y $popover-header-padding-x;
@ -156,7 +144,7 @@
@include font-size($font-size-base); @include font-size($font-size-base);
color: $popover-header-color; color: $popover-header-color;
background-color: $popover-header-bg; background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); border-bottom: $popover-border-width solid $popover-border-color;
@include border-top-radius($popover-inner-border-radius); @include border-top-radius($popover-inner-border-radius);
&:empty { &:empty {

141
dev/scss/bootstrap/_print.scss
View file

@ -1,141 +0,0 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// https://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@if $enable-print-styles {
@media print {
*,
*::before,
*::after {
// Bootstrap specific; comment out `color` and `background`
//color: $black !important; // Black prints faster
text-shadow: none !important;
//background: transparent !important;
box-shadow: none !important;
}
a {
&:not(.btn) {
text-decoration: underline;
}
}
// Bootstrap specific; comment the following selector out
//a[href]::after {
// content: " (" attr(href) ")";
//}
abbr[title]::after {
content: " (" attr(title) ")";
}
// Bootstrap specific; comment the following selector out
//
// Don't show links that are fragment identifiers,
// or use the `javascript:` pseudo protocol
//
//a[href^="#"]::after,
//a[href^="javascript:"]::after {
// content: "";
//}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap specific changes start
// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page {
size: $print-page-size;
}
body {
min-width: $print-body-min-width !important;
}
.container {
min-width: $print-body-min-width !important;
}
// Bootstrap components
.navbar {
display: none;
}
.badge {
border: $border-width solid $black;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: $white !important;
}
}
.table-bordered {
th,
td {
border: 1px solid $gray-300 !important;
}
}
.table-dark {
color: inherit;
th,
td,
thead th,
tbody + tbody {
border-color: $table-border-color;
}
}
.table .thead-dark th {
color: inherit;
border-color: $table-border-color;
}
// Bootstrap specific changes end
}
}

9
dev/scss/bootstrap/_progress.scss Normal file → Executable file
View file

@ -1,16 +1,17 @@
// Disable animation if transitions are disabled // Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
@if $enable-transitions { @if $enable-transitions {
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { background-position: $progress-height 0; } 0% { background-position-x: $progress-height; }
to { background-position: 0 0; }
} }
} }
// scss-docs-end progress-keyframes
.progress { .progress {
display: flex; display: flex;
height: $progress-height; height: $progress-height;
overflow: hidden; // force rounded corners by cropping it overflow: hidden; // force rounded corners by cropping it
line-height: 0;
@include font-size($progress-font-size); @include font-size($progress-font-size);
background-color: $progress-bg; background-color: $progress-bg;
@include border-radius($progress-border-radius); @include border-radius($progress-border-radius);
@ -38,7 +39,7 @@
.progress-bar-animated { .progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes; animation: $progress-bar-animation-timing progress-bar-stripes;
@if $enable-prefers-reduced-motion-media-query { @if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; animation: none;
} }

495
dev/scss/bootstrap/_reboot.scss Normal file → Executable file
View file

@ -1,5 +1,6 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot // Reboot
// //
// Normalization of HTML elements, manually forked from Normalize.css to remove // Normalization of HTML elements, manually forked from Normalize.css to remove
@ -10,38 +11,37 @@
// Document // Document
// //
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; // 1 box-sizing: border-box;
} }
html {
font-family: sans-serif; // 2 // Root
line-height: 1.15; // 3 //
-webkit-text-size-adjust: 100%; // 4 // Ability to the value of the root font sizes, affecting the value of `rem`.
-webkit-tap-highlight-color: rgba($black, 0); // 5 // null by default, thus nothing is generated.
:root {
font-size: $font-size-root;
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
} }
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
// TODO: remove in v5
// stylelint-disable-next-line selector-list-comma-newline-after
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
// Body // Body
// //
// 1. Remove the margin in all browsers. // 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`. // 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use // 3. Prevent adjustments of font size after orientation changes in iOS.
// the `inherit` value on things like `<th>` elements. // 4. Change the default tap highlight to be completely transparent in iOS.
body { body {
margin: 0; // 1 margin: 0; // 1
@ -50,82 +50,120 @@ body {
font-weight: $font-weight-base; font-weight: $font-weight-base;
line-height: $line-height-base; line-height: $line-height-base;
color: $body-color; color: $body-color;
text-align: left; // 3 text-align: $body-text-align;
background-color: $body-bg; // 2 background-color: $body-bg; // 2
} -webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
// on elements that programmatically receive focus but wouldn't normally show a visible
// focus outline. In general, this would mean that the outline is only applied if the
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
// or the browser has somehow determined that the user is primarily a keyboard user and/or
// wants focus outlines to always be presented.
//
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
} }
// Content grouping // Content grouping
// //
// 1. Add the correct box sizing in Firefox. // 1. Reset Firefox's gray color
// 2. Show the overflow in Edge and IE. // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
hr { hr {
box-sizing: content-box; // 1 margin: $hr-margin-y 0;
height: 0; // 1 color: $hr-color; // 1
overflow: visible; // 2 background-color: currentColor;
border: 0;
opacity: $hr-opacity;
}
hr:not([size]) {
height: $hr-height; // 2
} }
//
// Typography // Typography
// //
// 1. Remove top margins from headings
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// Remove top margins from headings %heading {
// margin-top: 0; // 1
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: $headings-margin-bottom; margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
} }
h1 {
@extend %heading;
@include font-size($h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
}
// Reset margins on paragraphs // Reset margins on paragraphs
// //
// Similarly, the top margin on `<p>`s get reset. However, we also reset the // Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`. // bottom margin to use `rem` units instead of `em`.
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: $paragraph-margin-bottom; margin-bottom: $paragraph-margin-bottom;
} }
// Abbreviations // Abbreviations
// //
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior. // 3. Add explicit cursor to indicate changed behavior.
// 4. Remove the bottom border in Firefox 39-. // 4. Prevent the text-decoration to be skipped.
// 5. Prevent the text-decoration to be skipped.
abbr[title], abbr[title],
abbr[data-original-title] { // 1 abbr[data-bs-original-title] { // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2 text-decoration: underline dotted; // 2
cursor: help; // 3 cursor: help; // 3
border-bottom: 0; // 4 text-decoration-skip-ink: none; // 4
text-decoration-skip-ink: none; // 5
} }
// Address
address { address {
margin-bottom: 1rem; margin-bottom: 1rem;
font-style: normal; font-style: normal;
line-height: inherit; line-height: inherit;
} }
// Lists
ol,
ul {
padding-left: 2rem;
}
ol, ol,
ul, ul,
dl { dl {
@ -144,33 +182,57 @@ dt {
font-weight: $dt-font-weight; font-weight: $dt-font-weight;
} }
// 1. Undo browser default
dd { dd {
margin-bottom: .5rem; margin-bottom: .5rem;
margin-left: 0; // Undo browser default margin-left: 0; // 1
} }
// Blockquote
blockquote { blockquote {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
b, b,
strong { strong {
font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari font-weight: $font-weight-bolder;
} }
// Small
//
// Add the correct font size in all browsers
small { small {
@include font-size(80%); // Add the correct font size in all browsers @include font-size($small-font-size);
} }
// Mark
mark {
padding: $mark-padding;
background-color: $mark-bg;
}
// Sub and Sup
// //
// Prevent `sub` and `sup` elements from affecting the line height in // Prevent `sub` and `sup` elements from affecting the line height in
// all browsers. // all browsers.
//
sub, sub,
sup { sup {
position: relative; position: relative;
@include font-size(75%); @include font-size($sub-sup-font-size);
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
@ -179,16 +241,13 @@ sub { bottom: -.25em; }
sup { top: -.5em; } sup { top: -.5em; }
//
// Links // Links
//
a { a {
color: $link-color; color: $link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
@include hover() { &:hover {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
@ -200,82 +259,103 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402 // See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) { a:not([href]):not([class]) {
color: inherit; &,
text-decoration: none; &:hover {
@include hover() {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
} }
//
// Code // Code
//
pre, pre,
code, code,
kbd, kbd,
samp { samp {
font-family: $font-family-monospace; font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
direction: ltr #{"/* rtl:ignore */"};
unicode-bidi: bidi-override;
} }
// 1. Remove browser default top margin
// 2. Reset browser default of `1em` to use `rem`s
// 3. Don't allow content to break outside
pre { pre {
// Remove browser default top margin display: block;
margin-top: 0; margin-top: 0; // 1
// Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; // 2
margin-bottom: 1rem; overflow: auto; // 3
// Don't allow content to break outside @include font-size($code-font-size);
overflow: auto; color: $pre-color;
// Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
// making it impossible to interact with the content // Account for some code outputs that place code tags in pre tags
-ms-overflow-style: scrollbar; code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
code {
@include font-size($code-font-size);
color: $code-color;
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
@include font-size(1em);
font-weight: $nested-kbd-font-weight;
}
} }
//
// Figures // Figures
// //
// Apply a consistent margin strategy (matches our type styles).
figure { figure {
// Apply a consistent margin strategy (matches our type styles).
margin: 0 0 1rem; margin: 0 0 1rem;
} }
//
// Images and content // Images and content
//
img {
vertical-align: middle;
border-style: none; // Remove the border on images inside links in IE 10-.
}
img,
svg { svg {
// Workaround for the SVG overflow bug in IE10/11 is still required.
// See https://github.com/twbs/bootstrap/issues/26878
overflow: hidden;
vertical-align: middle; vertical-align: middle;
} }
//
// Tables // Tables
// //
// Prevent double borders
table { table {
border-collapse: collapse; // Prevent double borders caption-side: bottom;
border-collapse: collapse;
} }
caption { caption {
padding-top: $table-cell-padding; padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding; padding-bottom: $table-cell-padding-y;
color: $table-caption-color; color: $table-caption-color;
text-align: left; text-align: left;
caption-side: bottom;
} }
// 1. Removes font-weight bold by inheriting // 1. Removes font-weight bold by inheriting
@ -288,20 +368,29 @@ th {
text-align: -webkit-match-parent; // 3 text-align: -webkit-match-parent; // 3
} }
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
//
// Forms // Forms
// //
// 1. Allow labels to use `margin` for spacing.
label { label {
// Allow labels to use `margin` for spacing. display: inline-block; // 1
display: inline-block;
margin-bottom: $label-margin-bottom;
} }
// Remove the default `border-radius` that macOS Chrome adds. // Remove the default `border-radius` that macOS Chrome adds.
// // See https://github.com/twbs/bootstrap/issues/24093
// Details at https://github.com/twbs/bootstrap/issues/24093
button { button {
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 0; border-radius: 0;
@ -316,27 +405,24 @@ button:focus:not(:focus-visible) {
outline: 0; outline: 0;
} }
// 1. Remove the margin in Firefox and Safari
input, input,
button, button,
select, select,
optgroup, optgroup,
textarea { textarea {
margin: 0; // Remove the margin in Firefox and Safari margin: 0; // 1
font-family: inherit; font-family: inherit;
@include font-size(inherit); @include font-size(inherit);
line-height: inherit; line-height: inherit;
} }
button, // Remove the inheritance of text transform in Firefox
input {
overflow: visible; // Show the overflow in Edge
}
button, button,
select { select {
text-transform: none; // Remove the inheritance of text transform in Firefox text-transform: none;
} }
// Set the cursor for non-`<button>` buttons // Set the cursor for non-`<button>` buttons
// //
// Details at https://github.com/twbs/bootstrap/pull/30562 // Details at https://github.com/twbs/bootstrap/pull/30562
@ -344,141 +430,192 @@ select {
cursor: pointer; cursor: pointer;
} }
// Remove the inheritance of word-wrap in Safari.
//
// Details at https://github.com/twbs/bootstrap/issues/24990
select { select {
// Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal; word-wrap: normal;
// Undo the opacity change from Chrome
&:disabled {
opacity: 1;
}
} }
// Remove the dropdown arrow in Chrome from inputs built with datalists.
// See https://stackoverflow.com/a/54997118
[list]::-webkit-calendar-picker-indicator {
display: none;
}
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4. // controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari. // 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
button, button,
[type="button"], // 1 [type="button"], // 1
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
}
// Opinionated: add "hand" cursor to non-disabled button elements. @if $enable-button-pointers {
@if $enable-pointer-cursor-for-buttons {
button,
[type="button"],
[type="reset"],
[type="submit"] {
&:not(:disabled) { &:not(:disabled) {
cursor: pointer; cursor: pointer; // 3
} }
} }
} }
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, ::-moz-focus-inner {
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
input[type="radio"], // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
input[type="checkbox"] {
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
padding: 0; // 2. Remove the padding in IE 10-
}
textarea { textarea {
overflow: auto; // Remove the default vertical scrollbar in IE. resize: vertical; // 1
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;
} }
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset { fieldset {
// Browsers set a default `min-width: min-content;` on fieldsets, min-width: 0; // 1
// unlike e.g. `<div>`s, which have `min-width: 0;` by default. padding: 0; // 2
// So we reset that to ensure fieldsets behave more like a standard block element. margin: 0; // 2
// See https://github.com/twbs/bootstrap/issues/12359 border: 0; // 2
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
} }
// 1. Correct the text wrapping in Edge and IE. // 1. By using `float: left`, the legend will behave like a block element.
// 2. Correct the color inheritance from `fieldset` elements in IE. // This way the border of a fieldset wraps around the legend if present.
// 2. Fix wrapping bug.
// See https://github.com/twbs/bootstrap/issues/29712
legend { legend {
display: block; float: left; // 1
width: 100%; width: 100%;
max-width: 100%; // 1
padding: 0; padding: 0;
margin-bottom: .5rem; margin-bottom: $legend-margin-bottom;
@include font-size(1.5rem); @include font-size($legend-font-size);
font-weight: $legend-font-weight;
line-height: inherit; line-height: inherit;
color: inherit; // 2
white-space: normal; // 1 + * {
clear: left; // 2
}
} }
progress { // Fix height of inputs with a type of datetime-local, date, month, week, or time
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. // See https://github.com/twbs/bootstrap/issues/18842
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
} }
// Correct the cursor style of increment and decrement buttons in Chrome. ::-webkit-inner-spin-button {
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
// 1. Correct the outline style in Safari.
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
[type="search"] { [type="search"] {
// This overrides the extra rounded corners on search inputs in iOS so that our outline-offset: -2px; // 1
// `.form-control` class can properly style them. Note that this cannot simply -webkit-appearance: textfield; // 2
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
outline-offset: -2px; // 2. Correct the outline style in Safari.
-webkit-appearance: none;
} }
// // 1. A few input types should stay LTR
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
// 2. RTL only output
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner padding in Chrome and Safari on macOS.
//
[type="search"]::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// // Remove padding around color pickers in webkit browsers
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari. ::-webkit-color-swatch-wrapper {
// padding: 0;
}
// Inherit font family and line height for file input buttons
::file-selector-button {
font: inherit;
}
// 1. Change font properties to `inherit`
// 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button { ::-webkit-file-upload-button {
font: inherit; // 2 font: inherit; // 1
-webkit-appearance: button; // 1 -webkit-appearance: button; // 2
} }
//
// Correct element displays // Correct element displays
//
output { output {
display: inline-block; display: inline-block;
} }
// Remove border from iframe
iframe {
border: 0;
}
// Summary
//
// 1. Add the correct display in all browsers
summary { summary {
display: list-item; // Add the correct display in all browsers display: list-item; // 1
cursor: pointer; cursor: pointer;
} }
template {
display: none; // Add the correct display in IE // Progress
//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
} }
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-. // Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.
[hidden] { [hidden] {
display: none !important; display: none !important;
} }

13
dev/scss/bootstrap/_root.scss Normal file → Executable file
View file

@ -1,19 +1,16 @@
:root { :root {
// Custom variable values only support SassScript inside `#{}`. // Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors { @each $color, $value in $colors {
--#{$color}: #{$value}; --#{$variable-prefix}#{$color}: #{$value};
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
--#{$color}: #{$value}; --#{$variable-prefix}#{$color}: #{$value};
}
@each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
} }
// Use `inspect` for lists so that quoted items keep the quotes. // Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172 // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)}; --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)}; --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$variable-prefix}gradient: #{$gradient};
} }

18
dev/scss/bootstrap/_spinners.scss Normal file → Executable file
View file

@ -2,20 +2,22 @@
// Rotating border // Rotating border
// //
// scss-docs-start spinner-border-keyframes
@keyframes spinner-border { @keyframes spinner-border {
to { transform: rotate(360deg); } to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
} }
// scss-docs-end spinner-border-keyframes
.spinner-border { .spinner-border {
display: inline-block; display: inline-block;
width: $spinner-width; width: $spinner-width;
height: $spinner-height; height: $spinner-height;
vertical-align: text-bottom; vertical-align: $spinner-vertical-align;
border: $spinner-border-width solid currentColor; border: $spinner-border-width solid currentColor;
border-right-color: transparent; border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 50%; border-radius: 50%;
animation: .75s linear infinite spinner-border; animation: $spinner-animation-speed linear infinite spinner-border;
} }
.spinner-border-sm { .spinner-border-sm {
@ -28,6 +30,7 @@
// Growing circle // Growing circle
// //
// scss-docs-start spinner-grow-keyframes
@keyframes spinner-grow { @keyframes spinner-grow {
0% { 0% {
transform: scale(0); transform: scale(0);
@ -37,17 +40,18 @@
transform: none; transform: none;
} }
} }
// scss-docs-end spinner-grow-keyframes
.spinner-grow { .spinner-grow {
display: inline-block; display: inline-block;
width: $spinner-width; width: $spinner-width;
height: $spinner-height; height: $spinner-height;
vertical-align: text-bottom; vertical-align: $spinner-vertical-align;
background-color: currentColor; background-color: currentColor;
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 50%; border-radius: 50%;
opacity: 0; opacity: 0;
animation: .75s linear infinite spinner-grow; animation: $spinner-animation-speed linear infinite spinner-grow;
} }
.spinner-grow-sm { .spinner-grow-sm {
@ -55,11 +59,11 @@
height: $spinner-height-sm; height: $spinner-height-sm;
} }
@if $enable-prefers-reduced-motion-media-query { @if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.spinner-border, .spinner-border,
.spinner-grow { .spinner-grow {
animation-duration: 1.5s; animation-duration: $spinner-animation-speed * 2;
} }
} }
} }

192
dev/scss/bootstrap/_tables.scss Normal file → Executable file
View file

@ -3,37 +3,65 @@
// //
.table { .table {
--#{$variable-prefix}table-bg: #{$table-bg};
--#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
--#{$variable-prefix}table-active-color: #{$table-active-color};
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
color: $table-color; color: $table-color;
background-color: $table-bg; // Reset for nesting within parents with `background-color`. vertical-align: $table-cell-vertical-align;
border-color: $table-border-color;
th, // Target th & td
td { // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
padding: $table-cell-padding; // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
vertical-align: top; // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
border-top: $table-border-width solid $table-border-color; // stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
background-color: var(--#{$variable-prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
} }
thead th { > tbody {
vertical-align: inherit;
}
> thead {
vertical-align: bottom; vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
} }
tbody + tbody { // Highlight border color between thead, tbody and tfoot.
border-top: (2 * $table-border-width) solid $table-border-color; > :not(:last-child) > :last-child > * {
border-bottom-color: $table-group-separator-color;
} }
} }
//
// Change placement of captions with a class
//
.caption-top {
caption-side: top;
}
// //
// Condensed table w/ half padding // Condensed table w/ half padding
// //
.table-sm { .table-sm {
th, // stylelint-disable-next-line selector-max-universal
td { > :not(caption) > * > * {
padding: $table-cell-padding-sm; padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
} }
} }
@ -41,29 +69,27 @@
// Border versions // Border versions
// //
// Add or remove borders all around the table and between all the columns. // Add or remove borders all around the table and between all the columns.
//
// When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent.
// Therefor we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s
.table-bordered { .table-bordered {
border: $table-border-width solid $table-border-color; > :not(caption) > * {
border-width: $table-border-width 0;
th, // stylelint-disable-next-line selector-max-universal
td { > * {
border: $table-border-width solid $table-border-color; border-width: 0 $table-border-width;
}
thead {
th,
td {
border-bottom-width: 2 * $table-border-width;
} }
} }
} }
.table-borderless { .table-borderless {
th, // stylelint-disable-next-line selector-max-universal
td, > :not(caption) > * > * {
thead th, border-bottom-width: 0;
tbody + tbody {
border: 0;
} }
} }
@ -72,114 +98,54 @@
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped { .table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) { > tbody > tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg; --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
color: var(--#{$variable-prefix}table-striped-color);
} }
} }
// Active table
//
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
color: var(--#{$variable-prefix}table-active-color);
}
// Hover effect // Hover effect
// //
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover {
tbody tr { > tbody > tr:hover {
@include hover() { --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
color: $table-hover-color; color: var(--#{$variable-prefix}table-hover-color);
background-color: $table-hover-bg;
}
} }
} }
// Table backgrounds // Table variants
// //
// Exact selectors below required to override `.table-striped` and prevent // Table variants set the table cell backgrounds, border colors
// inheritance to nested tables. // and the colors of the striped, hovered & active tables
@each $color, $value in $theme-colors { @each $color, $value in $table-variants {
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level)); @include table-variant($color, $value);
} }
@include table-row-variant(active, $table-active-bg);
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
th {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
}
.thead-light {
th {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
}
}
.table-dark {
color: $table-dark-color;
background-color: $table-dark-bg;
th,
td,
thead th {
border-color: $table-dark-border-color;
}
&.table-bordered {
border: 0;
}
&.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover() {
color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
}
}
}
// Responsive tables // Responsive tables
// //
// Generate series of `.table-responsive-*` classes for configuring the screen // Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow. // size of where your table will overflow.
.table-responsive { @each $breakpoint in map-keys($grid-breakpoints) {
@each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} { @include media-breakpoint-down($breakpoint) {
@include media-breakpoint-down($breakpoint) { .table-responsive#{$infix} {
display: block; overflow-x: auto;
width: 100%; -webkit-overflow-scrolling: touch;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {
border: 0;
}
}
} }
} }
} }

37
dev/scss/bootstrap/_toasts.scss Normal file → Executable file
View file

@ -1,28 +1,17 @@
.toast { .toast {
// Prevents from shrinking in IE11, when in a flex container width: $toast-max-width;
// See https://github.com/twbs/bootstrap/issues/28341 max-width: 100%;
flex-basis: $toast-max-width;
max-width: $toast-max-width;
@include font-size($toast-font-size); @include font-size($toast-font-size);
color: $toast-color; color: $toast-color;
pointer-events: auto;
background-color: $toast-background-color; background-color: $toast-background-color;
background-clip: padding-box; background-clip: padding-box;
border: $toast-border-width solid $toast-border-color; border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow; box-shadow: $toast-box-shadow;
opacity: 0;
@include border-radius($toast-border-radius); @include border-radius($toast-border-radius);
&:not(:last-child) { &:not(.showing):not(.show) {
margin-bottom: $toast-padding-x; opacity: 0;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
} }
&.hide { &.hide {
@ -30,6 +19,16 @@
} }
} }
.toast-container {
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: $toast-spacing;
}
}
.toast-header { .toast-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -39,8 +38,14 @@
background-clip: padding-box; background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color; border-bottom: $toast-border-width solid $toast-header-border-color;
@include border-top-radius(subtract($toast-border-radius, $toast-border-width)); @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
.btn-close {
margin-right: $toast-padding-x * -.5;
margin-left: $toast-padding-x;
}
} }
.toast-body { .toast-body {
padding: $toast-padding-x; // apply to both vertical and horizontal padding: $toast-padding-x; // apply to both vertical and horizontal
word-wrap: break-word;
} }

42
dev/scss/bootstrap/_tooltip.scss Normal file → Executable file
View file

@ -14,7 +14,7 @@
&.show { opacity: $tooltip-opacity; } &.show { opacity: $tooltip-opacity; }
.arrow { .tooltip-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: $tooltip-arrow-width; width: $tooltip-arrow-width;
@ -32,28 +32,28 @@
.bs-tooltip-top { .bs-tooltip-top {
padding: $tooltip-arrow-height 0; padding: $tooltip-arrow-height 0;
.arrow { .tooltip-arrow {
bottom: 0; bottom: 0;
&::before { &::before {
top: 0; top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-top-color: $tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
} }
} }
.bs-tooltip-right { .bs-tooltip-end {
padding: 0 $tooltip-arrow-height; padding: 0 $tooltip-arrow-height;
.arrow { .tooltip-arrow {
left: 0; left: 0;
width: $tooltip-arrow-height; width: $tooltip-arrow-height;
height: $tooltip-arrow-width; height: $tooltip-arrow-width;
&::before { &::before {
right: 0; right: -1px;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-right-color: $tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
} }
@ -62,45 +62,45 @@
.bs-tooltip-bottom { .bs-tooltip-bottom {
padding: $tooltip-arrow-height 0; padding: $tooltip-arrow-height 0;
.arrow { .tooltip-arrow {
top: 0; top: 0;
&::before { &::before {
bottom: 0; bottom: -1px;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
} }
} }
.bs-tooltip-left { .bs-tooltip-start {
padding: 0 $tooltip-arrow-height; padding: 0 $tooltip-arrow-height;
.arrow { .tooltip-arrow {
right: 0; right: 0;
width: $tooltip-arrow-height; width: $tooltip-arrow-height;
height: $tooltip-arrow-width; height: $tooltip-arrow-width;
&::before { &::before {
left: 0; left: -1px;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
} }
} }
.bs-tooltip-auto { .bs-tooltip-auto {
&[x-placement^="top"] { &[data-popper-placement^="top"] {
@extend .bs-tooltip-top; @extend .bs-tooltip-top;
} }
&[x-placement^="right"] { &[data-popper-placement^="right"] {
@extend .bs-tooltip-right; @extend .bs-tooltip-end;
} }
&[x-placement^="bottom"] { &[data-popper-placement^="bottom"] {
@extend .bs-tooltip-bottom; @extend .bs-tooltip-bottom;
} }
&[x-placement^="left"] { &[data-popper-placement^="left"] {
@extend .bs-tooltip-left; @extend .bs-tooltip-start;
} }
} }

3
dev/scss/bootstrap/_transitions.scss Normal file → Executable file
View file

@ -6,6 +6,7 @@
} }
} }
// scss-docs-start collapse-classes
.collapse { .collapse {
&:not(.show) { &:not(.show) {
display: none; display: none;
@ -13,8 +14,8 @@
} }
.collapsing { .collapsing {
position: relative;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
@include transition($transition-collapse); @include transition($transition-collapse);
} }
// scss-docs-end collapse-classes

101
dev/scss/bootstrap/_type.scss Normal file → Executable file
View file

@ -1,24 +1,30 @@
// stylelint-disable selector-list-comma-newline-after
// //
// Headings // Headings
// //
.h1 {
h1, h2, h3, h4, h5, h6, @extend h1;
.h1, .h2, .h3, .h4, .h5, .h6 { }
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family; .h2 {
font-weight: $headings-font-weight; @extend h2;
line-height: $headings-line-height; }
color: $headings-color;
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
} }
h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.lead { .lead {
@include font-size($lead-font-size); @include font-size($lead-font-size);
@ -26,57 +32,25 @@ h6, .h6 { @include font-size($h6-font-size); }
} }
// Type display classes // Type display classes
.display-1 { @each $display, $font-size in $display-font-sizes {
@include font-size($display1-size); .display-#{$display} {
font-weight: $display1-weight; @include font-size($font-size);
line-height: $display-line-height; font-weight: $display-font-weight;
line-height: $display-line-height;
}
} }
.display-2 {
@include font-size($display2-size);
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
@include font-size($display3-size);
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
@include font-size($display4-size);
font-weight: $display4-weight;
line-height: $display-line-height;
}
//
// Horizontal rules
//
hr {
margin-top: $hr-margin-y;
margin-bottom: $hr-margin-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
// //
// Emphasis // Emphasis
// //
small,
.small { .small {
@include font-size($small-font-size); @extend small;
font-weight: $font-weight-normal;
} }
mark,
.mark { .mark {
padding: $mark-padding; @extend mark;
background-color: $mark-bg;
} }
// //
// Lists // Lists
// //
@ -104,20 +78,25 @@ mark,
// Builds on `abbr` // Builds on `abbr`
.initialism { .initialism {
@include font-size(90%); @include font-size($initialism-font-size);
text-transform: uppercase; text-transform: uppercase;
} }
// Blockquotes // Blockquotes
.blockquote { .blockquote {
margin-bottom: $spacer; margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size); @include font-size($blockquote-font-size);
> :last-child {
margin-bottom: 0;
}
} }
.blockquote-footer { .blockquote-footer {
display: block; margin-top: -$blockquote-margin-y;
@include font-size($blockquote-small-font-size); margin-bottom: $blockquote-margin-y;
color: $blockquote-small-color; @include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
&::before { &::before {
content: "\2014\00A0"; // em dash, nbsp content: "\2014\00A0"; // em dash, nbsp

612
dev/scss/bootstrap/_utilities.scss Normal file → Executable file
View file

@ -1,18 +1,594 @@
@import "utilities/align"; // stylelint-disable indentation
@import "utilities/background";
@import "utilities/borders"; // Utilities
@import "utilities/clearfix";
@import "utilities/display"; $utilities: () !default;
@import "utilities/embed"; // stylelint-disable-next-line scss/dollar-variable-default
@import "utilities/flex"; $utilities: map-merge(
@import "utilities/float"; (
@import "utilities/interactions"; // scss-docs-start utils-vertical-align
@import "utilities/overflow"; "align": (
@import "utilities/position"; property: vertical-align,
@import "utilities/screenreaders"; class: align,
@import "utilities/shadows"; values: baseline top middle bottom text-bottom text-top
@import "utilities/sizing"; ),
@import "utilities/spacing"; // scss-docs-end utils-vertical-align
@import "utilities/stretched-link"; // scss-docs-start utils-float
@import "utilities/text"; "float": (
@import "utilities/visibility"; responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),
// scss-docs-end utils-float
// scss-docs-start utils-overflow
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
none: none,
)
),
// scss-docs-end utils-shadow
// scss-docs-start utils-position
"position": (
property: position,
values: static relative absolute fixed sticky
),
"top": (
property: top,
values: $position-values
),
"bottom": (
property: bottom,
values: $position-values
),
"start": (
property: left,
class: start,
values: $position-values
),
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),
// scss-docs-end utils-position
// scss-docs-start utils-borders
"border": (
property: border,
values: (
null: $border-width solid $border-color,
0: 0,
)
),
"border-top": (
property: border-top,
values: (
null: $border-width solid $border-color,
0: 0,
)
),
"border-end": (
property: border-right,
class: border-end,
values: (
null: $border-width solid $border-color,
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: $border-width solid $border-color,
0: 0,
)
),
"border-start": (
property: border-left,
class: border-start,
values: (
null: $border-width solid $border-color,
0: 0,
)
),
"border-color": (
property: border-color,
class: border,
values: map-merge($theme-colors, ("white": $white))
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
// scss-docs-end utils-borders
// Sizing utilities
// scss-docs-start utils-sizing
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-width": (
property: max-width,
class: mw,
values: (100: 100%)
),
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
),
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
),
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-height": (
property: max-height,
class: mh,
values: (100: 100%)
),
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
),
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
),
// scss-docs-end utils-sizing
// Flex utilities
// scss-docs-start utils-flex
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),
// scss-docs-end utils-flex
// Margin utilities
// scss-docs-start utils-spacing
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
// scss-docs-end utils-text
// scss-docs-start utils-color
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),
// scss-docs-end utils-color
// scss-docs-start utils-bg-color
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
values: (gradient: var(--#{$variable-prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
"rounded": (
property: border-radius,
class: rounded,
values: (
null: $border-radius,
0: 0,
1: $border-radius-sm,
2: $border-radius,
3: $border-radius-lg,
circle: 50%,
pill: $border-radius-pill
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (null: $border-radius)
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (null: $border-radius)
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (null: $border-radius)
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (null: $border-radius)
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
"visibility": (
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)
// scss-docs-end utils-visibility
),
$utilities
);

1236
dev/scss/bootstrap/_variables.scss Normal file → Executable file
View file

File diff suppressed because it is too large Load diff

67
dev/scss/bootstrap/bootstrap-grid.scss vendored Normal file → Executable file
View file

@ -1,30 +1,65 @@
/*! /*!
* Bootstrap Grid v4.6.0 (https://getbootstrap.com/) * Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */
html { $include-column-box-sizing: true !default;
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions"; @import "functions";
@import "variables"; @import "variables";
@import "mixins/deprecate"; @import "mixins/lists";
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/grid-framework"; @import "mixins/container";
@import "mixins/grid"; @import "mixins/grid";
@import "mixins/utilities";
@import "vendor/rfs";
@import "containers";
@import "grid"; @import "grid";
@import "utilities/display";
@import "utilities/flex"; @import "utilities";
@import "utilities/spacing"; // Only use the utilities we need
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-get-multiple(
$utilities,
(
"display",
"order",
"flex",
"flex-direction",
"flex-grow",
"flex-shrink",
"flex-wrap",
"justify-content",
"align-items",
"align-content",
"align-self",
"margin",
"margin-x",
"margin-y",
"margin-top",
"margin-end",
"margin-bottom",
"margin-start",
"negative-margin",
"negative-margin-x",
"negative-margin-y",
"negative-margin-top",
"negative-margin-end",
"negative-margin-bottom",
"negative-margin-start",
"padding",
"padding-x",
"padding-y",
"padding-top",
"padding-end",
"padding-bottom",
"padding-start",
)
);
@import "utilities/api";

5
dev/scss/bootstrap/bootstrap-reboot.scss vendored Normal file → Executable file
View file

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v4.6.0 (https://getbootstrap.com/) * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@ -8,5 +8,8 @@
@import "functions"; @import "functions";
@import "variables"; @import "variables";
// Prevent the usage of custom properties since we don't add them to `:root` in reboot
$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
@import "mixins"; @import "mixins";
@import "reboot"; @import "reboot";

18
dev/scss/bootstrap/bootstrap-utilities.scss vendored Executable file
View file

@ -0,0 +1,18 @@
/*!
* Bootstrap Utilities v5.0.2 (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)
*/
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";

24
dev/scss/bootstrap/bootstrap.scss vendored Normal file → Executable file
View file

@ -1,18 +1,23 @@
/*! /*!
* Bootstrap v4.6.0 (https://getbootstrap.com/) * Bootstrap v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc. * Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */
// scss-docs-start import-stack
// Configuration
@import "functions"; @import "functions";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "utilities";
// Layout & components
@import "root"; @import "root";
@import "reboot"; @import "reboot";
@import "type"; @import "type";
@import "images"; @import "images";
@import "code"; @import "containers";
@import "grid"; @import "grid";
@import "tables"; @import "tables";
@import "forms"; @import "forms";
@ -20,18 +25,15 @@
@import "transitions"; @import "transitions";
@import "dropdown"; @import "dropdown";
@import "button-group"; @import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav"; @import "nav";
@import "navbar"; @import "navbar";
@import "card"; @import "card";
@import "accordion";
@import "breadcrumb"; @import "breadcrumb";
@import "pagination"; @import "pagination";
@import "badge"; @import "badge";
@import "jumbotron";
@import "alert"; @import "alert";
@import "progress"; @import "progress";
@import "media";
@import "list-group"; @import "list-group";
@import "close"; @import "close";
@import "toasts"; @import "toasts";
@ -40,5 +42,11 @@
@import "popover"; @import "popover";
@import "carousel"; @import "carousel";
@import "spinners"; @import "spinners";
@import "utilities"; @import "offcanvas";
@import "print";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack

63
dev/scss/bootstrap/forms/_floating-labels.scss Executable file
View file

@ -0,0 +1,63 @@
.form-floating {
position: relative;
> .form-control,
> .form-select {
height: $form-floating-height;
line-height: $form-floating-line-height;
}
> label {
position: absolute;
top: 0;
left: 0;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
pointer-events: none;
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
transform-origin: 0 0;
@include transition($form-floating-transition);
}
// stylelint-disable no-duplicate-selectors
> .form-control {
padding: $form-floating-padding-y $form-floating-padding-x;
&::placeholder {
color: transparent;
}
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
}
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
> .form-control:focus,
> .form-control:not(:placeholder-shown),
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
}
// stylelint-enable no-duplicate-selectors
}

152
dev/scss/bootstrap/forms/_form-check.scss Executable file
View file

@ -0,0 +1,152 @@
//
// Check/radio
//
.form-check {
display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: $form-check-padding-start * -1;
}
}
.form-check-input {
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
appearance: none;
color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);
&[type="checkbox"] {
@include border-radius($form-check-input-border-radius);
}
&[type="radio"] {
// stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius;
}
&:active {
filter: $form-check-input-active-filter;
}
&:focus {
border-color: $form-check-input-focus-border;
outline: 0;
box-shadow: $form-check-input-focus-box-shadow;
}
&:checked {
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
@if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
}
}
&[type="radio"] {
@if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
}
}
&[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color;
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
}
}
&:disabled {
pointer-events: none;
filter: none;
opacity: $form-check-input-disabled-opacity;
}
// Use disabled attribute in addition of :disabled pseudo-class
// See: https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .form-check-label {
opacity: $form-check-label-disabled-opacity;
}
}
}
.form-check-label {
color: $form-check-label-color;
cursor: $form-check-label-cursor;
}
//
// Switch
//
.form-switch {
padding-left: $form-switch-padding-start;
.form-check-input {
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: escape-svg($form-switch-bg-image);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include transition($form-switch-transition);
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
}
}
}
}
.form-check-inline {
display: inline-block;
margin-right: $form-check-inline-margin-end;
}
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
&[disabled],
&:disabled {
+ .btn {
pointer-events: none;
filter: none;
opacity: $form-check-btn-check-disabled-opacity;
}
}
}

219
dev/scss/bootstrap/forms/_form-control.scss Executable file
View file

@ -0,0 +1,219 @@
//
// General form controls (plus a few specific high-level interventions)
//
.form-control {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
appearance: none; // Fix appearance for date inputs in Safari
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
&[type="file"] {
overflow: hidden; // prevent pseudo element button overlap
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
}
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
}
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
&::-webkit-date-and-time-value {
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
}
// Placeholder
&::placeholder {
color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-disabled-bg;
border-color: $input-disabled-border-color;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
// File input buttons theming
&::file-selector-button {
padding: $input-padding-y $input-padding-x;
margin: (-$input-padding-y) (-$input-padding-x);
margin-inline-end: $input-padding-x;
color: $form-file-button-color;
@include gradient-bg($form-file-button-bg);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: $input-border-width;
border-radius: 0; // stylelint-disable-line property-disallowed-list
@include transition($btn-transition);
}
&:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: $form-file-button-hover-bg;
}
&::-webkit-file-upload-button {
padding: $input-padding-y $input-padding-x;
margin: (-$input-padding-y) (-$input-padding-x);
margin-inline-end: $input-padding-x;
color: $form-file-button-color;
@include gradient-bg($form-file-button-bg);
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: $input-border-width;
border-radius: 0; // stylelint-disable-line property-disallowed-list
@include transition($btn-transition);
}
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: $form-file-button-hover-bg;
}
}
// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-plaintext {
display: block;
width: 100%;
padding: $input-padding-y 0;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
border: solid transparent;
border-width: $input-border-width 0;
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
min-height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
&::file-selector-button {
padding: $input-padding-y-sm $input-padding-x-sm;
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
margin-inline-end: $input-padding-x-sm;
}
&::-webkit-file-upload-button {
padding: $input-padding-y-sm $input-padding-x-sm;
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
margin-inline-end: $input-padding-x-sm;
}
}
.form-control-lg {
min-height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
&::file-selector-button {
padding: $input-padding-y-lg $input-padding-x-lg;
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
margin-inline-end: $input-padding-x-lg;
}
&::-webkit-file-upload-button {
padding: $input-padding-y-lg $input-padding-x-lg;
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
margin-inline-end: $input-padding-x-lg;
}
}
// Make sure textareas don't shrink too much when resized
// https://github.com/twbs/bootstrap/pull/29124
// stylelint-disable selector-no-qualifying-type
textarea {
&.form-control {
min-height: $input-height;
}
&.form-control-sm {
min-height: $input-height-sm;
}
&.form-control-lg {
min-height: $input-height-lg;
}
}
// stylelint-enable selector-no-qualifying-type
.form-control-color {
max-width: 3rem;
height: auto; // Override fixed browser height
padding: $input-padding-y;
&:not(:disabled):not([readonly]) {
cursor: pointer;
}
&::-moz-color-swatch {
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
@include border-radius($input-border-radius);
}
&::-webkit-color-swatch {
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
@include border-radius($input-border-radius);
}
}

91
dev/scss/bootstrap/forms/_form-range.scss Executable file
View file

@ -0,0 +1,91 @@
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
.form-range {
width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&:focus {
outline: 0;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
border: 0;
}
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
appearance: none;
&:active {
@include gradient-bg($form-range-thumb-active-bg);
}
}
&::-webkit-slider-runnable-track {
width: $form-range-track-width;
height: $form-range-track-height;
color: transparent; // Why?
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
border-color: transparent;
@include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow);
}
&::-moz-range-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
appearance: none;
&:active {
@include gradient-bg($form-range-thumb-active-bg);
}
}
&::-moz-range-track {
width: $form-range-track-width;
height: $form-range-track-height;
color: transparent;
cursor: $form-range-track-cursor;
background-color: $form-range-track-bg;
border-color: transparent; // Firefox specific?
@include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow);
}
&:disabled {
pointer-events: none;
&::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg;
}
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
}
}
}

70
dev/scss/bootstrap/forms/_form-select.scss Executable file
View file

@ -0,0 +1,70 @@
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
.form-select {
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
line-height: $form-select-line-height;
color: $form-select-color;
background-color: $form-select-bg;
background-image: escape-svg($form-select-indicator);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color;
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
@include transition($form-select-transition);
appearance: none;
&:focus {
border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
}
&[multiple],
&[size]:not([size="1"]) {
padding-right: $form-select-padding-x;
background-image: none;
}
&:disabled {
color: $form-select-disabled-color;
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $form-select-color;
}
}
.form-select-sm {
padding-top: $form-select-padding-y-sm;
padding-bottom: $form-select-padding-y-sm;
padding-left: $form-select-padding-x-sm;
@include font-size($form-select-font-size-sm);
}
.form-select-lg {
padding-top: $form-select-padding-y-lg;
padding-bottom: $form-select-padding-y-lg;
padding-left: $form-select-padding-x-lg;
@include font-size($form-select-font-size-lg);
}

11
dev/scss/bootstrap/forms/_form-text.scss Executable file
View file

@ -0,0 +1,11 @@
//
// Form text
//
.form-text {
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
font-style: $form-text-font-style;
font-weight: $form-text-font-weight;
color: $form-text-color;
}

121
dev/scss/bootstrap/forms/_input-group.scss Executable file
View file

@ -0,0 +1,121 @@
//
// Base styles
//
.input-group {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
align-items: stretch;
width: 100%;
> .form-control,
> .form-select {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
}
// Bring the "active" form control to the top of surrounding elements
> .form-control:focus,
> .form-select:focus {
z-index: 3;
}
// Ensure buttons are always above inputs for more visually pleasing borders.
// This isn't needed for `.input-group-text` since it shares the same border-color
// as our inputs.
.btn {
position: relative;
z-index: 2;
&:focus {
z-index: 3;
}
}
}
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
// to prepend or append to an input.
.input-group-text {
display: flex;
align-items: center;
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
@include font-size($input-font-size); // Match inputs
font-weight: $input-group-addon-font-weight;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
}
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
}
.input-group-lg > .form-select,
.input-group-sm > .form-select {
padding-right: $form-select-padding-x + $form-select-indicator-padding;
}
// Rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-end-radius(0);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
@include border-end-radius(0);
}
}
$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
@include border-start-radius(0);
}
}

36
dev/scss/bootstrap/forms/_labels.scss Executable file
View file

@ -0,0 +1,36 @@
//
// Labels
//
.form-label {
margin-bottom: $form-label-margin-bottom;
@include font-size($form-label-font-size);
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
color: $form-label-color;
}
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
line-height: $input-line-height;
color: $form-label-color;
}
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg);
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm);
}

12
dev/scss/bootstrap/forms/_validation.scss Executable file
View file

@ -0,0 +1,12 @@
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
// scss-docs-end form-validation-states-loop

0
dev/scss/bootstrap/utilities/_clearfix.scss → dev/scss/bootstrap/helpers/_clearfix.scss Normal file → Executable file
View file

12
dev/scss/bootstrap/helpers/_colored-links.scss Executable file
View file

@ -0,0 +1,12 @@
@each $color, $value in $theme-colors {
.link-#{$color} {
color: $value;
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
}
}
}
}

30
dev/scss/bootstrap/helpers/_position.scss Executable file
View file

@ -0,0 +1,30 @@
// Shorthand
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-fixed;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-fixed;
}
// Responsive sticky top
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.sticky#{$infix}-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
}
}
}

26
dev/scss/bootstrap/helpers/_ratio.scss Executable file
View file

@ -0,0 +1,26 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
position: relative;
width: 100%;
&::before {
display: block;
padding-top: var(--#{$variable-prefix}aspect-ratio);
content: "";
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@each $key, $ratio in $aspect-ratios {
.ratio-#{$key} {
--#{$variable-prefix}aspect-ratio: #{$ratio};
}
}

15
dev/scss/bootstrap/helpers/_stretched-link.scss Executable file
View file

@ -0,0 +1,15 @@
//
// Stretched link
//
.stretched-link {
&::#{$stretched-link-pseudo-element} {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $stretched-link-z-index;
content: "";
}
}

7
dev/scss/bootstrap/helpers/_text-truncation.scss Executable file
View file

@ -0,0 +1,7 @@
//
// Text truncation
//
.text-truncate {
@include text-truncate();
}

8
dev/scss/bootstrap/helpers/_visually-hidden.scss Executable file
View file

@ -0,0 +1,8 @@
//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
@include visually-hidden();
}

8
dev/scss/bootstrap/mixins/_alert.scss Normal file → Executable file
View file

@ -1,13 +1,11 @@
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) { @mixin alert-variant($background, $border, $color) {
color: $color; color: $color;
@include gradient-bg($background); @include gradient-bg($background);
border-color: $border; border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.alert-link { .alert-link {
color: darken($color, 10%); color: shade-color($color, 20%);
} }
} }
// scss-docs-end alert-variant-mixin

23
dev/scss/bootstrap/mixins/_background-variant.scss
View file

@ -1,23 +0,0 @@
// stylelint-disable declaration-no-important
// Contextual backgrounds
@mixin bg-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus() {
background-color: darken($color, 10%) !important;
}
}
@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
}
@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
}
@include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
}

17
dev/scss/bootstrap/mixins/_badge.scss
View file

@ -1,17 +0,0 @@
@mixin badge-variant($bg) {
color: color-yiq($bg);
background-color: $bg;
@at-root a#{&} {
@include hover-focus() {
color: color-yiq($bg);
background-color: darken($bg, 10%);
}
&:focus,
&.focus {
outline: 0;
box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
}
}
}

18
dev/scss/bootstrap/mixins/_border-radius.scss Normal file → Executable file
View file

@ -14,6 +14,7 @@
@return $return; @return $return;
} }
// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded { @if $enable-rounded {
border-radius: valid-radius($radius); border-radius: valid-radius($radius);
@ -23,54 +24,55 @@
} }
} }
@mixin border-top-radius($radius) { @mixin border-top-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
} }
} }
@mixin border-right-radius($radius) { @mixin border-end-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-radius($radius) { @mixin border-bottom-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }
} }
@mixin border-left-radius($radius) { @mixin border-start-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }
} }
@mixin border-top-left-radius($radius) { @mixin border-top-start-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
} }
} }
@mixin border-top-right-radius($radius) { @mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-right-radius($radius) { @mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
} }
} }
@mixin border-bottom-left-radius($radius) { @mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded { @if $enable-rounded {
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }
} }
// scss-docs-end border-radius-mixins

16
dev/scss/bootstrap/mixins/_box-shadow.scss Normal file → Executable file
View file

@ -2,17 +2,15 @@
@if $enable-shadows { @if $enable-shadows {
$result: (); $result: ();
@if (length($shadow) == 1) { @each $value in $shadow {
// We can pass `@include box-shadow(none);` @if $value != null {
$result: $shadow; $result: append($result, $value, "comma");
} @else { }
// Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` @if $value == none and length($shadow) > 1 {
@for $i from 1 through length($shadow) { @warn "The keyword 'none' must be used as a single argument.";
@if nth($shadow, $i) != "none" {
$result: append($result, nth($shadow, $i), "comma");
}
} }
} }
@if (length($result) > 0) { @if (length($result) > 0) {
box-shadow: $result; box-shadow: $result;
} }

24
dev/scss/bootstrap/mixins/_breakpoints.scss Normal file → Executable file
View file

@ -16,7 +16,10 @@
// md // md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name); $n: index($breakpoint-names, $name);
@return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); @if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
} }
// Minimum breakpoint width. Null for the smallest (first) breakpoint. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@ -28,18 +31,18 @@
@return if($min != 0, $min, null); @return if($min != 0, $min, null);
} }
// Maximum breakpoint width. Null for the largest (last) breakpoint. // Maximum breakpoint width.
// The maximum value is calculated as the minimum of the next one less 0.02px // The maximum value is reduced by 0.02px to work around the limitations of
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. // `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261
// //
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767.98px // 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints); $max: map-get($breakpoints, $name);
@return if($next, breakpoint-min($next, $breakpoints) - .02, null); @return if($max and $max > 0, $max - .02, null);
} }
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@ -104,8 +107,9 @@
// No minimum for the smallest breakpoint, and no maximum for the largest one. // No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints); $min: breakpoint-min($name, $breakpoints);
$max: breakpoint-max($name, $breakpoints); $next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next);
@if $min != null and $max != null { @if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) { @media (min-width: $min) and (max-width: $max) {
@ -116,7 +120,7 @@
@content; @content;
} }
} @else if $min == null { } @else if $min == null {
@include media-breakpoint-down($name, $breakpoints) { @include media-breakpoint-down($next, $breakpoints) {
@content; @content;
} }
} }

123
dev/scss/bootstrap/mixins/_buttons.scss Normal file → Executable file
View file

@ -3,94 +3,110 @@
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { // scss-docs-start btn-variant-mixin
color: color-yiq($background); @mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
color: $color;
@include gradient-bg($background); @include gradient-bg($background);
border-color: $border; border-color: $border;
@include box-shadow($btn-box-shadow); @include box-shadow($btn-box-shadow);
@include hover() { &:hover {
color: color-yiq($hover-background); color: $hover-color;
@include gradient-bg($hover-background); @include gradient-bg($hover-background);
border-color: $hover-border; border-color: $hover-border;
} }
&:focus, .btn-check:focus + &,
&.focus { &:focus {
color: color-yiq($hover-background); color: $hover-color;
@include gradient-bg($hover-background); @include gradient-bg($hover-background);
border-color: $hover-border; border-color: $hover-border;
@if $enable-shadows { @if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
} }
} }
// Disabled comes first so active can properly restyle .btn-check:checked + &,
&.disabled, .btn-check:active + &,
&:disabled { &:active,
color: color-yiq($background); &.active,
background-color: $background;
border-color: $border;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle { .show > &.dropdown-toggle {
color: color-yiq($active-background); color: $active-color;
background-color: $active-background; background-color: $active-background;
@if $enable-gradients { // Remove CSS gradients if they're enabled
background-image: none; // Remove the gradient for the pressed/active state background-image: if($enable-gradients, none, null);
}
border-color: $active-border; border-color: $active-border;
&:focus { &:focus {
@if $enable-shadows and $btn-active-box-shadow != none { @if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
} }
} }
} }
}
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { &:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $disabled-border;
}
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
$active-border: $color,
$active-color: color-contrast($active-background)
) {
color: $color; color: $color;
border-color: $color; border-color: $color;
@include hover() { &:hover {
color: $color-hover; color: $color-hover;
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
} }
&:focus, .btn-check:focus + &,
&.focus { &:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
} }
&.disabled, .btn-check:checked + &,
&:disabled { .btn-check:active + &,
color: $color; &:active,
background-color: transparent; &.active,
} &.dropdown-toggle.show {
color: $active-color;
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
color: color-yiq($active-background);
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
&:focus { &:focus {
@if $enable-shadows and $btn-active-box-shadow != none { @if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else { } @else {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@ -98,13 +114,20 @@
} }
} }
} }
}
// Button sizes &:disabled,
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { &.disabled {
color: $color;
background-color: transparent;
}
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
@include font-size($font-size); @include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default // Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0); @include border-radius($border-radius, 0);
} }
// scss-docs-end btn-size-mixin

18
dev/scss/bootstrap/mixins/_caret.scss Normal file → Executable file
View file

@ -1,25 +1,26 @@
@mixin caret-down() { // scss-docs-start caret-mixins
@mixin caret-down {
border-top: $caret-width solid; border-top: $caret-width solid;
border-right: $caret-width solid transparent; border-right: $caret-width solid transparent;
border-bottom: 0; border-bottom: 0;
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
@mixin caret-up() { @mixin caret-up {
border-top: 0; border-top: 0;
border-right: $caret-width solid transparent; border-right: $caret-width solid transparent;
border-bottom: $caret-width solid; border-bottom: $caret-width solid;
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
@mixin caret-right() { @mixin caret-end {
border-top: $caret-width solid transparent; border-top: $caret-width solid transparent;
border-right: 0; border-right: 0;
border-bottom: $caret-width solid transparent; border-bottom: $caret-width solid transparent;
border-left: $caret-width solid; border-left: $caret-width solid;
} }
@mixin caret-left() { @mixin caret-start {
border-top: $caret-width solid transparent; border-top: $caret-width solid transparent;
border-right: $caret-width solid; border-right: $caret-width solid;
border-bottom: $caret-width solid transparent; border-bottom: $caret-width solid transparent;
@ -36,12 +37,12 @@
@include caret-down(); @include caret-down();
} @else if $direction == up { } @else if $direction == up {
@include caret-up(); @include caret-up();
} @else if $direction == right { } @else if $direction == end {
@include caret-right(); @include caret-end();
} }
} }
@if $direction == left { @if $direction == start {
&::after { &::after {
display: none; display: none;
} }
@ -51,7 +52,7 @@
margin-right: $caret-spacing; margin-right: $caret-spacing;
vertical-align: $caret-vertical-align; vertical-align: $caret-vertical-align;
content: ""; content: "";
@include caret-left(); @include caret-start();
} }
} }
@ -60,3 +61,4 @@
} }
} }
} }
// scss-docs-end caret-mixins

2
dev/scss/bootstrap/mixins/_clearfix.scss Normal file → Executable file
View file

@ -1,3 +1,4 @@
// scss-docs-start clearfix
@mixin clearfix() { @mixin clearfix() {
&::after { &::after {
display: block; display: block;
@ -5,3 +6,4 @@
content: ""; content: "";
} }
} }
// scss-docs-end clearfix

7
dev/scss/bootstrap/mixins/_color-scheme.scss Executable file
View file

@ -0,0 +1,7 @@
// scss-docs-start mixin-color-scheme
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
// scss-docs-end mixin-color-scheme

9
dev/scss/bootstrap/mixins/_container.scss Executable file
View file

@ -0,0 +1,9 @@
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
width: 100%;
padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
margin-right: auto;
margin-left: auto;
}

0
dev/scss/bootstrap/mixins/_deprecate.scss Normal file → Executable file
View file

14
dev/scss/bootstrap/mixins/_float.scss
View file

@ -1,14 +0,0 @@
// stylelint-disable declaration-no-important
@mixin float-left() {
float: left !important;
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
}
@mixin float-right() {
float: right !important;
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
}
@mixin float-none() {
float: none !important;
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
}

133
dev/scss/bootstrap/mixins/_forms.scss Normal file → Executable file
View file

@ -1,33 +1,7 @@
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-focus-border-color` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus($ignore-warning: false) {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
}
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
}
// This mixin uses an `if()` technique to be compatible with Dart Sass // This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) { @mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") { @if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state}, .was-validated #{if(&, "&", "")}:#{$state},
@ -41,19 +15,26 @@
} }
} }
@mixin form-validation-state($state, $color, $icon) { @mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback { .#{$state}-feedback {
display: none; display: none;
width: 100%; width: 100%;
margin-top: $form-feedback-margin-top; margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size); @include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color; color: $color;
} }
.#{$state}-tooltip { .#{$state}-tooltip {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0;
z-index: 5; z-index: 5;
display: none; display: none;
max-width: 100%; // Contain to parent when possible max-width: 100%; // Contain to parent when possible
@ -61,16 +42,9 @@
margin-top: .1rem; margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size); @include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height; line-height: $form-feedback-tooltip-line-height;
color: color-yiq($color); color: $tooltip-color;
background-color: rgba($color, $form-feedback-tooltip-opacity); background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius); @include border-radius($form-feedback-tooltip-border-radius);
// See https://github.com/twbs/bootstrap/pull/31557
// Align tooltip to form elements
.form-row > .col > &,
.form-row > [class*="col-"] > & {
left: $form-grid-gutter-width / 2;
}
} }
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
@ -94,7 +68,7 @@
&:focus { &:focus {
border-color: $color; border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25); box-shadow: $focus-box-shadow;
} }
} }
} }
@ -109,77 +83,62 @@
} }
} }
.custom-select { .form-select {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
border-color: $color; border-color: $color;
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $custom-select-feedback-icon-padding-right; &:not([multiple]):not([size]),
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; &:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
} }
&:focus { &:focus {
border-color: $color; border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25); box-shadow: $focus-box-shadow;
} }
} }
} }
.form-check-input { .form-check-input {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
}
~ .#{$state}-feedback, }
~ .#{$state}-tooltip { .form-check-inline .form-check-input {
display: block; ~ .#{$state}-feedback {
} margin-left: .5em;
} }
} }
.custom-control-input { .input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) { @include form-validation-state-selector($state) {
~ .custom-control-label { @if $state == "valid" {
color: $color; z-index: 1;
} @else if $state == "invalid" {
&::before { z-index: 2;
border-color: $color;
}
} }
&:checked {
~ .custom-control-label::before {
border-color: lighten($color, 10%);
@include gradient-bg(lighten($color, 10%));
}
}
&:focus { &:focus {
~ .custom-control-label::before { z-index: 3;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
&:not(:checked) ~ .custom-control-label::before {
border-color: $color;
}
}
}
}
// custom file
.custom-file-input {
@include form-validation-state-selector($state) {
~ .custom-file-label {
border-color: $color;
}
&:focus {
~ .custom-file-label {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
} }
} }
} }
} }
// scss-docs-end form-validation-mixins

24
dev/scss/bootstrap/mixins/_gradients.scss Normal file → Executable file
View file

@ -1,45 +1,47 @@
// Gradients // Gradients
@mixin gradient-bg($color) { // scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients { @if $enable-gradients {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; background-image: var(--#{$variable-prefix}gradient);
} @else {
background-color: $color;
} }
} }
// scss-docs-end gradient-bg-mixin
// scss-docs-start gradient-mixins
// Horizontal gradient, from left to right // Horizontal gradient, from left to right
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
} }
// Vertical gradient, from top to bottom // Vertical gradient, from top to bottom
// //
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
} }
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color); background-image: linear-gradient($deg, $start-color, $end-color);
background-repeat: repeat-x;
} }
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
} }
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
} }
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color); background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
} }
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
} }
// scss-docs-end gradient-mixins

80
dev/scss/bootstrap/mixins/_grid-framework.scss
View file

@ -1,80 +0,0 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@if $columns > 0 {
// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@extend %grid-column;
}
}
}
.col#{$infix},
.col#{$infix}-auto {
@extend %grid-column;
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
@if $grid-row-columns > 0 {
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
}
.col#{$infix}-auto {
@include make-col-auto();
}
@if $columns > 0 {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
}
.order#{$infix}-first { order: -1; }
.order#{$infix}-last { order: $columns + 1; }
@for $i from 0 through $columns {
.order#{$infix}-#{$i} { order: $i; }
}
@if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns);
}
}
}
}
}
}
}

133
dev/scss/bootstrap/mixins/_grid.scss Normal file → Executable file
View file

@ -1,58 +1,49 @@
/// Grid system // Grid system
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;
}
@mixin make-row($gutter: $grid-gutter-width) { @mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -$gutter / 2; margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-left: -$gutter / 2; margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
} margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
} }
@mixin make-col-ready($gutter: $grid-gutter-width) { @mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative; // Add box sizing if only the grid is loaded
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
// Prevent columns from becoming too narrow when at smaller grid tiers by // Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values // always setting `width: 100%;`. This works because we set the width
// later on to override this initial width. // later on to override this initial width.
flex-shrink: 0;
width: 100%; width: 100%;
padding-right: $gutter / 2; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-left: $gutter / 2; padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
} }
@mixin make-col($size, $columns: $grid-columns) { @mixin make-col($size: false, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns); @if $size {
// Add a `max-width` to ensure content within each column does not blow out flex: 0 0 auto;
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari width: percentage(divide($size, $columns));
// do not appear to require this.
max-width: percentage($size / $columns); } @else {
flex: 1 1 0;
max-width: 100%;
}
} }
@mixin make-col-auto() { @mixin make-col-auto() {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
max-width: 100%; // Reset earlier grid tiers
} }
@mixin make-col-offset($size, $columns: $grid-columns) { @mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns; $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num)); margin-left: if($num == 0, 0, percentage($num));
} }
@ -63,7 +54,79 @@
// style grid. // style grid.
@mixin row-cols($count) { @mixin row-cols($count) {
> * { > * {
flex: 0 0 100% / $count; flex: 0 0 auto;
max-width: 100% / $count; width: divide(100%, $count);
}
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
// .row-cols defaults must all appear before .col overrides so they can be overridden.
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
}
.row-cols#{$infix}-auto > * {
@include make-col-auto();
}
@if $grid-row-columns > 0 {
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
}
}
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
.col#{$infix}-auto {
@include make-col-auto();
}
@if $columns > 0 {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns);
}
}
}
}
// Gutters
//
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--#{$variable-prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--#{$variable-prefix}gutter-y: #{$value};
}
}
}
} }
} }

37
dev/scss/bootstrap/mixins/_hover.scss
View file

@ -1,37 +0,0 @@
// Hover mixin and `$enable-hover-media-query` are deprecated.
//
// Originally added during our alphas and maintained during betas, this mixin was
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
// would persist after initial touch.
//
// For backward compatibility, we've kept these mixins and updated them to
// always return their regular pseudo-classes instead of a shimmed media query.
//
// Issue: https://github.com/twbs/bootstrap/issues/25195
@mixin hover() {
&:hover { @content; }
}
@mixin hover-focus() {
&:hover,
&:focus {
@content;
}
}
@mixin plain-hover-focus() {
&,
&:hover,
&:focus {
@content;
}
}
@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
@content;
}
}

Some files were not shown because too many files have changed in this diff Show more