-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): new Footer component (#970)
Signed-off-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com> Signed-off-by: Julien Déramond <julien.deramond@orange.com> Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Co-authored-by: Isabelle Chanclou <isabelle.chanclou@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
- Loading branch information
3 people
authored
Apr 22, 2022
1 parent
b20233a
commit ac18dce
Showing
16 changed files
with
526 additions
and
472 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| .footer .navbar-nav { | ||
| --#{$prefix}nav-link-font-weight: #{$font-weight-bold}; | ||
|
|
||
| flex-wrap: wrap; | ||
| font-size: $footer-font-size-sm; | ||
| line-height: $footer-line-height-sm; | ||
| letter-spacing: $footer-letter-spacing; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .nav-link { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 0; | ||
| outline-offset: map-get($spacers, 1); | ||
|
|
||
| &.active::before { | ||
| content: unset; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .footer-heading { | ||
| font-size: $footer-font-size-md; | ||
| font-weight: $font-weight-bold; | ||
| line-height: $footer-line-height-md; | ||
| letter-spacing: $footer-letter-spacing; | ||
| } | ||
|
|
||
| .footer-title-content { | ||
| padding-top: $footer-title-content-padding-top; | ||
| padding-bottom: $footer-title-content-padding-bottom; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| padding-bottom: $footer-title-content-padding-bottom-md; | ||
| } | ||
|
|
||
| .footer-heading { | ||
| margin-bottom: $footer-title-margin-bottom; | ||
| } | ||
| } | ||
|
|
||
| .footer-social { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-top: $footer-social-padding-top; | ||
| padding-bottom: $footer-social-padding-bottom; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| flex-direction: row; | ||
| padding-top: $footer-social-padding-top-md; | ||
| } | ||
|
|
||
| > .footer-heading { | ||
| margin: $footer-social-title-margin-md; | ||
| white-space: nowrap; | ||
|
|
||
| @include media-breakpoint-down(md) { | ||
| margin: 0 0 $footer-title-margin-bottom; | ||
| font-size: $footer-font-size-sm; | ||
| line-height: $footer-line-height-sm; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .footer-nav { | ||
| @include media-breakpoint-down(md) { | ||
| max-width: 100vw; | ||
| padding: 0; | ||
|
|
||
| .row { // Here to replace overflow-x on parent that allow focus on parent. | ||
| margin-right: 0; | ||
| margin-left: 0; | ||
|
|
||
| > * { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .footer-column:first-of-type .accordion-header:first-of-type, | ||
| .accordion .accordion-item { | ||
| border: 0; | ||
| } | ||
|
|
||
| .accordion-header { | ||
| @include media-breakpoint-up(md) { | ||
| padding: $footer-nav-padding-top 0 $spacer; | ||
| border: 0; | ||
| } | ||
|
|
||
| .accordion-button { | ||
| font-size: $footer-font-size-sm; | ||
| line-height: $footer-accordion-line-height; | ||
| letter-spacing: $footer-letter-spacing; | ||
|
|
||
| &::after { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| all: unset; | ||
| pointer-events: none; | ||
|
|
||
| &::after { | ||
| content: unset; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .navbar-nav { | ||
| gap: $footer-gap-xl; | ||
| padding: $footer-nav-list-padding-top 0 $footer-nav-list-padding-bottom; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| flex-direction: column; | ||
| gap: $footer-gap; | ||
| padding-top: $footer-nav-list-padding-top-md; | ||
| padding-bottom: $footer-nav-list-padding-bottom-md; | ||
| font-size: $footer-font-size-md; | ||
| line-height: $footer-line-height-md; | ||
| } | ||
|
|
||
| @include media-breakpoint-up(lg) { | ||
| padding-bottom: $footer-nav-list-padding-bottom-lg; | ||
| } | ||
| } | ||
|
|
||
| .accordion-collapse { | ||
| @include media-breakpoint-up(md) { | ||
| display: flex; | ||
| padding-left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .footer-service { | ||
| padding-top: subtract($footer-service-padding-y, .0625rem); | ||
| padding-bottom: $footer-service-padding-y; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| padding-top: add($footer-service-padding-y-md, .0625rem); | ||
| padding-bottom: $footer-service-padding-y-md; | ||
| } | ||
|
|
||
| .nav-link > span { | ||
| padding-top: $footer-service-link-padding-top; | ||
| } | ||
| } | ||
|
|
||
| .footer-terms { | ||
| padding-top: $footer-terms-padding-top; | ||
| padding-bottom: $footer-terms-padding-bottom; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| padding-top: $footer-terms-padding-y-md; | ||
| padding-bottom: $footer-terms-padding-y-md; | ||
| } | ||
|
|
||
| .navbar-nav { | ||
| gap: $footer-gap-xl; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| --- | ||
| layout: docs | ||
| title: Footer | ||
| description: Documentation and examples for a powerful and responsive Boosted's footer. It includes support for branding, navigation and more. | ||
| group: components | ||
| aliases: "/docs/5.1/components/footer/" | ||
| toc: true | ||
| --- | ||
|
|
||
| ## How it works | ||
|
|
||
| The footer is basically a `<footer>` tag with a `.bg-dark` class. It comes with 5 ready to use bars which should be arranged vertically in the following order: | ||
| - Title with content bar | ||
| - Follow us bar | ||
| - Navigation bar | ||
| - Service bar | ||
| - Terms & Conditions **mandatory** bar | ||
|
|
||
| You can choose to display each part or not, except the last one which is mandatory. No matter how many parts you use, they should follow the order listed above. | ||
|
|
||
| If these available parts don't meet your specific needs, feel free to develop your own custom part accordingly to the Orange Design System. | ||
|
|
||
| ## Example | ||
|
|
||
| {{< orange-footer title_content=true follow=true nav=true service=true mandatory=true id="1" >}} | ||
| {{< /orange-footer >}} | ||
|
|
||
| ## Footer bars | ||
|
|
||
| {{< callout info >}} | ||
| The `<h2></h2>` and `<h3></h3>` tags used in the following sections are informative, you **need** to adapt those to your website's title hierarchy. | ||
| {{< /callout >}} | ||
|
|
||
| The footer bars are independent from each other. Just add a dark separator between each bar of the final footer. | ||
|
|
||
| ```html | ||
| <div class="border-bottom border-1 border-dark"></div> | ||
| ``` | ||
|
|
||
| ### Title with content bar | ||
|
|
||
| This footer bar is a container with a `.footer-title-content` class. This container includes a title and a `.row` container in which to add your content. See below an example with a mail form content. | ||
|
|
||
| {{< example class="p-0" >}} | ||
| {{< orange-footer title_content=true >}} | ||
| {{< /orange-footer >}} | ||
| {{< /example >}} | ||
|
|
||
| ### Follow us bar | ||
|
|
||
| This footer bar is a container with `.footer-social` class into which a list of social media icons can be added: | ||
|
|
||
| {{< example class="p-0" >}} | ||
| {{< orange-footer follow=true >}} | ||
| {{< /orange-footer >}} | ||
| {{< /example >}} | ||
|
|
||
| ### Navigation bar | ||
|
|
||
| This footer bar is a container with a `.footer-nav` class meant to contain navigation links organized in columns. You can add several categories in one footer-column by adding either accordion items or their content directly inside the columns. You can also adjust every column size depending on the breakpoint. Try to have equal sized columns height and it will wrap nicely. | ||
|
|
||
| {{< callout warning >}} | ||
| This container needs our Collapse JavaScript plugin to work properly. | ||
| {{< /callout >}} | ||
|
|
||
| {{< callout warning >}} | ||
| Depending on the screen size and for accessibility concerns, you need to write each category title in 2 different ways: | ||
|
|
||
| ```html | ||
| <h3 class="accordion-header footer-heading" id="headingOne2"> | ||
|
|
||
| <!-- For small screens --> | ||
| <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2"> | ||
| Category | ||
| </button> | ||
|
|
||
| <!-- For large screens --> | ||
| <span class="d-none d-md-flex">Category</span> | ||
| </h3> | ||
| ``` | ||
| {{< /callout >}} | ||
|
|
||
| {{< example class="p-0" >}} | ||
| {{< orange-footer nav=true id="2" >}} | ||
| {{< /orange-footer >}} | ||
| {{< /example >}} | ||
|
|
||
| ### Service bar | ||
|
|
||
| The footer is a container with a `.footer-service` class. Its purpose is to display customer services links. | ||
|
|
||
| {{< example class="p-0" >}} | ||
| {{< orange-footer service=true >}} | ||
| {{< /orange-footer >}} | ||
| {{< /example >}} | ||
|
|
||
| ### Mandatory Terms & Conditions bar | ||
|
|
||
| The footer is a container with a `.footer-terms` class. This footer bar is **mandatory** in every footer and should come as the last bar of the footer. | ||
|
|
||
| {{< example class="p-0" >}} | ||
| {{< orange-footer mandatory=true >}} | ||
| {{< /orange-footer >}} | ||
| {{< /example >}} | ||
|
|
||
| ## Sass | ||
|
|
||
| ### Variables | ||
|
|
||
| For more details, please have a look at the exhaustive list of available variables: | ||
|
|
||
| {{< scss-docs name="footer" file="scss/_variables.scss" >}} |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.