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 peertube-button-file ($width) {
90 display: inline-block;
93 @include peertube-button;
94 @include orange-button;
104 filter: alpha(opacity=0);
113 @mixin icon ($size) {
114 display: inline-block;
115 background-repeat: no-repeat;
116 background-size: contain;
119 vertical-align: middle;
123 @mixin peertube-select-container ($width) {
126 border: 1px solid #C6C6C6;
136 right: calc(0% + 15px);
141 pointer-events: none;
142 border: 5px solid rgba(0, 0, 0, 0);
143 border-top-color: #000000;
149 padding: 0 35px 0 12px;
150 width: calc(100% + 2px);
155 background: transparent none;
158 height: $button-height;
159 text-overflow: ellipsis;
167 text-shadow: 0 0 0 #000;
172 @mixin peertube-select-disabled-container ($width) {
173 @include peertube-select-container($width);
175 background-color: #E5E5E5;
182 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
183 @mixin peertube-radio-container {
184 input[type="radio"] {
188 font-weight: $font-regular;
197 border: 1px solid #000;
198 display: inline-block;
201 vertical-align: middle;
208 &:checked + label:before {
209 background-color: #000;
210 box-shadow: inset 0 0 0 4px #fff;
213 &:focus + label:before {
220 @mixin peertube-checkbox ($border-width) {
227 border: $border-width solid #000;
229 vertical-align: middle;
235 top: calc(2px - #{$border-width});
240 transform: rotate(45deg) scale(0);
241 border-right: 2px solid #fff;
242 border-bottom: 2px solid #fff;
247 border-color: transparent;
248 background: $orange-color;
249 animation: jelly 0.6s ease;
253 transform: rotate(45deg) scale(1);
259 font-weight: $font-regular;
267 @mixin avatar ($size) {