Skip to content
Snippets Groups Projects
Commit 1fec1669 authored by carljbowman's avatar carljbowman
Browse files

Update Stage Select UI

- Make stage look more like a tile element and not flust with the stage info width.
- Make the stage select state more apparent
parent 8278ae20
Branches
Tags
No related merge requests found
......@@ -20,10 +20,12 @@ $header-height: calc($stage-menu-height - 2px);
border-style: solid;
border-bottom: 0;
cursor: pointer;
transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
transition: all 0.25s ease;
}
.stage-selector.is-selected {
border-top-left-radius: .625rem;
border-top-right-radius: .625rem;
border-color: $motion-primary;
box-shadow: 0px 0px 0px 4px $motion-transparent;
}
......@@ -44,6 +46,7 @@ $header-height: calc($stage-menu-height - 2px);
border-top-right-radius: $space;
border-bottom: 1px solid $ui-black-transparent;
width: 100%;
transition: background-color 0.25s ease;
}
.header-title {
......@@ -53,6 +56,15 @@ $header-height: calc($stage-menu-height - 2px);
/* @todo: make this a mixin for all UI text labels */
user-select: none;
transition: color 0.25s ease;
}
.stage-selector.is-selected .header {
background-color: $motion-primary;
}
.stage-selector.is-selected .header-title {
color: $ui-white;
}
.count {
......@@ -71,9 +83,11 @@ $header-height: calc($stage-menu-height - 2px);
.costume-canvas {
display: block;
margin-top: .25rem;
width: 100%;
user-select: none;
border-bottom: 1px solid $ui-black-transparent;
border: 1px solid $ui-black-transparent;
border-radius: .25rem;
box-shadow: inset 0 0 4px $ui-black-transparent;
}
......
......@@ -80,9 +80,9 @@ const StageSelector = props => {
{url ? (
<CostumeCanvas
className={styles.costumeCanvas}
height={54}
height={48}
url={url}
width={72}
width={64}
/>
) : null}
<div className={styles.label}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment