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 { protected setHeight(height?: number): void {
if (height) { if (height) {
this.element.style.setProperty('--height', height + 'px'); this.element.style.setProperty('--collapsible-height', height + 'px');
} else if (this.expandedHeight) { } else if (this.expandedHeight) {
this.element.style.setProperty('--height', this.expandedHeight + 'px'); this.element.style.setProperty('--collapsible-height', this.expandedHeight + 'px');
} else { } 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 { .collapsible-item {
--display-toggle: none; --display-toggle: none;
--height: none; --collapsible-height: none;
--toggle-size: 24px; --toggle-size: 24px;
--gradient-size: 44px; --gradient-size: 44px;
&.collapsible-loading-height { &.collapsible-loading-height {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
--height: auto !important; --collapsible-height: auto !important;
--display-toggle: none !important; --display-toggle: none !important;
} }
@ -21,8 +21,8 @@
position: relative; position: relative;
padding-bottom: var(--toggle-size); // So the Show less button can fit. padding-bottom: var(--toggle-size); // So the Show less button can fit.
--display-toggle: block; --display-toggle: block;
@include core-transition(height max-height, 300ms); @include core-transition(height, 300ms);
height: calc(var(--height, auto) + var(--toggle-size)); height: calc(var(--collapsible-height, auto) + var(--toggle-size));
.collapsible-toggle { .collapsible-toggle {
position: absolute; position: absolute;
@ -64,7 +64,7 @@
&.collapsible-collapsed { &.collapsible-collapsed {
overflow: hidden; overflow: hidden;
min-height: calc(var(--toggle-size) + 12px); min-height: calc(var(--toggle-size) + 12px);
height: var(--height, auto); height: var(--collapsible-height, auto);
.collapsible-toggle-arrow { .collapsible-toggle-arrow {
transform: rotate(90deg); 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 { &.collapsible-collapsed .core-format-text-content {
overflow: hidden; overflow: hidden;
height: var(--collapsible-height);
@include core-transition(height, 300ms);
} }
} }
@if ($core-format-text-never-shorten) { @if ($core-format-text-never-shorten) {
&.collapsible-enabled { &.collapsible-enabled {
--display-toggle: none !important; --display-toggle: none !important;
--max-height: none !important; --collapsible-height: auto !important;
.collapsible-toggle { .collapsible-toggle {
display: none !important; display: none !important;