paragraphs.dragdrop.css 

.paragraphs-dragdrop-wrapper {
  --dnd-item-chosen-bg: #fff;
  --dnd-item-chosen-border: #000;
  --dnd-item-ghost-bg: #d9edf7;
  --dnd-item-ghost-border: #0074bd;
  --dnd-icon-size: 28px;
  --dnd-item-indentation: 0.5em;
  --dnd-item-min-height: 30px;
}

@media all and (min-width: 780px) {
  .paragraphs-dragdrop-wrapper {
    --dnd-icon-size: 35px;
    --dnd-item-indentation: 1em;
    --dnd-item-min-height: 40px;
  }
}

.field-dragdrop-mode-submit {
  margin-right: 10px;
}

[dir="rtl"] .field-dragdrop-mode-submit {
  margin-right: 0;
  margin-left: 10px;
}

.paragraphs-dragdrop-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

.paragraphs-dragdrop__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir="rtl"] .paragraphs-dragdrop__list {
  margin: 0;
}

.paragraphs-dragdrop__list:empty {
  min-height: var(--dnd-item-min-height);
  margin: 5px 5px 10px 0;
  border: 1px dashed #999999;
  border-radius: 3px;
}

[dir="rtl"] .paragraphs-dragdrop__list:empty {
  margin-right: 5px;
  margin-left: 0;
}

.paragraphs-dragdrop__list .paragraphs-dragdrop__list:empty {
  margin-left: var(--dnd-item-indentation);
}

[dir="rtl"] .paragraphs-dragdrop__list .paragraphs-dragdrop__list:empty {
  margin-right: var(--dnd-item-indentation);
  margin-left: 0;
}

.paragraphs-dragdrop__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--dnd-item-min-height);
  margin: 5px 5px 10px 0;
  padding: 0 0 0 var(--dnd-icon-size);
  -webkit-transition: max-height 0.8s ease;
  transition: max-height 0.8s ease;
  border: 1px solid #999999;
  border-left-width: 10px;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}

[dir="rtl"] .paragraphs-dragdrop__item {
  margin-right: 0;
  margin-left: 5px;
  padding-right: var(--dnd-icon-size);
  padding-left: 0;
  border-right-width: 10px;
  border-left-width: 1px;
}

.paragraphs-dragdrop__item .paragraphs-dragdrop__item {
  margin-left: var(--dnd-item-indentation);
}

[dir="rtl"] .paragraphs-dragdrop__item .paragraphs-dragdrop__item {
  margin-right: var(--dnd-item-indentation);
  margin-left: 5px;
}

.paragraphs-dragdrop__item.sortable-chosen {
  border-color: var(--dnd-item-chosen-border);
}

.paragraphs-dragdrop__item.sortable-drag {
  height: var(--dnd-item-min-height);
  background: #fff;
  opacity: 1;
}

.paragraphs-dragdrop__item.sortable-ghost {
  min-height: 0;
  max-height: var(--dnd-item-min-height);
  border-style: dashed;
  border-left-style: solid;
  border-color: var(--dnd-item-ghost-border);
  background-color: var(--dnd-item-ghost-bg);
  opacity: 1;
}

[dir="rtl"] .paragraphs-dragdrop__item.sortable-ghost {
  border-right-style: solid;
  border-left-style: dashed;
}

.paragraphs-dragdrop__item.sortable-ghost > * {
  opacity: 0;
}

.paragraphs-dragdrop__item > * {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.is-dragging-paragraphs .paragraphs-dragdrop__list:not(.is-droppable-target) > .paragraphs-dragdrop__item {
  border-color: #ededed;
}

.is-dragging-paragraphs .paragraphs-dragdrop__list:not(.is-droppable-target) > .paragraphs-dragdrop__item.sortable-ghost {
  border-color: var(--dnd-item-ghost-border);
}

.paragraphs-dragdrop__item .paragraphs-summary-wrapper,
.paragraphs-dragdrop__item .paragraphs-dragdrop-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 calc(100% - var(--dnd-icon-size));
      -ms-flex: 1 0 calc(100% - var(--dnd-icon-size));
          flex: 1 0 calc(100% - var(--dnd-icon-size));
  width: calc(100% - var(--dnd-icon-size));
}

.paragraphs-dragdrop__item .paragraphs-summary-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 1.538em;
  margin: 5px 0;
  line-height: 1.538em;
}

.paragraphs-dragdrop__handle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 var(--dnd-icon-size);
      -ms-flex: 0 0 var(--dnd-icon-size);
          flex: 0 0 var(--dnd-icon-size);
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--dnd-icon-size);
  height: 100%;
  background: transparent;
  text-decoration: none;
  cursor: move;
}

[dir="rtl"] .paragraphs-dragdrop__handle {
  right: 0;
  left: auto;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}

.sortable-chosen > .paragraphs-dragdrop__handle {
  background-color: #f8f8f8;
  cursor: -webkit-grab;
  cursor: grab;
}

.sortable-chosen .paragraphs-dragdrop__item .paragraphs-dragdrop__handle {
  background-color: transparent;
}

.paragraphs-dragdrop__icon {
  display: block;
  position: relative;
  width: 100%;
  height: calc(var(--dnd-icon-size) + 2px);
  background: transparent url(../icons/icon-drag-move.svg) no-repeat 50% 50%;
}

.is-droppable-target > .paragraphs-dragdrop__item > .paragraphs-dragdrop__handle .paragraphs-dragdrop__icon {
  background-image: url(../icons/icon-drag-arrows.svg);
  background-size: 14px auto;
}

.paragraphs-dragdrop__label {
  display: block;
  line-height: inherit;
  white-space: nowrap;
}

.paragraphs-dragdrop__label--field {
  margin: 10px 0;
  text-transform: uppercase;
}

.paragraphs-dragdrop__item .paragraphs-dragdrop__label--field {
  margin-left: calc(var(--dnd-item-indentation) + 0.5ch);
}

[dir="rtl"] .paragraphs-dragdrop__item .paragraphs-dragdrop__label--field {
  margin-right: calc(var(--dnd-item-indentation) + 0.5ch);
  margin-left: 0;
}

.paragraphs-dragdrop__label--bundle {
  height: 1.538em;
  padding: 0 0.5em;
  line-height: 1.538em;
}

File

paragraphs/css/paragraphs.dragdrop.css
View source
  1. .paragraphs-dragdrop-wrapper {

  2.   --dnd-item-chosen-bg: #fff;

  3.   --dnd-item-chosen-border: #000;

  4.   --dnd-item-ghost-bg: #d9edf7;

  5.   --dnd-item-ghost-border: #0074bd;

  6.   --dnd-icon-size: 28px;

  7.   --dnd-item-indentation: 0.5em;

  8.   --dnd-item-min-height: 30px;

  9. }

  10. 

  11. @media all and (min-width: 780px) {

  12.   .paragraphs-dragdrop-wrapper {

  13.     --dnd-icon-size: 35px;

  14.     --dnd-item-indentation: 1em;

  15.     --dnd-item-min-height: 40px;

  16.   }

  17. }

  18. 

  19. .field-dragdrop-mode-submit {

  20.   margin-right: 10px;

  21. }

  22. 

  23. [dir="rtl"] .field-dragdrop-mode-submit {

  24.   margin-right: 0;

  25.   margin-left: 10px;

  26. }

  27. 

  28. .paragraphs-dragdrop-wrapper {

  29.   position: relative;

  30.   margin: 0;

  31.   padding: 0;

  32. }

  33. 

  34. .paragraphs-dragdrop__list {

  35.   margin: 0;

  36.   padding: 0;

  37.   list-style: none;

  38. }

  39. 

  40. [dir="rtl"] .paragraphs-dragdrop__list {

  41.   margin: 0;

  42. }

  43. 

  44. .paragraphs-dragdrop__list:empty {

  45.   min-height: var(--dnd-item-min-height);

  46.   margin: 5px 5px 10px 0;

  47.   border: 1px dashed #999999;

  48.   border-radius: 3px;

  49. }

  50. 

  51. [dir="rtl"] .paragraphs-dragdrop__list:empty {

  52.   margin-right: 5px;

  53.   margin-left: 0;

  54. }

  55. 

  56. .paragraphs-dragdrop__list .paragraphs-dragdrop__list:empty {

  57.   margin-left: var(--dnd-item-indentation);

  58. }

  59. 

  60. [dir="rtl"] .paragraphs-dragdrop__list .paragraphs-dragdrop__list:empty {

  61.   margin-right: var(--dnd-item-indentation);

  62.   margin-left: 0;

  63. }

  64. 

  65. .paragraphs-dragdrop__item {

  66.   display: -webkit-box;

  67.   display: -webkit-flex;

  68.   display: -ms-flexbox;

  69.   display: flex;

  70.   position: relative;

  71.   -webkit-box-flex: 0;

  72.   -webkit-flex: 0 0 100%;

  73.       -ms-flex: 0 0 100%;

  74.           flex: 0 0 100%;

  75.   -webkit-box-orient: horizontal;

  76.   -webkit-box-direction: normal;

  77.   -webkit-flex-flow: row wrap;

  78.       -ms-flex-flow: row wrap;

  79.           flex-flow: row wrap;

  80.   -webkit-box-align: center;

  81.   -webkit-align-items: center;

  82.       -ms-flex-align: center;

  83.           align-items: center;

  84.   min-height: var(--dnd-item-min-height);

  85.   margin: 5px 5px 10px 0;

  86.   padding: 0 0 0 var(--dnd-icon-size);

  87.   -webkit-transition: max-height 0.8s ease;

  88.   transition: max-height 0.8s ease;

  89.   border: 1px solid #999999;

  90.   border-left-width: 10px;

  91.   border-radius: 3px;

  92.   background: #fff;

  93.   overflow: hidden;

  94. }

  95. 

  96. [dir="rtl"] .paragraphs-dragdrop__item {

  97.   margin-right: 0;

  98.   margin-left: 5px;

  99.   padding-right: var(--dnd-icon-size);

  100.   padding-left: 0;

  101.   border-right-width: 10px;

  102.   border-left-width: 1px;

  103. }

  104. 

  105. .paragraphs-dragdrop__item .paragraphs-dragdrop__item {

  106.   margin-left: var(--dnd-item-indentation);

  107. }

  108. 

  109. [dir="rtl"] .paragraphs-dragdrop__item .paragraphs-dragdrop__item {

  110.   margin-right: var(--dnd-item-indentation);

  111.   margin-left: 5px;

  112. }

  113. 

  114. .paragraphs-dragdrop__item.sortable-chosen {

  115.   border-color: var(--dnd-item-chosen-border);

  116. }

  117. 

  118. .paragraphs-dragdrop__item.sortable-drag {

  119.   height: var(--dnd-item-min-height);

  120.   background: #fff;

  121.   opacity: 1;

  122. }

  123. 

  124. .paragraphs-dragdrop__item.sortable-ghost {

  125.   min-height: 0;

  126.   max-height: var(--dnd-item-min-height);

  127.   border-style: dashed;

  128.   border-left-style: solid;

  129.   border-color: var(--dnd-item-ghost-border);

  130.   background-color: var(--dnd-item-ghost-bg);

  131.   opacity: 1;

  132. }

  133. 

  134. [dir="rtl"] .paragraphs-dragdrop__item.sortable-ghost {

  135.   border-right-style: solid;

  136.   border-left-style: dashed;

  137. }

  138. 

  139. .paragraphs-dragdrop__item.sortable-ghost > * {

  140.   opacity: 0;

  141. }

  142. 

  143. .paragraphs-dragdrop__item > * {

  144.   -webkit-transition: opacity 0.5s ease;

  145.   transition: opacity 0.5s ease;

  146. }

  147. 

  148. .is-dragging-paragraphs .paragraphs-dragdrop__list:not(.is-droppable-target) > .paragraphs-dragdrop__item {

  149.   border-color: #ededed;

  150. }

  151. 

  152. .is-dragging-paragraphs .paragraphs-dragdrop__list:not(.is-droppable-target) > .paragraphs-dragdrop__item.sortable-ghost {

  153.   border-color: var(--dnd-item-ghost-border);

  154. }

  155. 

  156. .paragraphs-dragdrop__item .paragraphs-summary-wrapper,

  157. .paragraphs-dragdrop__item .paragraphs-dragdrop-wrapper {

  158.   -webkit-box-flex: 1;

  159.   -webkit-flex: 1 0 calc(100% - var(--dnd-icon-size));

  160.       -ms-flex: 1 0 calc(100% - var(--dnd-icon-size));

  161.           flex: 1 0 calc(100% - var(--dnd-icon-size));

  162.   width: calc(100% - var(--dnd-icon-size));

  163. }

  164. 

  165. .paragraphs-dragdrop__item .paragraphs-summary-wrapper {

  166.   display: -webkit-box;

  167.   display: -webkit-flex;

  168.   display: -ms-flexbox;

  169.   display: flex;

  170.   -webkit-box-align: center;

  171.   -webkit-align-items: center;

  172.       -ms-flex-align: center;

  173.           align-items: center;

  174.   height: 1.538em;

  175.   margin: 5px 0;

  176.   line-height: 1.538em;

  177. }

  178. 

  179. .paragraphs-dragdrop__handle {

  180.   display: -webkit-box;

  181.   display: -webkit-flex;

  182.   display: -ms-flexbox;

  183.   display: flex;

  184.   position: absolute;

  185.   top: 0;

  186.   bottom: 0;

  187.   left: 0;

  188.   -webkit-box-flex: 0;

  189.   -webkit-flex: 0 0 var(--dnd-icon-size);

  190.       -ms-flex: 0 0 var(--dnd-icon-size);

  191.           flex: 0 0 var(--dnd-icon-size);

  192.   -webkit-align-self: stretch;

  193.       -ms-flex-item-align: stretch;

  194.           align-self: stretch;

  195.   -webkit-box-pack: center;

  196.   -webkit-justify-content: center;

  197.       -ms-flex-pack: center;

  198.           justify-content: center;

  199.   width: var(--dnd-icon-size);

  200.   height: 100%;

  201.   background: transparent;

  202.   text-decoration: none;

  203.   cursor: move;

  204. }

  205. 

  206. [dir="rtl"] .paragraphs-dragdrop__handle {

  207.   right: 0;

  208.   left: auto;

  209.   -webkit-align-self: flex-end;

  210.       -ms-flex-item-align: end;

  211.           align-self: flex-end;

  212. }

  213. 

  214. .sortable-chosen > .paragraphs-dragdrop__handle {

  215.   background-color: #f8f8f8;

  216.   cursor: -webkit-grab;

  217.   cursor: grab;

  218. }

  219. 

  220. .sortable-chosen .paragraphs-dragdrop__item .paragraphs-dragdrop__handle {

  221.   background-color: transparent;

  222. }

  223. 

  224. .paragraphs-dragdrop__icon {

  225.   display: block;

  226.   position: relative;

  227.   width: 100%;

  228.   height: calc(var(--dnd-icon-size) + 2px);

  229.   background: transparent url(../icons/icon-drag-move.svg) no-repeat 50% 50%;

  230. }

  231. 

  232. .is-droppable-target > .paragraphs-dragdrop__item > .paragraphs-dragdrop__handle .paragraphs-dragdrop__icon {

  233.   background-image: url(../icons/icon-drag-arrows.svg);

  234.   background-size: 14px auto;

  235. }

  236. 

  237. .paragraphs-dragdrop__label {

  238.   display: block;

  239.   line-height: inherit;

  240.   white-space: nowrap;

  241. }

  242. 

  243. .paragraphs-dragdrop__label--field {

  244.   margin: 10px 0;

  245.   text-transform: uppercase;

  246. }

  247. 

  248. .paragraphs-dragdrop__item .paragraphs-dragdrop__label--field {

  249.   margin-left: calc(var(--dnd-item-indentation) + 0.5ch);

  250. }

  251. 

  252. [dir="rtl"] .paragraphs-dragdrop__item .paragraphs-dragdrop__label--field {

  253.   margin-right: calc(var(--dnd-item-indentation) + 0.5ch);

  254.   margin-left: 0;

  255. }

  256. 

  257. .paragraphs-dragdrop__label--bundle {

  258.   height: 1.538em;

  259.   padding: 0 0.5em;

  260.   line-height: 1.538em;

  261. }