CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3814 collapsible: Change height var name to avoid confusion

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-10 09:28:11 +01:00
parent c626c38acd
commit 6d249498f4
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/directives/collapsible-item.ts
View File

@ -176,11 +176,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
*/
protected setHeight(height?: number): void {
if (height) {
this.element.style.setProperty('--height', height + 'px');
this.element.style.setProperty('--collapsible-height', height + 'px');
} else if (this.expandedHeight) {
this.element.style.setProperty('--height', this.expandedHeight + 'px');
this.element.style.setProperty('--collapsible-height', this.expandedHeight + 'px');
} else {
this.element.style.removeProperty('--height');
this.element.style.removeProperty('--collapsible-height');
}
}

10
src/theme/components/collapsible-item.scss
View File

@ -1,14 +1,14 @@
.collapsible-item {
--display-toggle: none;
--height: none;
--collapsible-height: none;
--toggle-size: 24px;
--gradient-size: 44px;
&.collapsible-loading-height {
display: block !important;
height: auto !important;
--height: auto !important;
--collapsible-height: auto !important;
--display-toggle: none !important;
}
@ -21,8 +21,8 @@
position: relative;
padding-bottom: var(--toggle-size); // So the Show less button can fit.
--display-toggle: block;
@include core-transition(height max-height, 300ms);
height: calc(var(--height, auto) + var(--toggle-size));
@include core-transition(height, 300ms);
height: calc(var(--collapsible-height, auto) + var(--toggle-size));
.collapsible-toggle {
position: absolute;
@ -64,7 +64,7 @@
&.collapsible-collapsed {
overflow: hidden;
min-height: calc(var(--toggle-size) + 12px);
height: var(--height, auto);
height: var(--collapsible-height, auto);
.collapsible-toggle-arrow {
transform: rotate(90deg);

4
src/theme/components/format-text.scss
View File

@ -77,13 +77,15 @@ core-format-text {
}
&.collapsible-collapsed .core-format-text-content {
overflow: hidden;
height: var(--collapsible-height);
@include core-transition(height, 300ms);
}
}
@if ($core-format-text-never-shorten) {
&.collapsible-enabled {
--display-toggle: none !important;
--max-height: none !important;
--collapsible-height: auto !important;
.collapsible-toggle {
display: none !important;