biovision 0.0.200518.1 → 0.1.210414.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 817fb32980253517bb13eeff8c2d01ba994c82db093c58f8a770c212ecee25c6
-  data.tar.gz: b29d966a12f8dda98db8777e7f224001ee40f9f67c58c3192a5eda0d970e9e65
+  metadata.gz: d3c24a921606caffe513c4ee11746d99f1891ceff0f80571cdebf22832504017
+  data.tar.gz: a8fd06783b7ffdd07e64f2419a7cf9c6c85034c4b54ab0131105a6af053d3f71
 SHA512:
-  metadata.gz: 27904974e644b24f35aef5366e9e92927971a1c20e255b919724aadc27ac8854dcdb2f9dd2f83a0b8bec8358878bbdd36f877b721d29529f7336e6bf8e628f9b
-  data.tar.gz: 6eece2a2e1742e4438a949ff2718be4d16d03b4b767c0804c39243454d60967fe256722d81e2531c81c7f03e60245082d36d236d9593b029bec685bc58b62959
+  metadata.gz: a2ae86238cb7e4c0214e8f68e6eafdfdcd5ac3d18202b7e83068faf05e391105bc6d4a99aeae22142be73fb2d744a4a8d88b4677280996067116cab16c966db7
+  data.tar.gz: b6bb9884e0622fbfaac3203f6fcc570368fbebfdd2c07cf68e7916bd4d622f7d76aa2617d0822e6854fa275d718c45bcba985a9f9999e4778c0c6fcf12290e95

data/README.md

@@ -50,10 +50,10 @@ end
 ## Изменения в `config/environments/production.rb`
 
 Нужно раскомментировать строку `config.require_master_key = true` (на момент 
-написания это `19` строка).
+написания это `21` строка).
 
 Нужно выставить уровень сообщения об ошибках в `:warn` 
-(`config.log_level = :warn` в районе `54` строки).
+(`config.log_level = :warn` в районе `53` строки).
 
 ## Изменения в `app/mailers/application_mailer.rb`
 
@@ -107,6 +107,14 @@ production:
   end
 ```
 
+## Добавления в `package.json` и `application.js`
+
+Нужно добавить `@biovivion/biovision`, чтобы работал JS на клиентской стороне
+(`yarn add @biovision/biovision`).
+
+В `pack/javascripts/application.js` нужно добавить 
+`require("@biovision/biovision")`.
+
 ## Добавления в `config/routes.rb`
 
 ```ruby
@@ -121,21 +129,8 @@ production:
   concern :priority do
     post :priority, on: :member, defaults: { format: :json }
   end
-
-  concern :removable_image do
-    delete :image, action: :destroy_image, on: :member, defaults: { format: :json }
-  end
-
-  concern :lock do
-    member do
-      put :lock, defaults: { format: :json }
-      delete :lock, action: :unlock, defaults: { format: :json }
-    end
-  end
   
-  scope '(:locale)', constraints: { locale: /ru|en/ } do
-    root 'index#index'  
-  end
+  root 'index#index'  
 ```
 
 ## Дополнения в config/puma.rb
@@ -150,7 +145,6 @@ if ENV['RAILS_ENV'] == 'production'
   logs_dir    = "#{shared_path}/log"
 
   state_path "#{shared_path}/tmp/puma/state"
-  pidfile "#{shared_path}/tmp/puma/pid"
   bind "unix://#{shared_path}/tmp/puma.sock"
   stdout_redirect "#{logs_dir}/stdout.log", "#{logs_dir}/stderr.log", true
   
@@ -177,7 +171,34 @@ bundle binstub puma
 
 Также имеет смысл запустить `EDITOR=vim rails credentials:edit`, чтобы создать 
 зашированный файл с ключом шифрования сессии (чтобы выйти из vim с сохранением, 
-надо набрать :wq).
+надо нажать `esc` и набрать `:wq`).
+
+Чтобы проходила сборка на сервере, следует запустить эту команду:
+
+```bash
+bundle lock --add-platform x86_64-linux
+```
+
+## Настройка БД на сервере
+
+Если нужно создать пользователя (заменить `example` на пользователя из
+`config/database.yml` из раздела `production`):
+
+```bash
+sudo su postgres
+createuser -d -P example
+```
+
+Для создания БД (заменить `example` на пользователя из `config/database.yml` 
+из раздела `production`):
+
+```bash
+psql -h localhost -U example postgres
+```
+
+```postgresql
+create database example template template0 encoding='UTF8' LC_COLLATE='ru_RU.UTF-8' LC_CTYPE='ru_RU.UTF-8';
+```
 
 ## Настройка отгрузки через mina
 
@@ -195,10 +216,31 @@ set :shared_dirs, fetch(:shared_dirs, []).push('public/uploads', 'tmp', 'log')
 set :shared_files, fetch(:shared_files, []).push('config/master.key', '.env')
 ```
 
+Если используется `nvm`, то нужно добавить его инициализацию:
+
+В блок `:remote_environment` добавить строку:
+
+```ruby
+invoke :'nvm:load'
+```
+
+Сама загрузка `nvm`:
+
+```ruby
+namespace :nvm do
+  task :load do
+    command 'echo "-----> Loading nvm"'
+    command %{source ~/.nvm/nvm.sh}
+    command 'echo "-----> Now using nvm v.`nvm --version`"'
+  end
+end
+```
+
 На серверной стороне нужно создать папку для пумы и файла с ключом шифрования: 
 
 ```bash
 mkdir -p /var/www/example.com/shared/tmp/puma
+mkdir -p /var/www/example.com/shared/tmp/pids
 mkdir -p /var/www/example.com/shared/config
 ```
 

data/app/assets/images/biovision/icons/back.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 1252.705 1638.145 48.02 48.02" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(0.499792, 0, 0, 0.499792, -626.091919, -818.731812)">
+    <g>
+      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-8.0889" y1="1366.9993" x2="6.3662" y2="1366.9993" gradientTransform="matrix(3.3219 0 0 -3.3219 1279.5765 6203.127)">
+        <stop offset="0" style="stop-color:#33B49D"/>
+        <stop offset="1" style="stop-color:#00A185"/>
+      </linearGradient>
+      <circle fill="url(#SVGID_1_)" cx="1276.715" cy="1662.155" r="24.01"/>
+      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-6.8848" y1="1366.9993" x2="5.1616" y2="1366.9993" gradientTransform="matrix(3.3219 0 0 -3.3219 1279.5765 6203.127)">
+        <stop offset="0" style="stop-color:#00A185"/>
+        <stop offset="1" style="stop-color:#33B49D"/>
+      </linearGradient>
+      <path fill="url(#SVGID_2_)" d="M1276.715,1682.163c-11.032,0-20.008-8.976-20.008-20.009c0-11.032,8.976-20.009,20.008-20.009 s20.008,8.977,20.008,20.009C1296.723,1673.188,1287.747,1682.163,1276.715,1682.163z"/>
+    </g>
+    <polygon id="XMLID_80_" opacity="0.3" enable-background="new    " points="1276.012,1653.105 1266.211,1662.905 &#10;&#9;&#9;1276.012,1672.705 1276.012,1667.508 1288.72,1667.508 1288.72,1658.302 1276.012,1658.302 &#9;"/>
+    <polygon id="XMLID_201_" fill="#FFFFFF" points="1275.261,1652.354 1265.46,1662.155 1275.261,1671.955 1275.261,1666.758 &#10;&#9;&#9;1287.97,1666.758 1287.97,1657.551 1275.261,1657.551 &#9;"/>
+  </g>
+</svg>

data/app/assets/images/biovision/icons/create.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(0.046875, 0, 0, 0.046875, 0, 0)">
+    <g>
+      <linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="0.0000038" x2="512" y1="256" y2="256">
+        <stop offset="0" style="stop-color:#33B49D"/>
+        <stop offset="1" style="stop-color:#00A185"/>
+      </linearGradient>
+      <circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256"/>
+      <linearGradient gradientUnits="userSpaceOnUse" id="SVGID_2_" x1="42.6666679" x2="469.3333435" y1="256.0005188" y2="256.0005188">
+        <stop offset="0" style="stop-color:#00A185"/>
+        <stop offset="1" style="stop-color:#33B49D"/>
+      </linearGradient>
+      <path d="M256,469.3338623c-117.6309357,0-213.3333282-95.7023926-213.3333282-213.3333435    c0-117.6314545,95.7023926-213.333313,213.3333282-213.333313c117.636261,0,213.3333435,95.7018661,213.3333435,213.333313    C469.3333435,373.6314697,373.636261,469.3338623,256,469.3338623z" fill="url(#SVGID_2_)"/>
+    </g>
+    <polygon id="XMLID_109_" opacity="0.3" points="384,242.5413361 285.459198,242.5413361 285.459198,144 242.5424042,144    242.5424042,242.5413361 144,242.5413361 144,285.4581299 242.5424042,285.4581299 242.5424042,384 285.459198,384    285.459198,285.4581299 384,285.4581299  "/>
+    <polygon fill="#FFFFFF" id="XMLID_189_" points="376,234.5413361 277.459198,234.5413361 277.459198,136 234.5424042,136    234.5424042,234.5413361 136,234.5413361 136,277.4581299 234.5424042,277.4581299 234.5424042,376 277.459198,376    277.459198,277.4581299 376,277.4581299  "/>
+  </g>
+</svg>

data/app/assets/images/biovision/icons/destroy.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Delete</title>
+  <defs>
+    <style type="text/css">
+      line { stroke: #e44061; stroke-width: 3; stroke-linecap: round; }
+    </style>
+  </defs>
+  <g>
+    <line x1="3" y1="3" x2="21" y2="21"/>
+    <line x1="3" y1="21" x2="21" y2="3"/>
+  </g>
+</svg>

data/app/assets/images/biovision/icons/dropdown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="11px" height="6px">
+  <path d="M 0,0 h 11 l -5.5, 6" fill="#303346" stroke="none" />
+</svg>

data/app/assets/images/biovision/icons/edit.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1"
+	 id="Layer_1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g transform="translate(0 -1028.4)">
+	<g transform="matrix(1.0607 1.0607 -1.0607 1.0607 1146.8 34.926)">
+		<path fill="#ECF0F1" d="M-63,1003.4l0,11.3l0,0.7v1L-61,1018.4l2-2l0-1l0-0.7l0-11.3L-63,1003.4z"/>
+		<path fill="#BDC3C7" d="M-61,1003.4l0,15l2-2l0-1l0-0.7l0-11.3L-61,1003.4z"/>
+		<rect x="-63" y="1004.4" fill="#E67E22" width="4" height="11"/>
+		<path fill="#7F8C8D" d="M-61,1000.4c-1.105,0-2,0.9-2,2l0,1l4,0l0-1C-59,1001.3-59.895,1000.4-61,1000.4z"/>
+		<g transform="translate(-7,1)">
+			<path fill="#34495E" d="M-55.406,1016l1.406,1.4l1.406-1.4l-1.406,0L-55.406,1016z"/>
+			<path fill="#2C3E50" d="M-54,1016L-54,1017.4l1.406-1.4L-54,1016z"/>
+		</g>
+		<path fill="#95A5A6" d="M-61,1000.4c-1.105,0-2,0.9-2,2l0,1l2,0L-61,1000.4z"/>
+		<rect x="-61" y="1004.4" fill="#D35400" width="2" height="11"/>
+	</g>
+</g>
+</svg>

data/app/assets/images/biovision/icons/gear.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#7ACED7;}
+</style>
+  <g id="XMLID_6_" transform="matrix(0.1875, 0, 0, 0.1875, 0, 0)">
+    <path class="st0" d="M119.2,99.3l-19.9,19.9c-2.3,2.3-6.1,2.3-8.4,0l-6.9-6.9v9.8c0,3.3-2.7,5.9-5.9,5.9H49.9   c-3.3,0-5.9-2.7-5.9-5.9v-9.8l-6.9,6.9c-2.3,2.3-6.1,2.3-8.4,0L8.8,99.3c-2.3-2.3-2.3-6.1,0-8.4l6.9-6.9H5.9C2.7,84,0,81.3,0,78.1   V49.9C0,46.7,2.7,44,5.9,44h9.8l-6.9-6.9c-2.3-2.3-2.3-6.1,0-8.4L28.7,8.8c2.3-2.3,6.1-2.3,8.4,0l6.9,6.9V5.9C44,2.7,46.7,0,49.9,0   h28.1C81.3,0,84,2.7,84,5.9v9.8l6.9-6.9c2.3-2.3,6.1-2.3,8.4,0l19.9,19.9c2.3,2.3,2.3,6.1,0,8.4l-6.9,6.9h9.8   c3.3,0,5.9,2.7,5.9,5.9v28.1c0,3.3-2.7,5.9-5.9,5.9h-9.8l6.9,6.9C121.5,93.2,121.5,97,119.2,99.3L119.2,99.3z M64,43.1   c-11.6,0-20.9,9.4-20.9,20.9c0,11.6,9.4,20.9,20.9,20.9c11.6,0,20.9-9.4,20.9-20.9C84.9,52.4,75.6,43.1,64,43.1z" id="XMLID_10_"/>
+    <path class="st1" d="M64,39.1c13.8,0,24.9,11.2,24.9,24.9c0,13.8-11.2,24.9-24.9,24.9c-13.8,0-24.9-11.2-24.9-24.9   C39.1,50.2,50.2,39.1,64,39.1L64,39.1z M96.5,11.6c-0.8-0.8-2-0.8-2.7,0L80,25.4V5.9C80,4.9,79.1,4,78.1,4H49.9   C48.9,4,48,4.9,48,5.9v19.4L34.3,11.6c-0.8-0.8-2-0.8-2.7,0L11.6,31.5c-0.8,0.8-0.8,2,0,2.7L25.4,48H5.9C4.9,48,4,48.9,4,49.9v28.1   C4,79.1,4.9,80,5.9,80h19.4L11.6,93.7c-0.8,0.8-0.8,2,0,2.7l19.9,19.9c0.8,0.8,2,0.8,2.7,0L48,102.6v19.4c0,1.1,0.9,1.9,1.9,1.9   h28.1c1.1,0,1.9-0.9,1.9-1.9v-19.4l13.7,13.7c0.8,0.8,2,0.8,2.7,0l19.9-19.9c0.8-0.8,0.8-2,0-2.7L102.6,80h19.4   c1.1,0,1.9-0.9,1.9-1.9V49.9c0-1.1-0.9-1.9-1.9-1.9h-19.4l13.7-13.7c0.8-0.8,0.8-2,0-2.7L96.5,11.6z" id="XMLID_7_"/>
+  </g>
+</svg>

data/app/assets/images/biovision/icons/return.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(0.046875, 0, 0, 0.046875, 0, 0)">
+    <g>
+      <linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="-0.0000027" x2="512" y1="256" y2="256">
+        <stop offset="0" style="stop-color:#B49A85"/>
+        <stop offset="0.0651" style="stop-color:#B0957F"/>
+        <stop offset="0.2856" style="stop-color:#A88A71"/>
+        <stop offset="0.5539" style="stop-color:#A38369"/>
+        <stop offset="1" style="stop-color:#A18166"/>
+      </linearGradient>
+      <circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256"/>
+      <linearGradient gradientUnits="userSpaceOnUse" id="SVGID_2_" x1="42.6666641" x2="469.3333435" y1="256.0005188" y2="256.0005188">
+        <stop offset="0" style="stop-color:#A18166"/>
+        <stop offset="0.4461" style="stop-color:#A38369"/>
+        <stop offset="0.7144" style="stop-color:#A88A71"/>
+        <stop offset="0.9349" style="stop-color:#B0957F"/>
+        <stop offset="1" style="stop-color:#B49A85"/>
+      </linearGradient>
+      <path d="M256,469.3338623c-117.631012,0-213.3333435-95.7018738-213.3333435-213.3333435    c0-117.6309204,95.7023239-213.333313,213.3333435-213.333313c117.6362,0,213.3333435,95.7024002,213.3333435,213.333313    C469.3333435,373.6319885,373.6362,469.3338623,256,469.3338623z" fill="url(#SVGID_2_)"/>
+    </g>
+    <path d="M228.8847198,285.5493469v34.813324L144,242.3226624l84.8847198-78.0399933   l0.0006104,39.2917328C317.5705872,203.5744019,384,243.6815948,384,332.3674622   c0,10.7285461-1.0518188,21.2112122-3.058197,31.3504028C380.941803,363.717865,330.6186523,285.5514526,228.8847198,285.5493469z" id="XMLID_78_" opacity="0.3"/>
+    <path d="M220.8847198,277.5493469v34.813324L136,234.3226624l84.8847198-78.0399933   l0.0006104,39.2917328C309.5705872,195.5744019,376,235.6815948,376,324.3674622   c0,10.7285461-1.0518188,21.2112122-3.058197,31.3504028C372.941803,355.717865,322.6186523,277.5514526,220.8847198,277.5493469z" fill="#FFFFFF" id="XMLID_2251_"/>
+  </g>
+</svg>

data/app/assets/images/biovision/icons/world.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#7ACED7;}
+</style>
+  <g id="XMLID_11_" transform="matrix(0.1875, 0, 0, 0.1875, 0, 0)">
+    <circle class="st0" cx="64" cy="64" id="XMLID_9_" r="64"/>
+    <path class="st1" d="M4,62h25.3c0-0.1,0-0.1,0-0.2C30.3,45,36,29.3,46.2,16c2.8-3.7,6.8-8.1,10.8-11.6   C27.8,7.8,5,32.1,4,62L4,62z M33.3,62c0.9-16,6.3-30.9,16.1-43.6c3.2-4.2,8-9.4,12.6-12.9V62H33.3L33.3,62z M70.9,4.4   c4,3.5,8,7.9,10.8,11.6C92,29.3,97.7,45,98.7,61.8c0,0.1,0,0.1,0,0.2H124C123,32.1,100.2,7.8,70.9,4.4L70.9,4.4z M94.7,62H66V5.5   c4.6,3.5,9.4,8.7,12.6,12.9C88.3,31.1,93.7,46,94.7,62L94.7,62z M71,123.6c4-3.5,7.9-7.9,10.8-11.6C92,98.7,97.7,83,98.7,66.2   c0-0.1,0-0.2,0-0.2H124C123,95.9,100.2,120.2,71,123.6L71,123.6z M94.7,66H66v56.5c4.6-3.5,9.4-8.7,12.6-12.9   C88.3,96.9,93.7,82,94.7,66L94.7,66z M62,122.5c-4.6-3.5-9.4-8.7-12.6-12.9C39.7,96.9,34.3,82,33.3,66H62V122.5L62,122.5z M29.3,66   H4c1,29.9,23.8,54.2,53,57.6c-4-3.5-7.9-7.9-10.8-11.6C36,98.7,30.3,83,29.3,66.2C29.3,66.2,29.3,66.1,29.3,66z" id="XMLID_12_"/>
+  </g>
+</svg>

data/app/assets/stylesheets/biovision/admin/components.scss

@@ -56,4 +56,6 @@
       margin-bottom: 0;
     }
   }
-}
+}
+
+@import "biovision/admin/components/users";

data/app/assets/stylesheets/biovision/admin/components/users.scss

@@ -0,0 +1,16 @@
+#login-form {
+  box-shadow: var(--block-shadow);
+  margin: 0 auto;
+  max-width: 36rem;
+
+  .errors {
+    margin: 0 var(--spacer-xs);
+  }
+
+  .actions {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacer-xs);
+  }
+}

data/app/assets/stylesheets/biovision/admin/layout.scss

@@ -11,7 +11,6 @@ body {
   display: flex;
   flex-direction: column;
   font-weight: 300;
-  height: 100%;
   margin: 0 auto;
   max-width: var(--content-width);
 }
@@ -74,22 +73,12 @@ h2 {
   padding: var(--spacer-xs);
 }
 
-.breadcrumbs {
-  margin-bottom: var(--spacer-xs);
-
-  a {
-    background: image_url('biovision/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
-    padding-right: 1rem;
-    transition: background .25s;
-
-    &:active,
-    &:focus,
-    &:hover {
-      background-image: image_url('biovision/icons/breadcrumb-hover.svg');
-    }
-  }
-}
-
 @import "biovision/components/forms";
+@import "biovision/components/breadcrumbs";
 @import "biovision/components/lists";
+@import "biovision/components/buttons";
+@import "biovision/components/messages";
+@import "biovision/components/simple_image";
+@import "biovision/components/toggleable";
+@import "biovision/components/pagination";
 @import "biovision/admin/components";

data/app/assets/stylesheets/biovision/biovision.scss

@@ -1,3 +1,5 @@
+@import "biovision/vars";
+
 *,
 ::after,
 ::before {
@@ -131,4 +133,43 @@ textarea {
   }
 }
 
-@import "biovision/biovision/messages";
+.entity-actions {
+  align-items: center;
+  background: #fff;
+  border-radius: .4rem;
+  box-shadow: var(--block-shadow);
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+  opacity: .5;
+  padding: 0;
+  position: absolute;
+  right: var(--spacer-xxs);
+  top: var(--spacer-xxs);
+  transition: .25s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .danger {
+    margin-left: var(--spacer-s);
+  }
+
+  a,
+  button {
+    display: inline-block;
+    font-size: var(--font-size-decreased);
+    height: 2.4rem;
+    line-height: 1;
+    margin: 0;
+    padding: var(--spacer-xxs);
+    width: 2.4rem;
+  }
+
+  img {
+    height: 100%;
+    object-fit: contain;
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/biovision/components.scss

@@ -0,0 +1,6 @@
+@import "biovision/components/buttons";
+@import "biovision/components/forms";
+@import "biovision/components/hamburger";
+@import "biovision/components/lists";
+@import "biovision/components/pagination";
+@import "biovision/components/breadcrumbs";

data/app/assets/stylesheets/biovision/components/breadcrumbs.scss

@@ -0,0 +1,13 @@
+.breadcrumbs {
+  a {
+    background: image_url('biovision/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
+    padding-right: 1rem;
+    transition: background .25s;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-image: image_url('biovision/icons/breadcrumb-hover.svg');
+    }
+  }
+}

data/app/assets/stylesheets/biovision/components/buttons.scss

@@ -0,0 +1,130 @@
+$button-primary-bg: hsl(210, 75%, 50%) !default;
+$button-primary-bg-hover: hsl(230, 75%, 50%) !default;
+$button-primary-color: #fff !default;
+$button-primary-color-hover: #fff !default;
+$button-ghost-bg: transparent !default;
+$button-ghost-bg-hover: hsl(230, 75%, 50%) !default;
+$button-ghost-color: hsl(230, 75%, 50%) !default;
+$button-ghost-color-hover: #fff !default;
+$button-secondary-bg: #fff !default;
+$button-secondary-bg-hover: hsl(30, 75%, 50%) !default;
+$button-secondary-color: hsl(30, 75%, 50%) !default;
+$button-secondary-color-hover: #fff !default;
+$button-save-bg: hsl(120, 25%, 55%) !default;
+$button-save-bg-hover: hsl(120, 25%, 25%) !default;
+$button-save-color: #fff !default;
+$button-save-color-hover: #fff !default;
+$button-danger-bg: hsl(0, 50%, 55%) !default;
+$button-danger-bg-hover: hsl(00, 25%, 50%) !default;
+$button-danger-color: #fff !default;
+$button-danger-color-hover: #fff !default;
+
+:root {
+  --button-primary-bg: #{$button-primary-bg};
+  --button-primary-bg-hover: #{$button-primary-bg-hover};
+  --button-primary-color: #{$button-primary-color};
+  --button-primary-color-hover: #{$button-primary-color-hover};
+  --button-ghost-bg: #{$button-ghost-bg};
+  --button-ghost-bg-hover: #{$button-ghost-bg-hover};
+  --button-ghost-color: #{$button-ghost-color};
+  --button-ghost-color-hover: #{$button-ghost-color-hover};
+  --button-secondary-bg: #{$button-secondary-bg};
+  --button-secondary-bg-hover: #{$button-secondary-bg-hover};
+  --button-secondary-color: #{$button-secondary-color};
+  --button-secondary-color-hover: #{$button-secondary-color-hover};
+  --button-save-bg: #{$button-save-bg};
+  --button-save-bg-hover: #{$button-save-bg-hover};
+  --button-save-color: #{$button-save-color};
+  --button-save-color-hover: #{$button-save-color-hover};
+  --button-danger-bg: #{$button-danger-bg};
+  --button-danger-bg-hover: #{$button-danger-bg-hover};
+  --button-danger-color: #{$button-danger-color};
+  --button-danger-color-hover: #{$button-danger-color-hover};
+}
+
+.button {
+  border: .1rem solid;
+  border-radius: .4rem;
+  cursor: pointer;
+  font-family: var(--font-family-main);
+  font-size: inherit;
+  display: inline-block;
+  margin: 0;
+  padding: var(--spacer-xxs) var(--spacer-xs);
+  text-align: center;
+  text-decoration: none;
+  transition: .25s;
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled {
+    cursor: default;
+    filter: grayscale(.75);
+    opacity: .75;
+  }
+}
+
+.button-primary {
+  background: var(--button-primary-bg);
+  border-color: var(--button-primary-bg);
+  color: var(--button-primary-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-primary-bg-hover);
+    border-color: var(--button-primary-bg-hover);
+    color: var(--button-primary-color-hover);
+  }
+}
+
+.button-secondary {
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-secondary-bg-hover);
+    border-color: var(--button-secondary-bg-hover);
+    color: var(--button-secondary-color-hover);
+  }
+}
+
+.button-ghost {
+  background: var(--button-ghost-bg);
+  border-color: var(--button-ghost-color);
+  color: var(--button-ghost-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-ghost-bg-hover);
+    border-color: var(--button-ghost-bg-hover);
+    color: var(--button-ghost-color-hover);
+  }
+}
+
+.button-save {
+  background: var(--button-save-bg);
+  border-color: var(--button-save-bg);
+  color: var(--button-save-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-save-bg-hover);
+    color: var(--button-save-color-hover);
+  }
+}
+
+.button-danger {
+  background: var(--button-danger-bg);
+  border-color: var(--button-danger-bg);
+  color: var(--button-danger-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-danger-bg-hover);
+    color: var(--button-danger-color-hover);
+  }
+}