iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): clean up styling of the `<aio-resource-list>` component (#40944) 

This commit cleans up the styles and the elements/classes used for
styling the content of the `<aio-resource-list>` component.

This change has been extracted from #36045.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
This commit is contained in:
George Kalpakas 2021-02-23 16:49:20 +02:00 committed by Zach Arend
parent 00562ed935
commit d3eff182e3
2 changed files with 13 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
aio/src/app/custom-elements/resource/resource-list.component.html
View File

@ -1,4 +1,4 @@
<div class="resources-container"> <div>
<div class="flex-center group-buttons"> <div class="flex-center group-buttons">
<a *ngFor="let category of categories" <a *ngFor="let category of categories"
[class.selected]="category.id == selectedCategory.id" [class.selected]="category.id == selectedCategory.id"
@ -6,19 +6,17 @@
(click)="selectCategory(category.id)" (click)="selectCategory(category.id)"
(keyup.enter)="selectCategory(category.id)">{{category.title}}</a> (keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
</div> </div>
<div class="l-flex--column align-items-center"> <div class="resources-container">
<div class="shadow-1 showcase"> <div class="showcase">
<div *ngFor="let subCategory of selectedCategory?.subCategories"> <div *ngFor="let subCategory of selectedCategory?.subCategories">
<a class="h-anchor-offset" id="{{subCategory.id}}"></a> <a id="{{subCategory.id}}"></a>
<h3 class="subcategory-title">{{subCategory.title}}</h3> <h3 class="subcategory-title">{{subCategory.title}}</h3>
<div *ngFor="let resource of subCategory.resources"> <div *ngFor="let resource of subCategory.resources">
<div class="c-resource"> <div class="resource-item">
<a class="l-flex--column resource-row-link" rel="noopener" target="_blank" [href]="resource.url"> <a class="resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
<div>
<h4>{{resource.title}}</h4> <h4>{{resource.title}}</h4>
<p class="resource-description">{{resource.desc || 'No Description'}}</p> <p class="resource-description">{{resource.desc || 'No Description'}}</p>
</div>
</a> </a>
</div> </div>
</div> </div>

28
aio/src/styles/2-modules/_resources.scss
View File

@ -1,14 +1,7 @@
aio-resource-list { aio-resource-list {
.resources-container { .showcase {
position: relative;
}
.shadow-1 {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 4px 0 rgba($black, 0.37); box-shadow: 0 1px 4px 0 rgba($black, 0.37);
}
.showcase {
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px * 6; margin-bottom: 8px * 6;
width: 80%; width: 80%;
@ -18,7 +11,7 @@ aio-resource-list {
} }
} }
.c-resource { .resource-item {
h4 { h4 {
margin: 0; margin: 0;
@include line-height(24); @include line-height(24);
@ -29,19 +22,9 @@ aio-resource-list {
} }
} }
.h-anchor-offset { .resources-container {
display: block;
position: relative;
top: -20px;
visibility: hidden;
}
.l-flex--column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.align-items-center {
align-items: center; align-items: center;
} }
@ -54,11 +37,10 @@ aio-resource-list {
.resource-row-link { .resource-row-link {
color: #1a2326; color: #1a2326;
display: flex;
flex-direction: column;
border: transparent solid 1px; border: transparent solid 1px;
margin: 0;
padding: 16px 23px 16px 23px; padding: 16px 23px 16px 23px;
position: relative;
text-decoration: none;
transition: all .3s; transition: all .3s;
&:hover { &:hover {