mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2d8635d29d
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
100 lines
2.1 KiB
SCSS
100 lines
2.1 KiB
SCSS
// Card Grid
|
|
|
|
@mixin docs-card() {
|
|
.docs-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
@container docs-content (max-width: 450px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
grid-gap: 1.25rem;
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
.docs-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: var(--primary-contrast);
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--senary-contrast);
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s ease, background-color 0.3s ease;
|
|
|
|
p:first-of-type {
|
|
margin-block-start: 1.5rem;
|
|
}
|
|
|
|
p:last-of-type {
|
|
margin-block-end: 1.5rem;
|
|
}
|
|
|
|
span {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-block: 0;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
* + *:not(a):not(code):not(span) {
|
|
margin-block: 1.5rem;
|
|
}
|
|
|
|
&.docs-card-with-svg {
|
|
padding: 0;
|
|
|
|
.docs-card-text-content {
|
|
flex-grow: 1;
|
|
margin-block-start: 0;
|
|
padding-inline: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border-block-start: 1px solid var(--senary-contrast);
|
|
h3 {
|
|
margin-bottom: 0;
|
|
margin-block-start: 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
p {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// docs-card with link
|
|
a.docs-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
background: var(--pink-to-highlight-to-purple-to-blue-horizontal-gradient);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-size: 0.875rem;
|
|
margin-block: 0;
|
|
|
|
transition: background-position 1.8s ease-out;
|
|
background-size: 200% 100%;
|
|
background-position: 100% 0%;
|
|
position: relative;
|
|
}
|
|
|
|
&:hover {
|
|
span {
|
|
background-position: 0% 0%;
|
|
}
|
|
background: var(--subtle-purple);
|
|
}
|
|
}
|
|
|
|
.docs-viewer .docs-card h3 {
|
|
margin-block-start: 0;
|
|
font-size: 1rem;
|
|
}
|
|
}
|