elabs 2.0.0.pre

data/app/assets/stylesheets/elabs/_icons.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable rule-empty-line-before */
+
+// Icons in this file are only fontawesome icons with a more semantic name
+.#{$fa-css-prefix}-amount:before { content: fa-content($fa-var-hashtag); }
+.#{$fa-css-prefix}-is-sfw:before { content: fa-content($fa-var-check); }
+.#{$fa-css-prefix}-is-nsfw:before { content: fa-content($fa-var-times); }
+.#{$fa-css-prefix}-license:before { content: fa-content($fa-var-copyright); }
+
+/* stylelint-enable rule-empty-line-before */

data/app/assets/stylesheets/elabs/_variables.scss

@@ -0,0 +1,13 @@
+/* ------------------
+   EL-CMS variables
+------------------ */
+
+// Border-related variables
+$border-default: 1px solid $color-borders;
+$border-radius: 3px;
+$border-radius-lg: 5px;
+
+/* ------------------
+   FontAwesome variables
+------------------ */
+$fa-font-path: '/fonts';

data/app/assets/stylesheets/elabs/app/_acts.scss

@@ -0,0 +1,58 @@
+.acts-list {
+
+  .date {
+    display: inline-block;
+    @include font-size('h3');
+    padding: $spacer-small 0;
+    margin-left: 25%;
+    transform: translateX(-50%);
+  }
+
+  .act {
+    @include grid(4, $spacer-small);
+
+    &__time {
+      grid-column: auto / span 1;
+      text-align: right;
+      font-size: .8em;
+      margin-top: $spacer-tiny;
+
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-color: $color-brand;
+        margin-left: $spacer-small;
+        border: 3px solid $color-white;
+        border-radius: 10px;
+        transform: translateY($spacer-tiny);
+      }
+    }
+
+    &__content {
+      grid-column: auto / span 3;
+    }
+
+    &-action {
+      @extend %card;
+      background-color: $gray-100;
+
+      &--update:before {
+        @include icon($fa-var-sync, true);
+      }
+
+      &--unpublish:before {
+        @include icon($fa-var-eye-slash, true);
+      }
+
+      &--lock:before {
+        @include icon($fa-var-lock, true);
+      }
+
+      &--unlock:before {
+        @include icon($fa-var-unlock, true);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/_alerts.scss

@@ -0,0 +1,3 @@
+.alert {
+  border-radius: 0;
+}

data/app/assets/stylesheets/elabs/app/_buttons.scss

@@ -0,0 +1,21 @@
+.btn-group {
+  display: inline-flex;
+
+  > .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border: {
+        top-left-radius: $border-radius;
+        bottom-left-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      border: {
+        top-right-radius: $border-radius;
+        bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/_comments.scss

@@ -0,0 +1 @@
+@include content-card('comment', $gray-300)

data/app/assets/stylesheets/elabs/app/_content.scss

@@ -0,0 +1,10 @@
+@include content-card('album', $el-content-album-bg);
+@include content-card('article', $el-content-article-bg);
+@include content-card('note', $el-content-note-bg);
+@include content-card('project', $el-content-project-bg);
+@include content-card('upload', $el-content-upload-bg);
+@include content-full('album', $el-content-album-bg);
+@include content-full('article', $el-content-article-bg);
+@include content-full('note', $el-content-note-bg);
+@include content-full('project', $el-content-project-bg);
+@include content-full('upload', $el-content-upload-bg);

data/app/assets/stylesheets/elabs/app/_content_uploads.scss

@@ -0,0 +1,39 @@
+.content__relations {
+
+  .uploads-list {
+    @include grid(3, $spacer-small);
+
+    .upload__preview {
+      @extend %card;
+      display: inline-block;
+      margin-bottom: $spacer-small;
+
+      .content {
+        font-size: .8em;
+
+        .action {
+          display: block;
+          background-color: transparentize($background-base, .5);
+          padding: $spacer-tiny $spacer-small;
+          text: {
+            decoration: none;
+            align: center;
+          }
+          margin: {
+            left: $spacer-tiny;
+            bottom: -$spacer-tiny;
+          }
+          border-top: {
+            left-radius: $border-radius;
+            right-radius: $border-radius;
+          }
+        }
+      }
+    }
+  }
+}
+
+.thumbnail {
+  @extend %card;
+  padding: $spacer-tiny;
+}

data/app/assets/stylesheets/elabs/app/_empty.scss

@@ -0,0 +1,19 @@
+.empty {
+  @extend %card-inset;
+  padding: $spacer-medium;
+  text-align: center;
+  color: $color-muted;
+
+  &--big {
+    padding: $spacer-large;
+    color: darken($color-muted, 5%);
+  }
+
+  &__title {
+    @include font-size('h2');
+  }
+
+  &__subtitle {
+    font-size: .8em;
+  }
+}

data/app/assets/stylesheets/elabs/app/_errors.scss

@@ -0,0 +1,9 @@
+.error {
+  @extend %card;
+  background-color: $color-error-background;
+  color: $color-error;
+
+  h2 {
+    @include font-size('h5');
+  }
+}

data/app/assets/stylesheets/elabs/app/_filter_links.scss

@@ -0,0 +1,27 @@
+.filter-links {
+  display: inline-block;
+  font-size: .8em;
+  transform: translateY($spacer-small);
+
+  &__group {
+    display: inline-block;
+    margin-right: $spacer-small;
+  }
+
+  .filter-link {
+    text-decoration: none;
+    margin-left: $spacer-tiny;
+    padding: 0 $spacer-tiny;
+    background-color: $background-base;
+    border: {
+      left: $border-default;
+      top: $border-default;
+      right: $border-default;
+      bottom: none;
+    }
+
+    .fas {
+      margin-left: $spacer-tiny;
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/_forms.scss

@@ -0,0 +1,69 @@
+[type='color'],
+[type='date'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+select,
+textarea {
+  background-color: transparent;
+  box-shadow: none;
+  line-height: 1em;
+  border: 1px solid transparent;
+  border: {
+    bottom: 3px solid $color-grey-300;
+    radius: 0;
+  }
+  padding: $spacer-tiny;
+  width: 100%;
+
+  &:focus {
+    border-color: $color-grey-700;
+  }
+}
+
+/* stylelint-disable selector-max-type */
+
+form {
+
+  .field {
+    @include grid(4, $spacer-small);
+
+    > label,
+    > .field_with_errors {
+      grid-column: 1 / span 1;
+      padding-top: $spacer-tiny;
+      text-align: right;
+      font-weight: 600;
+    }
+
+    .field_with_errors {
+      color: $color-error-background;
+    }
+
+    &-input {
+      grid-column: 2 / span 3;
+
+      label {
+        font-weight: 100;
+      }
+    }
+
+    &-hint {
+      font-size: .8em;
+    }
+  }
+
+  .actions {
+    margin-top: $spacer-small;
+  }
+}
+
+/* stylelint-enable selector-max-type */

data/app/assets/stylesheets/elabs/app/_helpers.scss

@@ -0,0 +1,3 @@
+%clickable {
+  cursor: pointer;
+}

data/app/assets/stylesheets/elabs/app/_languages.scss

@@ -0,0 +1,6 @@
+@include content-full('language', $el-language-bg);
+
+.languages-list {
+  @include grid(4, $spacer-small);
+  @include classifier-card('language', $el-language-bg);
+}

data/app/assets/stylesheets/elabs/app/_layout.scss

@@ -0,0 +1,194 @@
+.page {
+  background-color: $color-brand;
+
+  // Page menu ------------------------
+
+  &__menu {
+    border-bottom: $border-default;
+
+    &__group {
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: $spacer-medium;
+      }
+
+      &__icon {
+        color: rgba($color-black, .2);
+      }
+    }
+
+    // General menu title -------------
+
+    &__title {
+      display: inline-block;
+      font-weight: 600;
+      min-width: 175px;
+      padding: $spacer-tiny $spacer-small;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    // Main menu ----------------------
+
+    &--main {
+      border-bottom-color: darken($color-brand, 15%);
+
+      .menu__title {
+        color: darken($color-brand, 20%);
+      }
+
+      a {
+        color: darken($color-brand, 30%);
+      }
+    }
+
+    // Member menu --------------------
+
+    &--member {
+      background-color: lighten($color-brand, 15%);
+      border-bottom-color: $color-brand;
+      box-shadow: inset 0 3px 8px -4px $color-borders;
+
+      a {
+        color: darken($color-brand, 10%);
+      }
+
+      .menu__title {
+        color: darken($color-brand, 5%);
+      }
+    }
+
+    // Admin menu ---------------------
+
+    &--admin {
+      background-color: $color-red-50;
+      border-bottom-color: darken($color-red-50, 5%);
+      box-shadow: inset 0 3px 8px -4px $color-borders,
+      0 3px 8px -4px $color-borders;
+
+      a {
+        color: darken($color-red-50, 15%);
+      }
+
+      .menu-title {
+        color: darken($color-red-50, 10%);
+      }
+    }
+
+    a {
+      text-decoration: none;
+      display: inline-block;
+      padding: $spacer-small $spacer-tiny calc(#{$spacer-small} - #{$spacer-tiny}) $spacer-tiny;
+      border-bottom: $spacer-tiny solid transparent;
+
+      &:hover {
+        background-color: rgba($color-black, .05);
+      }
+    }
+
+    .active {
+      border-bottom-color: transparentize($color-black, .8);
+    }
+  }
+
+  // Page title -----------------------
+
+  &__title {
+    @extend %content-container;
+    font-weight: 600;
+    color: darken($color-brand, 15%);
+    padding: $spacer-medium 0 $spacer-tiny 0;
+    line-height: 1em;
+  }
+
+  // Page Flash messages ------------
+
+  &__messages {
+    @extend %content-container;
+  }
+
+  // Page actions ---------------------
+
+  &__actions {
+    @extend %content-container;
+    text-align: right;
+    padding: $spacer-tiny 0;
+
+    .btn--report {
+      background-color: transparentize($background-base, .5);
+      padding: $spacer-tiny $spacer-small;
+      text-decoration: none;
+      margin-left: $spacer-tiny;
+      border-top: {
+        left-radius: $border-radius;
+        right-radius: $border-radius;
+      }
+    }
+  }
+
+  // Page content ---------------------
+
+  &__content {
+    background-color: $color-background-base;
+    box-shadow: inset 0 3px 8px -4px $color-borders;
+
+    &__container {
+      @extend %content-container;
+      padding: $spacer-small 0;
+    }
+  }
+
+  // Page footer ----------------------
+
+  &__footer {
+    background-color: $color-brand;
+    padding: $spacer-small 0;
+
+    &__content {
+      @extend %content-container;
+      font-size: .8em;
+      text-align: center;
+    }
+  }
+}
+
+p {
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* stylelint-disable selector-no-qualifying-type */
+
+h1.separator,
+h2.separator,
+h3.separator,
+h4.separator,
+h5.separator,
+h6.separator {
+  border: {
+    top: 3px double $color-borders;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  margin-top: $spacer-medium;
+  background: transparent;
+}
+
+hr.separator {
+
+  border: {
+    top: 1px dashed $color-borders;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  background: transparent;
+}
+
+/* stylelint-enable selector-no-qualifying-type */