cargdev/angular
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): display code-tabs in a Material Design "card" (#24027)

Browse Source 
This helps to connect the "content" of the tab to its label.

Closes #23985

PR Close #24027
This commit is contained in:
Pete Bacon Darwin
2018-05-21 12:55:22 +01:00
committed by Matias Niemelä
parent 96a0e131bf
commit ddd6124802
3 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
aio/src/styles/2-modules/_code.scss
View File

@ -3,8 +3,9 @@ code-example, code-tabs {
display: block;
}
code-example,
code-tabs mat-tab-body {
code-example {
&:not(.no-box) {
background-color: rgba($backgroundgray, 0.2);
border: 0.5px solid $lightgray;
@ -27,6 +28,16 @@ code-tabs mat-tab-body {
}
}
code-example, code-tabs {
.mat-card {
padding: 0;
border-radius: 5px;
}
code {
overflow: auto;
}
}
// TERMINAL / SHELL TEXT STYLES
code-example.code-shell, code-example[language=sh], code-example[language=bash] {