Replace glyphicon chevron

2 files changed, 34 insertions, 0 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d288d2a21..2ad1af23a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -308,6 +308,25 @@ 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.20em);
+
+  margin: 0 5px;
+}
+
+.chevron-up {
+  @include chevron-up(0.55rem, 0.20em);
+
+  margin: 0 5px;
+}
+
 /* offsetTop for scrollToAnchor */
 
 .anchor {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e18173130..da216b00f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -570,6 +570,7 @@
   transform: rotate(-45deg);
   height: $size;
   width: $size;
+  position: relative;
 }
 
 @mixin chevron-right ($size, $border-width) {
@@ -579,6 +580,20 @@
   transform: rotate(45deg);
 }
 
+@mixin chevron-down ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  bottom: 0.15em;
+  transform: rotate(135deg);
+}
+
+@mixin chevron-up ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  top: 0.15em;
+  transform: rotate(-45deg);
+}
+
 @mixin chevron-left ($size, $border-width) {
   @include chevron($size, $border-width);