tabler_ui_rails 0.1.0 → 0.2.0

data/assets/stylesheets/dashboard/_link.scss

@@ -0,0 +1,25 @@
+.link-overlay {
+	position: relative;
+
+	&:hover {
+		.link-overlay-bg {
+			opacity: 1;
+		}
+	}
+}
+
+.link-overlay-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba($blue, .8);
+	display: flex;
+	color: #fff;
+	align-items: center;
+	justify-content: center;
+	font-size: px2rem(20px);
+	opacity: 0;
+	transition: .3s opacity;
+}

data/assets/stylesheets/dashboard/_list-group.scss

@@ -0,0 +1,21 @@
+.list-group-item {
+	&.active {
+		.icon {
+			color: inherit !important;
+		}
+	}
+}
+
+.list-group-transparent {
+	.list-group-item {
+		background: none;
+		border: 0;
+		padding: .5rem 1rem;
+		border-radius: 3px;
+
+		&.active {
+			background: rgba($primary, .06);
+			font-weight: 600;
+		}
+	}
+}

data/assets/stylesheets/dashboard/_list.scss

@@ -0,0 +1,34 @@
+.list-inline-dots {
+	.list-inline-item {
+
+		+ .list-inline-item {
+			&:before {
+				content: '· ';
+				margin-left: -2px;
+				margin-right: 3px;
+			}
+		}
+	}
+}
+
+
+.list-separated {
+
+}
+
+.list-separated-item {
+	padding: 1rem 0;
+
+	&:first-child {
+		padding-top: 0;
+	}
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+
+	& + & {
+		border-top: 1px solid $border-color;
+	}
+}
+

data/assets/stylesheets/dashboard/_maps.scss

@@ -0,0 +1,52 @@
+.map,
+.chart {
+	position: relative;
+	padding-top: (9/16)*100%;
+}
+
+.map-square,
+.chart-square {
+	padding-top: 100%;
+}
+
+.map-content,
+.chart-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.map-header {
+	margin-top: -1.5rem;
+	margin-bottom: 1.5rem;
+	height: 15rem;
+	position: relative;
+
+	//todo
+	margin-bottom: -1.5rem;
+
+	&:before {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 10rem;
+		background: linear-gradient(to bottom, rgba($body-bg, 0) 5%, $body-bg 95%);
+		pointer-events: none;
+	}
+}
+
+.map-header-layer {
+	height: 100%;
+}
+
+.map-static {
+	height: 120px;
+	width: 100%;
+	max-width: 640px;
+	background-position: center center;
+	background-size: 640px 120px;
+}

data/assets/stylesheets/dashboard/_media.scss

@@ -0,0 +1,13 @@
+.media-icon {
+	width: 2rem;
+	height: 2rem;
+	line-height: 2rem;
+	text-align: center;
+	border-radius: 100%;
+}
+
+.media-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}

data/assets/stylesheets/dashboard/_nav.scss

@@ -0,0 +1,107 @@
+.nav-link,
+.nav-item {
+	padding: 0 .75rem;
+	min-width: 2rem;
+	transition: .3s color;
+	user-select: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+
+	.badge {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: .2rem .25rem;
+		min-width: 1rem
+	}
+}
+
+.nav-tabs {
+	user-select: none;
+	color: $text-muted;
+	margin: 0 -.75rem;
+
+	.nav-link {
+		border: 0;
+		color: inherit;
+		border-bottom: 1px solid transparent;
+		margin-bottom: -1px;
+		transition: .3s border-color;
+		font-weight: 400;
+		padding: 1rem 0;
+
+		&:hover:not(.disabled) {
+			border-color: $text-muted-dark;
+			color: $text-muted-dark;
+		}
+
+		&.active {
+			border-color: $blue;
+			color: $blue;
+			background: transparent;
+		}
+
+		&.disabled {
+			opacity: .4;
+			cursor: default;
+			pointer-events: none;
+		}
+	}
+
+	.nav-item {
+		margin-bottom: 0;
+		position: relative;
+
+		i {
+			margin-right: .25rem;
+			line-height: 1;
+			font-size: px2rem(14px);
+			width: px2rem(14px);
+			vertical-align: baseline;
+			display: inline-block;
+		}
+
+		&:hover {
+			.nav-submenu {
+				display: block;
+			}
+		}
+	}
+
+	.nav-submenu {
+		display: none;
+		position: absolute;
+		background: #fff;
+		border: 1px solid $border-color;
+		border-top: none;
+		z-index: 10;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+		min-width: 10rem;
+		border-radius: 0 0 3px 3px;
+
+		.nav-item {
+			display: block;
+			padding: .5rem 1rem;
+			color: $text-muted;
+			margin: 0 !important;
+			cursor: pointer;
+			transition: .3s background;
+
+			&.active {
+				color: $link-color;
+			}
+
+			&:hover {
+				color: $text-muted-dark;
+				text-decoration: none;
+				background: rgba(0, 0, 0, .024);
+			}
+		}
+	}
+}
+
+.nav-link {
+	//display: block;
+	//padding: 0.25rem 0.75rem;
+}

data/assets/stylesheets/dashboard/_pagination.scss

@@ -0,0 +1,29 @@
+.pagination-simple {
+	.page-item {
+		.page-link {
+			background: none;
+			border: none;
+		}
+
+		&.active .page-link {
+			color: $pagination-color;
+			font-weight: 700;
+		}
+	}
+}
+
+.pagination-pager {
+	.page-prev {
+		margin-right: auto;
+	}
+
+	.page-next {
+		margin-left: auto;
+	}
+}
+
+.page-total-text {
+	margin-right: 1rem;
+	align-self: center;
+	color: $text-muted-dark;
+}

data/assets/stylesheets/dashboard/_payments.scss

@@ -0,0 +1,19 @@
+$payment-icons: ('2checkout-dark', '2checkout', 'alipay-dark', 'alipay', 'amazon-dark', 'amazon', 'americanexpress-dark', 'americanexpress', 'applepay-dark', 'applepay', 'bancontact-dark', 'bancontact', 'bitcoin-dark', 'bitcoin', 'bitpay-dark', 'bitpay', 'cirrus-dark', 'cirrus', 'clickandbuy-dark', 'clickandbuy', 'coinkite-dark', 'coinkite', 'dinersclub-dark', 'dinersclub', 'directdebit-dark', 'directdebit', 'discover-dark', 'discover', 'dwolla-dark', 'dwolla', 'ebay-dark', 'ebay', 'eway-dark', 'eway', 'giropay-dark', 'giropay', 'googlewallet-dark', 'googlewallet', 'ingenico-dark', 'ingenico', 'jcb-dark', 'jcb', 'klarna-dark', 'klarna', 'laser-dark', 'laser', 'maestro-dark', 'maestro', 'mastercard-dark', 'mastercard', 'monero-dark', 'monero', 'neteller-dark', 'neteller', 'ogone-dark', 'ogone', 'okpay-dark', 'okpay', 'paybox-dark', 'paybox', 'paymill-dark', 'paymill', 'payone-dark', 'payone', 'payoneer-dark', 'payoneer', 'paypal-dark', 'paypal', 'paysafecard-dark', 'paysafecard', 'payu-dark', 'payu', 'payza-dark', 'payza', 'ripple-dark', 'ripple', 'sage-dark', 'sage', 'sepa-dark', 'sepa', 'shopify-dark', 'shopify', 'skrill-dark', 'skrill', 'solo-dark', 'solo', 'square-dark', 'square', 'stripe-dark', 'stripe', 'switch-dark', 'switch', 'ukash-dark', 'ukash', 'unionpay-dark', 'unionpay', 'verifone-dark', 'verifone', 'verisign-dark', 'verisign', 'visa-dark', 'visa', 'webmoney-dark', 'webmoney', 'westernunion-dark', 'westernunion', 'worldpay-dark', 'worldpay');
+
+.payment {
+	width: 2.5rem;
+	height: 1.5rem;
+	display: inline-block;
+	background: no-repeat center/100% 100%;
+	vertical-align: bottom;
+	font-style: normal;
+	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
+	border-radius: 2px;
+
+}
+
+@each $payment in $payment-icons {
+	.payment-#{$payment} {
+		background-image: asset-url('payments/' + $payment + '.svg');
+	}
+}

data/assets/stylesheets/dashboard/_popover.scss

@@ -0,0 +1,12 @@
+.popover {
+	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
+
+
+	&.bs-popover-top {
+		margin-bottom: $popover-arrow-height + .125rem;
+	}
+
+	.arrow {
+		margin-left: calc(.25rem + 2px);
+	}
+}

data/assets/stylesheets/dashboard/_product.scss

@@ -0,0 +1,7 @@
+.product-price {
+	font-size: 1rem;
+
+	strong {
+		font-size: 1.5rem;
+	}
+}

data/assets/stylesheets/dashboard/_progress.scss

@@ -0,0 +1,140 @@
+@keyframes indeterminate {
+	0% {
+		left: -35%;
+		right: 100%
+	}
+
+	100%, 60% {
+		left: 100%;
+		right: -90%
+	}
+}
+
+@keyframes indeterminate-short {
+	0% {
+		left: -200%;
+		right: 100%
+	}
+
+	100%, 60% {
+		left: 107%;
+		right: -8%
+	}
+}
+
+.progress {
+	position: relative;
+}
+
+.progress-xs,
+.progress-xs .progress-bar {
+	height: .25rem;
+}
+
+.progress-sm,
+.progress-sm .progress-bar {
+	height: .5rem;
+}
+
+.progress-bar-indeterminate {
+	&:after,
+	&:before {
+		content: '';
+		position: absolute;
+		background-color: inherit;
+		left: 0;
+		will-change: left, right;
+		top: 0;
+		bottom: 0;
+	}
+
+	&:before {
+		animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
+	}
+
+	&:after {
+		animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
+		animation-delay: 1.15s;
+	}
+}
+
+
+
+@keyframes loader {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+
+/**
+Dimmer
+*/
+.dimmer {
+	position: relative;
+
+	.loader {
+		display: none;
+		margin: 0 auto;
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		transform: translateY(-50%);
+	}
+
+	&.active {
+		.loader {
+			display: block;
+		}
+
+		.dimmer-content {
+			opacity: .04;
+			pointer-events: none;
+		}
+	}
+}
+
+/**
+Loader
+*/
+$loader-size: 2.5rem;
+.loader {
+	display: block;
+	position: relative;
+	height: $loader-size;
+	width: $loader-size;
+	color: $blue;
+
+	&:before,
+	&:after {
+		width: $loader-size;
+		height: $loader-size;
+		margin: (- $loader-size / 2) 0 0 (- $loader-size / 2);
+		position: absolute;
+		content: '';
+		top: 50%;
+		left: 50%;
+	}
+
+	&:before {
+		border-radius: 50%;
+		border: 3px solid currentColor;
+		opacity: .15;
+	}
+
+	&:after {
+		animation: loader .6s linear;
+		animation-iteration-count: infinite;
+
+		border-radius: 50%;
+		border: 3px solid;
+		border-color: transparent;
+		border-top-color: currentColor;
+		box-shadow: 0 0 0 1px transparent;
+	}
+}