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