@finsemble/finsemble-ui 1.0.0-beta-1

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

@@ -0,0 +1,330 @@
+.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

@@ -0,0 +1,53 @@
+.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

@@ -0,0 +1,171 @@
+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

@@ -0,0 +1,30 @@
+.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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,13 @@
+.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

@@ -0,0 +1,65 @@
+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;
+}