').addClass("hide"),$("body").prepend(this.$overlay)),this.$overlay.addClass("overlay"))},buildHeader:function(){this.opts.header&&this.$header.html(this.opts.header)},load:function(t){this.buildModal(),this.buildOverlay(),this.buildHeader(),this.opts.url?this.buildContent():this.open(t)},open:function(t){t&&t.preventDefault(),this.isOpened()||(this.detect.isMobile()&&(this.opts.width="96%"),this.opts.overlay&&this.$overlay.removeClass("hide"),this.$target.removeClass("hide"),this.$modal.removeClass("hide"),this.enableEvents(),this.findActions(),this.resize(),$(window).on("resize."+this.namespace,$.proxy(this.resize,this)),this.detect.isDesktop()&&this.utils.disableBodyScroll(),this.$modal.find("input[type=text],input[type=url],input[type=email]").on("keydown."+this.namespace,$.proxy(this.handleEnter,this)),this.callback("open"),this.$modal.animation(this.opts.animationOpen,$.proxy(this.onOpened,this)))},close:function(t){if(this.$modal&&this.isOpened()){if(t){if(this.shouldNotBeClosed(t.target))return;t.preventDefault()}this.callback("close"),this.disableEvents(),this.$modal.animation(this.opts.animationClose,$.proxy(this.onClosed,this)),this.opts.overlay&&this.$overlay.animation(this.opts.animationClose)}},onOpened:function(){this.$modal.addClass("open"),this.callback("opened"),$.modalcurrent=this},onClosed:function(){this.callback("closed"),this.$target.addClass("hide"),this.$modal.removeClass("open"),this.detect.isDesktop()&&this.utils.enableBodyScroll(),this.$body.css("height",""),$.modalcurrent=null},isOpened:function(){return this.$modal.hasClass("open")},getData:function(){var e=new t.FormData(this);return e.set(""),e.get()},buildContent:function(){$.ajax({url:this.opts.url+"?"+(new Date).getTime(),cache:!1,type:"post",data:this.getData(),success:$.proxy(function(t){this.$body.html(t),this.open()},this)})},buildWidth:function(){var t=this.opts.width,e="2%",s="2%",i=t.match(/%$/);parseInt(this.opts.width)>$(window).width()&&!i?t="96%":i||(e="16px",s="16px"),this.$modal.css({width:t,"margin-top":e,"margin-bottom":s})},buildPosition:function(){if("center"===this.opts.position){var t=$(window).height(),e=this.$modal.outerHeight(),s=t/2-e/2+"px";this.detect.isMobile()?s="2%":e>t&&(s="16px"),this.$modal.css("margin-top",s)}},buildHeight:function(){var t=$(window).height();if(this.opts.maxHeight){var e=parseInt(this.$body.css("padding-top"))+parseInt(this.$body.css("padding-bottom")),s=parseInt(this.$modal.css("margin-top"))+parseInt(this.$modal.css("margin-bottom")),i=t-this.$header.innerHeight()-e-s;this.$body.height(i)}else!1!==this.opts.height&&this.$body.css("height",this.opts.height);this.$modal.outerHeight()>t&&(this.opts.animationOpen="show",this.opts.animationClose="hide")},resize:function(){this.buildWidth(),this.buildPosition(),this.buildHeight()},enableEvents:function(){this.$close.on("click."+this.namespace,$.proxy(this.close,this)),$(document).on("keyup."+this.namespace,$.proxy(this.handleEscape,this)),this.$target.on("click."+this.namespace,$.proxy(this.close,this))},disableEvents:function(){this.$close.off("."+this.namespace),$(document).off("."+this.namespace),this.$target.off("."+this.namespace),$(window).off("."+this.namespace)},findActions:function(){this.$body.find('[data-action="modal-close"]').on("mousedown."+this.namespace,$.proxy(this.close,this))},setHeader:function(t){this.$header.html(t)},setContent:function(t){this.$body.html(t)},setWidth:function(t){this.opts.width=t,this.resize()},getModal:function(){return this.$modal},getBody:function(){return this.$body},getHeader:function(){return this.$header},handleEnter:function(t){13===t.which&&(t.preventDefault(),this.close(!1))},handleEscape:function(t){return 27!==t.which||this.close(!1)},shouldNotBeClosed:function(t){return"modal-close"!==$(t).attr("data-action")&&t!==this.$close[0]&&0!==$(t).closest(".modal").length}},t.Modal.inherits(t),t.Plugin.create("Modal"),t.Plugin.autoload("Modal")}(Kube);
\ No newline at end of file
diff --git a/dist/scss/kube.scss b/dist/scss/kube.scss
index 0ac99ee..e16a320 100644
--- a/dist/scss/kube.scss
+++ b/dist/scss/kube.scss
@@ -1,16 +1,31 @@
+$font-size: 16px !default;
+
+// Calculate em from px
+@function em($pixels, $base-font-size: $font-size) {
+ @if (unitless($pixels)) {
+ $pixels: $pixels * 1px;
+ }
+
+ @if (unitless($base-font-size)) {
+ $base-font-size: $base-font-size * 1px;
+ }
+
+ @return $pixels / $base-font-size * 1em;
+}
+
// BREAKPOINTS
// ---------------------------------------------------------------------------
-$sm: 768px !default;
-$md: 1024px !default;
-$lg: 1200px !default;
+$sm: em(768) !default;
+$md: em(1024) !default;
+$lg: em(1200) !default;
// WIDTH
// ---------------------------------------------------------------------------
-$w-small: 480px !default;
-$w-medium: 600px !default;
-$w-big: 740px !default;
-$w-large: 840px !default;
+$w-small: em(480) !default;
+$w-medium: em(600) !default;
+$w-big: em(740) !default;
+$w-large: em(840) !default;
// Z-INDEX
@@ -78,21 +93,20 @@ $color-aluminum: #f8f8f8 !default;
// ---------------------------------------------------------------------------
// Font Size
-$font-size: 16px !default;
-$font-size-smaller: $font-size - 4px !default;
-$font-size-small: $font-size - 2px !default;
-$font-size-big: $font-size + 2px !default;
-$font-size-large: $font-size + 4px !default;
+$font-size-smaller: em($font-size - 4px) !default;
+$font-size-small: em($font-size - 2px) !default;
+$font-size-big: em($font-size + 2px) !default;
+$font-size-large: em($font-size + 4px) !default;
// Baseline
-$base-line: 24px !default;
-$base-line-smaller: 20px !default;
-$base-line-small: 20px !default;
-$base-line-big: 28px !default;
-$base-line-large: 32px !default;
+$base-line: em($font-size + 8px) !default;
+$base-line-smaller: em($font-size + 4px) !default;
+$base-line-small: em($font-size + 4px) !default;
+$base-line-big: em($font-size + 12px) !default;
+$base-line-large: em($font-size + 16px) !default;
// Margin
-$text-margin-bottom: $font-size !default;
+$text-margin-bottom: em($font-size) !default;
// HEADINGS
@@ -100,22 +114,22 @@ $text-margin-bottom: $font-size !default;
// Font Size
// By default: 60, 48, 36, 24, 21, 18, 16
-$heading-font-size-title: 60px !default;
-$heading-font-size-1: 48px !default;
-$heading-font-size-2: 36px !default;
-$heading-font-size-3: 24px !default;
-$heading-font-size-4: 21px !default;
-$heading-font-size-5: 18px !default;
-$heading-font-size-6: 16px !default;
+$heading-font-size-title: em($font-size + 44px) !default;
+$heading-font-size-1: em($font-size + 32px) !default;
+$heading-font-size-2: em($font-size + 16px) !default;
+$heading-font-size-3: em($font-size + 8px) !default;
+$heading-font-size-4: em($font-size + 5px) !default;
+$heading-font-size-5: em($font-size + 2px) !default;
+$heading-font-size-6: em($font-size) !default;
// Baseline
-$heading-base-line-title: 64px !default;
-$heading-base-line-1: 52px !default;
-$heading-base-line-2: 40px !default;
-$heading-base-line-3: 32px !default;
-$heading-base-line-4: 32px !default;
-$heading-base-line-5: 28px !default;
-$heading-base-line-6: 24px !default;
+$heading-base-line-title: 4/3.25 * em($font-size) !default;
+$heading-base-line-1: 3.25/2.5 * em($font-size) !default;
+$heading-base-line-2: 2.5/2 * em($font-size) !default;
+$heading-base-line-3: 2/2 * em($font-size) !default;
+$heading-base-line-4: 2/1.75 * em($font-size) !default;
+$heading-base-line-5: 1.75/1.5 * em($font-size) !default;
+$heading-base-line-6: 1.5/1.25 * em($font-size) !default;
// Margin
$heading-margin-bottom: $font-size !default;
@@ -125,10 +139,10 @@ $heading-margin-bottom: $font-size !default;
// ---------------------------------------------------------------------------
// Font Size
-$table-font-size: $font-size - 1px !default;
+$table-font-size: em($font-size - 1px) !default;
// Baseline
-$table-base-line: 24px !default;
+$table-base-line: em($font-size + 8px) !default;
// Padding
$table-padding-tb: 1rem !default;
@@ -145,63 +159,63 @@ $table-background-striped: $color-aluminum !default;
// ---------------------------------------------------------------------------
// Font Size
-$button-font-size: 15px !default;
-$button-font-size-smaller: $button-font-size - 4px !default;
-$button-font-size-small: $button-font-size - 2px !default;
-$button-font-size-big: $button-font-size + 2px !default;
-$button-font-size-large: $button-font-size + 4px !default;
+$button-font-size: em($font-size - 1px) !default;
+$button-font-size-smaller: em($font-size - 5px) !default;
+$button-font-size-small: em($font-size - 7px) !default;
+$button-font-size-big: em($font-size + 1px) !default;
+$button-font-size-large: em($font-size + 3px) !default;
// Baseline
-$button-base-line: 20px !default;
+$button-base-line: em($font-size + 4px) !default;
// Height
-$button-height: 40px !default;
-$button-height-small: 36px !default;
-$button-height-big: 48px !default;
-$button-height-large: 56px !default;
+$button-height: em($font-size + 24px) !default;
+$button-height-small: em($font-size + 20px) !default;
+$button-height-big: em($font-size + 32px) !default;
+$button-height-large: em($font-size + 40px) !default;
// Padding
-$button-padding-tb: 8px !default;
-$button-padding-rl: 20px !default;
-$button-padding-small-tb: 6px !default;
-$button-padding-small-rl: 20px !default;
-$button-padding-big-tb: 13px !default;
-$button-padding-big-rl: 24px !default;
-$button-padding-large-tb: 20px !default;
-$button-padding-large-rl: 36px !default;
+$button-padding-tb: em($font-size - 8px) !default;
+$button-padding-rl: em($font-size + 4px) !default;
+$button-padding-small-tb: em($font-size - 10px) !default;
+$button-padding-small-rl: em($font-size + 4px) !default;
+$button-padding-big-tb: em($font-size - 3px) !default;
+$button-padding-big-rl: em($font-size + 8px) !default;
+$button-padding-large-tb: em($font-size + 4px) !default;
+$button-padding-large-rl: em($font-size + 20px) !default;
// Weight
$button-font-weight: 500 !default;
// Radius
-$button-border-radius: 3px !default;
+$button-border-radius: em($font-size - 13px) !default;
// INPUTS
// ---------------------------------------------------------------------------
// Font Size
-$input-font-size: 15px !default;
-$input-font-size-smaller: $input-font-size - 4px !default;
-$input-font-size-small: $input-font-size - 2px !default;
-$input-font-size-big: $input-font-size + 2px !default;
-$input-font-size-large: $input-font-size + 4px !default;
+$input-font-size: em($font-size - 1px) !default;
+$input-font-size-smaller: em($font-size - 5px) !default;
+$input-font-size-small: em($font-size - 3px) !default;
+$input-font-size-big: em($font-size + 1px) !default;
+$input-font-size-large: em($font-size + 3px) !default;
// Baseline
$textarea-base-line: $base-line !default;
// Height
-$input-height: 40px !default;
-$input-height-small: 36px !default;
-$input-height-big: 48px !default;
-$input-height-large: 56px !default;
+$input-height: em($font-size + 24px) !default;
+$input-height-small: em($font-size + 20px) !default;
+$input-height-big: em($font-size + 32px) !default;
+$input-height-large: em($font-size + 40px) !default;
// Padding
-$input-padding-rl: 12px !default;
-$input-padding-small-rl: 12px !default;
-$input-padding-big-rl: 12px !default;
-$input-padding-large-rl: 12px !default;
-$input-textarea-padding-tb: 8px !default;
+$input-padding-rl: em($font-size - 4px) !default;
+$input-padding-small-rl: em($font-size - 4px) !default;
+$input-padding-big-rl: em($font-size - 4px) !default;
+$input-padding-large-rl: em($font-size - 4px) !default;
+$input-textarea-padding-tb: em($font-size - 8px) !default;
// States
$input-border-width: 1px !default;
@@ -225,7 +239,7 @@ $input-disabled-opacity: .6;
$input-disabled-color: rgba(0, 0, 0, .5);
// Radius
-$input-border-radius: 3px !default;
+$input-border-radius: em($font-size - 13px) !default;
// OVERLAY
diff --git a/package.json b/package.json
index 921092b..6e6b630 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "kube",
- "version": "6.1.0",
+ "version": "6.6.5",
"description": "A web framework for professional developers and designers alike.",
"main": "dist/css/kube.css",
"scripts": {
@@ -22,5 +22,13 @@
"bugs": {
"url": "https://github.com/vitoravelino/kube/issues"
},
- "homepage": "https://github.com/vitoravelino/kube#readme"
+ "homepage": "https://github.com/vitoravelino/kube#readme",
+ "dependencies": {
+ "gulp": "^3.9.1",
+ "gulp-clean-css": "^3.7.0",
+ "gulp-concat": "^2.6.1",
+ "gulp-rename": "^1.2.2",
+ "gulp-sass": "^3.1.0",
+ "gulp-uglify": "^3.0.0"
+ }
}
diff --git a/src/_scss/_mixins.scss b/src/_scss/_mixins.scss
index e76f936..27053fa 100644
--- a/src/_scss/_mixins.scss
+++ b/src/_scss/_mixins.scss
@@ -1,4 +1,5 @@
@import "mixins/breakpoints";
+@import "mixins/columns";
@import "mixins/fonts";
@import "mixins/flex";
@import "mixins/grid";
diff --git a/src/_scss/_variables.scss b/src/_scss/_variables.scss
index 19fbab5..56ebd3a 100644
--- a/src/_scss/_variables.scss
+++ b/src/_scss/_variables.scss
@@ -1,16 +1,31 @@
+$font-size: 16px !default;
+
+// Calculate em from px
+@function em($pixels, $base-font-size: $font-size) {
+ @if (unitless($pixels)) {
+ $pixels: $pixels * 1px;
+ }
+
+ @if (unitless($base-font-size)) {
+ $base-font-size: $base-font-size * 1px;
+ }
+
+ @return $pixels / $base-font-size * 1em;
+}
+
// BREAKPOINTS
// ---------------------------------------------------------------------------
-$sm: 768px !default;
-$md: 1024px !default;
-$lg: 1200px !default;
+$sm: em(768) !default;
+$md: em(1024) !default;
+$lg: em(1200) !default;
// WIDTH
// ---------------------------------------------------------------------------
-$w-small: 480px !default;
-$w-medium: 600px !default;
-$w-big: 740px !default;
-$w-large: 840px !default;
+$w-small: em(480) !default;
+$w-medium: em(600) !default;
+$w-big: em(740) !default;
+$w-large: em(840) !default;
// Z-INDEX
@@ -78,21 +93,20 @@ $color-aluminum: #f8f8f8 !default;
// ---------------------------------------------------------------------------
// Font Size
-$font-size: 16px !default;
-$font-size-smaller: $font-size - 4px !default;
-$font-size-small: $font-size - 2px !default;
-$font-size-big: $font-size + 2px !default;
-$font-size-large: $font-size + 4px !default;
+$font-size-smaller: em($font-size - 4px) !default;
+$font-size-small: em($font-size - 2px) !default;
+$font-size-big: em($font-size + 2px) !default;
+$font-size-large: em($font-size + 4px) !default;
// Baseline
-$base-line: 24px !default;
-$base-line-smaller: 20px !default;
-$base-line-small: 20px !default;
-$base-line-big: 28px !default;
-$base-line-large: 32px !default;
+$base-line: em($font-size + 8px) !default;
+$base-line-smaller: em($font-size + 4px) !default;
+$base-line-small: em($font-size + 4px) !default;
+$base-line-big: em($font-size + 12px) !default;
+$base-line-large: em($font-size + 16px) !default;
// Margin
-$text-margin-bottom: $font-size !default;
+$text-margin-bottom: em($font-size) !default;
// HEADINGS
@@ -100,22 +114,22 @@ $text-margin-bottom: $font-size !default;
// Font Size
// By default: 60, 48, 36, 24, 21, 18, 16
-$heading-font-size-title: 60px !default;
-$heading-font-size-1: 48px !default;
-$heading-font-size-2: 36px !default;
-$heading-font-size-3: 24px !default;
-$heading-font-size-4: 21px !default;
-$heading-font-size-5: 18px !default;
-$heading-font-size-6: 16px !default;
+$heading-font-size-title: em($font-size + 44px) !default;
+$heading-font-size-1: em($font-size + 32px) !default;
+$heading-font-size-2: em($font-size + 16px) !default;
+$heading-font-size-3: em($font-size + 8px) !default;
+$heading-font-size-4: em($font-size + 5px) !default;
+$heading-font-size-5: em($font-size + 2px) !default;
+$heading-font-size-6: em($font-size) !default;
// Baseline
-$heading-base-line-title: 64px !default;
-$heading-base-line-1: 52px !default;
-$heading-base-line-2: 40px !default;
-$heading-base-line-3: 32px !default;
-$heading-base-line-4: 32px !default;
-$heading-base-line-5: 28px !default;
-$heading-base-line-6: 24px !default;
+$heading-base-line-title: 4/3.25 * em($font-size) !default;
+$heading-base-line-1: 3.25/2.5 * em($font-size) !default;
+$heading-base-line-2: 2.5/2 * em($font-size) !default;
+$heading-base-line-3: 2/2 * em($font-size) !default;
+$heading-base-line-4: 2/1.75 * em($font-size) !default;
+$heading-base-line-5: 1.75/1.5 * em($font-size) !default;
+$heading-base-line-6: 1.5/1.25 * em($font-size) !default;
// Margin
$heading-margin-bottom: $font-size !default;
@@ -125,10 +139,10 @@ $heading-margin-bottom: $font-size !default;
// ---------------------------------------------------------------------------
// Font Size
-$table-font-size: $font-size - 1px !default;
+$table-font-size: em($font-size - 1px) !default;
// Baseline
-$table-base-line: 24px !default;
+$table-base-line: em($font-size + 8px) !default;
// Padding
$table-padding-tb: 1rem !default;
@@ -145,63 +159,63 @@ $table-background-striped: $color-aluminum !default;
// ---------------------------------------------------------------------------
// Font Size
-$button-font-size: 15px !default;
-$button-font-size-smaller: $button-font-size - 4px !default;
-$button-font-size-small: $button-font-size - 2px !default;
-$button-font-size-big: $button-font-size + 2px !default;
-$button-font-size-large: $button-font-size + 4px !default;
+$button-font-size: em($font-size - 1px) !default;
+$button-font-size-smaller: em($font-size - 5px) !default;
+$button-font-size-small: em($font-size - 7px) !default;
+$button-font-size-big: em($font-size + 1px) !default;
+$button-font-size-large: em($font-size + 3px) !default;
// Baseline
-$button-base-line: 20px !default;
+$button-base-line: em($font-size + 4px) !default;
// Height
-$button-height: 40px !default;
-$button-height-small: 36px !default;
-$button-height-big: 48px !default;
-$button-height-large: 56px !default;
+$button-height: em($font-size + 24px) !default;
+$button-height-small: em($font-size + 20px) !default;
+$button-height-big: em($font-size + 32px) !default;
+$button-height-large: em($font-size + 40px) !default;
// Padding
-$button-padding-tb: 8px !default;
-$button-padding-rl: 20px !default;
-$button-padding-small-tb: 6px !default;
-$button-padding-small-rl: 20px !default;
-$button-padding-big-tb: 13px !default;
-$button-padding-big-rl: 24px !default;
-$button-padding-large-tb: 20px !default;
-$button-padding-large-rl: 36px !default;
+$button-padding-tb: em($font-size - 8px) !default;
+$button-padding-rl: em($font-size + 4px) !default;
+$button-padding-small-tb: em($font-size - 10px) !default;
+$button-padding-small-rl: em($font-size + 4px) !default;
+$button-padding-big-tb: em($font-size - 3px) !default;
+$button-padding-big-rl: em($font-size + 8px) !default;
+$button-padding-large-tb: em($font-size + 4px) !default;
+$button-padding-large-rl: em($font-size + 20px) !default;
// Weight
$button-font-weight: 500 !default;
// Radius
-$button-border-radius: 3px !default;
+$button-border-radius: em($font-size - 13px) !default;
// INPUTS
// ---------------------------------------------------------------------------
// Font Size
-$input-font-size: 15px !default;
-$input-font-size-smaller: $input-font-size - 4px !default;
-$input-font-size-small: $input-font-size - 2px !default;
-$input-font-size-big: $input-font-size + 2px !default;
-$input-font-size-large: $input-font-size + 4px !default;
+$input-font-size: em($font-size - 1px) !default;
+$input-font-size-smaller: em($font-size - 5px) !default;
+$input-font-size-small: em($font-size - 3px) !default;
+$input-font-size-big: em($font-size + 1px) !default;
+$input-font-size-large: em($font-size + 3px) !default;
// Baseline
$textarea-base-line: $base-line !default;
// Height
-$input-height: 40px !default;
-$input-height-small: 36px !default;
-$input-height-big: 48px !default;
-$input-height-large: 56px !default;
+$input-height: em($font-size + 24px) !default;
+$input-height-small: em($font-size + 20px) !default;
+$input-height-big: em($font-size + 32px) !default;
+$input-height-large: em($font-size + 40px) !default;
// Padding
-$input-padding-rl: 12px !default;
-$input-padding-small-rl: 12px !default;
-$input-padding-big-rl: 12px !default;
-$input-padding-large-rl: 12px !default;
-$input-textarea-padding-tb: 8px !default;
+$input-padding-rl: em($font-size - 4px) !default;
+$input-padding-small-rl: em($font-size - 4px) !default;
+$input-padding-big-rl: em($font-size - 4px) !default;
+$input-padding-large-rl: em($font-size - 4px) !default;
+$input-textarea-padding-tb: em($font-size - 8px) !default;
// States
$input-border-width: 1px !default;
@@ -225,7 +239,7 @@ $input-disabled-opacity: .6;
$input-disabled-color: rgba(0, 0, 0, .5);
// Radius
-$input-border-radius: 3px !default;
+$input-border-radius: em($font-size - 13px) !default;
// OVERLAY
diff --git a/src/_scss/components/_breadcrumbs.scss b/src/_scss/components/_breadcrumbs.scss
old mode 100755
new mode 100644
index 3b0e921..f71d773
--- a/src/_scss/components/_breadcrumbs.scss
+++ b/src/_scss/components/_breadcrumbs.scss
@@ -12,7 +12,7 @@
& span,
& a {
font-style: normal;
- padding: 0 10px;
+ padding: 0 em($font-size - 6px);
display: inline-block;
white-space: nowrap;
}
diff --git a/src/_scss/components/_buttons.scss b/src/_scss/components/_buttons.scss
index 21109c4..741bcfa 100644
--- a/src/_scss/components/_buttons.scss
+++ b/src/_scss/components/_buttons.scss
@@ -1,9 +1,13 @@
-button,
+button {
+ border: 1px solid transparent;
+ background-color: transparent;
+}
+
.button {
font-family: $text-font-family;
font-size: $button-font-size;
- color: $color-button-primary-text;
- background-color: $color-button-primary;
+ color: $color-button-primary;
+ background-color: transparent;
border-radius: $button-border-radius;
min-height: $button-height;
padding: $button-padding-tb $button-padding-rl;
@@ -18,23 +22,34 @@ button,
& i {
position: relative;
- top: 1px;
- margin: 0 2px;
+ top: em($font-size - 15px);
+ margin: 0 em($font-size - 14px);
}
}
input[type="submit"] {
width: auto;
}
-button:hover,
-.button:hover {
- outline: none;
- text-decoration: none;
- color: $color-button-primary-text;
- background-color: lighten($color-button-primary, 10%);
+
+.button {
+ &:hover {
+ outline: none;
+ text-decoration: none;
+ color: lighten($color-button-primary, 10%);
+ background-color: lighten($color-button-primary, 100%);
+ }
+
+ &.primary:hover {
+ color: $color-button-primary-text;
+ background-color: lighten($color-button-primary, 10%);
+ }
+
+ &.secondary:hover {
+ color: $color-button-secondary-text;
+ background-color: lighten($color-button-secondary, 10%);
+ }
}
// Disabled
-.button:disabled,
.button.disabled {
cursor: default;
font-style: normal;
@@ -66,7 +81,7 @@ button:hover,
// Outline
.button.outline {
background: none;
- border-width: 2px;
+ border-width: em($font-size - 14px);
border-color: $color-button-primary;
color: $color-button-primary;
@@ -99,7 +114,7 @@ button:hover,
// Raised
.button.raised {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+ box-shadow: 0 em($font-size - 15px) em($font-size - 13px) rgba(0, 0, 0, .3);
}
// Upper
@@ -119,6 +134,11 @@ button:hover,
}
}
+// Primary
+.button.primary {
+ @include button($color-button-primary-text, $color-button-primary);
+}
+
// Secondary
.button.secondary {
@include button($color-button-secondary-text, $color-button-secondary);
diff --git a/src/_scss/components/_dropdown.scss b/src/_scss/components/_dropdown.scss
index c226ac5..c0317eb 100644
--- a/src/_scss/components/_dropdown.scss
+++ b/src/_scss/components/_dropdown.scss
@@ -5,9 +5,9 @@
right: 0;
width: 280px;
color: #000;
- font-size: $font-size - 1px;
+ font-size: em($font-size - 1px);
background: #fff;
- box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
+ box-shadow: 0 em($font-size - 6px) em($font-size + 9px) rgba(0, 0, 0, .15);
border-radius: 3px;
max-height: 300px;
margin: 0;
@@ -25,7 +25,7 @@
border: none;
}
& .close {
- margin: 20px auto;
+ margin: em($font-size + 4px) auto;
}
&.open {
overflow: auto;
@@ -43,7 +43,7 @@
}
& a {
display: block;
- padding: 12px;
+ padding: em($font-size - 4px);
text-decoration: none;
color: #000;
&:hover {
diff --git a/src/_scss/components/_forms.scss b/src/_scss/components/_forms.scss
index 62329c4..b4aab08 100644
--- a/src/_scss/components/_forms.scss
+++ b/src/_scss/components/_forms.scss
@@ -12,7 +12,7 @@ legend {
text-transform: uppercase;
padding: 0 1rem;
margin-left: -1rem;
- top: 2px;
+ top: em($font-size - 14px);
position: relative;
line-height: 0;
}
@@ -113,9 +113,9 @@ input[type="file"] {
input[type="search"],
input.search {
background-repeat: no-repeat;
- background-position: 8px 53%;
+ background-position: em($font-size - 8px) 53%;
background-image: url('data:image/svg+xml;utf8,
');
- padding-left: 32px;
+ padding-left: em($font-size + 16px);
}
input[type="radio"],
input[type="checkbox"] {
@@ -127,8 +127,8 @@ input[type="checkbox"] {
label {
display: block;
color: $color-darkgray;
- margin-bottom: 4px;
- font-size: $font-size - 1px;
+ margin-bottom: em($font-size - 12px);
+ font-size: em($font-size - 1px);
&.checkbox,
& .desc,
@@ -152,12 +152,12 @@ label {
.form-checkboxes {
& label.checkbox {
display: inline-block;
- margin-right: 16px;
+ margin-right: em($font-size);;
}
}
.req {
position: relative;
- top: 1px;
+ top: em($font-size - 15px);
font-weight: bold;
color: $color-error;
font-size: 110%;
@@ -168,16 +168,16 @@ label {
line-height: $base-line-smaller;
}
span.desc {
- margin-left: 4px;
+ margin-left: em($font-size - 12px);
}
div.desc {
- margin-top: 4px;
- margin-bottom: -8px;
+ margin-top: em($font-size - 12px);
+ margin-bottom: em($font-size - 24px);
}
.form-buttons {
& button,
& .button {
- margin-right: 8px;
+ margin-right: em($font-size - 8px);
}
}
form,
@@ -197,7 +197,7 @@ form,
& span.error {
font-size: $font-size-smaller;
line-height: $base-line-smaller;
- margin-left: 4px;
+ margin-left: em($font-size - 12px);
}
}
.form-inline {
@@ -241,7 +241,7 @@ form,
border-radius: 0 $input-border-radius $input-border-radius 0;
}
& .button {
- margin-right: -1px;
+ margin-right: em($font-size - 17px);
border-radius: $input-border-radius 0 0 $input-border-radius !important;
}
& span {
@@ -254,7 +254,7 @@ form,
border-radius: $input-border-radius 0 0 $input-border-radius;
}
& .button {
- margin-left: -1px;
+ margin-left: em($font-size - 17px);
border-radius: 0 $input-border-radius $input-border-radius 0 !important;
}
& span {
diff --git a/src/_scss/components/_labels.scss b/src/_scss/components/_labels.scss
index ab5821e..f84bb89 100644
--- a/src/_scss/components/_labels.scss
+++ b/src/_scss/components/_labels.scss
@@ -1,15 +1,15 @@
.label {
display: inline-block;
- font-size: 13px;
+ font-size: em($font-size - 3px);
background: $color-silver;
- line-height: 18px;
- padding: 0 10px;
+ line-height: em($font-size + 2px);
+ padding: 0 em($font-size - 6px);
font-weight: 500;
color: $color-text;
border: 1px solid transparent;
vertical-align: middle;
text-decoration: none;
- border-radius: 4px;
+ border-radius: em($font-size - 12px);
& a,
& a:hover {
color: inherit;
@@ -18,12 +18,12 @@
}
.label.big {
font-size: $font-size-small;
- line-height: 24px;
- padding: 0 12px;
+ line-height: em($font-size + 8px);
+ padding: 0 em($font-size - 6px);
}
.label.upper {
text-transform: uppercase;
- font-size: 11px;
+ font-size: em($font-size - 5px);
}
// Outline
@@ -35,10 +35,10 @@
// Badges
.label.badge {
text-align: center;
- border-radius: 64px;
- padding: 0 6px;
+ border-radius: em($font-size + 48px);
+ padding: 0 em($font-size - 10px);
&.big {
- padding: 0 8px;
+ padding: 0 em($font-size - 8px);
}
}
@@ -48,9 +48,9 @@
background: none;
border: none;
text-transform: uppercase;
- font-size: $font-size-smaller - 1px;
+ font-size: em($font-size - 6px);
&.big {
- font-size: $font-size-small - 1px;
+ font-size: em($font-size - 8px);
}
}
diff --git a/src/_scss/components/_modal.scss b/src/_scss/components/_modal.scss
index 8766fd6..ce1848f 100644
--- a/src/_scss/components/_modal.scss
+++ b/src/_scss/components/_modal.scss
@@ -11,23 +11,23 @@
.modal {
position: relative;
margin: auto;
- margin-top: 16px;
+ margin-top: em($font-size);
padding: 0;
background: #fff;
- box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
- border-radius: 8px;
+ box-shadow: 0 em($font-size - 6px) em($font-size + 9px) rgba(0, 0, 0, .15);
+ border-radius: em($font-size - 8px);
color: #000;
& input,
& textarea {
@media (max-width: $sm) {
- font-size: 16px;
+ font-size: em($font-size);
}
}
& .close {
position: absolute;
- top: 18px;
- right: 16px;
+ top: em($font-size + 2px);
+ right: em($font-size);
opacity: .3;
&:hover {
opacity: 1;
@@ -35,8 +35,8 @@
}
}
.modal-header {
- padding: 24px 32px;
- font-size: 18px;
+ padding: em($font-size + 8px) em($font-size + 16px);
+ font-size: em($font-size + 2px);
font-weight: bold;
border-bottom: 1px solid rgba(0, 0, 0, .05);
&:empty {
@@ -44,7 +44,7 @@
}
}
.modal-body {
- padding: 36px 56px;
+ padding: em($font-size + 20px) em($font-size + 40px);
}
@@ -53,6 +53,6 @@
@media (max-width: $sm) {
.modal-header,
.modal-body {
- padding: 24px;
+ padding: em($font-size + 8px);
}
}
\ No newline at end of file
diff --git a/src/_scss/components/_offcanvas.scss b/src/_scss/components/_offcanvas.scss
index 9efebe9..4c78f81 100644
--- a/src/_scss/components/_offcanvas.scss
+++ b/src/_scss/components/_offcanvas.scss
@@ -10,8 +10,8 @@
}
.offcanvas .close {
position: absolute;
- top: 8px;
- right: 8px;
+ top: em($font-size - 8px);
+ right: em($font-size - 8px);
}
.offcanvas-left {
border-right: 1px solid rgba(0, 0, 0, .1);
diff --git a/src/_scss/components/_pagination.scss b/src/_scss/components/_pagination.scss
old mode 100755
new mode 100644
index 96664d8..33202aa
--- a/src/_scss/components/_pagination.scss
+++ b/src/_scss/components/_pagination.scss
@@ -13,9 +13,9 @@
}
& span,
& a {
- border-radius: 3px;
+ border-radius: em($font-size - 13px);
display: inline-block;
- padding: 8px 12px;
+ padding: em($font-size - 8px) em($font-size - 4px);
line-height: 1;
white-space: nowrap;
border: 1px solid transparent;
@@ -46,9 +46,9 @@
}
& span,
& a {
- padding-left: 16px;
- padding-right: 16px;
- border-radius: 64px;
+ padding-left: em($font-size);
+ padding-right: em($font-size);
+ border-radius: em($font-size + 48px);
border-color: rgba(0, 0, 0, .1);
}
& li {
@@ -59,8 +59,8 @@
}
&.align-center li {
@include flex-basis(auto);
- margin-left: 4px;
- margin-right: 4px;
+ margin-left: em($font-size - 12px);
+ margin-right: em($font-size - 12px);
}
&.flat {
& span,
@@ -88,7 +88,7 @@
& li {
@include flex-basis(100%);
- margin-bottom: 8px;
+ margin-bottom: em($font-size - 8px);
text-align: left;
}
}
diff --git a/src/_scss/components/_reset.scss b/src/_scss/components/_reset.scss
index 98532f4..924894b 100644
--- a/src/_scss/components/_reset.scss
+++ b/src/_scss/components/_reset.scss
@@ -37,7 +37,7 @@ input[type="checkbox"] {
position: relative;
bottom: 0.15rem;
font-size: 115%;
- margin-right: 3px;
+ margin-right: em($font-size - 13px);
}
input[type="search"] {
-webkit-appearance: textfield;
diff --git a/src/_scss/components/_tabs.scss b/src/_scss/components/_tabs.scss
index 4254c29..744e0ee 100644
--- a/src/_scss/components/_tabs.scss
+++ b/src/_scss/components/_tabs.scss
@@ -13,7 +13,7 @@
& em,
& a {
position: relative;
- top: 1px;
+ top: em($font-size - 15px);
font-style: normal;
display: block;
padding: .5rem 1rem;
@@ -34,7 +34,7 @@
& ul {
@include flex;
- margin-top: -1px;
+ margin-top: em($font-size - 17px);
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
& li em,
diff --git a/src/_scss/components/_typography.scss b/src/_scss/components/_typography.scss
index fc6b2df..9a4ed87 100644
--- a/src/_scss/components/_typography.scss
+++ b/src/_scss/components/_typography.scss
@@ -129,7 +129,7 @@ p, blockquote, hr, pre, ol, ul, dl, table, fieldset, figure, address, form {
hr {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .1);
- margin-top: -1px;
+ margin-top: em($font-size - 17px);
}
blockquote {
padding-left: 1rem;
@@ -159,8 +159,8 @@ var {
}
mark, code, samp, kbd {
position: relative;
- top: -1px;
- padding: 4px 4px 2px 4px;
+ top: em($font-size - 17px);
+ padding: em($font-size - 12px) em($font-size - 12px) em($font-size - 14px) em($font-size - 12px);
display: inline-block;
line-height: 1;
color: rgba($color-text, .85);
@@ -189,7 +189,7 @@ sup {
top: 0;
}
sub {
- bottom: 1px;
+ bottom: em($font-size - 15px);
}
// Preformatted
@@ -225,7 +225,7 @@ figure figcaption {
figure pre {
background: none;
border: 1px solid rgba(0, 0, 0, .1);
- border-radius: 4px;
+ border-radius: em($font-size - 12px);
}
figure {
& .video-container,
diff --git a/src/_scss/components/_utils.scss b/src/_scss/components/_utils.scss
index 2f32c97..d1140ce 100644
--- a/src/_scss/components/_utils.scss
+++ b/src/_scss/components/_utils.scss
@@ -65,9 +65,9 @@
// ScrollbarMeasure
.scrollbar-measure {
position: absolute;
- top: -9999px;
- width: 50px;
- height: 50px;
+ top: em($font-size - 9999);
+ width: em($font-size + 34px);
+ height: em($font-size + 34px);
overflow: scroll;
}
@@ -92,22 +92,22 @@
.close {
display: inline-block;
- min-height: 16px;
- min-width: 16px;
- line-height: 16px;
+ min-height: em($font-size);
+ min-width: em($font-size);
+ line-height: em($font-size);
vertical-align: middle;
text-align: center;
- font-size: 12px;
+ font-size: em($font-size - 4px);
opacity: .6;
&:hover {
opacity: 1;
}
&.small {
- font-size: 8px;
+ font-size: em($font-size - 8px);
}
&.big {
- font-size: 18px;
+ font-size: em($font-size + 2px);
}
&.white {
color: #fff;
@@ -120,7 +120,7 @@
}
.button {
& .caret {
- margin-right: -8px;
+ margin-right: em($font-size - 24px);
}
}
diff --git a/src/_scss/mixins/_columns.scss b/src/_scss/mixins/_columns.scss
new file mode 100644
index 0000000..fe5641d
--- /dev/null
+++ b/src/_scss/mixins/_columns.scss
@@ -0,0 +1,29 @@
+// Generate Columns
+@mixin generate-grid-columns-qty($new-grid-columns) {
+
+ @for $i from 1 through $new-grid-columns
+ {
+ .col-#{$i} {
+ width: 100% / $new-grid-columns * $i;
+ }
+ .offset-#{$i} {
+ $width: 100% / $new-grid-columns * $i;
+ margin-left: $width;
+ }
+
+ }
+
+ .gutters {
+ @for $i from 1 through $new-grid-columns
+ {
+ & > .col-#{$i} {
+ $width: 100% / $new-grid-columns * $i;
+ width: calc(#{$width} - #{$grid-gutter});
+ }
+ & > .offset-#{$i} {
+ $width: 100% / $new-grid-columns * $i;
+ margin-left: calc(#{$width} + #{$grid-gutter}) !important;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/kube.scss b/src/kube.scss
index 41b55bb..b42c24d 100644
--- a/src/kube.scss
+++ b/src/kube.scss
@@ -1,6 +1,6 @@
/*
Kube. CSS & JS Framework
- Version 6.5.2
+ Version 6.6.1
Updated: February 2, 2017
http://imperavi.com/kube/