.promethee-edit__move width: 720px margin: 0 auto .promethee-edit__component font-size: 100% line-height: 100% &__inner min-height: 50px position: relative border: 1px solid #ccc p.text-empty line-height: 50px margin-bottom: 0 &--selected > .promethee-edit__component__inner border-color: black > .header background: black color: white &__remove position: absolute top: 4px right: 4px padding: 1px 2px 1px 3px background: white font-size: 12px line-height: 12px z-index: 1 &__columns .row user-select: none height: 100% min-height: 50px position: fixed top: 0 bottom: 0 width: 730px z-index: 0 opacity: 0.03 .col height: 100% .color height: 100% background: black &__page z-index: 1 padding-bottom: 200px &__columns, &__page .row margin-left: -5px margin-right: -5px .col padding-left: 5px padding-right: 5px .header background: #ccc padding: 4px 5px 5px font-size: 8px color: white text-transform: uppercase margin-bottom: 5px &__component user-select: none &__droppable visibility: hidden opacity: .2 margin: 2px 0 position: relative background: white width: 100% height: 20px border: 1px dashed #253742 box-sizing: border-box transition: width .2s, height .2s, opacity .2s &.ui-droppable-active visibility: visible &.ui-droppable-hover opacity: 1 height: 100px &--row position: absolute display: none width: 10px height: 100% &.ui-droppable-active width: 10px height: 100% &.ui-droppable-hover opacity: 1 width: 20px height: 100% &--first display: block left: -10px top: 10px bottom: 20px &--inside-column display: block right: -5px top: -10px .ui-draggable-dragging z-index: 1000 opacity: 0.5 // Nothing is droppable inside components being dragged .promethee-edit__move__droppable visibility: hidden !important // By default, nothing is dropped in rows &--dragging .promethee-edit__move__droppable--row display: none // Except for columns, which can be dropped only on rows &--column .promethee-edit__move__droppable display: none // But we don't want anything to move when the droppable disappear, so we show some substitutes &-substitute // This height is not perfect, some strange things move height: 24px // Except in rows &.promethee-edit__move__droppable-substitute--row height: 0 // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables" &--row--first, &--row--inside-column display: block .promethee-edit &__inspect, &__library min-width: 100px max-width: 400px background: white position: fixed top: 80px bottom: 15px z-index: 1000 width: calc(50vw - 420px) overflow-x: hidden overflow-y: scroll &-header font-size: 18px font-weight: bold text-transform: uppercase margin-bottom: 20px &__inspect right: 30px label.label-control font-weight: normal &__library left: 30px &__item max-width: 300px z-index: 100000 background-color: #253742 padding-top: 10px margin-bottom: 30px height: 100px min-width: 100px text-align: center color: white &__icon display: block svg width: 60px height: auto &__name margin-top: -10px font-size: 11px font-weight: normal text-transform: uppercase