cactu 0.1.2 → 0.18.0

data/assets/stylesheets/components/_grids.scss

@@ -0,0 +1,95 @@
+//
+// Grid
+// --------------------------------------------------
+
+
+// Variables
+$column-gap:            15px !default;
+$column-tablet-gap:     10px !default;
+$size-name-tablets:     'tablet' !default;
+$size-name-cellphones:  'cellphone' !default;
+
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  
+  @include breakpoint-small-desktop {
+    width: $small-desktop-size;
+  }
+
+  @include breakpoint-medium-desktop {
+    width: $medium-desktop-size;
+  }
+
+  @include breakpoint-large-desktop {
+    width: $large-desktop-size;
+  }
+}
+
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+
+  .columns {
+    padding: 0;
+  }
+}
+
+.column {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  &[class*="column-of-"] {
+    flex-basis: inherit;
+  }
+}
+
+// For nested columns
+//
+.column,
+[class*="column-of-"] {
+  padding: 0 $column-gap;
+  min-height: 1px;
+}
+
+// Fix the global gap for column clases
+@include breakpoint-cellphone-medium-desktop {
+  .column,
+  [class*="column-of-"] {
+    padding: 0 $column-tablet-gap;
+  }
+}
+
+// Columns generator
+// for different breakpoints
+// column-of-[x]
+//
+@include make-specific-columns;
+
+// tablet-column-of-[x]
+@include breakpoint-tablet {
+  @include make-specific-columns($size-name-tablets)
+}
+
+// cellphone-column-of-[x]
+@include breakpoint-cellphone-tablet {
+  @include make-specific-columns($size-name-cellphones);
+}
+
+@include breakpoint-cellphone {
+  .column,
+  [class*="column-of-"] {
+    width: 100%;
+    flex-basis: inherit;
+  }
+  // Example:
+  // if you want to set a columns name:
+  // small-column-of-[x] for this breakpoint,
+  // you need to add a specific columns mixin with 'small' name
+  // and the number of columns you need
+  // @include make-specific-columns('small', 5);
+}

data/assets/stylesheets/components/_lists.scss

@@ -0,0 +1,75 @@
+//
+// Lists
+// --------------------------------------------------
+
+
+// Variables
+//
+$list-padding-left:       1.75rem !default;
+$list-item-padding:       .625rem 1rem !default;
+$list-item-border:        $border-base !default;
+$list-item-background:    transparent !default;
+$list-item-radius:        $radius !default;
+$list-item-interleaved:   $white-smoke !default;
+
+
+ul, ol {
+  padding-left: $list-padding-left;
+}
+
+.list-group,
+.list-group-flush,
+.list-group-interleaved {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 1rem;
+
+  * {
+    display: block;
+    width: 100%;
+    padding: $list-item-padding;
+    margin-bottom: -1px;
+    text-align: left;
+    border: $list-item-border;
+    border-radius: 0;
+    background-color: $list-item-background;
+  }
+}
+
+.list-group,
+.list-group-interleaved {
+  * {
+    &:first-child {
+      border-top-left-radius: $list-item-radius;
+      border-top-right-radius: $list-item-radius;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: $list-item-radius;
+      border-bottom-right-radius: $list-item-radius;
+    }
+  }
+}
+
+.list-group-flush {
+  * {
+    border-left: 0;
+    border-right: 0;
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.list-group-interleaved {
+  * {
+    &:nth-child(2n) {
+      background-color: $list-item-interleaved;
+    }
+  }
+}

data/assets/stylesheets/components/_modals.scss

@@ -0,0 +1,124 @@
+//
+// Modals
+// --------------------------------------------------
+
+
+// Variables
+//
+$modal-background:                rgba(0, 0, 0, .7) !default;
+$modal-content-width:               500px !default;
+$modal-content-margin:              2rem auto auto !default;
+$modal-content-radius:              $radius !default;
+$modal-content-background:          $white !default;
+$modal-content-transition:          all .35s ease-in-out !default;
+$modal-close-size:                  30px !default;
+$modal-close-gap:                   -25px !default;
+$modal-close-color:                 $white !default;
+$modal-close-radio:                 50% !default;
+$modal-close-background:          rgba(30, 30, 30, .8) !default;
+$modal-close-background-hover:    rgba(0, 0, 0, 1) !default;
+$modal-close-icon-size:             1.25rem !default;
+
+
+.modal,
+.modal-center {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: -1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: $modal-background;
+  @include transition($transition-all);
+
+  .modal-content {
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    width: $modal-content-width;
+    margin: $modal-content-margin;
+    border-radius: $modal-content-radius;
+    background-color: $modal-content-background;
+    transform: translate(0, -25%);
+    @include transition(all .35s ease-in-out);
+
+    > * {
+      &:not(:last-child) {
+        border-bottom: $border-base;
+      }
+
+      &:not(:nth-child(1):not(:nth-child(2))) {
+        padding: 1rem;
+        margin: 0;
+      }
+    }
+
+    > .close {
+      display: flex;
+      position: absolute;
+      top: $modal-close-gap;
+      right: $modal-close-gap;
+      width: $modal-close-size;
+      height: $modal-close-size;
+      justify-content: center;
+      line-height: 0;
+      color: $modal-close-color;
+      border: 0 !important;
+      border-radius: $modal-close-radio;
+      background-color: $modal-close-background;
+
+      > span {
+        font-size: $modal-close-icon-size;
+        margin-top: -2px; // to force the centered
+      }
+
+      @include hover-focus {
+        background-color: $modal-close-background-hover;
+      }
+    }
+  }
+
+  .modal-header {
+    align-items: center;
+
+    h4 { margin: 0; }
+  }
+
+  .modal-body {
+    flex-direction: column;
+  }
+
+  .modal-footer {
+    justify-content: flex-end;
+  }
+
+  &.active {
+    opacity: 1;
+    z-index: $zindex-top;
+
+    .modal-content {
+      transform: translate(0,0);
+    }
+  }
+}
+
+.modal-center {
+  .modal-content {
+    margin: auto;
+  }
+}
+
+@include breakpoint-cellphone {
+  .modal,
+  .modal-center {
+    .modal-content {
+      width: 84%;
+    }
+  }
+}

data/assets/stylesheets/components/_navbars.scss

@@ -0,0 +1,190 @@
+//
+// Navbars
+// --------------------------------------------------
+
+
+// Variables
+//
+$navbar-padding-y:      0 !default;
+$navbar-padding-x:      15px !default;
+$navbar-base-color:     $white-smoke !default;
+$navbar-last-padding:   .5rem !default;
+$toggler-color:         $text-color !default;
+$link-padding-y:        .9375rem !default;
+$brand-padding-y:       .75rem !default;
+$brand-padding-x:       0 !default;
+$brand-gap:             .625rem !default;
+$brand-font-size:       1.25rem !default;
+$search-gap:            .5rem !default;
+$breakpoint-mobile:     $tablet-size !default; // Set you breakpoint to get the navbar mobile
+
+
+// Blocks
+//
+%show-menu {
+  opacity: 1;
+  height: auto;
+}
+
+
+.navbar,
+.navbar-expanded {
+  position: relative;
+  @extend %flex-wrap-center;
+  // The base navbar-variant get the base grays colors
+  @include navbar-theme($navbar-base-color);
+
+  * {
+    @extend %flex-wrap-center;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  nav {
+    height: 0;
+    opacity: 0;
+    @include transition($transition-all);
+
+    a {
+      padding: $link-padding-y;
+    }
+
+    &.navigation-end {
+      margin-left: auto;
+    }
+  }
+
+  .navbar-toggler {
+    width: auto;
+    height: 40px;
+    margin: 7px 0;
+    @extend %flex-wrap-center;
+    background: none;
+  }
+
+  .show-menu {
+    @extend %show-menu;
+  }
+
+  [type="checkbox"] {
+    display: none;
+
+    &:checked {
+      & ~ nav {
+        @extend %show-menu;
+      }
+
+      & ~ .navbar-toggler > .menu-icon {
+        &:before {
+          transform: rotate(45deg);
+          margin-top: 5px;
+        }
+
+        &:after {
+          transform: rotate(-45deg);
+          margin-top: -7px;
+        }
+      }
+    }
+  }
+
+  .dropdown {
+    .toggle { padding: $link-padding-y; }
+    .drop-menu { top: 3rem; }
+  }
+}
+
+.navbar-brand {
+  font-size: $brand-font-size;
+  padding: $brand-padding-y $brand-padding-x;
+  margin-right: $brand-gap;
+}
+
+.navbar-expanded {
+  width: 100%;  
+  padding: $navbar-padding-y $navbar-padding-x;
+
+  // Set grid padding between cellphone and medium desktop sizes
+  @include breakpoint-cellphone-medium-desktop {
+    padding: $navbar-padding-y ($navbar-padding-x - 5px);
+  }
+}
+
+// Responsive navbars
+//
+@include breakpoint-max($breakpoint-mobile - 1) {
+  .navbar,
+  .navbar-expanded {
+    justify-content: space-between;
+
+    nav {
+      width: 100%;
+      flex-direction: column;
+
+      * {
+        display: block;
+        width: 100%;
+      }
+
+      a,
+      .dropdown {
+        padding: .625rem 0;
+      }
+
+      .dropdown {
+        .toggle {
+          display: flex;
+          justify-content: space-between;
+          align-content: center;
+          padding: 0;
+        }
+      }
+
+      &:not([class*="show-menu"]) {
+        overflow: hidden;
+      }
+
+      .navbar-search {
+        input {
+          margin-bottom: $search-gap;
+        }
+      }
+    }
+
+    .show-menu {
+      &:last-child() {
+        padding-bottom: $navbar-last-padding;
+      }
+    }
+  }
+
+  .navbar {
+    [class*="column"] {
+      justify-content: space-between;
+    }
+  }
+}
+
+@include breakpoint-min($breakpoint-mobile) {
+  .navbar,
+  .navbar-expanded {
+    justify-content: start;
+
+    nav {
+      height: auto;
+      opacity: 1;
+    }
+
+    .navbar-toggler {
+      display: none;
+    }
+
+    .navbar-search {
+      input {
+        margin-right: $search-gap;
+      }
+    }
+  }
+}