3 @mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
10 @mixin disable-outline {
19 @mixin peertube-input-text($width) {
20 display: inline-block;
21 height: $button-height;
24 border: 1px solid #C6C6C6;
34 @mixin peertube-textarea ($width, $height) {
35 @include peertube-input-text($width);
42 @mixin orange-button {
43 &, &:active, &:focus {
45 background-color: $orange-color;
50 background-color: $orange-hoover-color;
53 &[disabled], &.disabled {
56 background-color: #C6C6C6;
61 &, &:active, &:focus {
62 background-color: $grey-color;
66 &:hover, &:active, &:focus, &[disabled], &.disabled {
68 background-color: $grey-hoover-color;
71 &[disabled], &.disabled {
76 @mixin peertube-button {
78 font-weight: $font-semibold;
80 height: $button-height;
81 line-height: $button-height;
84 padding: 0 17px 0 13px;
89 @mixin peertube-button-link {
90 display: inline-block;
92 @include disable-default-a-behaviour;
93 @include peertube-button;
96 @mixin peertube-button-file ($width) {
99 display: inline-block;
102 @include peertube-button;
103 @include orange-button;
113 filter: alpha(opacity=0);
122 @mixin icon ($size) {
123 display: inline-block;
124 background-repeat: no-repeat;
125 background-size: contain;
128 vertical-align: middle;
132 @mixin peertube-select-container ($width) {
135 border: 1px solid #C6C6C6;
145 right: calc(0% + 15px);
150 pointer-events: none;
151 border: 5px solid rgba(0, 0, 0, 0);
152 border-top-color: #000000;
158 padding: 0 35px 0 12px;
159 width: calc(100% + 2px);
164 background: transparent none;
167 height: $button-height;
168 text-overflow: ellipsis;
176 text-shadow: 0 0 0 #000;
181 @mixin peertube-select-disabled-container ($width) {
182 @include peertube-select-container($width);
184 background-color: #E5E5E5;
191 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
192 @mixin peertube-radio-container {
193 input[type="radio"] {
197 font-weight: $font-regular;
206 border: 1px solid #000;
207 display: inline-block;
210 vertical-align: middle;
217 &:checked + label:before {
218 background-color: #000;
219 box-shadow: inset 0 0 0 4px #fff;
222 &:focus + label:before {
229 @mixin peertube-checkbox ($border-width) {
236 border: $border-width solid #000;
238 vertical-align: middle;
244 top: calc(2px - #{$border-width});
249 transform: rotate(45deg) scale(0);
250 border-right: 2px solid #fff;
251 border-bottom: 2px solid #fff;
256 border-color: transparent;
257 background: $orange-color;
258 animation: jelly 0.6s ease;
262 transform: rotate(45deg) scale(1);
268 font-weight: $font-regular;
276 @mixin avatar ($size) {