@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_lists.scss

@@ -0,0 +1,427 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-list {
+	margin-bottom: variables.$unit2;
+	padding-left: variables.$unit2;
+
+	ul,
+	ol {
+		margin-top: variables.$unit1;
+		padding-left: variables.$unit3;
+	}
+
+	li {
+		margin-bottom: 0.5em;
+		position: relative;
+	}
+}
+
+.Vlt-list--simple {
+
+	& > li {
+		&:before {
+			color: variables.$black;
+		}
+
+		& > ul > li,
+		& > ol > li {
+			&:before {
+				color: variables.$grey-darker;
+			}
+
+			& > ul > li,
+			& > ol > li {
+				&:before {
+					color: variables.$black;
+				}
+			}
+		}
+	}
+}
+
+ul.Vlt-list--simple {
+
+	& > li {
+		&:before {
+			content: '•';
+			left: -(variables.$unit2);
+			position: absolute;
+			top: 0em;
+		}
+	}
+}
+
+ol.Vlt-list--simple {
+	counter-reset: list;
+	padding-left: 20px;
+
+	ol {
+		counter-reset: list;
+	}
+
+	& > li {
+		&:before {
+			content: counter(list) '.';
+			counter-increment: list;
+			font-weight: 600;
+			left: -20px;
+			position: absolute;
+			top: 0em;
+		}
+	}
+}
+
+.Vlt-list--square {
+	& > li {
+		margin-bottom: 30px;
+		padding-left: 30px;
+		position: relative;
+
+		&:before {
+			background: variables.$blue-dark;
+			border-radius: 2px;
+			content: '';
+			height: 10px;
+			left: 5px;
+			position: absolute;
+			top: 0.6em;
+			width: 10px;
+		}
+
+		& > li {
+			&:before {
+				color: inherit;
+				content: inherit;
+			}
+		}
+	}
+}
+
+.Vlt-list--icon {
+	padding-left: 0;
+
+	& > li {
+		margin-bottom: variables.$unit2;
+		padding-left: 30px;
+		position: relative;
+
+		&:before {
+			display: none;
+		}
+
+		& > svg {
+			background: none;
+			height: 20px;
+			left: 0px;
+			position: absolute;
+			top: 0px;
+			width: 20px;
+		}
+	}
+}
+
+.Vlt-big-number {
+	margin-top: variables.$unit1;
+	min-height: 40px;
+	padding-left: 50px;
+	padding-top: variables.$unit0;
+	position: relative;
+
+	&:before {
+		align-items: center;
+		background: variables.$grey-dark;
+		border-radius: 50px;
+	    color: variables.$white;
+	    content: attr(data-index);
+		display: flex;
+		font-size: 1.5rem;
+		font-weight: bold;
+		height: 30px;
+		justify-content: center;
+		left: 5px;
+		position: absolute;
+		top: 0;
+		width: 30px;
+	}
+
+	&--h3 {
+		&:before {
+			top: 0;
+		}
+	}
+
+	&__inset {
+		margin-left: 48px;
+	}
+}
+
+.Vlt-list--big-number {
+	counter-reset: list;
+
+	& > li,
+	ol > li {
+		@extend .Vlt-big-number;
+		counter-increment: list;
+		padding-left: variables.$unit3;
+
+		&:before {
+			content: counter(list);
+			left: -(variables.$unit2);
+			top: 0;
+
+			.Vlt-bg-blue & {
+				background: variables.$blue;
+			}
+		}
+	}
+
+	&-black {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$black;
+			}
+		}
+	}
+
+	&-grey {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$grey;
+			}
+		}
+	}
+
+	&-white {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$white;
+				color: variables.$black;
+			}
+		}
+	}
+
+	&-orange {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$orange;
+			}
+		}
+	}
+
+	&-blue {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$blue;
+			}
+		}
+	}
+
+	&-red {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$red;
+			}
+		}
+	}
+
+	&-green {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$green;
+			}
+		}
+	}
+
+	&-purple {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$purple;
+			}
+		}
+	}
+
+	&-yellow {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$yellow;
+			}
+		}
+	}
+
+	&-indigo {
+		& > li,
+		ol > li {
+			&:before {
+				background: variables.$indigo;
+			}
+		}
+	}
+}
+
+.Vlt-number {
+	align-items: center;
+	background: variables.$grey-dark;
+	border-radius: 50px;
+	color: variables.$white;
+	display: inline-flex;
+	font-size: 1.5rem;
+	font-weight: bold;
+	height: 30px;
+	justify-content: center;
+	margin: variables.$unit0;
+	width: 30px;
+
+	&:before {
+		content: attr(data-index);
+	}
+
+	&--dialer {
+		background: variables.$grey-lighter;
+		border-radius: variables.$unit1;
+		color: variables.$black;
+		flex-flow: column;
+		font-weight: 400;
+		height: 36px;
+		line-height: 1;
+		width: 36px;
+
+		small {
+			font-size: 1rem;
+			line-height: 1rem;
+		}
+	}
+
+	&--outlined {
+		background: none;
+		border-color: variables.$black;
+		border-style: solid;
+		border-width: 1px;
+		color: variables.$black;
+	}
+
+	&--small {
+		font-size: 1.2rem;
+		height: 18px;
+		width: 18px;
+	}
+}
+
+.Vlt-list-item {
+	display: flex;
+	flex: 1;
+	position: relative;
+
+	&__meta {
+		align-self: center;
+		color: variables.$grey-darker;
+		font-size: 1.2rem;
+	}
+
+	&__icon {
+		&,
+		& svg {
+			align-items: center;
+			border-radius: 100%;
+			display: inline-flex;
+			flex: 0 0 32px;
+			height: 32px;
+			margin-right: 12px;
+			position: relative;
+			width: 32px;
+		}
+
+		& svg {
+			&.Vlt-icon--smaller {
+				height: 16px;
+				margin-bottom: 0;
+			}
+		}
+
+		.Vlt-status {
+			bottom: -2px;
+			right: -2px;
+		}
+	}
+
+	&__text {
+		align-self: center;
+		flex: 1;
+	}
+
+	&.Vlt-list-item--large {
+		margin-bottom: 0;
+		padding: 12px 0 13px;
+
+		&:after {
+			background-color: variables.$grey-light;
+			bottom: 0;
+			content: '';
+			height: 1px;
+			left: 64px;
+			position: absolute;
+			right: 0;
+		}
+
+		&-noborder {
+			&:after {
+				display: none;
+			}
+		}
+
+		.Vlt-list-item__icon {
+			&,
+			& svg {
+				flex: 0 0 48px;
+				height: 48px;
+				margin-right: variables.$unit2;
+				width: 48px;
+			}
+
+			.Vlt-status {
+				bottom: 1px;
+				right: 1px;
+			}
+		}
+
+		.Vlt-list-item__text {
+			font-size: 1.6rem;
+			font-weight: 600;
+			line-height: 2.3rem;
+
+			span {
+				display: block;
+				font-size: 1.4rem;
+				font-weight: normal;
+				line-height: 2.1rem;
+				margin-top: 4px;
+			}
+		}
+
+		.Vlt-list-item__text + .Vlt-btn {
+			align-self: center;
+			height: 20px;
+			min-height: 20px;
+			min-width: 20px;
+			padding: 0;
+			width: 20px;
+
+			svg {
+				height: 8px;
+				width: 8px;
+			}
+		}
+	}
+}

package/vendor/volta3/scss/components/_modals.scss

@@ -0,0 +1,227 @@
+@use "../lib/mediaqueries";
+@use "../lib/utils";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+@keyframes scaleUp {
+
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(1000px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0px);
+  }
+}
+
+@keyframes scaleDown {
+
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0px);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.8) translateY(1000px);
+  }
+}
+
+.Vlt-modal {
+	align-items: center;
+	background: none;
+	display: flex;
+	height: 100vh;
+	justify-content: center;
+	left: 0;
+	position: fixed;
+	top: 0;
+	transform: scale(0);
+	transition: background 0.5s;
+	width: 100vw;
+	z-index: variables.$z-index-modals;
+
+	&__panel {
+		background: variables.$white;
+		border-radius: 6px;
+		box-shadow: 0 30px 40px rgba(variables.$black, 0.2);
+		display: flex;
+		flex-flow: column;
+		max-height: 95vh;
+		padding: variables.$unit4;
+		position: relative;
+		width: calc(100vw - 20px);
+
+		@media #{mediaqueries.$M-plus} {
+			width: 400px;
+		}
+
+		@media #{mediaqueries.$S-only} {
+			margin-bottom: 80px;
+			margin-top: 80px;
+			max-height: calc(70vh);
+		}
+
+		p {
+			color: variables.$black;
+		}
+	}
+
+	&__header {
+		flex-shrink: 0;
+		padding-bottom: 8px;
+
+		.Vlt-icon {
+			margin-bottom: variables.$unit3;
+		}
+	}
+
+	&__dismiss {
+		$fill-color: utils.encode-hex-code(variables.$black);
+		background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M17.7429%206.25714C17.4%205.91429%2016.8857%205.91429%2016.5429%206.25714L12%2010.8L7.45714%206.25714C7.11429%205.91429%206.6%205.91429%206.25714%206.25714C5.91429%206.6%205.91429%207.11429%206.25714%207.45714L10.8%2012L6.25714%2016.5429C5.91429%2016.8857%205.91429%2017.4%206.25714%2017.7429C6.42857%2017.9143%206.6%2018%206.85714%2018C7.11429%2018%207.28571%2017.9143%207.45714%2017.7429L12%2013.2L16.5429%2017.7429C16.7143%2017.9143%2016.9714%2018%2017.1429%2018C17.3143%2018%2017.5714%2017.9143%2017.7429%2017.7429C18.0857%2017.4%2018.0857%2016.8857%2017.7429%2016.5429L13.2%2012L17.7429%207.45714C18.0857%207.11429%2018.0857%206.6%2017.7429%206.25714Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: 100%;
+		border: 0;
+		box-shadow: none;
+		cursor: pointer;
+		height: 24px;
+		opacity: 1;
+		position: absolute;
+		right: 16px;
+		top: 16px;
+		transition: opacity 0.2s;
+		width: 24px;
+
+		&:hover {
+			opacity: 0.6;
+		}
+	}
+
+	&__footer {
+		flex-shrink: 0;
+		margin-bottom: -(variables.$unit1);
+
+		&--small {
+			margin: 0 -20px -20px;
+			padding-top: variables.$unit0;
+			position: relative;
+
+			&:before {
+				@extend .Vlt-elevation--1 !optional;
+				bottom: -12px;
+				content: '';
+				left: -12px;
+				position: absolute;
+				right: -12px;
+				top: 0;
+			}
+		}
+
+		.Vlt-btn {
+			@extend %Vlt-btn--app !optional;
+			margin-bottom: 0;
+			min-width: 75px;
+		}
+	}
+
+	&_visible {
+		background: rgba(variables.$black, 0.5);
+		opacity: 1;
+		transform: scale(1) translateY(0px);
+
+		.Vlt-modal__panel {
+			animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+		}
+	}
+
+	&--out {
+		background: none;
+		opacity: 0;
+		transform: scale(0);
+
+		.Vlt-modal__panel {
+			animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+		}
+	}
+
+	&--large {
+		@media #{mediaqueries.$M-plus} {
+			.Vlt-modal__panel {
+				width: 630px;
+			}
+		}
+	}
+
+	&--message {
+		text-align: center;
+
+		.Vlt-modal__content {
+			text-align: center;
+		}
+	}
+
+	&__content {
+		-webkit-overflow-scrolling: touch;
+		flex: auto; // not flex: 1 because IE11 needs flex-basis: auto or it gives it a 0 height
+		max-height: calc(95vh - 122px); // otherwise it overflows in IE
+		overflow-x: hidden; // otherwise IE11 shows a scrollbar on forms
+		overflow-y: auto;
+		padding-bottom: variables.$unit3;
+
+		&--message {
+			text-align: center;
+		}
+	}
+
+	&--form {
+		text-align: left;
+	}
+
+	&--small {
+		.Vlt-modal__header {
+			.Vlt-icon {
+				margin-bottom: variables.$unit2;
+			}
+		}
+
+		.Vlt-modal__panel {
+			padding: variables.$unit3;
+		}
+
+		.Vlt-modal__sticky {
+			padding: variables.$unit2 0;
+			position: relative;
+
+			&:before {
+				background-color: variables.$grey-light;
+				content: '';
+				height: 1px;
+				left: -(variables.$unit3);
+				position: absolute;
+				right: -(variables.$unit3);
+				top: 0;
+			}
+		}
+
+		.Vlt-modal__footer {
+			&--small {
+				margin: 0 -12px -12px;
+			}
+		}
+	}
+}
+
+body.Vlt-body--modal-open {
+	overflow: hidden;
+
+	main {
+		overflow: hidden;
+	}
+}
+