@openziti/ziti-console-lib 0.3.0

package/assets/styles/growler.css

@@ -0,0 +1,190 @@
+#Growler {
+	position: fixed;
+	right: 20px;
+	bottom: -100px;
+	min-width: 300px;
+	z-index: 9999999;
+	max-width: 500px;
+}
+
+#NotificationsList {
+    padding-left: 10px;
+    padding-right: 10px;
+    overflow-y: scroll;
+    height: 90vh;
+}
+
+#NotificationsList .growler {
+	position: relative;
+	display: inline-block;
+	z-index: 9999999;
+	width: 100%;
+	opacity: 1.0;
+	margin-bottom: 10px;
+}
+
+#NotificationsList .nonotify {
+    padding-left: 11px;
+    font-size: 19px;
+    opacity: 0.4;	
+}
+
+.growler {
+	background-color: #f6f7fb;    
+	min-height: 105px;
+	min-width: 334px;
+	font-size: 16px;
+	color: #000;
+	text-align: left;
+	border-radius: 6px;
+    -webkit-box-shadow: 0px 12px 23px 0px rgba(0,0,0,.2);
+    -moz-box-shadow: 0px 12px 23px 0px rgba(0,0,0,.1);
+    box-shadow: 0px 12px 23px 0px rgba(0,0,0,.1);
+    -webkit-transition: 0.5s;
+    -moz-transition: 0.5s;
+    -ms-transition: 0.5s;
+    -o-transition: 0.5s;
+    transition: 0.5s;
+    opacity: 0.0;
+}
+
+#Growler.open {
+	bottom: 20px;
+}
+
+.growler.open {
+    opacity: 1.0;
+}
+
+.growler .time {
+	font-size: 13px;
+	color: #FFF;
+	position: absolute;
+	top: 7px;
+	right: 10px;
+    font-weight: 600;
+font-family: "Open Sans";
+}
+
+.growler.error .title {
+	background-color: #ff104b;
+}
+
+.growler.success .title {
+	background-color: #03db5c;
+}
+
+.growler.warning .title {
+	background-color: #ffc103;
+}
+
+.growler.info .title {
+	background-color: #0971ff;
+}
+
+.growler.bug .title {
+	background-color: #ff104b;
+}
+
+.growler .title {
+	padding-left: 10px;
+	padding-right: 10px;
+	font-size: 14px;
+	font-weight: bold;
+	color: #FFF;
+	line-height: 30px;
+	text-transform: uppercase;
+	background-color: #03db5c;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+    font-weight: 600;
+    font-family: 'Open Sans';
+    filter: brightness(100%);
+}
+
+.growler .subtitle {
+    padding-top: 17px;
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 75px;
+    padding-right: 10px;
+	overflow: hidden;
+}
+
+.growler .content {
+	font-size: 13px;
+    font-weight: normal;
+    padding-left: 75px;
+    padding-right: 20px;
+	margin-top: 2px;
+    line-height: 14px;
+    text-overflow: ellipsis;
+	overflow: hidden;
+    font-weight: 400;
+	font-family: 'Open Sans';
+    color: #434c5e;
+    padding-bottom: 10px;
+}
+
+.growler .icon {
+	width: 55px;
+    height: 55px;
+    background-position: center center;
+    background-size: 80%;
+    position: absolute;
+    left: 10px;
+    top: 40px;
+}
+
+.growler.error .icon {
+    background-image: url(../images/Growl_Error.png);
+}
+
+.growler.success .icon {
+    background-image: url(../images/Growl_Success.png);
+}
+
+.growler.info .icon {
+    background-image: url(../images/Growl_Info.png);
+}
+
+.growler.warning .icon {
+    background-image: url(../images/Growl_Warning.png);
+}
+
+.growler.bug .icon {
+    background-image: url(../images/Growl_Bug.png);
+}
+
+#NotificationsMenu {
+	z-index: 979;
+	width: 0px;
+	position: fixed;
+	top: 0px;
+	bottom: 0px;
+	left: -80px;
+	background-color: var(--offWhite);
+    transition: 0.5s;
+	opacity: 0.0;
+	overflow: hidden;
+}
+
+#NotificationsMenu.open {
+	width: 380px;
+	left: 0px;
+    opacity: 1.0;
+	border-right-width: 4px;
+	border-right-color: var(--stroke);
+	border-right-style: solid;
+}
+
+#NotificationsMenu .header.title {
+	font-weight: 300;
+    font-family: 'Russo One';
+    font-size: 20px;
+    line-height: 84px;
+    color: var(--primary);
+    filter: brightness(50%);
+    padding-left: 20px;
+	text-transform: uppercase;
+}

package/assets/styles/header.css

@@ -0,0 +1,232 @@
+/***
+ ** Header Styles 
+***/
+
+header {
+    position: fixed;
+    left: 0px;
+    width: 65px;
+    top: 0px;
+    bottom: 0px;
+    z-index: 100;
+    background: linear-gradient(to bottom, var(--primary) 0%, var(--secondary) 100%);
+}
+
+.header .title {
+    height: 30px;
+    overflow: hidden;
+}
+
+header .topButtons {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    height: 50%;
+    z-index: 5;
+}
+
+header .bottomButtons {
+    position: absolute;
+    bottom: 20px;
+    left: 0px;
+    right: 0px;
+    z-index: 5;
+}
+
+header .clickable {
+    position: relative;
+    clear: both;
+    display: block;
+    float: left;
+    width: 54px;
+    height: 44px;
+    margin-left: 5px;
+    margin-top: 10px;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+header .clickable .icon {
+    width: 27px;
+    height: 27px;
+    position: absolute;
+    left: 14px;
+    top: 14px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 29px;
+    text-align: center;
+    color: #FFF;
+}
+
+header .clickable .main {
+    opacity: 1.0;
+    width: 37px;
+    height: 37px;
+    left: 9px;
+    top: 9px;
+    border-radius: 37px;
+    position: absolute;
+    transition: var(--transition);
+}
+
+header .clickable.open .circle {
+    opacity: 0.3;
+}
+
+header .clickable .circle {
+    opacity: 0.0;
+    z-index: -2;
+    background-color: var(--white);
+    width: 45px;
+    height: 45px;
+    left: 5px;
+    top: 5px;
+    border-radius: 33px;
+    position: absolute;
+    transition: var(--transition); 
+}
+
+header .clickable:hover .circle {
+    opacity: 0.3;
+}
+
+header .clickable.selected .circle {
+    background-color: var(--black);
+    opacity: 0.2;
+}
+
+header #NavigationButton .icon {
+    color: var(--white);
+    font-size: 27px;
+    line-height: 27px;
+    text-align: center;
+}
+
+header #AddButton .icon {
+    background-image: url(../svgs/MainMenuPlus.svg);
+}
+
+header #SearchButton .icon {
+    background-image: url(../svgs/MainMenuSearch.svg);
+}
+
+header #AlertButton .icon {
+    background-image: url(../svgs/MainMenuNotifications.svg);
+}
+
+header #HelpButton .icon {
+    background-image: url(../svgs/MainMenuSupport.svg);
+}
+
+header #OrgButton .icon {
+    background-image: url(../svgs/settings.svg);
+}
+
+header #ProfileButton .icon {
+    background-image: url(../svgs/MainMenuBlankUser.svg);
+    width: 37px;
+    height: 37px;
+    left: 9px;
+    top: 9px;
+    border-radius: 50px;
+}
+
+#ProfileMenu {
+    position: absolute;
+    bottom: -55px;
+    left: 45px;
+}
+
+#ProfileMenu.open {
+    bottom: -5px;
+}
+
+#AlertButton .count {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    font-weight: 400;
+    font-family: 'Open Sans', Arial, sans-serif;
+    background-color: var(--secondary);
+    z-index: 20;
+    color: var(--white);
+    font-size: 8px;
+    line-height: 12px;
+    font-weight: bold;
+    position: absolute;
+    right: 13px;
+    top: 15px;
+    text-align: center;
+    box-shadow: var(--shadows);
+}
+
+.menu {
+	background-color: var(--menu);
+	border-radius: 7px;
+    box-shadow: 0 0 0 1px var(--shadow), 0 8px 16px var(--shadow);
+	font-size: 14px;
+	font-weight: 600;
+	text-transform: uppercase;
+	color: var(--white);
+	letter-spacing: 1px;
+	height: 0px;
+	opacity: 0;
+	transition: 0.2s;
+	z-index: 50;
+	padding-bottom: 10px;
+	padding-top: 10px;
+}
+
+.menu.open {
+	height: unset;
+	opacity: 1.0;
+}
+
+.menu .link {
+	cursor: pointer;
+    line-height: 36px;
+    white-space: nowrap;
+    padding-left: 20px;
+    padding-right: 20px;
+	transition: 0.2s;
+}
+
+.menu .link:hover {
+	background-color: var(--primary);	
+}
+
+.menu .menutitle {
+	opacity: 0.8;
+	white-space: nowrap;
+    line-height: 36px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.hover {
+	white-space: nowrap;
+	position: absolute;
+	pointer-events: none;
+	left: 54px;
+	top: 7px;
+	background-color: var(--menu);
+	padding: 10px;
+	border-radius: 4px;
+	box-shadow: var(--shadows);
+	font-size: 14px;
+	color: var(--white);
+	letter-spacing: 1px;
+	height: 0px;
+	opacity: 0;
+	font-family: Open Sans;
+	font-weight: 600;
+	transition: 0.2s;
+}
+
+.hover.open {
+	height: unset;
+	opacity: 1.0;
+}

package/assets/styles/icons.css

@@ -0,0 +1,160 @@
+@font-face {
+  font-family: 'zac';
+  src:  url('../fonts/zac.eot?l2gtmj');
+  src:  url('../fonts/zac.eot?l2gtmj#iefix') format('embedded-opentype'),
+    url('../fonts/zac.woff2?l2gtmj') format('woff2'),
+    url('../fonts/zac.ttf?l2gtmj') format('truetype'),
+    url('../fonts/zac.woff?l2gtmj') format('woff'),
+    url('../fonts/zac.svg?l2gtmj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'zac' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-download:before {
+  content: "\e92c";
+}
+.icon-copy:before {
+  content: "\e92b";
+}
+.icon-time:before {
+  content: "\e92a";
+}
+.icon-hash:before {
+  content: "\e929";
+}
+.icon-hashtag:before {
+  content: "\e928";
+}
+.icon-clear:before {
+  content: "\e927"; 
+}
+.icon-search:before {
+  content: "\e926";
+}
+.icon-network-hub:before {
+  content: "\e925";
+}
+.icon-known:before {
+  content: "\e922";
+}
+.icon-template:before {
+  content: "\e923";
+}
+.icon-qr:before {
+  content: "\e921";
+}
+.icon-prev:before {
+  content: "\e91f";
+}
+.icon-next:before {
+  content: "\e920";
+}
+.icon-lock:before {
+  content: "\e91d";
+}
+.icon-check:before {
+  content: "\e91c";
+}
+.icon-question-sign:before {
+  content: "\e917";
+}
+.icon-hearts:before {
+  content: "\e918";
+}
+.icon-bulb:before {
+  content: "\e919";
+}
+.icon-bug:before {
+  content: "\e91a";
+}
+.icon-close:before {
+  content: "\e91b";
+}
+.icon-certificates:before {
+  content: "\e900";
+}
+.icon-change:before {
+  content: "\e901";
+}
+.icon-configuration:before {
+  content: "\e902";
+}
+.icon-customize:before {
+  content: "\e903";
+}
+.icon-dashboard:before {
+  content: "\e904";
+}
+.icon-edgepolicies:before {
+  content: "\e905";
+}
+.icon-globe:before {
+  content: "\e906";
+}
+.icon-help:before {
+  content: "\e907";
+}
+.icon-identity:before {
+  content: "\e908";
+}
+.icon-notify:before {
+  content: "\e909";
+}
+.icon-plus:before {
+  content: "\e90a";
+}
+.icon-posture:before {
+  content: "\e90b";
+}
+.icon-profile:before {
+  content: "\e90c";
+}
+.icon-router:before {
+  content: "\e90d";
+}
+.icon-routerpolicies:before {
+  content: "\e90e";
+}
+.icon-schema:before {
+  content: "\e90f";
+}
+.icon-server-1:before {
+  content: "\e910";
+}
+.icon-servers:before {
+  content: "\e911";
+}
+.icon-servicepolicy:before {
+  content: "\e912";
+}
+.icon-services:before {
+  content: "\e913";
+}
+.icon-settings:before {
+  content: "\e914";
+}
+.icon-terminators:before {
+  content: "\e915";
+}
+.icon-transitrouter:before {
+  content: "\e916";
+}
+.icon-minus:before {
+  content: "\e91e";
+}