elabs 4.0.0 → 5.0.0

data/app/assets/stylesheets/elabs/app/helpers/_containers.scss

@@ -0,0 +1,7 @@
+%content-container {
+  margin: 0 $spacer-small;
+  @include respond-to('extra-large-up') {
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+}

data/app/assets/stylesheets/elabs/app/helpers/_states.scss

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

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

@@ -1,7 +1,3 @@
-%clickable {
-  cursor: pointer;
-}
-
 %content-code {
   @include font-size('small');
   border-left: 2px dotted $color-borders;
@@ -11,3 +7,9 @@
 %article-header {
   color: $color-grey-800;
 }
+
+%ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,25 @@
+.acts-list {
+
+  .date {
+    @include font-size('h3');
+    font-weight: $weight-medium;
+    margin: $spacer-medium 0;
+    background-color: $acts-date-background-color;
+    padding: $spacer-tiny;
+    line-height: 1em;
+  }
+}
+
+// Responsive variation ---------------
+@include respond-to('medium-up') {
+
+  .acts-list {
+
+    .date {
+      @include font-size('h3');
+      display: inline-block;
+      margin: $spacer-medium 0 $spacer-small 25%;
+      transform: translateX(-60%);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+// Language ---------------------------
+@include content-full('language', $language-bg);
+@include content-full('license', $license-bg);
+@include content-full('tag', $tag-bg);
+
+.languages-list,
+.licenses-list,
+.tags-list {
+  @include grid(1, $spacer-small);
+  @include respond-to('small-up') {
+    @include grid(2, $spacer-small);
+  }
+  @include respond-to('medium-up') {
+    @include grid(3, $spacer-small);
+  }
+  @include respond-to('large-up') {
+    @include grid(4, $spacer-small);
+  }
+}
+
+// Users ------------------------------
+@include content-full('user', $user-bg);
+
+.users-list {
+  @include grid(1, $spacer-small);
+  @include respond-to('small-up') {
+    @include grid(2, $spacer-small);
+  }
+  @include respond-to('large-up') {
+    @include grid(3, $spacer-small);
+  }
+}

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

@@ -1,5 +1,3 @@
-@include content-card('comment', $gray-300);
-
 .comments-area {
 
   .actions {

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

@@ -0,0 +1,65 @@
+.devise {
+
+  &__form {
+
+    &__wrapper {
+      @extend %card;
+      padding: $spacer-small;
+
+      .actions {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &__actions {
+
+    a {
+      display: block;
+      text-decoration: none;
+      border-left: 3px solid transparent;
+      padding: $spacer-tiny 0;
+    }
+  }
+}
+
+// Responsive variations --------------
+@include respond-to('medium-up') {
+
+  .devise {
+    @include grid(4, $spacer-small);
+
+    &__form {
+      grid-column: 1 / span 2;
+    }
+
+    &__actions {
+      grid-column: 3 / span 2;
+
+      a {
+        font-size: .8em;
+        color: lighten($link-color, 20%);
+        border-left: 3px solid transparent;
+        padding: 0 0 0 $spacer-tiny;
+
+        &:hover {
+          border-left-color: $color-borders;
+        }
+      }
+    }
+  }
+}
+@include respond-to('large-up') {
+
+  .devise {
+    @include grid(5, $spacer-small);
+
+    &__form {
+      grid-column: 2 / span 2;
+    }
+
+    &__actions {
+      grid-column: 4 / span 2;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+body {
+  font-weight: $weight-light;
+}
+
+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 */

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

@@ -0,0 +1,14 @@
+.page {
+  background-color: $page-headers-background-color;
+
+  &__wrapper {
+    background-color: $color-background-base;
+  }
+
+  // Admin pages variation ------------
+
+  &--admin {
+    border: 5px solid $color-danger;
+    min-height: 100vh;
+  }
+}

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

@@ -0,0 +1,13 @@
+// Page content ---------------------
+.page__content {
+
+  &__container {
+    @extend %content-container;
+    padding: $spacer-small 0;
+  }
+
+  // Responsive variations ------------
+  @include respond-to('small-up') {
+    padding-top: $spacer-medium-plus;
+  }
+}

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

@@ -0,0 +1,20 @@
+// Page footer ----------------------
+.page__footer {
+  background-color: $color-brand;
+  padding: $spacer-small 0;
+
+  &__content {
+    @extend %content-container;
+    font-size: .8em;
+    text-align: center;
+
+    a {
+      color: $color-base;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+// Page headers (title/filters) -------
+.page__header {
+  @extend %content-container;
+  display: flex;
+  padding-top: $spacer-medium-plus;
+
+  // Responsive variations ------------
+  @include respond-to('medium-up') {
+    display: block;
+    padding-top: $spacer-large-plus;
+  }
+
+  // Page title -----------------------
+
+  &__title {
+    flex-grow: 1;
+    font-weight: 300;
+    color: $page-title-color;
+    padding: 0;
+    line-height: 1em;
+    margin: 0;
+
+    // Responsive variations ----------
+    @include respond-to('medium-up') {
+      font-size: 3.5em;
+      flex-grow: 1;
+    }
+  }
+
+  &__actions {
+    text-align: right;
+    padding: $spacer-tiny 0;
+    flex: none;
+
+    &_button {
+      @include font-size('h5');
+      color: $page-header-links-color;
+      display: inline-flex;
+      text-decoration: none;
+    }
+
+    // Filter links and sort orders ---
+
+    &__filters {
+      display: none;
+      position: fixed;
+      right: 0;
+      top: 0;
+      width: 18rem;
+      height: 100vh;
+      z-index: $zindex-navigation;
+      background-color: $filter-links-panel-bg;
+      padding: 0;
+
+      &__group {
+        display: block;
+        margin: 0;
+
+        &:not(:first-child) {
+          margin-top: $spacer-small;
+          border-top: 1px solid $color-borders;
+        }
+
+        &__title {
+          font-size: 1.2em;
+          background-color: $filter-links-titles-bg;
+          color: $filter-links-color;
+          padding: $spacer-small $spacer-tiny;
+          text-align: left;
+        }
+      }
+
+      // Responsive variations: medium and up
+      /* stylelint-disable max-nesting-depth */
+      @include respond-to('medium-up') {
+        margin: 0;
+        display: flex;
+        align-items: flex-end;
+        position: relative;
+        height: auto;
+        width: auto;
+        background-color: transparent;
+
+        &__group {
+          display: flex;
+          margin: 0;
+          background-color: $color-background-base;
+
+          &:not(:first-child) {
+            margin-top: 0;
+            border-top: 0;
+          }
+
+          &__title {
+            display: none;
+          }
+
+          .filter-link {
+            padding: $spacer-tiny;
+            display: block;
+            color: $link-color;
+
+            .icon {
+              padding: 0 $spacer-tiny;
+            }
+
+            .link {
+              @include font-size('smaller');
+            }
+
+            &:hover {
+              background-color: transparent;
+              color: $link-color-hover;
+            }
+          }
+        }
+      }
+      /* stylelint-enable max-nesting-depth */
+    }
+
+    &:hover {
+
+      .page__header__actions__filters {
+        display: block;
+      }
+    }
+
+    // Responsive variations ----------
+    @include respond-to('medium-up') {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0;
+
+      &_button {
+        display: none;
+      }
+
+      &:hover {
+
+        .page__header__actions__filters {
+          display: flex;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,232 @@
+// Page menu --------------------------
+.page__menu {
+  background-color: $menu-background-color;
+
+  // All links style ------------------
+  a {
+    text-decoration: none;
+  }
+
+  // Menu links -----------------------
+  .menu_entry {
+    display: inline-block;
+    padding: $spacer-small $spacer-tiny-plus calc(#{$spacer-small} - #{$spacer-tiny}) $spacer-tiny-plus;
+    color: $menu-color;
+    border-bottom: $spacer-tiny solid transparent;
+
+    .icon {
+      display: none;
+      color: $menu-item-icon-color;
+    }
+
+    &--avatar {
+      padding: 0;
+      border: none;
+
+      .avatar {
+        height: 4.45rem;
+      }
+    }
+
+    &:hover {
+      background-color: $menu-link-background-color-hover;
+
+      .icon {
+        color: $menu-item-hover-icon-color;
+      }
+    }
+
+    &.active {
+      border-bottom-color: $menu-item-active-border-color;
+    }
+  }
+
+  // Dropdown customisation -----------
+  .dropdown {
+
+    > a {
+      color: inherit;
+    }
+
+    &__menu {
+      background-color: $menu-link-background-color-hover;
+      box-shadow: 0 5px 8px -1px $color-borders;
+      border-top: 3px solid $menu-link-color;
+      margin-top: 1rem;
+
+      .menu_entry,
+      .action {
+        display: block;
+        border-left: 3px solid transparent;
+
+        &:hover { // stylelint-disable-line
+          background-color: $menu-dropdown-background-color-hover;
+        }
+
+        &.active { // stylelint-disable-line
+          border: {
+            bottom: 0;
+            left: 3px solid $menu-item-active-border-color;
+          }
+        }
+      }
+    }
+  }
+
+  // General menu title ---------------
+  &__title {
+    font-weight: 600;
+    text-align: center;
+    display: flex;
+
+    .brand_link {
+      flex-grow: 1;
+      color: darken($color-brand, 20%);
+
+      > a {
+        padding: $spacer-tiny $spacer-small;
+        display: block;
+      }
+    }
+
+    .menu_button {
+      flex: none;
+
+      > a {
+        padding: $spacer-tiny $spacer-small;
+        display: block;
+      }
+    }
+  }
+
+  // Group of links -------------------
+  &__group {
+
+    // Secondary group (right one) ----
+    &--secondary {
+      display: none;
+      flex: none;
+
+      .close_menu_button {
+        display: none;
+      }
+
+      &.visible {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        right: 0;
+        top: 0;
+        background-color: $menu-link-background-color-hover;
+        min-width: 20rem;
+        height: 100vh;
+        overflow-x: auto;
+        z-index: $zindex-modal;
+
+        .close_menu_button {
+          display: block;
+          background-color: $color-brand;
+          cursor: pointer;
+          position: fixed;
+          right: 0;
+          padding: $spacer-tiny;
+          z-index: $zindex-popover;
+        }
+
+        /* stylelint-disable max-nesting-depth */
+        /* This is not really avoidable, as we target specific elements in a specific parent state */
+
+        .menu_entry { /* stylelint-disable-line no-descending-specificity */
+          display: block;
+
+          &:hover {
+            background-color: $menu-dropdown-background-color-hover;
+          }
+
+          .icon {
+            display: inline-block;
+          }
+        }
+
+        /* stylelint-enable max-nesting-depth */
+
+        .dropdown__menu {
+          right: 0;
+          left: auto;
+        }
+      }
+    }
+  }
+
+  // Menu button for larger screens ---
+  .menu_button--for-small {
+    display: none;
+  }
+}
+
+// Responsive variations --------------
+@include respond-to('small-up') {
+
+  .page__menu {
+    display: flex;
+    padding: $spacer-medium-plus;
+
+    &__title {
+      display: inline-block;
+      text-align: left;
+    }
+
+    &__group {
+      display: flex;
+      flex-grow: 1;
+
+      &--secondary {
+        display: none;
+      }
+    }
+
+    .menu_button {
+
+      &--for-tiny {
+        display: none;
+      }
+
+      &--for-small {
+        display: inline-block;
+      }
+    }
+  }
+}
+@include respond-to('large-up') {
+
+  .page__menu {
+
+    &__group--secondary {
+      flex: none;
+      display: inline-block;
+
+      .menu_entry {
+
+        &_description {
+          display: none;
+        }
+      }
+    }
+
+    .menu_button--for-small {
+      display: none;
+    }
+  }
+}
+@include respond-to('extra-large-up') {
+
+  .page__menu {
+
+    .menu_entry {
+
+      .icon {
+        display: inline-block;
+      }
+    }
+  }
+}