CyCAT
/
cycat-project-website
mirror of https://github.com/CyCat-project/cycat-project-website
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refresh theme

pull/1/head
Robert Austin 2020-08-23 20:01:06 +10:00
parent 078c9913a8
commit 570b0b4f5c
213 changed files with 3350 additions and 2546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored
View File

@ -1,4 +1,4 @@
# Test files
# NPM
node_modules
npm-debug.log
@ -8,21 +8,15 @@ _site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
alembic-jekyll-theme-*.gem
Gemfile.lock
**/Gemfile.lock
# Temporary files
tmp
# Folder view configuration files
.DS_Store
Desktop.ini
# Thumbnail cache files
._*
Thumbs.db
# Files that might appear on external disks
.Spotlight-V100
.Trashes
.idea

14
_config.yml
View File

@ -10,9 +10,6 @@ collections:
team:
output: true
permalink: /team/:path/
testimonials:
output: true
permalink: /testimonials/:path/
defaults:
- scope:
@ -32,3 +29,14 @@ google_analytics_id: null
plugins:
- jekyll-environment-variables
homepage:
show_call_box: true
logo:
mobile: "images/logo-mobile.svg"
desktop: "images/logo.svg"
desktop_height: "36px"
footer:
copyright_text: 'Free Jekyll theme by <a class="zerostatic" href="https://www.zerostatic.io">www.zerostatic.io</a>'

7
_data/contact.yml
View File

@ -1,4 +1,3 @@
email: 'zerostaticthemes@gmail.com'
phone: 'XXXX XXX XXX'
businessName: 'Hugo Serif'
address: ''
email: 'jekyllserif@example.com'
phone: '1800 123 000'
contact_button_link: 'contact'

21
_data/menus.yml Normal file
View File

@ -0,0 +1,21 @@
main:
- name: "Home"
url: "/"
weight: 1
- name: "Services"
url: "/services"
weight: 2
- name: "Team"
url: "/team"
weight: 3
- name: "Contact"
url: "/contact"
weight: 4
footer:
- name: "Home"
url: "/"
weight: 1
- name: "Contact"
url: "/contact"
weight: 2

12
_data/social.json Normal file
View File

@ -0,0 +1,12 @@
[
{
"name": "Github",
"link": "https://github.com/JugglerX/jekyll-serif-theme",
"image": "images/github.svg"
},
{
"name": "Twitter",
"link": "https://twitter.com/zerostaticio",
"image": "images/twitter.svg"
}
]

5
_data/social.yaml
View File

@ -1,5 +0,0 @@
vimeo: ""
twitter: "https://twitter.com/figuritltd"
instagram: ""
linkedin: "https://www.linkedin.com/in/linda-chesher-81a35618/"
facebook: ""

19
_includes/call.html Normal file
View File

@ -0,0 +1,19 @@
<div class="call">
<div class="call-box-top">
{% if site.data.contact.phone %}
<div class="call-phone"><strong>Phone: </strong> {{ site.data.contact.phone }} </div>
{% endif %}
{% if site.data.contact.email %}
<div class="call-email"><strong>Email: </strong>
<a href="mailto:{{ .site.Data.contact.email }}">
{{ site.data.contact.email }}
</a>
</div>
{% endif %}
</div>
{% if include.show_button %}
<div class="call-box-bottom">
<a href="{{ site.data.contact.contact_button_link }}" class="button">Contact</a>
</div>
{% endif %}
</div>

15
_includes/footer.html
View File

@ -1,13 +1,16 @@
<div class="footer-strip">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12">
<div class="footer">
<div class="footer-inner">
<h3 class="footer-title">{{site.title}}</h3>
<ul class="footer-menu">
<li><a href="{{site.baseurl}}/">Home</a></li>
<li><a href="{{site.baseurl}}/contact">Contact</a></li>
<li class="copyright">© {{site.title}} {{site.time | date:'%Y'}}</li>
<ul>
{% assign footermenu = site.data.menus.footer | sort: 'weight' %}
{% for item in footermenu %}
<li class="{% if item.url == page.url %}active{% endif %}">
<a href="{{ item.url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>

6
_includes/header.html
View File

@ -1,10 +1,10 @@
<div class='header {{include.headerClass}}'>
<div class='header'>
<div class="container">
<div class="logo">
<a href="{{site.baseurl}}/"><img alt="Figurit Homepage" src="{{site.baseurl}}/assets/images/logo.svg" /></a>
<a href="{{site.baseurl}}/"><img height="{{ site.logo.desktop_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
</div>
<div class="logo-mobile">
<a href="{{site.baseurl}}/"><img alt="Figurit Homepage" src="{{site.baseurl}}/assets/images/logo-mobile.svg" /></a>
<a href="{{site.baseurl}}/"><img alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
</div>
{% include main-menu.html %}
{% include hamburger.html %}

11
_includes/main-menu-mobile.html
View File

@ -1,9 +1,10 @@
<div id="main-menu-mobile" class="main-menu-mobile">
{% assign mainmenu = site.data.menus.main | sort: 'weight' %}
<ul>
<li><a href="{{site.baseurl}}/" class="{% if page.url == '/' %}current{% endif %}">Home</a></li>
<li><a href="{{site.baseurl}}/services/" class="{% if page.url contains 'services' %}current{% endif %}">Services</a></li>
<li><a href="{{site.baseurl}}/team/" class="{% if page.url contains 'team' %}current{% endif %}">Team</a></li>
<li><a href="{{site.baseurl}}/testimonials/" class="{% if page.url contains 'testimonials' %}current{% endif %}">Testimonials</a></li>
<li><a href="{{site.baseurl}}/contact/" class="{% if page.url contains 'contact' %}current{% endif %}">Contact</a></li>
{% for item in mainmenu %}
<li class="{% if item.url == page.url %}active{% endif %}">
<a href="{{ item.url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
</div>

13
_includes/main-menu.html
View File

@ -1,9 +1,10 @@
<div id="main-menu" class="main-menu">
{% assign mainmenu = site.data.menus.main | sort: 'weight' %}
<ul>
<li><a href="{{site.baseurl}}/" class="{% if page.url == '/' %}current{% endif %}">Home</a></li>
<li><a href="{{site.baseurl}}/services/" class="{% if page.url contains 'services' %}current{% endif %}">Services</a></li>
<li><a href="{{site.baseurl}}/team/" class="{% if page.url contains 'team' %}current{% endif %}">Team</a></li>
<li><a href="{{site.baseurl}}/testimonials/" class="{% if page.url contains 'testimonials' %}current{% endif %}">Testimonials</a></li>
<li><a href="{{site.baseurl}}/contact/" class="{% if page.url contains 'contact' %}current{% endif %}">Contact</a></li>
{% for item in mainmenu %}
<li class="{% if item.url == page.url %}active{% endif %}">
<a href="{{ item.url }}">{{ item.name }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>

24
_includes/social.html
View File

@ -1,19 +1,5 @@
<ul id="social" class="social">
<li>
<a class="social-vimeo" href="{{ site.data.social.vimeo }}" target="blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Facebook icon</title>
<path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" />
</svg>
</a>
</li>
<li>
<a class="social-twitter" href="{{ site.data.social.twitter }}" target="blank"></a>
</li>
<li>
<a class="social-instagram" href="{{ site.data.social.instagram }}" target="blank"></a>
</li>
<li>
<a class="social-linkedin" href="{{ site.data.social.linkedin }}" target="blank"></a>
</li>
</ul>
<div class="social">
{% for item in site.data.social %}
<a href="{{ item.link }}" target="blank"><img src="{{ item.image | relative_url }}" title="{{ item.name }}" alt="{{ item.name }}" /></a>
{% endfor %}
</div>

18
_includes/sub-footer.html
View File

@ -1,16 +1,14 @@
<div class="sub-footer-strip">
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-12">
<div class="sub-footer">
<ul>
<li><strong>Phone: </strong>{{ site.data.contact.phone }}</li>
<li><strong>Email: </strong><a href="mailto:{{ site.data.contact.email }}">
{{ site.data.contact.email }}</a></li>
</ul>
<ul>
<li><a href="https://www.zerostatic.io">www.zerostatic.io</a></li>
</ul>
<div class="sub-footer-inner">
{% if site.data.social %}
{% include social.html %}
{% endif %}
{% if site.footer.copyright_text %}
<div class="copyright">{{ site.footer.copyright_text }}</div>
{% endif %}
</div>
</div>
</div>

17
_layouts/contact.html Normal file
View File

@ -0,0 +1,17 @@
---
title: Contact
layout: default
bodyClass: page-contact
---
<div class="container pb-6 pt-6 pt-md-10 pb-md-10">
<div class="row justify-content-start">
<div class="col-12 col-md-8">
<div class="service service-single">
<h1 class="title">{{page.title}}</h1>
{% include call.html show_button=false %}
<div class="content mt-4">{{content}}</div>
</div>
</div>
</div>
</div>

69
_layouts/home.html Executable file
View File

@ -0,0 +1,69 @@
---
title: Jekyll Serif - Jekyll Small Business Theme
layout: default
bodyClass: page-home
---
<div class="intro">
<div class="container">
<div class="row justify-content-start">
<div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
{{ content }}
{% if site.homepage.show_call_box %}
{% include call.html show_button=true %}
{% endif %}
</div>
{% if page.intro_image %}
<div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
<img alt={{ page.title }} class="intro-image{% if page.intro_image_absolute %} intro-image-absolute{% endif %}{% if page.intro_image_hide_on_mobile %} intro-image-hide-mobile{% endif %}" src="{{ page.intro_image | relURL }}" />
</div>
{% endif %}
</div>
</div>
</div>
<div class="strip">
<div class="container pt-6 pb-6 pb-md-10">
<div class="row justify-content-start">
{% for service in site.services %}
<div class="col-12 col-md-4 mb-1">
<div class="service service-summary">
<div class="service-content">
<h2 class="service-title">
<a href="{{site.baseurl}}{{ service.url }}">{{ service.title }}</a>
</h2>
<p>{{ service.content | markdownify | strip_html | truncate: 100 }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row justify-content-center">
<div class="col-auto">
<a class="button button-primary" href="{{site.baseurl}}/services">View All Services</a>
</div>
</div>
</div>
</div>
{% if site.data.features %}
<div class="strip strip-grey">
<div class="container pt-6 pb-6 pt-md-10 pb-md-10">
<div class="row justify-content-center">
{% for feature in site.data.features %}
<div class="col-12 col-md-6 col-lg-4 mb-2">
<div class="feature">
{% if feature.image %}
<div class="feature-image"><img alt="{{ feature.title }} logo" src="{{ feature.image | relative_url }}" /></div>
{% endif %}
<h2 class="feature-title">{{ feature.title }}</h2>
<div class="feature-content">{{ feature.description }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}

14
_layouts/service.html
View File

@ -2,14 +2,12 @@
layout: default
---
<div class="strip strip-white strip-diagonal">
<div class="container pt-4 pt-md-10">
<div class="row justify-content-start">
<div class="col-12 col-md-8">
<div class="service service-single">
<h1 class="title">{{page.title}}</h1>
<div class="content">{{page.content}}</div>
</div>
<div class="container pb-6 pt-6 pt-md-10 pb-md-10">
<div class="row justify-content-start">
<div class="col-12 col-md-8">
<div class="service service-single">
<h1 class="title">{{page.title}}</h1>
<div class="content">{{page.content}}</div>
</div>
</div>
</div>

36
_layouts/services.html Normal file
View File

@ -0,0 +1,36 @@
---
layout: default
bodyClass: page-services-list
---
<div class="intro">
<div class="container">
<div class="row justify-content-start">
<div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
{{ content }}
</div>
{% if page.intro_image %}
<div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
<img alt={{ page.title }} class="intro-image{% if page.intro_image_absolute %} intro-image-absolute{% endif %}{% if page.intro_image_hide_on_mobile %} intro-image-hide-mobile{% endif %}" src="{{ page.intro_image | relative_url }}" />
</div>
{% endif %}
</div>
</div>
</div>
<div class="container pt-6 pb-6">
<div class="row">
{% for service in site.services %}
<div class="col-12 col-md-6 mb-3">
<div class="service service-summary">
<div class="service-content">
<h2 class="service-title">
<a href="{{site.baseurl}}{{ service.url }}">{{ service.title }}</a>
</h2>
<p>{{ service.content | markdownify | strip_html | truncate: 100 }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

62
_layouts/teams.html Normal file
View File

@ -0,0 +1,62 @@
---
layout: default
bodyClass: page-team-list
---
<div class="intro">
<div class="container">
<div class="row justify-content-start">
<div class="col-12 col-md-7 col-lg-6 order-2 order-md-1">
{{ content }}
</div>
{% if page.intro_image %}
<div class="col-12 col-md-5 col-lg-6 order-1 order-md-2 position-relative">
<img alt={{ page.title }} class="intro-image{% if page.intro_image_absolute %} intro-image-absolute{% endif %}{% if page.intro_image_hide_on_mobile %} intro-image-hide-mobile{% endif %}" src="{{ page.intro_image | relative_url }}" />
</div>
{% endif %}
</div>
</div>
</div>
<div class="container pt-6 pb-6">
<div class="row">
{% assign promoted_teams = site.team | where: "promoted", true | sort: "weight" %}
{% for team in promoted_teams %}
<div class="col-12 col-md-6 mb-2">
<div class="team team-summary team-summary-large">
{% if team.image %}
<div class="team-image">
<img alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
</div>
{% endif %}
<div class="team-meta">
<h2 class="team-name">{{ team.title }}</h2>
<p class="team-description">{{ team.jobtitle }}</p>
{% if team.linkedinurl %}
<a target="_blank" href="{{ team.linkedinurl }}">LinkedIn</a>
{% endif %}
</div>
<div class="team-content">{{ team.content | truncate: 120 }}</div>
</div>
</div>
{% endfor %}
</div>
<div class="row pt-6 pb-6">
{% assign teams = site.team | where_exp: "promoted", "promoted != false" | sort: "weight" %}
{% for team in teams %}
<div class="col-12 col-md-4 mb-3">
<div class="team team-summary">
{% if team.image %}
<div class="team-image">
<img alt="{{ team.title }}" class="img-fluid mb-2" src="{{ team.image | relative_url }}" />
</div>
{% endif %}
<div class="team-meta">
<h2 class="team-name">{{ team.title }}</h2>
<p class="team-description">{{ team.jobtitle }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

64
_sass/_bootstrap-variables.scss
View File

@ -1,45 +1,19 @@
// Grid breakpoints
// $grid-breakpoints: (
// xs: 0,
// sm: 576px,
// md: 768px,
// lg: 992px,
// xl: 1200px
// );
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1300px,
);
// $container-max-widths: (
// sm: 768px,
// md: 992px,
// lg: 1000px,
// xl: 1220px
// );
$container-max-widths: (
sm: 566px,
md: 740px,
lg: 960px,
xl: 1140px,
);
$grid-gutter-width: 20px;
$white: #ffffff;
$black: #000000;
$primary: #1c3ed3;
$secondary: #414156;
// Links
$link-color: $primary;
$link-decoration: none;
$link-hover-color: lighten($primary, 20%);
$link-hover-decoration: underline;
// Fonts
$font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif,
-apple-system;
$font-family-heading: 'Lora', 'Helvetica Neue', Arial, sans-serif, -apple-system;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-weight-thin: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.6;
$headings-font-weight: 400;
$grid-gutter-width: 30px;
$spacer: 1rem;
$spacers: ();
@ -56,16 +30,6 @@ $spacers: map-merge(
8: 80px,
9: 90px,
10: 100px,
11: 110px,
12: 120px,
13: 130px,
14: 140px,
15: 150px,
16: 160px,
17: 170px,
18: 180px,
19: 190px,
20: 200px,
),
$spacers
);

2
_sass/bootstrap/_alert.scss Executable file → Normal file
View File

@ -27,7 +27,7 @@
// 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: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {

9
_sass/bootstrap/_badge.scss Executable file → Normal file
View File

@ -6,13 +6,20 @@
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
font-size: $badge-font-size;
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
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;
}
}
// Empty badges collapse automatically
&:empty {

16
_sass/bootstrap/_breadcrumb.scss Executable file → Normal file
View File

@ -3,19 +3,23 @@
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
@include font-size($breadcrumb-font-size);
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius);
@include border-radius($breadcrumb-border-radius);
}
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
&::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: escape-svg($breadcrumb-divider);
}
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built

37
_sass/bootstrap/_button-group.scss Executable file → Normal file
View File

@ -9,11 +9,11 @@
> .btn {
position: relative;
flex: 0 1 auto;
flex: 1 1 auto;
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
@include hover {
@include hover() {
z-index: 1;
}
&:focus,
@ -22,14 +22,6 @@
z-index: 1;
}
}
// Prevent double borders when buttons are next to each other
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -$btn-border-width;
}
}
// Optional: Group multiple button groups together for a toolbar
@ -44,8 +36,10 @@
}
.btn-group {
> .btn:first-child {
margin-left: 0;
// Prevent double borders when buttons are next to each other
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
}
// Reset rounded corners
@ -76,9 +70,15 @@
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after {
&::after,
.dropup &::after,
.dropright &::after {
margin-left: 0;
}
.dropleft &::before {
margin-right: 0;
}
}
.btn-sm + .dropdown-toggle-split {
@ -113,17 +113,14 @@
align-items: flex-start;
justify-content: center;
.btn,
.btn-group {
> .btn,
> .btn-group {
width: 100%;
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
margin-left: 0;
}
// Reset rounded corners

30
_sass/bootstrap/_buttons.scss Executable file → Normal file
View File

@ -6,17 +6,21 @@
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
white-space: nowrap;
white-space: $btn-white-space;
vertical-align: middle;
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
// Share hover and focus styles
@include hover-focus {
@include hover() {
color: $body-color;
text-decoration: none;
}
@ -33,14 +37,8 @@
@include box-shadow(none);
}
// Opinionated: add "hand" cursor to non-disabled .btn elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active {
background-image: none;
@include box-shadow($btn-active-box-shadow);
&:focus {
@ -81,25 +79,23 @@ fieldset:disabled a.btn {
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
background-color: transparent;
text-decoration: $link-decoration;
@include hover {
@include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
border-color: transparent;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
border-color: transparent;
box-shadow: none;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
// No need for an active state here
@ -111,11 +107,11 @@ fieldset:disabled a.btn {
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $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-line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}

104
_sass/bootstrap/_card.scss Executable file → Normal file
View File

@ -6,7 +6,8 @@
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
@ -35,7 +36,11 @@
// 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;
color: $card-color;
}
.card-title {
@ -43,7 +48,7 @@
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
@ -52,7 +57,7 @@
}
.card-link {
@include hover {
@include hover() {
text-decoration: none;
}
@ -68,6 +73,7 @@
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
@ -98,15 +104,15 @@
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
}
// Card image
@ -119,19 +125,20 @@
padding: $card-img-overlay-padding;
}
.card-img {
.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
@include border-radius($card-inner-border-radius);
}
// Card image caps
.card-img,
.card-img-top {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-top-radius($card-inner-border-radius);
}
.card-img,
.card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-bottom-radius($card-inner-border-radius);
}
@ -139,23 +146,19 @@
// Card deck
.card-deck {
display: flex;
flex-direction: column;
.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 {
display: flex;
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
flex-direction: column;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
@ -169,9 +172,6 @@
//
.card-group {
display: flex;
flex-direction: column;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
@ -179,11 +179,12 @@
}
@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-bottom: 0;
@ -194,55 +195,35 @@
// Handle rounded corners
@if $enable-rounded {
&:first-child {
&:not(:last-child) {
@include border-right-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-right-radius: 0;
}
}
&:last-child {
&:not(:first-child) {
@include border-left-radius(0);
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-left-radius: 0;
}
}
&:only-child {
@include border-radius($card-border-radius);
.card-img-top,
.card-header {
@include border-top-radius($card-border-radius);
}
.card-img-bottom,
.card-footer {
@include border-bottom-radius($card-border-radius);
}
}
&:not(:first-child):not(:last-child):not(:only-child) {
@include border-radius(0);
.card-img-top,
.card-img-bottom,
.card-header,
.card-footer {
@include border-radius(0);
}
}
}
}
}
@ -261,6 +242,8 @@
@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
@ -268,3 +251,28 @@
}
}
}
//
// Accordion
//
.accordion {
> .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;
}
}
}

134
_sass/bootstrap/_carousel.scss Executable file → Normal file
View File

@ -1,22 +1,39 @@
// Wrapper for the slide container and indicators
// Notes on the classes:
//
// 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
// 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
// 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
// is the upcoming slide in transition.
.carousel {
position: relative;
}
.carousel.pointer-event {
touch-action: pan-y;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
}
.carousel-item {
position: relative;
display: none;
align-items: center;
float: left;
width: 100%;
@include transition($carousel-transition);
margin-right: -100%;
backface-visibility: hidden;
perspective: 1000px;
@include transition($carousel-transition);
}
.carousel-item.active,
@ -25,37 +42,40 @@
display: block;
}
.carousel-item-next,
.carousel-item-prev {
position: absolute;
top: 0;
}
// CSS3 transforms when supported by the browser
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0);
}
}
.carousel-item-prev,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%);
}
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0);
//
// Alternate transitions
//
.carousel-fade {
.carousel-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
}
}
@ -69,6 +89,7 @@
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
@ -77,27 +98,26 @@
color: $carousel-control-color;
text-align: center;
opacity: $carousel-control-opacity;
// We can't have a transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
@include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus {
@include hover-focus() {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: .9;
opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
left: 0;
@if $enable-gradients {
background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
}
@ -107,14 +127,13 @@
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: transparent no-repeat center center;
background-size: 100% 100%;
background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg;
background-image: escape-svg($carousel-control-prev-icon-bg);
}
.carousel-control-next-icon {
background-image: $carousel-control-next-icon-bg;
background-image: escape-svg($carousel-control-next-icon-bg);
}
@ -126,7 +145,7 @@
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
@ -138,38 +157,25 @@
list-style: none;
li {
position: relative;
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
background-color: rgba($carousel-indicator-active-bg, .5);
// Use pseudo classes to increase the hit area by 10px on top and bottom.
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// 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;
@include transition($carousel-indicator-transition);
}
.active {
background-color: $carousel-indicator-active-bg;
opacity: 1;
}
}
@ -180,9 +186,9 @@
.carousel-caption {
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
left: ((100% - $carousel-caption-width) / 2);
left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;

23
_sass/bootstrap/_close.scss Executable file → Normal file
View File

@ -1,21 +1,22 @@
.close {
float: right;
font-size: $close-font-size;
@include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
@include hover-focus {
// Override <a>'s hover style
@include hover() {
color: $close-color;
text-decoration: none;
opacity: .75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
@include hover-focus() {
opacity: .75;
}
}
}
@ -24,11 +25,17 @@
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
}
// Future-proof disabling of clicks on `<a>` elements
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
pointer-events: none;
}
// stylelint-enable

20
_sass/bootstrap/_code.scss Executable file → Normal file
View File

@ -1,16 +1,8 @@
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
font-size: $code-font-size;
@include font-size($code-font-size);
color: $code-color;
word-break: break-word;
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
@ -21,7 +13,7 @@ code {
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
font-size: $kbd-font-size;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@ -29,7 +21,7 @@ kbd {
kbd {
padding: 0;
font-size: 100%;
@include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
@ -38,12 +30,12 @@ kbd {
// Blocks of code
pre {
display: block;
font-size: $code-font-size;
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
font-size: inherit;
@include font-size(inherit);
color: inherit;
word-break: normal;
}

312
_sass/bootstrap/_custom-forms.scss Executable file → Normal file
View File

@ -10,8 +10,8 @@
.custom-control {
position: relative;
display: block;
min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
}
.custom-control-inline {
@ -21,26 +21,41 @@
.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
box-shadow: $custom-control-indicator-focus-box-shadow;
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
&:active ~ .custom-control-label::before {
&: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;
@ -54,38 +69,40 @@
// Custom control indicators
//
// Build the custom controls out of psuedo-elements.
// 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: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
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: "";
user-select: none;
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: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
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-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
background: no-repeat 50% / #{$custom-control-indicator-bg-size};
}
}
@ -100,21 +117,19 @@
}
.custom-control-input:checked ~ .custom-control-label {
&::before {
@include gradient-bg($custom-control-indicator-checked-bg);
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
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: $custom-checkbox-indicator-icon-indeterminate;
background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
}
}
@ -134,15 +149,56 @@
.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-blacklist
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::before {
@include gradient-bg($custom-control-indicator-checked-bg);
}
&::after {
background-image: $custom-radio-indicator-icon-checked;
background-image: escape-svg($custom-radio-indicator-icon-checked);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
background-color: $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-blacklist
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-blacklist
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);
}
}
@ -157,7 +213,7 @@
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
// https://primer.github.io/.
//
.custom-select {
@ -165,23 +221,26 @@
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-indicator no-repeat right $custom-select-padding-x center;
background-size: $custom-select-bg-size;
background: $custom-select-bg $custom-select-background;
border: $custom-select-border-width solid $custom-select-border-color;
@if $enable-rounded {
border-radius: $custom-select-border-radius;
} @else {
border-radius: 0;
}
@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;
box-shadow: $custom-select-focus-box-shadow;
@if $enable-shadows {
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
} @else {
box-shadow: $custom-select-focus-box-shadow;
}
&::-ms-value {
// For visual consistency with other platforms/browsers,
@ -208,22 +267,30 @@
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
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;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-font-size-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;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-font-size-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);
}
@ -247,13 +314,15 @@
margin: 0;
opacity: 0;
&:focus ~ .custom-file-control {
&:focus ~ .custom-file-label {
border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
}
&::before {
border-color: $custom-file-focus-border-color;
}
// 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 {
@ -261,6 +330,10 @@
content: $value;
}
}
~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}
.custom-file-label {
@ -271,6 +344,8 @@
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
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;
@ -285,13 +360,162 @@
bottom: 0;
z-index: 3;
display: block;
height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
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: $custom-file-border-width solid $custom-file-border-color;
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: none;
// 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);
}

74
_sass/bootstrap/_dropdown.scss Executable file → Normal file
View File

@ -1,12 +1,16 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropdown {
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
// Generate the caret automatically
@include caret;
@include caret();
}
// The dropdown menu
@ -20,8 +24,8 @@
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-spacer 0 0; // override default ul
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
color: $body-color;
@include font-size($dropdown-font-size);
color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
@ -31,10 +35,28 @@
@include box-shadow($dropdown-box-shadow);
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left {
right: auto;
left: 0;
}
.dropdown-menu#{$infix}-right {
right: 0;
left: auto;
}
}
}
// 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 {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: $dropdown-spacer;
}
@ -46,6 +68,9 @@
.dropright {
.dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: $dropdown-spacer;
}
@ -60,6 +85,9 @@
.dropleft {
.dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: $dropdown-spacer;
}
@ -72,9 +100,21 @@
}
}
// When enabled Popper.js, reset 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);
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
}
// Links, buttons, and more within the dropdown menu
@ -92,7 +132,19 @@
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
@include hover-focus {
// Prevent dropdown overflow if there's no padding
// See https://github.com/twbs/bootstrap/pull/27703
@if $dropdown-padding-y == 0 {
&:first-child {
@include border-top-radius($dropdown-inner-border-radius);
}
&:last-child {
@include border-bottom-radius($dropdown-inner-border-radius);
}
}
@include hover-focus() {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);
@ -108,6 +160,7 @@
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
@ -125,7 +178,14 @@
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm;
@include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Dropdown text
.dropdown-item-text {
display: block;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
}

93
_sass/bootstrap/_forms.scss Executable file → Normal file
View File

@ -7,8 +7,11 @@
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
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;
@ -16,13 +19,7 @@
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.
@if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius;
} @else {
// Otherwise undo the iOS default
border-radius: 0;
}
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
@ -33,8 +30,14 @@
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();
@include form-control-focus($ignore-warning: true);
// Placeholder
&::placeholder {
@ -57,10 +60,6 @@
}
select.form-control {
&:not([size]):not([multiple]) {
height: $input-height;
}
&: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
@ -87,24 +86,24 @@ select.form-control {
// 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: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
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
font-size: inherit; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
font-size: $font-size-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: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
font-size: $font-size-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;
}
@ -117,10 +116,11 @@ select.form-control {
.form-control-plaintext {
display: block;
width: 100%;
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
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;
@ -138,35 +138,35 @@ select.form-control {
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
// 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;
font-size: $font-size-sm;
@include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
select.form-control-sm {
&:not([size]):not([multiple]) {
height: $input-height-sm;
}
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
select.form-control-lg {
&:not([size]):not([multiple]) {
height: $input-height-lg;
// stylelint-disable-next-line no-duplicate-selectors
select.form-control {
&[size],
&[multiple] {
height: auto;
}
}
textarea.form-control {
height: auto;
}
// Form groups
//
@ -190,13 +190,13 @@ select.form-control-lg {
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
margin-right: -$form-grid-gutter-width / 2;
margin-left: -$form-grid-gutter-width / 2;
> .col,
> [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
padding-right: $form-grid-gutter-width / 2;
padding-left: $form-grid-gutter-width / 2;
}
}
@ -216,6 +216,8 @@ select.form-control-lg {
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;
}
@ -248,8 +250,9 @@ select.form-control-lg {
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
@include form-validation-state("valid", $form-feedback-valid-color);
@include form-validation-state("invalid", $form-feedback-invalid-color);
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
// Inline forms
//
@ -302,7 +305,8 @@ select.form-control-lg {
display: inline-block;
}
.input-group {
.input-group,
.custom-select {
width: auto;
}
@ -317,6 +321,7 @@ select.form-control-lg {
}
.form-check-input {
position: relative;
flex-shrink: 0;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;

66
_sass/bootstrap/_functions.scss Executable file → Normal file
View File

@ -1,6 +1,6 @@
// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@ -8,7 +8,7 @@
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@ -21,12 +21,12 @@
}
// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map) {
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
@ -48,8 +48,19 @@
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
$string: str-replace($string, $char, $encoded);
}
}
@return $string;
}
// Color contrast
@function color-yiq($color) {
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
@ -57,9 +68,9 @@
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $yiq-text-dark;
@return $dark;
} @else {
@return $yiq-text-light;
@return $light;
}
}
@ -79,8 +90,45 @@
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

33
_sass/bootstrap/_grid.scss Executable file → Normal file
View File

@ -3,26 +3,43 @@
// 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 {
@include make-container();
@include make-container-max-widths();
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.
@if $enable-grid-classes {
// 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;
}
@each $name, $width in $grid-breakpoints {
@if ($container-max-width > $width or $breakpoint == $name) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
}
}
}
}
}
// Row
//
// Rows contain and clear the floats of your columns.
// Rows contain your columns.
@if $enable-grid-classes {
.row {

8
_sass/bootstrap/_images.scss Executable file → Normal file
View File

@ -6,7 +6,7 @@
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid;
@include img-fluid();
}
@ -19,7 +19,7 @@
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid;
@include img-fluid();
}
//
@ -32,11 +32,11 @@
}
.figure-img {
margin-bottom: ($spacer / 2);
margin-bottom: $spacer / 2;
line-height: 1;
}
.figure-caption {
font-size: $figure-caption-font-size;
@include font-size($figure-caption-font-size);
color: $figure-caption-color;
}

62
_sass/bootstrap/_input-group.scss Executable file → Normal file
View File

@ -12,20 +12,14 @@
width: 100%;
> .form-control,
> .form-control-plaintext,
> .custom-select,
> .custom-file {
position: relative; // For focus state's z-index
flex: 1 1 auto;
// Add width 1% and flex-basis auto to ensure that button will not wrap out
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
flex: 1 1 0%;
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
margin-bottom: 0;
// Bring the "active" form control to the top of surrounding elements
&:focus {
z-index: 3;
}
+ .form-control,
+ .custom-select,
+ .custom-file {
@ -33,6 +27,18 @@
}
}
// 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(:last-child) { @include border-right-radius(0); }
@ -46,9 +52,8 @@
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label,
&:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
}
@ -69,6 +74,10 @@
.btn {
position: relative;
z-index: 2;
&:focus {
z-index: 3;
}
}
.btn + .btn,
@ -93,7 +102,7 @@
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base; // Match inputs
@include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
@ -116,20 +125,43 @@
// 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 {
@extend .form-control-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);
}
.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 {
@extend .form-control-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);
}
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}

1
_sass/bootstrap/_jumbotron.scss Executable file → Normal file
View File

@ -1,6 +1,7 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);

75
_sass/bootstrap/_list-group.scss Executable file → Normal file
View File

@ -23,7 +23,8 @@
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
@include hover-focus {
@include 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;
background-color: $list-group-hover-bg;
@ -44,8 +45,7 @@
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
color: $list-group-color;
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
@ -54,18 +54,13 @@
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
@include hover-focus {
z-index: 1; // Place hover/active items above their siblings for proper border styling
text-decoration: none;
}
&.disabled,
&:disabled {
color: $list-group-disabled-color;
pointer-events: none;
background-color: $list-group-disabled-bg;
}
@ -76,6 +71,56 @@
background-color: $list-group-active-bg;
border-color: $list-group-active-border-color;
}
& + & {
border-top-width: 0;
&.active {
margin-top: -$list-group-border-width;
border-top-width: $list-group-border-width;
}
}
}
// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.list-group-horizontal#{$infix} {
flex-direction: row;
.list-group-item {
&:first-child {
@include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
}
&:last-child {
@include border-top-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0);
}
&.active {
margin-top: 0;
}
& + .list-group-item {
border-top-width: $list-group-border-width;
border-left-width: 0;
&.active {
margin-left: -$list-group-border-width;
border-left-width: $list-group-border-width;
}
}
}
}
}
}
@ -86,20 +131,18 @@
.list-group-flush {
.list-group-item {
border-right: 0;
border-left: 0;
border-right-width: 0;
border-left-width: 0;
@include border-radius(0);
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
&:first-child {
border-top-width: 0;
}
}
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
border-bottom-width: 0;
}
}
}

0
_sass/bootstrap/_media.scss Executable file → Normal file
View File

13
_sass/bootstrap/_mixins.scss Executable file → Normal file
View File

@ -2,6 +2,12 @@
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// Utilities
@import "mixins/breakpoints";
@import "mixins/hover";
@ -16,7 +22,7 @@
@import "mixins/text-truncate";
@import "mixins/visibility";
// // Components
// Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/caret";
@ -27,16 +33,15 @@
@import "mixins/forms";
@import "mixins/table-row";
// // Skins
// Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// // Layout
// Layout
@import "mixins/clearfix";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/float";

119
_sass/bootstrap/_modal.scss Executable file → Normal file
View File

@ -4,20 +4,25 @@
// .modal-content - actual modal w/ bg and corners and stuff
// Kill the scroll on the body
.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;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
@ -25,11 +30,6 @@
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
.modal-open & {
overflow-x: hidden;
overflow-y: auto;
}
}
// Shell div to position the modal with bottom padding
@ -43,17 +43,63 @@
// When fading in the modal, animate it to slide down
.modal.fade & {
@include transition($modal-transition);
transform: translate(0, -25%);
transform: $modal-fade-transform;
}
.modal.show & {
transform: translate(0, 0);
transform: $modal-show-transform;
}
// When trying to close, animate focus to scale
.modal.modal-static & {
transform: $modal-scale-transform;
}
}
.modal-dialog-scrollable {
display: flex; // IE10/11
max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content {
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
overflow: hidden;
}
.modal-header,
.modal-footer {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
height: subtract(100vh, $modal-dialog-margin * 2);
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
@ -63,11 +109,12 @@
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
color: $modal-content-color;
pointer-events: auto;
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
@include border-radius($modal-content-border-radius);
@include box-shadow($modal-content-box-shadow-xs);
// Remove focus outline from opened modal
outline: 0;
@ -77,10 +124,10 @@
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
width: 100vw;
height: 100vh;
background-color: $modal-backdrop-bg;
// Fade for backdrop
@ -96,12 +143,12 @@
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($border-radius-lg);
@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) (-$modal-header-padding) (-$modal-header-padding) auto;
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
}
}
@ -116,7 +163,7 @@
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`.
// when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
@ -124,14 +171,20 @@
// Footer (for actions)
.modal-footer {
display: flex;
flex-wrap: wrap;
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;
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
// Easily place margin between footer elements
> :not(:first-child) { margin-left: .25rem; }
> :not(:last-child) { margin-right: .25rem; }
// Place margin between footer elements
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
// stylelint-disable-next-line selector-max-universal
> * {
margin: $modal-footer-margin-between / 2;
}
}
// Measure scrollbar width for padding body during modal show/hide
@ -151,8 +204,20 @@
margin: $modal-dialog-margin-y-sm-up auto;
}
.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);
}
}
.modal-dialog-centered {
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
}
.modal-content {
@ -160,9 +225,15 @@
}
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; }
.modal-lg,
.modal-xl {
max-width: $modal-lg;
}
}
@include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; }
}

8
_sass/bootstrap/_nav.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.
// `<nav>`s, `<ul>`s or `<ol>`s.
.nav {
display: flex;
@ -15,13 +15,15 @@
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
@include hover-focus {
@include hover-focus() {
text-decoration: none;
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
}
@ -40,7 +42,7 @@
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus {
@include hover-focus() {
border-color: $nav-tabs-link-hover-border-color;
}

97
_sass/bootstrap/_navbar.scss Executable file → Normal file
View File

@ -24,14 +24,24 @@
padding: $navbar-padding-y $navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
// few properities so that content nested within behave properly.
> .container,
> .container-fluid {
// few properties so that content nested within behave properly.
%container-flex-properties {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.container,
.container-fluid {
@extend %container-flex-properties;
}
@each $breakpoint, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
@extend %container-flex-properties;
}
}
}
@ -44,11 +54,11 @@
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
font-size: $navbar-brand-font-size;
@include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
@include hover-focus {
@include hover-focus() {
text-decoration: none;
}
}
@ -94,7 +104,7 @@
// Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
@ -107,20 +117,15 @@
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size;
@include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
@include hover-focus {
@include hover-focus() {
text-decoration: none;
}
// Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
}
// Keep as a separate element so folks can easily override it with another icon
@ -144,11 +149,21 @@
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
> .container,
> .container-fluid {
%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) {
@ -162,11 +177,6 @@
position: absolute;
}
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
@ -174,13 +184,23 @@
}
// For nesting containers, have to redeclare for alignment purposes
> .container,
> .container-fluid {
%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-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
@ -189,13 +209,6 @@
.navbar-toggler {
display: none;
}
.dropup {
.dropdown-menu {
top: auto;
bottom: 100%;
}
}
}
}
}
@ -209,10 +222,10 @@
// Dark links against a light background
.navbar-light {
.navbar-brand {
color: $navbar-light-active-color;
color: $navbar-light-brand-color;
@include hover-focus {
color: $navbar-light-active-color;
@include hover-focus() {
color: $navbar-light-brand-hover-color;
}
}
@ -220,7 +233,7 @@
.nav-link {
color: $navbar-light-color;
@include hover-focus {
@include hover-focus() {
color: $navbar-light-hover-color;
}
@ -243,7 +256,7 @@
}
.navbar-toggler-icon {
background-image: $navbar-light-toggler-icon-bg;
background-image: escape-svg($navbar-light-toggler-icon-bg);
}
.navbar-text {
@ -251,7 +264,7 @@
a {
color: $navbar-light-active-color;
@include hover-focus {
@include hover-focus() {
color: $navbar-light-active-color;
}
}
@ -261,10 +274,10 @@
// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-dark-active-color;
color: $navbar-dark-brand-color;
@include hover-focus {
color: $navbar-dark-active-color;
@include hover-focus() {
color: $navbar-dark-brand-hover-color;
}
}
@ -272,7 +285,7 @@
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
@include hover-focus() {
color: $navbar-dark-hover-color;
}
@ -295,7 +308,7 @@
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
background-image: escape-svg($navbar-dark-toggler-icon-bg);
}
.navbar-text {
@ -303,7 +316,7 @@
a {
color: $navbar-dark-active-color;
@include hover-focus {
@include hover-focus() {
color: $navbar-dark-active-color;
}
}

12
_sass/bootstrap/_pagination.scss Executable file → Normal file
View File

@ -15,6 +15,7 @@
border: $pagination-border-width solid $pagination-border-color;
&:hover {
z-index: 2;
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
@ -22,15 +23,10 @@
}
&:focus {
z-index: 2;
outline: 0;
z-index: 3;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
// Opinionated: add "hand" cursor to non-disabled .page-link elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
}
.page-item {
@ -47,7 +43,7 @@
}
&.active .page-link {
z-index: 1;
z-index: 3;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;

123
_sass/bootstrap/_popover.scss Executable file → Normal file
View File

@ -8,7 +8,7 @@
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $popover-font-size;
@include font-size($popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
@ -22,7 +22,7 @@
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
margin: 0 $border-radius-lg;
margin: 0 $popover-border-radius;
&::before,
&::after {
@ -38,72 +38,63 @@
.bs-popover-top {
margin-bottom: $popover-arrow-height;
.arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
> .arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width);
.arrow::before,
.arrow::after {
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
}
&::before {
bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-outer-color;
}
.arrow::before {
bottom: 0;
border-top-color: $popover-arrow-outer-color;
}
.arrow::after {
bottom: $popover-border-width;
border-top-color: $popover-arrow-color;
&::after {
bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-top-color: $popover-arrow-color;
}
}
}
.bs-popover-right {
margin-left: $popover-arrow-height;
.arrow {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
> .arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
.arrow::before,
.arrow::after {
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
}
&::before {
left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-outer-color;
}
.arrow::before {
left: 0;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after {
left: $popover-border-width;
border-right-color: $popover-arrow-color;
&::after {
left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-color;
}
}
}
.bs-popover-bottom {
margin-top: $popover-arrow-height;
.arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
}
> .arrow {
top: subtract(-$popover-arrow-height, $popover-border-width);
.arrow::before,
.arrow::after {
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
}
&::before {
top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::before {
top: 0;
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::after {
top: $popover-border-width;
border-bottom-color: $popover-arrow-color;
&::after {
top: $popover-border-width;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-bottom-color: $popover-arrow-color;
}
}
// This will remove the popover-header's border just below the arrow
@ -113,7 +104,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: ($popover-arrow-width / -2);
margin-left: -$popover-arrow-width / 2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@ -122,26 +113,23 @@
.bs-popover-left {
margin-right: $popover-arrow-height;
.arrow {
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
> .arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
}
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
.arrow::before,
.arrow::after {
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
}
&::before {
right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
.arrow::before {
right: 0;
border-left-color: $popover-arrow-outer-color;
}
.arrow::after {
right: $popover-border-width;
border-left-color: $popover-arrow-color;
&::after {
right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
}
@ -165,12 +153,11 @@
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base;
@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%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width);
@include border-top-radius($popover-inner-border-radius);
&:empty {
display: none;

33
_sass/bootstrap/_print.scss Executable file → Normal file
View File

@ -1,11 +1,11 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request:
// http://www.phpied.com/delay-loading-your-print-css/
// https://www.phpied.com/delay-loading-your-print-css/
// ==========================================================================
@if $enable-print-styles {
@ -14,7 +14,7 @@
*::before,
*::after {
// Bootstrap specific; comment out `color` and `background`
//color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
//color: $black !important; // Black prints faster
text-shadow: none !important;
//background: transparent !important;
box-shadow: none !important;
@ -51,13 +51,13 @@
}
pre,
blockquote {
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
@ -101,7 +101,7 @@
display: none;
}
.badge {
border: $border-width solid #000;
border: $border-width solid $black;
}
.table {
@ -109,16 +109,33 @@
td,
th {
background-color: #fff !important;
background-color: $white !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
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
}
}

25
_sass/bootstrap/_progress.scss Executable file → Normal file
View File

@ -1,13 +1,16 @@
@keyframes progress-bar-stripes {
from { background-position: $progress-height 0; }
to { background-position: 0 0; }
// Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
from { background-position: $progress-height 0; }
to { background-position: 0 0; }
}
}
.progress {
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
font-size: $progress-font-size;
@include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
@ -17,8 +20,10 @@
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: $progress-bar-color;
text-align: center;
white-space: nowrap;
background-color: $progress-bar-bg;
@include transition($progress-bar-transition);
}
@ -28,6 +33,14 @@
background-size: $progress-height $progress-height;
}
.progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing;
@if $enable-transitions {
.progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing;
@if $enable-prefers-reduced-motion-media-query {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
}

128
_sass/bootstrap/_reboot.scss Executable file → Normal file
View File

@ -14,9 +14,7 @@
// 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. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
// 6. Change the default tap highlight to be completely transparent in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.
*,
*::before,
@ -28,36 +26,27 @@ html {
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
-ms-text-size-adjust: 100%; // 4
-ms-overflow-style: scrollbar; // 5
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
-webkit-tap-highlight-color: rgba($black, 0); // 5
}
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@at-root {
@-ms-viewport {
width: device-width;
}
}
// stylelint-disable selector-list-comma-newline-after
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
// 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;
}
// stylelint-enable selector-list-comma-newline-after
// 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
// 3. Set an explicit initial text-align value so that we can later use
// the `inherit` value on things like `<th>` elements.
body {
margin: 0; // 1
font-family: $font-family-base;
font-size: $font-size-base;
@include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
@ -65,12 +54,16 @@ body {
background-color: $body-bg; // 2
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
// 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.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
// 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;
}
@ -95,12 +88,11 @@ hr {
//
// 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 selector-list-comma-newline-after
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
}
// stylelint-enable selector-list-comma-newline-after
// Reset margins on paragraphs
//
@ -113,17 +105,19 @@ p {
// Abbreviations
//
// 1. Remove the bottom border in Firefox 39-.
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
// 4. Remove the bottom border in Firefox 39-.
// 5. Prevent the text-decoration to be skipped.
abbr[title],
abbr[data-original-title] { // 4
abbr[data-original-title] { // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
cursor: help; // 3
border-bottom: 0; // 1
border-bottom: 0; // 4
text-decoration-skip-ink: none; // 5
}
address {
@ -159,19 +153,13 @@ blockquote {
margin: 0 0 1rem;
}
dfn {
font-style: italic; // Add the correct font style in Android 4.3-
}
// stylelint-disable font-weight-notation
b,
strong {
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
}
// stylelint-enable font-weight-notation
small {
font-size: 80%; // Add the correct font size in all browsers
@include font-size(80%); // Add the correct font size in all browsers
}
//
@ -182,7 +170,7 @@ small {
sub,
sup {
position: relative;
font-size: 75%;
@include font-size(75%);
line-height: 0;
vertical-align: baseline;
}
@ -199,32 +187,26 @@ a {
color: $link-color;
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
-webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
@include hover {
@include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
a:not([href]) {
color: inherit;
text-decoration: none;
@include hover-focus {
@include hover() {
color: inherit;
text-decoration: none;
}
&:focus {
outline: 0;
}
}
@ -232,15 +214,13 @@ a:not([href]):not([tabindex]) {
// Code
//
// stylelint-disable font-family-no-duplicate-names
pre,
code,
kbd,
samp {
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
font-family: $font-family-monospace;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
// stylelint-enable font-family-no-duplicate-names
pre {
// Remove browser default top margin
@ -249,9 +229,6 @@ pre {
margin-bottom: 1rem;
// Don't allow content to break outside
overflow: auto;
// We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-ms-overflow-style: scrollbar;
}
@ -274,8 +251,11 @@ img {
border-style: none; // Remove the border on images inside links in IE 10-.
}
svg:not(:root) {
overflow: hidden; // Hide the overflow in IE
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;
}
@ -290,7 +270,7 @@ table {
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
color: $table-caption-color;
text-align: left;
caption-side: bottom;
}
@ -309,13 +289,14 @@ th {
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: .5rem;
margin-bottom: $label-margin-bottom;
}
// Remove the default `border-radius` that macOS Chrome adds.
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-blacklist
border-radius: 0;
}
@ -335,7 +316,7 @@ optgroup,
textarea {
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
font-size: inherit;
@include font-size(inherit);
line-height: inherit;
}
@ -349,16 +330,36 @@ select {
text-transform: none; // Remove the inheritance of text transform in Firefox
}
// Remove the inheritance of word-wrap in Safari.
//
// Details at https://github.com/twbs/bootstrap/issues/24990
select {
word-wrap: normal;
}
// 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.
button,
html [type="button"], // 1
[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"] {
&:not(:disabled) {
cursor: pointer;
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
@ -414,7 +415,7 @@ legend {
max-width: 100%; // 1
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
@include font-size(1.5rem);
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
@ -440,10 +441,9 @@ progress {
}
//
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
// Remove the inner padding in Chrome and Safari on macOS.
//
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

1
_sass/bootstrap/_root.scss Executable file → Normal file
View File

@ -1,3 +1,4 @@
// Do not forget to update getting-started/theming.md!
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {

55
_sass/bootstrap/_spinners.scss Normal file
View File

@ -0,0 +1,55 @@
//
// Rotating border
//
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner-border {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
animation: spinner-border .75s linear infinite;
}
.spinner-border-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
border-width: $spinner-border-width-sm;
}
//
// Growing circle
//
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
}
}
.spinner-grow {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
opacity: 0;
animation: spinner-grow .75s linear infinite;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}

33
_sass/bootstrap/_tables.scss Executable file → Normal file
View File

@ -4,8 +4,8 @@
.table {
width: 100%;
max-width: 100%;
margin-bottom: $spacer;
color: $table-color;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th,
@ -23,10 +23,6 @@
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
.table {
background-color: $body-bg;
}
}
@ -42,9 +38,9 @@
}
// Bordered version
// Border versions
//
// Add borders all around the table and between all the columns.
// Add or remove borders all around the table and between all the columns.
.table-bordered {
border: $table-border-width solid $table-border-color;
@ -57,18 +53,26 @@
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
border-bottom-width: 2 * $table-border-width;
}
}
}
.table-borderless {
th,
td,
thead th,
tbody + tbody {
border: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(odd) {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg;
}
}
@ -80,7 +84,8 @@
.table-hover {
tbody tr {
@include hover {
@include hover() {
color: $table-hover-color;
background-color: $table-hover-bg;
}
}
@ -93,7 +98,7 @@
// inheritance to nested tables.
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, -9));
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
}
@include table-row-variant(active, $table-active-bg);
@ -137,14 +142,15 @@
}
&.table-striped {
tbody tr:nth-of-type(odd) {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover {
@include hover() {
color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
}
@ -168,7 +174,6 @@
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {

44
_sass/bootstrap/_toasts.scss Normal file
View File

@ -0,0 +1,44 @@
.toast {
max-width: $toast-max-width;
overflow: hidden; // cheap rounded corners on nested items
@include font-size($toast-font-size);
color: $toast-color;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
backdrop-filter: blur(10px);
opacity: 0;
@include border-radius($toast-border-radius);
&:not(:last-child) {
margin-bottom: $toast-padding-x;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
}
&.hide {
display: none;
}
}
.toast-header {
display: flex;
align-items: center;
padding: $toast-padding-y $toast-padding-x;
color: $toast-header-color;
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
}
.toast-body {
padding: $toast-padding-x; // apply to both vertical and horizontal
}

2
_sass/bootstrap/_tooltip.scss Executable file → Normal file
View File

@ -7,7 +7,7 @@
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $tooltip-font-size;
@include font-size($tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;

24
_sass/bootstrap/_transitions.scss Executable file → Normal file
View File

@ -1,30 +1,14 @@
// stylelint-disable selector-no-qualifying-type
.fade {
opacity: 0;
@include transition($transition-fade);
&.show {
opacity: 1;
&:not(.show) {
opacity: 0;
}
}
.collapse {
display: none;
&.show {
display: block;
}
}
tr {
&.collapse.show {
display: table-row;
}
}
tbody {
&.collapse.show {
display: table-row-group;
&:not(.show) {
display: none;
}
}

36
_sass/bootstrap/_type.scss Executable file → Normal file
View File

@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color;
}
h1, .h1 { font-size: $h1-font-size; }
h2, .h2 { font-size: $h2-font-size; }
h3, .h3 { font-size: $h3-font-size; }
h4, .h4 { font-size: $h4-font-size; }
h5, .h5 { font-size: $h5-font-size; }
h6, .h6 { font-size: $h6-font-size; }
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 {
font-size: $lead-font-size;
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
font-size: $display1-size;
@include font-size($display1-size);
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2 {
font-size: $display2-size;
@include font-size($display2-size);
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
font-size: $display3-size;
@include font-size($display3-size);
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
font-size: $display4-size;
@include font-size($display4-size);
font-weight: $display4-weight;
line-height: $display-line-height;
}
@ -66,7 +66,7 @@ hr {
small,
.small {
font-size: $small-font-size;
@include font-size($small-font-size);
font-weight: $font-weight-normal;
}
@ -82,12 +82,12 @@ mark,
//
.list-unstyled {
@include list-unstyled;
@include list-unstyled();
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled;
@include list-unstyled();
}
.list-inline-item {
display: inline-block;
@ -104,22 +104,22 @@ mark,
// Builds on `abbr`
.initialism {
font-size: 90%;
@include font-size(90%);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $spacer;
font-size: $blockquote-font-size;
@include font-size($blockquote-font-size);
}
.blockquote-footer {
display: block;
font-size: 80%; // back to default font-size
@include font-size($blockquote-small-font-size);
color: $blockquote-small-color;
&::before {
content: "\2014 \00A0"; // em dash, nbsp
content: "\2014\00A0"; // em dash, nbsp
}
}

3
_sass/bootstrap/_utilities.scss Executable file → Normal file
View File

@ -6,9 +6,12 @@
@import "utilities/embed";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/overflow";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/shadows";
@import "utilities/sizing";
@import "utilities/stretched-link";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

647
_sass/bootstrap/_variables.scss Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

11
_sass/bootstrap/bootstrap-grid.scss Executable file → Normal file
View File

@ -1,14 +1,10 @@
/*!
* Bootstrap Grid v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@at-root {
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
@ -30,3 +26,4 @@ html {
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

6
_sass/bootstrap/bootstrap-reboot.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
/*!
* Bootstrap Reboot v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/

8
_sass/bootstrap/bootstrap.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@ -34,9 +34,11 @@
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

0
_sass/bootstrap/mixins/_alert.scss Executable file → Normal file
View File

5
_sass/bootstrap/mixins/_background-variant.scss Executable file → Normal file
View File

@ -2,16 +2,17 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
@mixin bg-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
@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) {

11
_sass/bootstrap/mixins/_badge.scss Executable file → Normal file
View File

@ -2,11 +2,16 @@
color: color-yiq($bg);
background-color: $bg;
&[href] {
@include hover-focus {
@at-root a#{&} {
@include hover-focus() {
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
}
&:focus,
&.focus {
outline: 0;
box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
}
}
}

30
_sass/bootstrap/mixins/_border-radius.scss Executable file → Normal file
View File

@ -1,9 +1,13 @@
// stylelint-disable property-blacklist
// Single side border-radius
@mixin border-radius($radius: $border-radius) {
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: $radius;
}
@else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
@mixin border-top-radius($radius) {
@ -33,3 +37,27 @@
border-bottom-left-radius: $radius;
}
}
@mixin border-top-left-radius($radius) {
@if $enable-rounded {
border-top-left-radius: $radius;
}
}
@mixin border-top-right-radius($radius) {
@if $enable-rounded {
border-top-right-radius: $radius;
}
}
@mixin border-bottom-right-radius($radius) {
@if $enable-rounded {
border-bottom-right-radius: $radius;
}
}
@mixin border-bottom-left-radius($radius) {
@if $enable-rounded {
border-bottom-left-radius: $radius;
}
}

17
_sass/bootstrap/mixins/_box-shadow.scss Executable file → Normal file
View File

@ -1,5 +1,20 @@
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
$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");
}
}
}
@if (length($result) > 0) {
box-shadow: $result;
}
}
}

6
_sass/bootstrap/mixins/_breakpoints.scss Executable file → Normal file
View File

@ -16,7 +16,7 @@
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
@return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@ -39,10 +39,10 @@
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
@return if($next, breakpoint-min($next, $breakpoints) - .02, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

31
_sass/bootstrap/mixins/_buttons.scss Executable file → Normal file
View File

@ -9,7 +9,7 @@
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
@include hover() {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
@ -17,11 +17,14 @@
&:focus,
&.focus {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
} @else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}
}
@ -31,6 +34,10 @@
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,
@ -45,10 +52,10 @@
&:focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
@if $enable-shadows and $btn-active-box-shadow != none {
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
} @else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}
}
}
@ -56,11 +63,9 @@
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
color: $color;
background-color: transparent;
background-image: none;
border-color: $color;
&:hover {
@include hover() {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
@ -98,12 +103,8 @@
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
@include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default
@if $enable-rounded {
border-radius: $border-radius;
} @else {
border-radius: 0;
}
@include border-radius($border-radius, 0);
}

29
_sass/bootstrap/mixins/_caret.scss Executable file → Normal file
View File

@ -1,24 +1,25 @@
@mixin caret-down {
@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-right() {
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-left() {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@ -28,17 +29,15 @@
@if $enable-caret {
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width * .85;
vertical-align: $caret-width * .85;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down;
@include caret-down();
} @else if $direction == up {
@include caret-up;
@include caret-up();
} @else if $direction == right {
@include caret-right;
@include caret-right();
}
}
@ -49,12 +48,10 @@
&::before {
display: inline-block;
width: 0;
height: 0;
margin-right: $caret-width * .85;
vertical-align: $caret-width * .85;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-left;
@include caret-left();
}
}

0
_sass/bootstrap/mixins/_clearfix.scss Executable file → Normal file
View File

10
_sass/bootstrap/mixins/_deprecate.scss Normal file
View File

@ -0,0 +1,10 @@
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.
// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
@if ($enable-deprecation-messages != false and $ignore-warning != true) {
@warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
}
}

9
_sass/bootstrap/mixins/_float.scss Executable file → Normal file
View File

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

112
_sass/bootstrap/mixins/_forms.scss Executable file → Normal file
View File

@ -10,7 +10,7 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus() {
@mixin form-control-focus($ignore-warning: false) {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
@ -23,15 +23,30 @@
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
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state($state, $color) {
@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
font-size: $form-feedback-font-size;
@include font-size($form-feedback-font-size);
color: $color;
}
@ -41,36 +56,69 @@
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: .5rem;
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba($color, .8);
border-radius: .2rem;
@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);
@include border-radius($form-feedback-tooltip-border-radius);
}
.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.custom-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, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
.form-check-input {
.was-validated &:#{$state},
&.is-#{$state} {
@include form-validation-state-selector($state) {
~ .form-check-label {
color: $color;
}
@ -83,30 +131,29 @@
}
.custom-control-input {
.was-validated &:#{$state},
&.is-#{$state} {
@include form-validation-state-selector($state) {
~ .custom-control-label {
color: $color;
&::before {
background-color: lighten($color, 25%);
border-color: $color;
}
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&: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 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
&:not(:checked) ~ .custom-control-label::before {
border-color: $color;
}
}
}
@ -114,21 +161,14 @@
// custom file
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
@include form-validation-state-selector($state) {
~ .custom-file-label {
border-color: $color;
&::before { border-color: inherit; }
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:focus {
~ .custom-file-label {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}

14
_sass/bootstrap/mixins/_gradients.scss Executable file → Normal file
View File

@ -11,7 +11,7 @@
// 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: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
}
@ -19,27 +19,27 @@
// 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: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
background-repeat: repeat-x;
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
background-repeat: repeat-x;
}
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
@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: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
@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: #555, $outer-color: #333) {
@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(255,255,255,.15), $angle: 45deg) {
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

16
_sass/bootstrap/mixins/_grid-framework.scss Executable file → Normal file
View File

@ -8,9 +8,8 @@
%grid-column {
position: relative;
width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
padding-right: $gutter / 2;
padding-left: $gutter / 2;
}
@each $breakpoint in map-keys($breakpoints) {
@ -34,10 +33,15 @@
flex-grow: 1;
max-width: 100%;
}
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
max-width: none; // Reset earlier grid tiers
@include make-col-auto();
}
@for $i from 1 through $columns {

37
_sass/bootstrap/mixins/_grid.scss Executable file → Normal file
View File

@ -2,10 +2,10 @@
//
// Generate semantic grid columns with these mixins.
@mixin make-container() {
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
padding-right: $gutter / 2;
padding-left: $gutter / 2;
margin-right: auto;
margin-left: auto;
}
@ -20,22 +20,21 @@
}
}
@mixin make-row() {
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
margin-right: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);
margin-right: -$gutter / 2;
margin-left: -$gutter / 2;
}
@mixin make-col-ready() {
@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
padding-right: $gutter / 2;
padding-left: $gutter / 2;
}
@mixin make-col($size, $columns: $grid-columns) {
@ -46,7 +45,25 @@
max-width: percentage($size / $columns);
}
@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;
margin-left: if($num == 0, 0, percentage($num));
}
// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
& > * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
}
}

16
_sass/bootstrap/mixins/_hover.scss Executable file → Normal file
View File

@ -1,28 +1,26 @@
// stylelint-disable indentation
// Hover mixin and `$enable-hover-media-query` are deprecated.
//
// Origally added during our alphas and maintained during betas, this mixin was
// designed to prevent `:hover` stickiness on iOS—an issue where hover styles
// 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 psuedo-classes instead of a shimmed media query.
// always return their regular pseudo-classes instead of a shimmed media query.
//
// Issue: https://github.com/twbs/bootstrap/issues/25195
@mixin hover {
@mixin hover() {
&:hover { @content; }
}
@mixin hover-focus {
@mixin hover-focus() {
&:hover,
&:focus {
@content;
}
}
@mixin plain-hover-focus {
@mixin plain-hover-focus() {
&,
&:hover,
&:focus {
@ -30,7 +28,7 @@
}
}
@mixin hover-focus-active {
@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {

6
_sass/bootstrap/mixins/_image.scss Executable file → Normal file
View File

@ -7,7 +7,7 @@
//
// Keep images from scaling beyond the width of their parents.
@mixin img-fluid {
@mixin img-fluid() {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
@ -20,7 +20,6 @@
//
// Short retina mixin for setting background-image and -size.
// stylelint-disable indentation, media-query-list-comma-newline-after
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url($file-1x);
@ -29,8 +28,9 @@
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
only screen and (min-resolution: 2dppx) { // Standardized
only screen and (min-resolution: 2dppx) { // Standardized
background-image: url($file-2x);
background-size: $width-1x $height-1x;
}
@include deprecate("`img-retina()`", "v4.3.0", "v5");
}

4
_sass/bootstrap/mixins/_list-group.scss Executable file → Normal file
View File

@ -6,13 +6,13 @@
background-color: $background;
&.list-group-item-action {
@include hover-focus {
@include hover-focus() {
color: $color;
background-color: darken($background, 5%);
}
&.active {
color: #fff;
color: $white;
background-color: $color;
border-color: $color;
}

2
_sass/bootstrap/mixins/_lists.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
@mixin list-unstyled() {
padding-left: 0;
list-style: none;
}

5
_sass/bootstrap/mixins/_nav-divider.scss Executable file → Normal file
View File

@ -2,9 +2,10 @@
//
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
height: 0;
margin: ($spacer / 2) 0;
margin: $margin-y 0;
overflow: hidden;
border-top: 1px solid $color;
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
}

10
_sass/bootstrap/mixins/_navbar-align.scss
View File

@ -1,10 +0,0 @@
// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
// to calculate the appropriate top margin.
// @mixin navbar-vertical-align($element-height) {
// margin-top: (($navbar-height - $element-height) / 2);
// margin-bottom: (($navbar-height - $element-height) / 2);
// }

2
_sass/bootstrap/mixins/_pagination.scss Executable file → Normal file
View File

@ -3,7 +3,7 @@
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
font-size: $font-size;
@include font-size($font-size);
line-height: $line-height;
}

4
_sass/bootstrap/mixins/_reset-text.scss Executable file → Normal file
View File

@ -1,11 +1,11 @@
@mixin reset-text {
@mixin reset-text() {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal;
font-weight: $font-weight-normal;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;

0
_sass/bootstrap/mixins/_resize.scss Executable file → Normal file
View File

9
_sass/bootstrap/mixins/_screen-reader.scss Executable file → Normal file
View File

@ -1,17 +1,17 @@
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only {
@mixin sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
}
@ -21,7 +21,7 @@
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
@mixin sr-only-focusable() {
&:active,
&:focus {
position: static;
@ -30,6 +30,5 @@
overflow: visible;
clip: auto;
white-space: normal;
clip-path: none;
}
}

1
_sass/bootstrap/mixins/_size.scss Executable file → Normal file
View File

@ -3,4 +3,5 @@
@mixin size($width, $height: $width) {
width: $width;
height: $height;
@include deprecate("`size()`", "v4.3.0", "v5");
}

13
_sass/bootstrap/mixins/_table-row.scss Executable file → Normal file
View File

@ -1,6 +1,6 @@
// Tables
@mixin table-row-variant($state, $background) {
@mixin table-row-variant($state, $background, $border: null) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-#{$state} {
@ -9,6 +9,15 @@
> td {
background-color: $background;
}
@if $border != null {
th,
td,
thead th,
tbody + tbody {
border-color: $border;
}
}
}
// Hover states for `.table-hover`
@ -17,7 +26,7 @@
$hover-background: darken($background, 5%);
.table-#{$state} {
@include hover {
@include hover() {
background-color: $hover-background;
> td,

11
_sass/bootstrap/mixins/_text-emphasis.scss Executable file → Normal file
View File

@ -2,13 +2,16 @@
// Typography
@mixin text-emphasis-variant($parent, $color) {
@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
color: $color !important;
}
a#{$parent} {
@include hover-focus {
color: darken($color, 10%) !important;
@if $emphasized-link-hover-darken-percentage != 0 {
a#{$parent} {
@include hover-focus() {
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
}
}
}
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
}

4
_sass/bootstrap/mixins/_text-hide.scss Executable file → Normal file
View File

@ -1,9 +1,11 @@
// CSS image replacement
@mixin text-hide() {
@mixin text-hide($ignore-warning: false) {
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
@include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
}

0
_sass/bootstrap/mixins/_text-truncate.scss Executable file → Normal file
View File

7
_sass/bootstrap/mixins/_transition.scss Executable file → Normal file
View File

@ -1,3 +1,4 @@
// stylelint-disable property-blacklist
@mixin transition($transition...) {
@if $enable-transitions {
@if length($transition) == 0 {
@ -6,4 +7,10 @@
transition: $transition;
}
}
@if $enable-prefers-reduced-motion-media-query {
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
}

1
_sass/bootstrap/mixins/_visibility.scss Executable file → Normal file
View File

@ -4,4 +4,5 @@
@mixin invisible($visibility) {
visibility: $visibility !important;
@include deprecate("`invisible()`", "v4.3.0", "v5");
}

0
_sass/bootstrap/utilities/_align.scss Executable file → Normal file
View File

2
_sass/bootstrap/utilities/_background.scss Executable file → Normal file
View File

@ -1,7 +1,7 @@
// stylelint-disable declaration-no-important
@each $color, $value in $theme-colors {
@include bg-variant(".bg-#{$color}", $value);
@include bg-variant(".bg-#{$color}", $value, true);
}
@if $enable-gradients {

18
_sass/bootstrap/utilities/_borders.scss Executable file → Normal file
View File

@ -1,4 +1,4 @@
// stylelint-disable declaration-no-important
// stylelint-disable property-blacklist, declaration-no-important
//
// Border
@ -30,30 +30,46 @@
// Border-radius
//
.rounded-sm {
border-radius: $border-radius-sm !important;
}
.rounded {
border-radius: $border-radius !important;
}
.rounded-top {
border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important;
}
.rounded-right {
border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important;
}
.rounded-bottom {
border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-left {
border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-lg {
border-radius: $border-radius-lg !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.rounded-pill {
border-radius: $rounded-pill !important;
}
.rounded-0 {
border-radius: 0 !important;
}

0
_sass/bootstrap/utilities/_clearfix.scss Executable file → Normal file
View File

24
_sass/bootstrap/utilities/_display.scss Executable file → Normal file
View File

@ -8,15 +8,9 @@
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.d#{$infix}-none { display: none !important; }
.d#{$infix}-inline { display: inline !important; }
.d#{$infix}-inline-block { display: inline-block !important; }
.d#{$infix}-block { display: block !important; }
.d#{$infix}-table { display: table !important; }
.d#{$infix}-table-row { display: table-row !important; }
.d#{$infix}-table-cell { display: table-cell !important; }
.d#{$infix}-flex { display: flex !important; }
.d#{$infix}-inline-flex { display: inline-flex !important; }
@each $value in $displays {
.d#{$infix}-#{$value} { display: $value !important; }
}
}
}
@ -26,13 +20,7 @@
//
@media print {
.d-print-none { display: none !important; }
.d-print-inline { display: inline !important; }
.d-print-inline-block { display: inline-block !important; }
.d-print-block { display: block !important; }
.d-print-table { display: table !important; }
.d-print-table-row { display: table-row !important; }
.d-print-table-cell { display: table-cell !important; }
.d-print-flex { display: flex !important; }
.d-print-inline-flex { display: inline-flex !important; }
@each $value in $displays {
.d-print-#{$value} { display: $value !important; }
}
}

27
_sass/bootstrap/utilities/_embed.scss Executable file → Normal file
View File

@ -27,26 +27,13 @@
}
}
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
}
}
@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
$embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
$embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
.embed-responsive-16by9 {
&::before {
padding-top: percentage(9 / 16);
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
}
}
.embed-responsive-1by1 {
&::before {
padding-top: percentage(1 / 1);
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
&::before {
padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
}
}
}

5
_sass/bootstrap/utilities/_flex.scss Executable file → Normal file
View File

@ -16,6 +16,11 @@
.flex#{$infix}-wrap { flex-wrap: wrap !important; }
.flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
.flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex#{$infix}-fill { flex: 1 1 auto !important; }
.flex#{$infix}-grow-0 { flex-grow: 0 !important; }
.flex#{$infix}-grow-1 { flex-grow: 1 !important; }
.flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
.flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
.justify-content#{$infix}-start { justify-content: flex-start !important; }
.justify-content#{$infix}-end { justify-content: flex-end !important; }

8
_sass/bootstrap/utilities/_float.scss Executable file → Normal file
View File

@ -1,9 +1,11 @@
// stylelint-disable declaration-no-important
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.float#{$infix}-left { @include float-left; }
.float#{$infix}-right { @include float-right; }
.float#{$infix}-none { @include float-none; }
.float#{$infix}-left { float: left !important; }
.float#{$infix}-right { float: right !important; }
.float#{$infix}-none { float: none !important; }
}
}

5
_sass/bootstrap/utilities/_overflow.scss Normal file
View File

@ -0,0 +1,5 @@
// stylelint-disable declaration-no-important
@each $value in $overflows {
.overflow-#{$value} { overflow: $value !important; }
}

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