biovision-base 0.5.170614

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

@@ -0,0 +1,90 @@
+@mixin styled-button($bg-a, $bg-b, $bg-c, $bg-d, $border-a, $border-b, $text-a, $text-b) {
+  background: $bg-a linear-gradient(to top, $bg-a, $bg-b);
+  border: .1rem solid $border-a;
+  border-radius: .6rem;
+  box-sizing: border-box;
+  color: $text-a;
+  cursor: pointer;
+  display: inline-block;
+  font: $decreased-font-size $main-font-family;
+  line-height: calc(#{$normal-font-size} * 1.5);
+  margin: 0;
+  padding: 0 1.6rem;
+  text-decoration: none;
+
+  &:active,
+  &:hover,
+  &:focus {
+    background: $bg-c linear-gradient(to top, $bg-c, $bg-d);
+    border-color: $border-b;
+    color: $text-b;
+  }
+}
+
+@mixin action-button {
+  @include styled-button(
+                  $button-action-bg-a,
+                  $button-action-bg-b,
+                  $button-action-bg-c,
+                  $button-action-bg-d,
+                  $button-action-border-color-a,
+                  $button-action-border-color-b,
+                  $button-action-text-color-a,
+                  $button-action-text-color-b
+  );
+}
+
+@mixin nav-button {
+  @include styled-button(
+                  $button-nav-bg-a,
+                  $button-nav-bg-b,
+                  $button-nav-bg-c,
+                  $button-nav-bg-d,
+                  $button-nav-border-color-a,
+                  $button-nav-border-color-b,
+                  $button-nav-text-color-a,
+                  $button-nav-text-color-b
+  );
+}
+
+@mixin create-button {
+  @include styled-button(
+                  $button-create-bg-a,
+                  $button-create-bg-b,
+                  $button-create-bg-c,
+                  $button-create-bg-d,
+                  $button-create-border-color-a,
+                  $button-create-border-color-b,
+                  $button-create-text-color-a,
+                  $button-create-text-color-b
+  );
+}
+
+@mixin destroy-button {
+  @include styled-button(
+                  $button-destroy-bg-a,
+                  $button-destroy-bg-b,
+                  $button-destroy-bg-c,
+                  $button-destroy-bg-d,
+                  $button-destroy-border-color-a,
+                  $button-destroy-border-color-b,
+                  $button-destroy-text-color-a,
+                  $button-destroy-text-color-b
+  );
+}
+
+.action-button {
+  @include action-button;
+}
+
+.nav-button {
+  @include nav-button;
+}
+
+.create-button {
+  @include create-button;
+}
+
+.destroy-button {
+  @include destroy-button;
+}

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

@@ -0,0 +1,45 @@
+$main-font-family: "PT Sans", sans-serif;
+
+$row_background_even: #f0f0f0;
+$row_background_odd: #fafafa;
+
+$primary-text-color: #000;
+$secondary-text-color: #777;
+
+$block-shadow: 0 0 .2rem .2rem rgba(0, 0, 0, .25);
+
+$button-action-bg-a: #2e3c8e;
+$button-action-bg-b: #515da3;
+$button-action-bg-c: #3d94f6;
+$button-action-bg-d: #1e62d0;
+$button-action-border-color-a: #2e3c8e;
+$button-action-border-color-b: #515da3;
+$button-action-text-color-a: #fff;
+$button-action-text-color-b: #fff;
+
+$button-nav-bg-a: #fff;
+$button-nav-bg-b: #fafafa;
+$button-nav-bg-c: #1e62d0;
+$button-nav-bg-d: #3d94f6;
+$button-nav-border-color-a: #2e3c8e;
+$button-nav-border-color-b: #2e3c8e;
+$button-nav-text-color-a: #3d94f6;
+$button-nav-text-color-b: #fff;
+
+$button-create-bg-a: #68a54b;
+$button-create-bg-b: #74ad5a;
+$button-create-bg-c: #5ba337;
+$button-create-bg-d: #59ab33;
+$button-create-border-color-a: #3b6e22;
+$button-create-border-color-b: #3b6e22;
+$button-create-text-color-a: #fff;
+$button-create-text-color-b: #fff;
+
+$button-destroy-bg-a: #a54b68;
+$button-destroy-bg-b: #ad5a74;
+$button-destroy-bg-c: #a3375b;
+$button-destroy-bg-d: #ab3359;
+$button-destroy-border-color-a: #6e223b;
+$button-destroy-border-color-b: #6e223b;
+$button-destroy-text-color-a: #fff;
+$button-destroy-text-color-b: #fff;

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

@@ -0,0 +1,53 @@
+form.filter fieldset {
+  font-size: $small-font-size;
+  line-height: calc(#{$normal-font-size} * 1.5);
+
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+
+    input {
+      font-size: $small-font-size;
+    }
+
+    > div {
+      font-weight: bold;
+      min-width: 6.4rem;
+
+      &:first-letter {
+        text-transform: uppercase;
+      }
+    }
+
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+        padding: 0 .4rem;
+
+        label {
+          padding: 0 .4rem;
+        }
+
+        input[type=radio],
+        input[type=checkbox]
+        {
+          display: none;
+
+          &:checked + label {
+            background: #afa;
+          }
+        }
+      }
+    }
+  }
+
+  button {
+    margin: .8rem 0 0 0;
+    font-size: $small-font-size;
+  }
+}

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

@@ -0,0 +1,9 @@
+$huge-font-size: 4.8rem;
+$larger-font-size: 3.2rem;
+$large-font-size: 2.4rem;
+$increased-font-size: 1.8rem;
+$normal-font-size: 1.6rem;
+$decreased-font-size: 1.4rem;
+$small-font-size: 1.2rem;
+$smaller-font-size: 1rem;
+$tiny-font-size: 0.8rem;

data/app/assets/stylesheets/biovision/base/message-box.scss

@@ -0,0 +1,60 @@
+@mixin message-box($background-color, $background-image, $color, $border-color) {
+  background: $background-color $background-image no-repeat 1.6rem 1.6rem / 1.6rem 1.6rem;
+  border: .1rem dashed $border-color;
+  color: $color;
+  margin: 0 1.6rem .8rem;
+  padding: 1.6rem 1.6rem 1.6rem 4.8rem;
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.message-box-notice {
+  @include message-box(#efe, image_url('biovision/base/icons/notice.svg'), #040, #ded);
+}
+
+.message-box-warning {
+  @include message-box(#ffe, image_url('biovision/base/icons/warning.svg'), #440, #eed);
+}
+
+.message-box-alert {
+  @include message-box(#fee, image_url('biovision/base/icons/alert.svg'), #400, #edd);
+}
+
+section.errors {
+  border: .1rem solid #edd;
+  margin: 1.6rem;
+  padding: 1.6rem;
+
+  > h2 {
+    background: #fee image_url('biovision/base/icons/alert.svg') no-repeat center left 1.6rem / 1.6rem 1.6rem;
+    color: #400;
+    font-size: $large-font-size;
+    padding: 1.6rem 1.6rem 1.6rem 4.8rem;
+  }
+
+  ol {
+    color: #700;
+  }
+}
+
+.field_with_errors {
+  display: inline-block;
+  background: #fee;
+}
+
+span.not-found {
+  color: #faa;
+  cursor: default;
+
+  &:before {
+    content: '\26A0';
+    color: #f00;
+    margin-right: .4rem;
+  }
+}

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

@@ -0,0 +1,42 @@
+nav.pagination {
+  margin: 1.6rem 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  span {
+    display: inline-block;
+    padding: 0 0.4rem;
+    line-height: 2.4rem;
+    min-width: 1.6rem;
+    text-align: center;
+
+    &.current {
+      background: #f7f7f7;
+      color: #222;
+    }
+
+    &.gap {
+      border: none;
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  nav.pagination {
+    font-size: 2.4rem;
+
+    span {
+      padding: 0.4rem 0.8rem;
+      margin: 0 0.8rem;
+
+      &.page {
+        display: none;
+
+        &.current {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,385 @@
+// https://eliorshalev.github.io/tootik/
+
+$tootik_background_color: #000000;
+$tootik_success_color: #8bc34a;
+$tootik_info_color: #29d2e4;
+$tootik_warning_color: #f87d09;
+$tootik_danger_color: #e91e63;
+$tootik_text_color: #ffffff;
+
+[data-tootik] {
+  position: relative;
+
+  &:after {
+    content: attr(data-tootik);
+    box-sizing: border-box;
+    font-style: normal;
+    text-align: center;
+    padding: 6px 6px 5px;
+    font-size: 13px;
+    line-height: 14px;
+    border-radius: 7px;
+    color: $tootik_text_color;
+    transition: opacity .3s cubic-bezier(.73, .01, 0, 1), transform .3s cubic-bezier(.73, .01, 0, 1);
+    pointer-events: none;
+    z-index: 100000;
+    white-space: nowrap;
+    bottom: 100%;
+    transform: translate(-50%, 12px);
+    max-width: 320px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    background: $tootik_background_color;
+  }
+
+  &:after, &:before {
+    opacity: 0;
+    position: absolute;
+    left: 50%;
+    backface-visibility: hidden;
+  }
+
+  &:before {
+    border: 4px solid transparent;
+    border-top-color: $tootik_background_color;
+    border-bottom-width: 0;
+    content: '';
+    top: -2px;
+    width: 0;
+    height: 0;
+    transform: translate(-50%, calc(-50% - 6px));
+    transition: opacity .1s cubic-bezier(.73, .01, 0, 1) 0s, transform .6s cubic-bezier(.73, .01, 0, 1) 0s;
+    z-index: 110000;
+  }
+
+  &[data-tootik-conf*=right]:before {
+    border-top-color: transparent;
+    border-right-color: $tootik_background_color;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  &[data-tootik-conf*=bottom]:before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: $tootik_background_color;
+    border-left-color: transparent;
+  }
+
+  &[data-tootik-conf*=left]:before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: $tootik_background_color;
+  }
+
+  &:focus:after, &:focus:before, &:hover:after, &:hover:before {
+    opacity: 1;
+  }
+
+  &:focus:before, &:hover:before {
+    transition: opacity .1s cubic-bezier(.73, .01, 0, 1) .1s, transform .6s cubic-bezier(.73, .01, 0, 1) .1s;
+    transform: translate(-50%, calc(-50% - 2px));
+  }
+
+  &:focus:after, &:hover:after {
+    transform: translate(-50%, -6px);
+  }
+
+  &[data-tootik-conf*=right] {
+    &:before {
+      border: 4px solid;
+      border-left-width: 0;
+      left: auto;
+      right: -6px;
+      top: 50%;
+      transform: translate(calc(-50% + 7px), -50%);
+    }
+
+    &:after {
+      top: 50%;
+      left: 100%;
+      bottom: auto;
+      transform: translate(-12px, -50%);
+    }
+
+    &:focus:before, &:hover:before {
+      transform: translate(calc(-50% + 3px), -50%);
+    }
+
+    &:focus:after, &:hover:after {
+      transform: translate(7px, -50%);
+    }
+  }
+
+  &[data-tootik-conf*=bottom] {
+    &:before {
+      border: 4px solid;
+      border-top-width: 0;
+      top: auto;
+      bottom: -6px;
+      left: 50%;
+      transform: translate(-50%, calc(-50% + 6px));
+    }
+
+    &:after {
+      top: 100%;
+      left: 50%;
+      bottom: auto;
+      transform: translate(-50%, -12px);
+    }
+
+    &:focus:before, &:hover:before {
+      transform: translate(-50%, calc(-50% + 2px));
+    }
+
+    &:focus:after, &:hover:after {
+      transform: translate(-50%, 6px);
+    }
+  }
+
+  &[data-tootik-conf*=left] {
+    &:before {
+      border: 4px solid;
+      border-right-width: 0;
+      left: -2px;
+      top: 50%;
+      width: 0;
+      height: 0;
+      transform: translate(calc(-50% - 8px), -50%);
+    }
+
+    &:after {
+      top: 50%;
+      right: 100%;
+      bottom: auto;
+      left: auto;
+      transform: translate(12px, -50%);
+    }
+
+    &:focus:after, &:hover:after {
+      transform: translate(-7px, -50%);
+    }
+
+    &:focus:before, &:hover:before {
+      transform: translate(calc(-50% - 3px), -50%);
+    }
+  }
+
+  &[data-tootik-conf*=multiline]:after {
+    word-break: break-all;
+    white-space: normal;
+    min-width: 140px;
+    max-width: 140px;
+    text-overflow: clip;
+  }
+
+  &[data-tootik-conf*=delay] {
+    &:before {
+      transition: opacity .2s cubic-bezier(.73, .01, 0, 1) 0s, transform .3s cubic-bezier(.73, .01, 0, 1) 0s;
+    }
+
+    &:after {
+      transition: opacity .3s cubic-bezier(.73, .01, 0, 1) 0s, transform .3s cubic-bezier(.73, .01, 0, 1) 0s;
+    }
+
+    &:focus:before, &:hover:before {
+      transition: opacity .2s cubic-bezier(.73, .01, 0, 1) .5s, transform .6s cubic-bezier(.73, .01, 0, 1) .5s;
+    }
+
+    &:focus:after, &:hover:after {
+      transition: opacity .3s cubic-bezier(.73, .01, 0, 1) .4s, transform .3s cubic-bezier(.73, .01, 0, 1) .4s;
+    }
+  }
+
+  &[data-tootik-conf*=shadow]:after {
+    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1);
+  }
+
+  &[data-tootik-conf*=no-fading]:after, &[data-tootik-conf*=no-fading]:before {
+    transition: none;
+  }
+
+  &[data-tootik-conf*=no-arrow]:before {
+    display: none;
+  }
+
+  &[data-tootik-conf*=square]:after {
+    border-radius: 0;
+  }
+
+  &[data-tootik-conf*=invert] {
+    &:after {
+      color: $tootik_background_color;
+      background: $tootik_text_color;
+    }
+
+    &:before {
+      border-top-color: $tootik_text_color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=right]:before {
+      border-top-color: transparent;
+      border-right-color: $tootik_text_color;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=bottom]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: $tootik_text_color;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=left]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $tootik_text_color;
+    }
+  }
+
+  &[data-tootik-conf*=success] {
+    &:after {
+      background: $tootik_success_color;
+    }
+
+    &:before {
+      border-top-color: $tootik_success_color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent
+    }
+
+    &[data-tootik-conf*=right]:before {
+      border-top-color: transparent;
+      border-right-color: $tootik_success_color;
+      border-bottom-color: transparent;
+      border-left-color: transparent
+    }
+
+    &[data-tootik-conf*=bottom]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: $tootik_success_color;
+      border-left-color: transparent
+    }
+
+    &[data-tootik-conf*=left]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $tootik_success_color;
+    }
+  }
+
+  &[data-tootik-conf*=info] {
+    &:after {
+      background: $tootik_info_color;
+    }
+
+    &:before {
+      border-top-color: $tootik_info_color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=right]:before {
+      border-top-color: transparent;
+      border-right-color: $tootik_info_color;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=bottom]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: $tootik_info_color;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=left]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $tootik_info_color;
+    }
+  }
+
+  &[data-tootik-conf*=warning] {
+    &:after {
+      background: $tootik_warning_color;
+    }
+
+    &:before {
+      border-top-color: $tootik_warning_color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=right]:before {
+      border-top-color: transparent;
+      border-right-color: $tootik_warning_color;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=bottom]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: $tootik_warning_color;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=left]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $tootik_warning_color;
+    }
+  }
+
+  &[data-tootik-conf*=danger] {
+    &:after {
+      background: $tootik_danger_color;
+    }
+
+    &:before {
+      border-top-color: $tootik_danger_color;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=right]:before {
+      border-top-color: transparent;
+      border-right-color: $tootik_danger_color;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=bottom]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: $tootik_danger_color;
+      border-left-color: transparent;
+    }
+
+    &[data-tootik-conf*=left]:before {
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $tootik_danger_color;
+    }
+  }
+
+  &[data-tootik='']:after, &[data-tootik='']:before {
+    display: none;
+  }
+}