修复选项不显示
@ -1,4 +1,7 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (不夜城考试)" project-jdk-type="Python SDK" />
|
<component name="Black">
|
||||||
|
<option name="sdkName" value="Python 3.12 (CyberExam)" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12 (CyberExam)" project-jdk-type="Python SDK" />
|
||||||
</project>
|
</project>
|
||||||
@ -15,16 +15,9 @@
|
|||||||
<component name="NewModuleRootManager">
|
<component name="NewModuleRootManager">
|
||||||
<content url="file://$MODULE_DIR$">
|
<content url="file://$MODULE_DIR$">
|
||||||
<excludeFolder url="file://$MODULE_DIR$/.venv" />
|
<excludeFolder url="file://$MODULE_DIR$/.venv" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.venv-linux" />
|
||||||
</content>
|
</content>
|
||||||
<orderEntry type="inheritedJdk" />
|
<orderEntry type="jdk" jdkName="Python 3.12 (CyberExam)" jdkType="Python SDK" />
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
</component>
|
</component>
|
||||||
<component name="TemplatesService">
|
|
||||||
<option name="TEMPLATE_CONFIGURATION" value="Django" />
|
|
||||||
<option name="TEMPLATE_FOLDERS">
|
|
||||||
<list>
|
|
||||||
<option value="$MODULE_DIR$/../不夜城考试\templates" />
|
|
||||||
</list>
|
|
||||||
</option>
|
|
||||||
</component>
|
|
||||||
</module>
|
</module>
|
||||||
BIN
db.sqlite3
@ -1,4 +1,4 @@
|
|||||||
# Generated by Django 5.0.7 on 2024-07-11 05:50
|
# Generated by Django 5.0.7 on 2024-07-12 10:42
|
||||||
|
|
||||||
import django.db.models.deletion
|
import django.db.models.deletion
|
||||||
import uuid
|
import uuid
|
||||||
|
|||||||
@ -2,11 +2,14 @@ from django.urls import path
|
|||||||
from . import views
|
from . import views
|
||||||
|
|
||||||
urlpatterns = (
|
urlpatterns = (
|
||||||
path("", views.home, name="index"),
|
path("", views.home, name="home"),
|
||||||
|
path("ablout", views.about, name="about"),
|
||||||
path("register/", views.register, name="register"),
|
path("register/", views.register, name="register"),
|
||||||
path("login/", views.login_view, name="login"),
|
path("login/", views.login_view, name="login"),
|
||||||
path("logout/", views.logout_view, name="logout"),
|
path("logout/", views.logout_view, name="logout"),
|
||||||
path("create/", views.create_question, name="create"),
|
path("create/", views.create_question, name="create"),
|
||||||
path("question/", views.get_question, name="get_question"),
|
path("question/", views.get_question, name="get_question"),
|
||||||
path("answer/", views.answer, name="answer")
|
path("answer/", views.answer, name="answer"),
|
||||||
|
path("history", views.history, name="history"),
|
||||||
|
path("history_detail", views.history_detail, name="history_detail"),
|
||||||
)
|
)
|
||||||
|
|||||||
116
exam/views.py
@ -1,24 +1,109 @@
|
|||||||
import uuid
|
import uuid
|
||||||
from django.core.files import File
|
from django.core.files import File
|
||||||
from django.http import JsonResponse, Http404
|
from django.http import JsonResponse, Http404, HttpResponse
|
||||||
from django.shortcuts import render, redirect
|
from django.shortcuts import render, redirect
|
||||||
|
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
|
||||||
from .form import RegisterForm, LoginForm, CreateForm, AnswerForm
|
from .form import RegisterForm, LoginForm, CreateForm, AnswerForm
|
||||||
from .models import CyberUser, Question, Choice
|
from .models import CyberUser, Question, Choice
|
||||||
from django.contrib.auth import authenticate, login, logout
|
from django.contrib.auth import authenticate, login, logout
|
||||||
from django.contrib.auth.decorators import login_required
|
from django.contrib.auth.decorators import login_required
|
||||||
|
from PIL import Image
|
||||||
|
from io import BytesIO
|
||||||
|
|
||||||
|
|
||||||
# Create your views here.
|
def compress_image(file_obj, max_size_bytes=1 * 1024 * 1024):
|
||||||
|
# 从文件对象读取数据并创建Image对象
|
||||||
|
img = Image.open(file_obj)
|
||||||
|
|
||||||
|
# 创建一个BytesIO对象来保存压缩后的WebP数据
|
||||||
|
output_buffer = BytesIO()
|
||||||
|
|
||||||
|
quality = 85
|
||||||
|
|
||||||
|
while True:
|
||||||
|
try:
|
||||||
|
img.save(output_buffer, 'webp', quality=quality)
|
||||||
|
except Exception as e:
|
||||||
|
print(f"Error saving image as WebP: {e}")
|
||||||
|
return None
|
||||||
|
|
||||||
|
output_buffer.seek(0)
|
||||||
|
new_size = len(output_buffer.read())
|
||||||
|
|
||||||
|
# 如果新的大小小于或等于5MB,则退出循环
|
||||||
|
if new_size <= max_size_bytes:
|
||||||
|
break
|
||||||
|
|
||||||
|
# 如果新的大小大于5MB,降低质量并重试
|
||||||
|
quality -= 5
|
||||||
|
if quality < 1:
|
||||||
|
print("Unable to compress the image to 5MB or less.")
|
||||||
|
return None
|
||||||
|
output_buffer.seek(0)
|
||||||
|
return output_buffer
|
||||||
|
|
||||||
|
|
||||||
def home(request):
|
def home(request):
|
||||||
content = {'user': request.user}
|
content = {'user': request.user}
|
||||||
return render(request, 'home.html', content)
|
return render(request, 'home.html', content)
|
||||||
|
|
||||||
|
|
||||||
|
def about(request):
|
||||||
|
return HttpResponse("尚未完成")
|
||||||
|
|
||||||
|
|
||||||
|
@login_required(login_url='/exam/login')
|
||||||
|
def history(request):
|
||||||
|
page_size = 10
|
||||||
|
user = request.user
|
||||||
|
questions = Question.objects.filter(choice__user=user)
|
||||||
|
paginator = Paginator(questions, page_size)
|
||||||
|
page = request.GET.get('page', 1)
|
||||||
|
try:
|
||||||
|
# 尝试获取当前页的记录
|
||||||
|
question = paginator.page(page)
|
||||||
|
except PageNotAnInteger:
|
||||||
|
question = paginator.page(1)
|
||||||
|
except EmptyPage:
|
||||||
|
question = paginator.page(paginator.num_pages)
|
||||||
|
context = {'questions': question, 'page': paginator.page(page), 'paginator': paginator}
|
||||||
|
return render(request, 'history.html', context)
|
||||||
|
|
||||||
|
|
||||||
|
@login_required(login_url='/exam/login')
|
||||||
|
def history_detail(request):
|
||||||
|
questionID = request.GET.get('question')
|
||||||
|
user = request.user
|
||||||
|
if questionID:
|
||||||
|
question = Question.objects.get(uid=questionID)
|
||||||
|
if question is None:
|
||||||
|
return Http404
|
||||||
|
choice = Choice.objects.get(question=question,user=user)
|
||||||
|
if choice is None:
|
||||||
|
return Http404
|
||||||
|
context = {
|
||||||
|
'question': question,
|
||||||
|
'choice': choice,
|
||||||
|
'user': user,
|
||||||
|
'forward_url': request.META.get('HTTP_REFERER', '/'),
|
||||||
|
}
|
||||||
|
return render(request, 'history_detail.html', context)
|
||||||
|
else:
|
||||||
|
return Http404
|
||||||
|
|
||||||
|
|
||||||
def register(request):
|
def register(request):
|
||||||
if request.method == 'GET':
|
if request.method == 'GET':
|
||||||
|
if request.user.is_active:
|
||||||
|
return redirect("/exam/")
|
||||||
return render(request, 'register.html', {'form': RegisterForm()})
|
return render(request, 'register.html', {'form': RegisterForm()})
|
||||||
elif request.method == 'POST':
|
elif request.method == 'POST':
|
||||||
|
if request.user.is_active:
|
||||||
|
return JsonResponse({
|
||||||
|
'code': 200,
|
||||||
|
'message': '已经登陆',
|
||||||
|
'data': 'failed',
|
||||||
|
})
|
||||||
form = RegisterForm(request.POST)
|
form = RegisterForm(request.POST)
|
||||||
if form.is_valid():
|
if form.is_valid():
|
||||||
username = form.cleaned_data['username']
|
username = form.cleaned_data['username']
|
||||||
@ -53,15 +138,26 @@ def register(request):
|
|||||||
return JsonResponse({"code": 400, "message": "验证失败", "data": {"username": form.errors.get("username"),
|
return JsonResponse({"code": 400, "message": "验证失败", "data": {"username": form.errors.get("username"),
|
||||||
"password1": form.errors.get("password1"),
|
"password1": form.errors.get("password1"),
|
||||||
"password2": form.errors.get("password2"),
|
"password2": form.errors.get("password2"),
|
||||||
"email": form.errors.get("email")}})
|
"email": form.errors.get("email"),
|
||||||
|
"nickname": form.errors.get("nickname")}})
|
||||||
else:
|
else:
|
||||||
raise Http404
|
raise Http404
|
||||||
|
|
||||||
|
|
||||||
def login_view(request):
|
def login_view(request):
|
||||||
if request.method == 'GET':
|
if request.method == 'GET':
|
||||||
|
if request.user.is_active:
|
||||||
|
return redirect("/exam/")
|
||||||
return render(request, 'login.html', {'form': LoginForm()})
|
return render(request, 'login.html', {'form': LoginForm()})
|
||||||
elif request.method == 'POST':
|
elif request.method == 'POST':
|
||||||
|
if request.user.is_active:
|
||||||
|
return JsonResponse(
|
||||||
|
{
|
||||||
|
'code': 200,
|
||||||
|
'message': '已经登陆',
|
||||||
|
'data': 'abort',
|
||||||
|
}
|
||||||
|
)
|
||||||
form = LoginForm(request.POST)
|
form = LoginForm(request.POST)
|
||||||
if form.is_valid():
|
if form.is_valid():
|
||||||
username = form.cleaned_data['username']
|
username = form.cleaned_data['username']
|
||||||
@ -111,7 +207,7 @@ def logout_view(request):
|
|||||||
return redirect('/exam/login')
|
return redirect('/exam/login')
|
||||||
|
|
||||||
|
|
||||||
@login_required
|
@login_required(login_url='/exam/login')
|
||||||
def create_question(request):
|
def create_question(request):
|
||||||
if request.method == 'GET':
|
if request.method == 'GET':
|
||||||
return render(request, 'create.html', {'form': CreateForm})
|
return render(request, 'create.html', {'form': CreateForm})
|
||||||
@ -134,7 +230,8 @@ def create_question(request):
|
|||||||
answer=answer,
|
answer=answer,
|
||||||
)
|
)
|
||||||
if image:
|
if image:
|
||||||
new_question.image = File(image, name=f'{str(uuid.uuid4())}.jpg')
|
image = compress_image(image)
|
||||||
|
new_question.image = File(image, name=f'{str(uuid.uuid4())}.webp')
|
||||||
new_question.save()
|
new_question.save()
|
||||||
return JsonResponse(
|
return JsonResponse(
|
||||||
{
|
{
|
||||||
@ -153,14 +250,14 @@ def create_question(request):
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
@login_required
|
@login_required(login_url='/exam/login')
|
||||||
def get_question(request):
|
def get_question(request):
|
||||||
user = request.user
|
user = request.user
|
||||||
question = Question.objects.exclude(choice__user=user).order_by('?').first()
|
question = Question.objects.exclude(choice__user=user).order_by('?').first()
|
||||||
return render(request, "question.html", {'question': question, 'form': AnswerForm, 'user': request.user})
|
return render(request, "question.html", {'question': question, 'form': AnswerForm, 'user': request.user})
|
||||||
|
|
||||||
|
|
||||||
@login_required
|
@login_required(login_url='/exam/login')
|
||||||
def answer(request):
|
def answer(request):
|
||||||
if request.method == 'POST':
|
if request.method == 'POST':
|
||||||
form = AnswerForm(request.POST)
|
form = AnswerForm(request.POST)
|
||||||
@ -186,7 +283,10 @@ def answer(request):
|
|||||||
{
|
{
|
||||||
'code': 200,
|
'code': 200,
|
||||||
'message': 'success',
|
'message': 'success',
|
||||||
'data': {'correction': user_ans == question.answer},
|
'data': {
|
||||||
|
'correction': user_ans == question.answer,
|
||||||
|
'answer': question.answer,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
else:
|
else:
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import sys
|
|||||||
|
|
||||||
def main():
|
def main():
|
||||||
"""Run administrative tasks."""
|
"""Run administrative tasks."""
|
||||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', '不夜城考试.settings')
|
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'CyberExam.settings')
|
||||||
try:
|
try:
|
||||||
from django.core.management import execute_from_command_line
|
from django.core.management import execute_from_command_line
|
||||||
except ImportError as exc:
|
except ImportError as exc:
|
||||||
|
|||||||
1
static/css/demo.css
Normal file
1
static/css/theme.css
Normal file
BIN
static/images/backgrounds/img-1.jpg
Normal file
|
After Width: | Height: | Size: 194 KiB |
BIN
static/images/backgrounds/img-1.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
static/images/backgrounds/img-2.jpg
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
static/images/backgrounds/img-3.jpg
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
static/images/brand/icon.png
Normal file
|
After Width: | Height: | Size: 99 KiB |
BIN
static/images/prv/city-1.jpg
Normal file
|
After Width: | Height: | Size: 117 KiB |
BIN
static/images/prv/city-2.jpg
Normal file
|
After Width: | Height: | Size: 188 KiB |
BIN
static/images/prv/client-1.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
static/images/prv/client-2.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
static/images/prv/client-3.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
static/images/prv/client-4.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
static/images/prv/client-5.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
static/images/prv/client-6.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
static/images/prv/device-1.png
Normal file
|
After Width: | Height: | Size: 337 KiB |
BIN
static/images/prv/img-1-1000x900.jpg
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
static/images/prv/img-1-800x600.jpg
Normal file
|
After Width: | Height: | Size: 96 KiB |
BIN
static/images/prv/img-1.jpg
Normal file
|
After Width: | Height: | Size: 230 KiB |
BIN
static/images/prv/img-2-1000x900.jpg
Normal file
|
After Width: | Height: | Size: 137 KiB |
BIN
static/images/prv/img-2-800x600.jpg
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
static/images/prv/img-2.jpg
Normal file
|
After Width: | Height: | Size: 288 KiB |
BIN
static/images/prv/img-3-800x600.jpg
Normal file
|
After Width: | Height: | Size: 103 KiB |
BIN
static/images/prv/img-3.jpg
Normal file
|
After Width: | Height: | Size: 204 KiB |
BIN
static/images/prv/img-4-800x600.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
static/images/prv/img-4.jpg
Normal file
|
After Width: | Height: | Size: 150 KiB |
BIN
static/images/prv/img-5-800x600.jpg
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
static/images/prv/img-5.jpg
Normal file
|
After Width: | Height: | Size: 289 KiB |
BIN
static/images/prv/screen-about.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
static/images/prv/screen-contact.jpg
Normal file
|
After Width: | Height: | Size: 89 KiB |
BIN
static/images/prv/screen-cover.jpg
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
static/images/prv/screen-homepage.jpg
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
static/images/prv/screen-login.jpg
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
static/images/prv/splash.png
Normal file
|
After Width: | Height: | Size: 800 KiB |
BIN
static/images/prv/team-1.jpg
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
static/images/prv/team-2.jpg
Normal file
|
After Width: | Height: | Size: 107 KiB |
BIN
static/images/prv/team-3.jpg
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
static/images/prv/team-4.jpg
Normal file
|
After Width: | Height: | Size: 162 KiB |
BIN
static/images/prv/thumb-1.jpg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
static/images/prv/thumb-2.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
static/images/slider/iphone.png
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
6328
static/js/bootstrap/bootstrap.bundle.js
vendored
Normal file
1
static/js/bootstrap/bootstrap.bundle.js.map
Normal file
7
static/js/bootstrap/bootstrap.bundle.min.js
vendored
Normal file
1
static/js/bootstrap/bootstrap.bundle.min.js.map
Normal file
3894
static/js/bootstrap/bootstrap.js
vendored
Normal file
1
static/js/bootstrap/bootstrap.js.map
Normal file
7
static/js/bootstrap/bootstrap.min.js
vendored
Normal file
1
static/js/bootstrap/bootstrap.min.js.map
Normal file
31
static/js/demo.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// Plugins init
|
||||||
|
$(".highlight")[0] && hljs.initHighlightingOnLoad();
|
||||||
|
|
||||||
|
// Copy code blocks to clipboard
|
||||||
|
$("figure.highlight, div.highlight").each(function() {
|
||||||
|
var t = '<div class="code-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>';
|
||||||
|
$(this).before(t);
|
||||||
|
$(".btn-clipboard").tooltip().on("mouseleave", function() {
|
||||||
|
$(this).tooltip("hide")
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var t = new Clipboard(".btn-clipboard", {
|
||||||
|
target: function(e) {
|
||||||
|
return e.parentNode.nextElementSibling
|
||||||
|
}
|
||||||
|
});
|
||||||
|
t.on("success", function(t) {
|
||||||
|
e(t.trigger).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
|
||||||
|
t.clearSelection()
|
||||||
|
});
|
||||||
|
t.on("error", function(t) {
|
||||||
|
var n = /Mac/i.test(navigator.userAgent) ? "⌘" : "Ctrl-";
|
||||||
|
var r = "Press " + n + "C to copy";
|
||||||
|
e(t.trigger).attr("title", r).tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle")
|
||||||
|
});
|
||||||
|
});
|
||||||
198
static/js/theme.js
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
$(window).on("load", function() {
|
||||||
|
|
||||||
|
}),
|
||||||
|
|
||||||
|
$(window).on('load resize', function() {
|
||||||
|
|
||||||
|
// Background image holder - Static hero with fullscreen autosize
|
||||||
|
if ($('.spotlight').length) {
|
||||||
|
$('.spotlight').each(function() {
|
||||||
|
|
||||||
|
var $this = $(this);
|
||||||
|
var holderHeight;
|
||||||
|
|
||||||
|
if ($this.data('spotlight') == 'fullscreen') {
|
||||||
|
if ($this.data('spotlight-offset')) {
|
||||||
|
var offsetHeight = $('body').find($this.data('spotlight-offset')).height();
|
||||||
|
holderHeight = $(window).height() - offsetHeight;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
holderHeight = $(window).height();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if ($(window).width() > 991) {
|
||||||
|
$this.find('.spotlight-holder').css({
|
||||||
|
'height': holderHeight + 'px'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$this.find('.spotlight-holder').css({
|
||||||
|
'height': 'auto'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// Plugins init
|
||||||
|
$(".scrollbar-inner")[0] && $(".scrollbar-inner").scrollbar().scrollLock();
|
||||||
|
$('[data-stick-in-parent="true"]')[0] && $('[data-stick-in-parent="true"]').stick_in_parent();
|
||||||
|
$('.selectpicker')[0] && $('.selectpicker').selectpicker();
|
||||||
|
$('.textarea-autosize')[0] && autosize($('.textarea-autosize'));
|
||||||
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
$('[data-toggle="popover"]').each(function() {
|
||||||
|
var popoverClass = '';
|
||||||
|
if($(this).data('color')) {
|
||||||
|
popoverClass = 'popover-'+$(this).data('color');
|
||||||
|
}
|
||||||
|
$(this).popover({
|
||||||
|
trigger: 'focus',
|
||||||
|
template: '<div class="popover '+ popoverClass +'" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Floating label
|
||||||
|
$('.form-control').on('focus blur', function(e) {
|
||||||
|
$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
|
||||||
|
}).trigger('blur');
|
||||||
|
|
||||||
|
|
||||||
|
// Custom input file
|
||||||
|
$('.custom-input-file').each(function() {
|
||||||
|
var $input = $(this),
|
||||||
|
$label = $input.next('label'),
|
||||||
|
labelVal = $label.html();
|
||||||
|
|
||||||
|
$input.on('change', function(e) {
|
||||||
|
var fileName = '';
|
||||||
|
|
||||||
|
if (this.files && this.files.length > 1)
|
||||||
|
fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
|
||||||
|
else if (e.target.value)
|
||||||
|
fileName = e.target.value.split('\\').pop();
|
||||||
|
|
||||||
|
if (fileName)
|
||||||
|
$label.find('span').html(fileName);
|
||||||
|
else
|
||||||
|
$label.html(labelVal);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Firefox bug fix
|
||||||
|
$input.on('focus', function() {
|
||||||
|
$input.addClass('has-focus');
|
||||||
|
})
|
||||||
|
.on('blur', function() {
|
||||||
|
$input.removeClass('has-focus');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// NoUI Slider
|
||||||
|
if ($(".input-slider-container")[0]) {
|
||||||
|
$('.input-slider-container').each(function() {
|
||||||
|
|
||||||
|
var slider = $(this).find('.input-slider');
|
||||||
|
var sliderId = slider.attr('id');
|
||||||
|
var minValue = slider.data('range-value-min');
|
||||||
|
var maxValue = slider.data('range-value-max');
|
||||||
|
|
||||||
|
var sliderValue = $(this).find('.range-slider-value');
|
||||||
|
var sliderValueId = sliderValue.attr('id');
|
||||||
|
var startValue = sliderValue.data('range-value-low');
|
||||||
|
|
||||||
|
var c = document.getElementById(sliderId),
|
||||||
|
d = document.getElementById(sliderValueId);
|
||||||
|
|
||||||
|
noUiSlider.create(c, {
|
||||||
|
start: [parseInt(startValue)],
|
||||||
|
connect: [true, false],
|
||||||
|
//step: 1000,
|
||||||
|
range: {
|
||||||
|
'min': [parseInt(minValue)],
|
||||||
|
'max': [parseInt(maxValue)]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
c.noUiSlider.on('update', function(a, b) {
|
||||||
|
d.textContent = a[b];
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($("#input-slider-range")[0]) {
|
||||||
|
var c = document.getElementById("input-slider-range"),
|
||||||
|
d = document.getElementById("input-slider-range-value-low"),
|
||||||
|
e = document.getElementById("input-slider-range-value-high"),
|
||||||
|
f = [d, e];
|
||||||
|
|
||||||
|
noUiSlider.create(c, {
|
||||||
|
start: [parseInt(d.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
|
||||||
|
connect: !0,
|
||||||
|
range: {
|
||||||
|
min: parseInt(c.getAttribute('data-range-value-min')),
|
||||||
|
max: parseInt(c.getAttribute('data-range-value-max'))
|
||||||
|
}
|
||||||
|
}), c.noUiSlider.on("update", function(a, b) {
|
||||||
|
f[b].textContent = a[b]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll to anchor with animation
|
||||||
|
$('.scroll-me, .toc-entry a').on('click', function(event) {
|
||||||
|
var hash = $(this).attr('href');
|
||||||
|
var offset = $(this).data('scroll-to-offset') ? $(this).data('scroll-to-offset') : 0;
|
||||||
|
|
||||||
|
// Animate scroll to the selected section
|
||||||
|
$('html, body').stop(true, true).animate({
|
||||||
|
scrollTop: $(hash).offset().top - offset
|
||||||
|
}, 600);
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
}),
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("body").on("click", "[data-action]", function(e) {
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var $this = $(this);
|
||||||
|
var action = $this.data('action');
|
||||||
|
var target = '';
|
||||||
|
|
||||||
|
switch (action) {
|
||||||
|
case "offcanvas-open":
|
||||||
|
target = $this.data("target"), $(target).addClass("open"), $("body").append('<div class="body-backdrop" data-action="offcanvas-close" data-target=' + target + " />");
|
||||||
|
break;
|
||||||
|
case "offcanvas-close":
|
||||||
|
target = $this.data("target"), $(target).removeClass("open"), $("body").find(".body-backdrop").remove();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'aside-open':
|
||||||
|
target = $this.data('target');
|
||||||
|
$this.data('action', 'aside-close');
|
||||||
|
$this.addClass('toggled');
|
||||||
|
$(target).addClass('toggled');
|
||||||
|
$('.content').append('<div class="body-backdrop" data-action="aside-close" data-target='+target+' />');
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
case 'aside-close':
|
||||||
|
target = $this.data('target');
|
||||||
|
$this.data('action', 'aside-open');
|
||||||
|
$('[data-action="aside-open"], '+target).removeClass('toggled');
|
||||||
|
$('.content, .header').find('.body-backdrop').remove();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
24
static/js/vendor/ie10-viewport-bug-workaround.js
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
/*!
|
||||||
|
* IE10 viewport hack for Surface/desktop Windows 8 bug
|
||||||
|
* Copyright 2014-2017 The Bootstrap Authors
|
||||||
|
* Copyright 2014-2017 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// See the Getting Started docs for more information:
|
||||||
|
// https://getbootstrap.com/getting-started/#support-ie10-width
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||||
|
var msViewportStyle = document.createElement('style')
|
||||||
|
msViewportStyle.appendChild(
|
||||||
|
document.createTextNode(
|
||||||
|
'@-ms-viewport{width:auto!important}'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
document.head.appendChild(msViewportStyle)
|
||||||
|
}
|
||||||
|
|
||||||
|
}())
|
||||||
44
static/js/vendor/jquery.easing.js
vendored
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
/*
|
||||||
|
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||||
|
*
|
||||||
|
* Uses the built in easing capabilities added In jQuery 1.1
|
||||||
|
* to offer multiple easing options
|
||||||
|
*
|
||||||
|
* TERMS OF USE - EASING EQUATIONS
|
||||||
|
*
|
||||||
|
* Open source under the BSD License.
|
||||||
|
*
|
||||||
|
* Copyright © 2001 Robert Penner
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* TERMS OF USE - jQuery Easing
|
||||||
|
*
|
||||||
|
* Open source under the BSD License.
|
||||||
|
*
|
||||||
|
* Copyright © 2008 George McGinley Smith
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without modification,
|
||||||
|
* are permitted provided that the following conditions are met:
|
||||||
|
*
|
||||||
|
* Redistributions of source code must retain the above copyright notice, this list of
|
||||||
|
* conditions and the following disclaimer.
|
||||||
|
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||||
|
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||||
|
* provided with the distribution.
|
||||||
|
*
|
||||||
|
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||||
|
* or promote products derived from this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||||
|
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||||
|
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||||
|
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||||
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||||
|
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||||
|
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||||
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||||
|
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
|
||||||
165
static/js/vendor/js-cookie.js
vendored
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
/*!
|
||||||
|
* JavaScript Cookie v2.1.4
|
||||||
|
* https://github.com/js-cookie/js-cookie
|
||||||
|
*
|
||||||
|
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
||||||
|
* Released under the MIT license
|
||||||
|
*/
|
||||||
|
;(function (factory) {
|
||||||
|
var registeredInModuleLoader = false;
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define(factory);
|
||||||
|
registeredInModuleLoader = true;
|
||||||
|
}
|
||||||
|
if (typeof exports === 'object') {
|
||||||
|
module.exports = factory();
|
||||||
|
registeredInModuleLoader = true;
|
||||||
|
}
|
||||||
|
if (!registeredInModuleLoader) {
|
||||||
|
var OldCookies = window.Cookies;
|
||||||
|
var api = window.Cookies = factory();
|
||||||
|
api.noConflict = function () {
|
||||||
|
window.Cookies = OldCookies;
|
||||||
|
return api;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}(function () {
|
||||||
|
function extend () {
|
||||||
|
var i = 0;
|
||||||
|
var result = {};
|
||||||
|
for (; i < arguments.length; i++) {
|
||||||
|
var attributes = arguments[ i ];
|
||||||
|
for (var key in attributes) {
|
||||||
|
result[key] = attributes[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init (converter) {
|
||||||
|
function api (key, value, attributes) {
|
||||||
|
var result;
|
||||||
|
if (typeof document === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write
|
||||||
|
|
||||||
|
if (arguments.length > 1) {
|
||||||
|
attributes = extend({
|
||||||
|
path: '/'
|
||||||
|
}, api.defaults, attributes);
|
||||||
|
|
||||||
|
if (typeof attributes.expires === 'number') {
|
||||||
|
var expires = new Date();
|
||||||
|
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
|
||||||
|
attributes.expires = expires;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We're using "expires" because "max-age" is not supported by IE
|
||||||
|
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
result = JSON.stringify(value);
|
||||||
|
if (/^[\{\[]/.test(result)) {
|
||||||
|
value = result;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
if (!converter.write) {
|
||||||
|
value = encodeURIComponent(String(value))
|
||||||
|
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
||||||
|
} else {
|
||||||
|
value = converter.write(value, key);
|
||||||
|
}
|
||||||
|
|
||||||
|
key = encodeURIComponent(String(key));
|
||||||
|
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
|
||||||
|
key = key.replace(/[\(\)]/g, escape);
|
||||||
|
|
||||||
|
var stringifiedAttributes = '';
|
||||||
|
|
||||||
|
for (var attributeName in attributes) {
|
||||||
|
if (!attributes[attributeName]) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
stringifiedAttributes += '; ' + attributeName;
|
||||||
|
if (attributes[attributeName] === true) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
stringifiedAttributes += '=' + attributes[attributeName];
|
||||||
|
}
|
||||||
|
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read
|
||||||
|
|
||||||
|
if (!key) {
|
||||||
|
result = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
// To prevent the for loop in the first place assign an empty array
|
||||||
|
// in case there are no cookies at all. Also prevents odd result when
|
||||||
|
// calling "get()"
|
||||||
|
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||||
|
var rdecode = /(%[0-9A-Z]{2})+/g;
|
||||||
|
var i = 0;
|
||||||
|
|
||||||
|
for (; i < cookies.length; i++) {
|
||||||
|
var parts = cookies[i].split('=');
|
||||||
|
var cookie = parts.slice(1).join('=');
|
||||||
|
|
||||||
|
if (cookie.charAt(0) === '"') {
|
||||||
|
cookie = cookie.slice(1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
var name = parts[0].replace(rdecode, decodeURIComponent);
|
||||||
|
cookie = converter.read ?
|
||||||
|
converter.read(cookie, name) : converter(cookie, name) ||
|
||||||
|
cookie.replace(rdecode, decodeURIComponent);
|
||||||
|
|
||||||
|
if (this.json) {
|
||||||
|
try {
|
||||||
|
cookie = JSON.parse(cookie);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === name) {
|
||||||
|
result = cookie;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!key) {
|
||||||
|
result[name] = cookie;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
api.set = api;
|
||||||
|
api.get = function (key) {
|
||||||
|
return api.call(api, key);
|
||||||
|
};
|
||||||
|
api.getJSON = function () {
|
||||||
|
return api.apply({
|
||||||
|
json: true
|
||||||
|
}, [].slice.call(arguments));
|
||||||
|
};
|
||||||
|
api.defaults = {};
|
||||||
|
|
||||||
|
api.remove = function (key, attributes) {
|
||||||
|
api(key, '', extend(attributes, {
|
||||||
|
expires: -1
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
api.withConverter = init;
|
||||||
|
|
||||||
|
return api;
|
||||||
|
}
|
||||||
|
|
||||||
|
return init(function () {});
|
||||||
|
}));
|
||||||
33
static/scss/_components.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
// Theme components
|
||||||
|
@import "components/_alerts.scss";
|
||||||
|
@import "components/_avatars.scss";
|
||||||
|
@import "components/_badge.scss";
|
||||||
|
@import "components/_buttons.scss";
|
||||||
|
@import "components/_card.scss";
|
||||||
|
@import "components/_close.scss";
|
||||||
|
@import "components/_custom-forms.scss";
|
||||||
|
@import "components/_delimiters.scss";
|
||||||
|
@import "components/_dropdown.scss";
|
||||||
|
@import "components/_footer.scss";
|
||||||
|
@import "components/_forms.scss";
|
||||||
|
@import "components/_icons.scss";
|
||||||
|
@import "components/_input-group.scss";
|
||||||
|
@import "components/_list-group.scss";
|
||||||
|
@import "components/_masks.scss";
|
||||||
|
@import "components/_modal.scss";
|
||||||
|
@import "components/_nav.scss";
|
||||||
|
@import "components/_navbar.scss";
|
||||||
|
@import "components/_pagination.scss";
|
||||||
|
@import "components/_popover.scss";
|
||||||
|
@import "components/_progress.scss";
|
||||||
|
@import "components/_section.scss";
|
||||||
|
@import "components/_sidebar.scss";
|
||||||
|
@import "components/_spotlight.scss";
|
||||||
|
@import "components/_tables.scss";
|
||||||
|
@import "components/_tooltip.scss";
|
||||||
|
@import "components/_type.scss";
|
||||||
|
|
||||||
|
// Vendor
|
||||||
|
@import "components/vendor/_bootstrap-select.scss";
|
||||||
|
@import "components/vendor/_bootstrap-tagsinput.scss";
|
||||||
|
@import "components/vendor/_nouislider.scss";
|
||||||
8
static/scss/_custom-variables.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Copy and paste the variables that you want to modify from _variables.scss. The default ones will be overridden.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
//$body-bg: #fff;
|
||||||
5
static/scss/_custom.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Add your custom styles below
|
||||||
|
|
||||||
|
*/
|
||||||
10
static/scss/_global.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// Backdrop
|
||||||
|
.body-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1040; // navbar fixed has a z-index of 1030
|
||||||
|
}
|
||||||
22
static/scss/_reboot.scss
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
@at-root {
|
||||||
|
@-ms-viewport{
|
||||||
|
width: device-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
color: $body-color;
|
||||||
|
background-color: $body-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
5
static/scss/_utilities.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@import "utilities/_backgrounds.scss";
|
||||||
|
@import "utilities/_helper.scss";
|
||||||
|
@import "utilities/_position.scss";
|
||||||
|
@import "utilities/_spacing.scss";
|
||||||
|
@import "utilities/_text.scss";
|
||||||
657
static/scss/_variables.scss
Normal file
@ -0,0 +1,657 @@
|
|||||||
|
// Global settings
|
||||||
|
|
||||||
|
$enable-caret: true;
|
||||||
|
$enable-rounded: true;
|
||||||
|
$enable-shadows: true;
|
||||||
|
$enable-gradients: true;
|
||||||
|
$enable-transitions: true;
|
||||||
|
$enable-grid-classes: true;
|
||||||
|
$enable-print-styles: true;
|
||||||
|
|
||||||
|
|
||||||
|
// Color system
|
||||||
|
|
||||||
|
$white: #fff;
|
||||||
|
$gray-100: #f8f9fa;
|
||||||
|
$gray-200: #e9ecef;
|
||||||
|
$gray-300: #dee2e6;
|
||||||
|
$gray-400: #ced4da;
|
||||||
|
$gray-500: #adb5bd;
|
||||||
|
$gray-600: #6c757d;
|
||||||
|
$gray-700: #495057;
|
||||||
|
$gray-800: #343a40;
|
||||||
|
$gray-900: #212529;
|
||||||
|
$black: #000;
|
||||||
|
|
||||||
|
$grays: ();
|
||||||
|
$grays: map-merge((
|
||||||
|
"100": $gray-100,
|
||||||
|
"200": $gray-200,
|
||||||
|
"300": $gray-300,
|
||||||
|
"400": $gray-400,
|
||||||
|
"500": $gray-500,
|
||||||
|
"600": $gray-600,
|
||||||
|
"700": $gray-700,
|
||||||
|
"800": $gray-800,
|
||||||
|
"900": $gray-900
|
||||||
|
), $grays);
|
||||||
|
|
||||||
|
$blue: #3369d6;
|
||||||
|
$indigo: #5603ad;
|
||||||
|
$purple: #801096;
|
||||||
|
$pink: #e36397;
|
||||||
|
$red: #ff0033;
|
||||||
|
$orange: #ff3b00;
|
||||||
|
$yellow: #ffd600;
|
||||||
|
$green: #00c759;
|
||||||
|
$teal: #73e9ef;
|
||||||
|
$cyan: #2bffc6;
|
||||||
|
|
||||||
|
$colors: ();
|
||||||
|
$colors: map-merge((
|
||||||
|
"blue": $blue,
|
||||||
|
"indigo": $indigo,
|
||||||
|
"purple": $purple,
|
||||||
|
"pink": $pink,
|
||||||
|
"red": $red,
|
||||||
|
"orange": $orange,
|
||||||
|
"yellow": $yellow,
|
||||||
|
"green": $green,
|
||||||
|
"teal": $teal,
|
||||||
|
"cyan": $cyan,
|
||||||
|
"white": $white,
|
||||||
|
"gray": $gray-600,
|
||||||
|
"light": $gray-400,
|
||||||
|
"lighter": $gray-200,
|
||||||
|
"gray-dark": $gray-800
|
||||||
|
), $colors);
|
||||||
|
|
||||||
|
$primary: #288cff;
|
||||||
|
$secondary: #e8f2ff;
|
||||||
|
$tertiary: #192b3f;
|
||||||
|
$success: $green;
|
||||||
|
$info: $teal;
|
||||||
|
$warning: $orange;
|
||||||
|
$danger: $red;
|
||||||
|
$light: $gray-500;
|
||||||
|
$dark: $gray-800;
|
||||||
|
|
||||||
|
$facebook: #3b5999;
|
||||||
|
$twitter: #1da1f2;
|
||||||
|
$google-plus: #dd4b39;
|
||||||
|
$instagram: #e4405f;
|
||||||
|
$pinterest: #bd081c;
|
||||||
|
$youtube: #cd201f;
|
||||||
|
$slack: #3aaf85;
|
||||||
|
$dribbble: #ea4c89;
|
||||||
|
|
||||||
|
|
||||||
|
$theme-colors: ();
|
||||||
|
$theme-colors: map-merge((
|
||||||
|
"primary": $primary,
|
||||||
|
"secondary": $secondary,
|
||||||
|
"tertiary": $tertiary,
|
||||||
|
"success": $success,
|
||||||
|
"info": $info,
|
||||||
|
"warning": $warning,
|
||||||
|
"danger": $danger,
|
||||||
|
"light": $light,
|
||||||
|
"dark": $dark
|
||||||
|
), $theme-colors);
|
||||||
|
|
||||||
|
$brand-colors: ();
|
||||||
|
$brand-colors: map-merge((
|
||||||
|
"facebook": $facebook,
|
||||||
|
"twitter": $twitter,
|
||||||
|
"google-plus": $google-plus,
|
||||||
|
"instagram": $instagram,
|
||||||
|
"pinterest": $pinterest,
|
||||||
|
"youtube": $youtube,
|
||||||
|
"slack": $slack,
|
||||||
|
"dribbble": $dribbble
|
||||||
|
), $theme-colors);
|
||||||
|
|
||||||
|
|
||||||
|
// Action colors
|
||||||
|
|
||||||
|
$favorite-color: $yellow;
|
||||||
|
$like-color: $blue;
|
||||||
|
$love-color: $red;
|
||||||
|
|
||||||
|
|
||||||
|
// Body
|
||||||
|
|
||||||
|
$body-bg: $white;
|
||||||
|
$body-color: $gray-700;
|
||||||
|
|
||||||
|
|
||||||
|
// Links
|
||||||
|
|
||||||
|
$link-color: $primary;
|
||||||
|
$link-decoration: none;
|
||||||
|
$link-hover-color: darken($link-color, 15%);
|
||||||
|
$link-hover-decoration: unone;
|
||||||
|
|
||||||
|
|
||||||
|
// Spacing
|
||||||
|
|
||||||
|
$spacer: 1rem;
|
||||||
|
$spacers: ();
|
||||||
|
$spacers: map-merge((
|
||||||
|
0: 0,
|
||||||
|
1: ($spacer * .25),
|
||||||
|
2: ($spacer * .5),
|
||||||
|
3: $spacer,
|
||||||
|
4: ($spacer * 1.5),
|
||||||
|
5: ($spacer * 3),
|
||||||
|
'sm': ($spacer * 2),
|
||||||
|
'md': ($spacer * 4),
|
||||||
|
'lg': ($spacer * 6),
|
||||||
|
'xl': ($spacer * 8)
|
||||||
|
), $spacers);
|
||||||
|
|
||||||
|
// This variable affects the `.h-*` and `.w-*` classes.
|
||||||
|
$sizes: ();
|
||||||
|
$sizes: map-merge((
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%
|
||||||
|
), $sizes);
|
||||||
|
|
||||||
|
// Components
|
||||||
|
|
||||||
|
$line-height-xl: 1.5;
|
||||||
|
$line-height-lg: 1.5;
|
||||||
|
$line-height-sm: 1.5;
|
||||||
|
|
||||||
|
$border-width: .0625rem;
|
||||||
|
$border-color: $gray-200;
|
||||||
|
|
||||||
|
$border-radius: .375rem;
|
||||||
|
$border-radius-xl: .375rem;
|
||||||
|
$border-radius-lg: .375rem;
|
||||||
|
$border-radius-sm: .25rem;
|
||||||
|
|
||||||
|
$component-active-color: $white;
|
||||||
|
$component-active-bg: $primary;
|
||||||
|
$component-active-border-color: $primary;
|
||||||
|
|
||||||
|
$component-hover-color: $gray-300;
|
||||||
|
$component-hover-bg: $gray-300;
|
||||||
|
$component-hover-border-color: $gray-300;
|
||||||
|
|
||||||
|
$caret-width: .3em;
|
||||||
|
|
||||||
|
$transition-base: all .2s ease-in-out;
|
||||||
|
$transition-fade: opacity .15s linear;
|
||||||
|
$transition-collapse: height .35s ease;
|
||||||
|
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
|
||||||
|
$font-family-base: 'Nunito', sans-serif;
|
||||||
|
$font-family-alt: 'Nunito', sans-serif;
|
||||||
|
|
||||||
|
$font-size-base: .875rem; // Assumes the browser default, typically `16px`
|
||||||
|
$font-size-xl: ($font-size-base * 1.5);
|
||||||
|
$font-size-lg: ($font-size-base * 1.25);
|
||||||
|
$font-size-sm: ($font-size-base * .875);
|
||||||
|
$font-size-xs: ($font-size-base * .75);
|
||||||
|
|
||||||
|
$font-weight-light: 300;
|
||||||
|
$font-weight-normal: 400;
|
||||||
|
$font-weight-bold: 600;
|
||||||
|
|
||||||
|
$font-weight-base: $font-weight-normal;
|
||||||
|
$line-height-base: 1.6;
|
||||||
|
|
||||||
|
$h1-font-size: $font-size-base * 2.5;
|
||||||
|
$h2-font-size: $font-size-base * 2;
|
||||||
|
$h3-font-size: $font-size-base * 1.75;
|
||||||
|
$h4-font-size: $font-size-base * 1.5;
|
||||||
|
$h5-font-size: $font-size-base * 1.25;
|
||||||
|
$h6-font-size: $font-size-base;
|
||||||
|
|
||||||
|
$headings-margin-bottom: ($spacer / 2);
|
||||||
|
$headings-font-family: inherit;
|
||||||
|
$headings-font-weight: 500;
|
||||||
|
$headings-line-height: 1.2;
|
||||||
|
$headings-color: inherit;
|
||||||
|
|
||||||
|
$headings-margin-bottom: ($spacer / 2);
|
||||||
|
$headings-font-family: inherit;
|
||||||
|
$headings-font-weight: 600;
|
||||||
|
$headings-line-height: 1.3;
|
||||||
|
$headings-color: $gray-800;
|
||||||
|
|
||||||
|
$display1-size: 6rem;
|
||||||
|
$display2-size: 5.5rem;
|
||||||
|
$display3-size: 4.5rem;
|
||||||
|
$display4-size: 3.5rem;
|
||||||
|
|
||||||
|
$display1-weight: 300;
|
||||||
|
$display2-weight: 300;
|
||||||
|
$display3-weight: 300;
|
||||||
|
$display4-weight: 300;
|
||||||
|
$display-line-height: $headings-line-height;
|
||||||
|
|
||||||
|
$lead-font-size: ($font-size-base * 1.25);
|
||||||
|
$lead-font-weight: 300;
|
||||||
|
|
||||||
|
$small-font-size: 80%;
|
||||||
|
|
||||||
|
$text-muted: $gray-500;
|
||||||
|
|
||||||
|
$blockquote-small-color: $gray-600;
|
||||||
|
$blockquote-font-size: ($font-size-base * 1.25);
|
||||||
|
|
||||||
|
$hr-border-color: rgba($black, .1);
|
||||||
|
$hr-border-width: $border-width;
|
||||||
|
|
||||||
|
$mark-padding: .2em;
|
||||||
|
|
||||||
|
$dt-font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
$list-inline-padding: .5rem;
|
||||||
|
|
||||||
|
$mark-bg: #fcf8e3;
|
||||||
|
|
||||||
|
$hr-margin-y: $spacer;
|
||||||
|
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
|
||||||
|
$icon-size: 3rem;
|
||||||
|
$icon-size-xl: 5rem;
|
||||||
|
$icon-size-lg: 4rem;
|
||||||
|
$icon-size-sm: 2rem;
|
||||||
|
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
|
||||||
|
$table-cell-padding: .75rem;
|
||||||
|
$table-cell-padding-sm: .3rem;
|
||||||
|
|
||||||
|
$table-bg: transparent;
|
||||||
|
$table-accent-bg: rgba($black, .05);
|
||||||
|
$table-hover-bg: rgba($black, .075);
|
||||||
|
$table-active-bg: $table-hover-bg;
|
||||||
|
|
||||||
|
$table-border-width: $border-width;
|
||||||
|
$table-border-color: $gray-300;
|
||||||
|
|
||||||
|
$table-head-bg: $gray-200;
|
||||||
|
$table-head-color: $gray-700;
|
||||||
|
|
||||||
|
$table-dark-bg: $gray-900;
|
||||||
|
$table-dark-accent-bg: rgba($white, .05);
|
||||||
|
$table-dark-hover-bg: rgba($white, .075);
|
||||||
|
$table-dark-border-color: lighten($gray-900, 7.5%);
|
||||||
|
$table-dark-color: $body-bg;
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons + Forms
|
||||||
|
|
||||||
|
$input-btn-padding-y: .75rem;
|
||||||
|
$input-btn-padding-x: 1rem;
|
||||||
|
$input-btn-line-height: $line-height-base;
|
||||||
|
|
||||||
|
$input-btn-focus-width: 0;
|
||||||
|
$input-btn-focus-color: rgba($component-active-bg, 1);
|
||||||
|
$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
|
||||||
|
//$input-btn-focus-box-shadow: none;
|
||||||
|
|
||||||
|
$input-btn-padding-y-sm: .55rem;
|
||||||
|
$input-btn-padding-x-sm: 1rem;
|
||||||
|
$input-btn-line-height-sm: $line-height-sm;
|
||||||
|
|
||||||
|
$input-btn-padding-y-lg: .95rem;
|
||||||
|
$input-btn-padding-x-lg: 1rem;
|
||||||
|
$input-btn-line-height-lg: $line-height-lg;
|
||||||
|
|
||||||
|
$input-btn-padding-y-xl: 1.15rem;
|
||||||
|
$input-btn-padding-x-xl: 1rem;
|
||||||
|
$input-btn-line-height-xl: $line-height-xl;
|
||||||
|
|
||||||
|
$input-btn-border-width: $border-width;
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
|
||||||
|
$btn-padding-y: $input-btn-padding-y;
|
||||||
|
$btn-padding-x: $input-btn-padding-x + 0.5;
|
||||||
|
$btn-line-height: $input-btn-line-height;
|
||||||
|
|
||||||
|
$btn-padding-y-sm: $input-btn-padding-y-sm;
|
||||||
|
$btn-padding-x-sm: $input-btn-padding-x-sm;
|
||||||
|
$btn-line-height-sm: $input-btn-line-height-sm;
|
||||||
|
|
||||||
|
$btn-padding-y-lg: $input-btn-padding-y-lg;
|
||||||
|
$btn-padding-x-lg: $input-btn-padding-x-lg;
|
||||||
|
$btn-line-height-lg: $input-btn-line-height-lg;
|
||||||
|
|
||||||
|
$btn-padding-y-xl: $input-btn-padding-y-xl;
|
||||||
|
$btn-padding-x-xl: $input-btn-padding-x-xl;
|
||||||
|
$btn-line-height-xl: $input-btn-line-height-xl;
|
||||||
|
|
||||||
|
$btn-border-width: $input-btn-border-width;
|
||||||
|
|
||||||
|
$btn-font-weight: 600;
|
||||||
|
$btn-box-shadow: none;
|
||||||
|
$btn-focus-width: $input-btn-focus-width;
|
||||||
|
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
|
||||||
|
|
||||||
|
$btn-active-box-shadow: none;
|
||||||
|
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
|
||||||
|
$input-padding-y: $input-btn-padding-y;
|
||||||
|
$input-padding-x: $input-btn-padding-x;
|
||||||
|
$input-line-height: $input-btn-line-height;
|
||||||
|
|
||||||
|
$input-padding-y-sm: $input-btn-padding-y-sm;
|
||||||
|
$input-padding-x-sm: $input-btn-padding-x-sm;
|
||||||
|
$input-line-height-sm: $input-btn-line-height-sm;
|
||||||
|
|
||||||
|
$input-padding-y-lg: $input-btn-padding-y-lg;
|
||||||
|
$input-padding-x-lg: $input-btn-padding-x-lg;
|
||||||
|
$input-line-height-lg: $input-btn-line-height-lg;
|
||||||
|
|
||||||
|
$input-padding-y-xl: $input-btn-padding-y-xl;
|
||||||
|
$input-padding-x-xl: $input-btn-padding-x-xl;
|
||||||
|
$input-line-height-xl: $input-btn-line-height-xl;
|
||||||
|
|
||||||
|
$input-border-radius: $border-radius;
|
||||||
|
$input-border-radius-xl: $border-radius-xl;
|
||||||
|
$input-border-radius-lg: $border-radius-lg;
|
||||||
|
$input-border-radius-sm: $border-radius-sm;
|
||||||
|
|
||||||
|
$input-bg: $white;
|
||||||
|
$input-disabled-bg: $gray-200;
|
||||||
|
|
||||||
|
$input-color: $gray-700;
|
||||||
|
$input-border-color: $gray-400;
|
||||||
|
$input-border-width: $input-btn-border-width;
|
||||||
|
$input-box-shadow: none;
|
||||||
|
|
||||||
|
$input-focus-bg: $gray-100;
|
||||||
|
$input-focus-border-color: $gray-400;
|
||||||
|
$input-focus-color: $input-color;
|
||||||
|
$input-focus-width: $input-btn-focus-width;
|
||||||
|
$input-focus-box-shadow: $input-btn-focus-box-shadow;
|
||||||
|
|
||||||
|
$input-placeholder-color: $gray-600;
|
||||||
|
|
||||||
|
$input-height-border: $input-border-width * 2;
|
||||||
|
|
||||||
|
$input-transition: $transition-base;
|
||||||
|
|
||||||
|
// Input groups
|
||||||
|
|
||||||
|
$input-group-addon-color: $input-placeholder-color;
|
||||||
|
$input-group-addon-bg: $gray-100;
|
||||||
|
$input-group-addon-border-color: $input-border-color;
|
||||||
|
|
||||||
|
$input-group-addon-focus-color: $primary;
|
||||||
|
$input-group-addon-focus-bg: $gray-200;
|
||||||
|
$input-group-addon-focus-border-color: $input-border-color;
|
||||||
|
|
||||||
|
// Custom forms
|
||||||
|
|
||||||
|
$custom-control-gutter: 1.75rem;
|
||||||
|
$custom-control-spacer-x: 1rem;
|
||||||
|
$custom-control-indicator-size: 1.25rem;
|
||||||
|
|
||||||
|
$custom-control-indicator-bg: $input-bg;
|
||||||
|
$custom-control-indicator-border-width: $input-border-width;
|
||||||
|
$custom-control-indicator-border-color: $input-border-color;
|
||||||
|
$custom-checkbox-indicator-border-radius: $border-radius-sm;
|
||||||
|
$custom-control-indicator-box-shadow: none;
|
||||||
|
|
||||||
|
$custom-control-indicator-hover-color: $component-hover-color;
|
||||||
|
$custom-control-indicator-hover-bg: $component-hover-bg;
|
||||||
|
$custom-control-indicator-hover-border-color: $component-hover-border-color;
|
||||||
|
|
||||||
|
$custom-control-indicator-active-color: $component-active-color;
|
||||||
|
$custom-control-indicator-active-bg: $component-active-bg;
|
||||||
|
$custom-control-indicator-active-border-color: $component-active-border-color;
|
||||||
|
$custom-control-indicator-active-box-shadow: none;
|
||||||
|
|
||||||
|
$custom-control-indicator-checked-color: $component-active-color;
|
||||||
|
$custom-control-indicator-checked-bg: $component-active-bg;
|
||||||
|
$custom-control-indicator-checked-border-color: $component-active-border-color;
|
||||||
|
|
||||||
|
|
||||||
|
// Allows for customizing button radius independently from global border radius
|
||||||
|
$btn-border-radius: $input-border-radius;
|
||||||
|
$btn-border-radius-xl: $input-border-radius-xl;
|
||||||
|
$btn-border-radius-lg: $input-border-radius-lg;
|
||||||
|
$btn-border-radius-sm: $input-border-radius;
|
||||||
|
|
||||||
|
// No UI Slider
|
||||||
|
|
||||||
|
$noui-target-bg: $gray-300;
|
||||||
|
$noui-target-thickness: $custom-control-indicator-border-width;
|
||||||
|
$noui-target-border-radius: 4px;
|
||||||
|
$noui-target-border-color: darken($border-color, 3%);
|
||||||
|
|
||||||
|
$noui-slider-connect-bg: $primary;
|
||||||
|
$noui-slider-connect-disabled-bg: #b2b2b2;
|
||||||
|
|
||||||
|
$noui-handle-bg: #fff;
|
||||||
|
$noui-handle-border-color: #d9d9d9;
|
||||||
|
$noui-handle-border-radius: 100%;
|
||||||
|
|
||||||
|
$noui-origin-border-radius: 2px;
|
||||||
|
|
||||||
|
// Dropdown
|
||||||
|
|
||||||
|
$dropdown-bg: $white;
|
||||||
|
$dropdown-border-width: 0;
|
||||||
|
$dropdown-border-color: rgba($black, .15);
|
||||||
|
$dropdown-border-radius: $border-radius;
|
||||||
|
|
||||||
|
|
||||||
|
// Navs
|
||||||
|
|
||||||
|
$nav-link-padding-y: .25rem;
|
||||||
|
$nav-link-padding-x: .75rem;
|
||||||
|
$nav-link-color: $gray-700;
|
||||||
|
$nav-link-disabled-color: $gray-600;
|
||||||
|
|
||||||
|
$nav-pills-border-radius: $border-radius;
|
||||||
|
$nav-pills-link-active-color: $component-active-color;
|
||||||
|
$nav-pills-link-active-bg: $component-active-bg;
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
|
||||||
|
$navbar-transition: all .15s linear;
|
||||||
|
$navbar-padding-y: .5rem;
|
||||||
|
$navbar-padding-x: 1rem;
|
||||||
|
|
||||||
|
$navbar-nav-link-padding-x: 1rem;
|
||||||
|
$navbar-nav-link-padding-y: .75rem;
|
||||||
|
|
||||||
|
$navbar-nav-link-font-family: $font-family-alt;
|
||||||
|
$navbar-nav-link-font-size: .875rem;
|
||||||
|
$navbar-nav-link-font-weight: 500;
|
||||||
|
$navbar-nav-link-text-transform: normal;
|
||||||
|
$navbar-nav-link-letter-spacing: 0;
|
||||||
|
$navbar-nav-link-border-radius: $border-radius;
|
||||||
|
|
||||||
|
$navbar-dark-bg: transparent;
|
||||||
|
$navbar-dark-hover-bg: rgba(255, 255, 255, .1);
|
||||||
|
$navbar-dark-active-bg: rgba(255, 255, 255, .1);
|
||||||
|
$navbar-dark-color: rgba($white, .5);
|
||||||
|
$navbar-dark-hover-color: rgba($white, .75);
|
||||||
|
$navbar-dark-active-color: $white;
|
||||||
|
$navbar-dark-disabled-color: rgba($white, .25);
|
||||||
|
//$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23");
|
||||||
|
$navbar-dark-toggler-border-color: transparent;
|
||||||
|
|
||||||
|
$navbar-light-color: rgba($black, .5);
|
||||||
|
$navbar-light-hover-color: rgba($black, .7);
|
||||||
|
$navbar-light-active-color: rgba($black, .9);
|
||||||
|
$navbar-light-disabled-color: rgba($black, .3);
|
||||||
|
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23");
|
||||||
|
$navbar-light-toggler-border-color: rgba($black, .1);
|
||||||
|
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
|
||||||
|
$alert-padding-y: 1rem;
|
||||||
|
$alert-padding-x: 1.5rem;
|
||||||
|
$alert-border-radius: $border-radius;
|
||||||
|
|
||||||
|
$alert-bg-level: -2;
|
||||||
|
$alert-border-level: -2;
|
||||||
|
$alert-color-level: 0;
|
||||||
|
|
||||||
|
// Close
|
||||||
|
|
||||||
|
$close-font-size: $font-size-base * 1.5;
|
||||||
|
$close-font-weight: $font-weight-bold;
|
||||||
|
$close-bg: rgba(0, 0, 0, .3);
|
||||||
|
$close-hover-bg: rgba(0, 0, 0, .5);
|
||||||
|
$close-color: rgba(255, 255, 255, .6);
|
||||||
|
$close-text-shadow: none;
|
||||||
|
|
||||||
|
// Tooltips
|
||||||
|
|
||||||
|
$tooltip-font-size: $font-size-sm;
|
||||||
|
$tooltip-max-width: 200px;
|
||||||
|
$tooltip-color: $white;
|
||||||
|
$tooltip-bg: $black;
|
||||||
|
$tooltip-border-radius: $border-radius;
|
||||||
|
$tooltip-opacity: .9;
|
||||||
|
$tooltip-padding-y: .25rem;
|
||||||
|
$tooltip-padding-x: .5rem;
|
||||||
|
$tooltip-margin: 0;
|
||||||
|
|
||||||
|
$tooltip-arrow-width: .8rem;
|
||||||
|
$tooltip-arrow-height: .4rem;
|
||||||
|
$tooltip-arrow-color: $tooltip-bg;
|
||||||
|
|
||||||
|
|
||||||
|
// Popovers
|
||||||
|
|
||||||
|
$popover-font-size: $font-size-sm;
|
||||||
|
$popover-bg: $white;
|
||||||
|
$popover-max-width: 276px;
|
||||||
|
$popover-border-width: 1px;
|
||||||
|
$popover-border-color: rgba($black, .05);
|
||||||
|
$popover-border-radius: $border-radius-lg;
|
||||||
|
$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2);
|
||||||
|
|
||||||
|
$popover-header-bg: $popover-bg;
|
||||||
|
$popover-header-color: $headings-color;
|
||||||
|
$popover-header-padding-y: .75rem;
|
||||||
|
$popover-header-padding-x: .75rem;
|
||||||
|
|
||||||
|
$popover-body-color: $body-color;
|
||||||
|
$popover-body-padding-y: $popover-header-padding-y;
|
||||||
|
$popover-body-padding-x: $popover-header-padding-x;
|
||||||
|
|
||||||
|
$popover-arrow-width: 1.5rem;
|
||||||
|
$popover-arrow-height: .75rem;
|
||||||
|
$popover-arrow-color: $popover-bg;
|
||||||
|
|
||||||
|
$popover-arrow-outer-color: transparent;
|
||||||
|
|
||||||
|
|
||||||
|
// Badges
|
||||||
|
|
||||||
|
$badge-font-size: 65%;
|
||||||
|
$badge-font-weight: $font-weight-bold;
|
||||||
|
$badge-padding-y: .25rem;
|
||||||
|
$badge-padding-x: .375rem;
|
||||||
|
$badge-border-radius: $border-radius;
|
||||||
|
|
||||||
|
$badge-pill-padding-x: .65em;
|
||||||
|
$badge-pill-border-radius: 10rem;
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
|
||||||
|
// $pagination-padding-y: .5rem;
|
||||||
|
// $pagination-padding-x: .75rem;
|
||||||
|
// $pagination-padding-y-sm: .25rem;
|
||||||
|
// $pagination-padding-x-sm: .5rem;
|
||||||
|
// $pagination-padding-y-lg: .75rem;
|
||||||
|
// $pagination-padding-x-lg: 1.5rem;
|
||||||
|
// $pagination-line-height: 1.25;
|
||||||
|
|
||||||
|
$pagination-color: $gray-600;
|
||||||
|
$pagination-bg: $white ;
|
||||||
|
$pagination-border-width: $border-width;
|
||||||
|
$pagination-border-color: $gray-300;
|
||||||
|
|
||||||
|
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
|
||||||
|
|
||||||
|
$pagination-hover-color: $gray-600;
|
||||||
|
$pagination-hover-bg: $gray-300;
|
||||||
|
$pagination-hover-border-color: $gray-300;
|
||||||
|
|
||||||
|
$pagination-active-color: $component-active-color;
|
||||||
|
$pagination-active-bg: $component-active-bg;
|
||||||
|
$pagination-active-border-color: $pagination-active-bg;
|
||||||
|
|
||||||
|
$pagination-disabled-color: $gray-600;
|
||||||
|
$pagination-disabled-bg: $white;
|
||||||
|
$pagination-disabled-border-color: $gray-300;
|
||||||
|
|
||||||
|
|
||||||
|
// Cards
|
||||||
|
|
||||||
|
$card-spacer-y: 1.25rem;
|
||||||
|
$card-spacer-x: 1.5rem;
|
||||||
|
$card-border-width: $border-width;
|
||||||
|
$card-border-radius: $border-radius;
|
||||||
|
$card-border-color: rgba($black, .05);
|
||||||
|
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
|
||||||
|
$card-cap-bg: $white;
|
||||||
|
$card-bg: $white;
|
||||||
|
|
||||||
|
$card-img-overlay-padding: 1.25rem;
|
||||||
|
|
||||||
|
//$card-group-margin: ($grid-gutter-width / 2);
|
||||||
|
//$card-deck-margin: $card-group-margin;
|
||||||
|
|
||||||
|
$card-columns-count: 3;
|
||||||
|
$card-columns-gap: 1.25rem;
|
||||||
|
$card-columns-margin: $card-spacer-y;
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
|
||||||
|
$modal-inner-padding: 1.5rem;
|
||||||
|
|
||||||
|
// $modal-dialog-margin: .5rem;
|
||||||
|
// $modal-dialog-margin-y-sm-up: 1.75rem;
|
||||||
|
|
||||||
|
//$modal-title-line-height: $line-height-base;
|
||||||
|
|
||||||
|
$modal-content-bg: $white;
|
||||||
|
$modal-content-border-color: rgba($black, .2);
|
||||||
|
$modal-content-border-width: 1px;
|
||||||
|
$modal-content-border-radius: $border-radius;
|
||||||
|
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5);
|
||||||
|
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5);
|
||||||
|
|
||||||
|
$modal-backdrop-bg: $black;
|
||||||
|
$modal-backdrop-opacity: .3;
|
||||||
|
$modal-header-border-color: $gray-200;
|
||||||
|
$modal-footer-border-color: $modal-header-border-color;
|
||||||
|
$modal-header-border-width: $modal-content-border-width;
|
||||||
|
$modal-footer-border-width: $modal-header-border-width;
|
||||||
|
$modal-header-padding: 1.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
|
||||||
|
$footer-bg: $white;
|
||||||
|
$footer-color: $gray-600;
|
||||||
|
$footer-link-color: $gray-600;
|
||||||
|
$footer-link-hover-color: $primary;
|
||||||
|
|
||||||
51
static/scss/bootstrap/_alert.scss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
position: relative;
|
||||||
|
padding: $alert-padding-y $alert-padding-x;
|
||||||
|
margin-bottom: $alert-margin-bottom;
|
||||||
|
border: $alert-border-width solid transparent;
|
||||||
|
@include border-radius($alert-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Headings for larger alerts
|
||||||
|
.alert-heading {
|
||||||
|
// Specified to prevent conflicts of changing $headings-color
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Provide class for links that match alerts
|
||||||
|
.alert-link {
|
||||||
|
font-weight: $alert-link-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Dismissible alerts
|
||||||
|
//
|
||||||
|
// Expand the right padding and account for the close button's positioning.
|
||||||
|
|
||||||
|
.alert-dismissible {
|
||||||
|
padding-right: ($close-font-size + $alert-padding-x * 2);
|
||||||
|
|
||||||
|
// Adjust close link position
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: $alert-padding-y $alert-padding-x;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Alternate styles
|
||||||
|
//
|
||||||
|
// Generate contextual modifier classes for colorizing the alert.
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.alert-#{$color} {
|
||||||
|
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
|
||||||
|
}
|
||||||
|
}
|
||||||
47
static/scss/bootstrap/_badge.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
// Base class
|
||||||
|
//
|
||||||
|
// Requires one of the contextual, color modifier classes for `color` and
|
||||||
|
// `background-color`.
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: $badge-padding-y $badge-padding-x;
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Empty badges collapse automatically
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Quick fix for badges in buttons
|
||||||
|
.btn .badge {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pill badges
|
||||||
|
//
|
||||||
|
// Make them extra rounded with a modifier to replace v3's badges.
|
||||||
|
|
||||||
|
.badge-pill {
|
||||||
|
padding-right: $badge-pill-padding-x;
|
||||||
|
padding-left: $badge-pill-padding-x;
|
||||||
|
@include border-radius($badge-pill-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
//
|
||||||
|
// Contextual variations (linked badges get darker on :hover).
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.badge-#{$color} {
|
||||||
|
@include badge-variant($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
38
static/scss/bootstrap/_breadcrumb.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
|
list-style: none;
|
||||||
|
background-color: $breadcrumb-bg;
|
||||||
|
@include border-radius($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;
|
||||||
|
padding-left: $breadcrumb-item-padding;
|
||||||
|
color: $breadcrumb-divider-color;
|
||||||
|
content: "#{$breadcrumb-divider}";
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||||
|
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||||
|
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||||
|
//
|
||||||
|
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||||
|
// underline and then immediately remove it.
|
||||||
|
+ .breadcrumb-item:hover::before {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
|
+ .breadcrumb-item:hover::before {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $breadcrumb-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
166
static/scss/bootstrap/_button-group.scss
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
// Make the div behave like a button
|
||||||
|
.btn-group,
|
||||||
|
.btn-group-vertical {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
position: relative;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
|
||||||
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
|
// the borders properly
|
||||||
|
@include hover {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
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
|
||||||
|
.btn-toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
> .btn:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset rounded corners
|
||||||
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
|
> .btn-group:not(:last-child) > .btn {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn:not(:first-child),
|
||||||
|
> .btn-group:not(:first-child) > .btn {
|
||||||
|
@include border-left-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sizing
|
||||||
|
//
|
||||||
|
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||||
|
|
||||||
|
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||||
|
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Split button dropdowns
|
||||||
|
//
|
||||||
|
|
||||||
|
.dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x * .75;
|
||||||
|
padding-left: $btn-padding-x * .75;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm + .dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x-sm * .75;
|
||||||
|
padding-left: $btn-padding-x-sm * .75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg + .dropdown-toggle-split {
|
||||||
|
padding-right: $btn-padding-x-lg * .75;
|
||||||
|
padding-left: $btn-padding-x-lg * .75;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// The clickable button for toggling the menu
|
||||||
|
// Set the same inset shadow as the :active state
|
||||||
|
.btn-group.show .dropdown-toggle {
|
||||||
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
||||||
|
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||||
|
&.btn-link {
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Vertical button groups
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn-group-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.btn,
|
||||||
|
.btn-group {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn + .btn,
|
||||||
|
> .btn + .btn-group,
|
||||||
|
> .btn-group + .btn,
|
||||||
|
> .btn-group + .btn-group {
|
||||||
|
margin-top: -$btn-border-width;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset rounded corners
|
||||||
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
|
> .btn-group:not(:last-child) > .btn {
|
||||||
|
@include border-bottom-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn:not(:first-child),
|
||||||
|
> .btn-group:not(:first-child) > .btn {
|
||||||
|
@include border-top-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Checkbox and radio options
|
||||||
|
//
|
||||||
|
// In order to support the browser's form validation feedback, powered by the
|
||||||
|
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||||
|
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||||
|
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||||
|
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||||
|
// This way, we ensure a DOM element is visible to position the popover from.
|
||||||
|
//
|
||||||
|
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||||
|
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||||
|
|
||||||
|
.btn-group-toggle {
|
||||||
|
> .btn,
|
||||||
|
> .btn-group > .btn {
|
||||||
|
margin-bottom: 0; // Override default `<label>` value
|
||||||
|
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
143
static/scss/bootstrap/_buttons.scss
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: $btn-font-weight;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: middle;
|
||||||
|
user-select: none;
|
||||||
|
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 transition($btn-transition);
|
||||||
|
|
||||||
|
// Share hover and focus styles
|
||||||
|
@include hover-focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $btn-focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled comes first so active can properly restyle
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
opacity: $btn-disabled-opacity;
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
||||||
|
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Future-proof disabling of clicks on `<a>` elements
|
||||||
|
a.btn.disabled,
|
||||||
|
fieldset:disabled a.btn {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Alternate buttons
|
||||||
|
//
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.btn-#{$color} {
|
||||||
|
@include button-variant($value, $value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.btn-outline-#{$color} {
|
||||||
|
@include button-outline-variant($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Link buttons
|
||||||
|
//
|
||||||
|
|
||||||
|
// Make a button look and behave like a link
|
||||||
|
.btn-link {
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
color: $link-color;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No need for an active state here
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Sizes
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Block button
|
||||||
|
//
|
||||||
|
|
||||||
|
.btn-block {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
// Vertically space out multiple block buttons
|
||||||
|
+ .btn-block {
|
||||||
|
margin-top: $btn-block-spacing-y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Specificity overrides
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="button"] {
|
||||||
|
&.btn-block {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
270
static/scss/bootstrap/_card.scss
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
background-color: $card-bg;
|
||||||
|
background-clip: border-box;
|
||||||
|
border: $card-border-width solid $card-border-color;
|
||||||
|
@include border-radius($card-border-radius);
|
||||||
|
|
||||||
|
> hr {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .list-group:first-child {
|
||||||
|
.list-group-item:first-child {
|
||||||
|
@include border-top-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .list-group:last-child {
|
||||||
|
.list-group-item:last-child {
|
||||||
|
@include border-bottom-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
// 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;
|
||||||
|
padding: $card-spacer-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin-bottom: $card-spacer-y;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-subtitle {
|
||||||
|
margin-top: -($card-spacer-y / 2);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link {
|
||||||
|
@include hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .card-link {
|
||||||
|
margin-left: $card-spacer-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Optional textual caps
|
||||||
|
//
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: $card-spacer-y $card-spacer-x;
|
||||||
|
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||||
|
background-color: $card-cap-bg;
|
||||||
|
border-bottom: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .list-group {
|
||||||
|
.list-group-item:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
padding: $card-spacer-y $card-spacer-x;
|
||||||
|
background-color: $card-cap-bg;
|
||||||
|
border-top: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header navs
|
||||||
|
//
|
||||||
|
|
||||||
|
.card-header-tabs {
|
||||||
|
margin-right: -($card-spacer-x / 2);
|
||||||
|
margin-bottom: -$card-spacer-y;
|
||||||
|
margin-left: -($card-spacer-x / 2);
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header-pills {
|
||||||
|
margin-right: -($card-spacer-x / 2);
|
||||||
|
margin-left: -($card-spacer-x / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Card image
|
||||||
|
.card-img-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: $card-img-overlay-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
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-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-bottom {
|
||||||
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||||
|
@include border-bottom-radius($card-inner-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Card deck
|
||||||
|
|
||||||
|
.card-deck {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: $card-deck-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
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
|
||||||
|
flex: 1 0 0%;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: $card-deck-margin;
|
||||||
|
margin-bottom: 0; // Override the default
|
||||||
|
margin-left: $card-deck-margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Card groups
|
||||||
|
//
|
||||||
|
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
|
// to display properly.
|
||||||
|
> .card {
|
||||||
|
margin-bottom: $card-group-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
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
|
||||||
|
flex: 1 0 0%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
+ .card {
|
||||||
|
margin-left: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle rounded corners
|
||||||
|
@if $enable-rounded {
|
||||||
|
&:first-child {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include border-left-radius(0);
|
||||||
|
|
||||||
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Columns
|
||||||
|
//
|
||||||
|
|
||||||
|
.card-columns {
|
||||||
|
.card {
|
||||||
|
margin-bottom: $card-columns-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
column-count: $card-columns-count;
|
||||||
|
column-gap: $card-columns-gap;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: inline-block; // Don't let them vertically span multiple columns
|
||||||
|
width: 100%; // Don't let their width change
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
191
static/scss/bootstrap/_carousel.scss
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
// Wrapper for the slide container and indicators
|
||||||
|
.carousel {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-inner {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
@include transition($carousel-transition);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item.active,
|
||||||
|
.carousel-item-next,
|
||||||
|
.carousel-item-prev {
|
||||||
|
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,
|
||||||
|
.active.carousel-item-right {
|
||||||
|
transform: translateX(100%);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
|
transform: translate3d(100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item-prev,
|
||||||
|
.active.carousel-item-left {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Left/right controls for nav
|
||||||
|
//
|
||||||
|
|
||||||
|
.carousel-control-prev,
|
||||||
|
.carousel-control-next {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
// Use flex for alignment (1-3)
|
||||||
|
display: flex; // 1. allow flex styles
|
||||||
|
align-items: center; // 2. vertically center contents
|
||||||
|
justify-content: center; // 3. horizontally center contents
|
||||||
|
width: $carousel-control-width;
|
||||||
|
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.
|
||||||
|
|
||||||
|
// Hover/focus state
|
||||||
|
@include hover-focus {
|
||||||
|
color: $carousel-control-color;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: 0;
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carousel-control-prev {
|
||||||
|
left: 0;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carousel-control-next {
|
||||||
|
right: 0;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icons for within
|
||||||
|
.carousel-control-prev-icon,
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: $carousel-control-icon-width;
|
||||||
|
height: $carousel-control-icon-width;
|
||||||
|
background: transparent no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.carousel-control-prev-icon {
|
||||||
|
background-image: $carousel-control-prev-icon-bg;
|
||||||
|
}
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
background-image: $carousel-control-next-icon-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Optional indicator pips
|
||||||
|
//
|
||||||
|
// Add an ordered list with the following class and add a list item for each
|
||||||
|
// slide your carousel holds.
|
||||||
|
|
||||||
|
.carousel-indicators {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 0;
|
||||||
|
z-index: 15;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 0; // override <ol> default
|
||||||
|
// Use the .carousel-control's width as margin so we don't overlay those
|
||||||
|
margin-right: $carousel-control-width;
|
||||||
|
margin-left: $carousel-control-width;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
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: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: $carousel-indicator-active-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Optional captions
|
||||||
|
//
|
||||||
|
//
|
||||||
|
|
||||||
|
.carousel-caption {
|
||||||
|
position: absolute;
|
||||||
|
right: ((100% - $carousel-caption-width) / 2);
|
||||||
|
bottom: 20px;
|
||||||
|
left: ((100% - $carousel-caption-width) / 2);
|
||||||
|
z-index: 10;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
color: $carousel-caption-color;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
34
static/scss/bootstrap/_close.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
.close {
|
||||||
|
float: right;
|
||||||
|
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 {
|
||||||
|
color: $close-color;
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: .75;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opinionated: add "hand" cursor to non-disabled .close elements
|
||||||
|
&:not(:disabled):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional properties for button version
|
||||||
|
// iOS requires the button element instead of an anchor tag.
|
||||||
|
// If you want the anchor version, it requires `href="#"`.
|
||||||
|
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||||
|
|
||||||
|
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||||
|
button.close {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
// stylelint-enable
|
||||||
56
static/scss/bootstrap/_code.scss
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
// Inline and block code styles
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: $font-family-monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inline code
|
||||||
|
code {
|
||||||
|
font-size: $code-font-size;
|
||||||
|
color: $code-color;
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
// Streamline the style when inside anchors to avoid broken underline and more
|
||||||
|
a > & {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// User input typically entered via keyboard
|
||||||
|
kbd {
|
||||||
|
padding: $kbd-padding-y $kbd-padding-x;
|
||||||
|
font-size: $kbd-font-size;
|
||||||
|
color: $kbd-color;
|
||||||
|
background-color: $kbd-bg;
|
||||||
|
@include border-radius($border-radius-sm);
|
||||||
|
@include box-shadow($kbd-box-shadow);
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: $nested-kbd-font-weight;
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blocks of code
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
font-size: $code-font-size;
|
||||||
|
color: $pre-color;
|
||||||
|
|
||||||
|
// Account for some code outputs that place code tags in pre tags
|
||||||
|
code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enable scrollable blocks of code
|
||||||
|
.pre-scrollable {
|
||||||
|
max-height: $pre-scrollable-max-height;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
297
static/scss/bootstrap/_custom-forms.scss
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
// Embedded icons from Open Iconic.
|
||||||
|
// Released under MIT and copyright 2014 Waybury.
|
||||||
|
// https://useiconic.com/open
|
||||||
|
|
||||||
|
|
||||||
|
// Checkboxes and radios
|
||||||
|
//
|
||||||
|
// Base class takes care of all the key behavioral aspects.
|
||||||
|
|
||||||
|
.custom-control {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
min-height: (1rem * $line-height-base);
|
||||||
|
padding-left: $custom-control-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-inline {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-right: $custom-control-spacer-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:checked ~ .custom-control-label::before {
|
||||||
|
color: $custom-control-indicator-checked-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active ~ .custom-control-label::before {
|
||||||
|
color: $custom-control-indicator-active-color;
|
||||||
|
background-color: $custom-control-indicator-active-bg;
|
||||||
|
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
~ .custom-control-label {
|
||||||
|
color: $custom-control-label-disabled-color;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-color: $custom-control-indicator-disabled-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom control indicators
|
||||||
|
//
|
||||||
|
// Build the custom controls out of psuedo-elements.
|
||||||
|
|
||||||
|
.custom-control-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
// Background-color and (when enabled) gradient
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: (($line-height-base - $custom-control-indicator-size) / 2);
|
||||||
|
left: 0;
|
||||||
|
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;
|
||||||
|
@include box-shadow($custom-control-indicator-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Foreground (icon)
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: (($line-height-base - $custom-control-indicator-size) / 2);
|
||||||
|
left: 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Checkboxes
|
||||||
|
//
|
||||||
|
// Tweak just a few things for checkboxes.
|
||||||
|
|
||||||
|
.custom-checkbox {
|
||||||
|
.custom-control-label::before {
|
||||||
|
@include border-radius($custom-checkbox-indicator-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input:checked ~ .custom-control-label {
|
||||||
|
&::before {
|
||||||
|
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
background-image: $custom-checkbox-indicator-icon-checked;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input:indeterminate ~ .custom-control-label {
|
||||||
|
&::before {
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input:disabled {
|
||||||
|
&:checked ~ .custom-control-label::before {
|
||||||
|
background-color: $custom-control-indicator-checked-disabled-bg;
|
||||||
|
}
|
||||||
|
&:indeterminate ~ .custom-control-label::before {
|
||||||
|
background-color: $custom-control-indicator-checked-disabled-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Radios
|
||||||
|
//
|
||||||
|
// Tweak just a few things for radios.
|
||||||
|
|
||||||
|
.custom-radio {
|
||||||
|
.custom-control-label::before {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input:disabled {
|
||||||
|
&:checked ~ .custom-control-label::before {
|
||||||
|
background-color: $custom-control-indicator-checked-disabled-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Select
|
||||||
|
//
|
||||||
|
// Replaces the browser default select with a custom one, mostly pulled from
|
||||||
|
// http://primercss.io.
|
||||||
|
//
|
||||||
|
|
||||||
|
.custom-select {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: $custom-select-height;
|
||||||
|
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||||
|
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;
|
||||||
|
border: $custom-select-border-width solid $custom-select-border-color;
|
||||||
|
@if $enable-rounded {
|
||||||
|
border-radius: $custom-select-border-radius;
|
||||||
|
} @else {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $custom-select-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $custom-select-focus-box-shadow;
|
||||||
|
|
||||||
|
&::-ms-value {
|
||||||
|
// For visual consistency with other platforms/browsers,
|
||||||
|
// suppress the default white text on blue background highlight given to
|
||||||
|
// the selected option text when the (still closed) <select> receives focus
|
||||||
|
// in IE and (under certain conditions) Edge.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[multiple],
|
||||||
|
&[size]:not([size="1"]) {
|
||||||
|
height: auto;
|
||||||
|
padding-right: $custom-select-padding-x;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $custom-select-disabled-color;
|
||||||
|
background-color: $custom-select-disabled-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hides the default caret in IE11
|
||||||
|
&::-ms-expand {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// File
|
||||||
|
//
|
||||||
|
// Custom file input.
|
||||||
|
|
||||||
|
.custom-file {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: $custom-file-height;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-file-input {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: $custom-file-height;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:focus ~ .custom-file-control {
|
||||||
|
border-color: $custom-file-focus-border-color;
|
||||||
|
box-shadow: $custom-file-focus-box-shadow;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-color: $custom-file-focus-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $lang, $value in $custom-file-text {
|
||||||
|
&:lang(#{$lang}) ~ .custom-file-label::after {
|
||||||
|
content: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-file-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
height: $custom-file-height;
|
||||||
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
|
line-height: $custom-file-line-height;
|
||||||
|
color: $custom-file-color;
|
||||||
|
background-color: $custom-file-bg;
|
||||||
|
border: $custom-file-border-width solid $custom-file-border-color;
|
||||||
|
@include border-radius($custom-file-border-radius);
|
||||||
|
@include box-shadow($custom-file-box-shadow);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 3;
|
||||||
|
display: block;
|
||||||
|
height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
|
||||||
|
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;
|
||||||
|
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
131
static/scss/bootstrap/_dropdown.scss
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
// The dropdown wrapper (`<div>`)
|
||||||
|
.dropup,
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
// Generate the caret automatically
|
||||||
|
@include caret;
|
||||||
|
}
|
||||||
|
|
||||||
|
// The dropdown menu
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-dropdown;
|
||||||
|
display: none; // none by default, but block on "open" of the menu
|
||||||
|
float: left;
|
||||||
|
min-width: $dropdown-min-width;
|
||||||
|
padding: $dropdown-padding-y 0;
|
||||||
|
margin: $dropdown-spacer 0 0; // override default ul
|
||||||
|
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
||||||
|
color: $body-color;
|
||||||
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||||
|
list-style: none;
|
||||||
|
background-color: $dropdown-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: $dropdown-border-width solid $dropdown-border-color;
|
||||||
|
@include border-radius($dropdown-border-radius);
|
||||||
|
@include box-shadow($dropdown-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(up);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropright {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(right);
|
||||||
|
&::after {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropleft {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(left);
|
||||||
|
&::before {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dividers (basically an `<hr>`) within the dropdown
|
||||||
|
.dropdown-divider {
|
||||||
|
@include nav-divider($dropdown-divider-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Links, buttons, and more within the dropdown menu
|
||||||
|
//
|
||||||
|
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||||
|
.dropdown-item {
|
||||||
|
display: block;
|
||||||
|
width: 100%; // For `<button>`s
|
||||||
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||||
|
clear: both;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
color: $dropdown-link-color;
|
||||||
|
text-align: inherit; // For `<button>`s
|
||||||
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||||
|
background-color: transparent; // For `<button>`s
|
||||||
|
border: 0; // For `<button>`s
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $dropdown-link-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
@include gradient-bg($dropdown-link-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&:active {
|
||||||
|
color: $dropdown-link-active-color;
|
||||||
|
text-decoration: none;
|
||||||
|
@include gradient-bg($dropdown-link-active-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
color: $dropdown-link-disabled-color;
|
||||||
|
background-color: transparent;
|
||||||
|
// Remove CSS gradients if they're enabled
|
||||||
|
@if $enable-gradients {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdown section headers
|
||||||
|
.dropdown-header {
|
||||||
|
display: block;
|
||||||
|
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||||
|
margin-bottom: 0; // for use with heading elements
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
color: $dropdown-header-color;
|
||||||
|
white-space: nowrap; // as with > li > a
|
||||||
|
}
|
||||||
333
static/scss/bootstrap/_forms.scss
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
//
|
||||||
|
// Textual form controls
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: $input-border-width solid $input-border-color;
|
||||||
|
|
||||||
|
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||||
|
@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 box-shadow($input-box-shadow);
|
||||||
|
@include transition($input-transition);
|
||||||
|
|
||||||
|
// Unstyle the caret on `<select>`s in IE10+.
|
||||||
|
&::-ms-expand {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Customize the `:focus` state to imitate native WebKit styles.
|
||||||
|
@include form-control-focus();
|
||||||
|
|
||||||
|
// Placeholder
|
||||||
|
&::placeholder {
|
||||||
|
color: $input-placeholder-color;
|
||||||
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled and read-only inputs
|
||||||
|
//
|
||||||
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||||
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||||
|
// don't honor that edge case; we style them as disabled anyway.
|
||||||
|
&:disabled,
|
||||||
|
&[readonly] {
|
||||||
|
background-color: $input-disabled-bg;
|
||||||
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
||||||
|
// match the appearance of the native widget.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make file inputs better match text inputs by forcing them to new lines.
|
||||||
|
.form-control-file,
|
||||||
|
.form-control-range {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Labels
|
||||||
|
//
|
||||||
|
|
||||||
|
// For use with horizontal and inline forms, when you need the label (or legend)
|
||||||
|
// text to align with the form controls.
|
||||||
|
.col-form-label {
|
||||||
|
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
|
||||||
|
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
|
||||||
|
margin-bottom: 0; // Override the `<label>/<legend>` default
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
line-height: $input-line-height-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Readonly controls as plain text
|
||||||
|
//
|
||||||
|
// Apply class to a readonly input to make it appear like regular plain
|
||||||
|
// text (without any border, background color, focus indicator)
|
||||||
|
|
||||||
|
.form-control-plaintext {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: $input-padding-y;
|
||||||
|
padding-bottom: $input-padding-y;
|
||||||
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||||
|
line-height: $input-line-height;
|
||||||
|
background-color: transparent;
|
||||||
|
border: solid transparent;
|
||||||
|
border-width: $input-border-width 0;
|
||||||
|
|
||||||
|
&.form-control-sm,
|
||||||
|
&.form-control-lg {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form control sizing
|
||||||
|
//
|
||||||
|
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||||
|
// height and font-size of form controls.
|
||||||
|
//
|
||||||
|
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||||
|
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||||
|
|
||||||
|
.form-control-sm {
|
||||||
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
|
font-size: $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 {
|
||||||
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
|
font-size: $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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form groups
|
||||||
|
//
|
||||||
|
// Designed to help with the organization and spacing of vertical forms. For
|
||||||
|
// horizontal forms, use the predefined grid classes.
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: $form-group-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-text {
|
||||||
|
display: block;
|
||||||
|
margin-top: $form-text-margin-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form grid
|
||||||
|
//
|
||||||
|
// Special replacement for our grid system's `.row` for tighter form layouts.
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
|
||||||
|
> .col,
|
||||||
|
> [class*="col-"] {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Checkboxes and radios
|
||||||
|
//
|
||||||
|
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||||
|
|
||||||
|
.form-check {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding-left: $form-check-input-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: $form-check-input-margin-y;
|
||||||
|
margin-left: -$form-check-input-gutter;
|
||||||
|
|
||||||
|
&:disabled ~ .form-check-label {
|
||||||
|
color: $text-muted;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-label {
|
||||||
|
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-inline {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 0; // Override base .form-check
|
||||||
|
margin-right: $form-check-inline-margin-x;
|
||||||
|
|
||||||
|
// Undo .form-check-input defaults and add some `margin-right`.
|
||||||
|
.form-check-input {
|
||||||
|
position: static;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $form-check-inline-input-margin-x;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form validation
|
||||||
|
//
|
||||||
|
// Provide feedback to users when form field values are valid or invalid. Works
|
||||||
|
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
||||||
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
|
// server side validation.
|
||||||
|
|
||||||
|
@include form-validation-state("valid", $form-feedback-valid-color);
|
||||||
|
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
||||||
|
|
||||||
|
// Inline forms
|
||||||
|
//
|
||||||
|
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||||
|
// forms begin stacked on extra small (mobile) devices and then go inline when
|
||||||
|
// viewports reach <768px.
|
||||||
|
//
|
||||||
|
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
||||||
|
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||||
|
|
||||||
|
.form-inline {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
||||||
|
|
||||||
|
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||||
|
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||||
|
// so we force that here.
|
||||||
|
.form-check {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Kick in the inline
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inline-block all the things for "inline"
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Allow folks to *not* use `.form-group`
|
||||||
|
.form-control {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make static controls behave like regular ones
|
||||||
|
.form-control-plaintext {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||||
|
// then undo the floating of radios and checkboxes to match.
|
||||||
|
.form-check {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: auto;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.form-check-input {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $form-check-input-margin-x;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.custom-control-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
86
static/scss/bootstrap/_functions.scss
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
// Bootstrap functions
|
||||||
|
//
|
||||||
|
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||||
|
|
||||||
|
// Ascending
|
||||||
|
// Used to evaluate Sass maps like our grid breakpoints.
|
||||||
|
@mixin _assert-ascending($map, $map-name) {
|
||||||
|
$prev-key: null;
|
||||||
|
$prev-num: null;
|
||||||
|
@each $key, $num in $map {
|
||||||
|
@if $prev-num == null {
|
||||||
|
// 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}' !";
|
||||||
|
} @else if $prev-num >= $num {
|
||||||
|
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||||
|
}
|
||||||
|
$prev-key: $key;
|
||||||
|
$prev-num: $num;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starts at zero
|
||||||
|
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||||
|
@mixin _assert-starts-at-zero($map) {
|
||||||
|
$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}.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace `$search` with `$replace` in `$string`
|
||||||
|
// Used on our SVG icon backgrounds for custom forms.
|
||||||
|
//
|
||||||
|
// @author Hugo Giraudel
|
||||||
|
// @param {String} $string - Initial string
|
||||||
|
// @param {String} $search - Substring to replace
|
||||||
|
// @param {String} $replace ('') - New value
|
||||||
|
// @return {String} - Updated string
|
||||||
|
@function str-replace($string, $search, $replace: "") {
|
||||||
|
$index: str-index($string, $search);
|
||||||
|
|
||||||
|
@if $index {
|
||||||
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color contrast
|
||||||
|
@function color-yiq($color) {
|
||||||
|
$r: red($color);
|
||||||
|
$g: green($color);
|
||||||
|
$b: blue($color);
|
||||||
|
|
||||||
|
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||||
|
|
||||||
|
@if ($yiq >= $yiq-contrasted-threshold) {
|
||||||
|
@return $yiq-text-dark;
|
||||||
|
} @else {
|
||||||
|
@return $yiq-text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retrieve color Sass maps
|
||||||
|
@function color($key: "blue") {
|
||||||
|
@return map-get($colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function theme-color($key: "primary") {
|
||||||
|
@return map-get($theme-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function gray($key: "100") {
|
||||||
|
@return map-get($grays, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
$level: abs($level);
|
||||||
|
|
||||||
|
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||||
|
}
|
||||||
52
static/scss/bootstrap/_grid.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
// Container widths
|
||||||
|
//
|
||||||
|
// Set the container width, and override it for fixed navbars in media queries.
|
||||||
|
|
||||||
|
@if $enable-grid-classes {
|
||||||
|
.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 {
|
||||||
|
.container-fluid {
|
||||||
|
@include make-container();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Row
|
||||||
|
//
|
||||||
|
// Rows contain and clear the floats of your columns.
|
||||||
|
|
||||||
|
@if $enable-grid-classes {
|
||||||
|
.row {
|
||||||
|
@include make-row();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the negative margin from default .row, then the horizontal padding
|
||||||
|
// from all immediate children columns (to prevent runaway style inheritance).
|
||||||
|
.no-gutters {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
> .col,
|
||||||
|
> [class*="col-"] {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Columns
|
||||||
|
//
|
||||||
|
// Common styles for small and large grid columns
|
||||||
|
|
||||||
|
@if $enable-grid-classes {
|
||||||
|
@include make-grid-columns();
|
||||||
|
}
|
||||||
42
static/scss/bootstrap/_images.scss
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
// Responsive images (ensure images don't scale beyond their parents)
|
||||||
|
//
|
||||||
|
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||||
|
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||||
|
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Image thumbnails
|
||||||
|
.img-thumbnail {
|
||||||
|
padding: $thumbnail-padding;
|
||||||
|
background-color: $thumbnail-bg;
|
||||||
|
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||||
|
@include border-radius($thumbnail-border-radius);
|
||||||
|
@include box-shadow($thumbnail-box-shadow);
|
||||||
|
|
||||||
|
// Keep them at most 100% wide
|
||||||
|
@include img-fluid;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Figures
|
||||||
|
//
|
||||||
|
|
||||||
|
.figure {
|
||||||
|
// Ensures the caption's text aligns with the image.
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure-img {
|
||||||
|
margin-bottom: ($spacer / 2);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.figure-caption {
|
||||||
|
font-size: $figure-caption-font-size;
|
||||||
|
color: $figure-caption-color;
|
||||||
|
}
|
||||||
159
static/scss/bootstrap/_input-group.scss
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; // For form validation feedback
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> .form-control,
|
||||||
|
> .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%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
// Bring the "active" form control to the top of surrounding elements
|
||||||
|
&:focus {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .form-control,
|
||||||
|
+ .custom-select,
|
||||||
|
+ .custom-file {
|
||||||
|
margin-left: -$input-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .form-control,
|
||||||
|
> .custom-select {
|
||||||
|
&:not(:last-child) { @include border-right-radius(0); }
|
||||||
|
&:not(:first-child) { @include border-left-radius(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom file inputs have more complex markup, thus requiring different
|
||||||
|
// border-radius overrides.
|
||||||
|
> .custom-file {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:not(:last-child) .custom-file-label,
|
||||||
|
&:not(: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); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Prepend and append
|
||||||
|
//
|
||||||
|
// While it requires one extra layer of HTML for each, dedicated prepend and
|
||||||
|
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
|
||||||
|
// 3) support HTML5 form validation.
|
||||||
|
|
||||||
|
.input-group-prepend,
|
||||||
|
.input-group-append {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
// Ensure buttons are always above inputs for more visually pleasing borders.
|
||||||
|
// This isn't needed for `.input-group-text` since it shares the same border-color
|
||||||
|
// as our inputs.
|
||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn + .btn,
|
||||||
|
.btn + .input-group-text,
|
||||||
|
.input-group-text + .input-group-text,
|
||||||
|
.input-group-text + .btn {
|
||||||
|
margin-left: -$input-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-prepend { margin-right: -$input-border-width; }
|
||||||
|
.input-group-append { margin-left: -$input-border-width; }
|
||||||
|
|
||||||
|
|
||||||
|
// Textual addons
|
||||||
|
//
|
||||||
|
// Serves as a catch-all element for any text or radio/checkbox input you wish
|
||||||
|
// to prepend or append to an input.
|
||||||
|
|
||||||
|
.input-group-text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||||
|
font-size: $font-size-base; // Match inputs
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-group-addon-color;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: $input-group-addon-bg;
|
||||||
|
border: $input-border-width solid $input-group-addon-border-color;
|
||||||
|
@include border-radius($input-border-radius);
|
||||||
|
|
||||||
|
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sizing
|
||||||
|
//
|
||||||
|
// Remix the default form control sizing classes into new ones for easier
|
||||||
|
// manipulation.
|
||||||
|
|
||||||
|
.input-group-lg > .form-control,
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-sm > .form-control,
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Prepend and append rounded corners
|
||||||
|
//
|
||||||
|
// These rulesets must come after the sizing ones to properly override sm and lg
|
||||||
|
// border-radius values when extending. They're more specific than we'd like
|
||||||
|
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
||||||
|
|
||||||
|
|
||||||
|
.input-group > .input-group-prepend > .btn,
|
||||||
|
.input-group > .input-group-prepend > .input-group-text,
|
||||||
|
.input-group > .input-group-append:not(:last-child) > .btn,
|
||||||
|
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
||||||
|
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
|
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group > .input-group-append > .btn,
|
||||||
|
.input-group > .input-group-append > .input-group-text,
|
||||||
|
.input-group > .input-group-prepend:not(:first-child) > .btn,
|
||||||
|
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
|
||||||
|
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
|
||||||
|
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
|
||||||
|
@include border-left-radius(0);
|
||||||
|
}
|
||||||
16
static/scss/bootstrap/_jumbotron.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.jumbotron {
|
||||||
|
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
||||||
|
margin-bottom: $jumbotron-padding;
|
||||||
|
background-color: $jumbotron-bg;
|
||||||
|
@include border-radius($border-radius-lg);
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron-fluid {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
115
static/scss/bootstrap/_list-group.scss
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
// Base class
|
||||||
|
//
|
||||||
|
// Easily usable on <ul>, <ol>, or <div>.
|
||||||
|
|
||||||
|
.list-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
// No need to set list-style: none; since .list-group-item is block level
|
||||||
|
padding-left: 0; // reset padding because ul and ol
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Interactive list items
|
||||||
|
//
|
||||||
|
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||||
|
// list items. Includes an extra `.active` modifier class for selected items.
|
||||||
|
|
||||||
|
.list-group-item-action {
|
||||||
|
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||||
|
color: $list-group-action-color;
|
||||||
|
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||||
|
|
||||||
|
// Hover state
|
||||||
|
@include hover-focus {
|
||||||
|
color: $list-group-action-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: $list-group-hover-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: $list-group-action-active-color;
|
||||||
|
background-color: $list-group-action-active-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Individual list items
|
||||||
|
//
|
||||||
|
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
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;
|
||||||
|
background-color: $list-group-bg;
|
||||||
|
border: $list-group-border-width solid $list-group-border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
@include border-top-radius($list-group-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
background-color: $list-group-disabled-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Include both here for `<a>`s and `<button>`s
|
||||||
|
&.active {
|
||||||
|
z-index: 2; // Place active items above their siblings for proper border styling
|
||||||
|
color: $list-group-active-color;
|
||||||
|
background-color: $list-group-active-bg;
|
||||||
|
border-color: $list-group-active-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flush list items
|
||||||
|
//
|
||||||
|
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||||
|
// useful within other components (e.g., cards).
|
||||||
|
|
||||||
|
.list-group-flush {
|
||||||
|
.list-group-item {
|
||||||
|
border-right: 0;
|
||||||
|
border-left: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.list-group-item:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.list-group-item:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Contextual variants
|
||||||
|
//
|
||||||
|
// Add modifier classes to change text and background color on individual items.
|
||||||
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
||||||
|
}
|
||||||
8
static/scss/bootstrap/_media.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.media {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
42
static/scss/bootstrap/_mixins.scss
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
// Toggles
|
||||||
|
//
|
||||||
|
// Used in conjunction with global variables to enable certain theme features.
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import "mixins/breakpoints";
|
||||||
|
@import "mixins/hover";
|
||||||
|
@import "mixins/image";
|
||||||
|
@import "mixins/badge";
|
||||||
|
@import "mixins/resize";
|
||||||
|
@import "mixins/screen-reader";
|
||||||
|
@import "mixins/size";
|
||||||
|
@import "mixins/reset-text";
|
||||||
|
@import "mixins/text-emphasis";
|
||||||
|
@import "mixins/text-hide";
|
||||||
|
@import "mixins/text-truncate";
|
||||||
|
@import "mixins/visibility";
|
||||||
|
|
||||||
|
// // Components
|
||||||
|
@import "mixins/alert";
|
||||||
|
@import "mixins/buttons";
|
||||||
|
@import "mixins/caret";
|
||||||
|
@import "mixins/pagination";
|
||||||
|
@import "mixins/lists";
|
||||||
|
@import "mixins/list-group";
|
||||||
|
@import "mixins/nav-divider";
|
||||||
|
@import "mixins/forms";
|
||||||
|
@import "mixins/table-row";
|
||||||
|
|
||||||
|
// // Skins
|
||||||
|
@import "mixins/background-variant";
|
||||||
|
@import "mixins/border-radius";
|
||||||
|
@import "mixins/box-shadow";
|
||||||
|
@import "mixins/gradients";
|
||||||
|
@import "mixins/transition";
|
||||||
|
|
||||||
|
// // Layout
|
||||||
|
@import "mixins/clearfix";
|
||||||
|
// @import "mixins/navbar-align";
|
||||||
|
@import "mixins/grid-framework";
|
||||||
|
@import "mixins/grid";
|
||||||
|
@import "mixins/float";
|
||||||
168
static/scss/bootstrap/_modal.scss
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
// .modal-open - body class for killing the scroll
|
||||||
|
// .modal - container to scroll within
|
||||||
|
// .modal-dialog - positioning shell for the actual modal
|
||||||
|
// .modal-content - actual modal w/ bg and corners and stuff
|
||||||
|
|
||||||
|
|
||||||
|
// Kill the scroll on the body
|
||||||
|
.modal-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Container that the modal scrolls within
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-modal;
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||||
|
// https://github.com/twbs/bootstrap/pull/10951.
|
||||||
|
outline: 0;
|
||||||
|
// 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
|
||||||
|
.modal-dialog {
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
margin: $modal-dialog-margin;
|
||||||
|
// allow clicks to pass through for custom click handling to close modal
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
// When fading in the modal, animate it to slide down
|
||||||
|
.modal.fade & {
|
||||||
|
@include transition($modal-transition);
|
||||||
|
transform: translate(0, -25%);
|
||||||
|
}
|
||||||
|
.modal.show & {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog-centered {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actual modal
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
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
|
||||||
|
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 box-shadow($modal-content-box-shadow-xs);
|
||||||
|
// Remove focus outline from opened modal
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal background
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-modal-backdrop;
|
||||||
|
background-color: $modal-backdrop-bg;
|
||||||
|
|
||||||
|
// Fade for backdrop
|
||||||
|
&.fade { opacity: 0; }
|
||||||
|
&.show { opacity: $modal-backdrop-opacity; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal header
|
||||||
|
// Top section of the modal w/ title and dismiss
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||||
|
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);
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title text within header
|
||||||
|
.modal-title {
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: $modal-title-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal body
|
||||||
|
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||||
|
.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`.
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: $modal-inner-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer (for actions)
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||||
|
|
||||||
|
// Easily place margin between footer elements
|
||||||
|
> :not(:first-child) { margin-left: .25rem; }
|
||||||
|
> :not(:last-child) { margin-right: .25rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Measure scrollbar width for padding body during modal show/hide
|
||||||
|
.modal-scrollbar-measure {
|
||||||
|
position: absolute;
|
||||||
|
top: -9999px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scale up the modal
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
// Automatically set modal's width for larger viewports
|
||||||
|
.modal-dialog {
|
||||||
|
max-width: $modal-md;
|
||||||
|
margin: $modal-dialog-margin-y-sm-up auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog-centered {
|
||||||
|
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-sm { max-width: $modal-sm; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.modal-lg { max-width: $modal-lg; }
|
||||||
|
}
|
||||||
118
static/scss/bootstrap/_nav.scss
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
// Base class
|
||||||
|
//
|
||||||
|
// Kickstart any navigation component with a set of style resets. Works with
|
||||||
|
// `<nav>`s or `<ul>`s.
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: block;
|
||||||
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled state lightens text
|
||||||
|
&.disabled {
|
||||||
|
color: $nav-link-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Tabs
|
||||||
|
//
|
||||||
|
|
||||||
|
.nav-tabs {
|
||||||
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
margin-bottom: -$nav-tabs-border-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
border: $nav-tabs-border-width solid transparent;
|
||||||
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
border-color: $nav-tabs-link-hover-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $nav-link-disabled-color;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active,
|
||||||
|
.nav-item.show .nav-link {
|
||||||
|
color: $nav-tabs-link-active-color;
|
||||||
|
background-color: $nav-tabs-link-active-bg;
|
||||||
|
border-color: $nav-tabs-link-active-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
// Make dropdown border overlap tab border
|
||||||
|
margin-top: -$nav-tabs-border-width;
|
||||||
|
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||||
|
@include border-top-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pills
|
||||||
|
//
|
||||||
|
|
||||||
|
.nav-pills {
|
||||||
|
.nav-link {
|
||||||
|
@include border-radius($nav-pills-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active,
|
||||||
|
.show > .nav-link {
|
||||||
|
color: $nav-pills-link-active-color;
|
||||||
|
background-color: $nav-pills-link-active-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Justified variants
|
||||||
|
//
|
||||||
|
|
||||||
|
.nav-fill {
|
||||||
|
.nav-item {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-justified {
|
||||||
|
.nav-item {
|
||||||
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tabbable tabs
|
||||||
|
//
|
||||||
|
// Hide tabbable panes to start, show them when `.active`
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
> .tab-pane {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
> .active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
311
static/scss/bootstrap/_navbar.scss
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
// Contents
|
||||||
|
//
|
||||||
|
// Navbar
|
||||||
|
// Navbar brand
|
||||||
|
// Navbar nav
|
||||||
|
// Navbar text
|
||||||
|
// Navbar divider
|
||||||
|
// Responsive navbar
|
||||||
|
// Navbar position
|
||||||
|
// Navbar themes
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
//
|
||||||
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||||
|
// other navbar variations.
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between; // space out brand from logo
|
||||||
|
padding: $navbar-padding-y $navbar-padding-x;
|
||||||
|
|
||||||
|
// Because flex properties aren't inherited, we need to redeclare these first
|
||||||
|
// few properities so that content nested within behave properly.
|
||||||
|
> .container,
|
||||||
|
> .container-fluid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar brand
|
||||||
|
//
|
||||||
|
// Used for brand, project, or site names.
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: $navbar-brand-padding-y;
|
||||||
|
padding-bottom: $navbar-brand-padding-y;
|
||||||
|
margin-right: $navbar-padding-x;
|
||||||
|
font-size: $navbar-brand-font-size;
|
||||||
|
line-height: inherit;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar nav
|
||||||
|
//
|
||||||
|
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar text
|
||||||
|
//
|
||||||
|
//
|
||||||
|
|
||||||
|
.navbar-text {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: $nav-link-padding-y;
|
||||||
|
padding-bottom: $nav-link-padding-y;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Responsive navbar
|
||||||
|
//
|
||||||
|
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||||
|
// 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`
|
||||||
|
// on the `.navbar` parent.
|
||||||
|
.navbar-collapse {
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
// For always expanded or extra full navbars, ensure content aligns itself
|
||||||
|
// properly vertically. Can be easily overridden with flex utilities.
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
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 {
|
||||||
|
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
|
||||||
|
// or image file as needed.
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
background: no-repeat center center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
|
// where your navbar collapses.
|
||||||
|
.navbar-expand {
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
&#{$infix} {
|
||||||
|
@include media-breakpoint-down($breakpoint) {
|
||||||
|
> .container,
|
||||||
|
> .container-fluid {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up($next) {
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For nesting containers, have to redeclare for alignment purposes
|
||||||
|
> .container,
|
||||||
|
> .container-fluid {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse {
|
||||||
|
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||||
|
|
||||||
|
// Changes flex-bases to auto because of an IE10 bug
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup {
|
||||||
|
.dropdown-menu {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Navbar themes
|
||||||
|
//
|
||||||
|
// Styles for switching between navbars with light or dark background.
|
||||||
|
|
||||||
|
// Dark links against a light background
|
||||||
|
.navbar-light {
|
||||||
|
.navbar-brand {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
.nav-link {
|
||||||
|
color: $navbar-light-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-light-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $navbar-light-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.show > .nav-link,
|
||||||
|
.active > .nav-link,
|
||||||
|
.nav-link.show,
|
||||||
|
.nav-link.active {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
color: $navbar-light-color;
|
||||||
|
border-color: $navbar-light-toggler-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
background-image: $navbar-light-toggler-icon-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-text {
|
||||||
|
color: $navbar-light-color;
|
||||||
|
a {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// White links against a dark background
|
||||||
|
.navbar-dark {
|
||||||
|
.navbar-brand {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
.nav-link {
|
||||||
|
color: $navbar-dark-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-dark-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $navbar-dark-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.show > .nav-link,
|
||||||
|
.active > .nav-link,
|
||||||
|
.nav-link.show,
|
||||||
|
.nav-link.active {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
color: $navbar-dark-color;
|
||||||
|
border-color: $navbar-dark-toggler-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
background-image: $navbar-dark-toggler-icon-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-text {
|
||||||
|
color: $navbar-dark-color;
|
||||||
|
a {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
77
static/scss/bootstrap/_pagination.scss
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
@include list-unstyled();
|
||||||
|
@include border-radius();
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding: $pagination-padding-y $pagination-padding-x;
|
||||||
|
margin-left: -$pagination-border-width;
|
||||||
|
line-height: $pagination-line-height;
|
||||||
|
color: $pagination-color;
|
||||||
|
background-color: $pagination-bg;
|
||||||
|
border: $pagination-border-width solid $pagination-border-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $pagination-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: $pagination-hover-bg;
|
||||||
|
border-color: $pagination-hover-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 2;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $pagination-focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opinionated: add "hand" cursor to non-disabled .page-link elements
|
||||||
|
&:not(:disabled):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
&:first-child {
|
||||||
|
.page-link {
|
||||||
|
margin-left: 0;
|
||||||
|
@include border-left-radius($border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.page-link {
|
||||||
|
@include border-right-radius($border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active .page-link {
|
||||||
|
z-index: 1;
|
||||||
|
color: $pagination-active-color;
|
||||||
|
background-color: $pagination-active-bg;
|
||||||
|
border-color: $pagination-active-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled .page-link {
|
||||||
|
color: $pagination-disabled-color;
|
||||||
|
pointer-events: none;
|
||||||
|
// Opinionated: remove the "hand" cursor set previously for .page-link
|
||||||
|
cursor: auto;
|
||||||
|
background-color: $pagination-disabled-bg;
|
||||||
|
border-color: $pagination-disabled-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Sizing
|
||||||
|
//
|
||||||
|
|
||||||
|
.pagination-lg {
|
||||||
|
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-sm {
|
||||||
|
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
||||||
|
}
|
||||||
183
static/scss/bootstrap/_popover.scss
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
.popover {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-popover;
|
||||||
|
display: block;
|
||||||
|
max-width: $popover-max-width;
|
||||||
|
// 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;
|
||||||
|
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||||
|
word-wrap: break-word;
|
||||||
|
background-color: $popover-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: $popover-border-width solid $popover-border-color;
|
||||||
|
@include border-radius($popover-border-radius);
|
||||||
|
@include box-shadow($popover-box-shadow);
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: $popover-arrow-width;
|
||||||
|
height: $popover-arrow-height;
|
||||||
|
margin: 0 $border-radius-lg;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-popover-top {
|
||||||
|
margin-bottom: $popover-arrow-height;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
bottom: 0;
|
||||||
|
border-top-color: $popover-arrow-outer-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::after {
|
||||||
|
bottom: $popover-border-width;
|
||||||
|
border-top-color: $popover-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-popover-right {
|
||||||
|
margin-left: $popover-arrow-height;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
left: 0;
|
||||||
|
border-right-color: $popover-arrow-outer-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::after {
|
||||||
|
left: $popover-border-width;
|
||||||
|
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::before,
|
||||||
|
.arrow::after {
|
||||||
|
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
top: 0;
|
||||||
|
border-bottom-color: $popover-arrow-outer-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::after {
|
||||||
|
top: $popover-border-width;
|
||||||
|
border-bottom-color: $popover-arrow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This will remove the popover-header's border just below the arrow
|
||||||
|
.popover-header::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
display: block;
|
||||||
|
width: $popover-arrow-width;
|
||||||
|
margin-left: ($popover-arrow-width / -2);
|
||||||
|
content: "";
|
||||||
|
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-popover-left {
|
||||||
|
margin-right: $popover-arrow-height;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
right: 0;
|
||||||
|
border-left-color: $popover-arrow-outer-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::after {
|
||||||
|
right: $popover-border-width;
|
||||||
|
border-left-color: $popover-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-popover-auto {
|
||||||
|
&[x-placement^="top"] {
|
||||||
|
@extend .bs-popover-top;
|
||||||
|
}
|
||||||
|
&[x-placement^="right"] {
|
||||||
|
@extend .bs-popover-right;
|
||||||
|
}
|
||||||
|
&[x-placement^="bottom"] {
|
||||||
|
@extend .bs-popover-bottom;
|
||||||
|
}
|
||||||
|
&[x-placement^="left"] {
|
||||||
|
@extend .bs-popover-left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Offset the popover to account for the popover arrow
|
||||||
|
.popover-header {
|
||||||
|
padding: $popover-header-padding-y $popover-header-padding-x;
|
||||||
|
margin-bottom: 0; // Reset the default from Reboot
|
||||||
|
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);
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-body {
|
||||||
|
padding: $popover-body-padding-y $popover-body-padding-x;
|
||||||
|
color: $popover-body-color;
|
||||||
|
}
|
||||||
124
static/scss/bootstrap/_print.scss
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||||
|
|
||||||
|
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Print styles.
|
||||||
|
// Inlined to avoid the additional HTTP request:
|
||||||
|
// http://www.phpied.com/delay-loading-your-print-css/
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
@if $enable-print-styles {
|
||||||
|
@media print {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
// Bootstrap specific; comment out `color` and `background`
|
||||||
|
//color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
|
||||||
|
text-shadow: none !important;
|
||||||
|
//background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:not(.btn) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap specific; comment the following selector out
|
||||||
|
//a[href]::after {
|
||||||
|
// content: " (" attr(href) ")";
|
||||||
|
//}
|
||||||
|
|
||||||
|
abbr[title]::after {
|
||||||
|
content: " (" attr(title) ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap specific; comment the following selector out
|
||||||
|
//
|
||||||
|
// Don't show links that are fragment identifiers,
|
||||||
|
// or use the `javascript:` pseudo protocol
|
||||||
|
//
|
||||||
|
|
||||||
|
//a[href^="#"]::after,
|
||||||
|
//a[href^="javascript:"]::after {
|
||||||
|
// content: "";
|
||||||
|
//}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap !important;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
blockquote {
|
||||||
|
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Printing Tables:
|
||||||
|
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||||
|
//
|
||||||
|
|
||||||
|
thead {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr,
|
||||||
|
img {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap specific changes start
|
||||||
|
|
||||||
|
// Specify a size and min-width to make printing closer across browsers.
|
||||||
|
// We don't set margin here because it breaks `size` in Chrome. We also
|
||||||
|
// don't use `!important` on `size` as it breaks in Chrome.
|
||||||
|
@page {
|
||||||
|
size: $print-page-size;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
min-width: $print-body-min-width !important;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
min-width: $print-body-min-width !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap components
|
||||||
|
.navbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
border: $border-width solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-bordered {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bootstrap specific changes end
|
||||||
|
}
|
||||||
|
}
|
||||||
33
static/scss/bootstrap/_progress.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
@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;
|
||||||
|
background-color: $progress-bg;
|
||||||
|
@include border-radius($progress-border-radius);
|
||||||
|
@include box-shadow($progress-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
color: $progress-bar-color;
|
||||||
|
text-align: center;
|
||||||
|
background-color: $progress-bar-bg;
|
||||||
|
@include transition($progress-bar-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-striped {
|
||||||
|
@include gradient-striped();
|
||||||
|
background-size: $progress-height $progress-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-animated {
|
||||||
|
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||||
|
}
|
||||||
482
static/scss/bootstrap/_reboot.scss
Normal file
@ -0,0 +1,482 @@
|
|||||||
|
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
|
// Reboot
|
||||||
|
//
|
||||||
|
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||||
|
// styles targeting irrelevant browsers while applying new styles.
|
||||||
|
//
|
||||||
|
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||||
|
|
||||||
|
|
||||||
|
// Document
|
||||||
|
//
|
||||||
|
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||||
|
// 2. Change the default font family in all browsers.
|
||||||
|
// 3. Correct the line height in all browsers.
|
||||||
|
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
||||||
|
// 5. 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.
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
||||||
|
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
|
||||||
|
// the `inherit` value on things like `<th>` elements.
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0; // 1
|
||||||
|
font-family: $font-family-base;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
font-weight: $font-weight-base;
|
||||||
|
line-height: $line-height-base;
|
||||||
|
color: $body-color;
|
||||||
|
text-align: left; // 3
|
||||||
|
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.
|
||||||
|
//
|
||||||
|
// Credit: https://github.com/suitcss/base
|
||||||
|
[tabindex="-1"]:focus {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Content grouping
|
||||||
|
//
|
||||||
|
// 1. Add the correct box sizing in Firefox.
|
||||||
|
// 2. Show the overflow in Edge and IE.
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; // 1
|
||||||
|
height: 0; // 1
|
||||||
|
overflow: visible; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Typography
|
||||||
|
//
|
||||||
|
|
||||||
|
// Remove top margins from headings
|
||||||
|
//
|
||||||
|
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||||
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
// stylelint-disable 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
|
||||||
|
//
|
||||||
|
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||||
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Abbreviations
|
||||||
|
//
|
||||||
|
// 1. Remove the bottom border in Firefox 39-.
|
||||||
|
// 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
|
||||||
|
|
||||||
|
abbr[title],
|
||||||
|
abbr[data-original-title] { // 4
|
||||||
|
text-decoration: underline; // 2
|
||||||
|
text-decoration: underline dotted; // 2
|
||||||
|
cursor: help; // 3
|
||||||
|
border-bottom: 0; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: $dt-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-left: 0; // Undo browser default
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
// stylelint-enable font-weight-notation
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%; // Add the correct font size in all browsers
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
// all browsers.
|
||||||
|
//
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub { bottom: -.25em; }
|
||||||
|
sup { top: -.5em; }
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Links
|
||||||
|
//
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
text-decoration: $link-decoration;
|
||||||
|
background-color: transparent; // Remove the gray background on active links in IE 10.
|
||||||
|
-webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
|
||||||
|
@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).
|
||||||
|
// 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]) {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// 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.
|
||||||
|
}
|
||||||
|
// stylelint-enable font-family-no-duplicate-names
|
||||||
|
|
||||||
|
pre {
|
||||||
|
// Remove browser default top margin
|
||||||
|
margin-top: 0;
|
||||||
|
// Reset browser default of `1em` to use `rem`s
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
// Don't allow content to break outside
|
||||||
|
overflow: auto;
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Figures
|
||||||
|
//
|
||||||
|
|
||||||
|
figure {
|
||||||
|
// Apply a consistent margin strategy (matches our type styles).
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Images and content
|
||||||
|
//
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
border-style: none; // Remove the border on images inside links in IE 10-.
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden; // Hide the overflow in IE
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Tables
|
||||||
|
//
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse; // Prevent double borders
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: $table-cell-padding;
|
||||||
|
padding-bottom: $table-cell-padding;
|
||||||
|
color: $text-muted;
|
||||||
|
text-align: left;
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
||||||
|
// closest parent with a set `text-align`.
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms
|
||||||
|
//
|
||||||
|
|
||||||
|
label {
|
||||||
|
// Allow labels to use `margin` for spacing.
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the default `border-radius` that macOS Chrome adds.
|
||||||
|
//
|
||||||
|
// Details at https://github.com/twbs/bootstrap/issues/24093
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Work around a Firefox/IE bug where the transparent `button` background
|
||||||
|
// results in a loss of the default `button` focus styles.
|
||||||
|
//
|
||||||
|
// Credit: https://github.com/suitcss/base/
|
||||||
|
button:focus {
|
||||||
|
outline: 1px dotted;
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0; // Remove the margin in Firefox and Safari
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
overflow: visible; // Show the overflow in Edge
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none; // Remove the inheritance of text transform in Firefox
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
|
||||||
|
padding: 0; // 2. Remove the padding in IE 10-
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input[type="date"],
|
||||||
|
input[type="time"],
|
||||||
|
input[type="datetime-local"],
|
||||||
|
input[type="month"] {
|
||||||
|
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||||
|
// bug where setting a custom line-height prevents text from being vertically
|
||||||
|
// centered within the input.
|
||||||
|
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||||
|
// and https://github.com/twbs/bootstrap/issues/11266
|
||||||
|
-webkit-appearance: listbox;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||||
|
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
// Browsers set a default `min-width: min-content;` on fieldsets,
|
||||||
|
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||||
|
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/12359
|
||||||
|
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||||
|
min-width: 0;
|
||||||
|
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Correct the text wrapping in Edge and IE.
|
||||||
|
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%; // 1
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
color: inherit; // 2
|
||||||
|
white-space: normal; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
}
|
||||||
|
|
||||||
|
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||||
|
// `.form-control` class can properly style them. Note that this cannot simply
|
||||||
|
// be added to `.form-control` as it's not specific enough. For details, see
|
||||||
|
// https://github.com/twbs/bootstrap/issues/11586.
|
||||||
|
outline-offset: -2px; // 2. Correct the outline style in Safari.
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||||
|
//
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
// 2. Change font properties to `inherit` in Safari.
|
||||||
|
//
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit; // 2
|
||||||
|
-webkit-appearance: button; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Correct element displays
|
||||||
|
//
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item; // Add the correct display in all browsers
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none; // Add the correct display in IE
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||||
|
// Needed for proper display in IE 10-.
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
19
static/scss/bootstrap/_root.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
:root {
|
||||||
|
// Custom variable values only support SassScript inside `#{}`.
|
||||||
|
@each $color, $value in $colors {
|
||||||
|
--#{$color}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
--#{$color}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $bp, $value in $grid-breakpoints {
|
||||||
|
--breakpoint-#{$bp}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use `inspect` for lists so that quoted items keep the quotes.
|
||||||
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||||
|
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
||||||
|
--font-family-monospace: #{inspect($font-family-monospace)};
|
||||||
|
}
|
||||||
180
static/scss/bootstrap/_tables.scss
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
//
|
||||||
|
// Basic Bootstrap table
|
||||||
|
//
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: $table-cell-padding;
|
||||||
|
vertical-align: top;
|
||||||
|
border-top: $table-border-width solid $table-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
vertical-align: bottom;
|
||||||
|
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody + tbody {
|
||||||
|
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
background-color: $body-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Condensed table w/ half padding
|
||||||
|
//
|
||||||
|
|
||||||
|
.table-sm {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: $table-cell-padding-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Bordered version
|
||||||
|
//
|
||||||
|
// Add borders all around the table and between all the columns.
|
||||||
|
|
||||||
|
.table-bordered {
|
||||||
|
border: $table-border-width solid $table-border-color;
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: $table-border-width solid $table-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-bottom-width: (2 * $table-border-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Zebra-striping
|
||||||
|
//
|
||||||
|
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||||
|
|
||||||
|
.table-striped {
|
||||||
|
tbody tr:nth-of-type(odd) {
|
||||||
|
background-color: $table-accent-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Hover effect
|
||||||
|
//
|
||||||
|
// Placed here since it has to come after the potential zebra striping
|
||||||
|
|
||||||
|
.table-hover {
|
||||||
|
tbody tr {
|
||||||
|
@include hover {
|
||||||
|
background-color: $table-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Table backgrounds
|
||||||
|
//
|
||||||
|
// Exact selectors below required to override `.table-striped` and prevent
|
||||||
|
// inheritance to nested tables.
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
@include table-row-variant($color, theme-color-level($color, -9));
|
||||||
|
}
|
||||||
|
|
||||||
|
@include table-row-variant(active, $table-active-bg);
|
||||||
|
|
||||||
|
|
||||||
|
// Dark styles
|
||||||
|
//
|
||||||
|
// Same table markup, but inverted color scheme: dark background and light text.
|
||||||
|
|
||||||
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
|
.table {
|
||||||
|
.thead-dark {
|
||||||
|
th {
|
||||||
|
color: $table-dark-color;
|
||||||
|
background-color: $table-dark-bg;
|
||||||
|
border-color: $table-dark-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thead-light {
|
||||||
|
th {
|
||||||
|
color: $table-head-color;
|
||||||
|
background-color: $table-head-bg;
|
||||||
|
border-color: $table-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-dark {
|
||||||
|
color: $table-dark-color;
|
||||||
|
background-color: $table-dark-bg;
|
||||||
|
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
thead th {
|
||||||
|
border-color: $table-dark-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-bordered {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-striped {
|
||||||
|
tbody tr:nth-of-type(odd) {
|
||||||
|
background-color: $table-dark-accent-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-hover {
|
||||||
|
tbody tr {
|
||||||
|
@include hover {
|
||||||
|
background-color: $table-dark-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Responsive tables
|
||||||
|
//
|
||||||
|
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||||
|
// size of where your table will overflow.
|
||||||
|
|
||||||
|
.table-responsive {
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
&#{$infix} {
|
||||||
|
@include media-breakpoint-down($breakpoint) {
|
||||||
|
display: block;
|
||||||
|
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 {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
115
static/scss/bootstrap/_tooltip.scss
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
// Base class
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
z-index: $zindex-tooltip;
|
||||||
|
display: block;
|
||||||
|
margin: $tooltip-margin;
|
||||||
|
// 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;
|
||||||
|
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||||
|
word-wrap: break-word;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&.show { opacity: $tooltip-opacity; }
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: $tooltip-arrow-width;
|
||||||
|
height: $tooltip-arrow-height;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-tooltip-top {
|
||||||
|
padding: $tooltip-arrow-height 0;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||||
|
border-top-color: $tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-tooltip-right {
|
||||||
|
padding: 0 $tooltip-arrow-height;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
left: 0;
|
||||||
|
width: $tooltip-arrow-height;
|
||||||
|
height: $tooltip-arrow-width;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
right: 0;
|
||||||
|
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||||
|
border-right-color: $tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-tooltip-bottom {
|
||||||
|
padding: $tooltip-arrow-height 0;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
bottom: 0;
|
||||||
|
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||||
|
border-bottom-color: $tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-tooltip-left {
|
||||||
|
padding: 0 $tooltip-arrow-height;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
right: 0;
|
||||||
|
width: $tooltip-arrow-height;
|
||||||
|
height: $tooltip-arrow-width;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||||
|
border-left-color: $tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-tooltip-auto {
|
||||||
|
&[x-placement^="top"] {
|
||||||
|
@extend .bs-tooltip-top;
|
||||||
|
}
|
||||||
|
&[x-placement^="right"] {
|
||||||
|
@extend .bs-tooltip-right;
|
||||||
|
}
|
||||||
|
&[x-placement^="bottom"] {
|
||||||
|
@extend .bs-tooltip-bottom;
|
||||||
|
}
|
||||||
|
&[x-placement^="left"] {
|
||||||
|
@extend .bs-tooltip-left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrapper for the tooltip content
|
||||||
|
.tooltip-inner {
|
||||||
|
max-width: $tooltip-max-width;
|
||||||
|
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||||
|
color: $tooltip-color;
|
||||||
|
text-align: center;
|
||||||
|
background-color: $tooltip-bg;
|
||||||
|
@include border-radius($tooltip-border-radius);
|
||||||
|
}
|
||||||
36
static/scss/bootstrap/_transitions.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
|
.fade {
|
||||||
|
opacity: 0;
|
||||||
|
@include transition($transition-fade);
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
display: none;
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
&.collapse.show {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
&.collapse.show {
|
||||||
|
display: table-row-group;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsing {
|
||||||
|
position: relative;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
@include transition($transition-collapse);
|
||||||
|
}
|
||||||