Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example for upgrade guide: Correct markup structure (grid and centering utilities) #5221

Merged
@@ -45,7 +45,7 @@
"dependencies": {
"@canonical/global-nav": "2.0.5",
"cookie-policy": "1.1.0",
"vanilla-framework": "1.8.1"
"vanilla-framework": "2.0.0-alpha.1"
},
"resolutions": {
"lodash": "4.17.11",
@@ -1,9 +1,8 @@
$breakpoint-medium: 875px;
$viewport-threshold: 1281px;
$color-brand: #e95420;
$breakpoint-medium: 875px;
$viewport-threshold: 1281px;
$color-brand: #e95420;
$sp-medium-small: 1rem * .85 !default;
$sp-medium-large: 1rem * 1.15 !default;
$grid-max-width: 68rem;
$nav-bg-color: #333;
$circle-of-friends-compensation: 0; // padding compensation to create visually equal margins;
$contrast-ratio: 5%;
@@ -2,7 +2,7 @@
@include pattern-sidebar-nav;

.l-documentation {
@include row;
@extend %row;
display: flex;

.p-notification,
@@ -33,10 +33,10 @@
& > li > h4,
& > li + h5,
& > li > table {
margin-bottom: $spv-intra--condensed;
margin-bottom: $spv-inner--x-small;
margin-left: $sp-medium;
padding-left: $sp-medium;
padding-top: $spv-intra;
padding-top: $spv-inner--small;
}

& > li > h4:first-child {
@@ -22,11 +22,11 @@

.p-modal__header {
border-bottom: 1px solid $color-mid-light;
margin-bottom: $spv-intra--expanded;
margin-bottom: $spv-inner--medium;
}

.p-modal__title {
margin-bottom: $spv-intra;
margin-bottom: $spv-inner--small;
}

&.thank-you {
@@ -120,7 +120,7 @@
.p-strip--light {
.p-strip__row {
>.p-strip__row--item {
padding: $spv-intra--condensed;
padding: $spv-inner--x-small;
}

>.p-strip__row--item.col-6 {
@@ -235,7 +235,7 @@
@mixin ubuntu-p-list-small {
.p-text-list--small {
@extend %small-text-fixed;
margin-bottom: $spv-inter--scaleable - $nudge--small + 1 * $sp-unit;
margin-bottom: $spv-outer--scaleable - $nudge--small + 1 * $sp-unit;
margin-left: 0;
padding-left: 0;

@@ -244,7 +244,7 @@
}

&.is-dense {
margin-bottom: $spv-inter--scaleable - $nudge--small;
margin-bottom: $spv-outer--scaleable - $nudge--small;
}

& .p-list__item {
@@ -1,6 +1,6 @@
$ubuntu-logo-svg-width: 81 * $px; // width in rems
$ubuntu-logo-width--desktop: $ubuntu-logo-svg-width + 2 * $grid-margin-width;
$ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
$ubuntu-logo-svg-width: 81px; // width in rems
$ubuntu-logo-width--desktop: calc($ubuntu-logo-svg-width + #{2 * $grid-margin-width});
$ubuntu-logo-width--mobile: calc($ubuntu-logo-svg-width + #{2 * $sph-inner});

@mixin ubuntu-p-navigation {
html {
@@ -41,6 +41,7 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
}
}


&__dropdown-link {
position: relative;

@@ -107,8 +108,8 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
}

@media only screen and (min-width: $breakpoint-navigation-threshold) {
padding-left: $sph-intra;
padding-right: $sph-intra - $circle-of-friends-compensation;
padding-left: $sph-inner;
padding-right: $sph-inner - $circle-of-friends-compensation;
}

.p-navigation__link {
@@ -128,11 +129,11 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
display: block;

@media (max-width: $breakpoint-navigation-threshold) {
padding: $spv-intra--expanded $grid-margin-width $spv-intra--expanded $grid-margin-width;
padding: $spv-inner--medium $grid-margin-width $spv-inner--medium $grid-margin-width;
}

@media (min-width: $breakpoint-navigation-threshold + 1) {
padding: $spv-intra--expanded 2rem $spv-intra--expanded $sph-intra;
padding: $spv-inner--medium 2rem $spv-inner--medium $sph-inner;
}

&:focus,
@@ -241,16 +242,16 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
@media only screen and (min-width: $breakpoint-navigation-threshold) {
background-color: $color-light;
display: block;
left: $sph-intra;
left: $sph-inner;
opacity: .3;
right: $sph-intra - $circle-of-friends-compensation;
right: $sph-inner - $circle-of-friends-compensation;
}
}

@media only screen and (min-width: $breakpoint-navigation-threshold) {
padding-left: $sph-intra;
padding-right: $sph-intra - $circle-of-friends-compensation;
width: $ubuntu-logo-svg-width + 2 * $sph-intra - $circle-of-friends-compensation;
padding-left: $sph-inner;
padding-right: $sph-inner - $circle-of-friends-compensation;
width: calc(#{$ubuntu-logo-svg-width} + #{2 * $sph-inner - $circle-of-friends-compensation});
}
}

@@ -294,8 +295,8 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
font-size: 1rem / pow($ms-ratio, 1); //XXX: move font-sizes to map in vanilla so it can be changed globally
// line-height: map-get($line-heights, small);
padding-bottom: map-get($sp-after, small) + $p-small-lh-diff - $nudge--small;
padding-left: $spv-intra--expanded;
padding-right: $spv-intra--expanded;
padding-left: $spv-inner--medium;
padding-right: $spv-inner--medium;
padding-top: $nudge--small;

@media (max-width: $breakpoint-x-small - 1) {
@@ -411,7 +412,7 @@ $ubuntu-logo-width--mobile: $ubuntu-logo-svg-width + 2 * $sph-intra;
color: $color-dark;

&:last-child {
padding-bottom: $spv-inter--shallow-scaleable / 1.5;
padding-bottom: $spv-outer--shallow-scaleable / 1.5;
}

@media (max-width: $breakpoint-x-small - 1) {
@@ -476,8 +477,8 @@ h2,
@extend %bg--light;
@include vf-p-card;
flex-direction: column;
margin-bottom: $spv-inter--condensed-scaleable;
padding: $spv-intra--scaleable - $px;
margin-bottom: $spv-outer--small-scaleable;
padding: calc(#{$spv-inner--scaleable} - 1px);
transition: all .2s; // sass-lint:disable-line no-transition-all
}

@@ -495,8 +496,8 @@ h2,

.p-logomark {
display: inline-block;
margin-bottom: $spv-intra--scaleable;
margin-right: $sph-intra--condensed;
margin-bottom: $spv-inner--scaleable;
margin-right: $sph-inner--small;
max-height: 4 * $sp-unit;
max-width: 4 * $sp-unit;
position: relative;
@@ -1,9 +1,9 @@
@mixin ubuntu-p-separator {
.p-separator {
margin: $spv-inter--regular-scaleable 0;
margin: $spv-outer--shallow-scaleable 0;

@media (max-width: $breakpoint-medium) {
margin: $spv-inter--shallow-scaleable 0;
margin: $spv-outer--shallow-scaleable 0;
}
}
}
@@ -1,12 +1,12 @@
@mixin ubuntu-p-tables {
tr {
th {
padding-top: $spv-intra;
padding-top: $spv-inner--small;
}

.p-table__cell--highlight {
background: $color-x-light;
padding: $spv-intra $sph-intra--condensed;
padding: $spv-inner--small $sph-inner--small;
}
}
}
@@ -62,14 +62,14 @@ h4,
}

%p-strip--very-shallow {
padding-top: $spv-inter--regular;
padding-top: $spv-outer--medium;

&:not(:last-child) {
padding-bottom: $spv-inter--regular;
padding-bottom: $spv-outer--medium;
}

&:last-child {
padding-bottom: $spv-inter--scaleable;
padding-bottom: $spv-outer--scaleable;
}
}

@@ -88,7 +88,7 @@ h4,
}

.p-hr--dense {
margin-bottom: - $px;
margin-bottom: - 1px;
}

.u-float--right {
@@ -81,17 +81,15 @@ <h3><a href="/internet-of-things">The fastest way to go from development to prod

{# strip containers #}
<section class="p-strip is-deep is-bordered">
<div class="row">
<div class="u-equal-height u-vertically-center">
<div class="col-7">
<img src="{{ ASSET_SERVER_URL }}668136e7-containers.svg" class="u-hide--small" style="height: 85%;" height="374" alt="" />
<div class="row u-vertically-center">
<div class="col-7 u-align--center">
<img src="{{ ASSET_SERVER_URL }}668136e7-containers.svg" class="u-hide--small" style="height: 85%;" height="374" alt="">
</div>
<div class="col-5 suffix-1">
<div class="col-5">
<h3><a href="/containers">The number one platform for containers&nbsp;&rsaquo;</a></h3>
<p>From LXD to Kubernetes to Docker, Ubuntu can run your containers at scale.</p>
</div>
</div>
</div>
</section>

{# strip desktop #}
@@ -59,7 +59,7 @@ <h5 class="p-navigation--secondary__logo u-hide--nav-threshold-up">
</div>
{% if breadcrumbs and breadcrumbs.children and breadcrumbs.children|length > 1 or breadcrumbs.grandchildren %}
<nav class="p-navigation--secondary">
<div class="row">
<div class="u-fixed-width">
<a class="p-navigation--secondary__banner u-hide--nav-threshold-down" href="{{ breadcrumbs.section.path }}">
<h5 class="p-navigation--secondary__logo">
{{ breadcrumbs.section.title }}
@@ -3,7 +3,7 @@
<footer class="p-footer p-strip u-clearfix">
<div class="row p-footer__container">
<p class="u-hide--medium u-hide--large link-to-top"><a href="#"><small>Back to top</small></a></p>
<nav id="main-navigation" class="p-footer__nav u-clearfix">
<nav id="main-navigation" class="p-footer__nav row">
<div class="p-footer__nav-col col-2 u-no-margin--bottom">
<ul class="p-footer__links">
{% include 'templates/_footer_item.html' with section=nav_sections.openstack %}
@@ -6357,7 +6357,12 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"

vanilla-framework@1.8.1, vanilla-framework@^1.8.1:
vanilla-framework@2.0.0-alpha.1:
version "2.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-2.0.0-alpha.1.tgz#0b0c4fcd50d1716e1c041960c9314f731cc4d4e4"
integrity sha512-oBnwDV1rBIGwL65zKC6Tha0bcZfRubuGsRYb4rcGGIdoA7s5TO5DfpGBmj1d7oT3dPPzFaQ7juUVQ/4TAOipRg==

vanilla-framework@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-1.8.1.tgz#0d7f5885cdbd1355a9f9d42d7596f9a1258b27ea"
integrity sha512-sYTpiiF+A2PvJ1xYVMywYFuX9sCfFkqBLQrfxfYgWZBQHVVMTtKJKVQMMDYFgFOxAPSsrVKl1VU9eAmGKkAMPw==
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.