Skip to content

Commit

Permalink
chore/merge-main: finish remaining modifications after Bootstrap desi…
Browse files Browse the repository at this point in the history 
…gn doc refactoring (#1257)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
  • Loading branch information
@julien-deramond @louismaximepiton
julien-deramond and louismaximepiton committed Jun 23, 2022
1 parent f892f17 commit fd6c878
Show file tree
Hide file tree
Showing 30 changed files with 235 additions and 302 deletions.
2 changes: 1 addition & 1 deletion build/.pa11yci.json
View file
Expand Up @@ -5,7 +5,7 @@
"runners": [
"axe"
],
"hideElements": ".bd-search, [id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch, .nav-tabs .nav-item .nav-link.disabled",
"hideElements": "[id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch, .nav-tabs .nav-item .nav-link.disabled, body > div.position-fixed:last-of-type",
"ignore": [
"heading-order",
"scrollable-region-focusable"
Expand Down
7 changes: 0 additions & 7 deletions scss/_navbar.scss
View file
Expand Up @@ -453,13 +453,6 @@
display: none;
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// TODO: Is it really useful in Boosted?
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
Expand Down
9 changes: 0 additions & 9 deletions site/assets/js/code-examples.js
View file
Expand Up @@ -18,15 +18,6 @@
const btnTitle = 'Copy to clipboard'
const btnEdit = 'Edit on StackBlitz'

// ////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////
// TODO: Bootstrap can remove width, height and
// fill="currentColor" of <svg class="bi"... since ".bi"
// already does that
// ////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////
// Boosted mod: removed unused svg height, width and fill="currentColor"
const btnHtml = [
'<div class="bd-code-snippet">',
Expand Down
11 changes: 0 additions & 11 deletions site/assets/scss/_boosted.scss
View file
Expand Up @@ -125,17 +125,6 @@ body {
}
}

// Docs table
.table-guidelines {
tr {
border: 0;
}

th {
vertical-align: middle;
}
}

// "Added in vX.Y.Z" areas
// stylelint-disable-next-line selector-max-class, selector-no-qualifying-type
small.d-inline-flex.px-2.py-1.font-monospace.text-muted.border.rounded-3 {
Expand Down
29 changes: 2 additions & 27 deletions site/assets/scss/_clipboard-js.scss
View file
Expand Up @@ -27,13 +27,6 @@
border: 0;
@include border-radius(.25rem);

////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
// TODO: see if we can't use a btn-* class instead
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
&:hover {
color: $primary;
}
Expand All @@ -53,28 +46,10 @@
.btn-clipboard {
position: relative;
z-index: 2;
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
// TODO: check all cases
// TODO: see if we can't use $border-something
// TODO: px >>> rem
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
margin-top: 2px; // Boosted mod
margin-right: 2px; // Boosted mod
margin-top: $border-width; // Boosted mod
margin-right: $border-width; // Boosted mod
}

////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
// Boosted mod: removed it in favor of using utility classes
// in shortcodes > example.html
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////

/* .highlight-toolbar {
.btn-clipboard {
margin-top: 0;
Expand Down
42 changes: 21 additions & 21 deletions site/assets/scss/_component-examples.scss
View file
Expand Up @@ -4,10 +4,10 @@

.bd-example-snippet {
border: solid $gray-400; // Boosted mod: change border color
border-width: 1px 0;
border-width: map-get($border-widths, 1) 0;

@include media-breakpoint-up(md) {
border-width: 1px;
border-width: map-get($border-widths, 1);
}
}

Expand All @@ -18,22 +18,22 @@
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
border: solid $gray-400; // Boosted mod: change border color
border-width: 1px 0;
border-width: map-get($border-widths, 1) 0;
@include clearfix();

@include media-breakpoint-up(md) {
--bd-example-padding: 1.5rem;

margin-right: 0;
margin-left: 0;
border-width: 1px;
border-width: map-get($border-widths, 1);
@include border-top-radius(var(--bs-border-radius));
}

+ .bd-code-snippet {
@include border-top-radius(0);
border: solid $gray-400; // Boosted mod: change border color
border-width: 0 1px 1px;
border-width: 0 map-get($border-widths, 1) map-get($border-widths, 1);
}

+ p {
Expand Down Expand Up @@ -82,7 +82,7 @@

// List groups
> .list-group {
max-width: 400px;
max-width: 25rem;
}

> [class*="list-group-horizontal"] {
Expand Down Expand Up @@ -118,7 +118,7 @@
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(var(--bd-violet-rgb), .1);
border: 1px solid rgba(var(--bd-violet-rgb), .25);
border: map-get($border-widths, 1) solid rgba(var(--bd-violet-rgb), .25);
}

.bd-example-row .row + .row,
Expand All @@ -133,12 +133,12 @@

.bd-example-flex div {
background-color: rgba($bd-purple, .15);
border: 1px solid rgba($bd-purple, .15);
border: map-get($border-widths, 1) solid rgba($bd-purple, .15);
}

// Grid mixins
.example-container {
width: 800px;
width: 50rem;
@include make-container();
}

Expand Down Expand Up @@ -201,7 +201,7 @@
.offcanvas {
position: static;
display: block;
height: 200px;
height: 12.5rem;
visibility: visible;
transform: translate(0);
}
Expand All @@ -220,32 +220,32 @@

// scss-docs-start custom-popovers
.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-max-width: 12.5rem;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-header-color: var(--bs-white);
--bs-popover-header-color: var(--bs-black); // Boosted mod: text-dark on primary
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
}
// scss-docs-end custom-popovers

// Scrollspy demo on fixed height div
.scrollspy-example {
height: 200px;
height: 12.5rem;
margin-top: .5rem;
overflow: auto;
}

.scrollspy-example-2 {
height: 350px;
height: 21.875rem;
overflow: auto;
}

.simple-list-example-scrollspy {
.active {
background-color: rgba(var(--bd-violet-rgb), .15);
}
// Boosted mod
.simple-list-example-scrollspy .active {
color: var(--#{$prefix}link-hover-color);
}
// End mod

.bd-example-border-utils {
[class^="border"] {
Expand Down Expand Up @@ -274,7 +274,7 @@
padding: 2rem;

.position-relative {
height: 200px;
height: 12.5rem;
background-color: #f5f5f5;
}

Expand Down Expand Up @@ -305,7 +305,7 @@

// Toasts
.bd-example-toasts {
min-height: 240px;
min-height: 15rem;
}

//
Expand Down Expand Up @@ -366,5 +366,5 @@
.highlight-toolbar {
background-color: $gray-100; // Boosted mod: change background color instead of using .bg-light
border: solid $gray-400; // Boosted mod: change border color
border-width: 1px 0;
border-width: map-get($border-widths, 1) 0;
}
18 changes: 2 additions & 16 deletions site/assets/scss/_content.scss
View file
Expand Up @@ -101,13 +101,6 @@
fill: currentcolor;
}

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
// TODO: test into Bootstrap if there's not a conflict with .icon-link in features.css
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
.icon-link {
display: flex;
align-items: center;
Expand All @@ -116,18 +109,11 @@
backface-visibility: hidden;

.bi {
width: 1.5em;
height: 1.5em;
width: .75em; // Boosted mod
height: .75em; // Boosted mod
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
}

/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
// TODO: Do we keep this animation in Boosted?
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
&:hover {
.bi {
transform: translate3d(5px, 0, 0);
Expand Down
17 changes: 8 additions & 9 deletions site/assets/scss/_layout.scss
View file
@@ -1,12 +1,11 @@
///////////////////////////////////////////////
///////////////////////////////////////////////
///////////////////////////////////////////////
// TODO: check me! Not sure what's the purpose of --bs-gutter-x
///////////////////////////////////////////////
///////////////////////////////////////////////
///////////////////////////////////////////////
.bd-gutter {
--bs-gutter-x: #{$bd-gutter-x};
--bs-gutter-x: #{$bd-gutter-x * 2}; // Boosted mod: changed value

// Boosted mod
@include media-breakpoint-up(md) {
--bs-gutter-x: #{$bd-gutter-x * 4};
}
// End mod
}

.bd-layout {
Expand All @@ -26,7 +25,7 @@
grid-area: main;

@include media-breakpoint-down(lg) {
max-width: 760px;
// Boosted mod: no max-width
margin-inline: auto;
}

Expand Down
20 changes: 5 additions & 15 deletions site/assets/scss/_masthead.scss
View file
Expand Up @@ -3,10 +3,7 @@
padding: 3rem 0;
// Boosted mod: no gradient background image

h1 {
@include font-size(4rem);
line-height: 1;
}
// Boosted mod: no extra h1 rule

.lead {
@include font-size(1rem);
Expand All @@ -20,14 +17,15 @@
}

.highlight {
padding: .5rem 4rem .5rem 1rem;
// Boosted mod
padding: .72rem 4rem .5rem 1rem;
line-height: 1.25;
background-color: rgba(var(--bs-body-color-rgb), .075);
@include border-radius(.5rem);
// End mod
}

.btn-clipboard {
margin-top: .4rem;
margin-top: .5rem;
background-color: transparent;
}

Expand Down Expand Up @@ -71,12 +69,4 @@
}
}

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
// Boosted mod: no .masthead-followup-svg
// Boosted mod: no .masthead-notice
// TODO: check if it's the case in Bootstrap as well
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

0 comments on commit fd6c878

Please sign in to comment.