adds non-ascii file tree view
This commit is contained in:
parent
0b541d513e
commit
f93bc28b62
|
@ -23,14 +23,15 @@ figure.image-display
|
|||
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
|
||||
:marked
|
||||
Here is the file structure:
|
||||
|
||||
code-example(format="").
|
||||
angular2-quickstart
|
||||
├─ app
|
||||
│ ├── app.component.ts
|
||||
│ └── boot.ts
|
||||
├─ index.htm
|
||||
└─ license.md
|
||||
.filetree
|
||||
.file angular2-quickstart
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
.file app.component.ts
|
||||
.file boot.ts
|
||||
.file index.htm
|
||||
.file license.md
|
||||
:marked
|
||||
Functionally, it's an `index.html` and two TypeScript files in an `app/` folder.
|
||||
We can handle that!
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
@import 'module/example-title';
|
||||
@import 'module/api';
|
||||
@import 'module/cheatsheet';
|
||||
@import 'module/filetree';
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
.filetree {
|
||||
padding: 12px 24px;
|
||||
background: $mist;
|
||||
.file {
|
||||
display: block;
|
||||
font-family: $mono-font;
|
||||
line-height: 32px;
|
||||
color: $platinum;
|
||||
}
|
||||
.children {
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
left: 6px;
|
||||
width: 2px;
|
||||
background: $grey;
|
||||
bottom: 16px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
transform: scaleX(0.75);
|
||||
}
|
||||
.file {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
left: -18px;
|
||||
top: 16px;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: $grey;
|
||||
position: absolute;
|
||||
transform: scaleY(0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue