tldraw 3.16.0-canary.a03de714c746 → 3.16.0-canary.a962044c3d3b

package/tldraw.css

@@ -1941,12 +1941,6 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-/* Panel button */
-
-.tlui-button__panel {
-	position: relative;
-}
-
 /* Menu button */
 
 .tlui-button__menu {
@@ -1987,7 +1981,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 /* Tool lock button */
 
-.tlui-toolbar__lock-button {
+.tlui-main-toolbar__lock-button {
 	position: absolute;
 	top: 4px;
 	right: 0px;
@@ -1998,7 +1992,7 @@ it from receiving any pointer events or affecting the cursor. */
 	border-radius: var(--radius-2);
 }
 
-.tlui-toolbar__lock-button::after {
+.tlui-main-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
 	inset: 4px;
@@ -2010,16 +2004,6 @@ it from receiving any pointer events or affecting the cursor. */
 	position: relative;
 	height: 48px;
 	width: 48px;
-	margin-left: -2px;
-	margin-right: -2px;
-}
-
-.tlui-button__tool:nth-of-type(1) {
-	margin-left: 0px;
-}
-
-.tlui-button__tool:nth-last-of-type(1) {
-	margin-right: 0px;
 }
 
 .tlui-button__tool::after {
@@ -2050,47 +2034,30 @@ it from receiving any pointer events or affecting the cursor. */
 	width: 16px;
 }
 
-/* Button Row */
+/* Row layout */
 
-.tlui-buttons__horizontal {
+.tlui-row {
 	display: flex;
 	flex-direction: row;
+	padding: 0 2px;
 }
-.tlui-buttons__horizontal > * {
+.tlui-row > * {
 	margin-left: -2px;
 	margin-right: -2px;
 }
-.tlui-buttons__horizontal > *:nth-child(1) {
-	margin-left: 0px;
-}
-.tlui-buttons__horizontal > *:nth-last-child(1) {
-	margin-right: 0px;
-}
 
-/* Button Grid */
+/* Grid layout */
 
-.tlui-buttons__grid {
+.tlui-grid {
 	display: grid;
-	grid-template-columns: repeat(4, auto);
+	grid-template-columns: repeat(4, 1fr);
 	grid-auto-flow: row;
 	overflow: hidden;
+	padding: 2px;
 }
-.tlui-buttons__grid > .tlui-button {
+.tlui-grid > * {
 	margin: -2px;
 }
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
-.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
-	margin-right: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
-	margin-left: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
-	margin-top: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
-	margin-bottom: 0px;
-}
 
 /* Zoom button */
 
@@ -2813,12 +2780,8 @@ it from receiving any pointer events or affecting the cursor. */
 	border-bottom: 1px solid var(--color-divider);
 }
 
-.tlui-style-panel__row {
-	display: flex;
-}
-/* Only really used for the alignment picker */
-.tlui-style-panel__row__extra-button {
-	margin-left: -2px;
+.tlui-style-panel__dropdown-picker:only-child {
+	width: 100%;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -2934,7 +2897,7 @@ it from receiving any pointer events or affecting the cursor. */
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */
-.tlui-toolbar {
+.tlui-main-toolbar {
 	grid-column: 1 / span 3;
 	grid-row: 1;
 	display: flex;
@@ -2945,7 +2908,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 /* Centered Content */
-.tlui-toolbar__inner {
+.tlui-main-toolbar__inner {
 	position: relative;
 	width: fit-content;
 	display: flex;
@@ -2953,12 +2916,12 @@ it from receiving any pointer events or affecting the cursor. */
 	align-items: flex-end;
 }
 
-.tlui-toolbar__left {
+.tlui-main-toolbar__left {
 	width: fit-content;
 }
 
 /* Row of controls + lock button */
-.tlui-toolbar__extras {
+.tlui-main-toolbar__extras {
 	position: relative;
 	z-index: var(--layer-above);
 	width: 100%;
@@ -2967,11 +2930,11 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 48px;
 }
 
-.tlui-toolbar__extras:empty {
+.tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
-.tlui-toolbar__extras__controls {
+.tlui-main-toolbar__extras__controls {
 	display: flex;
 	position: relative;
 	flex-direction: row;
@@ -2986,7 +2949,7 @@ it from receiving any pointer events or affecting the cursor. */
 	width: fit-content;
 }
 
-.tlui-toolbar__tools {
+.tlui-main-toolbar__tools {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -2997,37 +2960,29 @@ it from receiving any pointer events or affecting the cursor. */
 	background: var(--color-panel);
 	box-shadow: var(--shadow-2);
 }
-.tlui-toolbar__tools__list {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
 
-.tlui-toolbar__overflow {
+.tlui-main-toolbar__overflow {
 	width: 40px;
+	margin-left: 2px;
 }
 
-.tlui-layout__mobile .tlui-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-toolbar *[data-state='open']::after {
+.tlui-main-toolbar *[data-state='open']::after {
 	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
-	.tlui-toolbar *[data-state='open']:not(:hover)::after {
+	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
 		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
 
-.tlui-layout__mobile .tlui-toolbar {
-	transition: transform 0.15s ease-out 0.05s;
-}
-
 /* ------------------- Tooltip -------------------- */
 
 .tlui-tooltip {