kube 6.5.2.0

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

@@ -0,0 +1,48 @@
+html {
+	box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+}
+img,
+video,
+audio {
+  max-width: 100%;
+}
+img,
+video {
+	height: auto;
+}
+svg {
+  max-height: 100%;
+}
+iframe {
+  border: none;
+}
+::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+input[type="radio"],
+input[type="checkbox"] {
+  vertical-align: middle;
+  position: relative;
+  bottom: 0.15rem;
+  font-size: 115%;
+  margin-right: 3px;
+}
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+}

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

@@ -0,0 +1,107 @@
+// Width
+.w5   { width: 5%;   }
+.w10  { width: 10%;  }
+.w15  { width: 15%;  }
+.w20  { width: 20%;  }
+.w25  { width: 25%;  }
+.w30  { width: 30%;  }
+.w35  { width: 35%;  }
+.w40  { width: 40%;  }
+.w45  { width: 45%;  }
+.w50  { width: 50%;  }
+.w55  { width: 55%;  }
+.w60  { width: 60%;  }
+.w65  { width: 65%;  }
+.w70  { width: 70%;  }
+.w75  { width: 75%;  }
+.w80  { width: 80%;  }
+.w85  { width: 85%;  }
+.w90  { width: 90%;  }
+.w95  { width: 95%;  }
+.w100 { width: 100%; }
+
+.w-auto { width: auto; }
+
+// Content Width
+.w-small  { width: var(--w-small);  }
+.w-medium { width: var(--w-medium); }
+.w-big    { width: var(--w-big);    }
+.w-large  { width: var(--w-large);  }
+
+@include breakpoint(sm) {
+  .w-auto-sm {
+    width: auto;
+  }
+  .w100-sm,
+  .w-small,
+  .w-medium,
+  .w-big,
+  .w-large {
+    width: 100%;
+  }
+}
+
+// Max Width
+.max-w5   { max-width: 5%;   }
+.max-w10  { max-width: 10%;  }
+.max-w15  { max-width: 15%;  }
+.max-w20  { max-width: 20%;  }
+.max-w25  { max-width: 25%;  }
+.max-w30  { max-width: 30%;  }
+.max-w35  { max-width: 35%;  }
+.max-w40  { max-width: 40%;  }
+.max-w45  { max-width: 45%;  }
+.max-w50  { max-width: 50%;  }
+.max-w55  { max-width: 55%;  }
+.max-w60  { max-width: 60%;  }
+.max-w65  { max-width: 65%;  }
+.max-w70  { max-width: 70%;  }
+.max-w75  { max-width: 75%;  }
+.max-w80  { max-width: 80%;  }
+.max-w85  { max-width: 85%;  }
+.max-w90  { max-width: 90%;  }
+.max-w95  { max-width: 95%;  }
+.max-w100 { max-width: 100%; }
+
+// Content Max Width
+.max-w-small  { max-width: var(--w-small);  }
+.max-w-medium { max-width: var(--w-medium); }
+.max-w-big    { max-width: var(--w-big);    }
+.max-w-large  { max-width: var(--w-large);  }
+
+@include breakpoint(sm) {
+  .max-w-auto-sm,
+  .max-w-small,
+  .max-w-medium,
+  .max-w-big,
+  .max-w-large {
+    max-width: auto;
+  }
+}
+
+// Min Width
+.min-w5   { min-width: 5%;   }
+.min-w10  { min-width: 10%;  }
+.min-w15  { min-width: 15%;  }
+.min-w20  { min-width: 20%;  }
+.min-w25  { min-width: 25%;  }
+.min-w30  { min-width: 30%;  }
+.min-w35  { min-width: 35%;  }
+.min-w40  { min-width: 40%;  }
+.min-w45  { min-width: 45%;  }
+.min-w50  { min-width: 50%;  }
+.min-w55  { min-width: 55%;  }
+.min-w60  { min-width: 60%;  }
+.min-w65  { min-width: 65%;  }
+.min-w70  { min-width: 70%;  }
+.min-w75  { min-width: 75%;  }
+.min-w80  { min-width: 80%;  }
+.min-w85  { min-width: 85%;  }
+.min-w90  { min-width: 90%;  }
+.min-w95  { min-width: 95%;  }
+.min-w100 { min-width: 100%; }
+
+// Height
+.h25  { height: 25%;  }
+.h50  { height: 50%;  }
+.h100 { height: 100%; }

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

@@ -0,0 +1,77 @@
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	max-width: 100%;
+	width: 100%;
+	empty-cells: show;
+	font-size: calc(var(--table-font-size));
+	line-height: var(--table-base-line);
+}
+table caption {
+  text-align: left;
+  font-size: calc(var(--font-size-small));
+  font-weight: 500;
+  color: var(--color-midgray);
+}
+th {
+	text-align: left;
+	font-weight: 700;
+	vertical-align: bottom;
+}
+td {
+	vertical-align: top;
+}
+tr.align-middle td,
+td.align-middle {
+  vertical-align: middle;
+}
+th,
+td {
+	padding: var(--table-padding-tb) var(--table-padding-rl);
+	border-bottom: var(--table-border);
+	&:first-child {
+		padding-left: 0;
+	}
+	&:last-child {
+		padding-right: 0;
+	}
+}
+tfoot th,
+tfoot td {
+	color: var(--color-gray);
+}
+
+// Bordered
+table.bordered {
+	& td,
+	& th {
+		border: var(--table-border);
+	}
+}
+
+// Striped
+table.striped tr:nth-child(odd) td {
+	background: var(--table-background-striped);
+}
+
+table.bordered,
+table.striped {
+	& td,
+	& th {
+		&:first-child {
+			padding-left: var(--table-padding-rl);
+		}
+		&:last-child {
+			padding-right: var(--table-padding-rl);
+		}
+	}
+}
+
+// Unstyled
+table.unstyled {
+	& td,
+	& th {
+		border: none;
+		padding: 0;
+	}
+}

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

@@ -0,0 +1,43 @@
+.tabs {
+  margin-bottom: var(--base-line);
+  font-size: calc(var(--font-size-small));
+  & li em,
+  & li.active a {
+  	color: var(--color-text);
+  	border: 1px solid rgba(0, 0, 0, .1);
+  	cursor: default;
+  	text-decoration: none;
+  	background: none;
+  }
+  & em,
+  & a {
+  	position: relative;
+  	top: 1px;
+  	font-style: normal;
+  	display: block;
+  	padding: .5rem 1rem;
+  	border: 1px solid transparent;
+  	color: rgba(0, 0, 0, .5);
+  	text-decoration: none;
+  }
+  & a:hover {
+  	@include transition;
+  	color: var(--color-text);
+  	text-decoration: underline;
+  	background-color: var(--color-silver);
+  }
+}
+
+@include breakpoint($min: $sm) {
+  .tabs {
+    & ul {
+      @include flex;
+      margin-top: -1px;
+      border-bottom: 1px solid rgba(0, 0, 0, .1);
+    }
+    & li em,
+    & li.active a {
+      border-bottom: 1px solid #fff;
+    }
+  }
+}

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

@@ -0,0 +1,325 @@
+html,
+body {
+  font-size: var(--font-size);
+  line-height: var(--base-line);
+}
+body {
+	font-family: var(--text-font-family);
+	color: var(--color-text);
+	background-color: transparent;
+}
+
+// Links
+a {
+	color: var(--color-link);
+}
+a:hover {
+	color: var(--color-link-hover);
+}
+
+// Headings
+h1.title, h1, h2, h3, h4, h5, h6 {
+	font-family: var(--headings-font-family);
+	font-weight: bold;
+	color: var(--color-headings);
+	text-rendering: optimizeLegibility;
+  margin-bottom: var(--heading-margin-bottom);
+}
+h1.title {
+  font-size: var(--heading-font-size-title);
+  line-height: var(--heading-base-line-title);
+  margin-bottom: calc(var(--heading-margin-bottom) / 2);
+}
+h1,
+.h1 {
+  font-size: var(--heading-font-size-1);
+  line-height: var(--heading-base-line-1);
+}
+h2,
+.h2 {
+  font-size: var(--heading-font-size-2);
+  line-height: var(--heading-base-line-2);
+}
+h3,
+.h3 {
+  font-size: var(--heading-font-size-3);
+  line-height: var(--heading-base-line-3);
+}
+h4,
+.h4 {
+  font-size: var(--heading-font-size-4);
+  line-height: var(--heading-base-line-4);
+}
+h5,
+.h5 {
+  font-size: var(--heading-font-size-5);
+  line-height: var(--heading-base-line-5);
+}
+h6,
+.h6 {
+  font-size: var(--heading-font-size-6);
+  line-height: var(--heading-base-line-6);
+}
+h1 a, .h1 a,
+h2 a, .h2 a,
+h3 a, .h3 a,
+h4 a, .h4 a,
+h5 a, .h5 a,
+h6 a, .h6 a {
+  color: inherit;
+}
+
+// Top Space
+p,
+ul,
+ol,
+dl,
+blockquote,
+hr,
+pre,
+table,
+form,
+figure {
+	+ h2,
+	+ h3,
+	+ h4,
+	+ h5,
+	+ h6 {
+		margin-top: var(--base-line);
+	}
+}
+
+// Lists
+ul,
+ol {
+  &,
+  & ul,
+  & ol {
+    margin: 0 0 0 var(--base-line);
+	}
+}
+ol ol li {
+	list-style-type: lower-alpha;
+}
+ol ol ol li {
+	list-style-type: lower-roman;
+}
+nav {
+  & ul,
+  & ol {
+    margin: 0;
+    list-style: none;
+    & ul,
+    & ol {
+  	  margin-left: var(--base-line);
+    }
+	}
+}
+dl dt {
+	font-weight: bold;
+}
+dd {
+	margin-left: var(--base-line);
+}
+
+// Block Tags
+p, blockquote, hr, pre, ol, ul, dl, table, fieldset, figure, address, form {
+	margin-bottom: calc(var(--text-margin-bottom));
+}
+hr {
+  border: none;
+	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	margin-top: -1px;
+}
+blockquote {
+	padding-left: 1rem;
+	border-left: 4px solid rgba(0, 0, 0, .1);
+	font-style: italic;
+	color: var(--color-gray);
+	& p {
+    margin-bottom: .5rem;
+	}
+}
+
+// Inline
+time, cite, small, figcaption {
+	font-size: 87.5%;
+}
+cite {
+  opacity: .6;
+}
+abbr[title], dfn[title] {
+	border-bottom: 1px dotted rgba(0, 0, 0, .5);
+	cursor: help;
+}
+var {
+  font-size: var(--font-size);
+	opacity: .6;
+	font-style: normal;
+}
+mark, code, samp, kbd {
+  position: relative;
+  top: -1px;
+	padding: 4px 4px 2px 4px;
+	display: inline-block;
+	line-height: 1;
+	color: var(--color-midgray);
+}
+code {
+	background: var(--color-silver);
+}
+mark {
+	background: var(--color-warning);
+}
+samp {
+	color: #fff;
+	background: var(--color-focus);
+}
+kbd {
+	border: 1px solid rgba(0, 0, 0, .1);
+}
+sub,
+sup {
+  font-size: x-small;
+	line-height: 0;
+	margin-left: 1rem/4;
+	position: relative;
+}
+sup {
+	top: 0;
+}
+sub {
+	bottom: 1px;
+}
+
+// Preformatted
+pre, code, samp, var, kbd {
+	font-family: var(--monospace-font-family);
+}
+pre, code, samp, var, kbd, mark {
+	font-size: 87.5%;
+}
+pre,
+pre code {
+  background: var(--color-aluminum);
+	padding: 0;
+	top: 0;
+  display: block;
+  line-height: var(--base-line-small);
+  color: var(--color-midgray);
+	overflow: none;
+	white-space: pre-wrap;
+}
+pre {
+  padding: 1rem;
+}
+
+// Figure
+figcaption {
+	opacity: .6;
+}
+figure figcaption {
+  position: relative;
+  top: -1rem/2;
+}
+figure pre {
+  background: none;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 4px;
+}
+figure {
+  & .video-container,
+  & pre {
+    margin-bottom: calc(var(--text-margin-bottom) / 2);
+  }
+}
+
+// Alignment
+.text-left {
+	text-align: left;
+}
+.text-center {
+	text-align: center;
+}
+.text-right {
+	text-align: right;
+}
+
+// Modifiers
+ul.unstyled {
+  & {
+    margin-left: 0;
+  }
+  &,
+  & ul {
+    list-style: none;
+  }
+}
+.monospace {
+  font-family: var(--monospace-font-family);
+}
+.upper {
+  text-transform: uppercase;
+}
+.lower {
+  text-transform: lowercase;
+}
+.italic {
+  font-style: italic !important;
+}
+.strong {
+  font-weight: bold !important;
+}
+.normal {
+  font-weight: normal !important;
+}
+.muted {
+  opacity: .55;
+}
+a.muted {
+  color: var(--color-black);
+}
+a.muted:hover {
+  opacity: 1;
+}
+.black {
+  color: var(--color-black);
+}
+.smaller {
+	font-size: calc(var(--font-size-smaller));
+	line-height: var(--base-line-smaller);
+}
+.small {
+	font-size: calc(var(--font-size-small));
+	line-height: var(--base-line-small);
+}
+.big {
+	font-size: calc(var(--font-size-big));
+	line-height: var(--base-line-big);
+}
+.large {
+	font-size: calc(var(--font-size-large));
+	line-height: var(--base-line-large);
+}
+.end {
+  margin-bottom: 0 !important;
+}
+.highlight {
+	background-color: var(--color-highlight);
+}
+.nowrap,
+.nowrap td {
+	white-space: nowrap;
+}
+
+// Text Columns
+@include breakpoint(md) {
+  .columns-2,
+  .columns-3,
+  .columns-4 {
+    column-gap: var(--base-line);
+  }
+  .columns-2 { column-count: 2; }
+  .columns-3 { column-count: 3; }
+  .columns-4 { column-count: 4; }
+}