elabs 4.0.0 → 5.0.0

data/app/assets/stylesheets/elabs/app/layouts/_page_messages.scss

@@ -0,0 +1,4 @@
+// Page Flash messages --------------
+.page__messages {
+  @extend %content-container;
+}

data/app/assets/stylesheets/elabs/app/layouts/_private_layout.scss

@@ -0,0 +1,78 @@
+.page {
+
+  &--admin,
+  &--member {
+
+    .page {
+
+      &__content__container {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: $spacer-small;
+      }
+
+      &__header {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: $spacer-small;
+      }
+
+      &__actions {
+        width: 100%;
+        max-width: 100%;
+        padding: 0 $spacer-small $spacer-small $spacer-small;
+        background-color: transparent;
+        text-align: right;
+      }
+    }
+
+    .albums-list,
+    .announcements-list,
+    .articles-list,
+    .notes-list,
+    .projects-list,
+    .uploads-list,
+    .languages-list,
+    .licenses-list,
+    .tags-list,
+    .reports-list,
+    .users-list,
+    .notifications-list {
+      display: table;
+      font-size: .8em;
+
+      .is-icon,
+      .is-counter {
+        text-align: center;
+        max-width: 75px;
+      }
+
+      .actions {
+        text-align: right;
+        width: 100px;
+      }
+
+      .relations {
+
+        .album,
+        .project,
+        .tag {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.screen_size_warning {
+  background-color: $color-danger;
+  color: $color-white;
+  padding: $spacer-small;
+
+  // Responsive variations ------------
+  @include respond-to('large-up') {
+    display: none;
+  }
+}

data/app/assets/stylesheets/elabs/app/{_typo.scss → layouts/_typo.scss}

@@ -1,3 +1,4 @@
+// Text variants ----------------------
 @each $name, $background-color in $variants-list {
 
   .is-#{$name} {
@@ -5,6 +6,8 @@
   }
 }
 
+// Text sizes -------------------------
+
 .text--smaller {
   @include font-size('smaller');
 }

data/app/assets/stylesheets/elabs/app/mixins/_classifier_card.scss

@@ -0,0 +1,43 @@
+@mixin classifier-card($card-color) {
+
+  // General colors
+  $card-color-text: darken($card-color, 40%);
+  $card-color-title: $card-color-text;
+  $card-color-icon: darken($card-color-text, 15%);
+  $card-color-content: $card-color;
+
+  // Button colors
+  $button-color-background: darken($card-color, 30%);
+  $button-color-text: lighten($button-color-background, 40%);
+  $button-color-background-hover: $button-color-text;
+  $button-color-text-hover: $button-color-background;
+
+  // Style
+  @extend %classifier-card;
+  background-color: $card-color;
+
+  .content {
+
+    .btn--block {
+      background-color: $button-color-background;
+      color: $button-color-text;
+
+      &:hover {
+        background-color: $button-color-background-hover;
+        color: $button-color-text-hover;
+      }
+    }
+  }
+
+  header {
+
+    .icon {
+      color: $card-color-icon;
+    }
+
+    a:not(.btn) {
+      text-decoration: none;
+      color: $card-color-title;
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/mixins/_content_card.scss

@@ -0,0 +1,103 @@
+@mixin content-card($name, $color) {
+
+  .#{$name}-card {
+    $card-color-base: darken($color, 30%);
+    $card-color-title: darken($card-color-base, 40%);
+    $card-color-content: darken($card-color-base, 20%);
+    @extend %card;
+    background-color: $color;
+    color: $card-color-base;
+
+    > header {
+      position: relative; /* to anchor ul.information */
+
+      .header {
+        position: relative;
+        display: flex;
+        padding: $spacer-small;
+        border-bottom: 1px dashed $color-in-card-borders;
+
+        h3 {
+          margin: 0;
+          line-height: 1em;
+          flex-grow: 1;
+          font: {
+            size: 1.2em;
+            weight: $weight-medium;
+          }
+
+          a { // stylelint-disable-line
+            text-decoration: none;
+            color: $card-color-title;
+          }
+        }
+
+        .subtitle {
+          font-size: .8em;
+        }
+
+        // Responsive variations ------
+        @include respond-to('small-up') {
+          padding: $spacer-medium-plus;
+        }
+      }
+
+      &:hover {
+
+        ul.information {
+          display: block;
+        }
+      }
+
+      ul.information {
+        $background: darken($color, 5%);
+        display: none;
+        position: absolute;
+        left: $spacer-medium;
+        top: calc(100% - 1px);
+        list-style-type: none;
+        margin: 0 auto;
+        padding: $spacer-small $spacer-medium;
+        font-size: .8em;
+        min-height: 1em;
+        background-color: darken($color, 5%);
+        box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .2);
+        border: {
+          top: 1px solid darken($background, 15%);
+          radius: 0 0 5px 5px;
+        }
+        color: darken($card-color-content, 10%);
+        max-width: 75vw;
+
+        a {
+          color: $link-color;
+          text-decoration: none;
+
+          &:hover {
+            color: $link-color-hover;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    article {
+      padding: $spacer-medium;
+      color: $card-color-content;
+
+      pre {
+        @extend %content-code;
+      }
+
+      // Responsive variations --------
+      @include respond-to('small-up') {
+        padding: $spacer-medium-plus;
+      }
+    }
+
+    .more {
+      font-size: .8em;
+      text-align: right;
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/mixins/_content_full.scss

@@ -0,0 +1,158 @@
+@mixin content-full($name, $color) {
+
+  .#{$name}--full {
+    margin-bottom: $spacer-large-plus;
+
+    > aside {
+      font-size: .8em;
+      margin-bottom: $spacer-medium;
+
+      &.has-image {
+        display: flex;
+
+        .image {
+          flex: none;
+          height: 6.4rem;
+          margin-right: $spacer-small;
+        }
+
+        > ul {
+          flex-grow: 1;
+        }
+
+        // Responsive variations ------
+        @include respond-to('large-up') {
+          display: block;
+
+          .image {
+            background-color: $color-white;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+            margin: 0;
+            height: auto;
+            width: 100%;
+          }
+        }
+      }
+
+      &.always--inline {
+
+        > ul {
+          display: block;
+
+          li {
+            display: inline-block;
+
+            /* stylelint-disable max-nesting-depth */
+
+            &.separator:not(:first-child) {
+              border-top: 1px dashed $color-borders;
+              margin: $spacer-tiny (-$spacer-small) 0 (-$spacer-small);
+              padding: $spacer-tiny $spacer-small 0 $spacer-small;
+              display: block;
+            }
+
+            // Responsive variation ---
+            @include respond-to('large-up') {
+              display: block;
+            }
+
+            /* stylelint-enable max-nesting-depth */
+          }
+        }
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+      }
+
+      > ul {
+        @extend %card;
+        border: none;
+        padding: $spacer-tiny $spacer-small;
+
+        li {
+          display: inline-block;
+
+          &.separator:not(:first-child) {
+            border-top: 1px dashed $color-borders;
+            margin: $spacer-tiny (-$spacer-small) 0 (-$spacer-small);
+            padding: $spacer-tiny $spacer-small 0 $spacer-small;
+            display: block;
+          }
+        }
+      }
+    }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+
+      > aside {
+
+        > ul {
+          @include grid(3, $spacer-small);
+
+          li {
+            display: block;
+
+            &.separator:not(:first-child) { /* stylelint-disable-line max-nesting-depth */
+              border: none;
+              margin-top: 0;
+              padding-top: 0;
+            }
+          }
+        }
+      }
+    }
+    @include respond-to('large-up') {
+      @include grid(12, $spacer-small);
+
+      > aside {
+        grid-column: auto / span 3;
+
+        > ul {
+          display: block;
+
+          li.separator:not(:first-child) {
+            border-top: 1px dashed $color-borders;
+            margin: $spacer-tiny (-$spacer-small) 0 (-$spacer-small);
+          }
+        }
+      }
+    }
+
+    .content {
+      grid-column: auto / span 9;
+
+      article {
+
+        > h1,
+        > h2,
+        > h3,
+        > h4,
+        > h5,
+        > h6 {
+          @extend %article-header;
+        }
+
+        > h1,
+        > h2 {
+          margin: $spacer-large 0 $spacer-medium 0;
+        }
+
+        > h3 {
+          margin: $spacer-medium-plus 0 $spacer-small-plus 0;
+        }
+
+        > h4 {
+          margin: $spacer-medium 0 $spacer-small 0;
+        }
+
+        pre {
+          @extend %content-code;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/lib/_codemirror.scss

@@ -14,12 +14,12 @@
   // Theme overrides
 
   &.cm-s-base16-light {
-    background-color: transparent;
+    background-color: $color-background-base;
 
     .CodeMirror {
 
       &-gutters {
-        background-color: transparent;
+        background-color: $color-background-base;
       }
     }
   }

data/app/assets/stylesheets/elabs/{_colors.scss → lib/_colors_reference.scss}

@@ -296,55 +296,3 @@ $color-blue-grey-1000: #11171a;
 // Basic colors
 $color-white: #ffffff;
 $color-black: #000000;
-
-// Semantic colors:
-$color-brand: #f6bb42;
-$color-danger: $color-red-500;
-$color-ghost: transparent;
-$color-info: $color-blue-300;
-$color-muted: $color-grey-200;
-$color-primary: $color-blue-500;
-$color-success: $color-green-500;
-$color-warning: $color-orange-500;
-
-// Foreground/background colors
-$color-base: $color-grey-600;
-$color-background-base: $color-grey-200;
-$color-inverse: $color-grey-100;
-$color-background-inverse: $color-orange-300;
-
-// Cards
-$color-card-title: $color-grey-600;
-$color-card-content: $color-grey-500;
-$color-card-infos: $color-grey-400;
-
-// Information messages
-$color-error-background: $color-red-500;
-$color-error: $color-white;
-
-// Borders
-$color-borders: transparentize($color-base, .8);
-
-// Forms
-$forms-color: $color-grey-800;
-
-// Links
-$link-color: $color-grey-800;
-$link-color-hover: $color-grey-600;
-
-// User content colors
-$el-content-album-bg: $color-white;
-$el-content-article-bg: $color-white;
-$el-content-note-bg: $color-white;
-$el-content-project-bg: $color-white;
-$el-content-upload-bg: $color-white;
-
-// Classifiers
-$el-language-bg: $color-green-100;
-$el-license-bg: $color-orange-200;
-$el-tag-bg: $color-blue-100;
-$el-user-bg: $color-blue-grey-100;
-
-// NSFW notices
-$color-nsfw: $color-grey-400;
-$color-nsfw-background: $color-grey-300;