Skip to content
This repository has been archived by the owner on Aug 13, 2019. It is now read-only.

ON HOLD: STIJ-183: POC - footer with CSS Grid and flexbox fallback. #156

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

ON HOLD: STIJ-183: POC - footer with CSS Grid and flexbox fallback. #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7c3de6
STIJ-183: POC - footer with CSS Grid and flexbox fallback.
meirege Nov 28, 2017
d25ccbb
STIJ-183: Fixed sass lint file with an exclude + added molecule speci…
meirege Nov 29, 2017
1fc7215
Merge branch 'develop' into feature/STIJ-183
meirege Nov 29, 2017
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
1 change: 1 addition & 0 deletions .sass-lint.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ rules:
no-duplicate-properties:
- 2
- exclude:
- display
- padding-left
- padding-right
- padding-top
Expand Down
4 changes: 0 additions & 4 deletions components/11-base/section/_section.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,3 @@
color: map-get($colors, 'section-text-color');
}
}

*[class*="section--"] {
@include clearfix();
}
6 changes: 5 additions & 1 deletion components/31-molecules/blocks/partnership-block/_partnership-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
.db-block-partnership {
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 100%;
padding-top: 6.25rem;
background-image: url('#{$styleguide-dir}/img/svg/stad-gent.svg') ;
background-repeat: no-repeat;
background-position: top right;
background-position: bottom 2.5rem right;
background-size: 8.75rem;
color: $color-gray;
text-align: right;
Expand Down
54 changes: 23 additions & 31 deletions components/41-organisms/footer/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,39 @@
// General footer styling.
footer {
padding: 1.5rem 0;

p {
color: $color-gray;
}

.db-block-partnership {
@include tablet {
margin-top: 6rem;
}
@include tablet {
padding: 1.5rem;
}
}

// Footer 2 column layout.
footer[data-columns="2"] {
.footer--column {
@include make-mobile-column(12);
@include make-tablet-column(6);
@include make-desktop-column(6);
}
}
padding: 1.5rem .5rem;

// Footer 3 column layout.
footer[data-columns="3"] {
.footer--column {
@include make-mobile-column(12);
@include make-tablet-column(6);
@include make-desktop-column(4);
p {
color: $color-gray;
}
}

// Footer 4 column layout.
footer[data-columns="4"] {
.footer--column {
@include make-mobile-column(12);
@include make-tablet-column(6);
@include make-desktop-column(3);
@include tablet {
display: flex;
display: grid;
grid-template-columns: repeat(2, 1fr [footer-column]);
grid-gap: 1rem;
grid-auto-rows: 275px;
}
@include desktop {
grid-template-columns: repeat(4, 1fr [footer-column]);
grid-auto-rows: 400px;
}

.db-block-partnership {
.footer--column {
@include tablet {
width: 50%;
}
@include desktop {
margin-top: 12.5rem;
width: 25%;
}
@supports (display: grid) {
width: auto;
}
}
}
28 changes: 12 additions & 16 deletions components/41-organisms/footer/footer.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
<footer class="section--wrapper" role="contentinfo" data-columns="4">
<div class="content-container">
<div class="row">
<div class="footer--column">
{% include '@gentinfo-island' %}
</div>
<div class="footer--column">
{% include '@post-address-block' %}
{% include '@disclaimer-block' %}
</div>
<div class="footer--column">
{% include '@social-media-block' %}
</div>
<div class="footer--column">
{% include '@partnership-block' %}
</div>
</div>
<div class="footer--column">
{% include '@gentinfo-island' %}
</div>
<div class="footer--column">
{% include '@post-address-block' %}
{% include '@disclaimer-block' %}
</div>
<div class="footer--column">
{% include '@social-media-block' %}
</div>
<div class="footer--column">
{% include '@partnership-block' %}
</div>
</footer>