@finsemble/finsemble-ui 7.0.0 → 7.1.0-beta.2

package/react/assets/css/linkerWindow.css

@@ -5,7 +5,7 @@
  */
 
 body .linkerContainer {
-	margin: 0px;
+	margin: 0;
 	border: 0;
 	font-size: var(--menu-font-size);
 	font-weight: var(--font-weight);
@@ -132,5 +132,5 @@ body .linkerContainer {
 .active-linker-group {
 	color: var(--menu-linker-selected-font-color);
 	font-size: var(--menu-linker-selected-font-size);
-	margin: 2px 2px 0px 0px;
+	margin: 2px 2px 0 0;
 }

package/react/assets/css/menus.css

@@ -30,8 +30,8 @@ This attribute is never set for menus with a fixed height (e.g. <MenuShell heigh
 
 html.menu-portal body {
 	overflow-y: auto;
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 	background: var(--toolbar-background-color);
 }
 
@@ -64,9 +64,9 @@ html.menu-portal body.menu-no-scroll {
 	overflow-y: auto;
 	list-style-type: none;
 	width: 100%;
-	padding-left: 0px;
-	margin-top: 0px;
-	margin-bottom: 0px;
+	padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 .menu-secondary {
@@ -83,7 +83,6 @@ The "focused" attribute is set during keyboard navigation.
 .menu-item:focus,
 .menu-item-icon:focus,
 .menu-item:hover,
-.menu-item:focus,
 .finsemble-toolbar-button:hover {
 	background: var(--menu-content-hover-color);
 	outline: none;
@@ -98,7 +97,7 @@ The "focused" attribute is set during keyboard navigation.
 	flex-direction: row;
 	align-items: center;
 	padding-left: 14px;
-	margin: 0px 5px;
+	margin: 0 5px;
 	cursor: pointer;
 	position: relative;
 	border-radius: 20px;
@@ -111,7 +110,7 @@ The "focused" attribute is set during keyboard navigation.
 
 .menu-item .ff-adp-hamburger {
 	color: var(--menu-dragHandle-color);
-	padding: 3px 7px 0px 0px;
+	padding: 3px 7px 0 0;
 	cursor: grab;
 }
 
@@ -169,7 +168,7 @@ The "focused" attribute is set during keyboard navigation.
 
 /* padding for favorite makers and trashcans */
 .menu-item-row-push-right > * {
-	padding: 0px 10px;
+	padding: 0 10px;
 }
 
 .ff-adp-trash-outline:hover {
@@ -184,6 +183,7 @@ The "focused" attribute is set during keyboard navigation.
 	.menu-toggle-small {
 		display: inline-flex;
 	}
+
 	.menu-toggle-large {
 		display: none;
 	}
@@ -191,5 +191,5 @@ The "focused" attribute is set during keyboard navigation.
 
 /* Remove border around system tray menu */
 .system-tray {
-	margin: 0px;
+	margin: 0;
 }

package/react/assets/css/notificationsCenter.css

@@ -1,15 +1,16 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");
-
 @import "./shared/animations.css";
 
 body.notifications-center-body {
 	background-color: transparent;
 	bottom: 0;
 	margin: 0;
+	/* stylelint-disable-next-line declaration-no-important */
 	overflow: hidden !important; /* necessary to hide default scrollbar, cause the parent html element is restyled at the `hackScrollbar()` function */
 }
 
 body.notifications-center-body.notifications-popped-in {
+	/* stylelint-disable-next-line declaration-no-important */
 	margin-top: 0 !important; /* necessary to push the window up to take over the hidden titlebar when the center is popped in */
 }
 
@@ -38,7 +39,7 @@ body.notifications-center-body.notifications-popped-in {
 
 .cards-container {
 	/* Full window minus Search and Filter rows height  */
-	height: Calc(100vh - 91px);
+	height: calc(100vh - 91px);
 	overflow-y: auto;
 	overflow-x: hidden;
 }
@@ -103,8 +104,7 @@ body.notifications-center-body.notifications-popped-in {
 
 #notifications-center-controls {
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+	flex-flow: row wrap;
 	align-items: center;
 	padding: 10px 0; /* change to margin when notifications search is implemented */
 }
@@ -129,7 +129,7 @@ body.notifications-center-body.notifications-popped-in {
 	font-family: var(--notification-font-family);
 	font-size: 11px;
 	color: var(--font-color);
-	padding: 0px 7px;
+	padding: 0 7px;
 	margin: 0 3px;
 	cursor: pointer;
 	white-space: nowrap;
@@ -173,35 +173,24 @@ body.notifications-center-body.notifications-popped-in {
 	fill: var(--accent-primary);
 }
 
-@keyframes slideBackAndForth {
-	0% {
-		transform: translateX(0);
-	}
-	50% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
 .drawer-enter {
 	animation: slide-in-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
+
 .drawer-exit {
 	animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
 
-/* Notification card and views*/
+/* Notification card and views */
 .notification-card {
 	background-color: var(--core-primary);
-	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 0 8px 0 rgb(0 0 0 / 50%);
 	display: flex;
 	flex-direction: column;
 	font-family: var(--notification-font-family);
 	min-height: 120px;
 	padding: 8px 10px;
-	margin: 0 5px 0 5px;
+	margin: 0 5px;
 }
 
 .notification-card.read {
@@ -264,6 +253,9 @@ i.default-img.large {
 	display: grid;
 	grid-template-rows: 30px;
 	align-items: center;
+	grid-template-columns: minmax(80px, auto);
+	justify-items: end;
+	margin-left: 2px;
 }
 
 .notifications-toast__offscreen .notification-card__more-options__no-toggle,
@@ -271,13 +263,6 @@ i.default-img.large {
 	grid-template-columns: 25px 20px;
 }
 
-.notification-card__more-options__no-toggle,
-.notification-card__more-options__toggle {
-	grid-template-columns: minmax(80px, auto);
-	justify-items: end;
-	margin-left: 2px;
-}
-
 .notification-card__more-options__toggle .notification-card_overflow_menu,
 .notification-card__more-options__toggle:hover .notification-card_timestamp {
 	display: none;
@@ -307,7 +292,7 @@ i.default-img.large {
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 4;
 	color: var(--core-primary-5);
-	display: -webkit-box;
+	display: box;
 	overflow: hidden;
 }
 
@@ -477,7 +462,7 @@ i.default-img.large {
 
 .finsemble-icon {
 	display: grid;
-	margin: 0px 7px;
+	margin: 0 7px;
 }
 
 .finsemble-icon i {
@@ -582,7 +567,7 @@ body.notifications-toasts-body {
 	bottom: 0;
 	overflow: hidden;
 	width: 100%;
-	background-color: rgba(0, 0, 0, 0);
+	background-color: rgb(0 0 0 / 0%);
 }
 
 .opaque body.notifications-toasts-body {
@@ -592,7 +577,7 @@ body.notifications-toasts-body {
 }
 
 .notifications-toast__offscreen {
-	-webkit-transform: translateX(1000px);
+	transform: translateX(1000px);
 	transform: translateX(1000px);
 	animation: slide-in-right-opaque 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }

package/react/assets/css/processMonitor.css

@@ -5,7 +5,7 @@
  */
 
 body.process-monitor {
-	margin: 0px;
+	margin: 0;
 	overflow: hidden;
 	font-size: var(--procMonitor-font-size);
 	font-weight: var(--procMonitor-font-weight);
@@ -67,7 +67,8 @@ body.process-monitor {
 	border-bottom: 1px solid var(--procMonitor-list-border-color);
 	padding-right: 15px;
 	align-items: center;
-	/*Account for scrollbar.*/
+
+	/* Account for scrollbar. */
 }
 
 .process-name,
@@ -98,7 +99,7 @@ body.process-monitor {
 }
 
 .list-header-name {
-	border-left: 0px;
+	border-left: 0;
 }
 
 .statistic {
@@ -117,9 +118,11 @@ body.process-monitor {
 .child-window-name {
 	font-weight: var(--procMonitor-component-name-font-weight);
 }
+
 .advanced .child-window-name {
 	cursor: pointer;
 }
+
 .child-window-actions {
 	width: 26px;
 	display: inline-flex;
@@ -209,5 +212,5 @@ body.process-monitor {
 .process-monitor ::-webkit-scrollbar-thumb {
 	cursor: pointer;
 	border-radius: inherit;
-	background-color: rgba(0, 0, 0, 0.2);
+	background-color: rgb(0 0 0 / 20%);
 }

package/react/assets/css/search.css

@@ -54,7 +54,7 @@
 	flex-direction: row;
 	position: relative;
 	padding: 10px 10px 10px 14px;
-	margin: 0px 5px;
+	margin: 0 5px;
 	font-weight: var(--font-weight-2);
 	color: var(--search-menu-header-color);
 	background: transparent;

package/react/assets/css/shared/animations.css

@@ -15,6 +15,7 @@
 		transform: translateZ(-1400px) translateY(800px);
 		opacity: 0;
 	}
+
 	100% {
 		transform: translateZ(0) translateY(0);
 		opacity: 1;
@@ -35,6 +36,7 @@
 		transform: translateX(0);
 		opacity: 1;
 	}
+
 	100% {
 		transform: translateX(1000px);
 		opacity: 0;
@@ -53,16 +55,18 @@
 
 @keyframes slide-in-right {
 	0% {
-		-webkit-transform: translateX(1000px);
+		transform: translateX(1000px);
 		transform: translateX(1000px);
 		opacity: 0;
 	}
+
 	100% {
-		-webkit-transform: translateX(0);
+		transform: translateX(0);
 		transform: translateX(0);
 		opacity: 1;
 	}
 }
+
 .slide-in-right {
 	animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
@@ -76,6 +80,7 @@
 	0% {
 		transform: translateX(0);
 	}
+
 	100% {
 		transform: translateX(1000px);
 	}
@@ -89,11 +94,12 @@
 
 @keyframes slide-in-right-opaque {
 	0% {
-		-webkit-transform: translateX(1000px);
+		transform: translateX(1000px);
 		transform: translateX(1000px);
 	}
+
 	100% {
-		-webkit-transform: translateX(0);
+		transform: translateX(0);
 		transform: translateX(0);
 	}
 }

package/react/assets/css/shared/common.css

@@ -4,11 +4,11 @@
 	align-items: center;
 }
 
-.ff-chevron-left:before {
+.ff-chevron-left::before {
 	padding-right: 2px;
 }
 
-.ff-chevron-right:before {
+.ff-chevron-right::before {
 	padding-left: 2px;
 }
 

package/react/assets/css/tags.css

@@ -9,7 +9,7 @@
 	border-radius: 12px;
 	background: var(--tag-background-color);
 	color: var(--tag-font-color);
-	padding: 0px 5px 0px 9px;
+	padding: 0 5px 0 9px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -43,7 +43,7 @@
 }
 
 .tags-menu-wrapper span i {
-	padding: 0px 5px;
+	padding: 0 5px;
 	font-size: 6px;
 }
 
@@ -56,13 +56,13 @@
 	overflow-y: auto;
 	border-radius: 3px;
 	background-color: var(--tag-background-color);
-	padding: 5px 0px;
+	padding: 5px 0;
 	margin-top: 5px;
 }
 
 .tags-menu ul {
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 }
 
 .tags-menu li {
@@ -71,7 +71,7 @@
 	font-size: 11px;
 	list-style: none;
 	color: var(--tag-font-color);
-	padding: 0px 6px;
+	padding: 0 6px;
 	display: flex;
 	align-items: center;
 }
@@ -89,8 +89,8 @@
 	border-radius: 12px;
 	background-color: var(--tag-background-color);
 	user-select: none;
-	margin: 0px 4px 4px 0px;
-	padding: 5px 7px 0px 9px;
+	margin: 0 4px 4px 0;
+	padding: 5px 7px 0 9px;
 }
 
 .app-tag .tag-content {
@@ -110,7 +110,7 @@
 
 .tag-delete {
 	cursor: pointer;
-	padding: 0px 2px;
+	padding: 0 2px;
 	font-size: 8px;
 }
 
@@ -127,7 +127,7 @@
 }
 
 .tag-content .ff-close {
-	padding-top: 0px;
+	padding-top: 0;
 }
 
 .label-bar .ff-close {

package/react/assets/css/toolbar.css

@@ -6,13 +6,13 @@
 
 .finsemble-toolbar-body {
 	height: 100%;
-	margin: 0px;
+	margin: 0;
 	font-weight: var(--toolbar-font-weight);
 	font-size: var(--toolbar-font-size);
 	color: var(--toolbar-font-color);
 	line-height: 1.3em;
 	vertical-align: middle;
-	-webkit-user-select: none;
+	user-select: none;
 	overflow: hidden;
 }
 
@@ -72,8 +72,8 @@
 }
 
 .finsemble-toolbar-button {
-	padding: 0px 8px 2px 8px;
-	margin: 5px 0px;
+	padding: 0 8px 2px;
+	margin: 5px 0;
 	border: 1px solid var(--toolbar-background-color);
 	display: flex;
 	align-items: center;
@@ -98,6 +98,7 @@
 }
 
 .finsemble-toolbar-button.selected {
+	/* stylelint-disable-next-line declaration-no-important */
 	background-color: var(--accent-primary-1) !important;
 }
 
@@ -113,6 +114,7 @@
 
 @media screen and (max-width: 270px) {
 	#advanced-app-launcher {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
 
@@ -173,11 +175,11 @@
 	align-self: center;
 }
 
-.divider:before {
+.divider::before {
 	height: 24px;
 	border-right: var(--toolbar-separator);
 	content: "";
-	margin: 0em 0.25em;
+	margin: 0 0.25em;
 }
 
 img.pinned-icon {
@@ -195,6 +197,7 @@ img.pinned-icon {
 }
 
 .pinned-workspace-icon {
+	/* stylelint-disable-next-line declaration-no-important */
 	color: var(--toolbar-icon-workspace-color) !important;
 }
 
@@ -247,7 +250,7 @@ img.pinned-icon {
 .finsemble-toolbar-drag-handle {
 	margin-left: 3px;
 	padding-left: 2px;
-	padding-right: 0px;
+	padding-right: 0;
 	padding-top: 15px;
 	cursor: grab;
 }
@@ -260,18 +263,20 @@ img.pinned-icon {
 .finsemble-toolbar-drag-handle-native-movement {
 	margin-left: 3px;
 	padding-left: 2px;
-	padding-right: 0px;
+	padding-right: 0;
 	padding-top: 15px;
 	-webkit-app-region: drag;
 	cursor: grab;
 }
 
 .fsbl-share-scrim {
+	/* stylelint-disable-next-line declaration-no-important */
 	display: none !important;
 }
 
 .first-pinned-component {
-	margin-left: 0px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-left: 0 !important;
 }
 
 .icon-only > i {
@@ -303,7 +308,7 @@ img.pinned-icon {
 
 .searchContainer {
 	display: flex;
-	margin: 0px 2px;
+	margin: 0 2px;
 	margin-top: -1px;
 }
 
@@ -320,10 +325,11 @@ img.pinned-icon {
 	overflow: hidden;
 	white-space: nowrap;
 	transition-timing-function: ease-in-out -0.1;
+	/* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
 	transition: width 0.5s, background-color 0s 0s;
 }
 
-.searchInput.full[contenteditable="true"]:empty:before {
+.searchInput.full[contenteditable="true"]:empty::before {
 	content: attr(placeholder);
 }
 
@@ -333,7 +339,8 @@ img.pinned-icon {
 	width: 31px;
 	cursor: pointer;
 	color: transparent; /* hide the text when in compact mode */
-	/*transition: width .5s,background-color 0s .5s;*/
+
+	/* transition: width .5s,background-color 0s .5s; */
 }
 
 .searchInput.compact::before {
@@ -360,7 +367,7 @@ img.pinned-icon {
 
 .searchInput.active {
 	display: inline-block;
-	left: 0px;
+	left: 0;
 	width: 349px;
 	text-align: left;
 	background-color: var(--search-input-background-color);
@@ -370,12 +377,8 @@ img.pinned-icon {
 }
 
 img {
-	user-drag: none;
-	user-select: none;
-	-moz-user-select: none;
 	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
+	user-select: none;
 }
 
 .finsemble-toolbar .ff-chevron-down {
@@ -390,7 +393,7 @@ img {
 }
 
 .overflow .ff-chevron-down {
-	padding-left: 0px;
+	padding-left: 0;
 	padding-right: 1px;
 }
 

package/react/assets/css/userPreferences.css

@@ -5,15 +5,12 @@
  */
 
 body {
-	margin: 0px;
+	margin: 0;
 }
 
 img {
 	user-select: none;
-	-moz-user-select: none;
 	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
 }
 
 .complex-menu-wrapper {
@@ -102,8 +99,8 @@ img {
 
 .complex-menu-header {
 	display: flex;
-	justify-content: Space-between;
-	padding: 6px 6px 0px 11px;
+	justify-content: space-between;
+	padding: 6px 6px 0 11px;
 	font-size: 18px;
 }
 
@@ -119,7 +116,7 @@ img {
 .complex-menu-section-toggle {
 	padding: 6px 30px;
 	margin-right: 6px;
-	border-radius: 0px 20px 20px 0px;
+	border-radius: 0 20px 20px 0;
 	height: 22px;
 	display: flex;
 	align-items: center;
@@ -149,7 +146,7 @@ img {
 }
 
 .workspace-list-header-row {
-	padding: 0px;
+	padding: 0;
 }
 
 #UserPreferences-component-wrapper {
@@ -179,7 +176,7 @@ img {
 
 .workspace-item {
 	height: 28px;
-	padding: 4px 10px 0px 10px;
+	padding: 4px 10px 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -203,7 +200,7 @@ img {
 
 .workspace-item .ff-adp-hamburger {
 	color: var(--content-list-drag-icon-color);
-	margin: -2px 16px 0px 0px;
+	margin: -2px 16px 0 0;
 }
 
 .workspace-item .workspace-name {
@@ -219,7 +216,7 @@ img {
 .individual-workspace-action {
 	cursor: pointer;
 	padding: 4px;
-	margin: 0px 4px;
+	margin: 0 4px;
 	height: 17px;
 	transition: 0.2s color;
 }
@@ -262,11 +259,11 @@ img {
 
 .action-button {
 	border: 1px solid var(--button-neutral-border-hover-color);
-	padding: 0.25em 0em;
+	padding: 0.25em 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin: 16px 0px 6px 0px;
+	margin: 16px 0 6px;
 	color: var(--content-button-icon-color);
 	transition: 0.2s all;
 }
@@ -408,6 +405,7 @@ img {
 }
 
 .disabled-restart {
+	/* stylelint-disable-next-line declaration-no-important */
 	color: var(--core-primary-5) !important;
 }
 
@@ -482,7 +480,7 @@ option:focus {
 
 .row-btn:hover {
 	background: var(--accent-primary);
-	border-radius: 0px 20px 20px 0px;
+	border-radius: 0 20px 20px 0;
 }
 
 .row-section .row__lbl {