JI-2176 Implement new design for Tutorial and Example links

scripts/h5peditor-library-selector.js

@@ -29,8 +29,20 @@ ns.LibrarySelector = function (libraries, defaultLibrary, defaultParams) {
   this.defaultLibraryParameterized = defaultLibrary ? defaultLibrary.replace('.', '-').toLowerCase() : undefined;
 
   //Add tutorial and example link:
-  this.$tutorialUrl = ns.$('<a class="h5p-tutorial-url" target="_blank">' + ns.t('core', 'tutorial') + '</a>').hide();
-  this.$exampleUrl = ns.$('<a class="h5p-example-url" target="_blank">' + ns.t('core', 'example') + '</a>').hide();
+  this.$tutorialUrl = ns.$(
+    '<a class="h5p-tutorial-url" target="_blank">' + 
+      '<span class="h5p-tutorial-url-label">' + 
+        ns.t('core', 'tutorial') + 
+      '</span>' +
+    '</a>'
+  ).hide();
+  this.$exampleUrl = ns.$(
+    '<a class="h5p-example-url" target="_blank">' + 
+      '<span class="h5p-example-url-label">' + 
+        ns.t('core', 'example') + 
+      '</span>' +
+    '</a>'
+  ).hide();
 
   // Create confirm dialog
   var changeLibraryDialog = new H5P.ConfirmationDialog({

styles/scss/_tutorial-and-example-links.scss

+$h5p-tutorial-url-label-color: #415702;
+$h5p-tutorial-icon-color: #eaffab;
+$h5p-tutorial-icon-bg-color: #749e00;
+
+$h5p-example-url-label-color: #422447;
+$h5p-example-icon-color: #f8d4ff;
+$h5p-example-icon-bg-color: #8f4f9c;
+
+$h5p-tutorial-icon-diameter: 2.5rem;
+
+@mixin h5p-tutorial-focus-shadow() {
+  box-shadow: 0px 0px 5px rgba(22,52,247,1);
+}
+
+.h5p-tutorial-url,
+.h5p-example-url {
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+  height: $h5p-tutorial-icon-diameter;
+  border-radius: $h5p-tutorial-icon-diameter / 2;
+
+  &:focus {
+    @include h5p-tutorial-focus-shadow;
+  }
+
+  &:active {
+    border-color: #1C70BA;
+  }
+
+  &::before {
+    font-family: $icon-font-family;
+    font-size: 1.625em;
+    border-radius: 50%;
+    width: $h5p-tutorial-icon-diameter;;
+    height: $h5p-tutorial-icon-diameter;;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .h5p-tutorial-url-label,
+  .h5p-example-url-label {
+    font-style: italic;
+    font-weight: bold;
+    text-decoration: underline;
+    margin: 0.25em 0.5em;
+    margin-left: $h5p-tutorial-icon-diameter;
+    padding-left: 0.5em;
+    padding-right: 1em;
+  }
+}
+
+.h5p-tutorial-url {
+  margin-left: 0.25em;
+
+  &:active,
+  &:hover {
+    background-color: $h5p-tutorial-icon-color;
+  }
+
+  &::before {
+    content: "\e93e";
+    color: $h5p-tutorial-icon-color;
+    background-color: $h5p-tutorial-icon-bg-color;
+  }
+
+  .h5p-tutorial-url-label {
+    color: $h5p-tutorial-url-label-color;
+  }
+}
+
+.h5p-example-url {
+  &:active,
+  &:hover {
+    background-color: $h5p-example-icon-color;
+  }
+
+  &::before {
+    content: "\e93d";
+    font-size: 1.2em;
+    color: $h5p-example-icon-color;
+    background-color: $h5p-example-icon-bg-color;
+  }
+  
+  .h5p-example-url-label {
+    color: $h5p-example-url-label-color;
+  }
+}

styles/scss/application.scss

@@ -1071,42 +1071,7 @@ a {
   overflow: hidden;
 }
 
-.h5p-tutorial-url,
-.h5p-example-url {
-  font-size: 1em;
-  color: #2270B9;
-  display: inline-block;
-  line-height: 1;
-  height: 2em;
-  margin-right: 10px;
-  padding-right: 10px;
-  padding-bottom: 2px;
-  margin-bottom: 8px;
-  border: 1px solid transparent;
-
-  &:focus {
-    border-color: #bbdae8;
-  }
-  &:active {
-    border-color: #1C70BA;
-  }
-}
-
-.h5p-tutorial-url:before,
-.h5p-example-url:before {
-  font-family: $icon-font-family;
-  font-size: 1.5em;
-  position: relative;
-  top: 0.15em;
-  left: 0.2em;
-  margin-right: 10px;
-}
-.h5p-tutorial-url:before {
-  content: "\e907";
-}
-.h5p-example-url:before {
-  content: "\e906";
-}
+@import "tutorial-and-example-links";
 
 .h5peditor-widget-select {
   overflow: hidden;