refs #19244 [fid_bbi] improve RVK styling

* Style RVK code as badge
* Increase margins
* Fix dropdown background
* On small screens, break code and label into separate lines
* Remove border
* Move SCSS code to separate file
* Simplify template

themes/fid_bbi/scss/blocks/icon.scss

@@ -32,14 +32,17 @@
 
 .link-with-icon {
   margin-left: g(1.25);
+  position: relative;
 
-  // Make icon clickable
+  // Make icon and gap clickable
   &::before {
     content: '';
     display: block;
     height: g();
+    left: 0;
     margin-left: g(-1.25);
     position: absolute;
+    top: 0;
     width: g(1.25);
   }
 

themes/fid_bbi/scss/blocks/rvk.scss

+.rvk_code {
+  background: $link-color;
+  color: $white;
+  display: inline-block;
+  font-size: $font-size-small;
+  font-weight: bold;
+  line-height: g(.75);
+  margin-right: g(.5);
+  margin-top: g(.25 / 2);
+  min-width: g(3); // Fit "AB 12345"
+  padding: 0 g(.25);
+
+  @include hover {
+    background: $link-hover-color;
+    color: #fff;
+  }
+}
+
+.rvk_label {
+  margin: 0 0 g(.5);
+
+  @media #{$bp1} {
+    align-items: flex-start;
+    display: flex;
+    margin: 0;
+  }
+}
+
+.rvk_notation {
+  background: $shade-weak;
+  height: auto !important; // override height set by JS
+  margin: 0 0 g(.75);
+  padding: g(.25);
+
+  @media #{$bp1} {
+    margin-top: g(.25);
+  }
+}

themes/fid_bbi/scss/compiled.scss

@@ -46,6 +46,7 @@
 @import 'blocks/record';
 @import 'blocks/result';
 @import 'blocks/results';
+@import 'blocks/rvk';
 @import 'blocks/search';
 @import 'blocks/sidebar';
 @import 'blocks/sources-list';

themes/fid_bbi/scss/util/hacks.scss

@@ -107,11 +107,6 @@ a.active {
   }
 }
 
-.collapse.notation {
-  background: $shade-weak;
-  padding: g(.25);
-}
-
 // Togglable item list inside form
 #itemhide {
   width: 100%;

themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-rvkNotation.phtml

@@ -13,37 +13,34 @@
 ?>
 
 <?php // partial copied from themes/finc/templates/RecordTab/topics.phtml ?>
-<?php $i = 0; ?>
-<?php foreach ($data as $item): ?>
-  <?php // no linebreak after last item ?>
-  <?=$i > 0 ? '<br>' : ''?>
-
-  <span>
-    <a href="<?=$this->record($this->driver)->getLink('rvk', $item['rvk'])?>">
-      <?=$item['rvk']?>
-    </a>
-  </span>
+<?php foreach ($data as $index => $item): ?>
+  <div class="rvk_label">
+    <div>
+      <a class="rvk_code" href="<?=$this->record($this->driver)->getLink('rvk', $item['rvk'])?>">
+        <?=$item['rvk']?>
+      </a>
+    </div>
 
-  <?php if (isset($item['name'])): ?>
-    |
-    <a
-      class="toggle link-with-icon"
-      role="button"
-      data-toggle="collapse"
-      href="#collapse_rvk_<?=$i?>"
-      aria-expanded="false"
-    >
-      <?=$this->icon('small/chevron-down')?>
-      <?=$item['name']?>
-    </a>
-  <?php endif; ?>
+    <?php if (isset($item['name'])): ?>
+      <div>
+        <a
+          class="toggle link-with-icon"
+          role="button"
+          data-toggle="collapse"
+          href="#collapse_rvk_<?=$index?>"
+          aria-expanded="false"
+        >
+          <?=$this->icon('small/chevron-down')?>
+          <?=$item['name']?>
+        </a>
+      </div>
+    <?php endif; ?>
+  </div>
 
   <?php if (isset($item['level']) && is_array($item['level'])): ?>
-    <div id="collapse_rvk_<?=$i?>" class="collapse notation">
+    <div id="collapse_rvk_<?=$index?>" class="collapse notation rvk_notation">
       <?=$this->render('Helpers/nestedList.phtml', ['array' => $item['level']])?>
     </div>
   <?php endif; ?>
-
-  <?php $i++; ?>
 <?php endforeach; ?>
 <!-- fid_bbi: RecordDriver - DefaultRecord - data-rvkNotation - END -->