Skip to content

Commit b5db78e

Browse files
furknyavuzfurknyavuz
committed
updated assets
1 parent e90df38 commit b5db78e

File tree

6 files changed

+92
-85
lines changed

6 files changed

+92
-85
lines changed

‎projects/animated-code-editor/ng-package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,10 @@
33
"dest": "../../dist/animated-code-editor",
44
"lib": {
55
"entryFile": "src/public-api.ts"
6-
}
6+
},
7+
"assets": [
8+
"styles/util/util.scss",
9+
"styles/animated-code-editor/animated-code-editor.scss",
10+
"styles/command-line/command-line.scss"
11+
]
712
}

‎projects/animated-code-editor/src/lib/component/animated-code-editor/animated-code-editor.component.scss‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1 @@
1-
@use '../../styles/util/util';
2-
3-
.code-editor {
4-
@include util.default-border-radius;
5-
@include util.default-shadow;
6-
7-
background: var(--card-dark-mode);
8-
width: 100%;
9-
height: 400px;
10-
overflow: auto;
11-
text-align: left;
12-
box-sizing: border-box;
13-
14-
& .header {
15-
background-color: var(--darker-light-mode);
16-
box-shadow: 0 0 3px 2px var(--shadow-dark-mode);
17-
display: flex;
18-
flex-direction: row;
19-
}
20-
21-
& .content {
22-
@include util.default-padding-line;
23-
font-family: 'JetBrains Mono', monospace;
24-
}
25-
26-
& .title {
27-
border-radius: 0;
28-
font-size: 12px;
29-
background: var(--theme-color-darker-3);
30-
text-transform: uppercase;
31-
box-sizing: border-box;
32-
width: 100px;
33-
color: var(--darker-contrast);
34-
font-weight: 500;
35-
text-align: center;
36-
height: 25px;
37-
line-height: 25px;
38-
}
39-
40-
& .arrow {
41-
width: 8px;
42-
border-top: 12px solid transparent;
43-
border-bottom: 12px solid transparent;
44-
border-left: 12px solid var(--theme-color-darker-3);
45-
margin-left: -0.2px;
46-
}
47-
}
48-
49-
@media only screen and (max-width: 999px) {
50-
.code-editor {
51-
max-width: 100vw;
52-
}
53-
}
54-
55-
@media only screen and (min-width: 1000px) {
56-
.code-editor {
57-
min-width: 600px;
58-
}
59-
}
1+
@use '../../../../styles/animated-code-editor/animated-code-editor';

‎projects/animated-code-editor/src/lib/component/command-line/command-line.component.scss‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1 @@
1-
@use '../../styles/util/util';
2-
3-
.command-line {
4-
color: var(--contrast-light-mode);
5-
font-size: 14px;
6-
margin-top: 5px;
7-
8-
& .text {
9-
margin-left: 10px;
10-
white-space: pre-line;
11-
}
12-
13-
& .response {
14-
color: var(--warning);
15-
}
16-
17-
& .request {
18-
color: var(--error);
19-
}
20-
21-
& .command {
22-
font-size: 14px;
23-
font-weight: 600;
24-
}
25-
}
1+
@use '../../../../styles/command-line/command-line';

‎projects/animated-code-editor/styles/animated-code-editor/animated-code-editor.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@use '../util/util';
2+
3+
.code-editor {
4+
@include util.default-border-radius;
5+
@include util.default-shadow;
6+
7+
background: var(--card-dark-mode);
8+
width: 100%;
9+
height: 400px;
10+
overflow: auto;
11+
text-align: left;
12+
box-sizing: border-box;
13+
14+
& .header {
15+
background-color: var(--darker-light-mode);
16+
box-shadow: 0 0 3px 2px var(--shadow-dark-mode);
17+
display: flex;
18+
flex-direction: row;
19+
}
20+
21+
& .content {
22+
@include util.default-padding-line;
23+
font-family: 'JetBrains Mono', monospace;
24+
}
25+
26+
& .title {
27+
border-radius: 0;
28+
font-size: 12px;
29+
background: var(--theme-color-darker-3);
30+
text-transform: uppercase;
31+
box-sizing: border-box;
32+
width: 100px;
33+
color: var(--darker-contrast);
34+
font-weight: 500;
35+
text-align: center;
36+
height: 25px;
37+
line-height: 25px;
38+
}
39+
40+
& .arrow {
41+
width: 8px;
42+
border-top: 12px solid transparent;
43+
border-bottom: 12px solid transparent;
44+
border-left: 12px solid var(--theme-color-darker-3);
45+
margin-left: -0.2px;
46+
}
47+
}
48+
49+
@media only screen and (max-width: 999px) {
50+
.code-editor {
51+
max-width: 100vw;
52+
}
53+
}
54+
55+
@media only screen and (min-width: 1000px) {
56+
.code-editor {
57+
min-width: 600px;
58+
}
59+
}

‎projects/animated-code-editor/styles/command-line/command-line.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@use '../util/util';
2+
3+
.command-line {
4+
color: var(--contrast-light-mode);
5+
font-size: 14px;
6+
margin-top: 5px;
7+
8+
& .text {
9+
margin-left: 10px;
10+
white-space: pre-line;
11+
}
12+
13+
& .response {
14+
color: var(--warning);
15+
}
16+
17+
& .request {
18+
color: var(--error);
19+
}
20+
21+
& .command {
22+
font-size: 14px;
23+
font-weight: 600;
24+
}
25+
}

projects/animated-code-editor/src/lib/styles/util/util.scss renamed to projects/animated-code-editor/styles/util/util.scss

File renamed without changes.

0 commit comments

Comments
 (0)