@import "../../style/animation.scss";
@import "../../style/border.scss";
@import "../../style/shadow.scss";

$PagesMenu-icon-size: 2.5em;

.PagesMenu-container {
	position: relative;
}

.PagesMenu-box-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: opacity $short-duration, visibility $short-duration;
	z-index: 100;
}

.PagesMenu-box {
	@include paper-shadow;
	@include paper-border;

	background: white;
	position: absolute;
	top: $PagesMenu-icon-size + 1em;
	z-index: 200;

	& > * {
		margin: 1em 2em;
	}
}

.PagesMenu-box-invisible {
	@extend .PagesMenu-box;

	visibility: hidden;
	opacity: 0;
}

.PagesMenu-icon {
	font-size: $PagesMenu-icon-size;
	cursor: pointer;

	& > svg {
		transition: transform $short-duration;
	}
}

.PagesMenu-icon-active {
	@extend .PagesMenu-icon;

	& > svg {
		transform: rotate(90deg);
	}
}

@import "../../style/animation.scss";
@import "../../style/border.scss";
@import "../../style/shadow.scss";

$PagesMenu-icon-size: 2.5em;

.PagesMenu-container {
	position: relative;
}

.PagesMenu-box-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: opacity $short-duration, visibility $short-duration;
	z-index: 100;
}

.PagesMenu-box {
	@include paper-shadow;
	@include paper-border;

	background: white;
	padding: 0.5em 1em;
	position: absolute;
	top: $PagesMenu-icon-size + 1em;
	z-index: 200;

	& > * {
		margin: 1em;
	}
}

.PagesMenu-box-invisible {
	@extend .PagesMenu-box;

	visibility: hidden;
	opacity: 0;
}

.PagesMenu-icon {
	font-size: $PagesMenu-icon-size;
	cursor: pointer;

	& > svg {
		transition: transform $short-duration;
	}
}

.PagesMenu-icon-active {
	@extend .PagesMenu-icon;

	& > svg {
		transform: rotate(90deg);
	}
}

Change inner margins of pages menu
Change inner margins of pages menu
