Fix graph view button hotkey tooltip; fix layer CSS bug
This commit is contained in:
Keavon Chambers
parent
a566331f1c
commit
980b692d46
|
|
@ -46,13 +46,14 @@ impl InputMapperMessageHandler {
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn action_input_mapping(&self, action_to_find: &MessageDiscriminant) -> Vec<KeysGroup> {
|
pub fn action_input_mapping(&self, action_to_find: &MessageDiscriminant) -> Vec<KeysGroup> {
|
||||||
let key_up = self.mapping.key_up.iter();
|
let all_key_mapping_entries = std::iter::empty()
|
||||||
let key_down = self.mapping.key_down.iter();
|
.chain(self.mapping.key_up.iter())
|
||||||
let double_click = std::iter::once(&self.mapping.double_click);
|
.chain(self.mapping.key_down.iter())
|
||||||
let wheel_scroll = std::iter::once(&self.mapping.wheel_scroll);
|
.chain(self.mapping.key_up_no_repeat.iter())
|
||||||
let pointer_move = std::iter::once(&self.mapping.pointer_move);
|
.chain(self.mapping.key_down_no_repeat.iter())
|
||||||
|
.chain(std::iter::once(&self.mapping.double_click))
|
||||||
let all_key_mapping_entries = key_up.chain(key_down).chain(double_click).chain(wheel_scroll).chain(pointer_move);
|
.chain(std::iter::once(&self.mapping.wheel_scroll))
|
||||||
|
.chain(std::iter::once(&self.mapping.pointer_move));
|
||||||
let all_mapping_entries = all_key_mapping_entries.flat_map(|entry| entry.0.iter());
|
let all_mapping_entries = all_key_mapping_entries.flat_map(|entry| entry.0.iter());
|
||||||
|
|
||||||
// Filter for the desired message
|
// Filter for the desired message
|
||||||
|
|
@ -69,15 +70,18 @@ impl InputMapperMessageHandler {
|
||||||
// TODO: Use a safe solution eventually
|
// TODO: Use a safe solution eventually
|
||||||
assert!(
|
assert!(
|
||||||
i < input_keyboard::NUMBER_OF_KEYS,
|
i < input_keyboard::NUMBER_OF_KEYS,
|
||||||
"Attempting to convert a Key with enum index {}, which is larger than the number of Key enums",
|
"Attempting to convert a Key with enum index {i}, which is larger than the number of Key enums",
|
||||||
i
|
|
||||||
);
|
);
|
||||||
(i as u8).try_into().unwrap()
|
(i as u8).try_into().unwrap()
|
||||||
})
|
})
|
||||||
.collect::<Vec<_>>();
|
.collect::<Vec<_>>();
|
||||||
|
|
||||||
if let InputMapperMessage::KeyDown(key) = entry.input {
|
match entry.input {
|
||||||
keys.push(key);
|
InputMapperMessage::KeyDown(key) => keys.push(key),
|
||||||
|
InputMapperMessage::KeyUp(key) => keys.push(key),
|
||||||
|
InputMapperMessage::KeyDownNoRepeat(key) => keys.push(key),
|
||||||
|
InputMapperMessage::KeyUpNoRepeat(key) => keys.push(key),
|
||||||
|
_ => (),
|
||||||
}
|
}
|
||||||
|
|
||||||
keys.sort_by(|a, b| {
|
keys.sort_by(|a, b| {
|
||||||
|
|
|
||||||
|
|
@ -121,19 +121,19 @@ pub enum ActionKeys {
|
||||||
impl ActionKeys {
|
impl ActionKeys {
|
||||||
pub fn to_keys(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Vec<KeysGroup>) -> String {
|
pub fn to_keys(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Vec<KeysGroup>) -> String {
|
||||||
match self {
|
match self {
|
||||||
ActionKeys::Action(action) => {
|
Self::Action(action) => {
|
||||||
if let Some(keys) = action_input_mapping(action).get_mut(0) {
|
if let Some(keys) = action_input_mapping(action).get_mut(0) {
|
||||||
let mut taken_keys = KeysGroup::default();
|
let mut taken_keys = KeysGroup::default();
|
||||||
std::mem::swap(keys, &mut taken_keys);
|
std::mem::swap(keys, &mut taken_keys);
|
||||||
let description = taken_keys.to_string();
|
let description = taken_keys.to_string();
|
||||||
*self = ActionKeys::Keys(taken_keys.into());
|
*self = Self::Keys(taken_keys.into());
|
||||||
description
|
description
|
||||||
} else {
|
} else {
|
||||||
*self = ActionKeys::Keys(KeysGroup::default().into());
|
*self = Self::Keys(KeysGroup::default().into());
|
||||||
String::new()
|
String::new()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ActionKeys::Keys(keys) => {
|
Self::Keys(keys) => {
|
||||||
warn!("Calling `.to_keys()` on a `ActionKeys::Keys` is a mistake/bug. Keys are: {:?}.", keys);
|
warn!("Calling `.to_keys()` on a `ActionKeys::Keys` is a mistake/bug. Keys are: {:?}.", keys);
|
||||||
String::new()
|
String::new()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -653,7 +653,9 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
{@html node.thumbnailSvg}
|
{#if node.thumbnailSvg}
|
||||||
|
{@html node.thumbnailSvg}
|
||||||
|
{/if}
|
||||||
{#if node.primaryOutput}
|
{#if node.primaryOutput}
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -890,288 +892,292 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.layer,
|
.layer,
|
||||||
.node {
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
left: calc(var(--offset-left) * 24px);
|
||||||
|
top: calc(var(--offset-top) * 24px);
|
||||||
|
// TODO: Reenable the `transition` property below after dealing with all edge cases where the wires need to be updated until the transition is complete
|
||||||
|
// transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above
|
||||||
|
// TODO: Find a solution for this having no effect in Firefox due to a browser bug caused when the two ancestor
|
||||||
|
// elements, `.graph` and `.panel`, have the simultaneous pairing of `overflow: hidden` and `border-radius`.
|
||||||
|
// See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
background: rgba(0, 0, 0, 0.33);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
clip-path: var(--clip-path-id);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
background: var(--color-3-darkgray);
|
||||||
|
color: var(--color-a-softgray);
|
||||||
|
|
||||||
|
.icon-label {
|
||||||
|
fill: var(--color-a-softgray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-arrow::after {
|
||||||
|
background: var(--icon-expand-collapse-arrow-disabled);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.previewed::after {
|
||||||
|
border: 1px dashed var(--color-data-vector);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ports {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&.input {
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.output {
|
||||||
|
right: -5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.port {
|
||||||
|
fill: var(--data-color);
|
||||||
|
// Double the intended value because of margin collapsing, but for the first and last we divide it by two as intended
|
||||||
|
margin: calc(24px - 8px) 0;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-arrow {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
left: calc(var(--offset-left) * 24px);
|
align-items: center;
|
||||||
top: calc(var(--offset-top) * 24px);
|
justify-content: center;
|
||||||
// TODO: Reenable the `transition` property below after dealing with all edge cases where the wires need to be updated until the transition is complete
|
|
||||||
// transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above
|
|
||||||
// TODO: Find a solution for this having no effect in Firefox due to a browser bug caused when the two ancestor
|
|
||||||
// elements, `.graph` and `.panel`, have the simultaneous pairing of `overflow: hidden` and `border-radius`.
|
|
||||||
// See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
background: rgba(0, 0, 0, 0.33);
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
width: 8px;
|
||||||
top: 0;
|
height: 8px;
|
||||||
left: 0;
|
background: var(--icon-expand-collapse-arrow);
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
|
&:hover::after {
|
||||||
|
background: var(--icon-expand-collapse-arrow-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expanded .expand-arrow::after {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer {
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 216px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: 1px solid var(--color-5-dullgray);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
// This is the result of blending `rgba(255, 255, 255, 0.1)` over `rgba(0, 0, 0, 0.33)`
|
||||||
|
background: rgba(66, 66, 66, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-chain {
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
background: var(--color-2-mildblack);
|
||||||
|
border: 1px solid var(--color-data-vector-dim);
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 72px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
background: var(--color-transparent-checkered-background);
|
||||||
|
background-size: var(--color-transparent-checkered-background-size);
|
||||||
|
background-position: var(--color-transparent-checkered-background-position);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
svg:not(.port) {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
clip-path: var(--clip-path-id);
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-mask {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
margin: auto;
|
||||||
}
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
&.node.selected .primary {
|
width: calc(100% - 2px);
|
||||||
background: rgba(255, 255, 255, 0.15);
|
height: calc(100% - 2px);
|
||||||
}
|
|
||||||
|
|
||||||
&.node.selected .parameters {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.layer.selected {
|
|
||||||
// This is the result of blending `rgba(255, 255, 255, 0.1)` over `rgba(0, 0, 0, 0.33)`
|
|
||||||
background: rgba(66, 66, 66, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
background: var(--color-3-darkgray);
|
|
||||||
color: var(--color-a-softgray);
|
|
||||||
|
|
||||||
.icon-label {
|
|
||||||
fill: var(--color-a-softgray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-arrow::after {
|
|
||||||
background: var(--icon-expand-collapse-arrow-disabled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.previewed::after {
|
|
||||||
border: 1px dashed var(--color-data-vector);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ports {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
&.input {
|
|
||||||
left: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.output {
|
|
||||||
right: -5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.port {
|
.port {
|
||||||
fill: var(--data-color);
|
position: absolute;
|
||||||
// Double the intended value because of margin collapsing, but for the first and last we divide it by two as intended
|
margin: 0 auto;
|
||||||
margin: calc(24px - 8px) 0;
|
left: 0;
|
||||||
width: 8px;
|
right: 0;
|
||||||
height: 8px;
|
|
||||||
|
|
||||||
&:first-of-type {
|
&.top {
|
||||||
margin-top: calc((24px - 8px) / 2);
|
top: -9px;
|
||||||
|
|
||||||
&:not(.primary-port) {
|
|
||||||
margin-top: calc((24px - 8px) / 2 + 24px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&.bottom {
|
||||||
margin-bottom: calc((24px - 8px) / 2);
|
bottom: -9px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.expand-arrow {
|
.details {
|
||||||
width: 16px;
|
margin-left: 12px;
|
||||||
height: 16px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: var(--icon-expand-collapse-arrow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
background: var(--icon-expand-collapse-arrow-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.expanded .expand-arrow::after {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-label {
|
.text-label {
|
||||||
overflow: hidden;
|
line-height: 48px;
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer {
|
.input.ports,
|
||||||
border-radius: 8px;
|
.input.ports .port {
|
||||||
width: 216px;
|
position: absolute;
|
||||||
|
margin: auto 0;
|
||||||
&::after {
|
top: 0;
|
||||||
border: 1px solid var(--color-5-dullgray);
|
bottom: 0;
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-chain {
|
|
||||||
width: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
background: var(--color-2-mildblack);
|
|
||||||
border: 1px solid var(--color-data-vector-dim);
|
|
||||||
border-radius: 2px;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 72px;
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
background: var(--color-transparent-checkered-background);
|
|
||||||
background-size: var(--color-transparent-checkered-background-size);
|
|
||||||
background-position: var(--color-transparent-checkered-background-position);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
svg:not(.port) {
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
margin: auto;
|
|
||||||
top: 1px;
|
|
||||||
left: 1px;
|
|
||||||
width: calc(100% - 2px);
|
|
||||||
height: calc(100% - 2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.port {
|
|
||||||
position: absolute;
|
|
||||||
margin: 0 auto;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
&.top {
|
|
||||||
top: -9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bottom {
|
|
||||||
bottom: -9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
margin-left: 12px;
|
|
||||||
|
|
||||||
.text-label {
|
|
||||||
line-height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input.ports,
|
|
||||||
.input.ports .port {
|
|
||||||
position: absolute;
|
|
||||||
margin: auto 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.node {
|
.node {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 120px;
|
||||||
|
top: calc((var(--offset-top) + 0.5) * 24px);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: 1px solid var(--color-data-vector-dim);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
width: 120px;
|
}
|
||||||
top: calc((var(--offset-top) + 0.5) * 24px);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border: 1px solid var(--color-data-vector-dim);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
&.selected {
|
||||||
.primary {
|
.primary {
|
||||||
display: flex;
|
background: rgba(255, 255, 255, 0.15);
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 2px 2px 0 0;
|
|
||||||
font-style: italic;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
|
|
||||||
&.no-parameter-section {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-label {
|
|
||||||
display: none; // Remove after we have unique icons for the nodes
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-label {
|
|
||||||
margin-left: 8px; // Remove after reenabling icon-label
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.parameters {
|
.parameters {
|
||||||
display: flex;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
flex-direction: column;
|
}
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
|
.port {
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: calc((24px - 8px) / 2);
|
||||||
|
|
||||||
|
&:not(.primary-port) {
|
||||||
|
margin-top: calc((24px - 8px) / 2 + 24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: calc((24px - 8px) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
font-style: italic;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
|
&.no-parameter-section {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-label {
|
||||||
|
display: none; // Remove after we have unique icons for the nodes
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-label {
|
||||||
|
margin-left: 8px; // Remove after reenabling icon-label
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameters {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.parameter {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
.parameter {
|
&:last-of-type {
|
||||||
position: relative;
|
border-radius: 0 0 2px 2px;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
|
||||||
|
.text-label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 24px;
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&.input {
|
||||||
border-radius: 0 0 2px 2px;
|
.expand-arrow {
|
||||||
}
|
margin-left: 4px;
|
||||||
|
|
||||||
.text-label {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.input {
|
|
||||||
.expand-arrow {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.output {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
.expand-arrow {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&.output {
|
||||||
left: 0;
|
flex-direction: row-reverse;
|
||||||
}
|
text-align: right;
|
||||||
|
|
||||||
&::after {
|
.expand-arrow {
|
||||||
right: 0;
|
margin-right: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue