@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-5

package/react/components/common/css/application-edit-page.css

@@ -1,330 +0,0 @@
-.app-edit {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.app-edit-actions,
-.app-edit-actions-right {
-	display: flex;
-	margin: 0.65em 0.65em 22px 3em;
-}
-
-.app-edit-actions {
-	justify-content: space-between;
-}
-
-.app-edit-actions-right {
-	justify-content: flex-end;
-}
-
-.app-actions-right-wrapper {
-	width: 125px;
-	display: flex;
-	justify-content: space-between;
-}
-
-.app-edit-app-name {
-	margin: 0.9em 2em;
-	margin-left: 20px;
-	color: #fff;
-}
-
-.app-edit-fieldset {
-	border: 0;
-	padding: 0;
-}
-
-.app-edit-fieldset legend {
-	font-size: 1.1em;
-	user-select: none;
-	font-weight: normal;
-	width: 100%;
-}
-
-.app-edit-fieldset label {
-	font-size: 1em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	user-select: none;
-	font-weight: 600;
-	opacity: 0.75;
-}
-
-.app-edit-type-field {
-	padding-right: 1.5em;
-	flex-grow: 1;
-	max-width: 25rem;
-}
-
-.app-edit-field {
-	display: flex;
-	align-items: center;
-	margin: 0.9em 0.9em 0 3em;
-}
-
-.app-edit-field > label {
-	width: 10em;
-	flex-grow: 0;
-	opacity: 0.75;
-	margin-right: 1em;
-}
-
-.app-edit-field .emperorSelectContainer,
-.app-edit-field .emperorSelectContainer .search,
-.app-edit-field input {
-	flex-grow: 1;
-	max-width: 25rem;
-}
-
-.app-edit-field textarea {
-	flex-grow: 1;
-	min-height: 6rem;
-	max-width: 25rem;
-}
-
-.app-size-input {
-	margin: 0 0.5em;
-}
-
-.app-size-fieldset legend {
-	float: left;
-	margin-right: 2em;
-	font-weight: 600;
-}
-
-.app-size-fieldset {
-	padding-top: 2px;
-	margin-left: 3em;
-}
-
-.app-size-field {
-	position: relative;
-	padding-right: 1.5em;
-	float: left;
-	clear: right;
-}
-
-.app-size-field input {
-	max-width: 2.9em;
-}
-
-.app-edit-field.description {
-	align-items: flex-start;
-}
-
-.app-edit-field.app-size label {
-	margin-top: 0.6em;
-}
-
-span.unit {
-	opacity: 0.75;
-}
-
-.app-edit-field .emperorSelect {
-	max-height: 250px;
-}
-
-.app-type-container {
-	display: inline-flex;
-	margin-right: 1.5em;
-	justify-content: center;
-	align-items: center;
-}
-
-.quick-add-app {
-	width: 500px;
-	margin-top: 12px;
-	padding-top: 3px;
-	padding-bottom: 3px;
-	border-width: 1px;
-	border-style: dashed;
-	border-color: #42a5ba;
-	border-radius: 2px;
-}
-
-.app-icon {
-	max-width: 16px;
-	max-height: 16px;
-	margin-right: 8px;
-}
-
-.accordion-edit-block .complex-menu-checkbox-wrapper {
-	margin-top: 0;
-}
-
-.app-edit-range {
-	appearance: none;
-	margin: 10px 10px 10px 0;
-	width: 140px;
-}
-
-.app-edit-range::-webkit-slider-runnable-track {
-	width: 100%;
-	height: 1px;
-	cursor: pointer;
-	box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
-	background: #979797;
-	border-radius: 25px;
-	border: 0 solid #000101;
-}
-
-.app-edit-range::-webkit-slider-thumb {
-	box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
-	border: 0 solid #000;
-	height: 10px;
-	width: 10px;
-	border-radius: 10px;
-	background: #d8d8d8;
-	cursor: pointer;
-	appearance: none;
-	margin-top: -5px;
-}
-
-.position-entry .finsemble-dropdown__btn {
-	width: 80px;
-}
-
-.position-entry .finsemble-dropdown__btn i {
-	position: absolute;
-	right: 0;
-	margin-right: 2px;
-}
-
-.accordion.medium > .accordion-content {
-	margin-left: 0;
-}
-
-.accordion-summary {
-	color: #aaa;
-}
-
-.accordion-content > .app-edit-field {
-	margin-left: 0;
-}
-
-.accordion-edit-block .label-col {
-	width: 135px;
-}
-
-.accordion-edit-block .content-col {
-	width: 350px;
-}
-
-.accordion-edit-block td {
-	padding-bottom: 12px;
-	text-align: left;
-	color: #aaa;
-}
-
-.app-edit-field,
-.app-size-field label {
-	color: #aaa;
-}
-
-.accordion-edit-block input[type="range"] {
-	width: 241px;
-}
-
-.accordion-edit-block input[type="text"],
-.inputTable input[type="text"] {
-	color: #f5f6f7;
-}
-
-.accordion-edit-block .complex-menu-checkbox-wrapper,
-.pull-left .complex-menu-checkbox-wrapper {
-	margin-left: 0;
-}
-
-.inputTable th {
-	text-align: left;
-}
-
-.inputTable th .tooltip {
-	margin-left: 15px;
-	height: 15px;
-	width: 15px;
-}
-
-.inputTable .finsemble-icon-times {
-	color: #999;
-}
-
-.inputTable [type="text"] {
-	width: 135px;
-	margin-right: 13px;
-}
-
-.accordion-edit-block td[rowspan] {
-	vertical-align: top;
-	padding-top: 1px;
-}
-
-.accordion.small .label {
-	margin-left: 10px;
-}
-
-.always-present.accordion-edit-block textarea,
-.always-present.accordion-edit-block input[type="text"] {
-	width: 100%;
-}
-
-.always-present {
-	margin-left: 20px;
-}
-
-.app-edit legend {
-	margin-left: 20px;
-}
-
-table.accordion-edit-block {
-	width: 515px;
-}
-
-.inputTable th,
-.inputTable td {
-	padding-left: 0;
-}
-
-.accordion-edit-block .finsemble-dropdown__btn-options {
-	text-align: left;
-}
-
-.accordion-edit-block label:first-of-type input[type="radio"] {
-	margin-left: 0;
-}
-
-a,
-a:visited {
-	color: white;
-}
-
-.accordion-edit-block td .finsemble-icon {
-	margin-right: 3px;
-}
-
-.quick-add-path .file-input-value {
-	white-space: nowrap;
-	width: 150px;
-	margin-left: 9px;
-}
-
-.quick-add-path #app-path {
-	width: 350px;
-	overflow: hidden;
-	display: inline-block;
-
-	/* Weird hack to get the ellipsis to show up at the front of the text (https://davidwalsh.name/css-ellipsis-left) */
-	text-overflow: ellipsis;
-	direction: rtl;
-	text-align: left;
-}
-
-.quick-add-path .file-input-container {
-	padding-bottom: 10px;
-	padding-top: 5px;
-}

package/react/components/common/css/application-list.css

@@ -1,53 +0,0 @@
-.app-list-table {
-	margin-top: 10px;
-	width: 100%;
-}
-
-.app-list-table .app-name {
-	text-decoration: none;
-	color: #fff;
-	padding: 0.7em;
-	font-weight: bold;
-	border-radius: 1.45em;
-	cursor: pointer;
-}
-
-.app-list-row {
-	text-decoration: none;
-	color: #fff;
-	font-weight: bold;
-	border-radius: 1.45em;
-	transition: all 0.25s;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	cursor: pointer;
-}
-
-.app-list-row div {
-	align-items: center;
-	margin-left: auto;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.app-list-row .icon-bar .button-container-icon:hover .finsemble-icon-trash {
-	color: #f26666;
-}
-
-.app-list-row:focus,
-.app-list-row:hover {
-	background-color: #3d4455;
-}
-
-.app-list-empty {
-	padding: 4.25em 3em;
-	border-radius: 4px;
-	border: dashed 2px var(--core-primary-3);
-	margin-top: 1.2em;
-	text-align: center;
-}
-
-.app-list-empty.no-dropzone {
-	border-style: solid;
-}

package/react/components/common/css/button.css

@@ -1,171 +0,0 @@
-button {
-	border-radius: 3px;
-	font-family: OpenSans;
-	font-weight: 600;
-	padding: 0.5em 1em;
-	background-color: transparent;
-	border: 0 solid transparent;
-	color: #fff;
-	font-size: 0.9rem;
-	transition: all 0.2s ease-in;
-	cursor: pointer;
-}
-
-.button-container-secondary,
-.button-container-tile,
-.button-container-primary,
-.button-container-icon,
-.button-container-danger,
-.button-container-ghost,
-.button-container-danger-ghost {
-	display: inline-block;
-}
-
-.button-icon-after,
-.button-icon-before {
-	margin: 0 0.46rem;
-}
-
-.button-icon-after {
-	margin-right: 0;
-}
-
-.button-icon-before {
-	margin-left: 0;
-}
-
-.button-container-icon button {
-	font-size: 1.1rem;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.button-container-icon .finsemble-icon-trash {
-	color: var(--core-primary-5);
-}
-
-.button-container-icon:hover .finsemble-icon-trash {
-	color: #f26666;
-}
-
-.button-container-icon .finsemble-icon-life-ring {
-	color: var(--core-primary-5);
-}
-
-.button-container-icon:hover .finsemble-icon-life-ring {
-	color: inherit;
-}
-
-.button-container-icon .finsemble-icon-copy {
-	color: var(--core-primary-5);
-}
-
-.button-container-icon:hover .finsemble-icon-copy {
-	color: inherit;
-}
-
-.button-container-icon span.finsemble-icon {
-	cursor: pointer;
-}
-
-/* Primary */
-
-.button-container-primary button {
-	border-radius: 2em;
-	background-color: #171a20;
-	padding: 1.2em 1.1em 1.2em 1em;
-	display: flex;
-	height: 1em;
-	font-size: 12px;
-	justify-content: space-around;
-	align-items: center;
-	z-index: 100;
-	transition: all 0.2s ease-in;
-}
-
-.button-container-primary button:hover {
-	background-color: #acb2c0;
-}
-
-.button-container-primary button[disabled] {
-	color: #acb2c0;
-	background-color: #acb2c0;
-	cursor: default;
-}
-
-/* Secondary */
-
-.button-container-secondary button {
-	color: #000;
-	background-color: #42a5ba;
-}
-
-.button-container-secondary button:hover {
-	background-color: #36788b;
-}
-
-.button-container-secondary button[disabled] {
-	color: #000000b3;
-	background-color: #acb2c0;
-	cursor: default;
-}
-
-/* Tile */
-
-.button-container-tile button {
-	width: 13.6em;
-	height: 8.5em;
-	flex-grow: 0;
-	flex-shrink: 0;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding-top: 0.5em;
-	margin: 0.5em;
-	background-color: #171a20;
-	border-radius: 0.5em;
-	font-size: 1.1em;
-	transition: all 0.25s;
-	border: 2px solid transparent;
-	max-width: 30em;
-	display: flex;
-}
-
-.button-container-tile button:hover {
-	border-color: #36788b;
-}
-
-.button-container-tile div {
-	margin-top: 0.5em;
-}
-
-.button-container-tile-icon {
-	font-size: 2.5em;
-}
-
-/* Danger */
-
-.button-container-danger button {
-	background-color: transparent;
-	color: #f26666;
-	border-radius: 5px;
-	border: solid 1px #f26666;
-}
-
-.button-container-danger button:hover {
-	background-color: #b54f4f;
-}
-
-/* Ghost */
-
-.button-container-ghost button:hover,
-.button-container-danger-ghost button:hover {
-	text-decoration: underline;
-}
-
-/* Danger Ghost */
-
-.button-container-danger-ghost button {
-	color: #f26666;
-}

package/react/components/common/css/checkbox.css

@@ -1,30 +0,0 @@
-.complex-menu-checkbox-wrapper {
-	display: flex;
-	align-items: center;
-	margin-top: 8px;
-	margin-left: 12px;
-}
-
-.complex-menu-checkbox {
-	border-radius: 2px;
-	width: 14px;
-	height: 14px;
-	margin-right: 8px;
-	border: 1px solid var(--core-primary-4);
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.complex-menu-checkbox-label {
-	display: inline-block;
-}
-
-.complex-menu-checkbox.checked {
-	border: 1px solid var(--accent-primary);
-	font-size: 12px;
-}
-
-.complex-menu-checkbox.checked .finsemble-icon {
-	color: var(--accent-primary);
-}

package/react/components/common/css/color-picker.css

@@ -1,52 +0,0 @@
-input[type="color"] {
-	appearance: none;
-	border: 1px solid black;
-	width: 36px;
-	height: 36px;
-	padding: 0;
-}
-
-/* https://stackoverflow.com/questions/51997640/how-to-set-border-radius-for-color-tags-color-picker */
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
-	border: none;
-	border-radius: 5px;
-	background-clip: padding-box;
-}
-
-input[type="color"]:first-child {
-	padding: 0;
-	margin: 0;
-	border: 1px solid black;
-	box-shadow: none;
-	border-radius: 4px;
-	background: none;
-}
-
-input[type="color"]::-webkit-color-swatch {
-	border: none;
-	border-radius: 4px;
-}
-
-input[type="color"]:nth-child(2) {
-	padding: 0;
-	margin: 0;
-	border: 1px solid black;
-	box-shadow: none;
-	border-radius: 4px;
-	background: black;
-	outline: none;
-}
-
-input[type="color" i] {
-	border-radius: 4px;
-	border: none;
-}
-
-.color-picker {
-	padding: 0;
-	margin: 0;
-	display: flex;
-	align-items: center;
-}

package/react/components/common/css/drop-zone.css

@@ -1,13 +0,0 @@
-.dropZone.isDragging {
-	outline: 2px dashed #42a5ba;
-	cursor: grabbing;
-}
-
-.dropZone.isPotential {
-	outline: 2px dashed #3d4455;
-	cursor: grabbing;
-}
-
-.dropZone.isDragging * {
-	pointer-events: none;
-}

package/react/components/common/css/file-input.css

@@ -1,65 +0,0 @@
-input[type="file"] {
-	font-family: OpenSans;
-	font-size: 1em;
-	font-weight: 600;
-}
-
-.file-input-container {
-	display: flex;
-	align-items: center;
-	flex-grow: 1;
-}
-
-.file-input-actions {
-	position: relative;
-}
-
-.file-input-actions button {
-	margin-right: 1em;
-	background-color: #373b43;
-}
-
-.file-input-actions input[type="file"] {
-	opacity: 0;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 1;
-}
-
-.file-input-value {
-	flex-grow: 1;
-}
-
-.file-input-value input {
-	width: 100%;
-	max-width: 33em;
-}
-
-.file-input-status {
-	margin-left: 1em;
-}
-
-.file-input-error {
-	color: #f26666;
-}
-
-.file-input-container .button-container-primary button {
-	background-color: var(--core-primary-4);
-}
-
-.file-input-container .button-container-primary button:disabled {
-	color: #aaa;
-}
-
-.file-input-value-input {
-	color: #f5f6f7;
-}
-
-.file-input-value-input.invalid {
-	border-bottom: 2px solid #f26666;
-}