# elementor/3.8.0-beta1/app/assets/js/molecules/collapse.scss

Elementor Website Builder – more than just a page builder, version 3.8.0-beta1. 68 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/collapse.scss
- Raw: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/raw/app/assets/js/molecules/collapse.scss
- Modified: 2022-09-19T16:26:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/collapse.scss#L10-L20`.

```scss
$e-app-collapse-icon-color: tints(600);
$e-app-collapse-icon-dark-color: dark-tints(200);

$root: e-app-collapse;

.#{$root} {
	--e-app-collapse-icon-color: #{$e-app-collapse-icon-color};

	&-toggle {
		position: relative;

		&--active {
			cursor: pointer;
		}

		&__icon {
			color: var(--e-app-collapse-icon-color);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: type(size, "14");
			position: absolute;
			top: 50%;
			right: var(--e-app-collapse-toggle-icon-spacing);
			transform: translateY(-50%);

			&:before {
				transition: all 0.2s linear;
			}
		}
	}

	&-content {
		display: none;
	}

	&--opened {
		.#{$root}-toggle {
			&__icon {
				&:before {
					transform: rotate(-180deg);
				}
			}
		}

		.#{$root}-content {
			display: block;
		}
	}
}

[dir="rtl"] {
	.#{$root} {
		&-toggle {
			&__icon {
				right: initial;
				left: var(--e-app-collapse-toggle-icon-spacing);
			}
		}
	}
}

.eps-theme-dark {
	.#{$root} {
		--e-app-collapse-icon-color: #{$e-app-collapse-icon-dark-color};
	}
}

```