cactu 0.1.2 → 0.18.0

data/assets/stylesheets/cactu.scss

@@ -0,0 +1,46 @@
+/*!
+ * Cactu v0.18.0 (http://cactu.site/)
+ * Copyright 2018 Giovanni Mendoza
+ * Licensed under MIT (https://github.com/mendozagioo/cactu/blob/master/LICENSE)
+ */
+
+@import "base/global-variables";
+@import "base/reboot";
+@import "base/blocks";
+
+@import "functions/colors";
+@import "functions/strings";
+
+@import "mixins/alerts";
+@import "mixins/breakpoints";
+@import "mixins/buttons";
+@import "mixins/forms";
+@import "mixins/grid";
+@import "mixins/hover";
+@import "mixins/icons";
+@import "mixins/navbar";
+@import "mixins/positions";
+@import "mixins/transition";
+
+@import "elements/button";
+@import "elements/code";
+@import "elements/icon";
+@import "elements/image";
+@import "elements/typography";
+
+@import "components/alerts";
+@import "components/buttons";
+@import "components/collapse";
+@import "components/dropdowns";
+@import "components/forms";
+@import "components/grids";
+@import "components/lists";
+@import "components/modals";
+@import "components/navbars";
+@import "components/navs";
+@import "components/paginations";
+@import "components/tables";
+@import "components/tooltips";
+
+@import "utilities/classes";
+@import "utilities/syntax";

data/assets/stylesheets/components/_alerts.scss

@@ -0,0 +1,48 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Variables
+//
+$alert-padding:              1rem !default;
+$alert-radius:               $radius !default;
+$alert-background-level:     -10 !default;
+$alert-border-level:         -2 !default;
+$alert-color-level:          6 !default;
+$alert-color-base:           $yellow !default;
+$alert-background:           theme-color-level($alert-color-base, $alert-background-level) !default;
+$alert-border:               theme-color-level($alert-color-base, $alert-border-level) !default;
+$alert-color:                theme-color-level($alert-color-base, $alert-color-level) !default;
+
+
+.alert,
+.alert-dismissible {
+  position: relative;
+  padding: $alert-padding;
+  border-radius: $alert-radius;
+  @include alert-theme($alert-background, $alert-border, $alert-color);
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+  }
+}
+
+.alert-dismissible {
+  padding-right: 2.625rem;
+
+  .close {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    font-size: 1.625rem;
+    line-height: 1;
+    color: inherit;
+    box-shadow: none !important;
+    background-color: transparent;
+
+    @include hover-focus {
+      color: darken($alert-background, 80%);
+    }
+  }
+}

data/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,82 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Variables
+//
+$button-first-radius:             $radius 0 0 $radius !default;
+$button-last-radius:              0 $radius $radius 0 !default;
+$vertical-button-first-radius:    $radius $radius 0 0 !default;
+$vertical-button-last-radius:     0 0 $radius $radius !default;
+$button-background-selected:      darken($gray-200, 10%) !default;
+
+
+.button-group,
+.button-group-vertical {
+  button,
+  .button {
+    z-index: 2;
+
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+    
+    &.selected {
+      background-color: $button-background-selected;
+    }
+    
+    & ~ button,
+    & ~ .button {
+      margin-left: 0;
+    }
+  }
+}
+
+.button-group {
+  display: inline-flex;
+
+  button,
+  .button {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:not(:first-child) {
+      margin-left: -$border-width;
+    }
+
+    &:first-child {
+      border-radius: $button-first-radius;
+    }
+
+    &:last-child {
+      border-radius: $button-last-radius;
+    }
+  }
+}
+
+.button-group-vertical {
+  display: inline-grid;
+
+  button,
+  .button {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:not(:first-child) {
+      margin-top: -$border-width;
+    }
+
+    &:first-child {
+      border-radius: $vertical-button-first-radius;
+    }
+
+    &:last-child {
+      border-radius: $vertical-button-last-radius;
+    }
+  }
+}

data/assets/stylesheets/components/_collapse.scss

@@ -0,0 +1,84 @@
+//
+// Collapse
+// --------------------------------------------------
+
+
+// Variables
+//
+$content-collaspse-padding:           1rem !default;
+$accordion-collapse-border:           $border-base !default;
+$accordion-collapse-first-radius:     $radius $radius 0 0 !default;
+$accordion-collapse-last-radius:      0 0 $radius $radius !default;
+$accordion-header-padding:            1rem !default;
+$accordion-header-background:         lighten($gray-200, 5%) !default;
+$accordion-header-hover-background:   darken($accordion-header-background, 3%) !default;
+
+
+// Blocks
+//
+%basic-collapse {
+  height: 100%;
+  opacity: 1;
+  padding: $content-collaspse-padding;
+}
+
+
+.collapse {
+  .collapse-container {
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    @include transition($transition-all);
+
+    &.collapsed {
+      @extend %basic-collapse;
+    }
+  }
+
+  [type="checkbox"],
+  [type="radio"] {
+    display: none;
+
+    &:checked {
+      ~ .collapse-container {
+        @extend %basic-collapse;
+      }
+    }
+  }
+}
+
+.accordion {
+  overflow: hidden;
+
+  .collapse {
+    border: $accordion-collapse-border;
+    overflow: hidden;
+
+    .header {
+      display: block;
+      padding: $accordion-header-padding;
+      margin: 0;
+      cursor: pointer;
+      background-color: $accordion-header-background;
+
+      &:hover {
+        background-color: $accordion-header-hover-background;
+      }
+    }
+
+    &:not(:first-child) {
+      margin-top: -$border-width;
+    }
+    
+    &:first-child {
+      border-radius: $accordion-collapse-first-radius;
+    }
+
+    &:last-child {
+      border-radius: $accordion-collapse-last-radius;
+    }
+  }
+}

data/assets/stylesheets/components/_dropdowns.scss

@@ -0,0 +1,172 @@
+//
+// Dropdowns
+// --------------------------------------------------
+
+
+// Variables
+//
+$dropdown-menu-border:        $border-base !default;
+$dropdown-item-padding:       .3125rem 1rem !default;
+$dropdown-menu-top:           1.625rem + .75rem + .125rem !default;
+$drop-dow-open-shadow:        0 0 0 $outline-width darken($gray-200, 20%) !default;
+$triangle-width:              5px !default;
+$triangle-transition:         transform .1s ease-in-out !default;
+$drop-menu-min-width:         12.5rem !default;
+$drop-menu-padding:           .5rem 0 !default;
+$drop-menu-radius:            $radius !default;
+$drop-menu-color:             $text-color !default;
+$drop-menu-background:        $white !default;
+$drop-menu-transition:        color $speed ease-in-out, background-color $speed ease-in-out !default;
+$drop-active-color:           $text-color !default;
+$drop-active-background:      $gray-200 !default;
+$separator-color:             $border-color !default;
+
+
+.dropdown,
+.dropup,
+.dropright,
+.dropleft {
+  position: relative;
+
+  [type="checkbox"] {
+    display: none;
+
+    &:checked {
+      & ~ .drop-menu {
+        display: inline-block;
+      }
+
+      & ~ .toggle  {
+        &:after {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .toggle {
+    padding: .5rem;
+    margin: 0;
+
+    &:after {
+      @extend %shape-base;
+      margin-left: .4375rem;
+      @include transition($triangle-transition);
+    }
+
+    @include hover-focus {
+      cursor: pointer;
+    }
+  }
+
+  .drop-menu {
+    position: absolute;
+    display: none;
+    min-width: $drop-menu-min-width;
+    flex-direction: column;
+    padding: $drop-menu-padding;
+    border: $dropdown-menu-border;
+    border-radius: $drop-menu-radius;
+    background-color: $drop-menu-background;
+    z-index: 10;
+
+    * {
+      
+      color: $drop-menu-color;
+      padding: $dropdown-item-padding;
+      margin: 0;
+      @include transition($drop-menu-transition);
+    }
+
+    a {
+      display: block;
+      @include hover-focus {
+        text-decoration: none;
+        background-color: darken($drop-menu-background, 5%);
+      }
+    }
+
+    .drop-active {
+      color: $drop-active-color;
+      background-color: $drop-active-background;
+    }
+
+    .drop-separator {
+      height: 1px;
+      background: $separator-color;
+      margin: .375rem 0;
+      padding: 0;
+    }
+
+    .drop-item {
+      * {
+        display: inline-block;
+        padding: 0;
+      }
+    }
+  }
+
+  &.dropped {
+    .toggle {
+      &:after {
+        transform: rotate(180deg);
+      }
+    }
+
+    .drop-menu { display: inline-block; }
+  }
+}
+
+.dropdown {
+  .toggle:after {
+    @include triangle-icon($triangle-width, 'down');
+  }
+
+  .drop-menu {
+    left: 0;
+    top: $dropdown-menu-top;
+  }
+}
+
+.dropup {
+  .toggle:after {
+    @include triangle-icon($triangle-width, 'up');
+  }
+
+  .drop-menu {
+    left: 0;
+    bottom: 3rem;
+  }
+}
+
+.dropright {
+  .toggle:after {
+    @include triangle-icon($triangle-width, 'right');
+  }
+
+  .drop-menu {
+    margin-left: .125rem;
+  }
+}
+
+.dropleft {
+  input:checked ~ .button:before {
+    transform: rotate(180deg);
+  }
+
+  .toggle {
+    &:after {
+      display: none;
+    }
+    &:before {
+      @extend %shape-base;
+      margin-right: .4375rem;
+      @include triangle-icon($triangle-width, 'left');
+      @include transition($triangle-transition);
+    }
+  }
+
+  .drop-menu {
+    left: -$drop-menu-min-width - .125;
+  }
+}

data/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,158 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Variables
+//
+$input-color:                       $text-color !default;
+$input-background:                  $white !default;
+$input-padding:                     .375rem .75rem !default;
+$input-border:                      $border-base !default;
+$input-radius:                      $radius !default;
+$input-box-shadow:                  inset 0 1px 2px rgba($black, .075) !default;
+$input-placeholder-color:           $gray-600 !default;
+$input-disabled-background:         $gray-200 !default;
+$input-transition:                  border-color $speed ease-in-out, box-shadow $speed ease-in-out !default;
+$disabled-color:                    darken($gray-500, 15%) !default;
+$help-font-size:                    .75rem !default;
+$help-margin-top:                   .25rem !default;
+$select-height:                     calc(2.25rem + 2px) !default;
+$custom-select-padding-x:           .75rem !default;
+$custom-select-indicator-padding:   1rem !default;
+$custom-select-indicator-color:     $gray-800 !default;
+$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-background-size:     8px 10px !default; // In pixels because image dimensions
+$select-background:                 $input-background $custom-select-indicator no-repeat right $custom-select-padding-x center !default;
+$valid-color:                       $green !default;
+$invalid-color:                     $red !default;
+
+
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+select,
+textarea {
+  color: $input-color;
+  padding: $input-padding;
+  border: $input-border;
+  border-radius: $input-radius;
+  box-shadow: $input-box-shadow;
+  background-color: $input-background;
+
+  @include transition($input-transition);
+
+  &:focus {
+    outline: 0;
+    @include input-focus;
+  }
+
+  &::placeholder {
+    color: $input-placeholder-color;
+    opacity: 1;
+  }
+
+  &:disabled {
+    color: $disabled-color;
+    background-color: $input-disabled-background;
+    cursor: not-allowed;
+    opacity: .57;
+  }
+
+  &[readonly] {
+    background-color: $input-disabled-background;
+    opacity: 1;
+  }
+}
+
+input[type="range"] {
+  &:focus {
+    outline: none;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+}
+
+select:not([size]):not([multiple]) {
+  height: $select-height;
+  padding: .375rem 1.75rem .375rem .75rem;
+  background: $select-background;
+  background-size: $custom-select-background-size;
+  appearance: none;
+
+  &:disabled { background-color: $input-disabled-background; }
+
+  &::-ms-value {
+    // For visual consistency with IE and (under certain conditions) Edge.
+    color: $input-color;
+    background-color: $input-background;
+  }
+}
+
+select {
+  // Remove the outline focus on Firefox
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $text-color;
+  }
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    opacity: 0;
+  }
+}
+
+.form-group {
+  margin-bottom: 1rem;
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+  }
+
+  [type="checkbox"],
+  [type="radio"] {
+    display: inline;
+    width: .8125rem;
+    height: 1rem;
+    margin-right: .125rem;
+  }
+
+  .help,
+  [class$="-feedback"] {
+    display: block;
+    font-size: $help-font-size;
+    margin-top: $help-margin-top;
+  }
+
+  .checkbox + .checkbox,
+  .radio + .radio {
+    margin-left: 1rem;
+  }
+}
+
+@include validation-states("valid", $valid-color);
+@include validation-states("invalid", $invalid-color);
+
+.form-columns {
+  display: flex;
+  flex-wrap: wrap;
+  
+  .column,
+  [class*="column-of-"] {
+    padding: 0 .5rem;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    @include breakpoint-cellphone {
+      padding: 0;
+    }
+  }
+}