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   > .callout-title {
  52     position: relative;
  53     top: -5px;
  54     left: -10px;
  55     color: #6c757d !important;
  56     font-size: 1rem;
  57     font-weight: $font-bold;
  58     margin-bottom: 0.5rem;
  59     line-height: inherit;
  60   }
  61
  62   &:not(.callout-light) {
  63     border-left-width: 0.25rem;
  64   }
  65
  66   &.callout-orange {
  67     border-color: pvar(--mainColorLightest);
  68
  69     &:not(.callout-light) {
  70       border-left-color: pvar(--mainColor);
  71     }
  72   }
  73 }
  74
  75 // ---------------------------------------------------------------------------
  76
  77 .anchor {
  78   position: relative;
  79   top: #{- ($header-height + 20px)};
  80 }
  81
  82 .offset-content {
  83
  84   // if sub-menu fixed
  85   .anchor {
  86     top: #{- ($header-height + $sub-menu-height + 20px)};
  87   }
  88 }
  89
  90 // ---------------------------------------------------------------------------
  91
  92 .alert {
  93   &.pt-alert-primary {
  94     background-color: pvar(--mainColorVeryLight);
  95     border: 2px solid pvar(--mainColorLightest);
  96   }
  97 }
  98
  99 // ---------------------------------------------------------------------------
 100
 101 .chip {
 102   @include chip;
 103 }