-
chrisgarrity authored
* Fix all the little RTL layout bugs - [ ] borders on toolbox and workspace mirror correctly - [ ] spacing on stage selector is correct - [ ] stage size icons are mirrored - [ ] extension library coming soon text is positioned correctly - [ ] only mirror blocks icon on the tab (others stay right-handed) - [ ] drop down icon in create variable modal has correct spacing * FIx RTL backpack header border-radius * round the bottom corner of paint/sound editors This makes the editor’s asset panels match the blocks.
chrisgarrity authored* Fix all the little RTL layout bugs - [ ] borders on toolbox and workspace mirror correctly - [ ] spacing on stage selector is correct - [ ] stage size icons are mirrored - [ ] extension library coming soon text is positioned correctly - [ ] only mirror blocks icon on the tab (others stay right-handed) - [ ] drop down icon in create variable modal has correct spacing * FIx RTL backpack header border-radius * round the bottom corner of paint/sound editors This makes the editor’s asset panels match the blocks.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
backpack.css 1.45 KiB
@import "../../css/units.css";
@import "../../css/colors.css";
.backpack-container {
flex-shrink: 1;
position: relative;
}
.backpack-header {
margin-top: 0.5rem;
border: 1px solid $ui-black-transparent;
background: $ui-white;
padding: 0.25rem;
text-align: center;
font-size: 0.85rem;
color: $text-primary;
transition: 0.2s;
cursor: pointer;
user-select: none;
}
[dir="ltr"] .backpack-header {
border-top-right-radius: $space;
}
[dir="rtl"] .backpack-header {
border-top-left-radius: $space;
}
.backpack-list {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
border-right: 1px solid $ui-black-transparent;
min-height: 5.5rem;
}
/* Absolute position the inner list to allow scrolling inside flex sized container */
.backpack-list-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
overflow-x: auto;
}
.drag-over:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.75;
background-color: #8cbcff;
transition: all 0.25s ease;
}
.status-message {
width: 100%;
text-align: center;
font-size: 0.85rem;
color: $text-primary;
}
.backpack-item {
min-width: 4rem;
margin: 0 0.25rem;
mix-blend-mode: multiply; /* Make white transparent for thumnbnails */
}