kube 6.5.2.0

data/app/assets/stylesheets/kube.scss

@@ -0,0 +1,13 @@
+/*
+	Kube. CSS & JS Framework
+	Version 6.5.2
+	Updated: February 2, 2017
+
+	http://imperavi.com/kube/
+
+	Copyright (c) 2009-2017, Imperavi LLC.
+	License: MIT
+*/
+@import "kube/variables";
+@import "kube/mixins";
+@import "kube/components";

data/app/assets/stylesheets/kube/_components.scss

@@ -0,0 +1,25 @@
+// Core
+@import "components/reset";
+@import "components/colors";
+@import "components/typography";
+@import "components/grid";
+@import "components/tables";
+@import "components/forms";
+@import "components/buttons";
+@import "components/labels";
+@import "components/breadcrumbs";
+@import "components/pagination";
+@import "components/icons";
+@import "components/positioning";
+@import "components/sizing";
+@import "components/utils";
+@import "components/print";
+
+// Plugins
+@import "components/animation";
+@import "components/dropdown";
+@import "components/messages";
+@import "components/modal";
+@import "components/offcanvas";
+@import "components/tabs";
+

data/app/assets/stylesheets/kube/_mixins.scss

@@ -0,0 +1,8 @@
+@import "mixins/breakpoints";
+@import "mixins/fonts";
+@import "mixins/flex";
+@import "mixins/grid";
+@import "mixins/buttons";
+@import "mixins/labels";
+@import "mixins/gradients";
+@import "mixins/utils";

data/app/assets/stylesheets/kube/_properties.scss

@@ -0,0 +1,178 @@
+// *** CSS Custom Properties available at runtime via Javascript ***
+
+:root {
+  // WIDTH
+  --w-small: 480px;
+  --w-medium: 600px;
+  --w-big: 740px;
+  --w-large: 840px;
+
+  // Z-INDEX
+  --z-over-content: 100;
+  --z-over-control: 200;
+  --z-over-page: 300;
+  --z-over-screen: 400;
+  --z-over-all: 500;
+
+  // FONT FAMILY
+  --text-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  --monospace-font-family: Consolas, Monaco, 'Courier New', monospace;
+  --headings-font-family: var(--text-font-family);
+  --buttons-font-family: var(--text-font-family);
+  --input-font-family: var(--text-font-family);
+
+  // COLORS
+  // Text
+  --color-text: #313439;
+  --color-headings: #0d0d0e;
+  // Links
+  --color-link:  #3794de;
+  --color-link-hover: #f03c69;
+  // Button
+  --color-button-primary: #1c86f2;
+  --color-button-primary-disabled: #64adf6;
+  --color-button-primary-hover: #64adf6;
+  --color-button-primary-text: #fff;
+  --color-button-primary-text-disabled: #64adf6;
+  --color-button-secondary: #313439;
+  --color-button-secondary-disabled: #000;
+  --color-button-secondary-hover: #545a62;
+  --color-button-secondary-text: #fff;
+  --color-button-secondary-text-disabled: #787f8b;
+  // States
+  --color-error: #f03c69;
+  --color-success: #35beb1;
+  --color-warning: #f7ba45;
+  --color-focus: #1c86f2;
+  // Extra
+  --color-inverted: #fff;
+  --color-highlight: #edf2ff;
+  // Grayscale
+  --color-black: #0d0d0e;
+  --color-darkgray: #313439;
+  --color-midgray: #676b72;
+  --color-gray: #bdbdbd;
+  --color-lightgray: #d4d4d4;
+  --color-silver: #e0e1e1;
+  --color-aluminum: #f8f8f8;
+
+  // TEXT
+  // Font Size
+  --font-size: 16px;
+  --font-size-smaller: var(--font-size) - 4px;
+  --font-size-small: var(--font-size) - 2px;
+  --font-size-big: var(--font-size) + 2px;
+  --font-size-large: var(--font-size) + 4px;
+  // Baseline
+  --base-line: 24px;
+  --base-line-smaller: 20px;
+  --base-line-small: 20px;
+  --base-line-big: 28px;
+  --base-line-large: 32px;
+  // Margin
+  --text-margin-bottom: var(--font-size);
+
+  // HEADINGS
+  // Font Size
+  // By default: 60, 48, 36, 24, 21, 18, 16
+  --heading-font-size-title: 60px;
+  --heading-font-size-1: 48px;
+  --heading-font-size-2: 36px;
+  --heading-font-size-3: 24px;
+  --heading-font-size-4: 21px;
+  --heading-font-size-5: 18px;
+  --heading-font-size-6: 16px;
+  // Baseline
+  --heading-base-line-title: 64px;
+  --heading-base-line-1: 52px;
+  --heading-base-line-2: 40px;
+  --heading-base-line-3: 32px;
+  --heading-base-line-4: 32px;
+  --heading-base-line-5: 28px;
+  --heading-base-line-6: 24px;
+  // Margin
+  --heading-margin-bottom: var(--font-size);
+
+  // TABLES
+  // Font Size
+  --table-font-size: var(--font-size) - 1px;
+  // Baseline
+  --table-base-line: 24px;
+  // Padding
+  --table-padding-tb: 1rem;
+  --table-padding-rl: 1rem;
+  // Border
+  --table-border: 1px solid rgba(0, 0, 0, .05);
+  // Striped
+  --table-background-striped: var(--color-aluminum);
+
+  // BUTTONS
+  // Font Size
+  --button-font-size: 15px;
+  --button-font-size-smaller: var(--button-font-size) - 4px;
+  --button-font-size-small: var(--button-font-size) - 2px;
+  --button-font-size-big: var(--button-font-size) + 2px;
+  --button-font-size-large: var(--button-font-size) + 4px;
+  // Baseline
+  --button-base-line: 20px;
+  // Height
+  --button-height: 40px;
+  --button-height-small: 36px;
+  --button-height-big: 48px;
+  --button-height-large: 56px;
+  // Padding
+  --button-padding-tb: 8px;
+  --button-padding-rl: 20px;
+  --button-padding-small-tb: 6px;
+  --button-padding-small-rl: 20px;
+  --button-padding-big-tb: 13px;
+  --button-padding-big-rl: 24px;
+  --button-padding-large-tb: 20px;
+  --button-padding-large-rl: 36px;
+  // Weight
+  --button-font-weight: 500;
+  // Radius
+  --button-border-radius: 3px;
+
+  // INPUTS
+  // Font Size
+  --input-font-size: 15px;
+  --input-font-size-smaller: var(--input-font-size) - 4px;
+  --input-font-size-small: var(--input-font-size) - 2px;
+  --input-font-size-big: var(--input-font-size) + 2px;
+  --input-font-size-large: var(--input-font-size) + 4px;
+  // Baseline
+  --textarea-base-line: var(--base-line);
+  // Height
+  --input-height: 40px;
+  --input-height-small: 36px;
+  --input-height-big: 48px;
+  --input-height-large: 56px;
+  // Padding
+  --input-padding-rl: 12px;
+  --input-padding-small-rl: 12px;
+  --input-padding-big-rl: 12px;
+  --input-padding-large-rl: 12px;
+  --input-textarea-padding-tb: 8px;
+  // States
+  --input-border-width: 1px;
+  --input-border-color: var(--color-lightgray);
+  --input-background-color: #fff;
+  --input-box-shadow: none;
+  --input-focus-background-color: #fff;
+  --input-focus-border-color: var(--color-focus);
+  --input-focus-box-shadow: 0 0 1px var(--color-focus) inset;
+  --input-error-background-color: var(--color-error);
+  --input-error-border-color: var(--color-error);
+  --input-error-focus-box-shadow: 0 0 1px var(--color-error) inset;
+  --input-success-background-color: var(--color-success);
+  --input-success-border-color: var(--color-success);
+  --input-success-focus-box-shadow: 0 0 1px var(--color-success) inset;
+  --input-disabled-opacity: .6;
+  --input-disabled-color: rgba(0, 0, 0, .5);
+  // Radius
+  --input-border-radius: 3px;
+
+  // OVERLAY
+  --overlay-background-color: rgba(#fff, .95);
+}

data/app/assets/stylesheets/kube/_variables.scss

@@ -0,0 +1,10 @@
+// *** SASS variables used only at compile-time ***
+
+// BREAKPOINTS
+$sm: 768px !default;
+$md: 1024px !default;
+$lg: 1200px !default;
+
+// GRID
+$grid-columns: 12 !default;
+$grid-gutter: 2% !default;

data/app/assets/stylesheets/kube/all.scss

@@ -0,0 +1,14 @@
+/*
+	Kube. CSS & JS Framework
+	Version 6.5.2
+	Updated: February 2, 2017
+
+	http://imperavi.com/kube/
+
+	Copyright (c) 2009-2017, Imperavi LLC.
+	License: MIT
+*/
+@import "kube/properties";
+@import "kube/variables";
+@import "kube/mixins";
+@import "kube/components";

data/app/assets/stylesheets/kube/components/_animation.scss

@@ -0,0 +1,95 @@
+@keyframes slideUp {
+  to { height: 0; padding-top: 0; padding-bottom: 0; }
+}
+@keyframes slideDown {
+  from { height: 0;  padding-top: 0; padding-bottom: 0; }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes flipIn {
+  from { opacity: 0; transform: scaleY(0); }
+  to   { opacity: 1; transform: scaleY(1); }
+}
+@keyframes flipOut {
+  from { opacity: 1; transform: scaleY(1); }
+  to   { opacity: 0; transform: scaleY(0); }
+}
+@keyframes zoomIn {
+	from { opacity: 0; transform: scale3d(.3, .3, .3); }
+	50%  { opacity: 1; }
+}
+@keyframes zoomOut {
+	from { opacity: 1; }
+	50%  { opacity: 0; transform: scale3d(.3, .3, .3); }
+	to   { opacity: 0; }
+}
+@keyframes slideInRight {
+	from { transform: translate3d(100%, 0, 0); visibility: visible; }
+	to   { transform: translate3d(0, 0, 0); }
+}
+@keyframes slideInLeft {
+	from { transform: translate3d(-100%, 0, 0); visibility: visible; }
+	to   { transform: translate3d(0, 0, 0); }
+}
+@keyframes slideInDown {
+	from { transform: translate3d(0, -100%, 0); visibility: visible; }
+	to   { transform: translate3d(0, 0, 0); }
+}
+@keyframes slideOutLeft {
+  from { transform: translate3d(0, 0, 0); }
+  to   { visibility: hidden; transform: translate3d(-100%, 0, 0); }
+}
+@keyframes slideOutRight {
+	from { transform: translate3d(0, 0, 0); }
+	to   { visibility: hidden; transform: translate3d(100%, 0, 0); }
+}
+@keyframes slideOutUp {
+	from { transform: translate3d(0, 0, 0); }
+	to   { visibility: hidden; transform: translate3d(0, -100%, 0); }
+}
+@keyframes rotate {
+	from { transform: rotate(0deg);   }
+	to   { transform: rotate(360deg); }
+}
+@keyframes pulse {
+	from { transform: scale3d(1, 1, 1); }
+	50%  { transform: scale3d(1.03, 1.03, 1.03); }
+	to   { transform: scale3d(1, 1, 1); }
+}
+@keyframes shake {
+  15% { transform: translateX(0.5rem); }
+  30% { transform: translateX(-0.4rem); }
+  45% { transform: translateX(0.3rem); }
+  60% { transform: translateX(-0.2rem); }
+  75% { transform: translateX(0.1rem); }
+  90% { transform: translateX(0); }
+}
+
+.fadeIn        { animation: fadeIn 250ms; }
+.fadeOut       { animation: fadeOut 250ms; }
+
+.zoomIn        { animation: zoomIn 200ms; }
+.zoomOut       { animation: zoomOut 500ms; }
+
+.slideInRight  { animation: slideInRight 500ms; }
+.slideInLeft   { animation: slideInLeft 500ms; }
+.slideInDown   { animation: slideInDown 500ms; }
+.slideOutLeft  { animation: slideOutLeft 500ms; }
+.slideOutRight { animation: slideOutRight 500ms; }
+.slideOutUp    { animation: slideOutUp 500ms; }
+
+.slideUp       { overflow: hidden; animation: slideUp 200ms ease-in-out; }
+.slideDown     { overflow: hidden; animation: slideDown 80ms ease-in-out; }
+
+.flipIn        { animation: flipIn 250ms cubic-bezier(0.5, -0.5, 0.5, 1.5) }
+.flipOut       { animation: flipOut 500ms cubic-bezier(0.5, -0.5, 0.5, 1.5) }
+
+.rotate        { animation: rotate 500ms; }
+.pulse         { animation: pulse 250ms 2; }
+.shake         { animation: shake 500ms; }

data/app/assets/stylesheets/kube/components/_breadcrumbs.scss

@@ -0,0 +1,37 @@
+.breadcrumbs {
+	font-size: calc(var(--font-size-small));
+	margin-bottom: var(--base-line);
+  & ul {
+    @include flex;
+    @include flex-items-middle;
+  }
+  &.push-center ul {
+    @include flex-items-center;
+  }
+  & span,
+  & a {
+  	font-style: normal;
+  	padding: 0 10px;
+  	display: inline-block;
+  	white-space: nowrap;
+  }
+  & li {
+    &:after {
+    	display: inline-block;
+    	content: '/';
+    	color: rgba(0, 0, 0, .3);
+    }
+    &:last-child:after {
+    	display: none;
+    }
+    &:first-child span,
+    &:first-child a {
+      padding-left: 0;
+    }
+    &.active a {
+      color: var(--color-text);
+    	text-decoration: none;
+    	cursor: text;
+    }
+  }
+}

data/app/assets/stylesheets/kube/components/_buttons.scss

@@ -0,0 +1,166 @@
+button,
+.button {
+	font-family: var(--text-font-family);
+	font-size: var(--button-font-size);
+	color: var(--color-button-primary-text);
+	background-color: var(--color-button-primary);
+	border-radius: var(--button-border-radius);
+	min-height: var(--button-height);
+	padding: var(--button-padding-tb) var(--button-padding-rl);
+	font-weight: var(--button-font-weight);
+	text-decoration: none;
+	cursor: pointer;
+	display: inline-block;
+	line-height: var(--button-base-line);
+	border: 1px solid transparent;
+	vertical-align: middle;
+	-webkit-appearance: none;
+	& i {
+    position: relative;
+    top: 1px;
+    margin: 0 2px;
+	}
+}
+input[type="submit"] {
+  width: auto;
+}
+button:hover,
+.button:hover {
+  outline: none;
+	text-decoration: none;
+	color: var(--color-button-primary-text);
+	background-color: var(--color-button-primary-hover);
+}
+
+// Disabled
+.button:disabled,
+.button.disabled {
+	cursor: default;
+	font-style: normal;
+	color: var(--color-button-primary-text-disabled);
+	background-color: var(--color-button-primary-disabled);
+}
+
+// Size
+.button.small {
+  font-size: calc(var(--button-font-size-small));
+  min-height: var(--button-height-small);
+  padding: var(--button-padding-small-tb) var(--button-padding-small-rl);
+  border-radius: var(--button-border-radius);
+}
+.button.big {
+  font-size: calc(var(--button-font-size-big));
+  min-height: var(--button-height-big);
+  padding: var(--button-padding-big-tb) var(--button-padding-big-rl);
+  border-radius: var(--button-border-radius);
+}
+.button.large {
+  font-size: calc(var(--button-font-size-large));
+  min-height: var(--button-height-large);
+  padding: var(--button-padding-large-tb) var(--button-padding-large-rl);
+  border-radius: var(--button-border-radius);
+}
+
+// Outline
+.button.outline {
+  background: none;
+  border-width: 2px;
+  border-color: var(--color-button-primary);
+  color: var(--color-button-primary);
+  &:hover {
+    background: none;
+    color: var(--color-button-primary-hover);
+    border-color: var(--color-button-primary-hover);
+  }
+  &:disabled,
+  &.disabled {
+    background: none;
+    color: var(--color-button-primary-text-disabled);
+  	border-color: var(--color-button-primary-disabled);
+  }
+}
+
+// White
+.button.inverted {
+	color: var(--color-button-secondary-text);
+	background-color: var(--color-inverted);
+  &:disabled,
+  &.disabled {
+    color: var(--color-button-secondary-text-disabled);
+    background-color: var(--color-button-secondary-disabled);
+  }
+  &.outline {
+    background: none;
+    color: var(--color-inverted);
+    border-color: var(--color-inverted);
+    &:hover {
+      color: var(--color-button-secondary-hover);
+      border-color: var(--color-button-secondary-hover);
+    }
+    &:disabled,
+    &.disabled {
+      background: none;
+	    color: var(--color-button-secondary-text-disabled);
+	    border-color: var(--color-button-secondary-disabled);
+    }
+  }
+  &:hover {
+    opacity: .7;
+  }
+}
+
+// Round
+.button.round {
+  border-radius: var(--button-height-large);
+}
+
+// Raised
+.button.raised {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+}
+
+// Upper
+.button.upper {
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  font-size: calc(var(--button-font-size-small));
+  &.small {
+    font-size: calc(var(--button-font-size-smaller));
+  }
+  &.big {
+    font-size: calc(var(--button-font-size-small));
+  }
+  &.large {
+    font-size: var(--button-font-size);
+  }
+}
+
+// Secondary
+.button.secondary {
+	color: var(--color-button-secondary-text);
+	background-color: var(--color-button-secondary);
+	&:hover {
+    color: var(--color-button-secondary-text);
+    background-color: var(--color-button-secondary-hover);
+	}
+  &:disabled,
+  &.disabled {
+    color: var(--color-button-secondary-text-disabled);
+    background-color: var(--color-button-secondary-disabled);
+  }
+  &.outline {
+    background: none;
+    color: var(--color-button-secondary);
+    border-color: var(--color-button-secondary);
+    &:hover {
+      color: var(--color-button-secondary-hover);
+      border-color: var(--color-button-secondary-hover);
+    }
+    &:disabled,
+    &.disabled {
+      background: none;
+	    color: var(--color-button-secondary-text-disabled);
+	    border-color: var(--color-button-secondary-disabled);
+    }
+  }
+}