@openziti/ziti-console-lib 0.6.8 → 0.7.0

package/assets/styles/growler.css

@@ -1,15 +1,15 @@
 #Growler {
 	position: fixed;
-	right: 20px;
-	bottom: -100px;
-	min-width: 300px;
+	right: 1.25rem;
+	bottom: -6.25rem;
+	min-width: 18.75rem;
 	z-index: 9999999;
-	max-width: 500px;
+	max-width: 31.25rem;
 }
 
 #NotificationsList {
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
     overflow-y: scroll;
     height: 90vh;
 }
@@ -20,26 +20,26 @@
 	z-index: 9999999;
 	width: 100%;
 	opacity: 1.0;
-	margin-bottom: 10px;
+	margin-bottom: 0.625rem;
 }
 
 #NotificationsList .nonotify {
-    padding-left: 11px;
-    font-size: 19px;
+    padding-left: 0.6875rem;
+    font-size: 1.1875rem;
     opacity: 0.4;	
 }
 
 .growler {
 	background-color: #f6f7fb;    
-	min-height: 105px;
-	min-width: 334px;
-	font-size: 16px;
+	min-height: 6.5625rem;
+	min-width: 20.875rem;
+	font-size: 1rem;
 	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);
+	border-radius: 0.375rem;
+    -webkit-box-shadow: 0rem 0.75rem 1.4375rem 0rem rgba(0,0,0,.2);
+    -moz-box-shadow: 0rem 0.75rem 1.4375rem 0rem rgba(0,0,0,.1);
+    box-shadow: 0rem 0.75rem 1.4375rem 0rem rgba(0,0,0,.1);
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -ms-transition: 0.5s;
@@ -49,7 +49,7 @@
 }
 
 #Growler.open {
-	bottom: 20px;
+	bottom: 1.25rem;
 }
 
 .growler.open {
@@ -57,11 +57,11 @@
 }
 
 .growler .time {
-	font-size: 13px;
+	font-size: 0.8125rem;
 	color: #FFF;
 	position: absolute;
-	top: 7px;
-	right: 10px;
+	top: 0.4375rem;
+	right: 0.625rem;
     font-weight: 600;
 font-family: "Open Sans";
 }
@@ -87,53 +87,53 @@ font-family: "Open Sans";
 }
 
 .growler .title {
-	padding-left: 10px;
-	padding-right: 10px;
-	font-size: 14px;
+	padding-left: 0.625rem;
+	padding-right: 0.625rem;
+	font-size: 0.875rem;
 	font-weight: bold;
 	color: #FFF;
-	line-height: 30px;
+	line-height: 1.875rem;
 	text-transform: uppercase;
 	background-color: #03db5c;
-	border-top-left-radius: 6px;
-	border-top-right-radius: 6px;
+	border-top-left-radius: 0.375rem;
+	border-top-right-radius: 0.375rem;
     font-weight: 600;
     font-family: 'Open Sans';
     filter: brightness(100%);
 }
 
 .growler .subtitle {
-    padding-top: 17px;
-    font-size: 15px;
+    padding-top: 1.0625rem;
+    font-size: 0.9375rem;
     font-weight: bold;
-    padding-left: 75px;
-    padding-right: 10px;
+    padding-left: 4.6875rem;
+    padding-right: 0.625rem;
 	overflow: hidden;
 }
 
 .growler .content {
-	font-size: 13px;
+	font-size: 0.8125rem;
     font-weight: normal;
-    padding-left: 75px;
-    padding-right: 20px;
-	margin-top: 2px;
-    line-height: 14px;
+    padding-left: 4.6875rem;
+    padding-right: 1.25rem;
+	margin-top: 0.125rem;
+    line-height: 0.875rem;
     text-overflow: ellipsis;
 	overflow: hidden;
     font-weight: 400;
 	font-family: 'Open Sans';
     color: #434c5e;
-    padding-bottom: 10px;
+    padding-bottom: 0.625rem;
 }
 
 .growler .icon {
-	width: 55px;
-    height: 55px;
+	width: 3.4375rem;
+    height: 3.4375rem;
     background-position: center center;
     background-size: 80%;
     position: absolute;
-    left: 10px;
-    top: 40px;
+    left: 0.625rem;
+    top: 2.5rem;
 }
 
 .growler.error .icon {
@@ -158,11 +158,11 @@ font-family: "Open Sans";
 
 #NotificationsMenu {
 	z-index: 979;
-	width: 0px;
+	width: 0rem;
 	position: fixed;
-	top: 0px;
-	bottom: 0px;
-	left: -80px;
+	top: 0rem;
+	bottom: 0rem;
+	left: -5rem;
 	background-color: var(--offWhite);
     transition: 0.5s;
 	opacity: 0.0;
@@ -170,10 +170,10 @@ font-family: "Open Sans";
 }
 
 #NotificationsMenu.open {
-	width: 380px;
-	left: 0px;
+	width: 23.75rem;
+	left: 0rem;
     opacity: 1.0;
-	border-right-width: 4px;
+	border-right-width: 0.25rem;
 	border-right-color: var(--stroke);
 	border-right-style: solid;
 }
@@ -181,10 +181,10 @@ font-family: "Open Sans";
 #NotificationsMenu .header.title {
 	font-weight: 300;
     font-family: 'Russo One';
-    font-size: 20px;
-    line-height: 84px;
+    font-size: 1.25rem;
+    line-height: 5.25rem;
     color: var(--primary);
     filter: brightness(50%);
-    padding-left: 20px;
+    padding-left: 1.25rem;
 	text-transform: uppercase;
 }

package/assets/styles/header.css

@@ -4,33 +4,33 @@
 
 header {
     position: fixed;
-    left: 0px;
-    width: 65px;
-    top: 0px;
-    bottom: 0px;
+    left: 0rem;
+    width: 4.0625rem;
+    top: 0rem;
+    bottom: 0rem;
     z-index: 100;
     background: linear-gradient(to bottom, var(--primary) 0%, var(--secondary) 100%);
 }
 
 .header .title {
-    height: 30px;
+    height: 1.875rem;
     overflow: hidden;
 }
 
 header .topButtons {
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
     height: 50%;
     z-index: 5;
 }
 
 header .bottomButtons {
     position: absolute;
-    bottom: 20px;
-    left: 0px;
-    right: 0px;
+    bottom: 1.25rem;
+    left: 0rem;
+    right: 0rem;
     z-index: 5;
 }
 
@@ -39,35 +39,35 @@ header .clickable {
     clear: both;
     display: block;
     float: left;
-    width: 54px;
-    height: 44px;
-    margin-left: 5px;
-    margin-top: 10px;
+    width: 3.375rem;
+    height: 2.75rem;
+    margin-left: 0.3125rem;
+    margin-top: 0.625rem;
     cursor: pointer;
     transition: var(--transition);
 }
 
 header .clickable .icon {
-    width: 27px;
-    height: 27px;
+    width: 1.6875rem;
+    height: 1.6875rem;
     position: absolute;
-    left: 14px;
-    top: 14px;
+    left: 0.875rem;
+    top: 0.875rem;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-    font-size: 29px;
+    font-size: 1.8125rem;
     text-align: center;
     color: #FFF;
 }
 
 header .clickable .main {
     opacity: 1.0;
-    width: 37px;
-    height: 37px;
-    left: 9px;
-    top: 9px;
-    border-radius: 37px;
+    width: 2.3125rem;
+    height: 2.3125rem;
+    left: 0.5625rem;
+    top: 0.5625rem;
+    border-radius: 2.3125rem;
     position: absolute;
     transition: var(--transition);
 }
@@ -80,11 +80,11 @@ header .clickable .circle {
     opacity: 0.0;
     z-index: -2;
     background-color: var(--white);
-    width: 45px;
-    height: 45px;
-    left: 5px;
-    top: 5px;
-    border-radius: 33px;
+    width: 2.8125rem;
+    height: 2.8125rem;
+    left: 0.3125rem;
+    top: 0.3125rem;
+    border-radius: 2.0625rem;
     position: absolute;
     transition: var(--transition); 
 }
@@ -100,8 +100,8 @@ header .clickable.selected .circle {
 
 header #NavigationButton .icon {
     color: var(--white);
-    font-size: 27px;
-    line-height: 27px;
+    font-size: 1.6875rem;
+    line-height: 1.6875rem;
     text-align: center;
 }
 
@@ -127,38 +127,38 @@ header #OrgButton .icon {
 
 header #ProfileButton .icon {
     background-image: url(../svgs/MainMenuBlankUser.svg);
-    width: 37px;
-    height: 37px;
-    left: 9px;
-    top: 9px;
-    border-radius: 50px;
+    width: 2.3125rem;
+    height: 2.3125rem;
+    left: 0.5625rem;
+    top: 0.5625rem;
+    border-radius: 3.125rem;
 }
 
 #ProfileMenu {
     position: absolute;
-    bottom: -55px;
-    left: 45px;
+    bottom: -3.4375rem;
+    left: 2.8125rem;
 }
 
 #ProfileMenu.open {
-    bottom: -5px;
+    bottom: -0.3125rem;
 }
 
 #AlertButton .count {
-    width: 13px;
-    height: 13px;
+    width: 0.8125rem;
+    height: 0.8125rem;
     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-size: 0.5rem;
+    line-height: 0.75rem;
     font-weight: bold;
     position: absolute;
-    right: 13px;
-    top: 15px;
+    right: 0.8125rem;
+    top: 0.9375rem;
     text-align: center;
     box-shadow: var(--shadows);
 }
@@ -166,18 +166,18 @@ header #ProfileButton .icon {
 .menu {
 	background-color: var(--menu);
 	border-radius: var(--inputBorderRadius);
-    box-shadow: 0 0 0 1px var(--shadow), 0 8px 16px var(--shadow);
-	font-size: 14px;
+    box-shadow: 0 0 0 0.0625rem var(--shadow), 0 0.5rem 1rem var(--shadow);
+	font-size: 0.875rem;
 	font-weight: 600;
 	text-transform: uppercase;
 	color: var(--white);
-	letter-spacing: 1px;
-	height: 0px;
+	letter-spacing: 0.0625rem;
+	height: 0rem;
 	opacity: 0;
 	transition: 0.2s;
 	z-index: 50;
-	padding-bottom: 10px;
-	padding-top: 10px;
+	padding-bottom: 0.625rem;
+	padding-top: 0.625rem;
 }
 
 .menu.open {
@@ -187,10 +187,10 @@ header #ProfileButton .icon {
 
 .menu .link {
 	cursor: pointer;
-    line-height: 36px;
+    line-height: 2.25rem;
     white-space: nowrap;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
 	transition: 0.2s;
 }
 
@@ -201,25 +201,25 @@ header #ProfileButton .icon {
 .menu .menutitle {
 	opacity: 0.8;
 	white-space: nowrap;
-    line-height: 36px;
-    padding-left: 20px;
-    padding-right: 20px;
+    line-height: 2.25rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
 }
 
 .hover {
 	white-space: nowrap;
 	position: absolute;
 	pointer-events: none;
-	left: 54px;
-	top: 7px;
+	left: 3.375rem;
+	top: 0.4375rem;
 	background-color: var(--menu);
-	padding: 10px;
-	border-radius: 4px;
+	padding: 0.625rem;
+	border-radius: 0.25rem;
 	box-shadow: var(--shadows);
-	font-size: 14px;
+	font-size: 0.875rem;
 	color: var(--white);
-	letter-spacing: 1px;
-	height: 0px;
+	letter-spacing: 0.0625rem;
+	height: 0rem;
 	opacity: 0;
 	font-family: Open Sans;
 	font-weight: 600;

package/assets/styles/navigation.css

@@ -4,30 +4,30 @@
 
 nav {
     position: fixed;
-    top: -10px;
-    left: 0px;
-    width: 60px;
-    bottom: -10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    top: -0.625rem;
+    left: 0rem;
+    width: 3.75rem;
+    bottom: -0.625rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
     background-color: var(--shaded);
-	box-shadow: inset 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
+	box-shadow: inset 0rem 0.25rem 1rem 0rem rgba(0, 0, 0, 0.08);
 }
 
 nav .title {
     color: var(--primary);
     filter: brightness(50%);
-    font-size: 28px;
+    font-size: 1.75rem;
     font-family: 'Russo One';
     text-align: center;
-    margin-left: 110px;
-    margin-right: 45px;
-    font-size: 24px;
-    line-height: 56px;
+    margin-left: 6.875rem;
+    margin-right: 2.8125rem;
+    font-size: 1.5rem;
+    line-height: 3.5rem;
 }
 
 nav.open {
-    width: 380px;
+    width: 23.75rem;
 }
 
 nav.open .navList {
@@ -44,9 +44,9 @@ nav .navArea.open {
 
 nav .navList {    
     grid-template-columns: 100%;
-    grid-row-gap: 20px;
-    margin-left: 85px;
-    margin-right: 1px;
+    grid-row-gap: 1.25rem;
+    margin-left: 5.3125rem;
+    margin-right: 0.0625rem;
     display: none; 
     color: var(--white);
 
@@ -56,7 +56,7 @@ nav .navList .navButton {
     position: relative;
     display: inline-block;
     text-align: center;
-    height: 40px;
+    height: 2.5rem;
     cursor: pointer;
     width: 100%;
 }
@@ -67,12 +67,12 @@ nav .navList .navButton.disabled {
 }
 
 nav .navList .navButton .iconArea {
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
+    width: 3.125rem;
+    height: 3.125rem;
+    border-radius: 0.5rem;
     display: inline-block;
     position: relative;
-    border-width: 2px;
+    border-width: 0.125rem;
     float: left;
     border-style: solid;
     background-color: var(--white);
@@ -83,7 +83,7 @@ nav .navList .navButton .iconArea {
 }
 
 nav .navList .navButton:hover .iconArea {
-	box-shadow: 0 14px 20px rgba(0, 0, 0, .05), 0 14px 20px rgba(0, 0, 0, .05);
+	box-shadow: 0 0.875rem 1.25rem rgba(0, 0, 0, .05), 0 0.875rem 1.25rem rgba(0, 0, 0, .05);
 }
 
 nav .navList:hover {
@@ -95,7 +95,7 @@ nav .navList .navButton .iconArea.selected {
 }
 
 nav .navList .navButton:active .iconArea {
-	box-shadow: 0 14px 20px rgba(0, 0, 0, .05), 0 14px 20px rgba(0, 0, 0, .05);	
+	box-shadow: 0 0.875rem 1.25rem rgba(0, 0, 0, .05), 0 0.875rem 1.25rem rgba(0, 0, 0, .05);	
 }
 
 nav .navList .navButton .image::before {
@@ -108,26 +108,26 @@ nav .navList .navButton .image {
     width: 100%;
     background-position: center center;
     background-size: contain;
-    font-size: 35px;
-    line-height: 50px;
+    font-size: 2.1875rem;
+    line-height: 3.125rem;
     text-align: center;
 }
 
 nav .navList .navButton .label {
     color: var(--text);
-    font-size: 15px;
+    font-size: 0.9375rem;
     text-transform: uppercase;
-    line-height: 50px;
+    line-height: 3.125rem;
     font-weight: 600;
     text-align: left;
     font-family: 'Open Sans';
-    margin-bottom: 5px;
+    margin-bottom: 0.3125rem;
     float: left;
     position: relative;
-    margin-left: 20px;
+    margin-left: 1.25rem;
     text-overflow: clip;
     overflow: hidden;
-    height: 50px;
+    height: 3.125rem;
 }
 
 nav .lock::before {
@@ -136,12 +136,12 @@ nav .lock::before {
 
 nav .lock {
     position: absolute;
-    bottom: 20px;
-    right: 10px;
-    width: 30px;
-    height: 30px;
-	font-size: 30px;
-	line-height: 30px;
+    bottom: 1.25rem;
+    right: 0.625rem;
+    width: 1.875rem;
+    height: 1.875rem;
+	font-size: 1.875rem;
+	line-height: 1.875rem;
 	text-align: center;
     opacity: 0.2;
     cursor: pointer;
@@ -158,26 +158,26 @@ nav .lock.locked {
 
 @media (max-height:920px) {
     nav .navList {
-        grid-row-gap: 10px;
+        grid-row-gap: 0.625rem;
     }
 
     nav .navList .navButton {
-        height: 40px;
+        height: 2.5rem;
     }
 
     nav .navList .navButton .iconArea {
-        width: 40px;
-        height: 40px;
-        border-radius: 5px;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 0.3125rem;
     }
 
     nav .navList .navButton .label {
-        font-size: 12px;
-        line-height: 40px;
+        font-size: 0.75rem;
+        line-height: 2.5rem;
     }
 
     nav .navList .navButton .image {
-        font-size: 25px;
-        line-height: 40px;
+        font-size: 1.5625rem;
+        line-height: 2.5rem;
     }
 }