From f72c78b2f6f7c7fdf1c9582b55498f1a522fe1e1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 13 Jun 2022 11:42:23 +0200 Subject: Reorganize application.scss --- .../action-buttons/action-buttons.component.html | 2 +- .../action-buttons/action-buttons.component.scss | 3 + .../shared/shared-forms/input-text.component.ts | 1 - client/src/assets/images/feather/external-link.svg | 2 +- client/src/assets/images/feather/skip-back.svg | 2 +- client/src/assets/images/feather/skip-forward.svg | 2 +- client/src/sass/application.scss | 166 +--------------- client/src/sass/class-helpers.scss | 212 +++++++++++++++++++++ client/src/sass/classes.scss | 39 ---- 9 files changed, 220 insertions(+), 209 deletions(-) create mode 100644 client/src/sass/class-helpers.scss delete mode 100644 client/src/sass/classes.scss (limited to 'client/src') diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html index f23efca98..cf32e371a 100644 --- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html @@ -1,5 +1,5 @@
-
+
\ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/images/feather/skip-back.svg b/client/src/assets/images/feather/skip-back.svg index 672e94d5f..6b1876159 100644 --- a/client/src/assets/images/feather/skip-back.svg +++ b/client/src/assets/images/feather/skip-back.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/assets/images/feather/skip-forward.svg b/client/src/assets/images/feather/skip-forward.svg index f3fdac3ae..5673a2987 100644 --- a/client/src/assets/images/feather/skip-forward.svg +++ b/client/src/assets/images/feather/skip-forward.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2aa743cf1..58e77adac 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -6,7 +6,7 @@ @use '_fonts'; -@use './classes'; +@use './class-helpers'; @use './custom-markup'; @use './ng-select'; @@ -132,31 +132,6 @@ code { vertical-align: middle; } -.form-group { - margin-bottom: 1rem; -} - -.form-error, -.form-warning { - display: block; - margin-top: 5px; -} - -.form-error { - color: $red; -} - -.input-error, -my-input-text ::ng-deep input { - border-color: $red !important; -} - -.full-width { - width: 100%; - margin: 0 auto; - max-width: initial; -} - .main-col { @include margin-left($menu-width); @@ -210,62 +185,6 @@ my-input-text ::ng-deep input { } } -.title-page { - @include disable-default-a-behaviour; - @include margin-right(55px); - - opacity: 0.6; - color: pvar(--mainForegroundColor); - font-size: 16px; - display: inline-block; - font-weight: $font-semibold; - border-bottom: 2px solid transparent; - - &.title-page-single { - margin-top: 30px; - margin-bottom: 25px; - } - - &.active { - border-bottom-color: pvar(--mainColor); - } - - &.title-page-single { - font-size: 125%; - } - - &:hover, - &:active, - &:focus { - color: pvar(--mainForegroundColor); - } - - &.active, - &:hover, - &:active, - &:focus, - &.title-page-single { - opacity: 1; - outline: 0 hidden !important; - } - - @media screen and (max-width: $mobile-view) { - @include margin-left(15px); - } -} - -.title-page-about, -.title-page-settings { - white-space: nowrap; - font-size: 115%; -} - -.admin-sub-header { - display: flex; - align-items: center; - margin-bottom: 30px; -} - // In tables, don't have a hover different background table { my-edit-button, @@ -283,18 +202,6 @@ table { } } -.no-results { - height: 40vh; - max-height: 500px; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 16px; - font-weight: $font-semibold; -} - .dropdown-item { @include dropdown-with-icon-item; @@ -311,73 +218,6 @@ my-global-icon[iconName=external-link] { color: pvar(--inputPlaceholderColor); } -.chevron-down { - @include chevron-down(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-up { - @include chevron-up(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-right { - @include chevron-right(0.55rem, 0.15rem); - - margin: 0 8px; -} - -.chevron-left { - @include chevron-left(0.55rem, 0.15rem); - - margin: 0 8px; -} - -/* offsetTop for scrollToAnchor */ - -.anchor { - position: relative; - top: #{-($header-height + 20px)}; -} - -.offset-content { // if sub-menu fixed - .anchor { - top: #{-($header-height + $sub-menu-height + 20px)}; - } -} - -.form-group-description { - @extend .muted !optional; - - font-size: 90%; - margin-top: 10px; -} - -.callout { - padding: 1.25rem; - border: 1px solid #eee; - border-radius: .25rem; - position: relative; - - > label { - position: relative; - top: -5px; - left: -10px; - color: #6c757d !important; - } - - &:not(.callout-light) { - border-left-width: .25rem; - } - - &.callout-info { - border-color: pvar(--mainColorLightest); - border-left-color: pvar(--mainColor); - } -} - @media screen and (max-width: #{breakpoint(xxl)}) { .main-col { --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; @@ -434,10 +274,6 @@ my-global-icon[iconName=external-link] { padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; } - .admin-sub-header { - flex-direction: column; - } - my-markdown-textarea { .root { max-width: 100% !important; diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss new file mode 100644 index 000000000..45d45e0f8 --- /dev/null +++ b/client/src/sass/class-helpers.scss @@ -0,0 +1,212 @@ +@use '_variables' as *; +@use '_mixins' as *; +@use '_badges' as *; +@use '_icons' as *; + +.peertube-button { + @include peertube-button; +} + +.peertube-button-link { + @include peertube-button-link; +} + +.orange-button { + @include orange-button; +} + +.orange-button-inverted { + @include orange-button-inverted; +} + +.grey-button { + @include grey-button; +} + +.tertiary-button { + @include tertiary-button; +} + +.peertube-radio-container { + @include peertube-radio-container; +} + +// --------------------------------------------------------------------------- + +.muted { + color: pvar(--greyForegroundColor) !important; +} + +// --------------------------------------------------------------------------- + +.pt-badge { + @include peertube-badge; +} + +// --------------------------------------------------------------------------- + +.form-group { + margin-bottom: 1rem; +} + +.form-error, +.form-warning { + display: block; + margin-top: 5px; +} + +.form-error { + color: $red; +} + +.input-error { + border-color: $red !important; +} + +.form-group-description { + @extend .muted !optional; + + font-size: 90%; + margin-top: 10px; +} + +// --------------------------------------------------------------------------- + + +.title-page { + @include disable-default-a-behaviour; + @include margin-right(55px); + + opacity: 0.6; + color: pvar(--mainForegroundColor); + font-size: 16px; + display: inline-block; + font-weight: $font-semibold; + border-bottom: 2px solid transparent; + + &.title-page-single { + margin-top: 30px; + margin-bottom: 25px; + } + + &.active { + border-bottom-color: pvar(--mainColor); + } + + &.title-page-single { + font-size: 125%; + } + + &:hover, + &:active, + &:focus { + color: pvar(--mainForegroundColor); + } + + &.active, + &:hover, + &:active, + &:focus, + &.title-page-single { + opacity: 1; + outline: 0 hidden !important; + } + + @media screen and (max-width: $mobile-view) { + @include margin-left(15px); + } +} + +.title-page-about, +.title-page-settings { + white-space: nowrap; + font-size: 115%; +} + +.admin-sub-header { + display: flex; + align-items: center; + margin-bottom: 30px; + + @media screen and (max-width: $small-view) { + flex-direction: column; + } +} + +// --------------------------------------------------------------------------- + +.no-results { + height: 40vh; + max-height: 500px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: $font-semibold; +} + +// --------------------------------------------------------------------------- + +.chevron-down { + @include chevron-down(0.55rem, 0.15rem); + + margin: 0 8px; +} + +.chevron-up { + @include chevron-up(0.55rem, 0.15rem); + + margin: 0 8px; +} + +.chevron-right { + @include chevron-right(0.55rem, 0.15rem); + + margin: 0 8px; +} + +.chevron-left { + @include chevron-left(0.55rem, 0.15rem); + + margin: 0 8px; +} + +// --------------------------------------------------------------------------- + +.callout { + padding: 1.25rem; + border: 1px solid #eee; + border-radius: .25rem; + position: relative; + + > label { + position: relative; + top: -5px; + left: -10px; + color: #6c757d !important; + } + + &:not(.callout-light) { + border-left-width: .25rem; + } + + &.callout-info { + border-color: pvar(--mainColorLightest); + 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)}; + } +} diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss deleted file mode 100644 index 35bcfba4b..000000000 --- a/client/src/sass/classes.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '_variables' as *; -@use '_mixins' as *; -@use '_badges' as *; - -.peertube-button { - @include peertube-button; -} - -.peertube-button-link { - @include peertube-button-link; -} - -.orange-button { - @include orange-button; -} - -.orange-button-inverted { - @include orange-button-inverted; -} - -.grey-button { - @include grey-button; -} - -.tertiary-button { - @include tertiary-button; -} - -.peertube-radio-container { - @include peertube-radio-container; -} - -.muted { - color: pvar(--greyForegroundColor) !important; -} - -.pt-badge { - @include peertube-badge; -} -- cgit v1.2.3