biovision-base 0.5.170614

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

@@ -0,0 +1,58 @@
+.entity-page {
+  figure.preview {
+    margin: 0;
+
+    img {
+      max-width: 32rem;
+    }
+  }
+
+  dl {
+    margin: 0 0 1.6rem 0;
+    padding: 0;
+
+    dt {
+      border-top: .1rem solid #f0f0f0;
+      margin: 1rem 0 0 0;
+      padding: 0;
+    }
+
+    dd {
+      margin: 0 0 0 .8rem;
+      padding: 0;
+
+      input,
+      textarea {
+        font-size: $normal-font-size;
+      }
+
+      input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
+      textarea {
+        width: calc(100% - 1rem);
+      }
+    }
+  }
+
+  ul.flags {
+    margin: 1.6rem 0;
+    padding: 0;
+
+    > li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      label {
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+nav.admin-breadcrumbs {
+  a::after {
+    color: $primary-text-color;
+    content: ' / ';
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,472 @@
+$toggleable-active: #34c749;
+$toggleable-inactive: #fc605c;
+$toggleable-switch: #fdbc40;
+$toggleable-unknown: #c0c0c0;
+$toggleable-background: #fff;
+
+.toggleable {
+  font-size: $small-font-size;
+  margin: .8rem;
+
+  > span {
+    background-color: $toggleable-background;
+    border: .1rem solid;
+    border-radius: .8rem;
+    cursor: pointer;
+    display: inline-block;
+    line-height: calc(#{$small-font-size} * 2);
+    margin: .4rem;
+    padding: 0 .8rem 0 0;
+
+    &::before {
+      border-radius: .6rem 0 0 .6rem;
+      display: inline-block;
+      line-height: calc(#{$small-font-size} * 2);
+      margin: 0 .4rem 0 0;
+      text-align: center;
+      width: 2.2rem;
+    }
+  }
+
+  .active {
+    border-color: $toggleable-active;
+
+    &::before {
+      background-color: $toggleable-active;
+      content: '\2611';
+    }
+  }
+
+  .inactive {
+    border-color: $toggleable-inactive;
+
+    &::before {
+      background-color: $toggleable-inactive;
+      content: '\2610';
+    }
+  }
+
+  .switch {
+    border-color: $toggleable-switch;
+    cursor: not-allowed;
+
+    &::before {
+      background-color: $toggleable-switch;
+      content: '\231B';
+    }
+  }
+
+  .unknown {
+    border-color: $toggleable-unknown;
+
+    &::before {
+      background-color: $toggleable-unknown;
+      content: '\26A0';
+    }
+  }
+}
+
+article.entity-page {
+  position: relative;
+
+  > nav {
+    ul {
+      margin: 1.6rem 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+        display: inline-block;
+        margin: 0 1.6rem;
+
+        a {
+          @include nav-button;
+        }
+      }
+    }
+  }
+
+  > section {
+    border-top: .1rem solid $secondary-text-color;
+    padding: .8rem 0 0 0;
+
+    > h2 {
+      font-size: $increased-font-size;
+    }
+  }
+
+  table {
+    border-spacing: 0;
+    margin: 1.6rem;
+
+    figure {
+      margin: 0;
+      padding: 0;
+      text-align: center;
+
+      img {
+        max-height: 32rem;
+        max-width: 32rem;
+      }
+    }
+
+    tbody {
+      tr:nth-of-type(even) {
+        background: $row-background-even;
+      }
+
+      tr:nth-of-type(odd) {
+        background: $row-background-odd;
+      }
+
+      th {
+        padding: .4rem .8rem;
+        text-align: right;
+      }
+
+      td {
+        padding: .4rem .8rem;
+
+        &[colspan]:first-letter {
+          text-transform: capitalize;
+        }
+
+        figure {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  form {
+    table {
+      th {
+        font-weight: normal;
+        line-height: 2.8rem;
+        text-align: right;
+        vertical-align: top;
+
+        &[colspan] {
+          border-top: .1rem solid $secondary-text-color;
+          font-weight: bold;
+          padding-top: 1.6rem;
+          text-align: center;
+        }
+      }
+
+      input[type=text]:not([size]), input[type=url], textarea {
+        width: calc(100% - 1rem);
+      }
+
+      tfoot {
+        tr {
+          td {
+            padding: .8rem 0;
+            text-align: center;
+          }
+        }
+      }
+
+      .flags {
+        text-align: left;
+
+        ul {
+          margin: 0;
+          padding: 0;
+
+          > li {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            label {
+              font-weight: normal;
+            }
+          }
+        }
+      }
+
+      .tree {
+        text-align: left;
+
+        > ul {
+          margin: 0;
+          padding: 0;
+
+          li {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            label {
+              font-weight: normal;
+            }
+
+            ul {
+              margin: 0 0 0 2rem;
+              padding: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .fields {
+      figure {
+        margin: 0 auto;
+        padding: 0;
+        max-width: 32rem;
+        text-align: center;
+
+        img {
+          max-width: 100%;
+        }
+      }
+
+      > div {
+        background: $row_background_odd;
+        padding: .4rem 0;
+
+        &:nth-of-type(even) {
+          background: $row_background_even;
+        }
+
+        > div {
+          padding: 0 .4rem;
+        }
+      }
+
+      ul.flags {
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style: none;
+          margin: 0;
+          padding: .4rem;
+        }
+      }
+
+      input:not([type=checkbox]):not([size]), textarea {
+        width: calc(100% - 1rem);
+      }
+    }
+  }
+}
+
+ul.actions {
+  align-items: center;
+  background: #fff;
+  border-radius: .4rem;
+  box-shadow: $block-shadow;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+  opacity: .5;
+  padding: 0;
+  position: absolute;
+  right: .4rem;
+  top: .4rem;
+  transition: .25s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  > li {
+    flex-basis: 1.6rem;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    list-style: none;
+    margin: .4rem;
+
+    &.danger {
+      margin-left: 3.2rem;
+    }
+
+    &.priority-changer {
+      align-items: center;
+      display: flex;
+      flex-basis: 3.6rem;
+      justify-content: space-between;
+    }
+
+    > a, button {
+      box-sizing: border-box;
+      display: inline-block;
+      font-size: 1.2rem;
+      height: 1.6rem;
+      line-height: 1.6rem;
+      margin: 0;
+      padding: 0;
+      width: 1.6rem;
+    }
+
+    img {
+      max-height: 1.6rem;
+      max-width: 1.6rem;
+    }
+  }
+}
+
+.list-of-entities {
+  margin: 1.6rem 0;
+  padding: 0;
+
+  > li {
+    align-items: center;
+    background: $row-background-odd;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0.8rem;
+
+    &:nth-of-type(even) {
+      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-basis: 8rem;
+      margin: 0 .8rem 0 0;
+      text-align: center;
+
+      img {
+        max-height: 8rem;
+        max-width: 8rem;
+      }
+
+      & + .data {
+        max-width: calc(100% - 8.8rem);
+      }
+    }
+
+    .data {
+      flex: 1;
+      max-width: 100%;
+      position: relative;
+
+      .info {
+        font-size: $small-font-size;
+      }
+
+      .secondary {
+        color: $secondary-text-color;
+      }
+
+      .truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .compact {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+
+        .toggleable, > span {
+          margin: 0 .8rem;
+        }
+      }
+
+      .children {
+        border-left: .1rem dotted;
+        margin-left: 1.6rem;
+      }
+    }
+  }
+}
+
+.dashboard {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  nav {
+    box-shadow: $block-shadow;
+    margin: .4rem;
+    max-width: 32rem;
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        background: $row-background-odd;
+        list-style: none;
+        margin: 0;
+        padding: .4rem;
+        position: relative;
+
+        &:nth-last-of-type(even) {
+          background: $row-background-even;
+        }
+
+        .description {
+          color: $secondary-text-color;
+          font-size: $decreased-font-size;
+        }
+      }
+    }
+  }
+}
+
+form {
+  .guideline {
+    color: $secondary-text-color;
+    font-size: $decreased-font-size;
+    margin: 0;
+
+    &::before {
+      content: '\261E';
+      margin-right: .4rem;
+    }
+  }
+
+  button {
+    @include action-button;
+  }
+}
+
+.hidden {
+  display: none !important;
+}
+
+div.user-search {
+  .message-box-warning {
+    background-position: left .4rem center;
+    font-weight: 400;
+    margin: .4rem;
+    padding: .4rem .4rem .4rem 2.4rem;
+  }
+
+  .results {
+    ul {
+      margin: .4rem;
+      padding: 0;
+
+      li {
+        cursor: pointer;
+        font-size: 1.4rem;
+        font-weight: 400;
+        line-height: 2rem;
+        list-style: none;
+        margin: 0;
+        padding: 0 .4rem;
+
+        &:hover {
+          outline: .1rem solid #070;
+        }
+      }
+    }
+  }
+}