cactu 0.1.2 → 0.18.0

data/assets/stylesheets/elements/_icon.scss

@@ -0,0 +1,66 @@
+//
+// Icon
+// --------------------------------------------------
+
+
+// Variables
+//
+$icon-color: $text-color !default;
+
+
+.menu-icon,
+.close-icon {
+  display: block;
+  width: 22px;
+
+  &:before,
+  &:after {
+    @extend %shape-block;
+    height: 2px;
+    margin: 5px 0;
+    background-color: $icon-color;
+    @include transition($transition-all);
+  }
+}
+
+.close-icon {
+  &:before {
+    transform: rotate(45deg);
+    margin-top: 5px;
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+    margin-top: -7px;
+  }
+}
+
+.chevron-down-icon {
+  position: absolute;
+  right: 8px;
+  top: 16px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin: -5px 0;
+  background: none;
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    width: 50%;
+    height: 2px;
+    margin-top: 3px;
+    background-color: $icon-color;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+  
+  &:after {
+    transform: rotate(-45deg);
+    margin-left: -3px;
+  }
+}

data/assets/stylesheets/elements/_image.scss

@@ -0,0 +1,33 @@
+//
+// Image
+// --------------------------------------------------
+
+
+$image-padding:     .25rem !default;
+$image-radius:      $radius !default;
+$image-border:      $border-base !default;
+$image-background:  $white !default;
+
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
+}
+
+figcaption {
+  margin-top: .5rem;
+  font-size: 90%;
+}
+
+.image-edge {
+  padding: $image-padding;
+  border-radius: $image-radius;
+  border: $image-border;
+  background-color: $image-background;
+}

data/assets/stylesheets/elements/_typography.scss

@@ -0,0 +1,130 @@
+//
+// Type
+// --------------------------------------------------
+
+
+// Variables
+//
+$headings-font-weight:    $font-weight-bold !default;
+$headings-margins:        1rem 0 .5rem !default;
+$h1-font-size:            2.8125rem !default;
+$h2-font-size:            2.125rem !default;
+$h3-font-size:            1.75rem !default;
+$h4-font-size:            1.5rem !default;
+$h5-font-size:            1.25rem !default;
+$h6-font-size:            1rem !default;
+$link-color:              $blue !default;
+$link-decoration:         none !default;
+$link-hover-color:        darken($link-color, 10%) !default;
+$link-hover-decoration:   underline !default;
+$link-transition:         color $speed ease-in-out, text-decoration $speed ease-in-out !default;
+
+
+// Anchors
+//
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+  background-color: transparent;
+  @include transition($link-transition);
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
+
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+
+  @include hover-focus {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+// Abbreviation
+//
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+  font-size: 1.25rem;
+}
+
+cite {
+  display: block;
+  font-size: 80%;
+  color: $text-color + 50;
+
+  &:before {
+    content: "\2014 \00A0";
+  }
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: .8em; // 80%
+}
+
+span {
+  font-style: inherit;
+  font-weight: inherit;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: .75em; // 75%
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+p { margin-bottom: .7rem; }
+
+
+// Headings
+//
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin: $headings-margins;
+  font-weight: $headings-font-weight;
+}
+
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
+
+// Alignment
+//
+.text-left { text-align: left; }
+.text-centered { text-align: center; }
+.text-right { text-align: right; }

data/assets/stylesheets/functions/_colors.scss

@@ -0,0 +1,40 @@
+//
+// Colors function
+// --------------------------------------------------
+
+
+// Variables
+//
+$theme-color-interval:      8% !default;
+$yiq-text-dark:             $text-color !default;
+$yiq-text-light:            $white !default;
+$yiq-contrasted-threshold:  150 !default;
+
+
+@function theme-color-level($color: $gray-300, $level: 0) {
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
+
+
+// Color contrast
+// Credit: Bootstrap functions
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_functions.scss
+// v4.1.3
+// License: MIT
+//
+@function color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $yiq-text-dark;
+  } @else {
+    @return $yiq-text-light;
+  }
+}

data/assets/stylesheets/functions/_strings.scss

@@ -0,0 +1,14 @@
+//
+// Strings function
+// --------------------------------------------------
+
+
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

data/assets/stylesheets/mixins/_alerts.scss

@@ -0,0 +1,18 @@
+//
+// Alerts mixins
+// --------------------------------------------------
+
+
+@mixin alert-theme($background, $border, $color) {
+  color: $color;
+  border: $border-width solid $border;
+  background-color: $background;
+
+  hr {
+    background-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 70%);
+  }
+}

data/assets/stylesheets/mixins/_breakpoints.scss

@@ -0,0 +1,93 @@
+//
+// Breakpoints mixins
+// --------------------------------------------------
+
+
+// Media of at least the minimum breakpoint width
+// Valid only if $min-size > 0
+@mixin breakpoint-min($min-size: 0) {
+  @if $min-size > 0 {
+    @media screen and (min-width: $min-size) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width.
+// Valid only if $max-size > 0
+@mixin breakpoint-max($max-size: 0) {
+  @if $max-size > 0 {
+    @media screen and (max-width: $max-size) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Valid only with 2 values and just if $max-size > $min-size
+@mixin breakpoint-between($min-size: 0, $max-size: 0) {
+  @if $min-size < $max-size and $max-size > $min-size {
+    @media (min-width: $min-size) and (max-width: $max-size) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Specific media queriues for this framework.
+// If you need a different breakpoints, use:
+// breakpoint-min, breakpoint-max or breakpoint-between
+//
+// max 575px
+@mixin breakpoint-cellphone {
+  @include breakpoint-max($cellphone-size - 1) {
+    @content;
+  }
+}
+
+// 576px - 767px
+@mixin breakpoint-cellphone-tablet {
+  @include breakpoint-between($cellphone-size, $tablet-size - 1) {
+    @content;
+  }
+}
+
+// 768px - 959px
+@mixin breakpoint-tablet {
+  @include breakpoint-between($tablet-size, $small-desktop-size - 1) {
+    @content;
+  }
+}
+
+// 960px - 1199px
+@mixin breakpoint-small-desktop {
+  @include breakpoint-between($small-desktop-size, $medium-desktop-size - 1) {
+    @content;
+  }
+}
+
+// 1200px - 1343px
+@mixin breakpoint-medium-desktop {
+  @include breakpoint-between($medium-desktop-size, $large-desktop-size - 1) {
+    @content;
+  }
+}
+
+// min 1344px
+@mixin breakpoint-large-desktop {
+  @include breakpoint-min($large-desktop-size) {
+    @content;
+  }
+}
+
+// Specia: 576px - 1199px
+@mixin breakpoint-cellphone-medium-desktop {
+  @include breakpoint-between($cellphone-size, $medium-desktop-size - 1) {
+    @content;
+  }
+}

data/assets/stylesheets/mixins/_buttons.scss

@@ -0,0 +1,96 @@
+//
+// Buttons mixins
+// --------------------------------------------------
+
+
+// Button sizes
+@mixin button-size($padding-y: .375rem, $padding-x: .75rem, $font-size: 1rem, $line-height: $line-height, $border-radius: $radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
+
+
+// Button theme
+@mixin button-theme($background: $gray-200) {
+  $focus-box-shadow:     0 0 0 $outline-width darken($background, 15%);
+  $active-box-shadow:    inset 0 3px 5px rgba($black, .125);
+
+  color: color-yiq($background);
+  background-color: $background;
+
+  &:hover {
+    color: color-yiq($background);
+    background-color: darken($background, 10%);
+  }
+
+  &:focus,
+  &.focus {
+    color: color-yiq($background);
+    box-shadow: $focus-box-shadow;
+  }
+
+  &.disabled,
+  &:disabled {
+    &:hover,
+    &:focus {
+      color: color-yiq($background);
+      background-color: $background;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    box-shadow: $active-box-shadow;
+    background-color: darken($background, 10%);
+
+    &:focus {
+      box-shadow: $focus-box-shadow, $active-box-shadow;
+    }
+  }
+}
+
+// Button contoured
+@mixin button-outline($color: $text-color) {
+  $focus-box-shadow:     0 0 0 $outline-width lighten($color, 30%);
+  $active-box-shadow:    inset 0 3px 5px rgba($black, .125);
+
+  color: $color;
+  border-color: $color;
+  background-color: transparent;
+
+  &:hover {
+    color: color-yiq($color);
+    border-color: $color;
+    background-color: $color;
+  }
+
+  &:focus,
+  &.focus {
+    color: $color;
+    box-shadow: $focus-box-shadow;
+
+    &:hover { color: color-yiq($color); }
+  }
+
+  &.disabled,
+  &:disabled {
+    &:hover,
+    &:focus {
+      color: $color;
+      background-color: transparent;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: color-yiq($color);
+    background-color: $color;
+    box-shadow: $active-box-shadow;
+
+    &:focus {
+      box-shadow: $focus-box-shadow, $active-box-shadow;
+    }
+  }
+}