93 lines
1.6 KiB
SCSS
93 lines
1.6 KiB
SCSS
@use 'sass:color';
|
|
@use 'globals';
|
|
|
|
.expression-editor {
|
|
&__container {
|
|
@include globals.rounded;
|
|
background: #eee;
|
|
display: flex;
|
|
}
|
|
|
|
&__sidebar {
|
|
display: grid;
|
|
grid-template:
|
|
'padding-top' 1fr
|
|
'operator-selector' max-content
|
|
'actions' minmax(max-content, 1fr);
|
|
}
|
|
|
|
&__main {
|
|
@include globals.rounded;
|
|
background: #fff;
|
|
border: globals.$default-border;
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
&__action-button {
|
|
padding: 0.5rem;
|
|
|
|
svg path {
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
&__params {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.expression-selector {
|
|
&__container {
|
|
grid-area: operator-selector;
|
|
}
|
|
|
|
&__expression-button {
|
|
@include globals.button-clear;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 2.5rem;
|
|
padding: 0;
|
|
width: 2.5rem;
|
|
|
|
svg path {
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
&__popover {
|
|
&:popover-open {
|
|
@include globals.rounded;
|
|
inset: unset;
|
|
top: anchor(bottom);
|
|
border: globals.$popover-border;
|
|
margin: 0;
|
|
margin-top: 0.25rem;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
background: #fff;
|
|
box-shadow: globals.$popover-shadow;
|
|
}
|
|
}
|
|
|
|
&__section {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
justify-content: center;
|
|
list-style-type: none;
|
|
margin: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
&__li {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|