biovision-base 0.22.180920.0 → 0.34.190331.1

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

@@ -0,0 +1,141 @@
+$text-color-secondary: #777 !default;
+
+#biovision-component-parameters {
+  margin: var(--spacer-s) 0;
+  padding: 0;
+
+  li {
+    list-style: none;
+    margin: 0 0 var(--spacer-m);
+  }
+
+  label {
+    font-size: var(--font-size-increased);
+    font-weight: 400;
+
+    + span {
+      color: $text-color-secondary;
+    }
+  }
+
+  .name {
+    input {
+      width: 100%;
+    }
+  }
+
+  .value {
+    align-items: center;
+    display: flex;
+    margin: var(--spacer-xxs) 0;
+
+    input {
+      flex: 1;
+    }
+
+    button {
+      --shadow-color: rgba(0, 0, 0, .25);
+
+      background: no-repeat center / contain;
+      border: none;
+      border-radius: .2rem;
+      box-shadow: 0 0 .4rem var(--shadow-color);
+      cursor: pointer;
+      display: inline-block;
+      flex: none;
+      height: 2.4rem;
+      margin: 0 var(--spacer-xxs);
+      transition: .25s;
+      width: 2.4rem;
+
+      &:active,
+      &:hover {
+        --shadow-color: rgba(0, 0, 0, .75);
+      }
+
+      &:disabled {
+        cursor: default;
+        filter: grayscale(1);
+      }
+    }
+
+    .apply {
+      background-color: rgba(97, 228, 64, .125);
+      background-image: image_url('biovision/base/icons/apply.svg');
+    }
+
+    .delete {
+      background-color: rgba(228, 97, 64, .125);
+      background-image: image_url('biovision/base/icons/destroy.svg');
+    }
+  }
+
+  .description {
+    font-size: var(--font-size-decreased);
+    margin: var(--spacer-xxs) 0 0;
+  }
+}
+
+.biovision-components {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+
+  li {
+    list-style: none;
+    margin: var(--spacer-xs);
+    padding: 0;
+  }
+
+  a {
+    --shadow-color: rgba(0, 0, 0, .25);
+
+    background: no-repeat center top var(--spacer-s);
+    border-radius: .4rem;
+    box-shadow: 0 0 .4rem var(--shadow-color);
+    display: inline-block;
+    padding: calc(var(--spacer-m) + 16rem) 0 var(--spacer-s);
+    text-align: center;
+    width: calc(var(--spacer-s) + 16rem);
+
+    &:active,
+    &:focus,
+    &:hover {
+      --shadow-color: rgba(0, 0, 0, .75);
+    }
+  }
+
+  .settings-general {
+    a {
+      background-image: image_url('biovision/base/icons/settings.svg');
+    }
+  }
+}
+
+.biovision-components-list {
+  margin: 0;
+  padding: 0;
+
+  li {
+    list-style: none;
+    margin: var(--spacer-xs) 0;
+  }
+
+  a {
+    --image-size: calc(var(--font-size-normal) + var(--spacer-xs));
+
+    background: no-repeat center left / var(--image-size) var(--image-size);
+    display: inline-block;
+    padding: var(--spacer-xxs) 0 var(--spacer-xxs) calc(var(--image-size) + var(--spacer-xxs));
+  }
+
+  .contact {
+    background-image: image_url('biovision/base/icons/components/contact.svg');
+  }
+
+  .registration {
+    background-image: image_url('biovision/base/icons/components/registration.svg');
+  }
+}

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

@@ -9,21 +9,23 @@
   --font-size-small: #{$font-size-small};
   --font-size-xs: #{$font-size-xs};
 
-  --spacer-xxs: #{$spacer-xxs};
-  --spacer-xs: #{$spacer-xs};
   --spacer-s: #{$spacer-s};
-  --spacer-m: #{$spacer-m};
-  --spacer-l: #{$spacer-l};
-  --spacer-xl: #{$spacer-xl};
-  --spacer-xxl: #{$spacer-xxl};
+  --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);
 }
 
-* {
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
 
 html {
-  font: 10px $font-family-main;
+  font: 400 10px $font-family-main;
   height: 100%;
   margin: 0;
   padding: 0;
@@ -32,6 +34,18 @@ html {
   -ms-text-size-adjust: none;
 }
 
+body {
+  font-size: $font-size-normal;
+  margin: 0;
+  padding: 0;
+}
+
+@supports (--css: vars) {
+  body {
+    font-size: var(--font-size-normal);
+  }
+}
+
 h1,
 h2,
 h3,
@@ -43,17 +57,16 @@ h6 {
 }
 
 a {
-  &:link {
-    color: $link-color;
-    text-decoration: none;
-    transition: color .125s;
-  }
+  color: $link-color;
+  text-decoration: none;
+  transition: color .125s;
 
   &:visited {
     color: $link-color-visited;
   }
 
   &:active,
+  &:focus,
   &:hover {
     color: $link-color-hover;
     text-decoration: underline;
@@ -89,8 +102,8 @@ ul.actions {
   opacity: .5;
   padding: 0;
   position: absolute;
-  right: .4rem;
-  top: .4rem;
+  right: $spacer-xxs;
+  top: $spacer-xxs;
   transition: .25s;
 
   &:hover {
@@ -102,11 +115,11 @@ ul.actions {
     height: 1.6rem;
     line-height: 1.6rem;
     list-style: none;
-    margin: .4rem;
+    margin: $spacer-xxs;
     padding: 0;
 
     &.danger {
-      margin-left: 3.2rem;
+      margin-left: $spacer-m;
     }
 
     &.priority-changer {
@@ -119,9 +132,8 @@ ul.actions {
 
   a,
   button {
-    box-sizing: border-box;
     display: inline-block;
-    font-size: 1.2rem;
+    font-size: $font-size-decreased;
     height: 1.6rem;
     line-height: 1.6rem;
     margin: 0;
@@ -135,8 +147,28 @@ ul.actions {
   }
 }
 
+@supports (--css: vars) {
+  ul.actions {
+    right: var(--spacer-xxs);
+    top: var(--spacer-xxs);
+
+    > li {
+      margin: var(--spacer-xxs);
+
+      &.danger {
+        margin-left: var(--spacer-m);
+      }
+    }
+
+    a,
+    button {
+      font-size: var(--font-size-decreased);
+    }
+  }
+}
+
 .list-of-entities {
-  margin: 1.6rem 0;
+  margin: $spacer-s 0;
   padding: 0;
 
   > li {
@@ -146,7 +178,7 @@ ul.actions {
     flex-wrap: wrap;
     list-style: none;
     margin: 0;
-    padding: .8rem;
+    padding: $spacer-xs;
 
     &:nth-of-type(even) {
       background: $row-background-even;
@@ -154,7 +186,7 @@ ul.actions {
 
     .image {
       flex: none;
-      margin: 0 .8rem 0 0;
+      margin: 0 $spacer-xs 0 0;
       text-align: center;
       width: 8rem;
 
@@ -191,14 +223,15 @@ ul.actions {
         display: flex;
         flex-wrap: wrap;
 
-        .toggleable, > span {
-          margin: 0 .8rem;
+        .toggleable,
+        > span {
+          margin: 0 $spacer-xs;
         }
       }
 
       .children {
         border-left: .1rem dotted;
-        margin-left: var(--spacer-s);
+        margin-left: $spacer-s;
       }
     }
   }
@@ -216,18 +249,66 @@ ol.list-of-entities {
   > li[data-number]::before {
     content: attr(data-number) ":";
     display: inline-block;
-    margin: 0 .8rem 0 0;
+    margin: 0 $spacer-xs 0 0;
     text-align: right;
     width: 2.4rem;
   }
 }
 
+@supports (--css: vars) {
+  .list-of-entities {
+    margin: var(--spacer-s) 0;
+
+    > li {
+      padding: var(--spacer-xs);
+
+      .image {
+        margin-right: var(--spacer-xs);
+
+        img {
+          max-height: 8rem;
+          max-width: 8rem;
+        }
+
+        & + .data {
+          max-width: calc(100% - 8rem - var(--spacer-xs));
+        }
+      }
+
+      .data {
+        .info {
+          font-size: var(--font-size-decreased);
+        }
+
+        .compact {
+          .toggleable,
+          > span {
+            margin: 0 var(--spacer-xs);
+          }
+        }
+
+        .children {
+          margin-left: var(--spacer-s);
+        }
+      }
+    }
+  }
+
+  ol.list-of-entities {
+    > li[data-number]::before {
+      margin-right: var(--spacer-xs);
+    }
+  }
+}
+
 .breadcrumbs {
   a {
     background: image_url('biovision/base/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/base/icons/breadcrumb-hover.svg');
     }
@@ -240,12 +321,12 @@ form {
 
   .guideline {
     color: $text-color-secondary;
-    font-size: var(--font-size-decreased);
+    font-size: $font-size-decreased;
     margin: 0;
 
     &::before {
       content: '\261E';
-      margin-right: .4rem;
+      margin-right: $spacer-xxs;
     }
   }
 
@@ -254,7 +335,11 @@ form {
 
     &::before {
       content: '\261D';
-      margin-right: .4rem;
+      margin-right: $spacer-xxs;
+    }
+
+    &:empty {
+      display: none;
     }
   }
 
@@ -264,12 +349,12 @@ form {
   }
 
   dt {
-    font: 500 var(--font-size-increased) $font-family-main;
+    font: 500 $font-size-increased $font-family-main;
 
     &:not(:first-of-type) {
       border-top: $border-secondary;
-      margin: .8rem 0 0 0;
-      padding: .4rem 0 0 0;
+      margin: $spacer-xs 0 0 0;
+      padding: $spacer-xxs 0 0 0;
     }
   }
 
@@ -294,7 +379,7 @@ form {
   }
 
   ul.flags {
-    margin: .8rem 0;
+    margin: $spacer-xs 0;
     padding: 0;
 
     li {
@@ -305,6 +390,37 @@ form {
   }
 }
 
+@supports (--css: vars) {
+  form {
+    .guideline {
+      font-size: var(--font-size-decreased);
+
+      &::before {
+        margin-right: var(--spacer-xxs);
+      }
+    }
+
+    .check-result-error {
+      &::before {
+        margin-right: var(--spacer-xxs);
+      }
+    }
+
+    ul.flags {
+      margin: var(--spacer-xs) 0;
+    }
+
+    dt {
+      font-size: var(--font-size-increased);
+
+      &:not(:first-of-type) {
+        margin-top: var(--spacer-xs);
+        padding-top: var(--spacer-xxs);
+      }
+    }
+  }
+}
+
 .hidden {
   display: none !important;
 }