biovision-base 0.11.180127 → 0.14.180326

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

@@ -1,3 +1,51 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font: 10px $font-family-main;
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+}
+
+h1, h2, h3, h4, h6, h6 {
+  font-family: $font-family-heading;
+  font-weight: 500;
+  margin: 0;
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 4.2rem;
+}
+
+a:link {
+  color: $link-color;
+  text-decoration: none;
+  transition: color .125s;
+}
+
+a:visited {
+  color: $link-color-visited;
+}
+
+a:active,
+a:hover {
+  color: $link-color-hover;
+  text-decoration: underline;
+}
+
+figure {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
 article {
   position: relative;
 }
@@ -70,7 +118,7 @@ ul.actions {
   padding: 0;
 
   > li {
-    align-items: center;
+    align-items: flex-start;
     background: $row-background-odd;
     display: flex;
     flex-wrap: wrap;
@@ -82,14 +130,6 @@ ul.actions {
       background: $row-background-even;
     }
 
-    &[data-number]::before {
-      content: attr(data-number) ":";
-      display: inline-block;
-      margin: 0 .8rem 0 0;
-      text-align: right;
-      width: 2.4rem;
-    }
-
     .image {
       flex: none;
       margin: 0 .8rem 0 0;
@@ -142,43 +182,34 @@ ul.actions {
   }
 }
 
-.dashboard {
-  display: flex;
-  flex-wrap: wrap;
-
-  nav {
-    margin: .4rem;
-    width: 31rem;
-  }
-
-  .heading {
-    display: block;
-    font: 500 1.8rem/1.5 $font-family-heading;
-    text-align: center;
+ul.list-of-entities {
+  ul.actions {
+    > li.priority-changer {
+      display: none;
+    }
   }
+}
 
-  ul {
-    box-shadow: $block-shadow;
-    margin: .4rem;
-    padding: 0;
+ol.list-of-entities {
+  > li[data-number]::before {
+    content: attr(data-number) ":";
+    display: inline-block;
+    margin: 0 .8rem 0 0;
+    text-align: right;
+    width: 2.4rem;
   }
+}
 
-  li {
-    background: $row-background-odd;
-    list-style: none;
-    margin: 0;
-    padding: .8rem;
-    position: relative;
+.breadcrumbs {
+  a {
+    background: image_url('biovision/base/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
+    padding-right: 1rem;
+    transition: background .25s;
 
-    &:nth-last-of-type(even) {
-      background: $row-background-even;
+    &:hover {
+      background-image: image_url('biovision/base/icons/breadcrumb-hover.svg');
     }
   }
-
-  .description {
-    color: $text-color-secondary;
-    font-size: $font-size-decreased;
-  }
 }
 
 form {
@@ -196,19 +227,48 @@ form {
     }
   }
 
+  .check-result-error {
+    color: #ff0000;
+
+    &::before {
+      content: '\261D';
+      margin-right: .4rem;
+    }
+  }
+
   dl {
     margin: 0;
     padding: 0;
   }
 
-  dd,
   dt {
-    margin: 0;
-    padding: 0;
+    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;
+    }
+  }
+
+  dd {
+    padding: .2rem 0;
+
+    ul {
+      margin: 0 auto;
+      padding: 0;
+
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+      }
+    }
   }
 
-  dt:not(:first-of-type) {
-    margin-top: .8rem;
+  input {
+    font-size: $font-size-normal;
   }
 
   ul.flags {

data/app/assets/stylesheets/biovision/base/buttons/buttons-common.scss

@@ -0,0 +1,95 @@
+$font-size-normal: 1.4rem !default;
+$font-family-main: "Roboto", sans-serif !default;
+
+$button-action-bg-a: #2e3c8e !default;
+$button-action-bg-b: #3d94f6 !default;
+$button-action-border-a: #515de3 !default;
+$button-action-border-b: $button-action-border-a !default;
+$button-action-text-a: #fff !default;
+$button-action-text-b: $button-action-text-a !default;
+
+$button-nav-bg-a: $button-action-text-a !default;
+$button-nav-bg-b: #1e62d0 !default;
+$button-nav-border-a: $button-action-border-a !default;
+$button-nav-border-b: $button-nav-border-a !default;
+$button-nav-text-a: $button-action-bg-b !default;
+$button-nav-text-b: $button-nav-bg-a !default;
+
+$button-save-bg-a: #68a54b !default;
+$button-save-bg-b: #5ba337 !default;
+$button-save-border-a: #3b6e22 !default;
+$button-save-border-b: $button-save-border-a !default;
+$button-save-text-a: $button-action-text-a !default;
+$button-save-text-b: $button-save-text-a !default;
+
+$button-destroy-bg-a: #a54b68 !default;
+$button-destroy-bg-b: #a3375b !default;
+$button-destroy-border-a: #6e223b !default;
+$button-destroy-border-b: $button-destroy-border-a !default;
+$button-destroy-text-a: $button-action-text-a !default;
+$button-destroy-text-b: $button-destroy-text-a !default;
+
+[class|=button],
+[class|=button]:link,
+[class|=button]:visited {
+  border: .1rem solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font: #{$font-size-normal}/1.5 $font-family-main;
+  padding: 0 1.2rem;
+  text-decoration: none;
+  transition: .125s;
+
+  &:disabled {
+    cursor: default;
+    filter: grayscale(75%);
+  }
+}
+
+@mixin button($bg-a, $text-a, $bg-b, $text-b) {
+  background: $bg-a;
+  color: $text-a;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background: $bg-b;
+    color: $text-b;
+  }
+}
+
+@mixin border-button($border-a, $border-b) {
+  border-color: $border-a;
+
+  &:active,
+  &:focus,
+  &:hover {
+    border-color: $border-b;
+  }
+}
+
+.button-action,
+.button-action:link,
+.button-action:visited {
+  @include button($button-action-bg-a, $button-action-text-a, $button-action-bg-b, $button-action-text-b);
+}
+
+.button-nav,
+.button-nav:link,
+.button-nav:visited {
+  @include button($button-nav-bg-a, $button-nav-text-a, $button-nav-bg-b, $button-nav-text-b);
+  @include border-button($button-nav-border-a, $button-nav-border-b);
+}
+
+.button-save,
+.button-save:link,
+.button-save:visited {
+  @include button($button-save-bg-a, $button-save-text-a, $button-save-bg-b, $button-save-text-b);
+}
+
+.button-destroy,
+.button-destroy:link,
+.button-destroy:visited {
+  @include button($button-destroy-bg-a, $button-destroy-text-a, $button-destroy-bg-b, $button-destroy-text-b);
+}

data/app/assets/stylesheets/biovision/base/buttons/buttons-rounded.scss

@@ -0,0 +1,26 @@
+@import "buttons-common";
+
+[class|=button],
+[class|=button]:link,
+[class|=button]:visited {
+  border-radius: .4rem;
+  border: .1rem solid;
+}
+
+.button-action,
+.button-action:link,
+.button-action:visited {
+  @include border-button($button-action-border-a, $button-action-border-b);
+}
+
+.button-save,
+.button-save:link,
+.button-save:visited {
+  @include border-button($button-save-border-a, $button-save-border-b);
+}
+
+.button-destroy,
+.button-destroy:link,
+.button-destroy:visited {
+  @include border-button($button-destroy-border-a, $button-destroy-border-b);
+}

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

@@ -1,5 +1,5 @@
-$font-family-heading: "Cormorant Garamond", serif !default;
 $font-family-main: "Roboto", sans-serif !default;
+$font-family-heading: $font-family-main !default;
 
 $font-size-large: 2rem !default;
 $font-size-increased: 1.6rem !default;
@@ -24,7 +24,7 @@ $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 0%, #dfdedc 100%) no-repeat center / cover !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;

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

@@ -29,7 +29,7 @@ $link-color-visited: rgb(20, 77, 250) !default;
 $link-color-hover: rgb(255, 77, 20) !default;
 
 @import "biovision/base/toggleable";
-@import "biovision/base/buttons";
+@import "biovision/base/buttons/buttons-common";
 @import "biovision/base/biovision";
 @import "biovision/base/admin";
 @import "biovision/base/tootik";

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

@@ -1,5 +1,5 @@
 @import "biovision/base/toggleable";
-@import "biovision/base/buttons";
+@import "biovision/base/buttons/buttons-common";
 @import "biovision/base/biovision";
 @import "biovision/base/tootik";
 @import "biovision/base/message-box";

data/app/assets/stylesheets/biovision/base/themes/simple-layout.scss

@@ -0,0 +1,115 @@
+@import "biovision/base/default";
+
+h1, h2, h3, h4, h5, h6 {
+  color: $text-color-heading;
+}
+
+body {
+  background: $background-body;
+  color: $text-color-primary;
+  font-size: $font-size-normal;
+  margin: 0;
+  min-height: 100vh;
+  min-width: $content-width-min;
+  padding: 0;
+
+  > footer,
+  > header {
+    padding: .4rem 0;
+
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0 auto;
+      max-width: $content-width;
+      padding: .4rem;
+    }
+
+    .authentication {
+      margin: 0 0 0 auto;
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      .links {
+        a:link,
+        a:visited {
+          margin: 0 .4rem;
+        }
+      }
+
+      .plate {
+        a {
+          margin-left: .8rem;
+        }
+      }
+    }
+  }
+
+  > header {
+    background: $background-header;
+    border-bottom: $border-primary;
+
+    > div {
+      align-items: center;
+    }
+
+    .logo {
+      margin-right: auto;
+    }
+  }
+
+  > footer {
+    background: $background-footer;
+    border-top: $border-primary;
+    margin: auto 0 0 0;
+
+    > div {
+      align-items: flex-start;
+      color: $text-color-secondary;
+      display: flex;
+      flex-wrap: wrap;
+      font-size: $font-size-decreased;
+    }
+
+    nav {
+      margin: 0 0 0 auto;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+@supports (display: flex) {
+  body {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#main {
+  background: $background-main;
+  flex: 1;
+  margin: 0 auto;
+  max-width: $content-width;
+  padding: .8rem;
+  width: 100%;
+}
+
+form {
+  input:not([type=checkbox]):not([type=radio]):not([type=date]):not([type=number]):not([size]),
+  textarea {
+    width: 100%;
+  }
+}