tabler_ui_rails 0.1.0 → 0.2.0

data/assets/stylesheets/dashboard/_aside.scss

@@ -0,0 +1,36 @@
+.aside {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: $aside-width;
+	background: #ffffff;
+	border-left: 1px solid $border-color;
+	display: flex;
+	flex-direction: column;
+	z-index: 100;
+	visibility: hidden;
+	box-shadow: 0 0 5px 2px rgba(#000, .05);
+
+	body.aside-opened & {
+		@media (min-width: 1600px) {
+			visibility: visible;
+		}
+	}
+}
+
+.aside-body {
+	padding: 1.5rem;
+	flex: 1 1 auto;
+	overflow: auto;
+}
+
+.aside-footer {
+	padding: 1rem 1.5rem;
+	border-top: 1px solid $border-color;
+}
+
+.aside-header {
+	padding: 1rem 1.5rem;
+	border-bottom: 1px solid $border-color;
+}

data/assets/stylesheets/dashboard/_avatar.scss

@@ -0,0 +1,101 @@
+.avatar {
+	width: 2rem;
+	height: 2rem;
+	line-height: 2rem;
+	border-radius: 50%;
+	display: inline-block;
+	background: $gray-400 no-repeat center/cover;
+	position: relative;
+	text-align: center;
+	color: $gray-600;
+	font-weight: 600;
+	vertical-align: bottom;
+	font-size: .875rem;
+	user-select: none;
+
+	i {
+		font-size: 125%;
+		vertical-align: sub;
+	}
+}
+
+.avatar-status {
+	position: absolute;
+	right: -2px;
+	bottom: -2px;
+	width: .75rem;
+	height: .75rem;
+	border: 2px solid #fff;
+	background: $gray-600;
+	border-radius: 50%;
+}
+
+.avatar-sm {
+	width: 1.5rem;
+	height: 1.5rem;
+	line-height: 1.5rem;
+	font-size: .75rem;
+}
+
+.avatar-md {
+	width: 2.5rem;
+	height: 2.5rem;
+	line-height: 2.5rem;
+	font-size: 1rem;
+}
+
+.avatar-lg {
+	width: 3rem;
+	height: 3rem;
+	line-height: 3rem;
+	font-size: 1.25rem;
+}
+
+.avatar-xl {
+	width: 4rem;
+	height: 4rem;
+	line-height: 4rem;
+	font-size: 1.75rem;
+}
+
+.avatar-xxl {
+	width: 5rem;
+	height: 5rem;
+	line-height: 5rem;
+	font-size: 2rem;
+}
+
+.avatar-placeholder {
+	background: $gray-400 url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="134" height="134" viewBox="0 0 134 134"><path fill="' + $gray-600 + '" d="M65.92 66.34h2.16c14.802.42 30.928 6.062 29.283 20.35l-1.618 13.32c-.844 6.815-5.208 7.828-13.972 7.866H52.23c-8.764-.038-13.13-1.05-13.973-7.865l-1.62-13.32C34.994 72.4 51.12 66.76 65.92 66.34zM49.432 43.934c0-9.82 7.99-17.81 17.807-17.81 9.82 0 17.81 7.99 17.81 17.81 0 9.82-7.99 17.807-17.81 17.807-9.82 0-17.808-7.987-17.808-17.806z"/></svg>') no-repeat center/80%;
+}
+
+.avatar-list {
+	margin: 0 0 -.5rem;
+	padding: 0;
+	font-size: 0;
+
+	.avatar {
+		margin-bottom: .5rem;
+
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
+	}
+}
+
+.avatar-list-stacked {
+	.avatar {
+		margin-right: -.8em !important;
+	}
+
+	.avatar {
+		box-shadow: 0 0 0 2px #fff;
+	}
+}
+
+@each $vendor, $color in $colors {
+	.avatar-#{$vendor} {
+		background-color: mix($color, #fff, 30%);
+		color: $color;
+	}
+}

data/assets/stylesheets/dashboard/_badge.scss

@@ -0,0 +1,8 @@
+.badge {
+	color: #fff;
+}
+
+.badge-default {
+	background: $gray-200;
+	color: $gray-600;
+}

data/assets/stylesheets/dashboard/_breadcrumb.scss

@@ -0,0 +1,18 @@
+.page-breadcrumb {
+	background: none;
+	padding: 0;
+	margin: 1rem 0 0;
+	font-size: px2rem(14px);
+
+	@include media-breakpoint-up(md) {
+		margin: -.5rem 0 0;
+	}
+
+	.breadcrumb-item {
+		color: $text-muted;
+
+		&.active {
+			color: $text-muted-dark;
+		}
+	}
+}

data/assets/stylesheets/dashboard/_browser.scss

@@ -0,0 +1,19 @@
+$browsers: (
+	'android-browser', 'aol-explorer', 'blackberry', 'camino', 'chrome', 'chromium', 'dolphin', 'edge',
+	'firefox', 'ie', 'maxthon', 'mozilla', 'netscape', 'opera', 'safari', 'sleipnir', 'uc-browser', 'vivaldi'
+);
+
+.browser {
+	width: 1.25rem;
+	height: 1.25rem;
+	display: inline-block;
+	background: no-repeat center/100% 100%;
+	vertical-align: bottom;
+	font-style: normal;
+}
+
+@each $browser in $browsers {
+	.browser-#{$browser} {
+		background-image: asset-url('browsers/' + $browser + '.svg');
+	}
+}

data/assets/stylesheets/dashboard/_button.scss

@@ -0,0 +1,118 @@
+.btn {
+	cursor: pointer;
+	font-weight: 600;
+	letter-spacing: .03em;
+	font-size: px2rem(13px);
+	min-width: px2rem(38px);
+
+	i {
+		font-size: 1rem;
+		vertical-align: -2px;
+	}
+}
+
+.btn-icon {
+	padding-left: .5rem;
+	padding-right: .5rem;
+	text-align: center;
+}
+
+.btn-secondary {
+	@include button-variant(#fff, $input-border-color, #f6f6f6);
+	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.btn-pill {
+	border-radius: 10rem;
+	padding-left: 1.5em;
+	padding-right: 1.5em;
+}
+
+.btn-square {
+	border-radius: 0;
+}
+
+@each $vendor, $color in $social-colors {
+	.btn-#{$vendor} {
+		@include button-variant($color, $color);
+	}
+}
+
+@each $vendor, $color in $colors {
+	.btn-#{$vendor} {
+		@include button-variant($color, $color);
+	}
+}
+
+.btn-option {
+	background: transparent;
+	color: $text-muted;
+
+	&:hover {
+		color: $text-muted-dark;
+	}
+
+	&:focus {
+		box-shadow: none;
+		color: $text-muted-dark;
+	}
+}
+
+.btn-sm {
+	font-size: px2rem(12px);
+	min-width: px2rem(26px);
+}
+
+.btn-lg {
+	font-size: px2rem(16px);
+	min-width: px2rem(44px);
+	font-weight: 400;
+}
+
+.btn-list {
+	margin-bottom: -.5rem;
+	font-size: 0;
+
+	>.btn,
+	>.dropdown {
+		margin-bottom: .5rem;
+
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
+	}
+}
+
+.btn-loading {
+	color: transparent !important;
+	pointer-events: none;
+	position: relative;
+
+	&:after {
+		content: '';
+		animation: loader 500ms infinite linear;
+		border: 2px solid #fff;
+		border-radius: 50%;
+		border-right-color: transparent !important;
+		border-top-color: transparent !important;
+		display: block;
+		height: 1.4em;
+		width: 1.4em;
+		position: absolute;
+		left: calc(50% - (1.4em / 2));
+		top: calc(50% - (1.4em / 2));
+		transform-origin: center;
+		position: absolute !important;
+	}
+
+	&.btn-sm:after{
+		height: 1em;
+		width: 1em;
+		left: calc(50% - (1em / 2));
+		top: calc(50% - (1em / 2));
+	}
+
+	&.btn-secondary:after {
+		border-color: $yiq-text-dark;
+	}
+}

data/assets/stylesheets/dashboard/_cards.scss

@@ -0,0 +1,416 @@
+.card {
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	position: relative;
+	margin-bottom: 1.5rem;
+	width: 100%;
+
+	.card {
+		box-shadow: none;
+	}
+
+	@media print {
+		box-shadow: none;
+		border: none;
+	}
+}
+
+.card-body {
+	flex: 1 1 auto;
+	margin: 0;
+	padding: $card-spacer-y $card-spacer-x;
+	position: relative;
+
+	& + & {
+		border-top: 1px solid $border-color;
+	}
+
+	> :last-child {
+		margin-bottom: 0;
+	}
+
+	@media print {
+		padding: 0;
+	}
+}
+
+.card-body-scrollable {
+	overflow: auto;
+}
+
+.card-footer,
+.card-bottom {
+	padding: 1rem $card-spacer-x;
+	background: none;
+}
+
+.card-footer {
+	border-top: 1px solid $border-color;
+	color: $text-muted-dark;
+}
+
+.card-header {
+	background: none;
+	padding: .5rem $card-spacer-x;
+	display: flex;
+	min-height: 3.5rem;
+	align-items: center;
+
+	.card-title {
+		margin-bottom: 0;
+	}
+
+	&.border-0 + .card-body {
+		padding-top: 0;
+	}
+
+	@media print {
+		display: none;
+	}
+}
+
+.card-img-top {
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+}
+
+.card-img-overlay {
+	background-color: rgba(0, 0, 0, .4);
+	display: flex;
+	flex-direction: column;
+}
+
+.card-title {
+	font-size: $h4-font-size;
+	line-height: 1.2;
+	font-weight: 400;
+	margin-bottom: 1.5rem;
+	//flex: 1;
+
+	a {
+		color: inherit;
+	}
+
+	&:only-child {
+		margin-bottom: 0;
+	}
+}
+
+.card-title small,
+.card-subtitle {
+	color: $text-muted;
+	font-size: px2rem(14px);
+	display: block;
+	margin: -.75rem 0 1rem;
+	line-height: 1.1;
+	font-weight: 400;
+}
+
+.card-table {
+	margin-bottom: 0;
+
+	tr {
+		&:first-child {
+			td,
+			th {
+				border-top: 0;
+			}
+		}
+
+		td,
+		th {
+			&:first-child {
+				padding-left: $card-spacer-x;
+			}
+
+			&:last-child {
+				padding-right: $card-spacer-x;
+			}
+		}
+	}
+
+	.card-body + & {
+		border-top: 1px solid $border-color;
+	}
+}
+
+.card-profile {
+	.card-header {
+		height: 9rem;
+		background-size: cover;
+	}
+}
+
+.card-profile-img {
+	max-width: 6rem;
+	margin-top: -5rem;
+	margin-bottom: 1rem;
+	border: 3px solid #fff;
+	border-radius: 100%;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.card-link {
+	+ .card-link {
+		margin-left: 1rem;
+	}
+}
+
+.card-list-group {
+	.card-body + & {
+		border-top: 1px solid $border-color;
+	}
+
+	.list-group-item {
+		border-right: 0;
+		border-left: 0;
+		border-radius: 0;
+
+		padding-left: $card-spacer-x;
+		padding-right: $card-spacer-x;
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		&:first-child {
+			border-top: 0;
+		}
+	}
+}
+
+.card-header-tabs {
+	margin: -1.25rem 0;
+	border-bottom: 0;
+	line-height: 2rem;
+
+	.nav-item {
+		margin-bottom: 1px;
+	}
+}
+
+.card-header-pills {
+	margin: -.75rem 0;
+}
+
+.card-aside {
+	flex-direction: row;
+}
+
+.card-aside-column {
+	min-width: 5rem;
+	width: 30%;
+	flex: 0 0 30%;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	background: no-repeat center/cover;
+}
+
+.card-value {
+	font-size: 2.5rem;
+	line-height: 3.4rem;
+	height: 3.4rem;
+	display: flex;
+	align-items: center;
+	font-weight: 400;
+
+	i {
+		vertical-align: middle;
+	}
+}
+
+.card-text {
+}
+
+.card-chart-bg {
+	height: 4rem;
+	margin-top: -1rem;
+	position: relative;
+	z-index: 1;
+	overflow: hidden;
+}
+
+.card-options {
+	margin-left: auto;
+	display: flex;
+	order: 100;
+	margin-right: -.5rem;
+	color: $text-muted;
+	align-self: center;
+
+	a {
+		margin-left: .5rem;
+		color: $text-muted;
+		display: inline-block;
+		min-width: 1rem;
+
+		&:hover {
+			text-decoration: none;
+			color: $text-muted-dark;
+		}
+
+		i {
+			font-size: 1rem;
+			vertical-align: middle;
+		}
+	}
+
+	.dropdown-toggle {
+		&:after {
+			display: none;
+		}
+	}
+}
+
+/*
+Card options
+ */
+.card-collapsed {
+	>:not(.card-header):not(.card-status) {
+		display: none;
+	}
+}
+
+.card-options-collapse {
+	i:before {
+		.card-collapsed & {
+			content: '\e92d';
+		}
+	}
+}
+
+.card-options-fullscreen {
+	i:before {
+		.card-fullscreen & {
+			content: '\e992';
+		}
+	}
+}
+
+.card-options-remove {
+	.card-fullscreen & {
+		display: none;
+	}
+}
+
+/*
+Card maps
+ */
+.card-map {
+	height: 15rem;
+	background: $gray-200;
+}
+
+.card-map-placeholder {
+	background: no-repeat center;
+}
+
+/**
+Card tabs
+ */
+.card-tabs {
+	display: flex;
+}
+
+.card-tabs-bottom {
+	.card-tabs-item {
+		border: 0;
+		border-top: 1px solid $border-color;
+
+		&.active {
+			border-top-color: #fff;
+		}
+	}
+}
+
+.card-tabs-item {
+	flex: 1 1 auto;
+	display: block;
+	padding: 1rem $card-spacer-x;
+	border-bottom: 1px solid $border-color;
+	color: inherit;
+	overflow: hidden;
+
+	@at-root a#{&} {
+		background: #fafbfc;
+
+		&:hover {
+			text-decoration: none;
+			color: inherit;
+		}
+
+		&:focus {
+			z-index: 1;
+		}
+
+		&.active {
+			background: #fff;
+			border-bottom-color: #fff;
+		}
+	}
+
+	& + & {
+		border-left: 1px solid $border-color;
+	}
+}
+
+
+/**
+Card status
+ */
+.card-status {
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	right: -1px;
+	height: 3px;
+	border-radius: $card-border-radius $card-border-radius 0 0;
+	background: $border-color;
+}
+
+.card-status-left {
+	right: auto;
+	bottom: 0;
+	height: auto;
+	width: 3px;
+	border-radius: $card-border-radius 0 0 $card-border-radius;
+}
+
+/**
+Card icon
+ */
+.card-icon {
+	width: 3rem;
+	font-size: 2.5rem;
+	line-height: 3rem;
+	text-align: center;
+}
+
+/**
+Card fullscreen
+ */
+.card-fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	margin: 0;
+}
+
+/**
+Card alert
+ */
+.card-alert {
+	border-radius: 0;
+	margin: -1px -1px 0;
+}
+
+.card-category {
+	font-size: px2rem(14px);
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 600;
+	letter-spacing: .05em;
+	margin: 0 0 .5rem;
+}