From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 .storybook/storybook.scss | 231 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)
 create mode 100644 .storybook/storybook.scss

(limited to '.storybook/storybook.scss')

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
new file mode 100644
index 0000000..ce905cf
--- /dev/null
+++ b/.storybook/storybook.scss
@@ -0,0 +1,231 @@
+@import 'typography.scss';
+@import '../src/style/scss/style.scss';
+@import '~prismjs/themes/prism.css';
+
+body {
+	@include base-font-regular();
+	margin: 15px;
+	max-width: 800px;
+}
+
+a {
+	color: #1474f3;
+	text-decoration: none;
+	border-bottom: 1px solid #1474f3;
+	padding-bottom: 2px;
+}
+
+.colors-table {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	font-size: 13px;
+	.color-section {
+		display: flex;
+		flex-direction: column;
+		margin: 10px 0;
+		min-width: 150px;
+		div {
+			align-self: center;
+			user-select: text;
+		}
+		$circle-size: 40px;
+		.color-circle {
+			height: $circle-size;
+			width: $circle-size;
+			border-radius: $circle-size;
+			padding: 10px;
+			text-align: center;
+		}
+	}
+}
+
+.icons-screen {
+	width: 1190px;
+	.missing-icon-section {
+		border-top: 1px solid $light-gray;
+		padding-top: 10px;
+	}
+	.icons-option-selector {
+		margin-top: 20px;
+		margin-bottom: 20px;
+		display: flex;
+		.option-container {
+			display: flex;
+			flex-direction: column;
+			flex-basis: 100%;
+			margin-right: 20px;
+		}
+	}
+
+	.icons-table {
+		margin-top: 50px;
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		border-top: 1px solid $light-gray;
+		justify-content: flex-start;
+		.icon-section {
+			display: flex;
+			flex-direction: column;
+			margin: 10px;
+			min-width: 150px;
+			.svg-icon-wrapper {
+				cursor: pointer;
+				width: 20px;
+				height: 42px;
+				margin-left: auto;
+				margin-right: auto;
+				.svg-icon-label {
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.svg-icon {
+		&.storybook-big {
+			width: 120px;
+			height: 120px;
+		}
+		&.storybook-small {
+			width: 60px;
+			height: 60px;
+		}
+	}
+}
+
+.sdc-popup-menu {
+	@include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.2));
+	width: 200px;
+	height: 200px;
+	border: 1px solid $light-gray;
+}
+
+.typography-screen {
+	.typography-section {
+		margin: 20px 0;
+	}
+	ul {
+		font-size: 18px;
+	}
+	.typo-table {
+		.typo-section {
+			div {
+				display: inline-block;
+				//border: 1px solid black;
+				width: 30%;
+				margin: 4px 0;
+			}
+			.sample-text {
+				white-space: nowrap;
+
+			}
+		}
+	}
+	.heading-1 {
+		@include heading-1;
+	}
+	.heading-2 {
+		@include heading-2;
+	}
+	.heading-3 {
+		@include heading-3;
+	}
+	.heading-4 {
+		@include heading-4;
+	}
+	.heading-4-emphasis {
+		@include heading-4-emphasis;
+	}
+	.heading-5 {
+		@include heading-5;
+	}
+
+	.body-1 {
+		@include body-1;
+	}
+
+	.body-1-italic {
+		@include body-1-italic;
+	}
+
+	.body-2 {
+		@include body-2;
+	}
+
+	.body-2-emphasis {
+		@include body-2-emphasis;
+	}
+
+	.body-3 {
+		@include body-3;
+	}
+
+	.body-3-emphasis {
+		@include body-3-emphasis;
+	}
+
+	.body-4 {
+		@include body-4;
+	}
+}
+
+.source-toggle-wrapper {
+	.source-toggle-title {
+		@include heading-2;
+	}
+	.source-toggle {
+		display: flex;
+		border-top: 1px solid $light-gray;
+		padding: 10px 0;
+		&:first-child {
+			border-top: none;
+		}
+		.source-toggle-example {
+			flex-basis: 40%;
+			flex-shrink: 0;
+		}
+		.source-toggle-code {
+			background-color: $light-silver;
+			padding: 5px;
+			margin-left: 30px;
+			pre {
+				margin-top: 0;
+				user-select: text;
+				overflow-x: auto;
+				overflow-y: hidden;
+				max-width: 800px;
+				code {
+					font-size: 15px;
+					font-weight: 600;
+					padding: 2px 5px;
+					border: 1px solid #eae9e9;
+					border-radius: 4px;
+					background-color: #f3f2f2;
+					color: #3a3a3a;
+					.token {
+						line-height: 20px;
+					}
+				}
+			}
+			.source-toggle-code-tabs {
+				display: flex;
+				margin-bottom: 10px;
+				.source-toggle-tab {
+					@include body-1;
+					@include base-font-semibold;
+					margin-right: 20px;
+					cursor: pointer;
+					&.selected {
+						border-bottom: 2px solid $dark-blue;
+						color: $dark-blue;
+						font-weight: bold;
+					}
+				}
+			}
+		}
+	}
+}
+
-- 
cgit 1.2.3-korg