Use form-control to display box-shadow on form inputs/selects upon focus

4 files changed, 101 insertions, 8 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 089a58009..c8966d22b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -25,6 +25,7 @@ body {
   // for css custom properties #{$var}
   --mainColor: #{$main-color};
   --mainColorLighter: #{$main-color-lighter};
+  --mainColorLightest: #{$main-color-lightest};
   --mainHoverColor: #{$main-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
@@ -113,6 +114,7 @@ label {
 .main-col {
   margin-left: $menu-width;
   width: calc(100% - #{$menu-width});
+  outline: none;
 
   .margin-content {
     margin-left: $not-expanded-horizontal-margins;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 297f1f18a..f0357b579 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -230,3 +230,20 @@ ngb-tooltip-window {
     background-color: var(--secondaryColor);
   }
 }
+
+// input box-shadow on focus
+.form-control {
+  font-size: 15px;
+  color: var(--mainForegroundColor);
+  background-color: var(--inputBackgroundColor);
+  outline: none;
+
+  &:focus-within,
+  &:focus {
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+
+    &.input-error {
+      box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
+    }
+  }
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f96a43b34..76e3f3f97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -80,9 +80,10 @@
   }
 }
 
-@mixin button-focus-visible-shadow($color) {
+@mixin button-focus($color) {
+  &:focus,
   &.focus-visible {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+    box-shadow: 0 0 0 .2rem $color;
   }
 }
 
@@ -127,7 +128,7 @@
 }
 
 @mixin orange-button {
-  @include button-focus-visible-shadow(var(--mainHoverColor));
+  @include button-focus(var(--mainColorLightest));
 
   &, &:active, &:focus {
     color: #fff;
@@ -151,6 +152,8 @@
 }
 
 @mixin tertiary-button {
+  @include button-focus($grey-button-outline-color);
+
   color: $grey-foreground-color;
   background-color: transparent;
 
@@ -164,6 +167,8 @@
 }
 
 @mixin grey-button {
+  @include button-focus($grey-button-outline-color);
+
   &, &:active, &:focus {
     background-color: $grey-background-color;
     color: $grey-foreground-color;
@@ -274,10 +279,8 @@
 @mixin peertube-select-container ($width) {
   padding: 0;
   margin: 0;
-  border: 1px solid #C6C6C6;
   width: $width;
   border-radius: 3px;
-  overflow: hidden;
   background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
@@ -303,8 +306,7 @@
     width: calc(100% + 2px);
     position: relative;
     left: 1px;
-    border: none;
-    box-shadow: none;
+    border: 1px solid #C6C6C6;
     background: transparent none;
     appearance: none;
     cursor: pointer;
@@ -370,7 +372,7 @@
   position: absolute;
 
   &:focus + span {
-    box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
   }
 
   & + span {
@@ -703,3 +705,72 @@
     text-align: center;
   }
 }
+
+@mixin ng2-tags {
+  ::ng-deep {
+    .ng2-tag-input {
+      border: none !important;
+    }
+
+    .ng2-tags-container {
+      display: flex;
+      align-items: center;
+      border: 1px solid #C6C6C6;
+      border-radius: 3px;
+      padding: 5px !important;
+      height: max-content;
+
+      &:focus-within {
+        box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+      }
+    }
+
+    tag-input-form {
+      input {
+        height: 30px !important;
+        font-size: 12px !important;
+
+        background-color: var(--mainBackgroundColor) !important;
+        color: var(--mainForegroundColor) !important;
+      }
+    }
+
+    tag {
+      background-color: $grey-background-color !important;
+      color: #000 !important;
+      border-radius: 3px !important;
+      font-size: 12px !important;
+      height: 30px !important;
+      line-height: 30px !important;
+      margin: 0 5px 0 0 !important;
+      cursor: default !important;
+      padding: 0 8px 0 10px !important;
+
+      div {
+        height: 100% !important;
+      }
+    }
+
+    delete-icon {
+      cursor: pointer !important;
+      height: auto !important;
+      vertical-align: middle !important;
+      padding-left: 6px !important;
+
+      svg {
+        position: relative;
+        top: -1px;
+        height: auto !important;
+        vertical-align: middle !important;
+
+        path  {
+          fill: $grey-foreground-color !important;
+        }
+      }
+
+      &:hover {
+        transform: none !important;
+      }
+    }
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3c9fa5939..d0f1a3630 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
 $grey-background-hover-color: #EFEFEF;
 $grey-foreground-color: #585858;
 $grey-foreground-hover-color: #303030;
+$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
 
 // Palette
 $main-color: hsl(24, 90%, 50%);
 $main-hover-color: lighten($main-color, 5%);
 $main-color-lighter: lighten($main-color, 10%);
+$main-color-lightest: lighten($main-color, 40%);
 $secondary-color: hsl(187, 77, 34);
 //
 
@@ -77,6 +79,7 @@ $activated-action-button-color: black;
 $variables: (
   --mainColor: var(--mainColor),
   --mainColorLighter: var(--mainColorLighter),
+  --mainColorLightest: var(--mainColorLightest),
   --mainHoverColor: var(--mainHoverColor),
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),