v2.0.0-beta.3 fix css selector

Gaillard · Gaillard · commit cf8e593c779e · 2018-11-26T11:57:08.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
 
+<a name="2.0.0-beta.3"></a>
+# 2.0.0-beta.3 (2018-11-26)
+
+* **Style:** Modify `<as-split-area>` CSS selector to act only on current split areas children and not on potential sub split areas.
+
+
 <a name="2.0.0-beta.2"></a>
 # 2.0.0-beta.2 (2018-11-19)
 
diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-split",
-  "version": "2.0.0-beta.2",
-  "description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.",
+  "version": "2.0.0-beta.3",
+  "description": "Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
   "author": "bertrandg",
   "repository": {
       "type": "git",
@@ -10,7 +10,7 @@
   "bugs": {
       "url": "https://github.com/bertrandg/angular-split/issues"
   },
-  "homepage": "https://github.com/bertrandg/angular-split",
+  "homepage": "https://bertrandg.github.io/angular-split/",
   "keywords": [
       "angular",
       "split",
diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss
@@ -16,12 +16,14 @@
         background-color: #eeeeee;
     }
 
-    ::ng-deep as-split-area {
+    ::ng-deep > as-split-area {
         flex-grow: 0;
         flex-shrink: 0;
         overflow-x: hidden;
         overflow-y: auto;
 
+        /* When <as-split-area [visible]="false"> force size to 0. */
+
         &.is-hided {
             flex-basis: 0 !important;
             overflow-x: hidden;
@@ -36,11 +38,11 @@
             background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
             cursor: col-resize;
 
-            // Fix safari bug about gutter height when direction is horizontal
+            // Fix safari bug about gutter height when direction is horizontal.
             height: 100%;
         }
 
-        ::ng-deep as-split-area {
+        ::ng-deep > as-split-area {
             height: 100%;
         }
     }
@@ -55,7 +57,7 @@
             width: 100%;
         }
 
-        ::ng-deep as-split-area {
+        ::ng-deep > as-split-area {
             width: 100%;
 
             &.is-hided {
@@ -64,6 +66,8 @@
         }
     }
 
+    /* When disabled remove gutters background image and specific cursor. */
+    
     &.is-disabled {
         
         & > .as-split-gutter {
@@ -72,16 +76,14 @@
         }
     }
 
-    &.is-transition.is-init:not(.is-dragging) {
+    /* Add transition only when transition enabled + split initialized + not currently dragging. */
 
-        & > .as-split-gutter {
-            transition: flex-basis 0.3s;
-        }
+    &.is-transition.is-init:not(.is-dragging) {
 
-        ::ng-deep as-split-area {
+        & > .as-split-gutter,
+        ::ng-deep > as-split-area {
             transition: flex-basis 0.3s;
         }
-
     }
 }
     
diff --git a/src/app/component/examples/nested.route.component.ts b/src/app/component/examples/nested.route.component.ts
@@ -14,7 +14,7 @@ import { AComponent } from './AComponent';
         <div class="container">
             <sp-example-title [type]="exampleEnum.NESTED"></sp-example-title>
             <div class="split-example" style="height: 400px;">
-                <as-split direction="horizontal">
+                <as-split direction="horizontal" [useTransition]="true" >
                     <as-split-area size="40">
                         <as-split direction="vertical">
                             <as-split-area>

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,14 @@`
`16`	`16`	`background-color: #eeeeee;`
`17`	`17`	`}`
`18`	`18`
`19`		`- ::ng-deep as-split-area {`
	`19`	`+ ::ng-deep > as-split-area {`
`20`	`20`	`flex-grow: 0;`
`21`	`21`	`flex-shrink: 0;`
`22`	`22`	`overflow-x: hidden;`
`23`	`23`	`overflow-y: auto;`
`24`	`24`
	`25`	`+ /* When <as-split-area [visible]="false"> force size to 0. */`
	`26`	`+`
`25`	`27`	`&.is-hided {`
`26`	`28`	`flex-basis: 0 !important;`
`27`	`29`	`overflow-x: hidden;`
`@@ -36,11 +38,11 @@`
`36`	`38`	`background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");`
`37`	`39`	`cursor: col-resize;`
`38`	`40`
`39`		`- // Fix safari bug about gutter height when direction is horizontal`
	`41`	`+ // Fix safari bug about gutter height when direction is horizontal.`
`40`	`42`	`height: 100%;`
`41`	`43`	`}`
`42`	`44`
`43`		`- ::ng-deep as-split-area {`
	`45`	`+ ::ng-deep > as-split-area {`
`44`	`46`	`height: 100%;`
`45`	`47`	`}`
`46`	`48`	`}`
`@@ -55,7 +57,7 @@`
`55`	`57`	`width: 100%;`
`56`	`58`	`}`
`57`	`59`
`58`		`- ::ng-deep as-split-area {`
	`60`	`+ ::ng-deep > as-split-area {`
`59`	`61`	`width: 100%;`
`60`	`62`
`61`	`63`	`&.is-hided {`
`@@ -64,6 +66,8 @@`
`64`	`66`	`}`
`65`	`67`	`}`
`66`	`68`
	`69`	`+ /* When disabled remove gutters background image and specific cursor. */`
	`70`	`+`
`67`	`71`	`&.is-disabled {`
`68`	`72`
`69`	`73`	`& > .as-split-gutter {`
`@@ -72,16 +76,14 @@`
`72`	`76`	`}`
`73`	`77`	`}`
`74`	`78`
`75`		`- &.is-transition.is-init:not(.is-dragging) {`
	`79`	`+ /* Add transition only when transition enabled + split initialized + not currently dragging. */`
`76`	`80`
`77`		`- & > .as-split-gutter {`
`78`		`- transition: flex-basis 0.3s;`
`79`		`- }`
	`81`	`+ &.is-transition.is-init:not(.is-dragging) {`
`80`	`82`
`81`		`- ::ng-deep as-split-area {`
	`83`	`+ & > .as-split-gutter,`
	`84`	`+ ::ng-deep > as-split-area {`
`82`	`85`	`transition: flex-basis 0.3s;`
`83`	`86`	`}`
`84`		`-`
`85`	`87`	`}`
`86`	`88`	`}`
`87`	`89`