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

   1 .avatarEdit .avatarType {
   2         display: flex;
   3
   4         > dt {
   5                 flex: 0 0 auto;
   6                 order: 2;
   7         }
   8
   9         > dd {
  10                 order: 1;
  11         }
  12
  13         .avatarUploadButtonContainer {
  14                 margin-top: 10px;
  15         }
  16
  17         @include screen-md-up {
  18                 /* use fixed height to ensure a constant gap between <dl> with and without an image */
  19                 min-height: 100px;
  20
  21                 > dt:not(:empty) {
  22                         margin: 0 0 0 30px;
  23                 }
  24
  25                 > dd {
  26                         flex: 1 1 auto;
  27                 }
  28
  29                 & + .avatarType {
  30                         margin-top: 30px;
  31                 }
  32
  33                 .avatarUploadButtonContainer {
  34                         margin-left: 24px;
  35                 }
  36         }
  37
  38         @include screen-sm-down {
  39                 flex-wrap: wrap;
  40
  41                 > dt:not(:empty) {
  42                         flex: 0 0 100%;
  43                         margin-top: 20px;
  44                         text-align: center;
  45                 }
  46
  47                 > dd {
  48                         flex: 0 0 100%;
  49                 }
  50
  51                 .avatarUploadButtonContainer {
  52                         text-align: center;
  53                 }
  54         }
  55 }