biovision 0.0.200518.1

data/app/assets/images/biovision/icons/messages/warning.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <title>Warning</title>
+    <style>
+      line, polyline { stroke: #873; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3 }
+    </style>
+  </defs>
+  <g>
+    <polyline points="16 2, 30 30, 2 30, 16 2" fill="#fd4"/>
+    <line x1="16" y1="12" x2="16" y2="20"/>
+    <circle cx="16" cy="25" r="1.5" fill="#873" />
+  </g>
+</svg>

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

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
+  <title>Settings</title>
+  <defs>
+    <style>
+      line { stroke-linecap: round }
+      circle { stroke-width: 3 }
+      .a { stroke-width: 15; stroke: #aaa }
+      .b { stroke-width: 5; stroke: #777 }
+      .c { fill: #bbb; stroke: #999 }
+      .d { stroke-width: 3; stroke: #444; fill: #777 }
+    </style>
+  </defs>
+  <g>
+    <g class="a">
+      <line x1="20" y1="10" x2="20" y2="150"/>
+      <line x1="60" y1="10" x2="60" y2="150"/>
+      <line x1="100" y1="10" x2="100" y2="150"/>
+    </g>
+    <g class="b">
+      <line x1="20" y1="10" x2="20" y2="150"/>
+      <line x1="60" y1="10" x2="60" y2="150"/>
+      <line x1="100" y1="10" x2="100" y2="150"/>
+    </g>
+    <g class="c">
+      <circle cx="20" cy="55" r="15"/>
+      <circle cx="60" cy="115" r="15"/>
+      <circle cx="100" cy="30" r="15"/>
+    </g>
+  </g>
+  <g>
+    <g>
+      <circle cx="140" cy="20" r="12" stroke="#070" fill="#4a4"/>
+      <circle cx="140" cy="60" r="12" stroke="#440" fill="#773"/>
+      <circle cx="140" cy="100" r="12" stroke="#400" fill="#733"/>
+    </g>
+    <g class="d">
+      <circle cx="140" cy="140" r="12"/>
+      <polyline points="130,140 126,126 140,130"/>
+    </g>
+  </g>
+</svg>

data/app/assets/images/biovision/placeholders/16x9.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 0 320 180" width="320px" height="180px" xmlns="http://www.w3.org/2000/svg">
+  <title>Image placeholder 16×9</title>
+  <style>
+    * { stroke: #ccc; fill: none; stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="318" height="178"/>
+    <line x1="1.5" y1="2.25" x2="318.5" y2="177.75"/>
+    <line x1="1.5" y1="177.75" x2="318.5" y2="2.25"/>
+  </g>
+</svg>

data/app/assets/images/biovision/placeholders/1x1.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 0 300 300" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
+  <title>Image placeholder 1×1</title>
+  <style>
+    * { stroke: #ccc; fill: none; stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="298" height="298"/>
+    <line x1="2.5" y1="2.5" x2="297.5" y2="297.5"/>
+    <line x1="2.5" y1="297.5" x2="297.5" y2="2.5"/>
+  </g>
+</svg>

data/app/assets/images/biovision/placeholders/3x2.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 0 300 200" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
+  <title>Image placeholder 3×2</title>
+  <style>
+    * { stroke: #ccc; fill: none; stroke-width: 3; }
+  </style>
+  <g>
+    <rect x="1" y="1" width="298" height="198"/>
+    <line x1="2.5" y1="2.5" x2="297.5" y2="197.5"/>
+    <line x1="2.5" y1="197.5" x2="297.5" y2="2.5"/>
+  </g>
+</svg>

data/app/assets/images/biovision/placeholders/user.svg

@@ -0,0 +1,15 @@
+<svg version="1.1" viewBox="0 0 300 300" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
+  <title>User placeholder</title>
+  <style>
+    * { stroke: #555; stroke-width: 5; }
+    .f { fill: #ffe }
+    .e { fill: #eff }
+    .m { fill: none }
+  </style>
+  <g>
+    <circle cx="150" cy="150" r="140" class="f"/>
+    <circle cx="100" cy="110" r="15" class="e"/>
+    <circle cx="200" cy="110" r="15" class="e"/>
+    <path d="M 75,200 A 150,200 0 0,0 225,200" class="m"/>
+  </g>
+</svg>

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

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+@import "biovision/admin/vars";
+@import "biovision/biovision";
+@import "biovision/admin/layout";

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

@@ -0,0 +1,59 @@
+.biovision-component {
+  border-bottom: var(--border-secondary);
+  margin-bottom: var(--spacer-s);
+  padding: var(--spacer-xs);
+
+  > header {
+    background: no-repeat center left / 2.4rem 2.4rem;
+    padding-left: 3.2rem;
+  }
+}
+
+.biovision-component-nav {
+  margin: var(--spacer-s) 0;
+
+  > a {
+    background: no-repeat center left / 2rem 2rem;
+    display: block;
+    line-height: 2.4rem;
+    margin: 0 0 0 .8rem;
+    padding-left: 2.4rem;
+  }
+
+  .settings {
+    background-image: image_url('biovision/icons/settings.svg');
+  }
+
+  .privileges {
+    background-image: image_url('biovision/icons/key.svg');
+  }
+
+  ul {
+    box-shadow: var(--block-shadow);
+    margin: var(--spacer-xxs);
+    max-width: 64rem;
+    padding: 0;
+  }
+
+  li {
+    background: var(--row-background-odd);
+    list-style: none;
+    margin: 0;
+    padding: var(--spacer-xs);
+    position: relative;
+
+    &:nth-last-of-type(even) {
+      background: var(--row-background-even);
+    }
+  }
+}
+
+.biovision-component-settings {
+  .fields {
+    margin-bottom: var(--spacer-s);
+
+    > div {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+$font-family-main: "Roboto", sans-serif !default;
+$font-family-heading: "Exo 2", sans-serif !default;
+
+$font-size-xxxl: 4.5rem !default;
+$font-size-xxl: 3.6rem !default;
+$font-size-xl: 3.2rem !default;
+$font-size-large: 2.4rem !default;
+$font-size-increased: 1.8rem !default;
+$font-size-normal: 1.6rem !default;
+$font-size-decreased: 1.4rem !default;
+$font-size-small: 1.2rem !default;
+$font-size-xs: 1rem !default;
+
+$spacer-s: 1.6rem !default;
+$spacer-xxxs: .2rem !default;
+$spacer-xxs: #{$spacer-s / 4} !default;
+$spacer-xs: #{$spacer-s / 2} !default;
+$spacer-m: #{$spacer-s * 2} !default;
+$spacer-l: #{$spacer-s * 3} !default;
+$spacer-xl: #{$spacer-s * 4} !default;
+$spacer-xxl: #{$spacer-s * 6} !default;
+
+$content-width: 120rem !default;
+$content-width-min: 32rem !default;
+
+$row-background-even: hsl(0, 0%, 95%) !default;
+$row-background-odd: hsl(0, 0%, 98%) !default;
+
+$text-color-heading: #000 !default;
+$text-color-primary: rgb(28, 28, 28) !default;
+$text-color-secondary: #777 !default;
+
+$text-color-inverted-primary: #fff !default;
+$text-color-inverted-secondary: #ccc !default;
+$text-color-inverted-heading: #eee !default;
+
+$block-shadow: .2rem .2rem .4rem .2rem rgba(0, 0, 0, .125) !default;
+
+$border-color-primary: rgb(192, 192, 192) !default;
+$border-color-secondary: rgb(230, 230, 230) !default;
+$border-primary: .1rem solid $border-color-primary !default;
+$border-secondary: .1rem solid $border-color-secondary !default;
+
+$background-body: #f4f4f4 linear-gradient(to top, #f4f4f4, #dfdedc) no-repeat center / cover !default;
+$background-header: #fff !default;
+$background-main: #fff !default;
+$background-footer: #fff !default;
+
+$link-color: rgb(20, 127, 255) !default;
+$link-color-visited: rgb(20, 77, 250) !default;
+$link-color-active: rgb(255, 77, 20) !default;
+$link-color-hover: rgb(255, 77, 20) !default;
+
+$input-border: hsl(0, 0%, 75%) !default;
+$input-border-focus: hsl(0, 0%, 50%) !default;
+$input-border-invalid: hsl(0, 75%, 50%) !default;
+$input-border-invalid-focus: hsl(0, 50%, 50%) !default;

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

@@ -0,0 +1,95 @@
+//* { outline: solid pink 1px }
+
+html {
+  background: linear-gradient(to bottom, #dedfe3 2%, #aeb3b9 95%) fixed, radial-gradient(farthest-corner at 33% 100%, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .5) 100%) fixed;
+  background-blend-mode: screen;
+  height: 100%;
+}
+
+body {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  font-weight: 300;
+  height: 100%;
+  margin: 0 auto;
+  max-width: var(--content-width);
+}
+
+a {
+  font-weight: 400;
+}
+
+h1 {
+  font-size: var(--font-size-xxl);
+  font-weight: 500;
+  margin-bottom: var(--spacer-xs);
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+  font-weight: 500;
+  margin-bottom: var(--spacer-xxs);
+}
+
+#main {
+  padding: var(--spacer-xs);
+  width: 100%;
+}
+
+.main-header {
+  align-items: center;
+  border-bottom: var(--border-primary);
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacer-xs);
+
+  nav {
+    margin: 0 0 0 auto;
+  }
+
+  ul {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    padding: 0 var(--spacer-xxs);
+  }
+}
+
+.main-footer {
+  align-items: center;
+  border-top: var(--border-primary);
+  color: var(--text-color-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--font-size-decreased);
+  justify-content: space-between;
+  margin: auto 0 0 0;
+  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/lists";
+@import "biovision/admin/components";

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

@@ -0,0 +1,56 @@
+@import "biovision/admin/default";
+
+:root {
+  --font-size-xxxl: #{$font-size-xxxl};
+  --font-size-xxl: #{$font-size-xxl};
+  --font-size-xl: #{$font-size-xl};
+  --font-size-large: #{$font-size-large};
+  --font-size-increased: #{$font-size-increased};
+  --font-size-normal: #{$font-size-normal};
+  --font-size-decreased: #{$font-size-decreased};
+  --font-size-small: #{$font-size-small};
+  --font-size-xs: #{$font-size-xs};
+
+  --font-family-main: #{$font-family-main};
+  --font-family-heading: #{$font-family-heading};
+
+  --spacer-s: #{$spacer-s};
+  --spacer-xxxs: .2rem;
+  --spacer-xxs: calc(var(--spacer-s) / 4);
+  --spacer-xs: calc(var(--spacer-s) / 2);
+  --spacer-m: calc(var(--spacer-s) * 2);
+  --spacer-l: calc(var(--spacer-s) * 3);
+  --spacer-xl: calc(var(--spacer-s) * 4);
+  --spacer-xxl: calc(var(--spacer-s) * 6);
+
+  --text-color-primary: #{$text-color-primary};
+  --text-color-secondary: #{$text-color-secondary};
+  --text-color-heading: #{$text-color-heading};
+
+  --text-color-inverted-primary: #{$text-color-inverted-primary};
+  --text-color-inverted-secondary: #{$text-color-inverted-secondary};
+  --text-color-inverted-heading: #{$text-color-inverted-heading};
+
+  --border-color-primary: #{$border-color-primary};
+  --border-color-secondary: #{$border-color-secondary};
+  --border-primary: #{$border-primary};
+  --border-secondary: #{$border-secondary};
+
+  --block-shadow: #{$block-shadow};
+
+  --link-color: #{$link-color};
+  --link-color-visited: #{$link-color-visited};
+  --link-color-active: #{$link-color-active};
+  --link-color-hover: #{$link-color-hover};
+
+  --content-width: #{$content-width};
+  --content-width-min: #{$content-width-min};
+
+  --input-border: #{$input-border};
+  --input-border-focus: #{$input-border-focus};
+  --input-border-invalid: #{$input-border-invalid};
+  --input-border-invalid-focus: #{$input-border-invalid-focus};
+
+  --row-background-even: #{$row-background-even};
+  --row-background-odd: #{$row-background-odd};
+}

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

@@ -0,0 +1,134 @@
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+html {
+  color: var(--text-color-primary);
+  font: 400 10px var(--font-family-main);
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+}
+
+body {
+  font-size: var(--font-size-normal);
+  margin: 0;
+  min-width: var(--content-width-min);
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-heading);
+  margin: 0;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color .125s;
+
+  &:hover {
+    color: var(--link-color-hover);
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--link-color-active);
+  }
+}
+
+figure {
+  margin: 0;
+}
+
+article {
+  position: relative;
+}
+
+button,
+input,
+textarea {
+  font-size: inherit;
+}
+
+.content-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--content-width);
+}
+
+.hidden,
+[hidden] {
+  display: none !important;
+}
+
+.visually-hidden {
+  border: none;
+  clip: rect(0 0 0 0);
+  height: auto;
+  left: -10000rem;
+  margin: 0;
+  opacity: .05;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.proportional-container {
+  padding: 0;
+  position: relative;
+
+  > * {
+    bottom: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  &::before {
+    content: '\A';
+    display: block;
+  }
+
+  &.r-1x1::before {
+    padding-top: 100%;
+  }
+
+  &.r-5x4::before {
+    padding-top: 80%;
+  }
+
+  &.r-4x3::before {
+    padding-top: 75%;
+  }
+
+  &.r-3x2::before {
+    padding-top: 66.67%;
+  }
+
+  &.r-16x9::before {
+    padding-top: 56.25%;
+  }
+
+  &.r-2x1::before {
+    padding-top: 50%;
+  }
+}
+
+@import "biovision/biovision/messages";