wcfsetup/install/files/style/element/dl.scss

   1 dl {
   2         &:not(.plain) {
   3                 display: block;
   4
   5                 &:not(:first-child) {
   6                         margin-top: 20px;
   7                 }
   8
   9                 > dt {
  10                         color: $wcfInputLabel;
  11
  12                         display: block;
  13
  14                         &:not(:empty) {
  15                                 margin-bottom: 5px;
  16                         }
  17                 }
  18
  19                 > dd {
  20                         display: block;
  21
  22                         &:not(:last-child) {
  23                                 margin-bottom: 20px;
  24                         }
  25
  26                         > small:not(.innerError) {
  27                                 color: $wcfContentDimmedText;
  28                                 display: block;
  29                                 margin-top: 3px;
  30                         }
  31
  32                         > label {
  33                                 display: block;
  34
  35                                 /* indentation for checkbox descriptions */
  36                                 + small:not(.innerError) {
  37                                         margin-left: 24px;
  38                                 }
  39                         }
  40
  41                         > label:not(:first-child) {
  42                                 margin-top: 5px;
  43                         }
  44
  45                         &.floated {
  46                                 display: flex;
  47                                 flex-wrap: wrap;
  48
  49                                 > label {
  50                                         flex: 0 0 auto;
  51                                         margin: 0 10px 5px 0;
  52
  53                                         &:last-child {
  54                                                 margin-right: 0;
  55                                         }
  56                                 }
  57                         }
  58                 }
  59
  60                 &.wide > dt {
  61                         display: none;
  62                 }
  63         }
  64
  65         &.dataList {
  66                 overflow: hidden;
  67
  68                 @include clearfix;
  69
  70                 > dt {
  71                         clear: right;
  72                         color: $wcfContentDimmedText;
  73                         float: left;
  74                         margin-right: 4px;
  75                         text-align: left;
  76
  77                         &:after {
  78                                 content: ":";
  79                         }
  80                 }
  81
  82                 > dd {
  83                         float: right;
  84                         text-align: right;
  85
  86                         &:not(:last-child) {
  87                                 margin-bottom: 3px;
  88                         }
  89                 }
  90         }
  91
  92         &.inlineDataList {
  93                 > dt {
  94                         display: inline-block;
  95                         vertical-align: middle;
  96
  97                         &:after {
  98                                 content: ":";
  99                                 padding-left: 1px;
 100                         }
 101                 }
 102
 103                 > dd {
 104                         display: inline-block;
 105                         vertical-align: middle;
 106
 107                         &:not(:last-of-type):after {
 108                                 content: ",";
 109                                 padding-left: 1px;
 110                         }
 111                 }
 112         }
 113
 114         &.statsDataList {
 115                 align-items: center;
 116                 display: flex;
 117                 flex-direction: row-reverse;
 118                 flex-wrap: wrap;
 119
 120                 > dt {
 121                         color: $wcfContentDimmedText;
 122                         flex: 0 0 60%;
 123                         margin-left: 5px;
 124                         overflow: hidden;
 125                         text-align: left;
 126                         white-space: nowrap;
 127
 128                         @include wcfFontSmall;
 129                 }
 130
 131                 > dd {
 132                         flex: 0 0 auto;
 133                         width: calc(40% - 5px); /* IE work-around */
 134
 135                         overflow: hidden;
 136                         text-align: right;
 137                         text-overflow: ellipsis;
 138                         white-space: nowrap;
 139                 }
 140         }
 141 }
 142
 143 /* remove `margin-top` for `<dl>` inside grid */
 144 .row.rowColGap > dl {
 145         margin-top: 0;
 146 }