-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Added equal height grid row pattern with full screen sized dividers Signed-off-by: Mason Hu <mason.hu@canonical.com>
- Loading branch information
Showing
11 changed files
with
631 additions
and
12 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
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,147 @@ | ||
@import 'settings'; | ||
|
||
@mixin vf-p-equal-height-row { | ||
.p-equal-height-row { | ||
display: grid; | ||
grid-template-columns: subgrid; | ||
position: relative; | ||
|
||
.p-equal-height-row__col { | ||
border-top-color: $colors--theme--border-default; | ||
border-top-style: solid; | ||
border-top-width: 1px; | ||
display: grid; | ||
grid-column: span $grid-columns-small; | ||
grid-row: span 4; | ||
grid-template-rows: subgrid; | ||
position: relative; | ||
|
||
.p-equal-height-row__col-item { | ||
grid-column: span $grid-columns-small; | ||
} | ||
|
||
.p-equal-height-row__col-item:first-child { | ||
grid-row: auto; | ||
} | ||
|
||
@media screen and ($breakpoint-small <= width < $breakpoint-large) { | ||
grid-column: span $grid-columns-medium; | ||
grid-template-columns: subgrid; | ||
margin-top: -1px; | ||
|
||
.p-equal-height-row__col-item { | ||
grid-column: span calc($grid-columns-medium / 2); | ||
} | ||
|
||
.p-equal-height-row__col-item:first-child { | ||
grid-row: span 100; | ||
} | ||
} | ||
|
||
@media screen and (width >= $breakpoint-large) { | ||
border: none; | ||
grid-column: span calc($grid-columns / 4); | ||
} | ||
} | ||
|
||
// divider styles | ||
// remove row level dividers for small screen | ||
&[class*='p-equal-height-row--divider-below-item-']::before, | ||
&[class*='p-equal-height-row--divider-below-item-']::after { | ||
@extend %vf-pseudo-border; | ||
display: none; | ||
width: 100%; | ||
} | ||
|
||
// For smaller screens, the divider pseudo elements are inserted at the column level | ||
&.p-equal-height-row--divider-below-item-1 .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-2 .p-equal-height-row__col::after, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1) .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2) .p-equal-height-row__col::after { | ||
@extend %vf-pseudo-border; | ||
grid-column: span $grid-columns-small; | ||
width: 100%; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-1 .p-equal-height-row__col::before { | ||
grid-row: 2; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-2 .p-equal-height-row__col::after { | ||
grid-row: 3; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1) .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2) .p-equal-height-row__col::after { | ||
grid-row: 4; | ||
} | ||
|
||
@media screen and ($breakpoint-small <= width < $breakpoint-large) { | ||
// We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left | ||
&.p-equal-height-row--divider-below-item-1 .p-equal-height-row__col::before { | ||
display: none; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-2 .p-equal-height-row__col::after { | ||
grid-column: 4 / 7; | ||
grid-row: 2; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1) .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2) .p-equal-height-row__col::after { | ||
grid-column: 4 / 7; | ||
grid-row: 3; | ||
} | ||
} | ||
|
||
@media screen and (width >= $breakpoint-large) { | ||
&.p-equal-height-row--divider-below-item-1 .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-2 .p-equal-height-row__col::after, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1) .p-equal-height-row__col::before, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2) .p-equal-height-row__col::after { | ||
display: none; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-1::after, | ||
&.p-equal-height-row--divider-below-item-2::before, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1)::after, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2)::before { | ||
display: block; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-1::after { | ||
grid-row: 2; | ||
} | ||
|
||
&.p-equal-height-row--divider-below-item-2::before { | ||
grid-row: 3; | ||
} | ||
|
||
// Only have access to two pseudo elements at row level | ||
// if item-1 (::after) is present, assume item-2 (::before) isn't, then item-3 must be (::before) | ||
// if item-2 (::before) is present, assume item-1 (::after) isn't, then item-3 must be (::after) | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-1)::after, | ||
&.p-equal-height-row--divider-below-item-3:not(.p-equal-height-row--divider-below-item-2)::before { | ||
grid-row: 4; | ||
} | ||
} | ||
} | ||
|
||
// support for 25-75 split on large screen size for this pattern | ||
.row--25-75-on-large > .col, | ||
.row > .col-9 { | ||
& .p-equal-height-row { | ||
grid-gap: 0 map-get($grid-gutter-widths, small); | ||
grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr)); | ||
|
||
@media screen and ($breakpoint-small <= width < $breakpoint-large) { | ||
grid-gap: 0 map-get($grid-gutter-widths, default); | ||
grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr)); | ||
} | ||
|
||
@media screen and (width >= $breakpoint-large) { | ||
grid-template-columns: repeat(9, minmax(0, 1fr)); | ||
} | ||
} | ||
} | ||
} |
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,11 @@ | ||
@import '../vanilla'; | ||
@include vf-base; | ||
|
||
// dependencies needed for examples | ||
@include vf-p-buttons; | ||
@include vf-p-media-container; | ||
@include vf-p-headings; | ||
|
||
// vf-p-grid is needed for this pattern to work | ||
@include vf-p-grid; | ||
@include vf-p-equal-height-row; |
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
106 changes: 106 additions & 0 deletions
106
templates/docs/examples/patterns/equal-height-row/25-75-grid.html
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,106 @@ | ||
{% extends "_layouts/examples.html" %} | ||
{% block title %}Equal height row / Use in 25-75 grid{% endblock %} | ||
|
||
{% block standalone_css %}patterns_equal-height-row{% endblock %} | ||
|
||
{% block content %} | ||
|
||
<div class="row--25-75-on-large"> | ||
<div class="col"> | ||
<a href="#"> | ||
<p class="p-muted-heading">Latest from our blog</p> | ||
</a> | ||
</div> | ||
<div class="col"> | ||
<div class="p-equal-height-row"> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">A few months ago, the OpenSSL Project announced the end of life of OpenSSL | ||
1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with | ||
many organisations relying on version 1.1.1....</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">If you've been following my previous blog posts, you already know that | ||
the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area | ||
that's particularly challenging and in flux....</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">Today, around 96% of software projects utilize open source in some way. The | ||
web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so | ||
almost everything we do and work on can be found publicly on the Canonical Github org.</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="p-equal-height-row"> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">A few months ago, the OpenSSL Project announced the end of life of OpenSSL | ||
1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with | ||
many organisations relying on version 1.1.1....</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">If you've been following my previous blog posts, you already know that | ||
the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area | ||
that's particularly challenging and in flux....</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="p-equal-height-row__col"> | ||
<a href="#" class="p-equal-height-row__col-item"> | ||
<p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p> | ||
</a> | ||
<p class="p-equal-height-row__col-item">Today, around 96% of software projects utilize open source in some way. The | ||
web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so | ||
almost everything we do and work on can be found publicly on the Canonical Github org.</p> | ||
<div class="p-equal-height-row__col-item"> | ||
<hr class="p-rule" /> | ||
<a href="#"> | ||
<p>Learn more</p> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
{% endblock %} |
Oops, something went wrong.