3 @mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
10 @mixin peertube-input-text($width) {
11 display: inline-block;
12 height: $button-height;
15 border: 1px solid #C6C6C6;
25 @mixin peertube-textarea ($width, $height) {
26 @include peertube-input-text($width);
33 @mixin orange-button {
34 &, &:active, &:focus {
36 background-color: $orange-color;
41 background-color: $orange-hoover-color;
44 &[disabled], &.disabled {
47 background-color: #C6C6C6;
52 &, &:active, &:focus {
53 background-color: $grey-color;
57 &:hover, &:active, &:focus, &[disabled], &.disabled {
59 background-color: $grey-hoover-color;
62 &[disabled], &.disabled {
67 @mixin peertube-button {
69 font-weight: $font-semibold;
71 height: $button-height;
72 line-height: $button-height;
75 padding: 0 17px 0 13px;
80 @mixin peertube-button-link {
81 display: inline-block;
83 @include disable-default-a-behaviour;
84 @include peertube-button;
87 @mixin avatar ($size) {
93 display: inline-block;
94 background-repeat: no-repeat;
95 background-size: contain;
98 vertical-align: middle;
103 @mixin peertube-select-container ($width) {
106 border: 1px solid #C6C6C6;
116 right: calc(0% + 15px);
121 pointer-events: none;
122 border: 5px solid rgba(0, 0, 0, 0);
123 border-top-color: #000000;
130 width: calc(100% + 2px);
135 background: transparent none;
138 height: $button-height;
146 text-shadow: 0 0 0 #000;
151 @mixin peertube-select-disabled-container ($width) {
152 @include peertube-select-container($width);
154 background-color: #E5E5E5;
161 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
162 @mixin peertube-radio-container {
163 input[type="radio"] {
167 font-weight: $font-regular;
176 border: 1px solid #000;
177 display: inline-block;
180 vertical-align: middle;
187 &:checked + label:before {
188 background-color: #000;
189 box-shadow: inset 0 0 0 4px #fff;
192 &:focus + label:before {
199 @mixin peertube-checkbox ($border-width) {
206 border: $border-width solid #000;
208 vertical-align: middle;
214 top: calc(2px - #{$border-width});
219 transform: rotate(45deg) scale(0);
220 border-right: 2px solid #fff;
221 border-bottom: 2px solid #fff;
226 border-color: transparent;
227 background: $orange-color;
228 animation: jelly 0.6s ease;
232 transform: rotate(45deg) scale(1);
238 font-weight: $font-regular;