Replace all glyphicon icons

[github/Chocobozzz/PeerTube.git] / client / src / sass / application.scss

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9f64f74268107b7325775ef0933dc23a48d0de70..2aa743cf1b718900dafefa582d8a24dfd7eace42 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,22 +1,20 @@
-$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-
 @use 'sass:math';
 
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 
 @use '_fonts';
 
 @use './classes';
-
 @use './custom-markup';
-
 @use './ng-select';
 
-// Needs an import because we extends glyphicon icons in primeng
 @import './bootstrap';
 @import './primeng-custom';
 
+@import './z-index';
+
 [hidden] {
   display: none !important;
 }
@@ -28,13 +26,16 @@ body {
   --mainColor: #{$main-color};
   --mainColorLighter: #{$main-color-lighter};
   --mainColorLightest: #{$main-color-lightest};
+
   --mainHoverColor: #{$main-hover-color};
+  --mainBackgroundHoverColor: #{$main-background-hover-color};
+
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
-  --secondaryColor: #{$secondary-color};
 
   --greyForegroundColor: #{$grey-foreground-color};
   --greyBackgroundColor: #{$grey-background-color};
+  --greySecondaryBackgroundColor: #{$grey-background-hover-color};
 
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
@@ -51,6 +52,7 @@ body {
   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
 
   --actionButtonColor: #{$grey-foreground-color};
+
   --supportButtonBackgroundColor: #{transparent};
   --supportButtonColor: #{pvar(--actionButtonColor)};
   --supportButtonHeartColor: #{$support-button-heart};
@@ -88,6 +90,10 @@ noscript,
   margin: 1rem auto;
 }
 
+a {
+  text-decoration: none;
+}
+
 strong {
   font-weight: $font-semibold;
 }
@@ -112,6 +118,7 @@ button {
 label {
   font-weight: $font-bold;
   font-size: 15px;
+  margin-bottom: 0.5rem;
 }
 
 code {
@@ -125,6 +132,10 @@ code {
   vertical-align: middle;
 }
 
+.form-group {
+  margin-bottom: 1rem;
+}
+
 .form-error,
 .form-warning {
   display: block;
@@ -136,7 +147,7 @@ code {
 }
 
 .input-error,
-my-input-toggle-hidden ::ng-deep input {
+my-input-text ::ng-deep input {
   border-color: $red !important;
 }
 
@@ -146,14 +157,6 @@ my-input-toggle-hidden ::ng-deep input {
   max-width: initial;
 }
 
-.glyphicon-black {
-  color: #000;
-}
-
-.row {
-  margin: 0 !important;
-}
-
 .main-col {
   @include margin-left($menu-width);
 
@@ -265,14 +268,17 @@ my-input-toggle-hidden ::ng-deep input {
 
 // In tables, don't have a hover different background
 table {
-  .action-button-edit,
-  .action-button-delete {
-    &:hover,
-    &:active,
-    &:focus,
-    &[disabled],
-    &.disabled {
-      background-color: $grey-background-color !important;
+  my-edit-button,
+  my-delete-button {
+    .action-button {
+      &:hover,
+      &:active,
+      &:focus,
+      &[disabled],
+      &.disabled {
+        background-color: pvar(--greyBackgroundColor) !important;
+        opacity: 0.8;
+      }
     }
   }
 }
@@ -298,6 +304,37 @@ table {
   }
 }
 
+my-global-icon[iconName=external-link] {
+  margin: 0 3px;
+  width: 13px;
+  vertical-align: text-bottom;
+  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 {
@@ -312,14 +349,33 @@ table {
 }
 
 .form-group-description {
-  @extend .text-muted;
+  @extend .muted !optional;
 
   font-size: 90%;
   margin-top: 10px;
 }
 
-ngx-loading-bar {
-  z-index: z(header) + 1 !important;
+.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)}) {
@@ -338,7 +394,7 @@ ngx-loading-bar {
     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
   }
 
-  /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
+  /* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
   .main-col,
   .main-col.expanded {
     --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};