@openziti/ziti-console-lib 0.6.8 → 0.7.0

package/assets/styles/forms.css

@@ -1,12 +1,12 @@
 label {
     color: var(--dark);
     text-transform: uppercase;
-    margin-top: 10px;
+    margin-top: 0.625rem;
     position: relative;
     display: inline-block;
     width: 100%;
-    margin-bottom: 3px;
-    font-size: 14px;
+    margin-bottom: 0.1875rem;
+    font-size: 0.875rem;
     white-space: nowrap;
     font-weight: 600;
     font-family: 'Open Sans';
@@ -16,7 +16,7 @@ label {
 }
 
 textarea::placeholder {
-    font-size: 15px !important;
+    font-size: 0.9375rem !important;
 }
 
 input, select, textarea {
@@ -28,19 +28,19 @@ input, select, textarea {
     border-style: solid;
     border-width: var(--inputBorderWidth);
     border-radius: var(--inputBorderRadius);
-    padding-left: 7px;
-    padding-right: 7px;
+    padding-left: 0.4375rem;
+    padding-right: 0.4375rem;
     outline: none;
     box-sizing: border-box;
-    font-size: 14px;
+    font-size: 0.875rem;
     background-color: var(--navigation) !important;
     color: var(--text);
     -webkit-appearance: none;
 }
 
 input[type="checkbox"] {
-	width: 40px;
-	height: 40px;
+	width: 2.5rem;
+	height: 2.5rem;
 }
 
 input[type="file"] {
@@ -50,23 +50,23 @@ input[type="file"] {
 input.filter {
 	color: var(--white) !important;
     position: absolute;
-    right: 0px;
-    top: -3px;
-    width: 225px;
-    height: 30px;
-    line-height: 30px;
-    border-width: 1px;
-    font-size: 12px;
+    right: 0rem;
+    top: -0.1875rem;
+    width: 14.0625rem;
+    height: 1.875rem;
+    line-height: 1.875rem;
+    border-width: 0.0625rem;
+    font-size: 0.75rem;
     border-color: var(--menu);
     background-color: var(--menu) !important;
 }
 
 textarea.mini {
-	font-size: 12px;
+	font-size: 0.75rem;
 }
 
 textarea {
-	height: 150px;
+	height: 9.375rem;
 	resize: none;
 }
 
@@ -105,25 +105,25 @@ input.errors, select.errors, textarea.errors, div.errors .selectable {
 
 select {
     background-image: url(../images/select.png);
-    background-position: center right 7px;
+    background-position: center right 0.4375rem;
     background-repeat: no-repeat;
-    background-size: 14px 7px;
-    padding-right: 22px;
+    background-size: 0.875rem 0.4375rem;
+    padding-right: 1.375rem;
 }
 
 .check {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
     border-radius: var(--inputBorderRadius);
     position: relative;
-    margin-right: 10px;
+    margin-right: 0.625rem;
     float: left;
     border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--primary);
     background-color: var(--navigation) !important;
     background-position: center center;
-	background-size: 8px 8px;
+	background-size: 0.5rem 0.5rem;
 	cursor: pointer;
 }
 
@@ -134,32 +134,32 @@ select {
 
 .subform {
 	background-color: var(--primary);
-	padding: 20px;
+	padding: 1.25rem;
 	border-radius: var(--inputBorderRadius);
 	display: grid;
-	column-gap: 20px;
-	padding-top: 10px;
+	column-gap: 1.25rem;
+	padding-top: 0.625rem;
 }
 
 .suggestions {
 	width: 100%;
-	height: 0px;
+	height: 0rem;
 	opacity: 0;
 	transition: 0.5s;
-	padding-left: 10px;
+	padding-left: 0.625rem;
 }
 
 .suggestions.open {
 	height: auto;
-	max-height: 200px;
+	max-height: 12.5rem;
 	opacity: 1;
 	overflow-y: scroll;
 }
 
 .suggestItem {
-	height: 25px;
-	line-height: 25px;
-	font-size: 14px;
+	height: 1.5625rem;
+	line-height: 1.5625rem;
+	font-size: 0.875rem;
 	width: 100%;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -171,12 +171,12 @@ select {
 }
 
 .subform .subform {
-    padding: 10px;
-    border-width: 3px;
+    padding: 0.625rem;
+    border-width: 0.1875rem;
     border-style: solid;
     border-color: var(--secondary);
     background-color: var(--secondary);
-    border-radius: 15px;
+    border-radius: 0.9375rem;
 }
 
 .subform .subform .subform {
@@ -186,13 +186,13 @@ select {
 .subform .button {    
 	background-color: var(--stroke);
     color: #000;
-    margin-top: 36px;
-    width: 75px;
-    padding-left: 5px;
-    padding-right: 5px;
+    margin-top: 2.25rem;
+    width: 4.6875rem;
+    padding-left: 0.3125rem;
+    padding-right: 0.3125rem;
     min-width: unset;
-    height: 50px;
-    line-height: 40px;
+    height: 3.125rem;
+    line-height: 2.5rem;
 }
 
 .subform .suggestItem {
@@ -200,7 +200,7 @@ select {
 }
 
 .subform.three {
-	grid-template-columns: 40% auto 80px;
+	grid-template-columns: 40% auto 5rem;
 }
 
 .issues {
@@ -209,16 +209,16 @@ select {
 
 label .info {
 	position: absolute;
-	right: 0px;
+	right: 0rem;
 	text-transform: lowercase;
 	color: var(--menu);
 	transition: var(--transition);
-	top: 0px;
+	top: 0rem;
 }
 
 label .note {
 	position: absolute;
-	right: 0px;
+	right: 0rem;
 	text-transform: lowercase;
 	color: var(--primary);
 	transition: var(--transition);
@@ -231,18 +231,18 @@ label .note:hover {
 }
 
 .toggle {
-    width: 60px;
-    height: 30px;
+    width: 3.75rem;
+    height: 1.875rem;
     background-color: var(--black);
     color: var(--white);
     cursor: pointer;
-    border-radius: 100px;
+    border-radius: 6.25rem;
     position: relative;
     display: inline-block;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	transition: var(--transition);
     float: left;
-    margin-right: 20px;
+    margin-right: 1.25rem;
 }
 
 .toggle.on {
@@ -250,11 +250,11 @@ label .note:hover {
 }
 
 .toggle.on .switch {
-    left: 35px;
+    left: 2.1875rem;
 }
 
 .toggle.on .label {
-	left: 10px;
+	left: 0.625rem;
 	content: "YES";
 }
 
@@ -263,21 +263,21 @@ label .note:hover {
 }
 
 .toggle .switch {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.625rem;
     background-color: var(--white);
     transition: var(--transition);
     position: absolute;
-    left: 5px;
-    top: 5px;
+    left: 0.3125rem;
+    top: 0.3125rem;
     z-index: 10;
 }
 
 .toggle .label {
-	right: 10px;
-	line-height: 30px;
-	font-size: 12px;
+	right: 0.625rem;
+	line-height: 1.875rem;
+	font-size: 0.75rem;
 	color: var(--white);
 	position: absolute;
 	z-index: 8;
@@ -286,7 +286,7 @@ label .note:hover {
 }
 
 .toggleLabel {
-	line-height: 50px;
+	line-height: 3.125rem;
 }
 
 .toggle .label::before {
@@ -294,9 +294,9 @@ label .note:hover {
 }
 
 .form.mini {
-    width: 540px;
-    left: calc(50% - 270px);
-    top: calc(50% - 187px);
+    width: 33.75rem;
+    left: calc(50% - 16.875rem);
+    top: calc(50% - 11.6875rem);
     position: absolute;
     display: inline-block;
 }
@@ -305,38 +305,38 @@ label .note:hover {
     position: relative;
     width: 100%;
 	display: grid;
-	grid-template-columns: auto 150px;
-    margin-top: 20px;
-	margin-bottom: 20px;
+	grid-template-columns: auto 9.375rem;
+    margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
 }
 
 .modal .buttons {
-    padding-bottom: 50px;
+    padding-bottom: 3.125rem;
 }
 
 .modal.box .buttons {
-	padding-bottom: 0px;;
+	padding-bottom: 0rem;;
 }
 
 .button {
-	font-size: 11px;
+	font-size: 0.6875rem;
 	font-weight: 400;
 	font-family: 'Open Sans';
 	font-weight: 600;
 	display: inline-block;
-	min-width: 150px;
-	padding-left: 20px;
-	padding-right: 20px;
+	min-width: 9.375rem;
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
     clear: both;
     overflow: hidden;
-    padding-right: 20px;
-    height: 40px;
-    padding: 7px;
+    padding-right: 1.25rem;
+    height: 2.5rem;
+    padding: 0.4375rem;
 	width: fit-content;
 	text-transform: uppercase;
 	text-align: center;
 	border-radius: var(--inputBorderRadius);
-	line-height: 25px;
+	line-height: 1.5625rem;
 	position: relative;
 	border: 0;
 	background: var(--secondary);
@@ -352,23 +352,23 @@ label .note:hover {
 }
 
 .minibutton {
-	font-size: 11px;
+	font-size: 0.6875rem;
 	font-weight: 400;
 	font-family: 'Open Sans';
 	font-weight: 600;
 	display: inline-block;
-	min-width: 150px;
-	padding-left: 20px;
-	padding-right: 20px;
+	min-width: 9.375rem;
+	padding-left: 1.25rem;
+	padding-right: 1.25rem;
     clear: both;
     overflow: hidden;
-    height: 40px;
-    padding: 14px;
+    height: 2.5rem;
+    padding: 0.875rem;
 	width: fit-content;
 	text-transform: uppercase;
 	text-align: center;
-	border-radius: 30px;
-	line-height: 12px;
+	border-radius: 1.875rem;
+	line-height: 0.75rem;
 	position: relative;
 	border: 0;
 	background: var(--black);
@@ -397,32 +397,32 @@ label .note:hover {
 }
 
 .button:disabled:hover {
-	box-shadow: 0 30px 30px -20px rgba(0, 0, 0, 0.4);
+	box-shadow: 0 1.875rem 1.875rem -1.25rem rgba(0, 0, 0, 0.4);
 }
 
 .button.done {
 	background: #00dc5a;
-	box-shadow: 0 30px 30px -20px rgba(0, 220, 90, 0.4);
+	box-shadow: 0 1.875rem 1.875rem -1.25rem rgba(0, 220, 90, 0.4);
 	-webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 	-webkit-transform: translate3d(0, 0, 0);
 	transform: translate3d(0, 0, 0);
 	-webkit-backface-visibility: hidden;
 	backface-visibility: hidden;
-	-webkit-perspective: 1000px;
-	perspective: 1000px;
+	-webkit-perspective: 62.5rem;
+	perspective: 62.5rem;
 }
 
 .button .spinner {
 	display: inline-block;
-	width: 8px;
-	height: 8px;
+	width: 0.5rem;
+	height: 0.5rem;
 	border-radius: 50%;
 	background: transparent;
-	border-top: 2px solid white;
-	border-right: 2px solid white;
-	border-bottom: 2px solid transparent;
-	border-left: 2px solid transparent;
+	border-top: 0.125rem solid white;
+	border-right: 0.125rem solid white;
+	border-bottom: 0.125rem solid transparent;
+	border-left: 0.125rem solid transparent;
 	-webkit-animation: loading 0.5s infinite linear;
 	animation: loading 0.5s infinite linear;
 }
@@ -430,7 +430,7 @@ label .note:hover {
 .button.clear {
     color: var(--stroke);
     background-color: var(--white);
-	border-width: 1.5px;
+	border-width: .1rem;
 	border-style:  solid;
 	border-color: var(--stroke);
 	font-weight: bold;
@@ -443,14 +443,14 @@ label .note:hover {
 	background-color: var(--secondary);
 	filter: brightness(80%);
 	outline: 0;
-	box-shadow: 0 20px 30px -16px #000;
-	-webkit-transform: translateY(3px);
-	transform: translateY(3px);
+	box-shadow: 0 1.25rem 1.875rem -1rem #000;
+	-webkit-transform: translateY(0.1875rem);
+	transform: translateY(0.1875rem);
 }
 
 .button.alert.confirm {
 	background-color: var(--red);
-	box-shadow: 0 3px 9px -2px var(--red);
+	box-shadow: 0 0.1875rem 0.5625rem -0.125rem var(--red);
 }
 
 .button.alert.confirm:hover, .button.alert.confirm:focus {
@@ -459,38 +459,38 @@ label .note:hover {
 	background-color: var(--red);
 	filter: brightness(80%);
 	outline: 0;
-	box-shadow: 0 20px 30px -16px #000;
-	-webkit-transform: translateY(3px);
-	transform: translateY(3px);
+	box-shadow: 0 1.25rem 1.875rem -1rem #000;
+	-webkit-transform: translateY(0.1875rem);
+	transform: translateY(0.1875rem);
 }
 
 .button.alert.confirm:active {
 	background: #648293;
-	-webkit-box-shadow: 0 20px 30px -16px #000;
-	box-shadow: 0 20px 30px -16px #000;
-	-webkit-transform: translateY(5px);
-	transform: translateY(5px);
+	-webkit-box-shadow: 0 1.25rem 1.875rem -1rem #000;
+	box-shadow: 0 1.25rem 1.875rem -1rem #000;
+	-webkit-transform: translateY(0.3125rem);
+	transform: translateY(0.3125rem);
 }
 
 .button.clear:active {
 	background: #648293;
 	border-color: #648293;
 	color: #FFF;
-	box-shadow: 0 20px 30px -16px #000;
-	-webkit-transform: translateY(5px);
-	transform: translateY(5px);
+	box-shadow: 0 1.25rem 1.875rem -1rem #000;
+	-webkit-transform: translateY(0.3125rem);
+	transform: translateY(0.3125rem);
 }
 
 .selector {
-    width: 25px;
-    height: 25px;
-    border: 1.5px var(--stroke) solid;
-    border-radius: 15px;
+    width: 1.5625rem;
+    height: 1.5625rem;
+    border: .1rem var(--stroke) solid;
+    border-radius: 0.9375rem;
     cursor: pointer;
     transition: background-color 0.5s;
     position: absolute;
-    top: 13px;
-    left: 10px;
+    top: 0.8125rem;
+    left: 0.625rem;
     background-color: var(--offWhite);
     transition: var(--transition);
 }
@@ -506,7 +506,7 @@ label .note:hover {
 }
 
 .selector:hover {
-    border: 1.5px var(--primary) solid;
+    border: .1rem var(--primary) solid;
     cursor: pointer;
     background-color: var(--white);
 }