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

   1 .flexibleButtonGroup {
   2         display: flex;
   3         flex-wrap: wrap;
   4
   5         > li {
   6                 display: flex;
   7                 flex: 0 0 auto;
   8
   9                 &:not(:last-child) {
  10                         margin-right: 5px;
  11
  12                         &.spaceAfter {
  13                                 margin-right: 20px;
  14                         }
  15                 }
  16
  17                 > input[type="radio"] {
  18                         left: -3000px;
  19                         opacity: 0;
  20                         position: absolute;
  21
  22                         &:checked + label {
  23                                 cursor: default;
  24
  25                                 > .icon {
  26                                         cursor: default !important;
  27                                 }
  28                         }
  29
  30                         &:focus + label {
  31                                 border-color: rgba(0, 0, 0, .3);
  32                         }
  33                 }
  34
  35                 > a,
  36                 > label {
  37                         background-color: rgb(207, 216, 220);
  38                         border: 1px solid transparent;
  39                         color: rgb(33, 33, 33);
  40                         cursor: pointer;
  41                         padding: 5px 10px;
  42
  43                         > .icon {
  44                                 color: inherit;
  45                         }
  46
  47                         > .icon {
  48                                 color: inherit !important;
  49                                 cursor: pointer !important;
  50                         }
  51                 }
  52
  53                 > a.active,
  54                 > input[type="radio"]:checked + label,
  55                 > input[type="radio"] + label:hover {
  56                         color: #fff;
  57
  58                         &.green {
  59                                 background-color: rgb(46, 125, 50);
  60                         }
  61
  62                         &.red {
  63                                 background-color: rgb(198, 40, 40);
  64                         }
  65
  66                         &.yellow {
  67                                 background-color: rgb(251, 140, 0);
  68                                 color: #000;
  69                         }
  70                 }
  71         }
  72 }
  73
  74 .disabled .flexibleButtonGroup > li > input[type="radio"]:checked + label,
  75 .flexibleButtonGroup > li > input[type="radio"]:disabled + label {
  76         background-color: rgb(242, 242, 242) !important;
  77         color: rgb(125, 130, 100) !important;
  78         cursor: default;
  79
  80         > .icon {
  81                 color: rgb(125, 130, 100) !important;
  82                 cursor: default !important;
  83         }
  84 }