cactu 0.18.1 → 0.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2a585e2363f60570bbb6e449789afe557e82102ff9964c06dacc56c99261f24
-  data.tar.gz: fbcc4ed37666436ba4769aa615a12e8627cdb0278b0c127f06dae6b04a51db9e
+  metadata.gz: 6bfacaa91debe34ff5eff279d850f34ea53ff5b88180b6a368e386514e8cf4a4
+  data.tar.gz: 3995002eb8779ddc00be649fad921905a4599a468bff096dd73d4940b448a719
 SHA512:
-  metadata.gz: fef40e5f4919f77800f6b6d744b0f1cad0f5b5595c24a4d5fa7810f60ed408cd8090d7c4b3d8523c1364fc0e09b06e1665c8573e690d46014d3ff5bf24e3d22b
-  data.tar.gz: 024fca53b50f02685d7a98e5bc70a3b5ef916ea6c6827be9488b239f881cd2bd90da55112171f1901431de155bf34afa5e214b8d6074bcd710ee94cf3690f515
+  metadata.gz: 3d539bd3bb7eae4a5ab71f81783d468d954615c72e32c7341e1ffaf5fba36a964ef63bb44ba7ab530a49d7fb28cf7c7f9cd16b8b47d2531be05bb53f755640e9
+  data.tar.gz: b6384e9bdfbb280ef59775836db75fd91dc4d48a19aa774183a0e0cad5a8bb652d4c84c73b21349578721f59b09914d41fc480e6d11835f30e44f4740fb39870

data/README.md

@@ -11,7 +11,7 @@ Cactu is a Sass framework to create webs easily, created to be simple, semantic,
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'cactu', '~> 0.18.1'
+gem 'cactu', '~> 0.19.0'
 ```
 
 Ensure that `sprockets-rails` is at least v2.3.2.

data/assets/stylesheets/base/_global-variables.scss

@@ -59,4 +59,4 @@ $speed:             .15s !default;
 $line-height:       1.5 !default;
 $transition-all:    all $speed ease-in-out !default;
 $outline-width:     .125rem !default;
-$zindex-top:        1000 !default;
+$zindex-top:        1000 !default;

data/assets/stylesheets/cactu.scss

@@ -1,5 +1,5 @@
 /*!
- * Cactu v0.18.1 (http://cactu.site/)
+ * Cactu v0.19.0 (http://cactu.site/)
  * Copyright 2018 Giovanni Mendoza
  * Licensed under MIT (https://github.com/mendozagioo/cactu/blob/master/LICENSE)
  */
@@ -9,9 +9,11 @@
 @import "base/blocks";
 
 @import "functions/colors";
+@import "functions/converters";
 @import "functions/strings";
 
 @import "mixins/alerts";
+@import "mixins/badge";
 @import "mixins/breakpoints";
 @import "mixins/buttons";
 @import "mixins/forms";
@@ -22,6 +24,7 @@
 @import "mixins/positions";
 @import "mixins/transition";
 
+@import "elements/badge";
 @import "elements/button";
 @import "elements/code";
 @import "elements/icon";
@@ -43,4 +46,4 @@
 @import "components/tooltips";
 
 @import "utilities/classes";
-@import "utilities/syntax";
+@import "utilities/syntax";

data/assets/stylesheets/components/_alerts.scss

@@ -41,8 +41,12 @@ $alert-color:                theme-color-level($alert-color-base, $alert-color-l
     box-shadow: none !important;
     background-color: transparent;
 
-    @include hover-focus {
+    @include hover-focus-active {
       color: darken($alert-background, 80%);
+      // Used !important be cause the base style is set with:
+      // &:not(:disabled):not(.disabled):active,
+      // &:not(:disabled):not(.disabled).active
+      background-color: transparent !important;
     }
   }
 }

data/assets/stylesheets/components/_buttons.scss

@@ -18,6 +18,8 @@ $button-background-selected:      darken($gray-200, 10%) !default;
   .button {
     z-index: 2;
 
+    &:not(:last-child) { margin-right: 0; }
+
     &:focus,
     &:active,
     &.active {
@@ -27,11 +29,6 @@ $button-background-selected:      darken($gray-200, 10%) !default;
     &.selected {
       background-color: $button-background-selected;
     }
-    
-    & ~ button,
-    & ~ .button {
-      margin-left: 0;
-    }
   }
 }
 
@@ -79,4 +76,4 @@ $button-background-selected:      darken($gray-200, 10%) !default;
       border-radius: $vertical-button-last-radius;
     }
   }
-}
+}

data/assets/stylesheets/components/_forms.scss

@@ -18,12 +18,15 @@ $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:             .375rem 1.75rem .375rem .75rem !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-multiple:            str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cg fill='#{$custom-select-indicator-color}' %3E%3Ccircle cx='4' cy='2.2' r='2' /%3E%3Ccircle cx='4' cy='7.8' r='2' /%3E%3C/g%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;
+$select-multiple-background:        $input-background $custom-select-multiple no-repeat right $custom-select-padding-x center !default;
 $valid-color:                       $green !default;
 $invalid-color:                     $red !default;
 
@@ -36,6 +39,7 @@ textarea {
   border: $input-border;
   border-radius: $input-radius;
   box-shadow: $input-box-shadow;
+  appearance: none;
   background-color: $input-background;
 
   @include transition($input-transition);
@@ -75,11 +79,12 @@ input[type="range"] {
 
 select:not([size]):not([multiple]) {
   height: $select-height;
-  padding: .375rem 1.75rem .375rem .75rem;
+  padding: $custom-select-padding;
   background: $select-background;
   background-size: $custom-select-background-size;
-  appearance: none;
+}
 
+select:not([size]) {
   &:disabled { background-color: $input-disabled-background; }
 
   &::-ms-value {
@@ -89,6 +94,16 @@ select:not([size]):not([multiple]) {
   }
 }
 
+// Select multiple, only on mobiles
+// Including large mobile sizes
+@include breakpoint-mobile-max ($medium-desktop-size - 1) {
+  select[multiple] {
+    padding: $custom-select-padding;
+    background: $select-multiple-background;
+    background-size: $custom-select-background-size;
+  }
+}
+
 select {
   // Remove the outline focus on Firefox
   &:-moz-focusring {
@@ -114,9 +129,7 @@ select {
   [type="checkbox"],
   [type="radio"] {
     display: inline;
-    width: .8125rem;
-    height: 1rem;
-    margin-right: .125rem;
+    width: auto;
   }
 
   .help,
@@ -126,9 +139,20 @@ select {
     margin-top: $help-margin-top;
   }
 
-  .checkbox:not(:last-child),
-  .radio:not(:last-child) {
-    margin-right: 1rem;
+  .checkbox,
+  .checkbox-expanded,
+  .radio,
+  .radio-expanded {
+    position: relative;
+    padding-left: 1.25rem;
+
+    &:not(:last-child) { margin-right: 1rem; }
+
+    input {
+      position: absolute;
+      left: 0;
+      top: .25rem;
+    }
   }
 }
 
@@ -155,4 +179,4 @@ select {
       padding: 0;
     }
   }
-}
+}

data/assets/stylesheets/components/_paginations.scss

@@ -30,7 +30,6 @@ $pagination-item-active-background:     darken($pagination-item-background-hover
   > *,
   > a {
     display: flex;
-    @include transition($pagination-item-transition);
 
     &:not(:first-child) {
       margin-left: -$pagination-item-border-width;
@@ -56,6 +55,7 @@ $pagination-item-active-background:     darken($pagination-item-background-hover
   a {
     padding: $pagination-item-padding;
     border: $pagination-item-border;
+    @include transition($pagination-item-transition);
 
     @include hover-focus {
       text-decoration: none;

data/assets/stylesheets/components/_tables.scss

@@ -46,4 +46,4 @@ th {
   th, td {
     border: 0;
   }
-}
+}

data/assets/stylesheets/elements/_badge.scss

@@ -0,0 +1,40 @@
+//
+// Badge element
+// --------------------------------------------------
+
+
+//  Variables
+//
+$badge-color:                 $text-color !default;
+$badge-font-size:             80% !default;
+$badge-padding:               .125rem .375rem;
+$badge-border-radius:         $radius !default;
+$badge-pill-border-radius:    $radius-rounded !default;
+$badge-background:            $gray-400 !default;
+$badge-link-color-hover:      $badge-color !default;
+
+
+.badge,
+.badge-pill {
+  display: inline-block;
+  font-size: $badge-font-size;
+  text-align: center;
+  padding: $badge-padding;
+  border-radius: $badge-border-radius;
+  line-height: 1.3;
+  @include badge-theme($badge-background);
+
+  &[href] {
+    @include hover-focus {
+      text-decoration: none;
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.badge-pill {
+  border-radius: $badge-pill-border-radius;
+}

data/assets/stylesheets/elements/_button.scss

@@ -45,6 +45,8 @@ button,
   @include button-size($button-padding-y, $button-padding-x, $button-font-size, $button-line-height, $button-border-radius);
   @include transition($button-transition);
 
+  &:not(:last-child) { margin-right: .5rem; }
+
   // Share hover and focus styles
   &:hover {
     color: $button-color;
@@ -86,9 +88,4 @@ button,
       box-shadow: $button-focus-box-shadow, $button-active-box-shadow;
     }
   }
-
-  & ~ button,
-  & ~ .button {
-    margin-left: .5rem;
-  }
 }

data/assets/stylesheets/functions/_converters.scss

@@ -0,0 +1,13 @@
+//
+// Converters functions
+// --------------------------------------------------
+
+
+// Converter pixels to rems
+@function px-rem($px: 1px, $rem: $font-size) {
+  @if $px > 0 {
+    @return ($px / $rem) + rem;
+  } @else {
+    @return $px;
+  }
+}

data/assets/stylesheets/mixins/_badge.scss

@@ -0,0 +1,16 @@
+//
+// Badge theme mixin
+// --------------------------------------------------
+
+
+@mixin badge-theme($background: $gray-400) {
+  color: color-yiq($background);
+  background-color: $background;
+
+  &[href] {
+    @include hover-focus {
+      color: color-yiq($background);
+      background-color: darken($background, 10%);
+    }
+  }
+}

data/assets/stylesheets/mixins/_breakpoints.scss

@@ -39,6 +39,45 @@
   }
 }
 
+// Media of at least the minimum breakpoint width
+// Special sizes only apply for mobiles screens
+// Valid only if $min-size > 0
+@mixin breakpoint-mobile-min($min-size: 0) {
+  @if $max-size > 0 {
+    @media only screen and (min-device-width: $min-size) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width.
+// Special sizes only apply for mobiles screens
+// Valid only if $max-size > 0
+@mixin breakpoint-mobile-max($max-size: 0) {
+  @if $max-size > 0 {
+    @media only screen and (max-device-width: $max-size) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Special sizes only apply for mobiles screens
+// Valid only with 2 values and just if $max-size > $min-size
+@mixin breakpoint-mobile-between($min-size: 0, $max-size: 0) {
+  @if $min-size < $max-size and $max-size > $min-size {
+    @media only screen and (min-device-width: $min-size) and (max-device-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

data/assets/stylesheets/mixins/_navbar.scss

@@ -4,10 +4,10 @@
 
 
 @mixin navbar-theme($base-color: null, $theme: 'light') {
-  $text: if($theme == 'light', rgba(0,0,0,.5), rgba(255,255,255,.5));
-  $text-hover: if($theme == 'light', rgba(0,0,0,.7), rgba(255,255,255,.7));
-  $text-active: if($theme == 'light', $black, $white);
-  $text-disabled: if($theme == 'light', rgba(0,0,0,.3), rgba(255,255,255,.3));
+  $text:            if($theme == 'light', rgba(0,0,0,.5), rgba(255,255,255,.5));
+  $text-hover:      if($theme == 'light', rgba(0,0,0,.7), rgba(255,255,255,.7));
+  $text-active:     if($theme == 'light', $black, $white);
+  $text-disabled:   if($theme == 'light', rgba(0,0,0,.3), rgba(255,255,255,.3));
 
   @if $base-color == null {
     // Set default colors
@@ -35,6 +35,8 @@
     
     // Set selected
   } @else {
+    $toggler-outline: 0 0 0 $outline-width darken($base-color, 15%);
+
     border-bottom: $border-width solid theme-color-level($base-color, 1);
     background: $base-color;
 
@@ -51,6 +53,12 @@
 
     .navbar-brand { color: $text-active; }
 
+    .navbar-toggler {
+      background-color: transparent;
+
+      &:focus { box-shadow: $toggler-outline; }
+    }
+
     .disabled {
       color: $text-disabled;
       &:hover,

data/lib/cactu/version.rb

@@ -1,3 +1,3 @@
 module Cactu
-  VERSION = "0.18.1"
+  VERSION = "0.19.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cactu
 version: !ruby/object:Gem::Version
-  version: 0.18.1
+  version: 0.19.0
 platform: ruby
 authors:
 - Giovanni Mendoza
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-07 00:00:00.000000000 Z
+date: 2018-09-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -127,17 +127,13 @@ files:
 - README.md
 - Rakefile
 - assets/stylesheets/base/_blocks.scss
-- assets/stylesheets/base/_examples.scss
 - assets/stylesheets/base/_global-variables.scss
 - assets/stylesheets/base/_reboot.scss
-- assets/stylesheets/base/_reset.scss
 - assets/stylesheets/cactu.scss
 - assets/stylesheets/components/_alerts.scss
-- assets/stylesheets/components/_blockquotes.scss
 - assets/stylesheets/components/_buttons.scss
 - assets/stylesheets/components/_collapse.scss
 - assets/stylesheets/components/_dropdowns.scss
-- assets/stylesheets/components/_figures.scss
 - assets/stylesheets/components/_forms.scss
 - assets/stylesheets/components/_grids.scss
 - assets/stylesheets/components/_lists.scss
@@ -145,19 +141,19 @@ files:
 - assets/stylesheets/components/_navbars.scss
 - assets/stylesheets/components/_navs.scss
 - assets/stylesheets/components/_paginations.scss
-- assets/stylesheets/components/_sidebars.scss
 - assets/stylesheets/components/_tables.scss
 - assets/stylesheets/components/_tooltips.scss
+- assets/stylesheets/elements/_badge.scss
 - assets/stylesheets/elements/_button.scss
 - assets/stylesheets/elements/_code.scss
 - assets/stylesheets/elements/_icon.scss
 - assets/stylesheets/elements/_image.scss
-- assets/stylesheets/elements/_link.scss
-- assets/stylesheets/elements/_type.scss
 - assets/stylesheets/elements/_typography.scss
 - assets/stylesheets/functions/_colors.scss
+- assets/stylesheets/functions/_converters.scss
 - assets/stylesheets/functions/_strings.scss
 - assets/stylesheets/mixins/_alerts.scss
+- assets/stylesheets/mixins/_badge.scss
 - assets/stylesheets/mixins/_breakpoints.scss
 - assets/stylesheets/mixins/_buttons.scss
 - assets/stylesheets/mixins/_forms.scss

data/assets/stylesheets/base/_examples.scss

@@ -1,12 +0,0 @@
-//
-// ----------------------------------------------------------------
-// Examples
-// ----------------------------------------------------------------
-
-.empty-column {
-  width: 100%;
-  padding: 1rem .5rem;
-  margin-bottom: .7rem;
-  font-size: 13px;
-  background-color: $gray-200;
-}

data/assets/stylesheets/base/_reset.scss

@@ -1,61 +0,0 @@
-//
-// Grid mixins
-// --------------------------------------------------
-//
-// Based on:
-// http://meyerweb.com/eric/tools/css/reset/ 
-// v2.0 | 20110126
-// License: none (public domain)
-//
-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-// 2. Addition div tag for display: block
-
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,ƒ
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-div, article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

data/assets/stylesheets/components/_blockquotes.scss

@@ -1,3 +0,0 @@
-//
-// Blockquotes
-// --------------------------------------------------

data/assets/stylesheets/components/_figures.scss

@@ -1,3 +0,0 @@
-//
-// Figures
-// --------------------------------------------------

data/assets/stylesheets/components/_sidebars.scss

@@ -1,15 +0,0 @@
-//
-// Sidebars
-// --------------------------------------------------
-
-
-.sidebar {
-  height: calc(100vh - 3.5rem);
-  position: sticky;
-  border-right: 1px solid $border-color;
-
-  @include breakpoint-cellphone {
-    height: auto;
-    border-right: 0;
-  }
-}

data/assets/stylesheets/elements/_link.scss

@@ -1,41 +0,0 @@
-//
-// Link
-// --------------------------------------------------
-
-
-// Variables
-//
-$link-color:              $blue !default;
-$link-decoration:         none !default;
-$link-hover-color:        darken($link-color, 10%) !default;
-$link-hover-decoration:   underline !default;
-$link-transition:         $transition-all !default;
-
-
-a {
-  display: inline-block;
-  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;
-  }
-}

data/assets/stylesheets/elements/_type.scss

@@ -1,80 +0,0 @@
-//
-// Type
-// --------------------------------------------------
-
-
-// Variables
-//
-$headings-font-family:    $font-family !default;
-$headings-font-weight:    $font-weight-bold !default;
-$headings-color:          $text-color !default;
-$headings-margins:        1rem 0 .5rem !default;
-$h1-font-size:            $font-size * 2.6 !default;
-$h2-font-size:            $font-size * 2.1 !default;
-$h3-font-size:            $font-size * 1.8 !default;
-$h4-font-size:            $font-size * 1.5 !default;
-$h5-font-size:            $font-size * 1.2 !default;
-$h6-font-size:            $font-size !default;
-
-
-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;
-}
-
-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 {
-  margin: $headings-margins;
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  color: $headings-color;
-}
-
-h1 { font-size: $h1-font-size; }
-h2 { font-size: $h2-font-size; }
-h3 { font-size: $h3-font-size; }
-h4 { font-size: $h4-font-size; }
-h5 { font-size: $h5-font-size; }
-h6 { font-size: $h6-font-size; }