Skip to content

Commit 280e53b

Browse files
HarpushHarpush
committed
fix: change to css vars without scss theme
1 parent 62ba624 commit 280e53b

7 files changed

Lines changed: 78 additions & 92 deletions

File tree

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

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

‎projects/angular-split/package.json‎

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

projects/angular-split/_theme.scss renamed to projects/angular-split/src/lib/component/split.component.scss

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use 'sass:map';
2-
3-
$_defaultConfig: (
1+
$defaults: (
42
gutter-background-color: #eeeeee,
53
gutter-icon-horizontal-bg-image-url:
64
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='),
@@ -12,44 +10,38 @@ $_defaultConfig: (
1210
gutter-disabled-cursor: default,
1311
);
1412

15-
@function var-or-map-default($name, $map) {
16-
@return var(--as-#{$name}, map.get($map, $name));
13+
as-split {
14+
@each $name, $defaultValue in $defaults {
15+
--_as-#{$name}: var(--as-#{$name}, #{$defaultValue});
16+
}
1717
}
1818

19-
@mixin theme($config: ()) {
20-
$mergedConfig: map.merge($_defaultConfig, $config);
21-
22-
as-split {
23-
display: flex;
24-
flex-wrap: nowrap;
25-
justify-content: flex-start;
26-
align-items: stretch;
27-
overflow: hidden;
28-
width: 100%;
29-
height: 100%;
30-
31-
&.as-horizontal {
32-
flex-direction: row;
33-
}
34-
35-
&.as-vertical {
36-
flex-direction: column;
37-
}
19+
@function get-var($name) {
20+
@return var(--_as-#{$name});
21+
}
3822

39-
// Add transition only when transition enabled + split initialized + not currently dragging.
40-
&.as-transition.as-init:not(.as-dragging) {
41-
& > .as-split-gutter,
42-
& > .as-split-area {
43-
transition: flex-basis var-or-map-default('transition-duration', $mergedConfig);
44-
}
23+
as-split {
24+
display: flex;
25+
flex-wrap: nowrap;
26+
justify-content: flex-start;
27+
align-items: stretch;
28+
overflow: hidden;
29+
width: 100%;
30+
height: 100%;
31+
32+
// Add transition only when transition enabled + split initialized + not currently dragging.
33+
&.as-transition.as-init:not(.as-dragging) {
34+
& > .as-split-gutter,
35+
& > .as-split-area {
36+
transition: flex-basis get-var('transition-duration');
4537
}
4638
}
4739

48-
.as-split-gutter {
40+
& > .as-split-gutter {
4941
border: none;
5042
flex-grow: 0;
5143
flex-shrink: 0;
52-
background-color: var-or-map-default('gutter-background-color', $mergedConfig);
44+
background-color: get-var('gutter-background-color');
5345
display: flex;
5446
align-items: center;
5547
justify-content: center;
@@ -59,44 +51,15 @@ $_defaultConfig: (
5951
pointer-events: none;
6052
}
6153

62-
.as-horizontal > & {
63-
flex-direction: row;
64-
cursor: col-resize;
65-
// Fix safari bug about gutter height when direction is horizontal.
66-
height: 100%;
67-
}
68-
69-
.as-vertical > & {
70-
flex-direction: column;
71-
cursor: row-resize;
54+
& > .as-split-gutter-icon {
7255
width: 100%;
73-
}
74-
75-
.as-disabled > & {
76-
cursor: var-or-map-default('gutter-disabled-cursor', $mergedConfig);
77-
}
78-
}
79-
80-
.as-split-gutter-icon {
81-
width: 100%;
82-
height: 100%;
83-
background-position: center center;
84-
background-repeat: no-repeat;
85-
86-
.as-horizontal & {
87-
background-image: var-or-map-default('gutter-icon-horizontal-bg-image-url', $mergedConfig);
88-
}
89-
90-
.as-vertical & {
91-
background-image: var-or-map-default('gutter-icon-vertical-bg-image-url', $mergedConfig);
92-
}
93-
94-
.as-disabled & {
95-
background-image: var-or-map-default('gutter-icon-disabled-bg-image-url', $mergedConfig);
56+
height: 100%;
57+
background-position: center center;
58+
background-repeat: no-repeat;
9659
}
9760
}
9861

99-
.as-split-area {
62+
& > .as-split-area {
10063
flex-grow: 0;
10164
flex-shrink: 0;
10265
overflow-x: hidden;
@@ -109,24 +72,63 @@ $_defaultConfig: (
10972
overflow-y: hidden;
11073
}
11174

112-
.as-iframe-fix {
75+
& > .as-iframe-fix {
11376
position: absolute;
11477
top: 0;
11578
left: 0;
11679
width: 100%;
11780
height: 100%;
11881
}
82+
}
83+
84+
&.as-horizontal {
85+
flex-direction: row;
86+
87+
& > .as-split-gutter {
88+
flex-direction: row;
89+
cursor: col-resize;
90+
// Fix safari bug about gutter height when direction is horizontal.
91+
height: 100%;
92+
93+
& > .as-split-gutter-icon {
94+
background-image: get-var('gutter-icon-horizontal-bg-image-url');
95+
}
96+
}
11997

120-
.as-horizontal & {
98+
& > .as-split-area {
12199
height: 100%;
122100
}
101+
}
123102

124-
.as-vertical & {
103+
&.as-vertical {
104+
flex-direction: column;
105+
106+
& > .as-split-gutter {
107+
flex-direction: column;
108+
cursor: row-resize;
109+
width: 100%;
110+
111+
& > .as-split-gutter-icon {
112+
background-image: get-var('gutter-icon-vertical-bg-image-url');
113+
}
114+
}
115+
116+
& > .as-split-area {
125117
width: 100%;
126118

127119
&.as-hidden {
128120
max-width: 0;
129121
}
130122
}
131123
}
124+
125+
&.as-disabled {
126+
& > .as-split-gutter {
127+
cursor: get-var('gutter-disabled-cursor');
128+
129+
& > .as-split-gutter-icon {
130+
background-image: get-var('gutter-icon-disabled-bg-image-url');
131+
}
132+
}
133+
}
132134
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Inject,
1616
Optional,
1717
ContentChild,
18+
ViewEncapsulation,
1819
} from '@angular/core'
1920
import { Observable, Subscriber, Subject } from 'rxjs'
2021
import { debounceTime } from 'rxjs/operators'
@@ -82,6 +83,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
8283
selector: 'as-split',
8384
exportAs: 'asSplit',
8485
changeDetection: ChangeDetectionStrategy.OnPush,
86+
styleUrls: [`./split.component.scss`],
8587
template: ` <ng-content></ng-content>
8688
<ng-template
8789
ngFor
@@ -135,6 +137,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
135137
</ng-template>
136138
</div>
137139
</ng-template>`,
140+
encapsulation: ViewEncapsulation.None,
138141
})
139142
export class SplitComponent implements AfterViewInit, OnDestroy {
140143
@ContentChild(SplitGutterDirective) customGutter: SplitGutterDirective

‎src/app/documentation/documentation.component.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,16 +151,12 @@ <h4><b>Theme</b></h4>
151151
<table class="table table-striped">
152152
<thead>
153153
<tr>
154-
<th style="width: 40%">Theme SCSS property</th>
155-
<th>CSS variable</th>
154+
<th style="width: 40%">CSS variable</th>
156155
<th>Details</th>
157156
</tr>
158157
</thead>
159158
<tbody>
160159
<tr *ngFor="let x of themeInfo">
161-
<td>
162-
<code>{{ x.name }}</code>
163-
</td>
164160
<td>
165161
<code>--as-{{ x.name }}</code>
166162
</td>

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,8 @@ import { Component, VERSION } from '@angular/core'
5959
<h5>Add angular module to your app:</h5>
6060
<pre [innerText]="code2"></pre>
6161
<br />
62-
<h5>Add theme to styles.scss:</h5>
63-
<pre [innerText]="code3"></pre>
64-
<br />
6562
<h5>Define splits in your template:</h5>
66-
<pre [innerText]="code4"></pre>
63+
<pre [innerText]="code3"></pre>
6764
<br />
6865
<h5>Support:</h5>
6966
If you have an issue using the library, feel free to join our chat! We are part of the
@@ -107,10 +104,8 @@ export class HomeComponent {
107104
...
108105
})
109106
export class AppModule {}`
110-
code3 = `@use 'angular-split/theme' as asSplit;
111-
@include asSplit.theme(/* Can customize theme */);`
112107

113-
code4 = `<div style="width: 500px; height: 500px; background: yellow;">
108+
code3 = `<div style="width: 500px; height: 500px; background: yellow;">
114109
<as-split direction="horizontal">
115110
<as-split-area [size]="40">
116111
<p>LEFT</p>

‎src/styles.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use 'angular-split/theme' as asSplit;
2-
31
html,
42
body {
53
margin: 0;
@@ -52,5 +50,3 @@ split-area > p {
5250
code {
5351
color: #bb7a00;
5452
}
55-
56-
@include asSplit.theme();

0 commit comments

Comments
 (0)