cactu 0.1.2 → 0.18.0

data/assets/stylesheets/mixins/_forms.scss

@@ -0,0 +1,44 @@
+//
+// Forms mixin
+// --------------------------------------------------
+
+
+@mixin input-focus($color: $blue) {
+  $input-box-shadow: inset 0 0 2px rgba($black, .075);
+  $input-focus-color: rgba($color, .25);
+  $input-focus-box-shadow: 0 0 0 $outline-width $input-focus-color;
+  
+  border-color: $color;
+  box-shadow: $input-box-shadow, $input-focus-box-shadow;
+}
+
+@mixin input-validation-state($state, $color) {
+  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
+  select,
+  textarea {
+    &.#{$state} {
+      border: $border-width solid $color;
+
+      &:focus {
+        @include input-focus($color);
+      }
+    }
+  }
+}
+
+@mixin validation-states($state, $color) {
+  @include input-validation-state($state, $color); 
+
+  .form-group {
+    .#{$state}-feedback {
+      color: $color;
+    }
+
+    .checkbox,
+    .radio {
+      &.#{$state} {
+        color: $color;
+      }
+    }
+  }
+}

data/assets/stylesheets/mixins/_grid.scss

@@ -0,0 +1,18 @@
+//
+// Grid mixins
+// --------------------------------------------------
+
+
+// Columns generator
+//
+@mixin make-specific-columns($name: '', $total-columns: $maximum-columns) {
+  @if $name != '' {
+    $name: $name + '-';
+  }
+
+  @for $i from 1 through $total-columns {
+    .#{$name}column-of-#{$i} {
+      width: percentage($i / $total-columns);
+    }
+  }
+}

data/assets/stylesheets/mixins/_hover.scss

@@ -0,0 +1,27 @@
+//
+// Hover mixins
+// --------------------------------------------------
+
+
+@mixin hover-focus {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin plain-hover-focus {
+  &,
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin hover-focus-active {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}

data/assets/stylesheets/mixins/_icons.scss

@@ -0,0 +1,22 @@
+//
+// Icons mixin
+// --------------------------------------------------
+
+
+// The direction corresponds to where the arrow is
+@mixin triangle-icon($size: 5px, $direction: 'down') {
+  @if $direction == 'up' or $direction == 'down' {
+    $side: if($direction == 'up', 'bottom', 'top');
+
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-#{$side}: $size solid;
+  }
+  @else {
+    $side: if($direction == 'left', 'right', 'left');
+
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-#{$side}: $size solid;
+  }
+}

data/assets/stylesheets/mixins/_navbar.scss

@@ -0,0 +1,60 @@
+//
+// Navbar mixins
+// --------------------------------------------------
+
+
+@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));
+
+  @if $base-color == null {
+    // Set default colors
+    border-bottom: $border-base;
+    background-color: $white-smoke;
+    
+    * {
+      color: $text;
+
+      &:hover,
+      &:focus {
+        color: $text-hover;
+      }
+
+      &.active { color: $text-active; }
+    }
+
+    .navbar-brand { color: $text-active; }
+
+    .disabled {
+      color: $text-disabled;
+      &:hover,
+      &:focus { color: $text-disabled; }
+    }
+    
+    // Set selected
+  } @else {
+    border-bottom: $border-width solid theme-color-level($base-color, 1);
+    background: $base-color;
+
+    * {
+      color: $text;
+
+      &:hover,
+      &:focus {
+        color: $text-hover;
+      }
+
+      &.active { color: $text-active; }
+    }
+
+    .navbar-brand { color: $text-active; }
+
+    .disabled {
+      color: $text-disabled;
+      &:hover,
+      &:focus { color: $text-disabled; }
+    }
+  }
+}

data/assets/stylesheets/mixins/_positions.scss

@@ -0,0 +1,12 @@
+//
+// Position mixins
+// --------------------------------------------------
+
+
+// Set an element with position sticky and top but you decide
+//the overpositioned
+@mixin sticky-top($zindex: 100) {
+  position: sticky;
+  top: 0;
+  z-index: $zindex;
+}

data/assets/stylesheets/mixins/_transition.scss

@@ -0,0 +1,16 @@
+//
+// Transition mixins
+// --------------------------------------------------
+
+
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    transition: $transition-all;
+  } @else {
+    transition: $transition;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

data/assets/stylesheets/utilities/_classes.scss

@@ -0,0 +1,69 @@
+//
+// Clases utility
+// --------------------------------------------------
+
+
+$example-code-color: $white-smoke !default;
+$disabled-class-color: $disabled-color !default;
+
+// Class with -expanded to the end
+//
+[class*="-expanded"] {
+  width: 100%;
+  max-width: 100%;
+}
+
+.highlight-example {
+  border: 3px solid $example-code-color;
+  padding: 1.5rem 1rem;
+  margin-top: 1rem;
+}
+
+.disabled {
+  color: $disabled-class-color;
+  pointer-events: none;
+
+  @include hover-focus {
+    color: $disabled-class-color;
+  }
+}
+
+// Alignment classes to the end
+//
+// Not used for display flex
+[class*="-centered"] {
+  text-align: center;
+}
+[class*="-right"] {
+  text-align: right;
+}
+
+// For flex alignment
+[class*="-start"] {
+  justify-content: start;
+}
+[class*="-center"] {
+  justify-content: center;
+}
+[class*="-end"] {
+  justify-content: end;
+}
+[class*="-around"] {
+  justify-content: space-around;
+}
+[class*="-between"] {
+  justify-content: space-between;
+}
+[class*="-evenly"] {
+  justify-content: space-evenly;
+}
+
+
+// Dispay classes
+//
+.show { display: block !important; }
+.hidden { display: none !important; }
+
+.clipped {
+  overflow: hidden;
+}

data/assets/stylesheets/utilities/_syntax.scss

@@ -0,0 +1,81 @@
+//
+// Syntax
+// For highlight styles
+// --------------------------------------------------
+
+.hll { background-color: #ffc; }
+.c { color: #999; }
+.k { color: #069; }
+.o { color: #555; }
+.cm { color: #999; }
+.cp { color: #099; }
+.c1 { color: #999; }
+.cs { color: #999; }
+.gd { background-color: #fcc; border: 1px solid #c00; }
+.ge { font-style: italic; }
+.gr { color: #f00; }
+.gh { color: #030; }
+.gi { background-color: #cfc; border: 1px solid #0c0; }
+.go { color: #aaa; }
+.gp { color: #009; }
+.gu { color: #030; }
+.gt { color: #9c6; }
+.kc { color: #069; }
+.kd { color: #069; }
+.kn { color: #069; }
+.kp { color: #069; }
+.kr { color: #069; }
+.kt { color: #078; }
+.m { color: #f60; }
+.s { color: #d44950; }
+.na { color: #4f9fcf; }
+.nb { color: #366; }
+.nc { color: #0a8; }
+.no { color: #360; }
+.nd { color: #99f; }
+.ni { color: #999; }
+.ne { color: #c00; }
+.nf { color: #c0f; }
+.nl { color: #99f; }
+.nn { color: #0cf; }
+.nt { color: #2f6f9f; }
+.nv { color: #033; }
+.ow { color: #000; }
+.w { color: #bbb; }
+.mf { color: #f60; }
+.mh { color: #f60; }
+.mi { color: #f60; }
+.mo { color: #f60; }
+.sb { color: #c30; }
+.sc { color: #c30; }
+.sd { font-style: italic; color: #c30; }
+.s2 { color: #c30; }
+.se { color: #c30; }
+.sh { color: #c30; }
+.si { color: #a00; }
+.sx { color: #c30; }
+.sr { color: #3aa; }
+.s1 { color: #c30; }
+.ss { color: #fc3; }
+.bp { color: #366; }
+.vc { color: #033; }
+.vg { color: #033; }
+.vi { color: #033; }
+.il { color: #f60; }
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
+
+.language-bash::before,
+.language-sh::before {
+  color: #009;
+  content: "$ ";
+  user-select: none;
+}
+
+.language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  user-select: none;
+}

data/cactu.gemspec

@@ -1,26 +1,26 @@
-# coding: utf-8
-$:.push File.expand_path("../lib", __FILE__)
-require 'cactu/version'
+
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "cactu/version"
 
 Gem::Specification.new do |spec|
   spec.name          = "cactu"
   spec.version       = Cactu::VERSION
-  spec.platform      = Gem::Platform::RUBY
   spec.authors       = ["Giovanni Mendoza"]
   spec.email         = ["mendozagioo@gmail.com"]
-  spec.summary       = "Cactu is a CSS library to help us to create webs easily"
-  spec.description   = "Cactu is a CSS library created to help any developer to create web pages very quickly and an easy way"
-  spec.homepage      = "https://github.com/mendozagioo/cactu"
+  spec.summary       = %q{A Sass framework to create webs easily, created to be simple, semantic, fast to learn, customizable, and scalable.}
+  spec.homepage      = "http://cactu.site"
   spec.license       = "MIT"
 
-  spec.rubyforge_project = "cactu"
-
-  spec.files         = `git ls-files`.split("\n")
-  spec.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
-  spec.require_paths = ["lib"]
+  spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  end
 
-  spec.add_dependency('sass', '>= 3.2.0')
-  spec.add_dependency('thor')
+  spec.add_runtime_dependency 'sassc', '~> 1.12', '>= 1.12.1'
+  spec.add_runtime_dependency 'autoprefixer-rails', '~> 9.1', '>= 9.1.0'
 
-  spec.add_development_dependency "rake"
+  spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_development_dependency 'term-ansicolor', '~> 0'
+  spec.add_development_dependency 'sprockets-rails', '~> 2.3', '>= 2.3.2'
+  spec.add_development_dependency 'uglifier', '~> 0'
 end

data/lib/cactu.rb

@@ -1,20 +1,48 @@
-# CodeKit needs relative paths
-dir = File.dirname(__FILE__)
-$LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
+require 'cactu/version'
 
-require "cactu/generator"
+module Cactu
+  class << self
+    def load!
+      if rails?
+        register_rails_engine
+      elsif sprockets?
+        register_sprockets
+      elsif defined?(::Sass) && ::Sass.respond_to?(:load_paths)
+        ::Sass.load_paths << stylesheets_path
+      end
+    end
 
-unless defined?(Sass)
-  require 'sass'
-end
+    # Paths
+    def gem_path
+      @gem_path ||= File.expand_path '..', File.dirname(__FILE__)
+    end
 
-module Cactu
-  if defined?(Rails) && defined?(Rails::Engine)
-    class Engine < ::Rails::Engine
+    def stylesheets_path
+      File.join assets_path, 'stylesheets'
+    end
+
+    def assets_path
+      @assets_path ||= File.join gem_path, 'assets'
+    end
+
+    def sprockets?
+      defined?(::Sprockets)
+    end
+
+    def rails?
+      defined?(::Rails)
+    end
+
+    private
+
+    def register_rails_engine
       require 'cactu/engine'
     end
 
-  else
-    Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
+    def register_sprockets
+      Sprockets.append_path(stylesheets_path)
+    end
   end
 end
+
+Cactu.load!