Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Bootstrap to v5.3.3 #2328

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ py: $(env)

shell: py

# empty shell
shell2: $(env)
$(with_local_env) -s RUN_CRON_JOBS=no $(env_py)

test-shell: $(env)
$(with_tests_env) $(env_py) -i $${main-liberapay/main.py}

Expand Down
6 changes: 5 additions & 1 deletion js/10-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,11 @@ Liberapay.init = function() {
$requirer.trigger('change');
});

$('[data-toggle="tooltip"]').tooltip();
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})


$('.radio input:not([type="radio"]), .radio-group input:not([type="radio"])').on('click change', function(event) {
if (event.type == 'click' && event.clientX == 0 && event.clientY == 0) {
Expand Down
6 changes: 3 additions & 3 deletions liberapay/renderers/scss.py
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import re
from urllib.parse import urlsplit

import sass
import dartsass as sass
from aspen import renderers

from ..website import website
Expand All @@ -17,10 +17,10 @@ def __init__(self, factory, *a, **kw):
renderers.Renderer.__init__(self, factory, *a, **kw)
self.cache_static = website.env.cache_static
compress = website.env.compress_assets
output_style = 'compressed' if compress else 'nested'
output_style = 'compressed' if compress else 'expanded'
kw = dict(output_style=output_style)
if self.request_processor.project_root is not None:
kw['include_paths'] = self.request_processor.project_root
kw['load_paths'] = self.request_processor.project_root
self.sass_conf = kw

# SASS doesn't support wildcard imports, so we implement it ourselves
Expand Down
2 changes: 1 addition & 1 deletion liberapay/wireup.py
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import psycopg2
from psycopg2.extensions import adapt, AsIs, new_type, register_adapter, register_type
from psycopg2_pool import PoolError
import sass
import dartsass as sass
import sentry_sdk
from state_chain import StateChain

Expand Down
8 changes: 2 additions & 6 deletions requirements_base.txt
Original file line number Diff line number Diff line change
Expand Up @@ -228,12 +228,8 @@ sentry-sdk==1.16.0 \
--hash=sha256:633edefead34d976ff22e7edc367cdf57768e24bc714615ccae746d9d91795ae \
--hash=sha256:a900845bd78c263d49695d48ce78a4bce1030bbd917e0b6cc021fc000c901113

libsass==0.22.0 \
--hash=sha256:081e256ab3c5f3f09c7b8dea3bf3bf5e64a97c6995fd9eea880639b3f93a9f9a \
--hash=sha256:3ab5ad18e47db560f4f0c09e3d28cf3bb1a44711257488ac2adad69f4f7f8425 \
--hash=sha256:65455a2728b696b62100eb5932604aa13a29f4ac9a305d95773c14aaa7200aaf \
--hash=sha256:89c5ce497fcf3aba1dd1b19aae93b99f68257e5f2026b731b00a872f13324c7f \
--hash=sha256:f1efc1b612299c88aec9e39d6ca0c266d360daa5b19d9430bdeaffffa86993f9
dart-sass==0.5.2 \
--hash=sha256:7844f2e2de071903621cf621df7d90876a2be23912b23d5722e560e5daaa86b5

environment==1.0.0 \
--hash=sha256:711bc2dc589fcc0f40d1cd916e7463e55d08ed3847fc6205549e0d3ff8084843
Expand Down
4 changes: 2 additions & 2 deletions style/base/fine-uploader.scss
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
INPUT.qq-edit-filename {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
filter: opacity(0%);
z-index: -1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
Expand All @@ -214,7 +214,7 @@ INPUT.qq-edit-filename.qq-editing {
font-size: 16px;

opacity: 1;
filter: alpha(opacity=100);
filter: opacity(100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Expand Down
158 changes: 158 additions & 0 deletions style/bootstrap/_accordion.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
//
// Base styles
//

.accordion {
// scss-docs-start accordion-css-vars
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
// scss-docs-end accordion-css-vars
}

.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
@include font-size($font-size-base);
color: var(--#{$prefix}accordion-btn-color);
text-align: left; // Reset button style
background-color: var(--#{$prefix}accordion-btn-bg);
border: 0;
@include border-radius(0);
overflow-anchor: none;
@include transition(var(--#{$prefix}accordion-transition));

&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list

&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);
transform: var(--#{$prefix}accordion-btn-icon-transform);
}
}

// Accordion icon
&::after {
flex-shrink: 0;
width: var(--#{$prefix}accordion-btn-icon-width);
height: var(--#{$prefix}accordion-btn-icon-width);
margin-left: auto;
content: "";
background-image: var(--#{$prefix}accordion-btn-icon);
background-repeat: no-repeat;
background-size: var(--#{$prefix}accordion-btn-icon-width);
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
}

&:hover {
z-index: 2;
}

&:focus {
z-index: 3;
outline: 0;
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
}
}

.accordion-header {
margin-bottom: 0;
}

.accordion-item {
color: var(--#{$prefix}accordion-color);
background-color: var(--#{$prefix}accordion-bg);
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);

&:first-of-type {
@include border-top-radius(var(--#{$prefix}accordion-border-radius));

> .accordion-header .accordion-button {
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}

&:not(:first-of-type) {
border-top: 0;
}

// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));

> .accordion-header .accordion-button {
&.collapsed {
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}

> .accordion-collapse {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
}
}
}

.accordion-body {
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
}


// Flush accordion items
//
// Remove borders and border-radius to keep accordion items edge-to-edge.

.accordion-flush {
> .accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);

&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }

// stylelint-disable selector-max-class
> .accordion-header .accordion-button {
&,
&.collapsed {
@include border-radius(0);
}
}
// stylelint-enable selector-max-class

> .accordion-collapse {
@include border-radius(0);
}
}
}

@if $enable-dark-mode {
@include color-mode(dark) {
.accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
}
}
}
68 changes: 68 additions & 0 deletions style/bootstrap/_alert.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
//
// Base styles
//

.alert {
// scss-docs-start alert-css-vars
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars

position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
color: var(--#{$prefix}alert-color);
background-color: var(--#{$prefix}alert-bg);
border: var(--#{$prefix}alert-border);
@include border-radius(var(--#{$prefix}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;
color: var(--#{$prefix}alert-link-color);
}


// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

.alert-dismissible {
padding-right: $alert-dismissible-padding-r;

// Adjust close link position
.btn-close {
position: absolute;
top: 0;
right: 0;
z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x;
}
}


// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
.alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
}
}
// scss-docs-end alert-modifiers
73 changes: 0 additions & 73 deletions style/bootstrap/_alerts.scss

This file was deleted.

Loading