wcfsetup/install/files/style/ui/listSortable.scss

   1 .sortableList:not(.tabularList) {
   2         list-style: decimal outside;
   3         margin-left: 20px;
   4
   5         .sortableList {
   6                 margin-left: 30px;
   7         }
   8 }
   9
  10 .sortableNode {
  11         cursor: move;
  12
  13         &:not(:last-child) {
  14                 border-bottom: 1px solid var(--wcfContentBorderInner);
  15         }
  16
  17         > .sortableList {
  18                 //padding-left: 20px;
  19
  20                 &:not(:empty) {
  21                         border-top: 1px solid var(--wcfContentBorderInner);
  22                 }
  23         }
  24 }
  25
  26 .sortableNodeLabel {
  27         align-items: center;
  28         padding: 10px;
  29
  30         /* `display:flex` acts weird inside lists with a visible list-style */
  31         display: inline-flex;
  32         width: 100%;
  33
  34         &:hover {
  35                 background-color: var(--wcfTabularBoxBackgroundActive);
  36         }
  37
  38         &:not(.sortableNodeStaticItem) {
  39                 cursor: move;
  40         }
  41
  42         > .icon,
  43         > a {
  44                 margin-right: 5px;
  45         }
  46
  47         > .icon {
  48                 flex: 0 0 auto;
  49         }
  50
  51         > a {
  52                 flex: 0 1 auto;
  53                 overflow: hidden;
  54                 text-overflow: ellipsis;
  55                 white-space: nowrap;
  56         }
  57
  58         > .statusDisplay {
  59                 align-items: center;
  60                 display: flex;
  61                 flex: 1 0 auto;
  62                 justify-content: flex-end;
  63
  64                 > a,
  65                 > button,
  66                 > span {
  67                         flex: 0 0 auto;
  68                         margin-left: 5px;
  69                 }
  70
  71                 fa-icon {
  72                         color: var(--wcfContentText);
  73                 }
  74         }
  75 }
  76
  77 .sortablePlaceholder {
  78         background-color: var(--wcfStatusWarningBackground);
  79         border: 1px solid var(--wcfStatusWarningBorder);
  80         color: var(--wcfStatusWarningText);
  81         padding: 10px;
  82
  83         &.sortableInvalidTarget {
  84                 background-color: var(--wcfStatusErrorBackground);
  85                 border-color: var(--wcfStatusErrorBorder);
  86                 color: var(--wcfStatusErrorText);
  87         }
  88 }
  89
  90 @include screen-xs {
  91         .sortableNodeHandle {
  92                 display: none;
  93         }
  94 }
  95 @include screen-lg {
  96         .sortableNodeHandle {
  97                 display: none;
  98         }
  99 }