@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/prism/_prism-volta.scss

@@ -0,0 +1,390 @@
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+@import 'prism';
+@import '../components/tooltips';
+
+/**
+ * Overrides of prism.css to make the styles suited to Vonage
+ */
+
+.pre-nowrap {
+	pre[class*='language-'] {
+		white-space: pre;
+	}
+}
+
+pre[class*='language-'] {
+	-webkit-font-smoothing: antialiased;
+	background: $grey-lighter;
+	border: 0;
+	border-radius: 8px;
+	font-size: 1.5rem;
+	margin: 0 0 $unit2;
+	text-shadow: none;
+	white-space: pre-wrap;
+
+	code {
+		color: $black;
+		display: block;
+		font-family: monospace, monospace;
+		text-shadow: none;
+
+		span {
+			font-size: 100%;
+		}
+
+		em {
+			font-style: italic;
+		}
+
+		&::selection {
+			background: rgba($blue, 0.5);
+		}
+
+		&::moz-selection {
+			background: rgba($blue, 0.5);
+		}
+	}
+
+	// Light color scheme
+
+	.token {
+		&.atrule,
+		&.keyword {
+		    color: $indigo-dark;
+		}
+
+		&.selector,
+		&.tag {
+		    color: $grey-darker;
+		}
+
+		&.attr-name {
+			color: $blue;
+		}
+
+		&.comment {
+		    color: darken($grey, 10);
+		}
+
+		code.language-url,
+		&.function,
+		&.url {
+		    color: $blue-dark;
+		}
+
+		&.boolean,
+		&.builtin,
+		&.class-name,
+		&.constant,
+		&.namespace {
+		    color: $blue;
+		}
+
+		&.operator {
+			background: none;
+		}
+
+		&.number {
+		    color: $red;
+		}
+
+		&.parameter,
+		&.symbol {
+		    color: $red;
+		}
+
+		&.attr-value,
+		&.macro,
+		&.string,
+		&.stripe,
+		&.value {
+		    color: $green-dark;
+		}
+
+		&.variable {
+			color: $orange;
+		}
+
+		&.macro .keyword {
+		    color: $green-darker;
+		}
+
+		&.publishable-key,
+		&.secret-key,
+		&.token-tooltip {
+		    background: $grey-light;
+		    border-radius: 3px;
+		    margin: -2px;
+		    padding: 2px;
+		}
+
+		&.publishable-key.enabled,
+		&.secret-key.enabled,
+		&.token-tooltip.enabled {
+		    background: $grey-light;
+		}
+	}
+
+	.command-line-prompt > span,
+	.line-numbers-rows > span {
+		&:before {
+			color: $grey;
+		}
+	}
+
+	.language-bash .token.option,
+	.language-css .property {
+	    color: $red;
+	}
+
+	.language-html .token,
+	.language-markup .token {
+		&.punctuation {
+			color: $grey-dark;
+		}
+
+		&.attr-value {
+			color: $orange;
+
+			& > .punctuation:not(:first-child) {
+				color: $orange-dark;
+			}
+		}
+
+		&.namespace {
+		    color: $blue-dark;
+		}
+	}
+
+	.language-php .token.operator {
+		background: none;
+	    color: $indigo-dark;
+	}
+
+	// Dark color scheme (based on Atom dark)
+
+	&.Vlt-prism--dark {
+		background: $black;
+		color: $grey;
+
+		code {
+			background-color: $black;
+			color: $grey;
+		}
+
+		.token {
+			&.comment,
+			&.prolog,
+			&.doctype,
+			&.cdata {
+				color: lighten($grey-darker, 10);
+			}
+
+			.namespace {
+				opacity: 0.7;
+			}
+
+			&.property,
+			&.keyword,
+			&.tag {
+			    color: $blue-light;
+			}
+
+			&.class-name {
+				color: $yellow-lighter;
+				text-decoration: underline;
+			}
+
+			&.boolean,
+			&.constant {
+			    color: $green;
+			}
+
+			&.symbol,
+			&.deleted {
+				color: $red;
+			}
+
+			&.number {
+				color: $indigo;
+			}
+
+			&.selector,
+			&.attr-name,
+			&.string,
+			&.char,
+			&.builtin,
+			&.inserted {
+				color: $green-light;
+			}
+
+			&.variable {
+				color: $indigo-light;
+			}
+
+			&.operator,
+			&.punctuation {
+			    background: none;
+			    color: $grey;
+			}
+
+			&.entity {
+			    color: $yellow-lighter;
+			}
+
+			&.url {
+			    color: $blue-light;
+			}
+
+			&.atrule,
+			&.attr-value {
+			    color: $yellow-lighter;
+			}
+
+			&.function {
+				color: $orange-light;
+			}
+
+			&.regex {
+			    color: $yellow-dark;
+			}
+
+			&.important {
+				color: $orange;
+			}
+		}
+
+		.command-line-prompt > span,
+		.line-numbers-rows > span {
+			&:before {
+				color: $grey-dark;
+			}
+		}
+
+		.language-css .token.string,
+		.style .token.string {
+			color: $green;
+		}
+
+		+ div.toolbar {
+			.toolbar-item button {
+
+				&:before {
+					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%20fill%3D%22%23C2C4CC%22%20d%3D%22M1.5%2018H16.5C17.3295%2018%2018%2017.3295%2018%2016.5V1.5C18%200.672%2017.3295%200%2016.5%200H1.5C0.6705%200%200%200.672%200%201.5V16.5C0%2017.3295%200.6705%2018%201.5%2018Z%22%2F%3E%0A%3Cpath%20fill%3D%22%23C2C4CC%22%20d%3D%22M6%2024H22.5C23.3295%2024%2024%2023.3295%2024%2022.5V6H21V21H6V24Z%22%2F%3E%0A%3C%2Fsvg%3E');
+				}
+
+				&:hover {
+					&:before {
+						background-color: $grey-darker;
+					}
+				}
+
+				&:active,
+				&:focus {
+					&:before {
+						background-color: $white;
+						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%20fill%3D%22%23131415%22%20d%3D%22M1.5%2018H16.5C17.3295%2018%2018%2017.3295%2018%2016.5V1.5C18%200.672%2017.3295%200%2016.5%200H1.5C0.6705%200%200%200.672%200%201.5V16.5C0%2017.3295%200.6705%2018%201.5%2018Z%22%2F%3E%0A%3Cpath%20fill%3D%22%23131415%22%20d%3D%22M6%2024H22.5C23.3295%2024%2024%2023.3295%2024%2022.5V6H21V21H6V24Z%22%2F%3E%0A%3C%2Fsvg%3E');
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-prism--copy-disabled {
+		+ div.toolbar {
+			.toolbar-item button {
+				display: none;
+			}
+		}
+	}
+
+}
+
+div.code-toolbar {
+	& > .toolbar {
+		opacity: 1;
+		right: 4px;
+		top: 4px;
+
+		.toolbar-item button {
+			@extend %Vlt-btn, %Vlt-btn--tertiary, %Vlt-btn--small, %Vlt-btn--app;
+			background-color: transparent;
+			box-shadow: none;
+			font-family: 'spezia', sans-serif;
+			margin: 0;
+			min-height: 0;
+			padding: 8px;
+			text-indent: -9999px;
+			transition: none;
+
+			&:before {
+				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%20fill%3D%22%23131415%22%20d%3D%22M1.5%2018H16.5C17.3295%2018%2018%2017.3295%2018%2016.5V1.5C18%200.672%2017.3295%200%2016.5%200H1.5C0.6705%200%200%200.672%200%201.5V16.5C0%2017.3295%200.6705%2018%201.5%2018Z%22%2F%3E%0A%3Cpath%20fill%3D%22%23131415%22%20d%3D%22M6%2024H22.5C23.3295%2024%2024%2023.3295%2024%2022.5V6H21V21H6V24Z%22%2F%3E%0A%3C%2Fsvg%3E');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: 18px 16px;
+				border-radius: 6px;
+				content: '';
+				display: inline-block;
+				flex: 0 0 14px;
+				height: 14px;
+				line-height: 1;
+				margin-left: 0;
+				padding: 16px;
+				position: absolute;
+				right: 0;
+				text-indent: 0;
+				top: 0;
+				width: 16px;
+			}
+
+			&:after {
+				@extend .tooltip-arrow, .arrow-top-mixin;
+				content: '';
+				display: none;
+				height: 26px;
+				right: 10px;
+				width: 10px;
+			}
+
+			&:hover {
+				background-color: $black;
+				color: $white;
+				margin-right: -4px;
+				margin-top: -68px;
+				text-indent: 0;
+
+				&:before {
+					background-color: $grey;
+				}
+
+				&:after {
+					display: inline-block;
+				}
+			}
+
+			&:active,
+			&:focus {
+				background-color: $black !important;
+
+				&:before {
+					background-color: $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%20fill%3D%22%23ffffff%22%20d%3D%22M1.5%2018H16.5C17.3295%2018%2018%2017.3295%2018%2016.5V1.5C18%200.672%2017.3295%200%2016.5%200H1.5C0.6705%200%200%200.672%200%201.5V16.5C0%2017.3295%200.6705%2018%201.5%2018Z%22%2F%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M6%2024H22.5C23.3295%2024%2024%2023.3295%2024%2022.5V6H21V21H6V24Z%22%2F%3E%0A%3C%2Fsvg%3E');
+				}
+			}
+		}
+	}
+}
+
+.command-line-prompt {
+	border-right: 1px solid $grey-dark;
+	display: block;
+	float: left;
+	font-size: 100% !important;
+	letter-spacing: -1px;
+	margin-right: 1em;
+	pointer-events: none;
+	user-select: none;
+}

package/vendor/volta3/scss/prism/_prism.css

@@ -0,0 +1,326 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+csharp+bash+ruby+markup-templating+git+java+json+php+python&plugins=line-highlight+line-numbers+toolbar+command-line+keep-markup+copy-to-clipboard */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em; /* Same as .prism’s padding-top */
+
+	background: hsla(24, 20%, 50%,.08);
+	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+	pointer-events: none;
+
+	line-height: inherit;
+	white-space: pre;
+}
+
+	.line-highlight:before,
+	.line-highlight[data-end]:after {
+		content: attr(data-start);
+		position: absolute;
+		top: .4em;
+		left: .6em;
+		min-width: 1em;
+		padding: 0 .5em;
+		background-color: hsla(24, 20%, 50%,.4);
+		color: hsl(24, 20%, 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	.line-highlight[data-end]:after {
+		content: attr(data-end);
+		top: auto;
+		bottom: .4em;
+	}
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+	content: none;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+
+.command-line-prompt {
+	border-right: 1px solid #999;
+	display: block;
+	float: left;
+	font-size: 100%;
+	letter-spacing: -1px;
+	margin-right: 1em;
+	pointer-events: none;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.command-line-prompt > span:before {
+	color: #999;
+	content: ' ';
+	display: block;
+	padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-user]:before {
+	content: "[" attr(data-user) "@" attr(data-host) "] $";
+}
+
+.command-line-prompt > span[data-user="root"]:before {
+	content: "[" attr(data-user) "@" attr(data-host) "] #";
+}
+
+.command-line-prompt > span[data-prompt]:before {
+	content: attr(data-prompt);
+}
+