diff options
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 4a709404d..a07bd5d28 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -148,3 +148,49 @@ | |||
148 | cursor: default; | 148 | cursor: default; |
149 | } | 149 | } |
150 | } | 150 | } |
151 | |||
152 | @mixin peertube-checkbox ($border-width) { | ||
153 | display: none; | ||
154 | |||
155 | & + label { | ||
156 | position: relative; | ||
157 | width: 18px; | ||
158 | height: 18px; | ||
159 | border: $border-width solid #000; | ||
160 | border-radius: 3px; | ||
161 | vertical-align: middle; | ||
162 | cursor: pointer; | ||
163 | |||
164 | &:after { | ||
165 | content: ''; | ||
166 | position: absolute; | ||
167 | top: calc(2px - #{$border-width}); | ||
168 | left: 5px; | ||
169 | width: 5px; | ||
170 | height: 12px; | ||
171 | opacity: 0; | ||
172 | transform: rotate(45deg) scale(0); | ||
173 | border-right: 2px solid #fff; | ||
174 | border-bottom: 2px solid #fff; | ||
175 | } | ||
176 | } | ||
177 | |||
178 | &:checked + label { | ||
179 | border-color: transparent; | ||
180 | background: $orange-color; | ||
181 | animation: jelly 0.6s ease; | ||
182 | |||
183 | &:after { | ||
184 | opacity: 1; | ||
185 | transform: rotate(45deg) scale(1); | ||
186 | } | ||
187 | } | ||
188 | |||
189 | & + label + label { | ||
190 | font-size: 15px; | ||
191 | font-weight: $font-regular; | ||
192 | margin-left: 5px; | ||
193 | cursor: pointer; | ||
194 | } | ||
195 | } | ||
196 | |||