kube 6.5.2.0

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

@@ -0,0 +1,116 @@
+.label {
+  display: inline-block;
+  font-size: 13px;
+  background: var(--color-silver);
+  line-height: 18px;
+  padding: 0 10px;
+  font-weight: 500;
+  color: var(--color-text);
+  border: 1px solid transparent;
+  vertical-align: middle;
+  text-decoration: none;
+  border-radius: 4px;
+	& a,
+	& a:hover {
+		color: inherit;
+		text-decoration: none;
+	}
+}
+.label.big {
+  font-size: calc(var(--font-size-small));
+  line-height: 24px;
+  padding: 0 12px;
+}
+.label.upper {
+  text-transform: uppercase;
+  font-size: 11px;
+}
+
+// Outline
+.label.outline {
+  background: none;
+  border-color: var(--color-gray);
+}
+
+// Badges
+.label.badge {
+  text-align: center;
+  border-radius: 64px;
+  padding: 0 6px;
+  &.big {
+    padding: 0 8px;
+  }
+}
+
+// Tag
+.label.tag {
+  padding: 0;
+  background: none;
+  border: none;
+  text-transform: uppercase;
+  font-size: calc(var(--font-size-smaller) - 1px);
+  &.big {
+    font-size: calc(var(--font-size-small) - 1px);
+  }
+}
+
+.label.success {
+  background: var(--color-success);
+  color: #fff;
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-success);
+    color: var(--color-success);
+  }
+}
+.label.error {
+  background: var(--color-error);
+  color: #fff;
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-error);
+    color: var(--color-error);
+  }
+}
+.label.warning {
+  background: var(--color-warning);
+  color: var(--color-black);
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-warning);
+    color: var(--color-warning);
+  }
+}
+.label.focus {
+  background: var(--color-focus);
+  color: #fff;
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-focus);
+    color: var(--color-focus);
+  }
+}
+.label.black {
+  background: var(--color-black);
+  color: #fff;
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-black);
+    color: var(--color-black);
+  }
+}
+.label.inverted {
+  background: var(--color-inverted);
+  color: var(--color-black);
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: var(--color-inverted);
+    color: var(--color-inverted);
+  }
+}

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

@@ -0,0 +1,49 @@
+.message {
+  font-family: var(--monospace-font-family);
+  font-size: calc(var(--font-size-small));
+  line-height: var(--base-line-small);
+  background: var(--color-silver);
+  color: var(--color-text);
+  padding: 1rem;
+  padding-right: 2.5em;
+  padding-bottom: .75rem;
+  margin-bottom: var(--base-line);
+  position: relative;
+  & a {
+    color: inherit;
+  }
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    margin-bottom: 0;
+  }
+  & .close {
+    position: absolute;
+    right: 1rem;
+    top: 1.1rem;
+  }
+}
+.message.error {
+  background: var(--color-error);
+  color: #fff;
+}
+.message.success {
+  background: var(--color-success);
+  color: #fff;
+}
+.message.warning {
+  background: var(--color-warning);
+}
+.message.focus {
+  background: var(--color-focus);
+  color: #fff;
+}
+.message.black {
+  background: var(--color-black);
+  color: #fff;
+}
+.message.inverted {
+  background: var(--color-inverted);
+}

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

@@ -0,0 +1,55 @@
+.modal-box {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	overflow-x: hidden;
+	overflow-y: auto;
+	z-index: var(--z-over-control);
+}
+.modal {
+	position: relative;
+	margin: auto;
+	margin-top: 16px;
+	padding: 0;
+	background: #fff;
+	box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
+    border-radius: 8px;
+	color: #000;
+	& input,
+	& textarea {
+		@media (max-width: $sm) {
+		  font-size: 16px;
+		}
+	}
+  & .close {
+  	position: absolute;
+  	top: 18px;
+  	right: 16px;
+  	opacity: .3;
+  	&:hover {
+    	opacity: 1;
+  	}
+  }
+}
+.modal-header {
+	padding: 24px 32px;
+	font-size: 18px;
+	font-weight: bold;
+	border-bottom: 1px solid rgba(0, 0, 0, .05);
+  &:empty {
+    display: none;
+  }
+}
+.modal-body {
+  padding: 36px 56px;
+}
+
+// Responsive
+@media (max-width: $sm) {
+  .modal-header,
+  .modal-body {
+    padding: 24px;
+  }
+}

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

@@ -0,0 +1,26 @@
+.offcanvas {
+  background: #fff;
+  position: fixed;
+  padding: var(--base-line);
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: var(--z-over-page);
+  overflow-y: scroll;
+}
+.offcanvas .close {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+}
+.offcanvas-left {
+  border-right: 1px solid rgba(0, 0, 0, .1);
+}
+.offcanvas-right {
+  left: auto;
+  right: 0;
+	border-left: 1px solid rgba(0, 0, 0, .1);
+}
+.offcanvas-push-body {
+  position: relative;
+}

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

@@ -0,0 +1,91 @@
+.pagination {
+  margin: var(--base-line) 0;
+  font-size: calc(var(--font-size-small));
+  & ul {
+    @include flex;
+    margin: 0;
+  }
+  &.align-center  ul {
+    @include flex-items-center;
+  }
+  & span,
+  & a {
+    border-radius: 3px;
+    display: inline-block;
+  	padding: 8px 12px;
+  	line-height: 1;
+  	white-space: nowrap;
+  	border: 1px solid transparent;
+  }
+  & a {
+  	text-decoration: none;
+  	color: var(--color-text);
+  	&:hover {
+  		color: rgba(0, 0, 0, .5);
+  		border-color: var(--color-silver);
+  	}
+  }
+  & span,
+  & li.active a {
+  	color: rgba(0, 0, 0, .5);
+  	border-color: var(--color-silver);
+  	cursor: text;
+  }
+  &.upper {
+  	font-size: calc(var(--font-size-smaller));
+  }
+}
+
+// Pager
+.pager {
+  & span {
+    line-height: var(--base-line);
+  }
+  & span,
+  & a {
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 64px;
+    border-color: rgba(0, 0, 0, .1);
+  }
+  & li {
+    @include flex-basis(50%);
+  }
+  & li.next {
+    text-align: right;
+  }
+  &.align-center li {
+    @include flex-basis(auto);
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+  &.flat {
+    & span,
+    & a {
+      border: none;
+      display: block;
+      padding: 0;
+    }
+    & a {
+      font-weight: bold;
+      &:hover {
+        background: none;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// Responsive
+@include breakpoint(sm) {
+  .pager.flat {
+    & ul {
+      @include flex-items-column;
+    }
+    & li {
+      @include flex-basis(100%);
+      margin-bottom: 8px;
+      text-align: left;
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+// Push
+.gutters .col.push-left,
+.push-left {
+  margin-right: auto;
+}
+.gutters .col.push-right,
+.push-right {
+  margin-left: auto;
+}
+.gutters .col.push-center,
+.push-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.gutters .col.push-middle,
+.push-middle {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.push-bottom {
+  margin-top: auto;
+}
+@include breakpoint(sm) {
+  .gutters .col.push-left-sm,
+  .push-left-sm {
+    margin-left: 0;
+  }
+  .gutters .col.push-center-sm,
+  .push-center-sm {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .push-top-sm {
+    margin-top: 0;
+  }
+}
+
+// Flex Alignment
+.align-middle {
+  @include flex-items-middle;
+}
+.align-right {
+  @include flex-items-right;
+}
+.align-center {
+  @include flex-items-center;
+}
+@include breakpoint(sm) {
+  .align-left-sm {
+    @include flex-items-left;
+  }
+}
+
+// Float
+.float-right {
+	float: right;
+}
+.float-left {
+	float: left;
+}
+@include breakpoint(sm) {
+  .float-right {
+    float: none;
+  }
+  .float-left {
+    float: none;
+  }
+}
+
+// Fixed
+.fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: var(--z-over-content);
+	width: 100%;
+}

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

@@ -0,0 +1,41 @@
+@media print {
+  * {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  h2,
+  h3,
+  h4 {
+    page-break-after: avoid;
+  }
+  @page {
+    margin: 0.5cm;
+  }
+}