X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fmodules%2Fcontrib%2Fparagraphs%2Fcss%2Fparagraphs.dragdrop.scss;fp=web%2Fmodules%2Fcontrib%2Fparagraphs%2Fcss%2Fparagraphs.dragdrop.scss;h=8c8194f3263fcce4cd702ee1ee9b02d89df98b75;hp=0000000000000000000000000000000000000000;hb=af6d1fb995500ae68849458ee10d66abbdcfb252;hpb=680c79a86e3ed402f263faeac92e89fb6d9edcc0 diff --git a/web/modules/contrib/paragraphs/css/paragraphs.dragdrop.scss b/web/modules/contrib/paragraphs/css/paragraphs.dragdrop.scss new file mode 100644 index 000000000..8c8194f32 --- /dev/null +++ b/web/modules/contrib/paragraphs/css/paragraphs.dragdrop.scss @@ -0,0 +1,91 @@ +@import "variables"; + +.paragraphs-dragdrop { + list-style-type: none; + margin: 0; + padding: 0; + min-height: 50px; + + &:empty { + border: 1px dashed $grey-dark; + margin-bottom: 10px; + } + + .paragraphs-dragdrop { + margin-left: 10px; + margin-right: 5px; + + @media all and (min-width: 780px) { + margin-left: 20px; + } + } + + > li { + min-height: 30px; + margin: 10px 0; + padding: 3px; + border: 1px solid $grey-dark; + border-left-width: 10px; + transition: border .5s ease; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + cursor: move; + } + + .paragraphs-summary-wrapper { + display: flex; + padding: 5px; + } + + strong { + white-space: nowrap; + } + + .paragraphs-dragdrop-wrapper { + margin-left: 39px; + margin-top: 20px; + } + + > li .paragraphs-summary-wrapper > div { + flex-grow: 1; + margin-left: 10px; + } + + .sortable-drag { + opacity: 0; + } + + > .sortable-ghost, + .sortable-chosen { + opacity: 1; + border-left-color: black; + } + + .tabledrag-handle { + float: left; + padding: 5px; + align-self: flex-start; + + [dir="rtl"] & { + float: right; + } + + .touchevents & { + padding: 0 0 0 5px; + margin-top: -5px; + } + } +} + +.js .field--widget-paragraphs .paragraphs-dragdrop .field--widget-paragraphs { + margin-left: 5px; +} + +.field-dragdrop-mode-submit { + margin-right: 10px; +} + +.paragraphs-dragdrop-wrapper { + padding-top: 10px; +}