clockface/src/Components/RadioButton/RadioButton.scss at eeaf2e70b0a443dd799b1c623d2f90f078ab4c23 · influxdata/clockface · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@import "../../Styles/variables";

.cf-radio-button {
  input {
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 0;
    width: 0;
    height: 0;

    & + .cf-radio-button--label {
      color: $cf-label--default;

      .cf-radio-button--indicator {
        &::before {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 100%;
          background-color: $c-pool;
          content: "";
          border-radius: 50%;
          transform: scale(1);
          transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
          opacity: 0;
        }
      }
    }

    &:checked + .cf-radio-button--label {
      color: $cf-label--active;

      .cf-radio-button--indicator {
        &::before {
          opacity: 1;
          transform: scale(0.5);
        }
      }
    }
    &:focus + .cf-radio-button--label .cf-radio-button--indicator {
      background-color: $cf-input-background--focused;
      border-color: $cf-input-border--focused;
      box-shadow: $cf-input--box-shadow;
    }
  }
}

.cf-radio-button--label {
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  font-weight: $cf-font-weight--medium;
  &:hover > .cf-radio-button--indicator {
    background-color: $cf-input-background--hover;
    border-color: $cf-input-border--hover;
  }
}

.cf-radio-button--indicator {
  display: inline-block;
  border-radius: 50%;
  border-width: $cf-border;
  border-style: solid;
  margin: 0px;
  background-color: $cf-input-background--default;
  border-color: $cf-input-border--default;
}

/*
  Size Modifiers
  ------------------------------------------------------------------------------
*/
@mixin radioButtonSizeModifier($fontSize, $size, $labelGap) {
  height: $size;

  .cf-radio-button--indicator {
    height: $size;
    width: $size;
    margin-right: $labelGap;
  }

  .cf-radio-button--label {
    font-size: $fontSize;
  }
}

.cf-radio-button__xs {
  @include radioButtonSizeModifier($cf-form-xs-font, $cf-form-xs-height, $cf-form-xs-padding);
}
.cf-radio-button__sm {
  @include radioButtonSizeModifier($cf-form-sm-font, $cf-form-sm-height, $cf-form-sm-padding);
}
.cf-radio-button__md {
  @include radioButtonSizeModifier($cf-form-md-font, $cf-form-md-height, $cf-form-md-padding);
}
.cf-radio-button__lg {
  @include radioButtonSizeModifier($cf-form-lg-font, $cf-form-lg-height, $cf-form-lg-padding);
}