@vgip/meta-ui 2.0.0 → 2.1.1

package/vendor/volta3/scss/layout/_article.scss

@@ -0,0 +1,119 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-article {
+	h1,
+	h2 {
+		margin-bottom: variables.$unit3;
+
+		&:not(:first-child) {
+			margin-top: variables.$unit4;
+			padding-top: 0;
+		}
+	}
+
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-bottom: variables.$unit2;
+
+		&:not(:first-child) {
+			margin-top: variables.$unit3;
+			padding-top: 0;
+		}
+	}
+
+	pre[class*='language'],
+	.Vlt-box,
+	.Vlt-table,
+	.Vlt-callout {
+		margin-bottom: variables.$unit2;
+
+		&:not(:first-child) {
+			margin-top: variables.$unit2;
+		}
+	}
+
+	.Vlt-list {
+		li {
+			margin-bottom: variables.$unit2;
+		}
+	}
+
+	p:not(.p-large) {
+		line-height: 2rem;
+	}
+
+	figure {
+		margin: variables.$unit4 auto;
+		text-align: center;
+	}
+
+	.Vlt-box--fancy,
+	.Vlt-modal,
+	.Vlt-callout,
+	.Vlt-sidenav {
+		@extend .Vlt-article--reverse;
+	}
+}
+
+.Vlt-article--reverse {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-bottom: variables.$unit1;
+		margin-top: 0;
+
+		&:not(:first-child) {
+			margin-top: 0;
+		}
+	}
+
+	h1,
+	h2 {
+		margin-bottom: variables.$unit2;
+	}
+
+	pre[class*='language'],
+	.Vlt-box,
+	.Vlt-table,
+	.Vlt-callout {
+		margin-bottom: variables.$unit1;
+		margin-top: 0;
+
+		&:not(:first-child) {
+			margin-top: 0;
+		}
+	}
+
+	p:not(.p-large) {
+		line-height: 2rem;
+	}
+
+	.Vlt-list {
+		li {
+			margin-bottom: 0.5em;
+		}
+	}
+
+	figure {
+		margin: variables.$unit2 auto;
+		text-align: center;
+	}
+}
+
+.Vlt-section {
+	display: inline-block; //remove margin collapse
+	margin: variables.$unit3 0;
+}
+
+.Vlt-inset {
+	margin-left: variables.$unit4;
+}

package/vendor/volta3/scss/layout/_utils.scss

@@ -0,0 +1,174 @@
+@use "sass:list";
+@use "../lib/mediaqueries";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-center {
+	text-align: center !important;
+}
+
+.Vlt-right {
+	text-align: right !important;
+}
+
+.Vlt-left {
+	text-align: left !important;
+}
+
+.Vlt-nowrap {
+	white-space: nowrap !important;
+}
+
+.Vlt-no-border {
+	border-color: transparent !important;
+	transition: border-color .5s;
+
+	&:hover,
+	&:active,
+	&:focus {
+		border-color: initial !important;
+	}
+}
+
+.Vlt-elevation {
+	&--1 {
+		box-shadow: 0 2px 10px rgba(variables.$black, 0.1) !important;
+	}
+
+	&--2 {
+		box-shadow: 0 4px 20px rgba(variables.$black, 0.1) !important;
+	}
+
+	&--3 {
+		box-shadow: 0 10px 30px rgba(variables.$black, 0.1) !important;
+	}
+
+	&--4 {
+		box-shadow: 0 20px 40px rgba(variables.$black, 0.1) !important;
+	}
+}
+
+.Vlt-status {
+	background-color: currentColor;
+	border: 2px solid variables.$white;
+	border-radius: 100%;
+	bottom: 0;
+	box-sizing: content-box;
+	display: block;
+	height: 8px;
+	position: absolute;
+	right: 0;
+	width: 8px;
+}
+
+.Vlt-truncate {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&--inline {
+		display: inline;
+	}
+}
+
+hr {
+	border-bottom: 0;
+	border-top: 1px solid variables.$grey-light;
+	flex: 0 0 100%;
+	height: 0;
+	margin: variables.$unit3 0;
+
+	&[class*='Vlt-gradient'] {
+		border: 0;
+		height: 1px;
+	}
+}
+
+.hr--tall {
+	margin: variables.$unit4 0;
+}
+
+.hr--short {
+	margin: variables.$unit2 0;
+}
+
+.hr--shorter {
+	margin: variables.$unit1 0;
+}
+
+.Vlt-icon {
+	display: inline-block;
+	height: 24px;
+	vertical-align: middle;
+	width: 24px;
+
+	&--18 {
+		height: 18px;
+		width: 18px;
+	}
+
+	&--small {
+		height: 20px;
+		width: 20px;
+	}
+
+	&--smaller {
+		height: 16px;
+		width: 16px;
+	}
+
+	&--text-bottom {
+		vertical-align: text-bottom;
+	}
+
+	&--large {
+		height: 32px;
+		width: 32px;
+	}
+
+	&--larger {
+		height: 40px;
+		width: 40px;
+	}
+
+	&--largest {
+		height: 48px;
+		width: 48px;
+	}
+}
+
+.Vlt-container {
+	max-width: 1200px;
+}
+
+$devices: (
+	#{mediaqueries.$L-plus}: '',
+	#{mediaqueries.$S-only}: 'S-',
+	#{mediaqueries.$M-only}: 'M-',
+	'': 'A-'
+	);
+
+$directions: 'top', 'bottom';
+$units: (variables.$unitN, variables.$unit1, variables.$unit2, variables.$unit3, variables.$unit4);
+
+@each $direction in $directions {
+	@each $media, $devicePrefix in $devices {
+		@for $i from 1 through 5 {
+
+			.Vlt-margin--#{$devicePrefix}#{$direction}#{$i - 1} {
+				@if $media != '' {
+					@media #{$media} {
+						margin-#{$direction}: list.nth($units, $i) !important;
+					}
+				} @else {
+					margin-#{$direction}: list.nth($units, $i) !important;
+				}
+			}
+		}
+	}
+}

package/vendor/volta3/scss/lib/_grid.scss

@@ -0,0 +1,374 @@
+@use "mediaqueries";
+@use "variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-grid {
+	align-items: stretch;
+	display: flex;
+	flex-flow: row wrap;
+	margin-left: -(variables.$unit2);
+	margin-right: -(variables.$unit2);
+
+	&--center {
+		justify-content: center;
+	}
+
+	&--nowrap {
+		flex-flow: row;
+	}
+
+	&--flush {
+		margin-left: 0;
+		margin-right: 0;
+
+		& > .Vlt-col {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+	&--stack-flush {
+		@media #{mediaqueries.$M-less} {
+			.Vlt-col:not([class*='Vlt-col--M']),
+			.Vlt-col:not([class*='Vlt-col--S']),
+			.Vlt-col:not([class*='Vlt-col--A']) {
+				margin-bottom: 0;
+				margin-top: 0;
+			}
+		}
+	}
+
+	&--narrow {
+		@media #{mediaqueries.$L-plus} {
+			margin-left: -(variables.$unit1);
+			margin-right: -(variables.$unit1);
+		}
+
+		.Vlt-col {
+			@media #{mediaqueries.$L-plus} {
+				padding-left: variables.$unit1;
+				padding-right: variables.$unit1;
+			}
+
+			@media #{mediaqueries.$M-less} {
+				&:not([class*='Vlt-col--M']),
+				&:not([class*='Vlt-col--S']) {
+					margin-bottom: variables.$unit0;
+					margin-top: variables.$unit0;
+				}
+			}
+		}
+	}
+
+	&__separator {
+		flex: 0 0 100% !important;
+		max-width: 100% !important;
+
+		&--spaced {
+			height: 1.5rem;
+		}
+
+		&--tall {
+			height: 2.5rem;
+		}
+	}
+
+	&--middle {
+		align-items: center;
+	}
+
+	&--bottom {
+		align-items: flex-end;
+	}
+
+	&--margin {
+		&1 {
+			margin-bottom: variables.$unit1;
+			margin-top: variables.$unit1;
+		}
+
+		&2 {
+			margin-bottom: variables.$unit2;
+			margin-top: variables.$unit2;
+		}
+
+		&3 {
+			margin-bottom: variables.$unit3;
+			margin-top: variables.$unit3;
+		}
+
+		&4 {
+			margin-bottom: variables.$unit4;
+			margin-top: variables.$unit4;
+		}
+
+		&-top {
+			&1 {
+				margin-top: variables.$unit1;
+			}
+
+			&2 {
+				margin-top: variables.$unit2;
+			}
+
+			&3 {
+				margin-top: variables.$unit3;
+			}
+
+			&4 {
+				margin-top: variables.$unit4;
+			}
+		}
+
+		&-bottom {
+			&1 {
+				margin-bottom: variables.$unit1;
+			}
+
+			&2 {
+				margin-bottom: variables.$unit2;
+			}
+
+			&3 {
+				margin-bottom: variables.$unit3;
+			}
+
+			&4 {
+				margin-bottom: variables.$unit4;
+			}
+		}
+	}
+}
+
+.Vlt-col {
+	flex-basis: 0; // Important
+	flex-grow: 1;
+	// We used to have min-width: 0 to prevent things from overflowing but it prevented large elements from stacking properly so now we have max-width 100%
+	max-width: 100%;
+	padding-left: variables.$unit2;
+	padding-right: variables.$unit2;
+	position: relative;
+
+	@media print {
+		display: inline-block;
+	}
+
+	@media #{mediaqueries.$M-less} {
+		&:not([class*='Vlt-col--A']):not([class*='Vlt-col--M']),
+		&:not([class*='Vlt-col--A']):not([class*='Vlt-col--S']) {
+			flex: 0 0 100%;
+			max-width: 100%;
+		}
+
+		&:not([class*='Vlt-col--M']),
+		&:not([class*='Vlt-col--S']) {
+			margin-bottom: variables.$unit1;
+			margin-top: variables.$unit1;
+		}
+	}
+
+	&--full {
+		flex: 0 0 100%;
+	}
+
+	&- {
+		@media #{mediaqueries.$L-plus} {
+			&-1of2 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-1of3 {
+				flex: 0 0 33.33%;
+				max-width: 33.33%;
+			}
+
+			&-2of3 {
+				flex: 0 0 66.66%;
+				max-width: 66.66%;
+			}
+
+			&-1of4 {
+				flex: 0 0 25%;
+				max-width: 25%;
+			}
+
+			&-2of4 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-3of4 {
+				flex: 0 0 75%;
+				max-width: 75%;
+			}
+
+			&-center {
+				text-align: center;
+			}
+
+			&-right {
+				text-align: right;
+			}
+
+			&-left {
+				text-align: left;
+			}
+		}
+	}
+
+	&--A {
+		// All sizes
+
+		flex-basis: 0;
+		flex-grow: 1;
+
+		&-1of2 {
+			flex: 0 0 50%;
+			max-width: 50%;
+		}
+
+		&-1of3 {
+			flex: 0 0 33.33%;
+			max-width: 33.33%;
+		}
+
+		&-2of3 {
+			flex: 0 0 66.66%;
+			max-width: 66.66%;
+		}
+
+		&-1of4 {
+			flex: 0 0 25%;
+			max-width: 25%;
+		}
+
+		&-2of4 {
+			flex: 0 0 50%;
+			max-width: 50%;
+		}
+
+		&-3of4 {
+			flex: 0 0 75%;
+			max-width: 75%;
+		}
+
+		&-center {
+			text-align: center;
+		}
+
+		&-right {
+			text-align: right;
+		}
+
+		&-left {
+			text-align: left;
+		}
+	}
+
+	&--S {
+		@media #{mediaqueries.$S-only} {
+			flex-basis: 0; // Important
+			flex-grow: 1;
+
+			&-1of2 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-1of3 {
+				flex: 0 0 33.33%;
+				max-width: 33.33%;
+			}
+
+			&-2of3 {
+				flex: 0 0 66.66%;
+				max-width: 66.66%;
+			}
+
+			&-1of4 {
+				flex: 0 0 25%;
+				max-width: 25%;
+			}
+
+			&-2of4 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-3of4 {
+				flex: 0 0 75%;
+				max-width: 75%;
+			}
+
+			&-center {
+				text-align: center;
+			}
+
+			&-right {
+				text-align: right;
+			}
+
+			&-left {
+				text-align: left;
+			}
+		}
+	}
+
+	&--M {
+		@media #{mediaqueries.$M-only} {
+			flex-basis: 0; // Important
+			flex-grow: 1;
+
+			&-1of2 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-1of3 {
+				flex: 0 0 33.33%;
+				max-width: 33.33%;
+			}
+
+			&-2of3 {
+				flex: 0 0 66.66%;
+				max-width: 66.66%;
+			}
+
+			&-1of4 {
+				flex: 0 0 25%;
+				max-width: 25%;
+			}
+
+			&-2of4 {
+				flex: 0 0 50%;
+				max-width: 50%;
+			}
+
+			&-3of4 {
+				flex: 0 0 75%;
+				max-width: 75%;
+			}
+
+			&-center {
+				text-align: center;
+			}
+
+			&-right {
+				text-align: right;
+			}
+
+			&-left {
+				text-align: left;
+			}
+		}
+	}
+}
+
+.Vlt-row {
+	clear: both;
+	padding: 10px 0;
+}

package/vendor/volta3/scss/lib/_mediaqueries.scss

@@ -0,0 +1,52 @@
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+// We only use 2 breakpoints because normally we design for 3 screen: phone, tablet and desktop
+// There's no point in having more than these breakpoints if we're not going to provide design for them
+
+$big-screen: 768px;
+$small-screen: 576px;
+
+$big-screen-w-sidenav: 1038px;
+$small-screen-w-sidenav: 846px;
+
+$S-only: 'only screen and (max-width: #{$small-screen - 1})';
+$M-only: 'only screen and (min-width: #{$small-screen} ) and (max-width: #{$big-screen - 1})';
+$M-plus: 'only screen and (min-width: #{$small-screen} )';
+$M-less: 'only screen and (max-width: #{$big-screen - 1})';
+$L-plus: 'only screen and (min-width: #{$big-screen})';
+
+.Vlt-S-only {
+	@media #{$M-plus} {
+		display: none !important;
+	}
+}
+
+.Vlt-M-only {
+	@media #{$S-only} {
+		display: none !important;
+	}
+
+	@media #{$L-plus} {
+		display: none !important;
+	}
+}
+
+.Vlt-L-plus {
+	@media #{$M-less} {
+		display: none !important;
+	}
+}
+
+.Vlt-M-plus {
+	@media #{$S-only} {
+		display: none !important;
+	}
+}
+
+.Vlt-M-less {
+	@media #{$L-plus} {
+		display: none !important;
+	}
+}