Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(docs-infra): fix update page styles to adhere to the new layout (#61256)

Browse source 
PR Close #61256
This commit is contained in:
Hakeem 2025-05-13 05:02:06 -07:00 committed by Alex Rickabaugh
parent bf8d52b497
commit 75e267da1d
2 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
adev/src/app/features/update/update.component.html
View file

@ -1,5 +1,5 @@
<div class="page docs-viewer">
<h1 tabindex="-1">Update Guide</h1>
<h1 class="page-header" tabindex="-1">Update Guide</h1>
<div class="wizard">
<div>
<h2>Select the options that match your update</h2>

31
adev/src/app/features/update/update.component.scss
View file

@ -1,21 +1,39 @@
@use '@angular/docs/styles/media-queries' as mq;
::ng-deep adev-update-guide{
:host {
display: flex;
flex-flow: column;
align-items: center;
padding: var(--layout-padding);
padding: var(--layout-padding) 0px;
container: update-guide-page / inline-size;
.docs-viewer {
padding-inline: var(--layout-padding);
//applying styles when TOC position got translated to the top right
@media only screen and (min-width: 1431px) {
// take the available space except a reserved area for TOC
margin-left: -16rem;
width: calc(100% - 16rem);
box-sizing: border-box;
}
.page-header {
margin-top: 0px;
}
}
}
.page {
max-width: var(--page-width);
& > *{
@include mq.for-big-desktop-up{
&>* {
@include mq.for-big-desktop-up {
padding-inline: 0px;
}
}
@include mq.for-tablet-landscape-down{
@include mq.for-tablet-landscape-down {
width: 100%;
}
}
@ -87,6 +105,7 @@ h4 {
padding-block: 0.5rem;
font-weight: 400;
transition: border 0.3s ease;
span {
color: var(--primary-contrast);
transition: color 0.3s ease;
@ -105,7 +124,7 @@ h4 {
display: flex;
align-items: center;
> div {
>div {
margin-inline-start: 2rem;
}