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;
150 width: calc(100% + 2px);
155 background: transparent none;
158 height: $button-height;
166 text-shadow: 0 0 0 #000;
171 @mixin peertube-select-disabled-container ($width) {
172 @include peertube-select-container($width);
174 background-color: #E5E5E5;
181 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
182 @mixin peertube-radio-container {
183 input[type="radio"] {
187 font-weight: $font-regular;
196 border: 1px solid #000;
197 display: inline-block;
200 vertical-align: middle;
207 &:checked + label:before {
208 background-color: #000;
209 box-shadow: inset 0 0 0 4px #fff;
212 &:focus + label:before {
219 @mixin peertube-checkbox ($border-width) {
226 border: $border-width solid #000;
228 vertical-align: middle;
234 top: calc(2px - #{$border-width});
239 transform: rotate(45deg) scale(0);
240 border-right: 2px solid #fff;
241 border-bottom: 2px solid #fff;
246 border-color: transparent;
247 background: $orange-color;
248 animation: jelly 0.6s ease;
252 transform: rotate(45deg) scale(1);
258 font-weight: $font-regular;
265 @mixin avatar ($size) {