app/assets/stylesheets/alchemy/elements.scss
#alchemy_elements_window {
position: absolute;
right: 0;
top: $top-menu-height;
z-index: 20;
display: block;
width: calc(100vw - #{$collapsed-main-menu-width});
height: calc(100vh - #{$top-menu-height});
border-left: $default-border;
background-color: $light-gray;
transition: $transition-duration ease-in-out;
transform: translate3d(100%, 0, 0);
.elements-window-visible & {
transform: translate3d(0, 0, 0);
}
// Fix for Tinymce fullscreen window positioning issues (GH#1511)
.mce-fullscreen & {
width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
}
@media screen and (min-width: $large-screen-break-point) {
width: $elements-window-width;
min-width: $elements-window-min-width;
}
}
.elements-window-toolbar {
@extend %gradiated-toolbar;
display: flex;
padding: 2 * $default-padding;
border-bottom: $default-border;
.right {
display: inline-block;
margin-left: auto;
}
}
#element_area {
.sortable-elements {
min-height: 100%;
}
textarea {
width: 100%;
}
}
alchemy-tinymce {
display: block;
}
#main-content-elements {
--scrollable-elements-offset: #{$top-menu-height + $toolbar-height};
padding: 2 * $default-padding $default-padding 2px;
}
#fixed-elements sl-tab-panel {
--scrollable-elements-offset: #{$top-menu-height + $toolbar-height +
$tab-bar-height};
}
.scrollable-elements {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: calc(100vh - var(--scrollable-elements-offset, 0));
}
.element-title {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: color $transition-duration;
line-height: 1;
max-width: 85%;
.element-hidden > & {
max-width: 65%;
}
.preview_text_quote {
font-size: $small-font-size;
margin-left: $default-margin / 2;
}
}
.preview_text_element_name {
font-size: $small-font-size;
font-weight: bold;
line-height: 15px;
}
.element-handle {
display: inline-flex;
cursor: move;
padding-right: $default-padding;
}
.element-toggle {
width: 20px;
height: 20px;
display: flex;
align-items: center;
position: relative;
transition: none;
background: none;
border-color: transparent;
color: inherit;
box-shadow: none;
padding: 0;
margin: 0 0 0 auto;
&:hover {
&:not(:focus):not(:active) {
background-color: $default-border-color;
border-color: transparent;
cursor: pointer;
}
}
.icon {
pointer-events: none;
}
}
.element-editor {
position: relative;
border: 1px solid $default-border-color;
border-radius: $default-border-radius;
background-color: $light-gray;
margin: 2 * $default-margin 0;
transition: box-shadow $transition-duration;
scroll-margin: 2 * $default-margin;
&:first-child {
margin-top: 0;
}
&.element-hidden {
display: block;
border-style: dashed;
opacity: 0.7;
transition: opacity $transition-duration;
&:hover {
opacity: 1;
}
> .element-header {
background-color: transparent;
.element-hidden-icon {
display: inline-flex;
align-items: center;
gap: $default-padding;
margin-left: auto;
}
.element-hidden-label {
line-height: 1;
font-size: $small-font-size;
}
}
}
&.is-fixed {
border-width: 0;
border-radius: 0;
.nestable-elements {
padding: 2 * $default-padding $default-padding / 2;
}
}
&.not-draggable {
opacity: 0.5;
}
&.dirty {
border-color: #d0c83d;
> .element-header {
background-color: #fff8df;
}
}
&.deprecated {
border-color: $element-deprecated-border-color;
> .element-header {
background-color: $element-header-deprecated-bg-color;
background-image: linear-gradient(
45deg,
$element-header-deprecated-bg-color 25%,
$element-header-bg-color 25%,
$element-header-bg-color 50%,
$element-header-deprecated-bg-color 50%,
$element-header-deprecated-bg-color 75%,
$element-header-bg-color 75%,
$element-header-bg-color 100%
);
background-size: 28.28px 28.28px;
}
}
&.selected:not(.is-fixed),
&:hover:not(.is-fixed) {
&:not(.element-hidden) {
box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
}
}
&.selected:not(.is-fixed):not(.folded):not(.dirty):not(.element-hidden):not(
.deprecated
) {
> .element-header {
background-color: $element-header-active-bg-color;
color: $element-header-active-color;
}
}
&.folded {
.element-toolbar,
.element-body,
.element-footer,
.nestable-elements,
alchemy-message,
.nested-elements {
display: none;
}
}
&.expanded {
&.not-fixed {
.nestable-elements {
box-shadow: inset 0 4px 8px -2px darken($medium-gray, 15%);
background-color: $medium-gray;
padding: $default-padding;
}
}
}
&.dragged {
border: 1px solid var(--color-grey_dark);
background-color: var(--color-grey_medium);
opacity: 0.5;
box-shadow: none !important;
&:not(.compact) {
height: 36px;
overflow: hidden;
}
* {
visibility: hidden;
}
}
&.compact {
.element-hidden-label {
display: none;
}
.element-toolbar {
visibility: hidden;
position: absolute;
height: 35px;
opacity: 0;
z-index: 1;
box-shadow: 0 1px 1px $default-border-color;
background-color: $light-gray;
transition: all $transition-duration;
sl-switch::part(label) {
display: none;
}
}
.element-header:hover + .element-toolbar,
.element-toolbar:hover {
visibility: visible;
opacity: 1;
}
.element-footer {
padding-top: 0;
border-top: 0;
.button {
padding: $small-button-padding;
}
}
&:not(.folded) .element-toggle {
pointer-events: none;
}
.element-body {
margin: 4px 8px;
}
.ingredient-editor,
.ingredient-editor.picture .picture_thumbnail {
width: 100%;
}
.ingredient-editor.picture {
padding-right: 1px;
alchemy-link-buttons {
width: 33.333%;
flex-wrap: nowrap;
display: inline-flex;
justify-content: space-between;
}
}
.picture_thumbnail {
img {
width: auto;
}
}
textarea,
input[type="url"],
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 0.5em;
height: auto;
}
}
&.dismiss {
opacity: 0;
transform: scale(0);
transform-origin: top center;
transition:
opacity $transition-duration ease-out,
transform 1s ease-in;
}
.element-body {
margin: 2 * $default-padding;
}
.validation_notice {
float: left;
margin-top: 8px;
margin-bottom: 4px;
font-size: $small-font-size;
text-align: left;
}
alchemy-message {
margin: 2 * $default-margin;
}
.foot_note {
margin-bottom: 1em;
}
.autocomplete_tag_list {
display: block;
margin-top: $default-padding;
padding: $default-padding 0;
label {
font-size: $small-font-size;
}
.select2-container {
width: 100%;
.select2-choices {
width: 100%;
margin-bottom: 0;
margin-top: 8px;
}
}
}
hr {
height: 0;
width: 100%;
margin: 0 0 4 * $default-margin 0;
border: 0 none;
border-top: 1px solid $medium-gray;
opacity: 1;
}
}
.element-header {
display: flex;
gap: $default-padding;
align-items: center;
padding: 2 * $default-padding;
background-color: $element-header-bg-color;
@extend .disable-user-select;
cursor: pointer;
border-radius: $default-border-radius;
transition: background-color $transition-duration;
.expanded & {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.icon {
fill: currentColor;
transition: fill $transition-duration;
}
}
.element-hidden-icon {
display: none;
white-space: nowrap;
}
.element-toolbar {
display: flex;
width: 100%;
padding: $default-padding;
gap: $default-padding;
height: $element-toolbar-height;
border-top: 1px solid $medium-gray;
border-bottom: 1px solid $medium-gray;
.is-fixed & {
border-top-width: 0;
}
.icon_button {
width: $icon-button-medium-width;
height: $icon-button-medium-height;
}
}
alchemy-publish-element-button {
display: inline-flex;
align-items: center;
margin-left: auto;
margin-right: $default-margin;
line-height: 1;
sl-switch {
--thumb-size: 10px;
--height: 12px;
}
}
.element-footer {
border-top: 1px solid $medium-gray;
padding: 2 * $default-padding;
text-align: right;
.button {
margin: 0;
}
}
.ingredient-group {
width: 100%;
padding: $default-padding 0;
position: relative;
border-bottom: 1px solid $medium-gray;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
summary {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
text-decoration: none;
padding: $default-padding 1px;
}
&[open] {
> :not(summary) {
box-sizing: border-box;
}
}
}
.element-ingredient-editors {
display: flex;
flex-wrap: wrap;
}
#fixed-elements {
min-height: 100px;
}
.ingredient_link_buttons {
display: flex;
position: absolute;
bottom: 2 * $default-margin;
right: 0;
.icon_button {
&:not(.linked) {
background-color: $medium-gray;
border-color: $default-border-color;
border-width: $form-field-border-width;
border-style: $form-field-border-style;
box-shadow: none;
padding: 0;
margin: 0;
border-radius: 0;
width: $form-field-addon-width;
height: $form-field-height;
&:hover {
border-color: #c0c0c0;
}
&:focus {
box-shadow: 0 0 0 2px $focus-color;
border-color: $focus-color;
}
&[is="alchemy-unlink-button"] {
border-left-width: 0;
@extend .right-rounded-border;
}
&.disabled,
&.disabled:hover {
background-color: $form-field-disabled-bg-color;
}
}
&.linked {
height: 31px;
padding: 0;
border-radius: 0;
border-color: rgba(187, 162, 102, 0.5);
&[is="alchemy-unlink-button"] {
border-radius: 0 $default-border-radius $default-border-radius 0;
border-left-width: 0;
&:focus {
border-radius: 0 $default-border-radius $default-border-radius 0;
}
}
}
}
}
.edit_images_bottom {
position: absolute;
display: flex;
justify-content: space-between;
left: 0;
bottom: 0;
z-index: 0;
width: 100%;
padding: $default-padding;
background-color: #fff;
border-bottom-left-radius: $default-border-radius;
border-bottom-right-radius: $default-border-radius;
.icon_button {
width: $icon-button-medium-width;
height: $icon-button-medium-height;
}
alchemy-link-buttons {
display: flex;
justify-content: space-between;
width: 38%;
}
}
.ingredient-editor.picture {
position: relative;
width: 50%;
padding-left: 1px; // Compensate the box shadow
+ .picture {
padding-left: $default-padding;
padding-right: 1px; // Compensate the box shadow
}
.picture_thumbnail {
--picture-width: 160px;
--picture-height: 120px;
display: inline-block;
width: 160px;
margin: $default-margin 0;
padding: 0;
padding-bottom: 34px;
box-shadow: 0 0 1px 1px $default-border-color;
.picture_image {
overflow: hidden;
border-top-right-radius: var(--picture-thumbnail-border-radius);
border-top-left-radius: var(--picture-thumbnail-border-radius);
img.img_paddingtop {
@extend .disable-user-select;
}
}
img {
--picture-thumbnail-border-radius: 0;
}
}
&.validation_failed .picture_thumbnail {
border-color: $error_border_color;
}
.thumbnail_background {
--picture-thumbnail-border-radius: 0;
height: 120px;
alchemy-icon {
--icon-size: 3em;
color: var(--color-grey_dark);
&.error {
--icon-size: var(--icon-size-md);
}
}
}
.picture_ingredient_css_class {
position: absolute;
z-index: 1;
bottom: 34px;
background-color: rgba(255, 254, 255, 0.7);
padding: 4px 8px;
font-size: $small-font-size;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
}
.ingredient-editor.headline {
&.with-level-select {
input[type="text"] {
padding-right: $form-field-addon-width + 2 * $default-padding;
}
&.with-anchor {
input[type="text"] {
padding-right: 22px + $form-field-addon-width + $default-padding;
}
}
}
&.with-size-select {
input[type="text"] {
padding-right: $form-field-addon-width + 2 * $default-padding;
}
&.with-anchor {
input[type="text"] {
padding-right: 22px + $form-field-addon-width + $default-padding;
}
}
&.with-level-select {
input[type="text"] {
padding-right: 2 * ($form-field-addon-width + $default-padding);
}
&.with-anchor {
input[type="text"] {
padding-right: 16px + 2 * ($form-field-addon-width + $default-padding);
}
}
}
}
}
.ingredient-editor.audio,
.ingredient-editor.file,
.ingredient-editor.video {
.file {
display: flex;
align-items: center;
gap: $default-padding;
margin: 6px 0 $default-margin;
padding: 0 $default-padding 0 2 * $default-padding;
border: $default-border;
background-color: $white;
border-radius: $default-border-radius;
height: $form-field-height;
.validation_failed & {
color: $error_text_color;
border-color: $error_border_color;
}
}
.file_name {
display: inline-flex;
flex-grow: 1;
height: 100%;
align-items: center;
white-space: nowrap;
overflow: hidden;
font-size: $small-font-size;
text-overflow: ellipsis;
padding: $default-padding;
}
.remove_file_link {
width: 24px;
padding: $default-padding;
}
}
.file_tools {
display: flex;
gap: $default-padding;
align-items: center;
background-color: white;
border-radius: 0 $default-border-radius $default-border-radius 0;
a {
display: inline-flex;
padding: $default-padding;
justify-content: center;
align-items: center;
text-decoration: none;
width: 24px;
}
}
div.tinymce_container {
position: relative;
margin: $default-margin 0;
.spinner {
top: 70px;
}
}
input.long,
input.text_long {
width: 363px;
}
select.long {
width: 376px;
margin: 0;
padding: 0;
}
.ingredient-editor {
width: 100%;
padding: $default-padding 0;
position: relative;
.thin_border,
input[type="text"] {
width: 100%;
}
&.linkable {
input[type="text"] {
padding-right: 2 * ($form-field-addon-width + $default-padding);
}
&.with-anchor {
input[type="text"] {
padding-right: 26px + 2 * ($form-field-addon-width + $default-padding);
}
}
}
&.with-anchor {
input[type="text"] {
padding-right: 26px;
}
}
&.missing {
alchemy-message {
margin: 0;
@include clearfix;
}
p {
float: left;
width: 70%;
}
.button {
float: right;
margin: 0;
text-decoration: none;
}
}
&.display_inline {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
vertical-align: top;
.thin_border,
input[type="text"] {
width: 170px;
}
}
&.validation_failed {
> label {
color: $error_text_color;
}
input {
@extend %field-with-error;
}
.tinymce_container {
outline: 1px solid $error_border_color;
}
}
&.deprecated {
border-radius: $default-border-radius;
background-color: $element-header-deprecated-bg-color;
background-image: linear-gradient(
45deg,
$element-header-deprecated-bg-color 25%,
$element-header-bg-color 25%,
$element-header-bg-color 50%,
$element-header-deprecated-bg-color 50%,
$element-header-deprecated-bg-color 75%,
$element-header-bg-color 75%,
$element-header-bg-color 100%
);
background-size: 28.28px 28.28px;
padding-left: 2px;
padding-right: 2px;
}
label {
display: flex;
margin: $default-margin 0;
font-size: $small-font-size;
line-height: 15px;
text-indent: 1px;
span.warning.icon {
position: relative;
top: 2px;
}
&.inline {
display: inline-block;
vertical-align: middle;
min-width: 90px;
margin-right: 4px;
}
}
&.select {
label {
margin-bottom: 2 * $default-margin;
}
select,
.select2-container {
width: 100%;
}
&.display_inline {
select,
.select2-container {
width: 170px;
}
}
}
}
div.pictures_for_element {
overflow: auto;
margin-top: 4px;
}
textarea.has_tinymce {
visibility: hidden;
}
.ingredient-editor.html textarea {
font-family: $mono-font-family;
resize: vertical;
font-size: $form-field-font-size;
}
.text_short_float_left {
width: 170px;
float: left;
margin-right: 10px;
border-width: 1px;
}
.element_errors {
margin-top: 8px;
margin-bottom: 8px;
background-color: $error_background_color;
padding: 2 * $default-padding;
list-style-type: none;
border-radius: $default-border-radius;
color: $error_text_color;
border: 1px solid $error_border_color;
p {
margin: 0;
line-height: 24px;
}
}
.is-fixed {
&.with-ingredients {
> .element-footer {
border-top: 0;
border-bottom: 1px solid $medium-gray;
}
}
}
.element-editor {
display: block;
width: 100%;
.not-fixed & {
width: calc(100% - 8px);
margin: 4px;
}
&.compact {
width: calc(50% - 8px);
}
}
.nestable-elements {
.add-nestable-element-button {
width: 100%;
text-align: center;
margin: 0;
}
}
.nested-elements {
display: flex;
flex-wrap: wrap;
&.droppable-elements {
border-radius: var(--border-radius_medium);
}
.element-editor {
position: relative;
margin: $default-margin;
}
}
.add-nested-element {
padding: $default-padding;
}
.droppable-elements {
min-height: 36px;
background-color: var(--color-yellow_light);
}
label.ingredient-date--label,
.edit-ingredient-anchor-link {
display: inline-flex;
align-items: center;
position: absolute;
bottom: 3 * $default-padding;
margin: 0 !important;
}
label.ingredient-date--label {
padding: $default-padding;
right: 5px;
}
.edit-ingredient-anchor-link {
right: $default-padding;
a {
display: inline-flex;
align-items: center;
padding: $default-padding;
}
.linkable & {
right: 2 * $form-field-addon-width + $default-padding;
}
.with-size-select & {
right: $form-field-addon-width + $default-padding;
}
.with-level-select & {
right: $form-field-addon-width + $default-padding;
}
.with-level-select.with-size-select & {
right: 2 * $form-field-addon-width + $default-padding;
}
}
.ingredient-properties-link {
position: absolute;
right: 2px;
bottom: 15px;
> a {
padding: $default-padding;
}
}