tabler-rubygem 0.1.1

data/assets/stylesheets/tabler/forms/_custom-colorinput.scss

@@ -0,0 +1,51 @@
+//.colorinput-stacked {
+//	display: flex;
+//	flex-wrap: wrap;
+//
+//	.colorinput {
+//		margin-right: .25rem;
+//	}
+//}
+
+.colorinput {
+	margin: 0;
+	position: relative;
+	cursor: pointer;
+}
+
+.colorinput-input {
+	position: absolute;
+	z-index: -1;
+	opacity: 0;
+}
+
+.colorinput-color {
+	display: inline-block;
+	width: 1.75rem;
+	height: 1.75rem;
+	border-radius: 3px;
+	border: 1px solid $border-color;
+	color: #fff;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+	&:before {
+		content: '';
+		opacity: 0;
+		position: absolute;
+		top: .25rem;
+		left: .25rem;
+		height: 1.25rem;
+		width: 1.25rem;
+		transition: .3s opacity;
+		background: $custom-checkbox-indicator-icon-checked no-repeat center center/50% 50%;
+
+		.colorinput-input:checked ~ & {
+			opacity: 1;
+		}
+	}
+
+	.colorinput-input:focus ~ & {
+		border-color: $primary;
+		box-shadow: $input-btn-focus-box-shadow;
+	}
+}

data/assets/stylesheets/tabler/forms/_custom-imagecheck.scss

@@ -0,0 +1,85 @@
+.imagecheck {
+	margin: 0;
+	position: relative;
+	cursor: pointer;
+}
+
+.imagecheck-input {
+	position: absolute;
+	z-index: -1;
+	opacity: 0;
+}
+
+.imagecheck-figure {
+	border: 1px solid $border-color;
+	border-radius: 3px;
+	margin: 0;
+	position: relative;
+
+	.imagecheck-input:focus ~ & {
+		border-color: $primary;
+		box-shadow: $input-btn-focus-box-shadow;
+	}
+
+	.imagecheck-input:checked ~ & {
+		border-color: $border-color-dark;
+	}
+
+	&:before {
+		content: '';
+		position: absolute;
+		top: .25rem;
+		left: .25rem;
+		display: block;
+		width: 1rem;
+		height: 1rem;
+		pointer-events: none;
+		user-select: none;
+		background: $primary $custom-checkbox-indicator-icon-checked no-repeat center center/50% 50%;
+		color: #fff;
+		z-index: 1;
+		border-radius: 3px;
+		opacity: 0;
+		transition: .3s opacity;
+
+		.imagecheck-input:checked ~ & {
+			opacity: 1;
+		}
+	}
+}
+
+.imagecheck-image {
+	max-width: 100%;
+	opacity: .64;
+	transition: .3s opacity;
+
+	&:first-child {
+		border-top-left-radius: 2px;
+		border-top-right-radius: 2px;
+	}
+
+	&:last-child {
+		border-bottom-left-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
+
+	.imagecheck:hover &,
+	.imagecheck-input:focus ~ .imagecheck-figure &,
+	.imagecheck-input:checked ~ .imagecheck-figure & {
+		opacity: 1;
+	}
+}
+
+.imagecheck-caption {
+	text-align: center;
+	padding: .25rem .25rem;
+	color: $text-muted;
+	font-size: $font-size-sm;
+	transition: .3s color;
+
+	.imagecheck:hover &,
+	.imagecheck-input:focus ~ .imagecheck-figure &,
+	.imagecheck-input:checked ~ .imagecheck-figure & {
+		color: $body-color;
+	}
+}

data/assets/stylesheets/tabler/forms/_custom-range.scss

@@ -0,0 +1,140 @@
+$custom-range-slider-width: 240px;
+$custom-range-slider-height: 2px;
+$custom-range-background-slider: lighten($input-border-color, 5%);
+$custom-range-background-filled-slider: $primary;
+$custom-range-thumb-width: 14px;
+$custom-range-thumb-height: 14px;
+$custom-range-thumb-radius: 50px;
+$custom-range-thumb-background: #fff;
+$custom-range-thumb-border: 1px solid darken($input-border-color, 5%);
+
+@function custom-range-long-shadow($color) {
+	$size: (-($custom-range-thumb-height - $custom-range-slider-height) / 2 );
+	$val: 1px 0 0 $size $color;
+	$s: $custom-range-slider-width / 1px;
+
+	@for $i from 6 through $s {
+		$val: #{$val}, #{$i}px 0 0 $size #{$color};
+	}
+
+	@return $val;
+}
+
+.custom-range {
+	align-items: center;
+	appearance: none;
+	background: none;
+	cursor: pointer;
+	display: flex;
+	height: 100%;
+	min-height: $input-height;
+	overflow: hidden;
+	padding: 0;
+	border: 0;
+
+	&:focus {
+		box-shadow: none;
+		outline: none;
+
+		&::-webkit-slider-thumb {
+			border-color: $primary;
+			background-color: $primary;
+		}
+
+		&::-moz-range-thumb {
+			border-color: $primary;
+			background-color: $primary;
+		}
+
+		&::-ms-thumb {
+			border-color: $primary;
+			background-color: $primary;
+		}
+	}
+
+	&::-moz-focus-outer {
+		border: 0;
+	}
+
+	&::-webkit-slider-runnable-track {
+		background: $custom-range-background-filled-slider;
+		content: '';
+		height: $custom-range-slider-height;
+		pointer-events: none;
+	}
+
+	&::-webkit-slider-thumb {
+		width: $custom-range-thumb-width;
+		height: $custom-range-thumb-height;
+
+		appearance: none;
+		background: $custom-range-thumb-background;
+		border-radius: $custom-range-thumb-radius;
+		box-shadow: custom-range-long-shadow($custom-range-background-slider);
+		margin-top: (-($custom-range-thumb-height - $custom-range-slider-height) / 2 );
+		border: $custom-range-thumb-border;
+		transition: .3s border-color, .3s background-color;
+	}
+
+
+	&::-moz-range-track {
+		width: $custom-range-slider-width;
+		height: $custom-range-slider-height;
+		background: $custom-range-background-slider;
+	}
+
+	&::-moz-range-thumb {
+		width: $custom-range-thumb-width;
+		height: $custom-range-thumb-height;
+
+		background: $custom-range-thumb-background;
+		border-radius: $custom-range-thumb-radius;
+		border: $custom-range-thumb-border;
+		position: relative;
+		transition: .3s border-color, .3s background-color;
+	}
+
+	&::-moz-range-progress {
+		height: $custom-range-slider-height;
+		background: $custom-range-background-filled-slider;
+		border: 0;
+		margin-top: 0;
+	}
+
+	&::-ms-track {
+		background: transparent;
+		border: 0;
+		border-color: transparent;
+		border-radius: 0;
+		border-width: 0;
+		color: transparent;
+		height: $custom-range-slider-height;
+		margin-top: 10px;
+		width: $custom-range-slider-width;
+	}
+
+	&::-ms-thumb {
+		width: $custom-range-slider-width;
+		height: $custom-range-slider-height;
+
+		background: $custom-range-thumb-background;
+		border-radius: $custom-range-thumb-radius;
+		border: $custom-range-thumb-border;
+
+		transition: .3s border-color, .3s background-color;
+	}
+
+	&::-ms-fill-lower {
+		background: $custom-range-background-filled-slider;
+		border-radius: 0;
+	}
+
+	&::-ms-fill-upper {
+		background: $custom-range-background-slider;
+		border-radius: 0;
+	}
+
+	&::-ms-tooltip {
+		display: none;
+	}
+}

data/assets/stylesheets/tabler/forms/_custom-selectgroup.scss

@@ -0,0 +1,80 @@
+.selectgroup {
+	display: inline-flex;
+}
+
+.selectgroup-item {
+	flex-grow: 1;
+	position: relative;
+
+	& + & {
+		margin-left: -1px;
+	}
+
+	&:not(:first-child) .selectgroup-button {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	&:not(:last-child) .selectgroup-button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.selectgroup-input {
+	opacity: 0;
+	position: absolute;
+	z-index: -1;
+	top: 0;
+	left: 0;
+}
+
+.selectgroup-button {
+	display: block;
+	border: 1px solid $input-border-color;
+	text-align: center;
+	padding: $input-btn-padding-y 1rem;
+	position: relative;
+	cursor: pointer;
+	border-radius: 3px;
+	color: $text-muted;
+	user-select: none;
+	font-size: $font-size-base;
+	line-height: $input-btn-line-height;
+	min-width: $input-height;
+}
+
+.selectgroup-button-icon {
+	padding-left: .5rem;
+	padding-right: .5rem;
+	font-size: 1.125rem;
+	line-height: 1.125rem;
+}
+
+.selectgroup-input:checked + .selectgroup-button {
+	border-color: $primary;
+	z-index: 1;
+	color: $primary;
+	background: mix(#fff, $primary, 90%)
+}
+
+.selectgroup-input:focus + .selectgroup-button {
+	border-color: $primary;
+	z-index: 2;
+	color: $primary;
+	box-shadow: $input-btn-focus-box-shadow;
+}
+
+.selectgroup-pills {
+	flex-wrap: wrap;
+	align-items: flex-start;
+
+	.selectgroup-item {
+		margin-right: .5rem;
+		flex-grow: 0;
+	}
+
+	.selectgroup-button {
+		border-radius: 50px !important;
+	}
+}

data/assets/stylesheets/tabler/forms/_custom-switch.scss

@@ -0,0 +1,74 @@
+$custom-switch-width: 2.25rem;
+$custom-switch-height: 1.25rem;
+$custom-switch-padding: 1px;
+
+.custom-switch {
+	user-select: none;
+	cursor: default;
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+}
+
+.custom-switch-input {
+	position: absolute;
+	z-index: -1;
+	opacity: 0;
+}
+
+.custom-switches-stacked {
+	display: flex;
+	flex-direction: column;
+
+	.custom-switch {
+		margin-bottom: .5rem;
+	}
+}
+
+.custom-switch-indicator {
+	display: inline-block;
+	height: $custom-switch-height;
+	width: $custom-switch-width;
+	background: $gray-200;
+	border-radius: 50px;
+	position: relative;
+	vertical-align: bottom;
+	border: 1px solid $border-color;
+	transition: .3s border-color, .3s background-color;
+
+	&:before {
+		content: '';
+		position: absolute;
+		height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+		width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+		top: $custom-switch-padding;
+		left: $custom-switch-padding;
+		background: #fff;
+		border-radius: 50%;
+		transition: .3s left;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+	}
+
+	.custom-switch-input:checked ~ & {
+		background: $primary;
+
+		&:before {
+			left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding})
+		}
+	}
+
+	.custom-switch-input:focus ~ & {
+		box-shadow: $input-btn-focus-box-shadow;
+		border-color: $primary;
+	}
+}
+
+.custom-switch-description {
+	margin-left: .5rem;
+	color: $text-muted-dark;
+	transition: .3s color;
+
+	.custom-switch-input:checked ~ & {
+		color: $body-color;
+	}
+}

data/assets/stylesheets/tabler/plugins/charts-c3/plugin.css

@@ -0,0 +1,227 @@
+/*-- Chart --*/
+.c3 svg {
+  font: 10px sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+
+.c3 path,
+.c3 line {
+  fill: none;
+  stroke: rgba(0, 40, 100, 0.12);
+}
+
+.c3 text {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: px2rem(12px);
+}
+
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
+.c3-chart-arc path {
+  stroke: #fff;
+}
+
+.c3-chart-arc text {
+  fill: #fff;
+  font-size: 13px;
+}
+
+/*-- Axis --*/
+/*-- Grid --*/
+.c3-grid line {
+  stroke: #f0f0f0;
+}
+
+.c3-grid text {
+  fill: #aaa;
+}
+
+.c3-xgrid,
+.c3-ygrid {
+  stroke: #e6e6e6;
+  stroke-dasharray: 2 4;
+}
+
+/*-- Text on Chart --*/
+.c3-text {
+  font-size: 12px;
+}
+
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em;
+}
+
+/*-- Line --*/
+.c3-line {
+  stroke-width: 2px;
+}
+
+/*-- Point --*/
+.c3-circle._expanded_ {
+  stroke-width: 2px;
+  stroke: white;
+}
+
+.c3-selected-circle {
+  fill: white;
+  stroke-width: 1.5px;
+}
+
+/*-- Bar --*/
+.c3-bar {
+  stroke-width: 0;
+}
+
+.c3-bar._expanded_ {
+  fill-opacity: 1;
+  fill-opacity: 0.75;
+}
+
+/*-- Focus --*/
+.c3-target.c3-focused {
+  opacity: 1;
+}
+
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+  stroke-width: 2px;
+}
+
+.c3-target.c3-defocused {
+  opacity: 0.3 !important;
+}
+
+/*-- Region --*/
+.c3-region {
+  fill: steelblue;
+  fill-opacity: .1;
+}
+
+/*-- Brush --*/
+.c3-brush .extent {
+  fill-opacity: .1;
+}
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.c3-legend-item text {
+  fill: #545454;
+  font-size: 14px;
+}
+
+.c3-legend-item-hidden {
+  opacity: 0.15;
+}
+
+.c3-legend-background {
+  fill: transparent;
+  stroke: lightgray;
+  stroke-width: 0;
+}
+
+/*-- Title --*/
+.c3-title {
+  font: 14px sans-serif;
+}
+
+/*-- Tooltip --*/
+.c3-tooltip-container {
+  z-index: 10;
+}
+
+.c3-tooltip {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 700;
+  color: #fff;
+  border-radius: 3px;
+  background: #212529;
+  white-space: nowrap;
+}
+
+.c3-tooltip th {
+  padding: 6px 6px;
+  text-align: left;
+}
+
+.c3-tooltip td {
+  padding: 4px 6px;
+  font-weight: 400;
+}
+
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  border-radius: 50%;
+  vertical-align: baseline;
+}
+
+.c3-tooltip td.value {
+  text-align: right;
+}
+
+/*-- Area --*/
+.c3-area {
+  stroke-width: 0;
+  opacity: 0.1;
+}
+
+.c3-target-filled .c3-area {
+  opacity: 1 !important;
+}
+
+/*-- Arc --*/
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em;
+}
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+  /*  font-size: 28px !important;*/
+}
+
+.c3-chart-arc.c3-target g path {
+  opacity: 1;
+}
+
+.c3-chart-arc.c3-target.c3-focused g path {
+  opacity: 1;
+}
+
+.c3-axis {
+  fill: #9aa0ac;
+}