Commit | Line | Data |
---|---|---|
6da35219 AE |
1 | .notificationSettings { |
2 | margin-top: 30px; | |
3 | } | |
4 | ||
5 | .notificationSettingsCategory, | |
6 | .notificationSettingsItem { | |
7 | display: flex; | |
8 | } | |
9 | ||
10 | .notificationSettingsCategory { | |
11 | border-bottom: 2px solid currentColor; | |
12 | color: $wcfTabularBoxHeadline; | |
13 | font-weight: 600; | |
14 | padding: 5px 0; | |
15 | } | |
16 | ||
17 | .notificationSettingsItem { | |
18 | align-items: center; | |
19 | padding: 5px 0; | |
20 | } | |
21 | ||
22 | .notificationSettingsItem:not(:last-child) { | |
23 | border-bottom: 1px solid $wcfContentBorderInner; | |
24 | } | |
25 | ||
26 | .notificationSettingsEvent { | |
27 | flex: 1 auto; | |
8a52619a | 28 | |
6da35219 AE |
29 | > label { |
30 | cursor: pointer; | |
8cd03922 MW |
31 | display: block; |
32 | } | |
33 | } | |
34 | ||
35 | .notificationSettingsEvent:hover + .notificationSettingsState, | |
36 | .notificationSettingsState > label:hover { | |
8a52619a TD |
37 | .fa-bell, |
38 | .fa-bell-slash { | |
8cd03922 | 39 | transform: scale(1.2); |
6da35219 AE |
40 | } |
41 | } | |
42 | ||
43 | .notificationSettingsState { | |
44 | align-items: center; | |
45 | display: flex; | |
46 | flex: 0 0 34px; | |
47 | justify-content: center; | |
8a52619a | 48 | |
6da35219 AE |
49 | @include screen-sm-up { |
50 | margin: 0 20px; | |
51 | } | |
8a52619a | 52 | |
6da35219 AE |
53 | @include screen-xs { |
54 | margin: 0 10px; | |
55 | } | |
8a52619a | 56 | |
6da35219 AE |
57 | input[type="checkbox"] { |
58 | opacity: 0; | |
59 | position: absolute; | |
60 | z-index: -1; | |
8a52619a | 61 | |
6da35219 AE |
62 | &.focus-visible:focus ~ .icon { |
63 | transform: scale(1.2); | |
64 | } | |
8a52619a | 65 | |
6da35219 AE |
66 | &:not(:checked) + .fa-bell { |
67 | display: none; | |
68 | } | |
8a52619a | 69 | |
6da35219 AE |
70 | &:checked ~ .fa-bell-slash { |
71 | display: none; | |
72 | } | |
73 | } | |
74 | } | |
75 | ||
76 | .notificationSettingsEmail { | |
77 | align-items: center; | |
78 | display: flex; | |
79 | flex: 0 0 45px; | |
80 | justify-content: flex-end; | |
81 | } | |
82 | .notificationSettingsEmailType { | |
83 | align-items: center; | |
84 | display: flex; | |
8a52619a | 85 | |
8a723bf2 AE |
86 | &.disabled { |
87 | filter: grayscale(1); | |
8a52619a | 88 | opacity: 0.75; |
8a723bf2 | 89 | } |
6da35219 | 90 | } |