kube 6.5.2.0

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

@@ -0,0 +1,139 @@
+// Group
+.group {
+	@include clearfix;
+}
+
+// Flex
+.flex {
+  @include flex;
+}
+@include breakpoint(sm) {
+  .flex-column-sm {
+    @include flex-items-column;
+  }
+  .flex-w100-sm {
+    @include flex-item-width(100%);
+  }
+}
+
+// Visibility
+.invisible {
+	visibility: hidden;
+}
+.visible {
+	visibility: visible;
+}
+
+// Display
+.display-block {
+  display: block;
+}
+.hide {
+	display: none !important;
+}
+@include breakpoint(sm) {
+	.hide-sm {
+		display: none !important;
+	}
+}
+@include breakpoint($min: $sm) {
+  .show-sm {
+    display: none !important;
+	}
+}
+
+// Print
+@media print {
+	.hide-print {
+		display: none !important;
+	}
+	.show-print {
+		display: block !important;
+	}
+}
+
+// NoScroll
+.no-scroll {
+	overflow: hidden;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100% !important;
+}
+
+// ScrollbarMeasure
+.scrollbar-measure {
+	position: absolute;
+	top: -9999px;
+	width: 50px;
+	height: 50px;
+	overflow: scroll;
+}
+
+// Responsive embedded objects
+.video-container {
+	height: 0;
+	padding-bottom: 56.25%; // ratio 16:9
+	position: relative;
+	margin-bottom: calc(var(--text-margin-bottom));
+	& iframe,
+	& object,
+	& embed {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100% !important;
+		height: 100% !important;
+	}
+}
+
+// Close
+.close {
+  display: inline-block;
+  min-height: 16px;
+  min-width: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 12px;
+  opacity: .6;
+  &:hover {
+    opacity: 1;
+  }
+  &.small {
+    font-size: 8px;
+  }
+  &.big {
+    font-size: 18px;
+  }
+  &.white {
+    color: #fff;
+  }
+}
+
+// Caret
+.caret {
+  display: inline-block;
+}
+.button {
+  & .caret {
+  	margin-right: -8px;
+  }
+}
+
+// Overlay
+.overlay {
+  position: fixed;
+  z-index: var(--z-over-control);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--overlay-background-color);
+  & > .close {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+  }
+}

data/app/assets/stylesheets/kube/mixins/_breakpoints.scss

@@ -0,0 +1,27 @@
+@mixin breakpoint($min: 0, $max: 0) {
+  $type: type-of($min);
+
+  @if $type == string
+  {
+    @if $min == sm
+    {
+      @media (max-width: $sm) { @content; }
+    }
+    @else if $min == md
+    {
+      @media (min-width: $sm) and (max-width: $md) { @content; }
+    }
+    @else if $min == lg
+    {
+      @media (min-width: $lg) { @content; }
+    }
+  }
+  @else if $type == number
+  {
+    $query: "all" !default;
+    @if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; }
+    @else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; }
+    @else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; }
+    @media #{$query} { @content; }
+  }
+}

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

@@ -0,0 +1,29 @@
+@mixin button($color-text, $color-back)
+{
+	color: $color-text;
+	background-color: $color-back;
+	&:hover {
+    color: $color-text;
+    background-color: lighten($color-back, 20%);
+	}
+  &:disabled,
+  &.disabled {
+    color: rgba($color-text, .7);
+    background-color: rgba($color-back, .7);
+  }
+  &.outline {
+    background: none;
+    color: $color-back;
+    border-color: $color-back;
+    &:hover {
+      color: rgba($color-back, .6);
+      border-color: rgba($color-back, .5);
+    }
+    &:disabled,
+    &.disabled {
+      background: none;
+	    color: rgba($color-back, .7);
+	    border-color: rgba($color-back, .5);
+    }
+  }
+}

data/app/assets/stylesheets/kube/mixins/_flex.scss

@@ -0,0 +1,97 @@
+// display
+@mixin flex {
+	display: flex;
+}
+
+// basis
+@mixin flex-basis($width) {
+	flex-basis: $width;
+}
+
+// items wrap
+@mixin flex-items-wrap {
+	flex-wrap: wrap;
+}
+
+// items nowrap
+@mixin flex-items-nowrap {
+	flex-wrap: nowrap;
+}
+
+// items row
+@mixin flex-items-row {
+  flex-direction: row;
+}
+
+// items columns
+@mixin flex-items-column {
+  flex-direction: column;
+}
+
+// items left
+@mixin flex-items-left {
+  justify-content: flex-start;
+}
+
+// items right
+@mixin flex-items-right {
+  justify-content: flex-end;
+}
+
+// items center
+@mixin flex-items-center {
+	justify-content: center;
+}
+
+// items between
+@mixin flex-items-space-between {
+	justify-content: space-between;
+}
+
+// items around
+@mixin flex-items-space-around {
+	justify-content: space-around;
+}
+
+// items vertical top
+@mixin flex-items-top {
+  align-items: flex-start;
+}
+
+// items vertical middle
+@mixin flex-items-middle {
+	align-items: center;
+}
+
+// items vertical bottom
+@mixin flex-items-bottom {
+  align-items: flex-end;
+}
+
+// item grow
+@mixin flex-item-grow($grow: 0) {
+  flex-grow: $grow;
+}
+
+// item auto
+@mixin flex-item-auto {
+  flex: auto;
+}
+
+// item one
+@mixin flex-item-one {
+  flex: 1;
+}
+
+// item shrink
+@mixin flex-item-shrink($num: 0) {
+	flex-shrink: $num;
+}
+
+// item width
+@mixin flex-item-width($width) {
+	flex: 0 0 $width;
+	@include breakpoint(sm) {
+    flex: 0 0 100% !important;
+  }
+}

data/app/assets/stylesheets/kube/mixins/_fonts.scss

@@ -0,0 +1,27 @@
+// Text
+@mixin text-font($font) {
+  body {
+    font-family: #{$font};
+  }
+}
+
+// Headings
+@mixin headings-font($font) {
+  h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: #{$font};
+  }
+}
+
+// Buttons
+@mixin buttons-font($font) {
+  button, .button {
+    font-family: #{$font};
+  }
+}
+
+// Inputs
+@mixin inputs-font($font) {
+  input, textarea, select {
+    font-family: #{$font};
+  }
+}

data/app/assets/stylesheets/kube/mixins/_gradients.scss

@@ -0,0 +1,28 @@
+// vertical
+@mixin gradient-vertical($start: #555, $end: #333) {
+	background-color: $start;
+	background-image: linear-gradient(to bottom, $start 0%, $end 100%);
+}
+
+// vertical to opacity
+@mixin gradient-vertical-to-opacity($color, $opacity: 0) {
+	$rgba: rgba(red($color), green($color), blue($color), $opacity);
+	background: linear-gradient(to bottom, $color 0%, $rgba 100%);
+}
+
+// horizontal
+@mixin gradient-horizontal($start: #555, $end: #333) {
+  background-color: $start;
+  background: linear-gradient(to right, $start 0%, $end 100%);
+}
+
+// horizontal to opacity
+@mixin gradient-horizontal-to-opacity($color: #555, $opacity: 0) {
+  $rgba: rgba(red($color), green($color), blue($color), $opacity);
+  background: linear-gradient(to right, $color 0%, $rgba 100%);
+}
+
+// radial
+@mixin gradient-radial($inner: #555, $outer: #333) {
+	background-image: radial-gradient(circle, $inner, $outer);
+}

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

@@ -0,0 +1,54 @@
+// Make Row
+@mixin grid-row {
+  @include flex;
+  @include flex-items-row;
+  @include flex-items-wrap;
+  @include breakpoint(sm) {
+    @include flex-items-column;
+    @include flex-items-nowrap;
+  }
+}
+
+// Generate Columns
+@mixin generate-grid-columns {
+  @for $i from 1 through $grid-columns {
+    .col-#{$i} {
+      width: 100% / $grid-columns * $i;
+    }
+    .offset-#{$i} {
+      $width: 100% / $grid-columns * $i;
+      margin-left: $width;
+    }
+  }
+  .gutters {
+    @for $i from 1 through $grid-columns {
+      & > .col-#{$i} {
+        $width: 100% / $grid-columns * $i;
+        width: calc(#{$width} - #{$grid-gutter});
+      }
+      & > .offset-#{$i} {
+        $width: 100% / $grid-columns * $i;
+        margin-left: calc(#{$width} + #{$grid-gutter}) !important;
+      }
+    }
+  }
+}
+
+// Grid Media Columns
+@mixin grid-media-columns($num) {
+	-webkit-column-count: $num;
+	-moz-column-count: $num;
+	column-count: $num;
+	-webkit-column-gap: var(--grid-gutter);
+	-moz-column-gap: var(--grid-gutter);
+	column-gap: var(--grid-gutter);
+	& > div {
+		display: inline-block;
+		width: 100%;
+	}
+  @include breakpoint(sm) {
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+		column-count: 1;
+  }
+}

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

@@ -0,0 +1,10 @@
+@mixin label($text, $back) {
+  background: $back;
+  color: $text;
+  &.tag,
+  &.outline {
+    background: none;
+    border-color: $back;
+    color: $back;
+  }
+}

data/app/assets/stylesheets/kube/mixins/_utils.scss

@@ -0,0 +1,60 @@
+// Clearfix
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// Transition
+@mixin transition($transition: all linear .2s) {
+  -moz-transition: $transition;
+  transition: $transition;
+}
+
+// transform
+@mixin transform($transforms) {
+  -moz-transform: $transforms;
+  -ms-transform: $transforms;
+  -webkit-transform: $transforms;
+  transform: $transforms;
+}
+
+// blur
+@mixin blur($radius) {
+  -webkit-filter: blur($radius);
+  -moz-filter: blur($radius);
+  -ms-filter: blur($radius);
+  filter: blur($radius);
+}
+
+// striped
+@mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) {
+  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
+
+// animation
+@mixin animation($animation) {
+  -webkit-animation: $animation;
+  -moz-animation: $animation;
+  animation: $animation;
+}
+
+// Retina Images
+@mixin retina-background-image($file, $type, $width:  auto, $height:  auto) {
+  background-repeat: no-repeat;
+  background-image: url($file + '.' + $type);
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+      background-image: url($file + '-2x.' + $type);
+      background-size: $width $height;
+    }
+}