From 27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 Mon Sep 17 00:00:00 2001 From: Wicklow Date: Thu, 16 Feb 2023 12:30:30 +0100 Subject: Refactoring class helpers + add bootstrap mixins --- client/src/sass/class-helpers/_common.scss | 123 +++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 client/src/sass/class-helpers/_common.scss (limited to 'client/src/sass/class-helpers/_common.scss') 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 -- cgit v1.2.3