Merged from gh-pages

mendozagioo · Sep 5, 2018 · d61a461 · d61a461
2 parents a388982 + 2decdc2
commit d61a461
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 41 deletions.
diff --git a/_config.yml b/_config.yml
@@ -10,7 +10,7 @@ twitter: cactu-framework
 
 # Server
 baseurl:   ""
-url:       "https://cactu.site"
+url:       "http://cactu.site"
 encoding:  UTF-8
 
 # Permalinks
@@ -24,8 +24,8 @@ kramdown:
   auto_ids: true
 
 # Custom variables
-current_version:      0.17.0
-current_ruby_version: 0.17.0
+current_version:      0.18.0
+current_ruby_version: 0.18.0
 
 plugins:
   - jekyll-redirect-from

diff --git a/css/cactu.css b/css/cactu.css
@@ -1,7 +1,7 @@
 /*!
- * Cactu v0.17.0 (https://cactu.site/)
+ * Cactu v0.18.0 (http://cactu.site/)
  * Copyright 2018 Giovanni Mendoza
- * Licensed under MIT (https://github.com/mendozagioo/cactu/LICENSE)
+ * Licensed under MIT (https://github.com/mendozagioo/cactu/blob/master/LICENSE)
  */
 *,
 *::before,
@@ -288,8 +288,8 @@ button,
   -ms-user-select: none;
   user-select: none;
   color: #343a40;
-  background-color: #e9ecef;
   border: 1px solid transparent;
+  background-color: #e9ecef;
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -304,27 +304,25 @@ button,
   }
 }
 
-button:hover, button:focus,
-.button:hover,
-.button:focus {
+button:hover,
+.button:hover {
   color: #343a40;
   text-decoration: none;
-  cursor: pointer;
   background-color: #cbd3da;
 }
 
 button:focus, button.focus,
 .button:focus,
 .button.focus {
   outline: 0;
+  color: #343a40;
+  text-decoration: none;
   box-shadow: 0 0 0 0.125rem #aeb9c4;
-  background-color: #cbd3da;
 }
 
 button.disabled, button:disabled,
 .button.disabled,
 .button:disabled {
-  cursor: not-allowed;
   opacity: 0.57;
   box-shadow: none;
 }
@@ -337,10 +335,16 @@ button.disabled:hover, button.disabled:focus, button:disabled:hover, button:disa
   background-color: #e9ecef;
 }
 
+button:not(:disabled):not(.disabled),
+.button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
 button:not(:disabled):not(.disabled):active, button:not(:disabled):not(.disabled).active,
 .button:not(:disabled):not(.disabled):active,
 .button:not(:disabled):not(.disabled).active {
   background-image: none;
+  background-color: #cbd3da;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 

diff --git a/css/cactu.min.css b/css/cactu.min.css
diff --git a/index.html b/index.html
@@ -6,13 +6,13 @@
 <section id="home-top-section">
   <div class="container">
     <div class="columns">
-      <div class="column-of-10">
+      <div class="column-of-9">
         <h1>
           Cactu is the new generation
           <br> of <span class="sass-framework">Sass framework</span>
         </h1>
         <a href="{{site.base_url}}/documentation/getting-started/introduction" class="button button-principal">Get Started</a>
-        <a href="https://github.com/mendozagioo/cactu/archive/master.zip" class="button">Download</a>
+        <a href="https://github.com/mendozagioo/cactu/archive/master.zip" class="button button-secondary">Download</a>
         <p class="currently-version">Currently v{{ site.current_version }}</p>
       </div>
     </div>
@@ -28,14 +28,14 @@ <h1>Scalable</h1>
           <p>
             Start with the necessary and continue adding what you need using our mixins
           </p>
-          <a href="{{site.base_url}}/documentation/getting-started/introduction">Get Started</a>
+          <a class="button button-outline" href="{{site.base_url}}/documentation/getting-started/introduction">Get Started</a>
         </div>
         <div class="column">
           <h1>Modular</h1>
           <p>
             Just import what you need. You know what is important for you project
           </p>
-          <a href="{{site.base_url}}/documentation/getting-started/contents">Watch contents</a>
+          <a class="button button-outline" href="{{site.base_url}}/documentation/getting-started/contents">Watch contents</a>
         </div>
       </div>
     </div>
@@ -46,14 +46,14 @@ <h1>Responsive</h1>
           <p>
             Mobile-first on mind, adapted to any resolution needed
           </p>
-          <a href="{{site.base_url}}/documentation/layout/overview">Watch layout</a>
+          <a class="button button-outline" href="{{site.base_url}}/documentation/layout/overview">Watch layout</a>
         </div>
         <div class="column">
           <h1>NO JavaScript</h1>
           <p>
             Just Saas code compiled to CSS, define the interaction with you favorite JS framework
           </p>
-          <a href="{{site.base_url}}/documentation/components/dropdowns">Watch an example</a>
+          <a class="button button-outline" href="{{site.base_url}}/documentation/components/dropdowns">Watch an example</a>
         </div>
       </div>
     </div>
@@ -110,7 +110,7 @@ <h2>
       <span class="home-minimal-size">Just 35kb</span>
       <div>
         <a href="{{site.base_url}}/documentation/getting-started/introduction" class="button button-principal">Get started</a>
-        <a href="https://github.com/mendozagioo/cactu" target="_blank" class="button">Get involved</a>
+        <a href="https://github.com/mendozagioo/cactu" target="_blank" class="button button-secondary">Get involved</a>
       </div>
     </div>
   </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cactu",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A Sass framework to create webs easily, created to be simple, semantic, fast to learn, customizable, and scalable",
   "scripts": {
     "start": "gulp sass:watch | bundle exec jekyll serve"
@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/mendozagioo/cactu/issues"
   },
-  "homepage": "https://cactu.site",
+  "homepage": "http://cactu.site",
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.1",

diff --git a/scss/base/_reboot.scss b/scss/base/_reboot.scss
@@ -69,8 +69,8 @@ table {
 }
 
 // Reboot styles
-// Mostly taken of Bootstrap
-// Credit: http://getbootstrap.com/
+// Mostly taken from Bootstrap
+// Credit: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
 // v4.1
 // License: MIT
 //

diff --git a/scss/cactu.scss b/scss/cactu.scss
@@ -1,7 +1,7 @@
 /*!
- * Cactu v0.17.0 (https://cactu.site/)
+ * Cactu v0.18.0 (http://cactu.site/)
  * Copyright 2018 Giovanni Mendoza
- * Licensed under MIT (https://github.com/mendozagioo/cactu/LICENSE)
+ * Licensed under MIT (https://github.com/mendozagioo/cactu/blob/master/LICENSE)
  */
 
 @import "base/global-variables";

diff --git a/scss/elements/_button.scss b/scss/elements/_button.scss
@@ -40,30 +40,29 @@ button,
   vertical-align: middle;
   user-select: none;
   color: $button-color;
-  background-color: $button-background;
   border: $button-border;
+  background-color: $button-background;
   @include button-size($button-padding-y, $button-padding-x, $button-font-size, $button-line-height, $button-border-radius);
   @include transition($button-transition);
 
   // Share hover and focus styles
-  @include hover-focus {
+  &:hover {
     color: $button-color;
     text-decoration: none;
-    cursor: pointer;
     background-color: $button-hover-background;
   }
 
   &:focus,
   &.focus {
     outline: 0;
+    color: $button-color;
+    text-decoration: none;
     box-shadow: $button-focus-box-shadow;
-    background-color: $button-hover-background;
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    cursor: not-allowed;
     opacity: $button-disabled-opacity;
     box-shadow: none;
 
@@ -72,9 +71,15 @@ button,
     }
   }
 
+  // Only for selectable buttons
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     background-image: none;
+    background-color: $button-hover-background;
     box-shadow: $button-active-box-shadow;
 
     &:focus {

diff --git a/scss/functions/_colors.scss b/scss/functions/_colors.scss
@@ -5,12 +5,36 @@
 
 // Variables
 //
-$theme-color-interval:    8%;
+$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;
+  }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -13,35 +13,81 @@
 
 
 // Button theme
-@mixin button-theme($color: $text-color, $background: $gray-200) {
-  $focus-box-shadow:     0 0 0 $outline-width darken($background, 20%) !default;
-  $active-box-shadow:    inset 0 3px 5px rgba($black, .125) !default;
+@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;
+  color: color-yiq($background);
   background-color: $background;
 
-  &:hover,
-  &:focus {
+  &: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;
+      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;