client/src/sass/class-helpers/_common.scss

   1 @use '_badges' as *;
   2 @use '_icons' as *;
   3 @use '_variables' as *;
   4 @use '_mixins' as *;
   5
   6 // ---------------------------------------------------------------------------
   7
   8 .pt-badge {
   9   @include peertube-badge;
  10 }
  11
  12 // ---------------------------------------------------------------------------
  13
  14 .no-results {
  15   height: 40vh;
  16   max-height: 500px;
  17
  18   display: flex;
  19   flex-direction: column;
  20   align-items: center;
  21   justify-content: center;
  22   font-weight: $font-semibold;
  23 }
  24
  25 // ---------------------------------------------------------------------------
  26
  27 .chevron-down {
  28   @include chevron-down-default;
  29 }
  30
  31 .chevron-up {
  32   @include chevron-up-default;
  33 }
  34
  35 .chevron-right {
  36   @include chevron-right-default;
  37 }
  38
  39 .chevron-left {
  40   @include chevron-left-default;
  41 }
  42
  43 // ---------------------------------------------------------------------------
  44
  45 .callout {
  46   padding: 1.25rem;
  47   border: 1px solid #eee;
  48   border-radius: 0.25rem;
  49   position: relative;
  50
  51   >label {
  52     position: relative;
  53     top: -5px;
  54     left: -10px;
  55     color: #6c757d !important;
  56   }
  57
  58   &:not(.callout-light) {
  59     border-left-width: 0.25rem;
  60   }
  61
  62   &.callout-orange {
  63     border-color: pvar(--mainColorLightest);
  64
  65     &:not(.callout-light) {
  66       border-left-color: pvar(--mainColor);
  67     }
  68   }
  69 }
  70
  71 // ---------------------------------------------------------------------------
  72
  73 .anchor {
  74   position: relative;
  75   top: #{- ($header-height + 20px)};
  76 }
  77
  78 .offset-content {
  79
  80   // if sub-menu fixed
  81   .anchor {
  82     top: #{- ($header-height + $sub-menu-height + 20px)};
  83   }
  84 }
  85
  86 // ---------------------------------------------------------------------------
  87
  88 .alert {
  89   &.pt-alert-primary {
  90     background-color: pvar(--mainColorVeryLight);
  91     border: 2px solid pvar(--mainColorLightest);
  92   }
  93 }
  94
  95 // ---------------------------------------------------------------------------
  96
  97 .chip {
  98   @include chip;
  99 }