www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/css/paragraphs.dragdrop.scss

   1 @import "variables";
   2
   3 .paragraphs-dragdrop {
   4   list-style-type: none;
   5   margin: 0;
   6   padding: 0;
   7   min-height: 50px;
   8
   9   &:empty {
  10      border: 1px dashed $grey-dark;
  11      margin-bottom: 10px;
  12    }
  13
  14   .paragraphs-dragdrop {
  15     margin-left: 10px;
  16     margin-right: 5px;
  17
  18     @media all and (min-width: 780px) {
  19       margin-left: 20px;
  20     }
  21   }
  22
  23   > li {
  24     min-height: 30px;
  25     margin: 10px 0;
  26     padding: 3px;
  27     border: 1px solid $grey-dark;
  28     border-left-width: 10px;
  29     transition: border .5s ease;
  30     -webkit-border-radius: 3px;
  31     -moz-border-radius: 3px;
  32     border-radius: 3px;
  33     cursor: move;
  34   }
  35
  36   .paragraphs-summary-wrapper {
  37     display: flex;
  38     padding: 5px;
  39   }
  40
  41   strong {
  42     white-space: nowrap;
  43   }
  44
  45   .paragraphs-dragdrop-wrapper {
  46     margin-left: 39px;
  47     margin-top: 20px;
  48   }
  49
  50   > li .paragraphs-summary-wrapper > div {
  51     flex-grow: 1;
  52     margin-left: 10px;
  53   }
  54
  55   .sortable-drag {
  56     opacity: 0;
  57   }
  58
  59   > .sortable-ghost,
  60   .sortable-chosen {
  61     opacity: 1;
  62     border-left-color: black;
  63   }
  64
  65   .tabledrag-handle {
  66     float: left;
  67     padding: 5px;
  68     align-self: flex-start;
  69
  70     [dir="rtl"] & {
  71       float: right;
  72     }
  73
  74     .touchevents & {
  75       padding: 0 0 0 5px;
  76       margin-top: -5px;
  77     }
  78   }
  79 }
  80
  81 .js .field--widget-paragraphs .paragraphs-dragdrop .field--widget-paragraphs {
  82   margin-left: 5px;
  83 }
  84
  85 .field-dragdrop-mode-submit {
  86   margin-right: 10px;
  87 }
  88
  89 .paragraphs-dragdrop-wrapper {
  90   padding-top: 10px;
  91 }