Initial commit

client/scss/sticky/_menu.scss

@@ -0,0 +1,185 @@
+/*Menus & Action Sheets & Modals*/
+
+$theme-dark-menu-hider: rgba(0,0,0,0.7);
+$theme-light-menu-hider: rgba(0,0,0,0.35);
+
+/*--Menu System---*/
+.menu-title {
+	h1 {
+		font-size: 23px;
+		font-weight: 700;
+		padding: 20px 0px 3px 20px;
+	}
+	p {
+		font-size: 11px;
+		margin: -15px 0px 10px 20px;
+		padding: 0px 0px 0px 0px;
+	}
+	a {
+		font-size: 20px;
+		color: $red;
+		position: absolute;
+		text-align: center;
+		width: 55px;
+		line-height: 85px;
+		right: 0px;
+		top: 0px;
+	}
+}
+.menu-bg {
+	background-color: $theme-light-background; 
+}
+.menu-hider {
+	position: fixed;
+	top: -100px;
+	bottom: -100px;
+	left: 0px;
+	right: 0px;
+	background-color: $theme-light-menu-hider;
+	z-index: 100;
+	pointer-events: none;
+	opacity: 0;
+	transition: $globalTransitions;
+}
+.menu {
+	display: none;
+	position: fixed;
+	background-color: $color-white;
+	z-index: 101;
+	overflow: scroll;
+	transition: $globalTransitions;
+	-webkit-overflow-scrolling: touch;
+	.content {
+		margin-bottom: 0px !important;
+	}
+}
+.menu-box-left {
+	left: 0px;
+	top: 0px !important;
+	top: constant(safe-area-inset-top) !important;
+	top: env(safe-area-inset-top) !important;
+	width: 250px;
+	height: 100%;
+	bottom: 0px;
+	box-shadow: 0 15px 25px 1px rgba(0,0,0,0.1);
+	transform: translate3d(-100%,0,0);
+}
+.menu-box-right {
+	right: 0px;
+	transform: translateX(100%);
+	top: 0px !important;
+	top: constant(safe-area-inset-top) !important;
+	top: env(safe-area-inset-top) !important;
+	height: 100%;
+	bottom: 0px;
+	box-shadow: 0 15px 25px 1px rgba(0,0,0,0.1);
+	width: 250px;
+}
+.menu-box-top {
+	transform: translate3d(0, -115%, 0);
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	height: 300px;
+}
+.menu-box-bottom {
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	height: 300px;
+	transform: translate3d(0, 110%, 0);
+}
+.menu-box-modal {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) scale(0, 0);
+	opacity: 0;
+	pointer-events: none;
+	transition: $globalTransitions;
+}
+.menu-box-top.menu-box-detached {
+	top: 10px;
+	left: 10px;
+	right: 10px;
+}
+.menu-box-bottom.menu-box-detached {
+	bottom: 20px;
+	left: 10px;
+	right: 10px;
+}
+.menu-box-left.menu-active {transform: translate3d(0%, 0, 0) !important;}
+.menu-box-right.menu-active {transform: translate3d(0%, 0, 0) !important;}
+.menu-box-top.menu-active {transform: translate3d(0%, 0, 0) !important;}
+.is-on-homescreen {
+	.menu-box-top.menu-active {
+		transform: translate3d(0%, 40px, 0) !important;
+	}
+}
+.menu-box-bottom.menu-active {
+	transform: translate3d(0%, 0, 0) !important;
+}
+.menu-box-modal.menu-active {
+	transition: $globalTransitions;
+	pointer-events: all !important;
+	opacity: 1 !important;
+	transform: translate(-50%, -50%) scale(1, 1) !important;
+}
+.menu-hider.menu-active {
+	transition: $globalTransitions;
+	opacity: 1;
+	pointer-events: all;
+}
+.menu-hider.menu-active.menu-active-clear {
+	background-color: $color-transparent !important;
+}
+.menu-box-left[data-menu-effect="menu-reveal"] {
+	opacity: 0;
+	pointer-events: none;
+	transform: translate(0px) !important;
+	z-index: 96;
+}
+.menu-box-right[data-menu-effect="menu-reveal"] {
+	opacity: 0;
+	pointer-events: none;
+	transform: translate(0px) !important;
+	z-index: 96;
+}
+.menu-active.menu {
+	opacity: 1 !important;
+	transition: $globalTransitions;
+	pointer-events: all !important;
+}
+/*Menu Update*/
+#menu-update {
+	background-color: $color-white;
+	position: fixed;
+	z-index: 9999;
+	width: 310px;
+	height: 430px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0;
+	pointer-events: none;
+	border-radius: 10px;
+	transition: $globalTransitions;
+}
+.menu-active {
+	opacity: 1 !important;
+}
+.menu-active-no-click {
+	opacity: 1;
+	background-color: $theme-dark-menu-hider;
+	pointer-events: all !important;
+}
+#menu-install-pwa-ios {
+	overflow: visible !important;
+}
+.fa-ios-arrow {
+	transform: translateY(4px);
+}
+.theme-light {
+	.fa-ios-arrow {
+		color: $color-white !important;
+	}
+}