Skip to content

Commit 9e741c4

Browse files
HarpushHarpush
committed
fix: use @Property in css theme and export the theme
1 parent 907c1a5 commit 9e741c4

6 files changed

Lines changed: 55 additions & 24 deletions

File tree

‎projects/angular-split/_theme.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@property --as-gutter-background-color {
2+
syntax: '<color>';
3+
inherits: true;
4+
initial-value: #eeeeee;
5+
}
6+
7+
@property --as-gutter-icon-horizontal {
8+
syntax: '<url>';
9+
inherits: true;
10+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
11+
}
12+
13+
@property --as-gutter-icon-vertical {
14+
syntax: '<url>';
15+
inherits: true;
16+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC');
17+
}
18+
19+
@property --as-gutter-icon-disabled {
20+
syntax: '<url>';
21+
inherits: true;
22+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
23+
}
24+
25+
@property --as-transition-duration {
26+
syntax: '<time>';
27+
inherits: true;
28+
initial-value: 0.3s;
29+
}
30+
31+
@property --as-gutter-disabled-cursor {
32+
syntax: '*';
33+
inherits: true;
34+
initial-value: default;
35+
}

‎projects/angular-split/ng-package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"dest": "../../dist/angular-split",
44
"lib": {
55
"entryFile": "src/public_api.ts"
6-
}
6+
},
7+
"assets": ["_theme.css"]
78
}

‎projects/angular-split/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@
2626
"flexbox"
2727
],
2828
"license": "Apache-2.0",
29+
"exports": {
30+
"./theme": {
31+
"css": "./theme.css"
32+
}
33+
},
2934
"peerDependencies": {
3035
"@angular/common": ">=16.0.0",
3136
"@angular/core": ">=16.0.0",

‎projects/angular-split/src/lib/component/split.component.css‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,4 @@
1-
as-split {
2-
--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);
3-
--_as-gutter-icon-horizontal: var(
4-
--as-gutter-icon-horizontal,
5-
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')
6-
);
7-
--_as-gutter-icon-vertical: var(
8-
--as-gutter-icon-vertical,
9-
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC')
10-
);
11-
--_as-gutter-icon-disabled: var(
12-
--as-gutter-icon-disabled,
13-
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')
14-
);
15-
--_as-transition-duration: var(--as-transition-duration, 0.3s);
16-
--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);
17-
}
1+
@import '../../../_theme.css';
182

193
as-split {
204
display: flex;
@@ -29,15 +13,15 @@ as-split {
2913
&.as-transition.as-init:not(.as-dragging) {
3014
& > .as-split-gutter,
3115
& > .as-split-area {
32-
transition: flex-basis var(--_as-transition-duration);
16+
transition: flex-basis var(--as-transition-duration);
3317
}
3418
}
3519

3620
& > .as-split-gutter {
3721
border: none;
3822
flex-grow: 0;
3923
flex-shrink: 0;
40-
background-color: var(--_as-gutter-background-color);
24+
background-color: var(--as-gutter-background-color);
4125
display: flex;
4226
align-items: center;
4327
justify-content: center;
@@ -87,7 +71,7 @@ as-split {
8771
height: 100%;
8872

8973
& > .as-split-gutter-icon {
90-
background-image: var(--_as-gutter-icon-horizontal);
74+
background-image: var(--as-gutter-icon-horizontal);
9175
}
9276
}
9377

@@ -105,7 +89,7 @@ as-split {
10589
width: 100%;
10690

10791
& > .as-split-gutter-icon {
108-
background-image: var(--_as-gutter-icon-vertical);
92+
background-image: var(--as-gutter-icon-vertical);
10993
}
11094
}
11195

@@ -120,10 +104,10 @@ as-split {
120104

121105
&.as-disabled {
122106
& > .as-split-gutter {
123-
cursor: var(--_as-gutter-disabled-cursor);
107+
cursor: var(--as-gutter-disabled-cursor);
124108

125109
& > .as-split-gutter-icon {
126-
background-image: var(--_as-gutter-icon-disabled);
110+
background-image: var(--as-gutter-icon-disabled);
127111
}
128112
}
129113
}

‎src/app/home/home.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ import { Component, VERSION } from '@angular/core'
6262
<h5>Define splits in your template:</h5>
6363
<pre [innerText]="code3"></pre>
6464
<br />
65+
<h5>Add css theme in styles.css/scss for variables type hints (optional):</h5>
66+
<pre [innerText]="code4"></pre>
67+
<br />
6568
<h5>Support:</h5>
6669
If you have an issue using the library, feel free to join our chat! We are part of the
6770
<a href="https://discord.gg/Qm9MPCg">Angular Community</a> Discord and you can ask questions in the
@@ -115,4 +118,5 @@ export class AppModule {}`
115118
</as-split-area>
116119
</as-split>
117120
</div>`
121+
code4 = `@use/@import 'angular-split/theme';`
118122
}

‎src/styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'angular-split/theme';
2+
13
html,
24
body {
35
margin: 0;

0 commit comments

Comments
 (0)