tabler_ui_rails 0.1.0 → 0.2.0

data/assets/stylesheets/dashboard/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/dashboard/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/dashboard/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/dashboard/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/dashboard/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/lib/tabler_ui_rails.rb

@@ -0,0 +1,5 @@
+require "tabler_ui_rails/version"
+require "tabler_ui_rails/engine"
+
+module TablerUiRails
+end

data/lib/tabler_ui_rails/engine.rb

@@ -0,0 +1,13 @@
+require 'autoprefixer-rails'
+
+module TablerUiRails
+  module Rails
+    class Engine < ::Rails::Engine
+      initializer 'tabler_ui_rails.assets' do |app|
+        %w(fonts images stylesheets javascripts).each do |sub|
+          app.config.assets.paths << root.join('assets', sub).to_s
+        end
+      end
+    end
+  end
+end