Skip to content

Commit e2343de

Browse files
committed
update to bootsrap 5 CSS, WIP
1 parent db21b40 commit e2343de

File tree

122 files changed

+5241
-4136
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+5241
-4136
lines changed

hugo/assets/css/_homepage.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.acl-news {
44
.acl-news-date {
55
@extend .mb-2;
6-
@extend .font-weight-light;
6+
@extend .fw-light;
77
font-style: italic;
88
}
99

hugo/assets/css/main.scss

+55-48
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,61 @@ $cyan: #29ABE0;
1010
$secondary: #dee2e6;
1111
$yiq-contrasted-threshold: 200;
1212

13-
/* Required Bootstrap components */
14-
@import 'vendor/bootstrap/scss/functions';
15-
@import 'vendor/bootstrap/scss/variables';
16-
@import 'vendor/bootstrap/scss/mixins';
17-
18-
$attachment_color: darken( $green, 10% );
19-
$theme-colors: map-merge(
20-
$theme-colors,
21-
(
22-
"attachment": $attachment_color
23-
)
24-
);
25-
26-
/* Optional Bootstrap components -- we only include those we need */
27-
@import 'vendor/bootstrap/scss/root';
28-
@import 'vendor/bootstrap/scss/reboot';
29-
@import 'vendor/bootstrap/scss/type';
30-
@import 'vendor/bootstrap/scss/images';
31-
@import 'vendor/bootstrap/scss/code';
32-
@import 'vendor/bootstrap/scss/grid';
33-
@import 'vendor/bootstrap/scss/tables';
34-
@import 'vendor/bootstrap/scss/forms';
35-
@import 'vendor/bootstrap/scss/buttons';
36-
@import 'vendor/bootstrap/scss/transitions';
37-
// @import 'vendor/bootstrap/scss/dropdown';
38-
// @import 'vendor/bootstrap/scss/button-group';
39-
// @import 'vendor/bootstrap/scss/input-group';
40-
// @import 'vendor/bootstrap/scss/custom-forms';
41-
@import 'vendor/bootstrap/scss/nav';
42-
@import 'vendor/bootstrap/scss/navbar';
43-
@import 'vendor/bootstrap/scss/card';
44-
// @import 'vendor/bootstrap/scss/breadcrumb';
45-
@import 'vendor/bootstrap/scss/pagination';
46-
@import 'vendor/bootstrap/scss/badge';
47-
// @import 'vendor/bootstrap/scss/jumbotron';
48-
@import 'vendor/bootstrap/scss/alert';
49-
// @import 'vendor/bootstrap/scss/progress';
50-
// @import 'vendor/bootstrap/scss/media';
51-
@import 'vendor/bootstrap/scss/list-group';
52-
@import 'vendor/bootstrap/scss/close';
53-
// @import 'vendor/bootstrap/scss/toasts';
54-
@import 'vendor/bootstrap/scss/modal';
55-
@import 'vendor/bootstrap/scss/tooltip';
56-
// @import 'vendor/bootstrap/scss/popover';
57-
// @import 'vendor/bootstrap/scss/carousel';
58-
// @import 'vendor/bootstrap/scss/spinners';
59-
@import 'vendor/bootstrap/scss/utilities';
60-
@import 'vendor/bootstrap/scss/print';
13+
@import 'vendor/bootstrap/scss/bootstrap';
14+
15+
// /* Required Bootstrap components */
16+
// @import 'vendor/bootstrap/scss/functions';
17+
// @import 'vendor/bootstrap/scss/variables';
18+
// @import 'vendor/bootstrap/scss/mixins';
19+
// @import 'vendor/bootstrap/scss/utilities';
20+
21+
// $attachment_color: darken( $green, 10% );
22+
// $theme-colors: map-merge(
23+
// $theme-colors,
24+
// (
25+
// "attachment": $attachment_color
26+
// )
27+
// );
28+
29+
// /* Optional Bootstrap components -- we only include those we need */
30+
// @import 'vendor/bootstrap/scss/root';
31+
// @import 'vendor/bootstrap/scss/reboot';
32+
// @import 'vendor/bootstrap/scss/type';
33+
// @import 'vendor/bootstrap/scss/images';
34+
// @import 'vendor/bootstrap/scss/containers';
35+
// // @import 'vendor/bootstrap/scss/code';
36+
// @import 'vendor/bootstrap/scss/grid';
37+
// @import 'vendor/bootstrap/scss/tables';
38+
// @import 'vendor/bootstrap/scss/forms';
39+
// @import 'vendor/bootstrap/scss/buttons';
40+
// @import 'vendor/bootstrap/scss/transitions';
41+
// // @import 'vendor/bootstrap/scss/dropdown';
42+
// // @import 'vendor/bootstrap/scss/button-group';
43+
// // @import 'vendor/bootstrap/scss/input-group';
44+
// // @import 'vendor/bootstrap/scss/custom-forms';
45+
// @import 'vendor/bootstrap/scss/nav';
46+
// @import 'vendor/bootstrap/scss/navbar';
47+
// @import 'vendor/bootstrap/scss/card';
48+
// // @import 'vendor/bootstrap/scss/breadcrumb';
49+
// @import 'vendor/bootstrap/scss/pagination';
50+
// @import 'vendor/bootstrap/scss/badge';
51+
// // @import 'vendor/bootstrap/scss/jumbotron';
52+
// @import 'vendor/bootstrap/scss/alert';
53+
// // @import 'vendor/bootstrap/scss/progress';
54+
// // @import 'vendor/bootstrap/scss/media';
55+
// @import 'vendor/bootstrap/scss/list-group';
56+
// @import 'vendor/bootstrap/scss/close';
57+
// // @import 'vendor/bootstrap/scss/toasts';
58+
// @import 'vendor/bootstrap/scss/modal';
59+
// @import 'vendor/bootstrap/scss/tooltip';
60+
// // @import 'vendor/bootstrap/scss/popover';
61+
// // @import 'vendor/bootstrap/scss/carousel';
62+
// // @import 'vendor/bootstrap/scss/spinners';
63+
// // @import 'vendor/bootstrap/scss/utilities';
64+
// // @import 'vendor/bootstrap/scss/print';
65+
66+
// @import 'vendor/bootstrap/scss/helpers';
67+
// @import 'vendor/bootstrap/scss/utilities/api';
6168

6269
@import 'homepage';
6370
@import 'info';
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
//
2+
// Base styles
3+
//
4+
5+
.accordion-button {
6+
position: relative;
7+
display: flex;
8+
align-items: center;
9+
width: 100%;
10+
padding: $accordion-button-padding-y $accordion-button-padding-x;
11+
@include font-size($font-size-base);
12+
color: $accordion-button-color;
13+
text-align: left; // Reset button style
14+
background-color: $accordion-button-bg;
15+
border: 0;
16+
@include border-radius(0);
17+
overflow-anchor: none;
18+
@include transition($accordion-transition);
19+
20+
&:not(.collapsed) {
21+
color: $accordion-button-active-color;
22+
background-color: $accordion-button-active-bg;
23+
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
24+
25+
&::after {
26+
background-image: escape-svg($accordion-button-active-icon);
27+
transform: $accordion-icon-transform;
28+
}
29+
}
30+
31+
// Accordion icon
32+
&::after {
33+
flex-shrink: 0;
34+
width: $accordion-icon-width;
35+
height: $accordion-icon-width;
36+
margin-left: auto;
37+
content: "";
38+
background-image: escape-svg($accordion-button-icon);
39+
background-repeat: no-repeat;
40+
background-size: $accordion-icon-width;
41+
@include transition($accordion-icon-transition);
42+
}
43+
44+
&:hover {
45+
z-index: 2;
46+
}
47+
48+
&:focus {
49+
z-index: 3;
50+
border-color: $accordion-button-focus-border-color;
51+
outline: 0;
52+
box-shadow: $accordion-button-focus-box-shadow;
53+
}
54+
}
55+
56+
.accordion-header {
57+
margin-bottom: 0;
58+
}
59+
60+
.accordion-item {
61+
background-color: $accordion-bg;
62+
border: $accordion-border-width solid $accordion-border-color;
63+
64+
&:first-of-type {
65+
@include border-top-radius($accordion-border-radius);
66+
67+
.accordion-button {
68+
@include border-top-radius($accordion-inner-border-radius);
69+
}
70+
}
71+
72+
&:not(:first-of-type) {
73+
border-top: 0;
74+
}
75+
76+
// Only set a border-radius on the last item if the accordion is collapsed
77+
&:last-of-type {
78+
@include border-bottom-radius($accordion-border-radius);
79+
80+
.accordion-button {
81+
&.collapsed {
82+
@include border-bottom-radius($accordion-inner-border-radius);
83+
}
84+
}
85+
86+
.accordion-collapse {
87+
@include border-bottom-radius($accordion-border-radius);
88+
}
89+
}
90+
}
91+
92+
.accordion-body {
93+
padding: $accordion-body-padding-y $accordion-body-padding-x;
94+
}
95+
96+
97+
// Flush accordion items
98+
//
99+
// Remove borders and border-radius to keep accordion items edge-to-edge.
100+
101+
.accordion-flush {
102+
.accordion-collapse {
103+
border-width: 0;
104+
}
105+
106+
.accordion-item {
107+
border-right: 0;
108+
border-left: 0;
109+
@include border-radius(0);
110+
111+
&:first-child { border-top: 0; }
112+
&:last-child { border-bottom: 0; }
113+
114+
.accordion-button {
115+
@include border-radius(0);
116+
}
117+
}
118+
}

hugo/assets/css/vendor/bootstrap/scss/_alert.scss

+15-9
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,31 @@
2727
// Expand the right padding and account for the close button's positioning.
2828

2929
.alert-dismissible {
30-
padding-right: $close-font-size + $alert-padding-x * 2;
30+
padding-right: $alert-dismissible-padding-r;
3131

3232
// Adjust close link position
33-
.close {
33+
.btn-close {
3434
position: absolute;
3535
top: 0;
3636
right: 0;
37-
padding: $alert-padding-y $alert-padding-x;
38-
color: inherit;
37+
z-index: $stretched-link-z-index + 1;
38+
padding: $alert-padding-y * 1.25 $alert-padding-x;
3939
}
4040
}
4141

4242

43-
// Alternate styles
44-
//
43+
// scss-docs-start alert-modifiers
4544
// Generate contextual modifier classes for colorizing the alert.
4645

47-
@each $color, $value in $theme-colors {
48-
.alert-#{$color} {
49-
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
46+
@each $state, $value in $theme-colors {
47+
$alert-background: shift-color($value, $alert-bg-scale);
48+
$alert-border: shift-color($value, $alert-border-scale);
49+
$alert-color: shift-color($value, $alert-color-scale);
50+
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
51+
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
52+
}
53+
.alert-#{$state} {
54+
@include alert-variant($alert-background, $alert-border, $alert-color);
5055
}
5156
}
57+
// scss-docs-end alert-modifiers

hugo/assets/css/vendor/bootstrap/scss/_badge.scss

+3-27
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,15 @@
66
.badge {
77
display: inline-block;
88
padding: $badge-padding-y $badge-padding-x;
9-
font-size: $badge-font-size;
9+
@include font-size($badge-font-size);
1010
font-weight: $badge-font-weight;
1111
line-height: 1;
12+
color: $badge-color;
1213
text-align: center;
1314
white-space: nowrap;
1415
vertical-align: baseline;
1516
@include border-radius($badge-border-radius);
16-
17-
@at-root a#{&} {
18-
@include hover-focus {
19-
text-decoration: none;
20-
}
21-
}
17+
@include gradient-bg();
2218

2319
// Empty badges collapse automatically
2420
&:empty {
@@ -31,23 +27,3 @@
3127
position: relative;
3228
top: -1px;
3329
}
34-
35-
// Pill badges
36-
//
37-
// Make them extra rounded with a modifier to replace v3's badges.
38-
39-
.badge-pill {
40-
padding-right: $badge-pill-padding-x;
41-
padding-left: $badge-pill-padding-x;
42-
@include border-radius($badge-pill-border-radius);
43-
}
44-
45-
// Colors
46-
//
47-
// Contextual variations (linked badges get darker on :hover).
48-
49-
@each $color, $value in $theme-colors {
50-
.badge-#{$color} {
51-
@include badge-variant($value);
52-
}
53-
}

hugo/assets/css/vendor/bootstrap/scss/_breadcrumb.scss

+5-18
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
flex-wrap: wrap;
44
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
55
margin-bottom: $breadcrumb-margin-bottom;
6+
@include font-size($breadcrumb-font-size);
67
list-style: none;
78
background-color: $breadcrumb-bg;
89
@include border-radius($breadcrumb-border-radius);
@@ -11,30 +12,16 @@
1112
.breadcrumb-item {
1213
// The separator between breadcrumbs (by default, a forward-slash: "/")
1314
+ .breadcrumb-item {
14-
padding-left: $breadcrumb-item-padding;
15+
padding-left: $breadcrumb-item-padding-x;
1516

1617
&::before {
17-
display: inline-block; // Suppress underlining of the separator in modern browsers
18-
padding-right: $breadcrumb-item-padding;
18+
float: left; // Suppress inline spacings and underlining of the separator
19+
padding-right: $breadcrumb-item-padding-x;
1920
color: $breadcrumb-divider-color;
20-
content: $breadcrumb-divider;
21+
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
2122
}
2223
}
2324

24-
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
25-
// without `<ul>`s. The `::before` pseudo-element generates an element
26-
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27-
//
28-
// To trick IE into suppressing the underline, we give the pseudo-element an
29-
// underline and then immediately remove it.
30-
+ .breadcrumb-item:hover::before {
31-
text-decoration: underline;
32-
}
33-
// stylelint-disable-next-line no-duplicate-selectors
34-
+ .breadcrumb-item:hover::before {
35-
text-decoration: none;
36-
}
37-
3825
&.active {
3926
color: $breadcrumb-active-color;
4027
}

0 commit comments

Comments
 (0)