kube 6.5.2.0

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

@@ -0,0 +1,28 @@
+// Text Colors
+.black     { color: var(--color-black); }
+.inverted  { color: var(--color-inverted); }
+.error     { color: var(--color-error); }
+.success   { color: var(--color-success); }
+.warning   { color: var(--color-warning); }
+.focus     { color: var(--color-focus); }
+.aluminum  { color: var(--color-aluminum); }
+.silver    { color: var(--color-silver); }
+.lightgray { color: var(--color-lightgray); }
+.gray      { color: var(--color-gray); }
+.midgray   { color: var(--color-midgray); }
+.darkgray  { color: var(--color-darkgray); }
+
+// Background Colors
+.bg-black      { background-color: var(--color-black); }
+.bg-inverted   { background-color: var(--color-inverted); }
+.bg-error      { background-color: var(--color-error); }
+.bg-success    { background-color: var(--color-success); }
+.bg-warning    { background-color: var(--color-warning); }
+.bg-focus      { background-color: var(--color-focus); }
+.bg-aluminum   { background-color: var(--color-aluminum); }
+.bg-silver     { background-color: var(--color-silver); }
+.bg-lightgray  { background-color: var(--color-lightgray); }
+.bg-gray       { background-color: var(--color-gray); }
+.bg-midgray    { background-color: var(--color-midgray); }
+.bg-darkgray   { background-color: var(--color-darkgray); }
+.bg-highlight  { background-color: var(--color-highlight); }

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

@@ -0,0 +1,51 @@
+.dropdown {
+	position: absolute;
+	z-index: var(--z-over-content);
+	top: 0;
+	right: 0;
+	width: 280px;
+	color: #000;
+	font-size: calc(var(--font-size) - 1px);
+	background: #fff;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
+  border-radius: 3px;
+	max-height: 300px;
+	margin: 0;
+	padding: 0;
+  overflow: hidden;
+  &.dropdown-mobile {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-height: none;
+    border: none;
+  }
+  & .close {
+    margin: 20px auto;
+  }
+  &.open {
+    overflow: auto;
+  }
+  & ul {
+  	list-style: none;
+  	margin: 0;
+  	& li {
+  		border-bottom: 1px solid rgba(0, 0, 0, .07);
+  		&:last-child {
+  			border-bottom: none;
+  		}
+  	}
+  	& a {
+  		display: block;
+  		padding: 12px;
+  		text-decoration: none;
+  		color: #000;
+  		&:hover {
+  			background: rgba(0, 0, 0, .05);
+  		}
+  	}
+  }
+}

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

@@ -0,0 +1,259 @@
+// Fieldset
+fieldset {
+  font-family: inherit;
+  border: 1px solid rgba(0, 0, 0, .1);
+  padding: 2rem;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+legend {
+	font-weight: bold;
+	font-size: calc(var(--font-size-smaller));
+	text-transform: uppercase;
+	padding: 0 1rem;
+	margin-left: -1rem;
+	top: 2px;
+	position: relative;
+	line-height: 0;
+}
+input,
+textarea,
+select {
+  display: block;
+  width: 100%;
+	font-family: inherit;
+	font-size: var(--input-font-size);
+	height: var(--input-height);
+  outline: none;
+  vertical-align: middle;
+	background-color: var(--input-background-color);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  box-shadow: var(--input-box-shadow);
+  padding: 0 var(--input-padding-rl);
+}
+
+// Sizing
+input.small,
+textarea.small,
+select.small {
+  height: var(--input-height-small);
+  font-size: calc(var(--input-font-size-small));
+  padding: 0 var(--input-padding-small-rl);
+  border-radius: var(--input-border-radius);
+}
+input.big,
+textarea.big,
+select.big {
+  height: var(--input-height-big);
+  font-size: calc(var(--input-font-size-big));
+  padding: 0 var(--input-padding-big-rl);
+  border-radius: var(--input-border-radius);
+}
+// States
+input,
+textarea,
+select {
+  &:focus {
+  	outline: none;
+  	background-color: var(--input-focus-background-color);
+  	border-color: var(--input-focus-border-color);
+    box-shadow: var(--input-focus-box-shadow);
+  }
+  &.error {
+    background-color: var(--input-error-background-color);
+  	border: var(--input-border-width) solid var(--input-error-border-color);
+  	&:focus {
+      border-color: var(--input-error-border-color);
+      box-shadow: var(--input-error-focus-box-shadow);
+  	}
+	}
+  &.success  {
+  	background-color: var(--input-success-background-color);
+  	border: var(--input-border-width) solid var(--input-success-border-color);
+  	&:focus {
+      border-color: var(--input-success-border-color);
+      box-shadow: var(--input-success-focus-box-shadow);
+  	}
+  }
+  &:disabled,
+  &.disabled {
+  	resize: none;
+  	opacity: var(--input-disabled-opacity);
+  	cursor: default;
+  	font-style: italic;
+  	color: var(--input-disabled-color);
+	}
+}
+select {
+  -webkit-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+}
+select[multiple] {
+  background-image: none;
+  height: auto;
+  padding: .5rem .75rem;
+}
+textarea {
+  height: auto;
+  padding: var(--input-textarea-padding-tb) var(--input-padding-rl);
+  line-height: var(--textarea-base-line);
+  vertical-align: top;
+}
+input[type="file"] {
+  width: auto;
+  border: none;
+  padding: 0;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  display: inline-block;
+}
+input[type="search"],
+input.search {
+  background-repeat: no-repeat;
+  background-position: 8px 53%;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#000" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
+  padding-left: 32px;
+}
+input[type="radio"],
+input[type="checkbox"] {
+  display: inline-block;
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+label {
+  display: block;
+  color: var(--color-darkgray);
+  margin-bottom: 4px;
+  font-size: calc(var(--font-size) - 1px);
+  &.checkbox,
+  & .desc,
+  & .success,
+  & .error {
+  	text-transform: none;
+  	font-weight: normal;
+  }
+  &.checkbox {
+    font-size: var(--font-size);
+    line-height: var(--base-line);
+  	cursor: pointer;
+  	color: inherit;
+    & input {
+      margin-top: 0;
+    }
+  }
+}
+.form-checkboxes {
+  & label.checkbox {
+    display: inline-block;
+    margin-right: 16px;
+	}
+}
+.req {
+  position: relative;
+  top: 1px;
+	font-weight: bold;
+	color: var(--color-error);
+	font-size: 110%;
+}
+.desc {
+  color: var(--color-gray);
+  font-size: calc(var(--font-size-smaller));
+  line-height: var(--base-line-smaller);
+}
+span.desc {
+  margin-left: 4px;
+}
+div.desc {
+  margin-top: 4px;
+  margin-bottom: -8px;
+}
+.form-buttons {
+  & button,
+  & .button {
+    margin-right: 8px;
+  }
+}
+form,
+.form-item {
+  margin-bottom: 2rem;
+}
+.form {
+  & > .form-item:last-child {
+    margin-bottom: 0;
+  }
+  & .row:last-child {
+    & .form-item {
+      margin-bottom: 0;
+    }
+  }
+  & span.success,
+  & span.error {
+    font-size: calc(var(--font-size-smaller));
+    line-height: var(--base-line-smaller);
+    margin-left: 4px;
+  }
+}
+.form-inline {
+  & input,
+  & textarea,
+  & select {
+    display: inline-block;
+    width: auto;
+  }
+}
+
+// Append & Prepend
+.append,
+.prepend {
+	@include flex;
+	& input {
+		@include flex-item-one;
+	}
+	& .button,
+	& span {
+		@include flex-item-shrink;
+  }
+	& span {
+    @include flex;
+    @include flex-items-column;
+    @include flex-items-center;
+		font-weight: normal;
+		border: var(--input-border-width) solid var(--input-border-color);
+		background-color: var(--color-aluminum);
+		padding: 0 .875rem;
+		color: rgba(0, 0, 0, .5);
+		font-size: calc(var(--font-size-smaller));
+		white-space: nowrap;
+	}
+}
+.prepend {
+  & input {
+    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
+  }
+  & .button {
+    margin-right: -1px;
+    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius) !important;
+  }
+  & span {
+    border-right: none;
+    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
+  }
+}
+.append {
+  & input {
+    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
+  }
+  & .button {
+    margin-left: -1px;
+    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0 !important;
+  }
+  & span {
+    border-left: none;
+    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
+  }
+}

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

@@ -0,0 +1,68 @@
+// Grid Row
+.row {
+  @include grid-row;
+
+  // Gutters
+  &.gutters,
+  &.gutters > .row {
+    margin-left: -$grid-gutter;
+    @include breakpoint(sm) {
+      margin-left: 0;
+    }
+    & > .col {
+      margin-left: $grid-gutter;
+      @include breakpoint(sm) {
+        margin-left: 0;
+      }
+    }
+  }
+	&.around {
+		@include flex-items-space-around;
+	}
+	&.between {
+		@include flex-items-space-between;
+	}
+	&.auto {
+    & .col {
+      @include flex-item-grow(1);
+    }
+	}
+}
+
+// Grid Columns
+@include generate-grid-columns;
+
+// Offset
+[class^='offset-'],
+[class*=' offset-'] {
+  @include breakpoint(sm) {
+    margin-left: 0;
+  }
+}
+
+// Ordering
+.first {
+  order: -1;
+}
+.last {
+  order: 1;
+}
+@include breakpoint(sm) {
+  .row {
+    & .col {
+      margin-left: 0;
+      width: 100%;
+    }
+    &.gutters {
+      & .col {
+        margin-bottom: calc(var(--text-margin-bottom));
+      }
+    }
+  }
+  .first-sm {
+    order: -1;
+  }
+	.last-sm {
+    order: 1;
+  }
+}

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

@@ -0,0 +1,51 @@
+@font-face {
+  font-family: 'Kube';
+  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="kube-"], [class*=" kube-"], .close, .caret {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'Kube' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.kube-calendar:before {
+  content: "\e900";
+}
+.caret.down:before,
+.kube-caret-down:before {
+  content: "\e901";
+}
+.caret.left:before,
+.kube-caret-left:before {
+  content: "\e902";
+}
+.caret.right:before,
+.kube-caret-right:before {
+  content: "\e903";
+}
+.caret.up:before,
+.kube-caret-up:before {
+  content: "\e904";
+}
+.close:before,
+.kube-close:before {
+  content: "\e905";
+}
+.kube-menu:before {
+  content: "\e906";
+}
+.kube-search:before {
+  content: "\e907";
+}