Refactoring class helpers + add bootstrap mixins

1 files changed, 123 insertions, 0 deletions

diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss
new file mode 100644
index 000000000..182c51c8f
--- /dev/null
+++ b/client/src/sass/class-helpers/_common.scss
@@ -0,0 +1,123 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_badges' as *;
+@use '_icons' as *;
+
+.link-orange {
+  color: pvar(--mainForegroundColor);
+  font-weight: $font-semibold;
+  border-bottom: 0.18em solid pvar(--mainColor);
+  display: inline-block;
+  line-height: 1.1;
+
+  &:hover {
+    color: pvar(--mainForegroundColor);
+    opacity: 0.8;
+  }
+}
+
+.underline-orange {
+  display: inline-block;
+  border-bottom: 0.19em solid pvar(--mainColor);
+}
+
+// ---------------------------------------------------------------------------
+
+.muted {
+  @include muted;
+}
+
+// ---------------------------------------------------------------------------
+
+.pt-badge {
+  @include peertube-badge;
+}
+
+// ---------------------------------------------------------------------------
+
+.no-results {
+  height: 40vh;
+  max-height: 500px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: $font-semibold;
+}
+
+// ---------------------------------------------------------------------------
+
+.chevron-down {
+  @include chevron-down-default;
+}
+
+.chevron-up {
+  @include chevron-up-default;
+}
+
+.chevron-right {
+  @include chevron-right-default;
+}
+
+.chevron-left {
+  @include chevron-left-default;
+}
+
+// ---------------------------------------------------------------------------
+
+.callout {
+  padding: 1.25rem;
+  border: 1px solid #eee;
+  border-radius: 0.25rem;
+  position: relative;
+
+  >label {
+    position: relative;
+    top: -5px;
+    left: -10px;
+    color: #6c757d !important;
+  }
+
+  &:not(.callout-light) {
+    border-left-width: 0.25rem;
+  }
+
+  &.callout-orange {
+    border-color: pvar(--mainColorLightest);
+
+    &:not(.callout-light) {
+      border-left-color: pvar(--mainColor);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+.anchor {
+  position: relative;
+  top: #{- ($header-height + 20px)};
+}
+
+.offset-content {
+
+  // if sub-menu fixed
+  .anchor {
+    top: #{- ($header-height + $sub-menu-height + 20px)};
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+.alert {
+  &.pt-alert-primary {
+    background-color: pvar(--mainColorVeryLight);
+    border: 2px solid pvar(--mainColorLightest);
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+.chip {
+  @include chip;
+}
\ No newline at end of file