@openziti/ziti-console-lib 0.12.11 → 1.0.0

package/assets/styles/forms.css

@@ -1,521 +0,0 @@
-label {
-    color: var(--dark);
-    text-transform: uppercase;
-    margin-top: 0.625rem;
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    margin-bottom: 0.1875rem;
-    font-size: 0.875rem;
-    white-space: nowrap;
-    font-weight: 600;
-    font-family: 'Open Sans';
-    overflow: hidden;
-    text-overflow: ellipsis;
-	line-height: var(--defaultLineHeight);
-}
-
-textarea::placeholder {
-    font-size: 0.9375rem !important;
-}
-
-input, select, textarea {
-    font-weight: 400;
-    font-family: 'Open Sans', Arial, sans-serif;
-    height: var(--defaultInputHeight);
-    width: 100%;
-    border-color: var(--stroke);
-    border-style: solid;
-    border-width: var(--inputBorderWidth);
-    border-radius: var(--inputBorderRadius);
-    padding-left: 0.4375rem;
-    padding-right: 0.4375rem;
-    outline: none;
-    box-sizing: border-box;
-    font-size: 0.875rem;
-    background-color: var(--navigation) !important;
-    color: var(--text);
-    -webkit-appearance: none;
-}
-
-input[type="checkbox"] {
-	width: 2.5rem;
-	height: 2.5rem;
-}
-
-input[type="file"] {
-	display: none;
-}
-
-input.filter {
-	color: var(--white) !important;
-    position: absolute;
-    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: 0.75rem;
-}
-
-textarea {
-	height: 9.375rem;
-	resize: none;
-}
-
-input:focus, select:focus, textarea:focus {
-    outline: none !important;
-    border-color: var(--primary);
-}
-
-input::-webkit-inner-spin-button {
-	display: none;
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-.searchSelector input:focus {
-    border-color: rgba(0,0,0,0) !important;
-}
-
-.searchSelector:focus-within {
-    border-color: var(--primary);
-}
-
-input:disabled, select:disabled, textarea:disabled {
-	opacity: 0.2 !important;
-}
-
-div.errors {
-	border-width: var(--inputBorderWidth);
-	border-style: solid;
-	border-color: var(--red);
-}
-
-input.errors, select.errors, textarea.errors, div.errors .selectable {
-	border-color: var(--red);
-}
-
-select {
-    background-image: url(../images/select.png);
-    background-position: center right 0.4375rem;
-    background-repeat: no-repeat;
-    background-size: 0.875rem 0.4375rem;
-    padding-right: 1.375rem;
-}
-
-.check {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: var(--inputBorderRadius);
-    position: relative;
-    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: 0.5rem 0.5rem;
-	cursor: pointer;
-}
-
-.check.checked {
-	background-image: url(../images/check.png);
-	background-color: var(--primary) !important;
-}
-
-.subform {
-	background-color: var(--primary);
-	padding: 1.25rem;
-	border-radius: var(--inputBorderRadius);
-	display: grid;
-	column-gap: 1.25rem;
-	padding-top: 0.625rem;
-}
-
-.suggestions {
-	width: 100%;
-	height: 0rem;
-	opacity: 0;
-	transition: 0.5s;
-	padding-left: 0.625rem;
-}
-
-.suggestions.open {
-	height: auto;
-	max-height: 12.5rem;
-	opacity: 1;
-	overflow-y: scroll;
-}
-
-.suggestItem {
-	height: 1.5625rem;
-	line-height: 1.5625rem;
-	font-size: 0.875rem;
-	width: 100%;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	cursor: pointer;
-}
-
-.subform input, .subform select {
-	background-color: var(--background);
-}
-
-.subform .subform {
-    padding: 0.625rem;
-    border-width: 0.1875rem;
-    border-style: solid;
-    border-color: var(--secondary);
-    background-color: var(--secondary);
-    border-radius: 0.9375rem;
-}
-
-.subform .subform .subform {
-    background-color: var(--primary);
-}
-
-.subform .button {    
-	background-color: var(--stroke);
-    color: #000;
-    margin-top: 2.25rem;
-    width: 4.6875rem;
-    padding-left: 0.3125rem;
-    padding-right: 0.3125rem;
-    min-width: unset;
-    height: 3.125rem;
-    line-height: 2.5rem;
-}
-
-.subform .suggestItem {
-	color: #fff;
-}
-
-.subform.three {
-	grid-template-columns: 40% auto 5rem;
-}
-
-.issues {
-	display: none;
-}
-
-label .info {
-	position: absolute;
-	right: 0rem;
-	text-transform: lowercase;
-	color: var(--menu);
-	transition: var(--transition);
-	top: 0rem;
-}
-
-label .note {
-	position: absolute;
-	right: 0rem;
-	text-transform: lowercase;
-	color: var(--primary);
-	transition: var(--transition);
-	cursor: pointer;
-}
-
-label .note:hover {
-	color: var(--secondary);
-	text-decoration: underline;
-}
-
-.toggle {
-    width: 3.75rem;
-    height: 1.875rem;
-    background-color: var(--black);
-    color: var(--white);
-    cursor: pointer;
-    border-radius: 6.25rem;
-    position: relative;
-    display: inline-block;
-	margin-top: 0.625rem;
-	transition: var(--transition);
-    float: left;
-    margin-right: 1.25rem;
-}
-
-.toggle.on {
-	background-color: var(--green);
-}
-
-.toggle.on .switch {
-    left: 2.1875rem;
-}
-
-.toggle.on .label {
-	left: 0.625rem;
-	content: "YES";
-}
-
-.toggle.on .label::before {
-	content: "YES";
-}
-
-.toggle .switch {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 0.625rem;
-    background-color: var(--white);
-    transition: var(--transition);
-    position: absolute;
-    left: 0.3125rem;
-    top: 0.3125rem;
-    z-index: 10;
-}
-
-.toggle .label {
-	right: 0.625rem;
-	line-height: 1.875rem;
-	font-size: 0.75rem;
-	color: var(--white);
-	position: absolute;
-	z-index: 8;
-    transition: var(--transition);
-	text-transform: uppercase;
-}
-
-.toggleLabel {
-	line-height: 3.125rem;
-}
-
-.toggle .label::before {
-	content: "NO";
-}
-
-.form.mini {
-    width: 33.75rem;
-    left: calc(50% - 16.875rem);
-    top: calc(50% - 11.6875rem);
-    position: absolute;
-    display: inline-block;
-}
-
-.buttons {
-    position: relative;
-    width: 100%;
-	display: grid;
-	grid-template-columns: auto 9.375rem;
-    margin-top: 1.25rem;
-	margin-bottom: 1.25rem;
-}
-
-.modal .buttons {
-    padding-bottom: 3.125rem;
-}
-
-.modal.box .buttons {
-	padding-bottom: 0rem;;
-}
-
-.button {
-	font-size: 0.6875rem;
-	font-weight: 400;
-	font-family: 'Open Sans';
-	font-weight: 600;
-	display: inline-block;
-	min-width: 9.375rem;
-	padding-left: 1.25rem;
-	padding-right: 1.25rem;
-    clear: both;
-    overflow: hidden;
-    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: 1.5625rem;
-	position: relative;
-	border: 0;
-	background: var(--secondary);
-	color: white;
-	white-space: nowrap;
-	transition: all 150ms ease;
-	cursor: pointer;
-	box-shadow: var(--shadow);
-}
-
-.button.confirm {
-	background: var(--primary);
-}
-
-.minibutton {
-	font-size: 0.6875rem;
-	font-weight: 400;
-	font-family: 'Open Sans';
-	font-weight: 600;
-	display: inline-block;
-	min-width: 9.375rem;
-	padding-left: 1.25rem;
-	padding-right: 1.25rem;
-    clear: both;
-    overflow: hidden;
-    height: 2.5rem;
-    padding: 0.875rem;
-	width: fit-content;
-	text-transform: uppercase;
-	text-align: center;
-	border-radius: 1.875rem;
-	line-height: 0.75rem;
-	position: relative;
-	border: 0;
-	background: var(--black);
-	color: var(--white);
-	white-space: nowrap;
-	cursor: pointer;
-	transition: .5s;
-}
-
-.minibutton:hover {
-	opacity: 0.4;
-}
-
-.button:hover, .button:focus {
-	outline: 0;
-	background-color: var(--secondary);
-}
-
-.button:active {
-	background: var(--secondary);
-}
-
-.button:disabled {
-	cursor: auto;
-	pointer-events: none;
-}
-
-.button:disabled:hover {
-	box-shadow: 0 1.875rem 1.875rem -1.25rem rgba(0, 0, 0, 0.4);
-}
-
-.button.done {
-	background: #00dc5a;
-	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: 62.5rem;
-	perspective: 62.5rem;
-}
-
-.button .spinner {
-	display: inline-block;
-	width: 0.5rem;
-	height: 0.5rem;
-	border-radius: 50%;
-	background: 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;
-}
-
-.button.clear {
-    color: var(--stroke);
-    background-color: var(--white);
-	border-width: .1rem;
-	border-style:  solid;
-	border-color: var(--stroke);
-	font-weight: bold;
-	box-shadow: none;
-}
-
-.button.clear:hover, .button.clear:focus {
-	color: var(--white);
-	border-color: var(--secondary);
-	background-color: var(--secondary);
-	filter: brightness(80%);
-	outline: 0;
-	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 0.1875rem 0.5625rem -0.125rem var(--red);
-}
-
-.button.alert.confirm:hover, .button.alert.confirm:focus {
-	color: var(--white);
-	border-color: var(--red);
-	background-color: var(--red);
-	filter: brightness(80%);
-	outline: 0;
-	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 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 1.25rem 1.875rem -1rem #000;
-	-webkit-transform: translateY(0.3125rem);
-	transform: translateY(0.3125rem);
-}
-
-.selector {
-    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: 0.8125rem;
-    left: 0.625rem;
-    background-color: var(--offWhite);
-    transition: var(--transition);
-}
-
-.selector.disabled {
-	cursor: not-allowed;
-	opacity: .6;
-}
-
-.selector.disabled:hover {
-	cursor: not-allowed;
-	opacity: .6;
-}
-
-.selector:hover {
-    border: .1rem var(--primary) solid;
-    cursor: pointer;
-    background-color: var(--white);
-}
-
-.selector.selected {
-	background-color: var(--green);
-	background-image: url(../images/check.png);
-	background-size: 45%;
-	background-position: center center;
-    border: none;
-}
-

package/assets/styles/growler.css

@@ -1,190 +0,0 @@
-#Growler {
-	position: fixed;
-	right: 1.25rem;
-	bottom: -6.25rem;
-	min-width: 18.75rem;
-	z-index: 9999999;
-	max-width: 31.25rem;
-}
-
-#NotificationsList {
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    overflow-y: scroll;
-    height: 90vh;
-}
-
-#NotificationsList .growler {
-	position: relative;
-	display: inline-block;
-	z-index: 9999999;
-	width: 100%;
-	opacity: 1.0;
-	margin-bottom: 0.625rem;
-}
-
-#NotificationsList .nonotify {
-    padding-left: 0.6875rem;
-    font-size: 1.1875rem;
-    opacity: 0.4;	
-}
-
-.growler {
-	background-color: #f6f7fb;    
-	min-height: 6.5625rem;
-	min-width: 20.875rem;
-	font-size: 1rem;
-	color: #000;
-	text-align: left;
-	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;
-    -o-transition: 0.5s;
-    transition: 0.5s;
-    opacity: 0.0;
-}
-
-#Growler.open {
-	bottom: 1.25rem;
-}
-
-.growler.open {
-    opacity: 1.0;
-}
-
-.growler .time {
-	font-size: 0.8125rem;
-	color: #FFF;
-	position: absolute;
-	top: 0.4375rem;
-	right: 0.625rem;
-    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: 0.625rem;
-	padding-right: 0.625rem;
-	font-size: 0.875rem;
-	font-weight: bold;
-	color: #FFF;
-	line-height: 1.875rem;
-	text-transform: uppercase;
-	background-color: #03db5c;
-	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: 1.0625rem;
-    font-size: 0.9375rem;
-    font-weight: bold;
-    padding-left: 4.6875rem;
-    padding-right: 0.625rem;
-	overflow: hidden;
-}
-
-.growler .content {
-	font-size: 0.8125rem;
-    font-weight: normal;
-    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: 0.625rem;
-}
-
-.growler .icon {
-	width: 3.4375rem;
-    height: 3.4375rem;
-    background-position: center center;
-    background-size: 80%;
-    position: absolute;
-    left: 0.625rem;
-    top: 2.5rem;
-}
-
-.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: 0rem;
-	position: fixed;
-	top: 0rem;
-	bottom: 0rem;
-	left: -5rem;
-	background-color: var(--offWhite);
-    transition: 0.5s;
-	opacity: 0.0;
-	overflow: hidden;
-}
-
-#NotificationsMenu.open {
-	width: 23.75rem;
-	left: 0rem;
-    opacity: 1.0;
-	border-right-width: 0.25rem;
-	border-right-color: var(--stroke);
-	border-right-style: solid;
-}
-
-#NotificationsMenu .header.title {
-	font-weight: 300;
-    font-family: 'Russo One';
-    font-size: 1.25rem;
-    line-height: 5.25rem;
-    color: var(--primary);
-    filter: brightness(50%);
-    padding-left: 1.25rem;
-	text-transform: uppercase;
-}