client/src/sass/include/_mixins.scss

   1 @import '_variables';
   2
   3 @mixin disable-default-a-behaviour {
   4   &:hover, &:focus, &:active {
   5     text-decoration: none !important;
   6     outline: none !important;
   7   }
   8 }
   9
  10 @mixin disable-outline {
  11   outline: none;
  12
  13   &::-moz-focus-inner {
  14     border: 0;
  15     padding: 0
  16   }
  17 }
  18
  19 @mixin peertube-word-wrap {
  20   word-break: normal;
  21   word-wrap: break-word;
  22   overflow-wrap: break-word;
  23   -webkit-hyphens: auto;
  24   -ms-hyphens: auto;
  25   -moz-hyphens: auto;
  26   hyphens: auto;
  27   text-align: justify;
  28 }
  29
  30 @mixin peertube-input-text($width) {
  31   display: inline-block;
  32   height: $button-height;
  33   width: $width;
  34   background: #fff;
  35   border: 1px solid #C6C6C6;
  36   border-radius: 3px;
  37   padding-left: 15px;
  38   padding-right: 15px;
  39 }
  40
  41 @mixin peertube-input-group($width) {
  42   width: $width;
  43   height: $button-height;
  44   padding-top: 0;
  45   padding-bottom: 0;
  46
  47   .input-group-text{
  48     font-size: 14px;
  49   }
  50 }
  51
  52 @mixin peertube-textarea ($width, $height) {
  53   @include peertube-input-text($width);
  54
  55   height: $height;
  56   padding: 5px 15px;
  57   font-size: 15px;
  58 }
  59
  60 @mixin orange-button {
  61   &, &:active, &:focus {
  62     color: #fff;
  63     background-color: $orange-color;
  64   }
  65
  66   &:hover {
  67     color: #fff;
  68     background-color: $orange-hoover-color;
  69   }
  70
  71   &[disabled], &.disabled {
  72     cursor: default;
  73     color: #fff;
  74     background-color: #C6C6C6;
  75   }
  76 }
  77
  78 @mixin grey-button {
  79   &, &:active, &:focus {
  80     background-color: $grey-color;
  81     color: #585858;
  82   }
  83
  84   &:hover, &:active, &:focus, &[disabled], &.disabled {
  85     color: #585858;
  86     background-color: $grey-hoover-color;
  87   }
  88
  89   &[disabled], &.disabled {
  90     cursor: default;
  91   }
  92 }
  93
  94 @mixin peertube-button {
  95   border: none;
  96   font-weight: $font-semibold;
  97   font-size: 15px;
  98   height: $button-height;
  99   line-height: $button-height;
 100   border-radius: 3px;
 101   text-align: center;
 102   padding: 0 17px 0 13px;
 103   cursor: pointer;
 104   outline: 0;
 105 }
 106
 107 @mixin peertube-button-link {
 108   display: inline-block;
 109
 110   @include disable-default-a-behaviour;
 111   @include peertube-button;
 112 }
 113
 114 @mixin peertube-button-file ($width) {
 115   position: relative;
 116   overflow: hidden;
 117   display: inline-block;
 118   width: $width;
 119
 120   @include peertube-button;
 121   @include orange-button;
 122
 123   input[type=file] {
 124     position: absolute;
 125     top: 0;
 126     right: 0;
 127     min-width: 100%;
 128     min-height: 100%;
 129     font-size: 100px;
 130     text-align: right;
 131     filter: alpha(opacity=0);
 132     opacity: 0;
 133     outline: none;
 134     background: white;
 135     cursor: inherit;
 136     display: block;
 137   }
 138 }
 139
 140 @mixin icon ($size) {
 141   display: inline-block;
 142   background-repeat: no-repeat;
 143   background-size: contain;
 144   width: $size;
 145   height: $size;
 146   vertical-align: middle;
 147   cursor: pointer;
 148 }
 149
 150 @mixin peertube-select-container ($width) {
 151   padding: 0;
 152   margin: 0;
 153   border: 1px solid #C6C6C6;
 154   width: $width;
 155   border-radius: 3px;
 156   overflow: hidden;
 157   background: #fff;
 158   position: relative;
 159   font-size: 15px;
 160
 161   &:after {
 162     top: 50%;
 163     right: calc(0% + 15px);
 164     content: " ";
 165     height: 0;
 166     width: 0;
 167     position: absolute;
 168     pointer-events: none;
 169     border: 5px solid rgba(0, 0, 0, 0);
 170     border-top-color: #000;
 171     margin-top: -2px;
 172     z-index: 100;
 173   }
 174
 175   select {
 176     padding: 0 35px 0 12px;
 177     width: calc(100% + 2px);
 178     position: relative;
 179     left: 1px;
 180     border: none;
 181     box-shadow: none;
 182     background: transparent none;
 183     appearance: none;
 184     cursor: pointer;
 185     height: $button-height;
 186     text-overflow: ellipsis;
 187
 188     &:focus {
 189       outline: none;
 190     }
 191
 192     &:-moz-focusring {
 193       color: transparent;
 194       text-shadow: 0 0 0 #000;
 195     }
 196   }
 197 }
 198
 199 @mixin peertube-select-disabled-container ($width) {
 200   @include peertube-select-container($width);
 201
 202   background-color: #E5E5E5;
 203
 204   select {
 205     cursor: default;
 206   }
 207 }
 208
 209 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 210 @mixin peertube-radio-container {
 211   input[type="radio"] {
 212     display: none;
 213
 214     & + label {
 215       font-weight: $font-regular;
 216       cursor: pointer;
 217
 218       &:before {
 219         position: relative;
 220         top: -2px;
 221         content: '';
 222         background: #fff;
 223         border-radius: 100%;
 224         border: 1px solid #000;
 225         display: inline-block;
 226         width: 15px;
 227         height: 15px;
 228         vertical-align: middle;
 229         cursor: pointer;
 230         text-align: center;
 231         margin-right: 10px;
 232       }
 233     }
 234
 235     &:checked + label:before {
 236       background-color: #000;
 237       box-shadow: inset 0 0 0 4px #fff;
 238     }
 239
 240     &:focus + label:before {
 241       outline: none;
 242       border-color: #000;
 243     }
 244   }
 245 }
 246
 247 @mixin peertube-checkbox ($border-width) {
 248   display: none;
 249
 250   & + span {
 251     position: relative;
 252     width: 18px;
 253     height: 18px;
 254     border: $border-width solid #000;
 255     border-radius: 3px;
 256     vertical-align: middle;
 257     cursor: pointer;
 258
 259     &:after {
 260       content: '';
 261       position: absolute;
 262       top: calc(2px - #{$border-width});
 263       left: 5px;
 264       width: 5px;
 265       height: 12px;
 266       opacity: 0;
 267       transform: rotate(45deg) scale(0);
 268       border-right: 2px solid #fff;
 269       border-bottom: 2px solid #fff;
 270     }
 271   }
 272
 273   &:checked + span {
 274     border-color: transparent;
 275     background: $orange-color;
 276     animation: jelly 0.6s ease;
 277
 278     &:after {
 279       opacity: 1;
 280       transform: rotate(45deg) scale(1);
 281     }
 282   }
 283
 284   & + span + span {
 285     font-size: 15px;
 286     font-weight: $font-regular;
 287     margin-left: 5px;
 288     cursor: pointer;
 289     display: inline;
 290   }
 291
 292   &[disabled] + span,
 293   &[disabled] + span + span{
 294     opacity: 0.5;
 295     cursor: default;
 296   }
 297 }
 298
 299
 300 @mixin avatar ($size) {
 301   object-fit: cover;
 302   border-radius: 50%;
 303   width: $size;
 304   height: $size;
 305 }
 306
 307 @mixin chevron ($size, $border-width) {
 308   border-style: solid;
 309   border-width: $border-width $border-width 0 0;
 310   content: '';
 311   display: inline-block;
 312   transform: rotate(-45deg);
 313   height: $size;
 314   width: $size;
 315 }
 316
 317 @mixin chevron-right ($size, $border-width) {
 318   @include chevron($size, $border-width);
 319
 320   left: 0;
 321   transform: rotate(45deg);
 322 }
 323
 324 @mixin chevron-left ($size, $border-width) {
 325   @include chevron($size, $border-width);
 326
 327   left: 0.25em;
 328   transform: rotate(-135deg);
 329 }
 330
 331 @mixin in-content-small-title {
 332   text-transform: uppercase;
 333   color: $orange-color;
 334   font-weight: $font-bold;
 335   font-size: 13px;
 336 }
 337
 338 @mixin sub-menu-with-actor {
 339   height: 160px;
 340   display: flex;
 341   flex-direction: column;
 342   align-items: start;
 343
 344   .actor {
 345     display: flex;
 346     margin-top: 20px;
 347     margin-bottom: 20px;
 348
 349     img {
 350       @include avatar(80px);
 351
 352       margin-right: 20px;
 353     }
 354
 355     .actor-info {
 356       display: flex;
 357       flex-direction: column;
 358       justify-content: center;
 359
 360       .actor-names {
 361         display: flex;
 362         align-items: center;
 363
 364         .actor-display-name {
 365           font-size: 23px;
 366           font-weight: $font-bold;
 367         }
 368
 369         .actor-name {
 370           margin-left: 7px;
 371           position: relative;
 372           top: 3px;
 373           font-size: 14px;
 374           color: #777272;
 375         }
 376       }
 377
 378       .actor-followers {
 379         font-size: 15px;
 380       }
 381
 382       .actor-owner {
 383         @include disable-default-a-behaviour;
 384
 385         display: block;
 386         font-size: 13px;
 387         margin-top: 4px;
 388         color: #000;
 389
 390         span:hover {
 391           opacity: 0.8;
 392         }
 393
 394         img {
 395           @include avatar(18px);
 396
 397           margin-left: 7px;
 398           position: relative;
 399           top: -2px;
 400         }
 401       }
 402     }
 403   }
 404
 405   .links {
 406     margin-top: 0;
 407     margin-bottom: 10px;
 408
 409     a {
 410       margin-top: 0;
 411       margin-bottom: 0;
 412     }
 413   }
 414 }
 415
 416 @mixin create-button ($imageUrl) {
 417   @include peertube-button-link;
 418   @include orange-button;
 419
 420   .icon.icon-add {
 421     @include icon(20px);
 422
 423     position: relative;
 424     top: -1px;
 425     margin-right: 5px;
 426     background-image: url($imageUrl);
 427   }
 428 }