elabs 4.0.0 → 5.0.0

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

@@ -1,13 +1,294 @@
+/* stylelint-disable scss/dollar-variable-colon-space-before */
+
 /* ------------------
-   EL-CMS variables
+   ELabs : General variables
 ------------------ */
 
+// Font families
+$font-family-base      : 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif !default;
+$font-family-headings  : $font-family-base !default;
+$font-family-monospace : 'Fira Code', consolas, courier, monospace !default;
+
+// Semantic colors:
+$color-brand   : #f6bb42;
+$color-danger  : $color-red-500;
+$color-error   : $color-red-500;
+$color-ghost   : transparent;
+$color-info    : $color-blue-300;
+$color-muted   : $color-grey-400;
+$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-50;
+$color-inverse: $color-grey-100;
+$color-background-inverse: $color-orange-300;
+
+// Borders
+$color-borders: transparentize($color-base, .9);
+$color-in-card-borders: transparentize($color-base, .8);
+
+// Links
+$link-color: $color-grey-800;
+$link-color-hover: $color-grey-600;
+
+// User content colors
+$content-album-bg: $color-white;
+$content-article-bg: $color-white;
+$content-note-bg: $color-white;
+$content-project-bg: $color-white;
+$content-upload-bg: $color-white;
+
+// Classifiers
+$language-bg: $color-green-100;
+$license-bg: $color-orange-200;
+$tag-bg: $color-blue-100;
+$user-bg: $color-blue-grey-100;
+
+// NSFW notices
+$color-nsfw: $color-grey-600;
+$color-nsfw-background: $color-grey-300;
+
+// Spacing
+$spacer-tiny             : .5rem !default;
+$spacer-tiny-plus        : .7rem !default;
+$spacer-small            : 1rem !default;
+$spacer-small-plus       : 1.5rem !default;
+$spacer-medium           : 2rem !default;
+$spacer-medium-plus      : 3rem !default;
+$spacer-large            : 4rem !default;
+$spacer-large-plus       : 6rem !default;
+$spacer-extra-large      : 8rem !default;
+$spacer-extra-large-plus : 12rem !default;
+$spacer-ultra-large      : 16rem !default;
+$spacer-ultra-large-plus : 20rem !default;
+
+// Responsive Breakpoints
+$tiny        : 480px !default;
+$small       : 576px !default;
+$medium      : 768px !default;
+$large       : 992px !default;
+$extra-large : 1200px !default;
+
+// Font sizes:
+$font-size-base: 1.6rem !default;
+$font-sizes:
+  (
+    smaller: (
+      mobile : 1rem,
+      desktop : 1.2rem
+    ),
+    small: (
+      mobile : 1.2rem,
+      desktop : 1.4rem
+    ),
+    base: (
+      mobile : 1.4rem,
+      desktop : $font-size-base
+    ),
+    h1: (
+      mobile : 2.8rem,
+      desktop : 3.2rem
+    ),
+    h2: (
+      mobile : 2.4rem,
+      desktop : 2.8rem
+    ),
+    h3: (
+      mobile : 2rem,
+      desktop : 2.4rem
+    ),
+    h4: (
+      mobile : 1.8rem,
+      desktop : 2rem
+    ),
+    h5: (
+      mobile : 1.6rem,
+      desktop : 1.8rem
+    ),
+    h6: (
+      mobile : 1.4rem,
+      desktop : 1.6rem
+    )
+  ) !default;
+
+// Z-indexes
+$zindex-navigation   : 1000 !default;
+$zindex-dropdown     : 2000 !default;
+$zindex-popover      : 3000 !default;
+$zindex-tooltip      : 4000 !default;
+$zindex-modal        : 5000 !default;
+$zindex-notification : 6000 !default;
+$zindex-debug        : 7000 !default;
+
+// Font weights
+$weight-light   : 200 !default;
+$weight-book    : 400 !default;
+$weight-regular : 400 !default;
+$weight-medium  : 500 !default;
+$weight-bold    : 700 !default;
+
+// Color variants for various components
+$variants-list:
+  (
+    ( download,     $color-brand,   $color-white, none),
+    ( primary,      $color-primary, $color-white, none),
+    ( new,          $color-primary, $color-white, none),
+    ( save,         $color-success, $color-white, none),
+    ( show,         $color-primary, $color-white, none),
+    ( edit,         $color-primary, $color-white, none),
+    ( success,      $color-success, $color-white, none),
+    ( info,         $color-info,    $color-white, none),
+    ( notice,       $color-info,    $color-white, none),
+    ( warning,      $color-warning, $color-black, none),
+    ( lock,         $color-warning, $color-black, none),
+    ( danger,       $color-danger,  $color-white, none),
+    ( destroy,      $color-danger,  $color-white, none),
+    ( inverse,      $color-inverse, $color-white, none),
+    ( experimental, $color-brand,   $color-base,  none),
+    ( ghost,        $color-ghost,   $color-white, 0 0 0 1px $color-white inset)
+  ) !default;
+
+// ------- /KNA
+
 // Border-related variables
-$border-default: 1px solid $color-borders;
-$border-radius: 3px;
-$border-radius-lg: 5px;
+$border-default : 1px solid $color-borders;
+$border-radius  : 0;
+
+/* ------------------
+   ELabs : Layout/Html variables
+------------------ */
+
+// Acts list
+$acts-date-background-color: darken($color-background-base, 2%) !default;
+
+// Forms
+$form-input-background-color   : transparent !default;
+$form-input-border-color       : $color-grey-300 !default;
+$form-input-border             : 1px solid transparent !default;
+$form-input-focus-border-color : $color-grey-700 !default;
+$form-input-color              : $color-grey-800 !default;
+$form-actions-background       : darken($color-background-base, 2%) !default;
+
+// Page headers
+$page-header-links-color : $color-brand !default;
+$page-title-color        : darken($color-brand, 15%) !default;
+
+// Tables
+$table-row-even-background-color  : darken($color-background-base, 10%) !default;
+$table-row-hover-background-color : darken($color-background-base, 5%) !default;
+
+/* ------------------
+   ELabs : Components variables
+------------------ */
+
+// Act component
+$act-grid-cols                 : 4 !default;
+$act-grid-time-cols            : 1 !default;
+$act-history-dot-size          : 20px !default;
+$act-history-dot-border-color  : $color-white !default;
+$act-history-dot-border-radius : $act-history-dot-size / 2 !default;
+$act-history-dot-border-width  : 3px !default;
+$act-history-dot-color         : $color-brand !default;
+$act-history-line-spacer       : $spacer-small !default;
+$act-history-line-style        : 1px dashed opacify($color-borders, .1) !default;
+$act-status-background         : $color-grey-100 !default;
+$act-status-icon-lock          : $fa-var-lock !default;
+$act-status-icon-unlock        : $fa-var-unlock !default;
+$act-status-icon-unpublish     : $fa-var-eye-slash !default;
+$act-status-icon-update        : $fa-var-sync !default;
+$act-status-quote-size         : 'small' !default;
+$act-time-font-size            : 'small' !default;
+
+// Alerts
+$alert-border-radius: $border-radius !default;
+
+// Announcements
+$announcement-border-radius: 3px !default;
+
+// Badges
+$badge-background-color: $color-background-base !default;
+
+// Buttons
+$button-border-radius : $border-radius !default;
+$button-group-color   : $color-white !default;
+
+// Card
+$card-background-color : $color-grey-100 !default;
+$card-border-radius    : $border-radius !default;
+$card-border           : $border-default !default;
+$card-content-color    : $color-grey-500 !default;
+$card-infos-color      : $color-grey-400 !default;
+$card-title-color      : $color-grey-600 !default;
+
+// Classifier card (language, tag, user, ...)
+$classifier-card-content-vertical-padding : $spacer-tiny !default;
+$classifier-card-padding                  : $spacer-medium !default;
+
+// Comment
+$comment-archived-opacity: .5 !default;
+
+// Empty areas
+$empty-background-color : $card-background-color !default;
+$empty-color            : $color-muted !default;
+
+// Error areas
+$error-background-color : $color-red-500 !default;
+$error-color            : $color-error !default;
+
+// Links for content filters
+$filter-links-color          : darken($color-brand, 30%) !default;
+$filter-links-panel-bg       : lighten($color-brand, 5%) !default;
+$filter-links-panel-hover-bg : lighten($filter-links-panel-bg, 5%) !default;
+$filter-links-titles-bg      : $filter-links-panel-bg !default;
+
+// Fixed links (to-top, to-report)
+$fixed-link-to-report-background : $color-warning !default;
+$fixed-link-to-top-background    : $color-brand !default;
+$fixed-links-border-radius       : $border-radius !default;
+
+// Menu
+$menu-background-color                : $color-brand !default;
+$menu-color                           : darken($menu-background-color, 30%);
+$menu-link-background-color-hover     : lighten($menu-background-color, 10%) !default;
+$menu-link-color                      : $menu-color !default;
+$menu-dropdown-background-color-hover : lighten($menu-link-background-color-hover, 10%) !default;
+$menu-item-active-border-color        : darken($menu-background-color, 20%) !default;
+$menu-item-hover-icon-color           : transparentize($menu-link-color, .2);
+$menu-item-icon-color                 : transparentize($menu-link-color, .8);
+$menu-separator-color                 : $menu-link-color !default;
+
+// Dropdowns
+$dropdown-link-color       : $menu-link-color !default;
+$dropdown-link-hover-color : $menu-link-color !default;
+
+// Modals
+$modal-background-color         : $color-background-base !default;
+$modal-overlay-background-color : $color-grey-800 !default;
+$page-headers-background-color  : $color-brand !default;
+
+// Status cards
+$status-background-color     : $color-nsfw-background !default;
+$status-border-radius        : $border-radius !default;
+$status-inline-border-radius : $status-border-radius !default;
+$status-padding              : $spacer-small !default;
+$status-color                : $color-nsfw !default;
+
+// Tabs
+$tab-active-background-color : $color-white !default;
+$tab-border-color            : $color-borders !default;
+$tab-hover-background-color  : transparentize($color-black, .9) !default;
+
+// Shortcode widgets
+$widget-card-avatar-border-radius : $border-radius !default;
+$widget-card-background-color     : $color-white !default;
+$widget-card-border-radius        : $border-radius !default;
 
 /* ------------------
    FontAwesome variables
 ------------------ */
-$fa-font-path: '/fonts';
+$fa-font-path: 'elabs';
+
+/* Stylelint-enable */

data/app/assets/stylesheets/elabs/app/components/_act.scss

@@ -0,0 +1,83 @@
+.act {
+
+  // Time -----------------------------
+  &__time {
+    display: none;
+  }
+
+  // Responsive variations ------------
+  @include respond-to('medium-up') {
+    @include grid($act-grid-cols, $act-history-line-spacer);
+
+    &__time {
+      @include font-size($act-time-font-size);
+      display: block;
+      grid-column: auto / span $act-grid-time-cols;
+      text-align: right;
+
+      // History circle ---------------
+      &:after {
+        content: '';
+        display: inline-block;
+        width: $act-history-dot-size;
+        height: $act-history-dot-size;
+        background-color: $act-history-dot-color;
+        margin-left: $act-history-line-spacer;
+        border: $act-history-dot-border-width solid $act-history-dot-border-color;
+        border-radius: $act-history-dot-border-radius;
+        transform: translateY($act-history-dot-size / 4);
+      }
+    }
+
+    // This is the place for a content-card or act-status
+    &__content {
+      grid-column: auto / span 3;
+      margin-left: calc(#{-$act-history-dot-size / 2} - #{$act-history-line-spacer});
+      padding-left: calc(#{$act-history-dot-size / 2} + #{$act-history-line-spacer});
+      border-left: $act-history-line-style;
+    }
+  }
+}
+
+// Act action: for statuses only ------
+.act-status {
+  @extend %card;
+  background-color: $act-status-background;
+  padding: $spacer-small;
+
+  &--update:before {
+    @include icon($act-status-icon-update, true);
+  }
+
+  &--unpublish:before {
+    @include icon($act-status-icon-unpublish, true);
+  }
+
+  &--lock:before {
+    @include icon($act-status-icon-lock, true);
+  }
+
+  &--unlock:before {
+    @include icon($act-status-icon-unlock, true);
+  }
+
+  // Quotes, used for the reason ------
+  q {
+    @include font-size($act-status-quote-size);
+    font-style: italic;
+
+    &:before {
+      content: '—';
+      margin-right: $spacer-tiny;
+    }
+
+    &:after {
+      content: '';
+    }
+  }
+
+  // Responsive variations ----------
+  @include respond-to('small-up') {
+    padding: $spacer-medium;
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_announcement.scss

@@ -0,0 +1,41 @@
+.announcements {
+  padding-top: $spacer-small;
+
+  .announcement {
+    @extend %content-container;
+    @include font-size('base');
+    padding: $spacer-small;
+    border-radius: $announcement-border-radius;
+
+    // Semantic variations ------------
+    @each $name, $background-color in $variants-list {
+
+      &--#{$name} {
+        background: $background-color;
+        color: $color-white;
+      }
+    }
+
+    &:first-child {
+      margin-top: $spacer-medium;
+    }
+
+    &:not(:first-child) {
+      margin-top: $spacer-small;
+    }
+
+    .close-button {
+      @extend %clickable;
+      float: right;
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+      padding: $spacer-medium;
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_classifier_types.scss

@@ -0,0 +1,43 @@
+// Languages
+.language {
+
+  &-card {
+    @include classifier-card($language-bg);
+  }
+}
+
+// Licenses ---------------------------
+.license {
+
+  &-card {
+    @include classifier-card($license-bg);
+  }
+}
+
+// Tags -------------------------------
+.tag {
+
+  &-card {
+    @include classifier-card($tag-bg);
+  }
+}
+
+// Users ------------------------------
+.user {
+
+  &-card {
+    @include classifier-card($user-bg);
+
+    header {
+      height: 64px;
+    }
+  }
+
+  &--inline {
+    display: inline;
+
+    .avatar {
+      max-width: 1.5em;
+    }
+  }
+}