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 %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#instances">{% trans "Instances" %}</a>
<li class="nav-item" role="presentation">
<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 class="nav-item">
<a class="nav-link" data-toggle="tab" href="#public-keys">{% trans "Public Keys" %}</a>
<li class="nav-item" role="presentation">
<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>
</ul>

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

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

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

@ -1,7 +1,7 @@
{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}
{% block title %}WebVirtCloud{% endblock title %}
@ -20,7 +20,7 @@
{% bootstrap_field form.username layout='horizontal' %}
{% bootstrap_field form.password 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>
</form>
</div>

6
accounts/templates/login.html
View file

@ -15,7 +15,7 @@
<div class="col-12" role="main">
{% if form.errors %}
<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." %}
</div>
{% endif %}
@ -24,7 +24,9 @@
<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="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>
</div>
{% endblock %}

22
accounts/templates/profile.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %}
{% load i18n %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}
{% load icons %}
{% load tags_fingerprint %}
@ -10,15 +10,19 @@
{% block content %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#edit-profile">{% trans "Edit Profile" %}</a>
<li class="nav-item" role="presentation">
<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 class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ssh-keys">{% trans "SSH Keys" %}</a>
<li class="nav-item" role="presentation">
<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>
</ul>
<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-body">
<form method="post" action="" role="form" aria-label="Edit user info form">
@ -29,7 +33,7 @@
{% icon 'lock' %} {% trans "Change Password" %}
</a>
{% endif %}
<div class="form-group mb-0 float-right">
<div class="mb-0 float-end">
<button type="submit" class="btn btn-primary">
{% icon 'pencil' %} {% trans "Update" %}
</button>
@ -38,7 +42,7 @@
</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 %}
<div class="col-lg-12">
<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">
{% csrf_token %}
{% 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">
{% icon 'plus' %} {% trans "Add" %}
</button>

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

@ -6,7 +6,7 @@
{% block content %}
<div class="row">
<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' %}
</a>
{% include 'search_block.html' %}
@ -16,8 +16,7 @@
<div class="row">
{% if not groups %}
<div class="col-lg-12">
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<div class="alert alert-warning shadow-sm">
{% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any groups" %}
</div>
</div>
@ -37,7 +36,7 @@
<a href=""><strong>{{ group.name }}</strong></a>
</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" %}">
{% icon 'pencil' %}
</a>
@ -56,5 +55,5 @@
{% endblock content %}
{% block script %}
<script src="{% static "js/filter-table.js" %}"></script>
<script src="{% static 'js/filter-table.js' %}"></script>
{% endblock script %}

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

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

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

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}
{% load icons %}
{% load i18n %}
@ -15,7 +15,7 @@
{% bootstrap_form user_form layout='horizontal' %}
{% bootstrap_form attributes_form layout='horizontal' %}
</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>
<button type="submit" form="create-update" class="btn btn-success">
{% 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_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' %}
</a>
{% include 'search_block.html' %}
@ -19,8 +19,7 @@
<div class="row">
{% if not users %}
<div class="col-lg-12">
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<div class="alert alert-warning shadow-sm">
{% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any user" %}
</div>
</div>
@ -55,7 +54,7 @@
<td>{% if user.is_superuser %}{% icon 'check' %}</span>{% endif %}</td>
<td>{% if can_clone %}{% icon 'check' %}{% endif %}</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-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% icon 'pencil' %}</a>
{% if user.is_active %}

12
appsettings/templates/appsettings.html
View file

@ -10,7 +10,7 @@
<div class="col-lg-12">
<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 %}
<div class="form-group row">
<div class="row mb-1">
<input name="next" type="hidden" value="{{ redirect_to }}">
<label class="col-sm-3 col-form-label">{% trans "Language" %}</label>
<div class="col-sm-6">
@ -29,7 +29,7 @@
</form>
{% if request.user.is_superuser %}
<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>
<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 %}"/>
@ -37,10 +37,10 @@
</div>
</form>
<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>
<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 %}
<option {% if bootstrap_theme.value == theme %}selected{% endif %} value="{{ theme }}">{{ theme }}</option>
{% endfor %}
@ -53,11 +53,11 @@
<h3 class="page-header">{% trans "Other Settings" %}</h3>
{% for setting in appsettings %}
<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>
<div class="col-sm-6">
{% 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 %}
<option {% if setting.value == choice %} selected {% endif %} value={{ choice }}>{% trans choice %}</option>
{% endfor %}

5
appsettings/views.py
View file

@ -47,8 +47,11 @@ def appsettings(request):
if "BOOTSTRAP_THEME" in request.POST:
theme = request.POST.get("BOOTSTRAP_THEME", "")
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_bootswatch = f"@import '{sass_dir.value}/wvc-theme/{theme}/bootswatch';"
try:
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" %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}
{% load icons %}
{% load i18n %}
@ -17,7 +17,7 @@
{% csrf_token %}
{% bootstrap_form form layout='horizontal' %}
</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>
<button type="submit" form="create-update" class="btn btn-success">
{% icon 'check' %} {% trans "Save" %}

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

@ -10,7 +10,7 @@
{% block page_heading_extra %}
<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' %}
</a>
{% if instances %}
@ -22,12 +22,12 @@
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light shadow-sm">
<li class="breadcrumb-item active">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% icon 'dashboard' %} {% trans "Overview" %}</a>
</li>
<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 class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a>
@ -51,10 +51,9 @@
<div class="row">
<div class="col-lg-12">
{% 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>
{% trans "Hypervisor doesn't have any Instances" %}
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>
</div>
{% else %}
@ -73,7 +72,7 @@
{% for instance in instances %}
<tr>
<td>
<a class="text-secondary" href="{% url 'instances:instance' instance.id %}">
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">
{{ instance.name }}
</a>
</td>

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

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

4
computes/templates/create_comp_block.html
View file

@ -1,7 +1,7 @@
{% load i18n %}
{% load bootstrap4 %}
{% load django_bootstrap5 %}
{% 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_ssh_host' %}" class="btn btn-success">{% trans "SSH" %}</a>
<a href="{% url 'add_tls_host' %}" class="btn btn-success">{% trans "TLS" %}</a>

24
computes/templates/overview.html
View file

@ -9,11 +9,10 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light shadow-sm">
<li class="breadcrumb-item">
<span class="font-weight-bold">{% icon 'dashboard' %} {% trans "Overview" %}</span>
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item" aria-current="page">
<span class="fw-bold">{% icon 'dashboard' %} {% trans "Overview" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% icon 'server' %} {% trans "Instances" %}</a>
@ -36,7 +35,6 @@
</ol>
</nav>
</div>
</div>
<div class="shadow-sm">
<h3 class="page-header">{% trans "Basic details" %}</h3>
@ -47,10 +45,10 @@
<dd class="col-9">
<div class="dropdown">
{% 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 }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu" aria-labelledby="hpvArchDrop{{ forloop.counter0 }}">
{% for h in hpv %}
<a class="dropdown-item" href="#">{{ h }}</a>
{% endfor %}
@ -59,10 +57,10 @@
</div>
<div class="dropdown">
{% 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' %}...
</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:" %}
<a class="dropdown-item" tabindex="-1" href="#">{{ arc }}</a>
{% endfor %}
@ -74,10 +72,10 @@
<dd class="col-9">{{ emulator }}</dd>
<dt class="col-3">{% trans "Version" %}</dt>
<dd class="col-9">
<span class="badge bg-secondary text-light">{% trans 'Qemu' %} </span>
<span class="badge bg-primary text-light">{{ version }}</span> &nbsp;
<span class="badge bg-secondary text-light">{% trans 'Libvirt' %} </span>
<span class="badge bg-primary text-light">{{ lib_version }}</span> &nbsp;
<span class="badge bg-secondary">{% trans 'Qemu' %} </span>
<span class="badge bg-primary">{{ version }}</span> &nbsp;
<span class="badge bg-secondary">{% trans 'Libvirt' %} </span>
<span class="badge bg-primary">{{ lib_version }}</span> &nbsp;
</dd>
<dt class="col-3">{% trans "Memory" %}</dt>
<dd class="col-9">{{ host_memory|filesizeformat }}</dd>

6
conf/requirements.txt
View file

@ -1,5 +1,5 @@
Django==3.2.4
django-bootstrap4==3.0.1
Django==3.2.5
django_bootstrap5==2.0.1
django-icons==4.0.0
django-login-required-middleware==0.6.1
django-otp==1.0.6
@ -8,7 +8,7 @@ gunicorn==20.1.0
libsass==0.21.0
libvirt-python==7.4.0
lxml==4.6.3
qrcode==6.1
qrcode==7.0
rwlock==0.0.7
websockify==0.9.0
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">
<div class="container">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<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">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button"
id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">
{% trans "Send key(s)" %}
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
@ -83,7 +83,7 @@
<script>
function log_message(msg, type) {
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) {
$('#status').remove();
$('body').prepend(status_div);

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

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

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

@ -1,46 +1,62 @@
/*!
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Bootstrap 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)
*/
$enable-gradients: true;
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/badge";
@import "bootstrap/jumbotron";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/media";
@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/utilities";
@import "bootstrap/print";
/*!
* Bootstrap 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)
*/
// scss-docs-start import-stack
// Configuration
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/utilities";
// Layout & components
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/containers";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/accordion";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/badge";
@import "bootstrap/alert";
@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.
.alert-dismissible {
padding-right: $close-font-size + $alert-padding-x * 2;
padding-right: $alert-dismissible-padding-r;
// Adjust close link position
.close {
.btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x;
}
}
// Alternate styles
//
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$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);
font-weight: $badge-font-weight;
line-height: 1;
color: $badge-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
@include transition($badge-transition);
@at-root a#{&} {
@include hover-focus() {
text-decoration: none;
}
}
@include gradient-bg();
// Empty badges collapse automatically
&:empty {
@ -32,23 +27,3 @@
position: relative;
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 {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding-x;
&::before {
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;
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 {
color: $breadcrumb-active-color;
}

60
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
.btn-group,
.btn-group-vertical {
@ -10,18 +8,18 @@
> .btn {
position: relative;
flex: 1 1 auto;
}
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
@include hover() {
> .btn-check:checked + .btn,
> .btn-check:focus + .btn,
> .btn:hover,
> .btn:focus,
> .btn:active,
> .btn.active {
z-index: 1;
}
&:focus,
&:active,
&.active {
z-index: 1;
}
}
}
// Optional: Group multiple button groups together for a toolbar
@ -45,12 +43,17 @@
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .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 {
@include border-left-radius(0);
@include border-start-radius(0);
}
}
@ -72,11 +75,11 @@
&::after,
.dropup &::after,
.dropright &::after {
.dropend &::after {
margin-left: 0;
}
.dropleft &::before {
.dropstart &::before {
margin-right: 0;
}
}
@ -129,35 +132,8 @@
@include border-bottom-radius(0);
}
> .btn:not(:first-child),
> .btn ~ .btn,
> .btn-group:not(:first-child) > .btn {
@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;
}
}
}

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

@ -1,5 +1,3 @@
// stylelint-disable selector-no-qualifying-type
//
// Base styles
//
@ -8,38 +6,32 @@
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
background-color: 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 hover() {
&:hover {
color: $body-color;
text-decoration: none;
text-decoration: if($link-hover-decoration == underline, none, null);
}
&:focus,
&.focus {
.btn-check:focus + &,
&:focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
opacity: $btn-disabled-opacity;
@include box-shadow(none);
}
&:not(:disabled):not(.disabled) {
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
@ -48,13 +40,14 @@
@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 {
&:disabled,
&.disabled,
fieldset:disabled & {
pointer-events: none;
opacity: $btn-disabled-opacity;
@include box-shadow(none);
}
}
@ -62,6 +55,7 @@ fieldset:disabled a.btn {
// Alternate buttons
//
// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
@ -73,6 +67,7 @@ fieldset:disabled a.btn {
@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
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
color: $btn-link-color;
text-decoration: $link-decoration;
@include hover() {
color: $link-hover-color;
&:hover {
color: $btn-link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus,
&.focus {
&:focus {
text-decoration: $link-hover-decoration;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// No need for an active state here
@ -110,33 +103,9 @@ fieldset:disabled a.btn {
//
.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 {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-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%;
}
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}

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
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
// Workaround for the image size bug in IE
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
padding: $card-spacer-x;
padding: $card-spacer-y $card-spacer-x;
color: $card-color;
}
.card-title {
margin-bottom: $card-spacer-y;
margin-bottom: $card-title-spacer-y;
}
.card-subtitle {
margin-top: -$card-spacer-y / 2;
margin-top: -$card-title-spacer-y * .5;
margin-bottom: 0;
}
@ -67,7 +64,7 @@
}
.card-link {
@include hover() {
&:hover {
text-decoration: none;
}
@ -81,7 +78,7 @@
//
.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>
color: $card-cap-color;
background-color: $card-cap-bg;
@ -93,7 +90,7 @@
}
.card-footer {
padding: $card-spacer-y $card-spacer-x;
padding: $card-cap-padding-y $card-cap-padding-x;
color: $card-cap-color;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
@ -109,15 +106,22 @@
//
.card-header-tabs {
margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
margin-left: -$card-spacer-x / 2;
margin-right: -$card-cap-padding-x * .5;
margin-bottom: -$card-cap-padding-y;
margin-left: -$card-cap-padding-x * .5;
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 {
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
margin-right: -$card-cap-padding-x * .5;
margin-left: -$card-cap-padding-x * .5;
}
// Card image
@ -134,7 +138,6 @@
.card-img,
.card-img-top,
.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
}
@ -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
//
@ -202,7 +181,7 @@
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);
@include border-end-radius(0);
.card-img-top,
.card-header {
@ -217,7 +196,7 @@
}
&:not(:first-child) {
@include border-left-radius(0);
@include border-start-radius(0);
.card-img-top,
.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)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// 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.
// 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.
// 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.
.carousel {
@ -42,16 +42,19 @@
display: block;
}
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%);
}
/* rtl:end:ignore */
//
// Alternate transitions
@ -65,14 +68,14 @@
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
.active.carousel-item-start,
.active.carousel-item-end {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
@ -95,13 +98,17 @@
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
padding: 0;
color: $carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus() {
&:hover,
&:focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
@ -110,15 +117,11 @@
}
.carousel-control-prev {
left: 0;
@if $enable-gradients {
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
}
// Icons for within
@ -127,8 +130,19 @@
display: inline-block;
width: $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 {
background-image: escape-svg($carousel-control-prev-icon-bg);
}
@ -136,46 +150,48 @@
background-image: escape-svg($carousel-control-next-icon-bg);
}
// Optional indicator pips
// Optional indicator pips/controls
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
// like a button) with data-bs-target for each slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
z-index: 2;
display: flex;
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
margin-right: $carousel-control-width;
margin-bottom: 1rem;
margin-left: $carousel-control-width;
list-style: none;
li {
[data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
padding: 0;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $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);
}
.active {
opacity: 1;
opacity: $carousel-indicator-active-opacity;
}
}
@ -186,12 +202,28 @@
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
right: (100% - $carousel-caption-width) * .5;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
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;
}
}

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

@ -1,40 +1,40 @@
.close {
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
// transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
}
.btn-close {
box-sizing: content-box;
width: $btn-close-width;
height: $btn-close-height;
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;
// Future-proof disabling of clicks on `<a>` elements
// Override <a>'s hover style
&:hover {
color: $btn-close-color;
text-decoration: none;
opacity: $btn-close-hover-opacity;
}
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
&: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;
}
}
.btn-close-white {
filter: $btn-close-white-filter;
}

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);
}

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

@ -1,8 +1,8 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropend,
.dropdown,
.dropleft {
.dropstart {
position: relative;
}
@ -16,14 +16,11 @@
// The dropdown menu
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: $dropdown-min-width;
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);
color: $dropdown-color;
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;
@include border-radius($dropdown-border-radius);
@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) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left {
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-right {
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
// scss-docs-end responsive-breakpoints
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
.dropdown-menu {
.dropdown-menu[data-bs-popper] {
top: auto;
bottom: 100%;
margin-top: 0;
@ -66,8 +82,8 @@
}
}
.dropright {
.dropdown-menu {
.dropend {
.dropdown-menu[data-bs-popper] {
top: 0;
right: auto;
left: 100%;
@ -76,15 +92,15 @@
}
.dropdown-toggle {
@include caret(right);
@include caret(end);
&::after {
vertical-align: 0;
}
}
}
.dropleft {
.dropdown-menu {
.dropstart {
.dropdown-menu[data-bs-popper] {
top: 0;
right: 100%;
left: auto;
@ -93,28 +109,20 @@
}
.dropdown-toggle {
@include caret(left);
@include caret(start);
&::before {
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
.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
@ -145,9 +153,10 @@
}
}
@include hover-focus() {
&:hover,
&:focus {
color: $dropdown-link-hover-color;
text-decoration: none;
text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg($dropdown-link-hover-bg);
}
@ -164,9 +173,7 @@
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
background-image: if($enable-gradients, none, null);
}
}
@ -190,3 +197,44 @@
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
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
//
// Textual form controls
//
.form-control {
display: block;
width: 100%;
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;
}
}
}
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";

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`
// Used on our SVG icon backgrounds for custom forms.
//
@ -70,42 +93,80 @@
}
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
// See https://github.com/twbs/bootstrap/pull/30168
$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) {
@return $dark;
} @else {
@return $light;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$max-ratio: 0;
$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 color($key: "blue") {
@return map-get($colors, $key);
@function contrast-ratio($background, $foreground: $color-contrast-light) {
$l1: luminance($background);
$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 map-get($theme-colors, $key);
// Return WCAG2.0 relative luminance
// 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 map-get($grays, $key);
// Return opaque color
// 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
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// 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
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@ -120,6 +181,14 @@
@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);
}
@ -140,5 +209,55 @@
@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);
}
@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
//
// Rows contain your columns.
@ -48,22 +5,14 @@
@if $enable-grid-classes {
.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).
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
> * {
@include make-col-ready();
}
}
}
// 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 {
margin-bottom: $spacer / 2;
margin-bottom: $spacer * .5;
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);
}
.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
//
@ -24,7 +35,8 @@
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
@include hover-focus() {
&:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color;
text-decoration: none;
@ -98,13 +110,13 @@
> .list-group-item {
&:first-child {
@include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
@include border-bottom-start-radius($list-group-border-radius);
@include border-top-end-radius(0);
}
&:last-child {
@include border-top-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0);
@include border-top-end-radius($list-group-border-radius);
@include border-bottom-start-radius(0);
}
&.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.
// Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
@each $state, $value in $theme-colors {
$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
@import "mixins/deprecate";
// Utilities
// Helpers
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/badge";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/size";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
@import "mixins/visibility";
// Utilities
@import "mixins/utilities";
// Components
@import "mixins/alert";
@ -29,12 +27,10 @@
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/table-row";
@import "mixins/table-variants";
// Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@ -42,6 +38,5 @@
// Layout
@import "mixins/clearfix";
@import "mixins/grid-framework";
@import "mixins/container";
@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-open {
// Kill the scroll on the body
overflow: hidden;
.modal {
overflow-x: hidden;
overflow-y: auto;
}
}
// Container that the modal scrolls within
.modal {
position: fixed;
@ -23,7 +13,8 @@
display: none;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
@ -56,19 +47,13 @@
}
.modal-dialog-scrollable {
display: flex; // IE10/11
max-height: subtract(100%, $modal-dialog-margin * 2);
height: subtract(100%, $modal-dialog-margin * 2);
.modal-content {
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
max-height: 100%;
overflow: hidden;
}
.modal-header,
.modal-footer {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
@ -78,29 +63,6 @@
display: flex;
align-items: center;
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
@ -140,16 +102,16 @@
// Top section of the modal w/ title and dismiss
.modal-header {
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
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius);
.close {
padding: $modal-header-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
.btn-close {
padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
}
}
@ -173,9 +135,10 @@
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; // vertically center
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;
@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,
// 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
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
@ -205,20 +159,11 @@
}
.modal-dialog-scrollable {
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
.modal-content {
max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
}
.modal-dialog-centered {
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 {
@ -238,3 +183,37 @@
@include media-breakpoint-up(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 {
display: block;
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);
@include transition($nav-link-transition);
@include hover-focus() {
text-decoration: none;
&:hover,
&:focus {
color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
// Disabled state lightens text
@ -37,11 +43,15 @@
.nav-link {
margin-bottom: -$nav-tabs-border-width;
background: none;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus() {
&:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
}
&.disabled {
@ -73,13 +83,15 @@
.nav-pills {
.nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.show > .nav-link {
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
//

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

@ -4,7 +4,6 @@
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes
@ -21,19 +20,24 @@
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
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
// few properties so that content nested within behave properly.
// The `flex-wrap` property is inherited to simplify the expanded navbars
%container-flex-properties {
display: flex;
flex-wrap: wrap;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.container,
.container-fluid {
> .container,
> .container-fluid {
@extend %container-flex-properties;
}
@ -50,16 +54,16 @@
// Used for brand, project, or site names.
.navbar-brand {
display: inline-block;
padding-top: $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);
line-height: inherit;
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
@include hover-focus() {
text-decoration: none;
&:hover,
&:focus {
text-decoration: if($link-hover-decoration == underline, none, null);
}
}
@ -82,7 +86,6 @@
.dropdown-menu {
position: static;
float: none;
}
}
@ -92,7 +95,6 @@
//
.navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
}
@ -122,10 +124,17 @@
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
@include transition($navbar-toggler-transition);
@include hover-focus() {
&:hover {
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
@ -135,15 +144,17 @@
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: 50% / 100% 100% no-repeat;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar-nav-scroll {
max-height: $navbar-nav-scroll-max-height;
max-height: var(--#{$variable-prefix}scroll-height, 75vh);
overflow-y: auto;
}
// scss-docs-start navbar-expand-loop
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@ -151,27 +162,10 @@
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$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) {
flex-flow: row nowrap;
flex-wrap: nowrap;
justify-content: flex-start;
.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 {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
}
@ -221,6 +197,7 @@
}
}
}
// scss-docs-end navbar-expand-loop
// Navbar themes
@ -232,7 +209,8 @@
.navbar-brand {
color: $navbar-light-brand-color;
@include hover-focus() {
&:hover,
&:focus {
color: $navbar-light-brand-hover-color;
}
}
@ -241,7 +219,8 @@
.nav-link {
color: $navbar-light-color;
@include hover-focus() {
&:hover,
&:focus {
color: $navbar-light-hover-color;
}
@ -251,8 +230,6 @@
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-light-active-color;
}
@ -269,14 +246,13 @@
.navbar-text {
color: $navbar-light-color;
a {
color: $navbar-light-active-color;
@include hover-focus() {
a,
a:hover,
a:focus {
color: $navbar-light-active-color;
}
}
}
}
// White links against a dark background
@ -284,7 +260,8 @@
.navbar-brand {
color: $navbar-dark-brand-color;
@include hover-focus() {
&:hover,
&:focus {
color: $navbar-dark-brand-hover-color;
}
}
@ -293,7 +270,8 @@
.nav-link {
color: $navbar-dark-color;
@include hover-focus() {
&:hover,
&:focus {
color: $navbar-dark-hover-color;
}
@ -303,8 +281,6 @@
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
@ -321,12 +297,10 @@
.navbar-text {
color: $navbar-dark-color;
a {
a,
a:hover,
a:focus {
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 {
display: flex;
@include list-unstyled();
@include border-radius();
}
.page-link {
position: relative;
display: block;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -$pagination-border-width;
line-height: $pagination-line-height;
color: $pagination-color;
text-decoration: if($link-decoration == none, null, none);
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
@include transition($pagination-transition);
&:hover {
z-index: 2;
color: $pagination-hover-color;
text-decoration: none;
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
}
&:focus {
z-index: 3;
color: $pagination-focus-color;
background-color: $pagination-focus-bg;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
}
.page-item {
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
&:not(:first-child) .page-link {
margin-left: $pagination-margin-start;
}
&.active .page-link {
z-index: 3;
color: $pagination-active-color;
background-color: $pagination-active-bg;
@include gradient-bg($pagination-active-bg);
border-color: $pagination-active-border-color;
}
&.disabled .page-link {
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
}
@ -64,11 +53,12 @@
//
// Sizing
//
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
.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 {
@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 {
position: absolute;
top: 0;
left: 0;
left: 0 #{"/* rtl:ignore */"};
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
@ -17,12 +17,11 @@
@include border-radius($popover-border-radius);
@include box-shadow($popover-box-shadow);
.arrow {
.popover-arrow {
position: absolute;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
margin: 0 $popover-border-radius;
&::before,
&::after {
@ -36,63 +35,56 @@
}
.bs-popover-top {
margin-bottom: $popover-arrow-height;
> .arrow {
> .popover-arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
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;
}
&::after {
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;
}
}
}
.bs-popover-right {
margin-left: $popover-arrow-height;
> .arrow {
.bs-popover-end {
> .popover-arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
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;
}
&::after {
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;
}
}
}
.bs-popover-bottom {
margin-top: $popover-arrow-height;
> .arrow {
> .popover-arrow {
top: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
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;
}
&::after {
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;
}
}
@ -104,51 +96,47 @@
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
.bs-popover-left {
margin-right: $popover-arrow-height;
> .arrow {
.bs-popover-start {
> .popover-arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
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;
}
&::after {
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;
}
}
}
.bs-popover-auto {
&[x-placement^="top"] {
&[data-popper-placement^="top"] {
@extend .bs-popover-top;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
&[data-popper-placement^="right"] {
@extend .bs-popover-end;
}
&[x-placement^="bottom"] {
&[data-popper-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
&[data-popper-placement^="left"] {
@extend .bs-popover-start;
}
}
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
@ -156,7 +144,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
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);
&: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
// scss-docs-start progress-keyframes
@if $enable-transitions {
@keyframes progress-bar-stripes {
from { background-position: $progress-height 0; }
to { background-position: 0 0; }
0% { background-position-x: $progress-height; }
}
}
// scss-docs-end progress-keyframes
.progress {
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
line-height: 0;
@include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@ -38,7 +39,7 @@
.progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes;
@if $enable-prefers-reduced-motion-media-query {
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
animation: none;
}

493
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
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
@ -10,38 +11,37 @@
// Document
//
// 1. 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.
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box; // 1
box-sizing: border-box;
}
html {
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
-webkit-tap-highlight-color: rgba($black, 0); // 5
// Root
//
// Ability to the value of the root font sizes, affecting the value of `rem`.
// 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
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use
// the `inherit` value on things like `<th>` elements.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
body {
margin: 0; // 1
@ -50,82 +50,120 @@ body {
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left; // 3
text-align: $body-text-align;
background-color: $body-bg; // 2
}
// 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;
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
// 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
margin: $hr-margin-y 0;
color: $hr-color; // 1
background-color: currentColor;
border: 0;
opacity: $hr-opacity;
}
hr:not([size]) {
height: $hr-height; // 2
}
//
// Typography
//
// Remove top margins from headings
//
// 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.
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
%heading {
margin-top: 0; // 1
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
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
// Abbreviations
//
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Remove the bottom border in Firefox 39-.
// 5. Prevent the text-decoration to be skipped.
// 4. Prevent the text-decoration to be skipped.
abbr[title],
abbr[data-original-title] { // 1
text-decoration: underline; // 2
abbr[data-bs-original-title] { // 1
text-decoration: underline dotted; // 2
cursor: help; // 3
border-bottom: 0; // 4
text-decoration-skip-ink: none; // 5
text-decoration-skip-ink: none; // 4
}
// Address
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
// Lists
ol,
ul {
padding-left: 2rem;
}
ol,
ul,
dl {
@ -144,33 +182,57 @@ dt {
font-weight: $dt-font-weight;
}
// 1. Undo browser default
dd {
margin-bottom: .5rem;
margin-left: 0; // Undo browser default
margin-left: 0; // 1
}
// Blockquote
blockquote {
margin: 0 0 1rem;
}
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
b,
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 {
@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
// all browsers.
//
sub,
sup {
position: relative;
@include font-size(75%);
@include font-size($sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
@ -179,16 +241,13 @@ sub { bottom: -.25em; }
sup { top: -.5em; }
//
// Links
//
a {
color: $link-color;
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
@include hover() {
&:hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
@ -200,82 +259,103 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) {
color: inherit;
text-decoration: none;
@include hover() {
&,
&:hover {
color: inherit;
text-decoration: none;
}
}
//
// Code
//
pre,
code,
kbd,
samp {
font-family: $font-family-monospace;
font-family: $font-family-code;
@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 {
// Remove browser default top margin
margin-top: 0;
// Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem;
// Don't allow content to break outside
overflow: auto;
// Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
// making it impossible to interact with the content
-ms-overflow-style: scrollbar;
display: block;
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
@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;
}
}
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
//
// Apply a consistent margin strategy (matches our type styles).
figure {
// Apply a consistent margin strategy (matches our type styles).
margin: 0 0 1rem;
}
//
// Images and content
//
img {
vertical-align: middle;
border-style: none; // Remove the border on images inside links in IE 10-.
}
img,
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;
}
//
// Tables
//
// Prevent double borders
table {
border-collapse: collapse; // Prevent double borders
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y;
color: $table-caption-color;
text-align: left;
caption-side: bottom;
}
// 1. Removes font-weight bold by inheriting
@ -288,20 +368,29 @@ th {
text-align: -webkit-match-parent; // 3
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
//
// Forms
//
// 1. Allow labels to use `margin` for spacing.
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: $label-margin-bottom;
display: inline-block; // 1
}
// Remove the default `border-radius` that macOS Chrome adds.
//
// Details at https://github.com/twbs/bootstrap/issues/24093
// See https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0;
@ -316,27 +405,24 @@ button:focus:not(:focus-visible) {
outline: 0;
}
// 1. Remove the margin in Firefox and Safari
input,
button,
select,
optgroup,
textarea {
margin: 0; // Remove the margin in Firefox and Safari
margin: 0; // 1
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
}
button,
input {
overflow: visible; // Show the overflow in Edge
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none; // Remove the inheritance of text transform in Firefox
text-transform: none;
}
// Set the cursor for non-`<button>` buttons
//
// Details at https://github.com/twbs/bootstrap/pull/30562
@ -344,141 +430,192 @@ select {
cursor: pointer;
}
// Remove the inheritance of word-wrap in Safari.
//
// Details at https://github.com/twbs/bootstrap/issues/24990
select {
// Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990
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`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
button,
[type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
}
// Opinionated: add "hand" cursor to non-disabled button elements.
@if $enable-pointer-cursor-for-buttons {
button,
[type="button"],
[type="reset"],
[type="submit"] {
@if $enable-button-pointers {
&:not(:disabled) {
cursor: pointer;
cursor: pointer; // 3
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
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-
}
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
overflow: auto; // Remove the default vertical scrollbar in IE.
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;
resize: vertical; // 1
}
// 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 {
// 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
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
min-width: 0; // 1
padding: 0; // 2
margin: 0; // 2
border: 0; // 2
}
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 1. By using `float: left`, the legend will behave like a block element.
// 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 {
display: block;
float: left; // 1
width: 100%;
max-width: 100%; // 1
padding: 0;
margin-bottom: .5rem;
@include font-size(1.5rem);
margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size);
font-weight: $legend-font-weight;
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
+ * {
clear: left; // 2
}
}
progress {
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
// Fix height of inputs with a type of datetime-local, date, month, week, or time
// 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.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
::-webkit-inner-spin-button {
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"] {
// 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.
outline-offset: -2px; // 2. Correct the outline style in Safari.
-webkit-appearance: none;
outline-offset: -2px; // 1
-webkit-appearance: textfield; // 2
}
//
// 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.
//
[type="search"]::-webkit-search-decoration {
::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
// Remove padding around color pickers in webkit browsers
::-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 {
font: inherit; // 2
-webkit-appearance: button; // 1
font: inherit; // 1
-webkit-appearance: button; // 2
}
//
// Correct element displays
//
output {
display: inline-block;
}
// Remove border from iframe
iframe {
border: 0;
}
// Summary
//
// 1. Add the correct display in all browsers
summary {
display: list-item; // Add the correct display in all browsers
display: list-item; // 1
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] {
display: none !important;
}

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

@ -1,19 +1,16 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
--#{$color}: #{$value};
--#{$variable-prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
@each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
--#{$variable-prefix}#{$color}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$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
//
// scss-docs-start spinner-border-keyframes
@keyframes spinner-border {
to { transform: rotate(360deg); }
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
// scss-docs-end spinner-border-keyframes
.spinner-border {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
vertical-align: $spinner-vertical-align;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
animation: .75s linear infinite spinner-border;
animation: $spinner-animation-speed linear infinite spinner-border;
}
.spinner-border-sm {
@ -28,6 +30,7 @@
// Growing circle
//
// scss-docs-start spinner-grow-keyframes
@keyframes spinner-grow {
0% {
transform: scale(0);
@ -37,17 +40,18 @@
transform: none;
}
}
// scss-docs-end spinner-grow-keyframes
.spinner-grow {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
vertical-align: $spinner-vertical-align;
background-color: currentColor;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;
animation: .75s linear infinite spinner-grow;
animation: $spinner-animation-speed linear infinite spinner-grow;
}
.spinner-grow-sm {
@ -55,11 +59,11 @@
height: $spinner-height-sm;
}
@if $enable-prefers-reduced-motion-media-query {
@if $enable-reduced-motion {
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
animation-duration: 1.5s;
animation-duration: $spinner-animation-speed * 2;
}
}
}

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

@ -3,37 +3,65 @@
//
.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%;
margin-bottom: $spacer;
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,
td {
padding: $table-cell-padding;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
// Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
// 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;
border-bottom: (2 * $table-border-width) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
// Highlight border color between thead, tbody and tfoot.
> :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
//
.table-sm {
th,
td {
padding: $table-cell-padding-sm;
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
@ -41,29 +69,27 @@
// Border versions
//
// 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 {
border: $table-border-width solid $table-border-color;
> :not(caption) > * {
border-width: $table-border-width 0;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: 2 * $table-border-width;
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
}
}
}
.table-borderless {
th,
td,
thead th,
tbody + tbody {
border: 0;
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
border-bottom-width: 0;
}
}
@ -72,114 +98,54 @@
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg;
> tbody > tr:nth-of-type(#{$table-striped-order}) {
--#{$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
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover() {
color: $table-hover-color;
background-color: $table-hover-bg;
}
> tbody > tr:hover {
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
color: var(--#{$variable-prefix}table-hover-color);
}
}
// Table backgrounds
// Table variants
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
@each $color, $value in $table-variants {
@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
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;
.table-responsive#{$infix} {
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 {
// Prevents from shrinking in IE11, when in a flex container
// See https://github.com/twbs/bootstrap/issues/28341
flex-basis: $toast-max-width;
max-width: $toast-max-width;
width: $toast-max-width;
max-width: 100%;
@include font-size($toast-font-size);
color: $toast-color;
pointer-events: auto;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
opacity: 0;
@include border-radius($toast-border-radius);
&:not(:last-child) {
margin-bottom: $toast-padding-x;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
&:not(.showing):not(.show) {
opacity: 0;
}
&.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 {
display: flex;
align-items: center;
@ -39,8 +38,14 @@
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
@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 {
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; }
.arrow {
.tooltip-arrow {
position: absolute;
display: block;
width: $tooltip-arrow-width;
@ -32,28 +32,28 @@
.bs-tooltip-top {
padding: $tooltip-arrow-height 0;
.arrow {
.tooltip-arrow {
bottom: 0;
&::before {
top: 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-top-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-right {
.bs-tooltip-end {
padding: 0 $tooltip-arrow-height;
.arrow {
.tooltip-arrow {
left: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
right: -1px;
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-right-color: $tooltip-arrow-color;
}
}
@ -62,45 +62,45 @@
.bs-tooltip-bottom {
padding: $tooltip-arrow-height 0;
.arrow {
.tooltip-arrow {
top: 0;
&::before {
bottom: 0;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
bottom: -1px;
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-left {
.bs-tooltip-start {
padding: 0 $tooltip-arrow-height;
.arrow {
.tooltip-arrow {
right: 0;
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
left: -1px;
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-auto {
&[x-placement^="top"] {
&[data-popper-placement^="top"] {
@extend .bs-tooltip-top;
}
&[x-placement^="right"] {
@extend .bs-tooltip-right;
&[data-popper-placement^="right"] {
@extend .bs-tooltip-end;
}
&[x-placement^="bottom"] {
&[data-popper-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[x-placement^="left"] {
@extend .bs-tooltip-left;
&[data-popper-placement^="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 {
&:not(.show) {
display: none;
@ -13,8 +14,8 @@
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
// scss-docs-end collapse-classes

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

@ -1,24 +1,30 @@
// stylelint-disable selector-list-comma-newline-after
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.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 {
@include font-size($lead-font-size);
@ -26,57 +32,25 @@ h6, .h6 { @include font-size($h6-font-size); }
}
// Type display classes
.display-1 {
@include font-size($display1-size);
font-weight: $display1-weight;
@each $display, $font-size in $display-font-sizes {
.display-#{$display} {
@include font-size($font-size);
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
//
small,
.small {
@include font-size($small-font-size);
font-weight: $font-weight-normal;
@extend small;
}
mark,
.mark {
padding: $mark-padding;
background-color: $mark-bg;
@extend mark;
}
//
// Lists
//
@ -104,20 +78,25 @@ mark,
// Builds on `abbr`
.initialism {
@include font-size(90%);
@include font-size($initialism-font-size);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $spacer;
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size);
> :last-child {
margin-bottom: 0;
}
}
.blockquote-footer {
display: block;
@include font-size($blockquote-small-font-size);
color: $blockquote-small-color;
margin-top: -$blockquote-margin-y;
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
&::before {
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";
@import "utilities/background";
@import "utilities/borders";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/embed";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/interactions";
@import "utilities/overflow";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/shadows";
@import "utilities/sizing";
@import "utilities/spacing";
@import "utilities/stretched-link";
@import "utilities/text";
@import "utilities/visibility";
// stylelint-disable indentation
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
(
// scss-docs-start utils-vertical-align
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
"float": (
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
);

1128
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 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
$include-column-box-sizing: true !default;
@import "functions";
@import "variables";
@import "mixins/deprecate";
@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
@import "vendor/rfs";
@import "containers";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";
@import "utilities";
// 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 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@ -8,5 +8,8 @@
@import "functions";
@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 "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 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@ -20,18 +25,15 @@
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@ -40,5 +42,11 @@
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";
@import "offcanvas";
// 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) {
color: $color;
@include gradient-bg($background);
border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.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;
}
// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: valid-radius($radius);
@ -23,54 +24,55 @@
}
}
@mixin border-top-radius($radius) {
@mixin border-top-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-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 {
border-top-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 {
border-bottom-right-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 {
border-top-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 {
border-top-left-radius: valid-radius($radius);
}
}
@mixin border-top-right-radius($radius) {
@mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-right-radius($radius) {
@mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-left-radius($radius) {
@mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded {
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 {
$result: ();
@if (length($shadow) == 1) {
// We can pass `@include box-shadow(none);`
$result: $shadow;
} @else {
// Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
@for $i from 1 through length($shadow) {
@if nth($shadow, $i) != "none" {
$result: append($result, nth($shadow, $i), "comma");
}
@each $value in $shadow {
@if $value != null {
$result: append($result, $value, "comma");
}
@if $value == none and length($shadow) > 1 {
@warn "The keyword 'none' must be used as a single argument.";
}
}
@if (length($result) > 0) {
box-shadow: $result;
}

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

@ -16,7 +16,10 @@
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$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.
@ -28,18 +31,18 @@
@return if($min != 0, $min, null);
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// Maximum breakpoint width.
// The maximum value is reduced by 0.02px to work around the limitations of
// `min-` and `max-` prefixes and viewports with fractional widths.
// 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.
// 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
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - .02, null);
$max: map-get($breakpoints, $name);
@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.
@ -105,7 +108,8 @@
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-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 {
@media (min-width: $min) and (max-width: $max) {
@ -116,7 +120,7 @@
@content;
}
} @else if $min == null {
@include media-breakpoint-down($name, $breakpoints) {
@include media-breakpoint-down($next, $breakpoints) {
@content;
}
}

121
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,
// 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%)) {
color: color-yiq($background);
// scss-docs-start btn-variant-mixin
@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);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover() {
color: color-yiq($hover-background);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
&:focus,
&.focus {
color: color-yiq($hover-background);
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@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 {
// 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
&.disabled,
&:disabled {
color: color-yiq($background);
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,
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: color-yiq($active-background);
color: $active-color;
background-color: $active-background;
@if $enable-gradients {
background-image: none; // Remove the gradient for the pressed/active state
}
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows and $btn-active-box-shadow != none {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// 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,
&.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
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
// 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;
border-color: $color;
@include hover() {
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
&:focus,
&.focus {
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
&.disabled,
&:disabled {
color: $color;
background-color: transparent;
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
color: color-yiq($active-background);
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&: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));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
@ -98,13 +114,20 @@
}
}
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
&:disabled,
&.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;
@include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default
@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-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up() {
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-right() {
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left() {
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@ -36,12 +37,12 @@
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == right {
@include caret-right();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == left {
@if $direction == start {
&::after {
display: none;
}
@ -51,7 +52,7 @@
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
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() {
&::after {
display: block;
@ -5,3 +6,4 @@
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");
}

131
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
// 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) {
@if ($state == "valid" or $state == "invalid") {
.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 {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
@ -61,16 +42,9 @@
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: color-yiq($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
color: $tooltip-color;
background-color: $tooltip-bg-color;
@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) {
@ -94,7 +68,7 @@
&:focus {
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) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $custom-select-feedback-icon-padding-right;
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
&:not([multiple]):not([size]),
&: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 {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.custom-control-input {
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
~ .custom-control-label {
color: $color;
&::before {
border-color: $color;
@if $state == "valid" {
z-index: 1;
} @else if $state == "invalid" {
z-index: 2;
}
}
&:checked {
~ .custom-control-label::before {
border-color: lighten($color, 10%);
@include gradient-bg(lighten($color, 10%));
}
}
&:focus {
~ .custom-control-label::before {
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);
}
z-index: 3;
}
}
}
}
// scss-docs-end form-validation-mixins

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

@ -1,45 +1,47 @@
// Gradients
@mixin gradient-bg($color) {
@if $enable-gradients {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
} @else {
// scss-docs-start gradient-bg-mixin
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin
// scss-docs-start gradient-mixins
// Horizontal gradient, from left to right
//
// 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%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
}
// Vertical gradient, from top to bottom
//
// 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-repeat: repeat-x;
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
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) {
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) {
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) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@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);
}
// 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.
@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) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-right: -$gutter / 2;
margin-left: -$gutter / 2;
}
// 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");
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
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
}
@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
// 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.
flex-shrink: 0;
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
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) {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
width: percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
max-width: 100%;
}
}
@mixin make-col-auto() {
flex: 0 0 auto;
width: auto;
max-width: 100%; // Reset earlier grid tiers
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
$num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@ -63,7 +54,79 @@
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
flex: 0 0 auto;
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