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

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