@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

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

@@ -1,117 +1,324 @@
-.app-edit {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
-	width: 100%;
-	height: 100%;
-	background-color: #171a20;
-}
-
-.app-edit-actions {
-	display: flex;
-	justify-content: space-between;
-	margin: 0.65em 3em;
-}
-
-.app-actions-right-wrapper {
-	width: 125px;
-	display: flex;
-	justify-content: space-between;
-}
-
-.app-edit-fieldset {
-	border: 0px;
-	padding: 0px;
-}
-
-.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: 75%;
-}
-
-.app-edit-field {
-	display: flex;
-	align-items: center;
-	margin: 0.9em 3em;
-}
-
-.app-edit-field > label {
-	width: 10em;
-	flex-grow: 0;
-	opacity: 75%;
-}
-
-.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: 0em 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: 75%;
-}
-
-.app-edit-field .emperorSelect {
-	max-height: 250px;
-}
-
-.app-type-container {
-	display: inline-flex;
-	margin-right: 1.5em;
-	justify-content: center;
-	align-items: center;
-}
+.app-edit {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	bottom: 0px;
+	right: 0px;
+	width: 100%;
+	height: 100%;
+}
+
+.app-edit-actions {
+	display: flex;
+	justify-content: space-between;
+	margin: 0.65em 3em;
+}
+
+.app-actions-right-wrapper {
+	width: 125px;
+	display: flex;
+	justify-content: space-between;
+}
+
+.app-edit-app-name {
+	margin: 0.9em 2em;
+	margin-left: 20px;
+}
+
+.app-edit-fieldset {
+	border: 0px;
+	padding: 0px;
+}
+
+.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: 75%;
+}
+
+.app-edit-type-field {
+	padding-right: 1.5em;
+	flex-grow: 1;
+	max-width: 25rem;
+}
+
+.app-edit-field {
+	display: flex;
+	align-items: center;
+	margin-top: 0.9em;
+	margin-bottom: 0.9em;
+	margin-left: 0px;
+	margin-right: 3em;
+}
+
+.app-edit-field > label {
+	width: 10em;
+	flex-grow: 0;
+	opacity: 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: 0em 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: 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 td {
+	padding-bottom: 12px;
+}
+
+.accordion-edit-block .complex-menu-checkbox-wrapper {
+	margin-top: 0px;
+}
+
+.app-edit-range {
+	-webkit-appearance: none;
+	margin: 10px 10px 10px 0px;
+	width: 140px;
+}
+
+.app-edit-range::-webkit-slider-runnable-track {
+	width: 100%;
+	height: 1px;
+	cursor: pointer;
+	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+	background: #979797;
+	border-radius: 25px;
+	border: 0px solid #000101;
+}
+.app-edit-range::-webkit-slider-thumb {
+	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+	border: 0px solid #000000;
+	height: 10px;
+	width: 10px;
+	border-radius: 10px;
+	background: #d8d8d8;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -5px;
+}
+
+.position-entry .finsemble-dropdown__btn {
+	width: 80px;
+}
+.position-entry .finsemble-dropdown__btn i {
+	position: absolute;
+	right: 0px;
+	margin-right: 2px;
+}
+
+.accordion.medium > .accordion-content {
+	margin-left: 0px;
+}
+
+.accordion-summary {
+	color: #aaaaaa;
+}
+
+.accordion-content > .app-edit-field {
+	margin-left: 0px;
+}
+
+.accordion-edit-block .label-col {
+	width: 135px;
+}
+.accordion-edit-block .content-col {
+	width: 350px;
+}
+
+.accordion-edit-block td {
+	text-align: left;
+	color: #aaaaaa;
+}
+
+.app-edit-field,
+.app-size-field label {
+	color: #aaaaaa;
+}
+
+.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: 0px;
+}
+.inputTable th {
+	text-align: left;
+}
+.inputTable th .tooltip {
+	margin-left: 15px;
+	height: 15px;
+	width: 15px;
+}
+.inputTable .finsemble-icon-times {
+	color: #999999;
+}
+.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;
+}
+
+.app-edit-app-name {
+	color: #ffffff;
+}
+
+table.accordion-edit-block {
+	width: 515px;
+}
+
+.inputTable th,
+.inputTable td {
+	padding-left: 0px;
+}
+
+.accordion-edit-block .finsemble-dropdown__btn-options {
+	text-align: left;
+}
+
+.accordion-edit-block label:first-of-type input[type="radio"] {
+	margin-left: 0px;
+}
+
+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,47 +1,49 @@
-.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;
-}
-
-.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;
-}
-
-.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-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;
+}