tabler_ui_rails 0.1.0 → 0.2.0

data/assets/stylesheets/dashboard/_syntax.scss

@@ -0,0 +1,78 @@
+.highlight {
+	.hll { background-color: #ffc; }
+	.c { color: #999; }
+	.k { color: #069; }
+	.o { color: #555; }
+	.cm { color: #999; }
+	.cp { color: #099; }
+	.c1 { color: #999; }
+	.cs { color: #999; }
+	.gd { background-color: #fcc; border: 1px solid #c00; }
+	.ge { font-style: italic; }
+	.gr { color: #f00; }
+	.gh { color: #030; }
+	.gi { background-color: #cfc; border: 1px solid #0c0; }
+	.go { color: #aaa; }
+	.gp { color: #009; }
+	.gu { color: #030; }
+	.gt { color: #9c6; }
+	.kc { color: #069; }
+	.kd { color: #069; }
+	.kn { color: #069; }
+	.kp { color: #069; }
+	.kr { color: #069; }
+	.kt { color: #078; }
+	.m { color: #f60; }
+	.s { color: #d44950; }
+	.na { color: #4f9fcf; }
+	.nb { color: #366; }
+	.nc { color: #0a8; }
+	.no { color: #360; }
+	.nd { color: #99f; }
+	.ni { color: #999; }
+	.ne { color: #c00; }
+	.nf { color: #c0f; }
+	.nl { color: #99f; }
+	.nn { color: #0cf; }
+	.nt { color: #2f6f9f; }
+	.nv { color: #033; }
+	.ow { color: #000; }
+	.w { color: #bbb; }
+	.mf { color: #f60; }
+	.mh { color: #f60; }
+	.mi { color: #f60; }
+	.mo { color: #f60; }
+	.sb { color: #c30; }
+	.sc { color: #c30; }
+	.sd { font-style: italic; color: #c30; }
+	.s2 { color: #c30; }
+	.se { color: #c30; }
+	.sh { color: #c30; }
+	.si { color: #a00; }
+	.sx { color: #c30; }
+	.sr { color: #3aa; }
+	.s1 { color: #c30; }
+	.ss { color: #fc3; }
+	.bp { color: #366; }
+	.vc { color: #033; }
+	.vg { color: #033; }
+	.vi { color: #033; }
+	.il { color: #f60; }
+
+	.css .o,
+	.css .o + .nt,
+	.css .nt + .nt { color: #999; }
+
+	.language-bash::before,
+	.language-sh::before {
+		color: #009;
+		content: "$ ";
+		user-select: none;
+	}
+
+	.language-powershell::before {
+		color: #009;
+		content: "PM> ";
+		user-select: none;
+	}
+}

data/assets/stylesheets/dashboard/_tables.scss

@@ -0,0 +1,135 @@
+.table {
+	thead {
+		//background: $table-accent-bg;
+
+		th {
+			border-top: 0;
+			border-bottom-width: 1px;
+			padding-top: .5rem;
+			padding-bottom: .5rem;
+		}
+	}
+
+	th {
+		color: $text-muted;
+		text-transform: uppercase;
+		font-size: $h6-font-size;
+		font-weight: 400;
+	}
+}
+
+.table-md {
+	th,
+	td {
+		padding: .5rem;
+	}
+}
+
+.table-vcenter {
+	td,
+	th {
+		vertical-align: middle;
+	}
+}
+
+.table-center {
+	td,
+	th {
+		text-align: center;
+	}
+}
+
+.table-striped {
+	tbody tr:nth-of-type(odd) {
+		background: transparent;
+	}
+
+	tbody tr:nth-of-type(even) {
+		background-color: $table-accent-bg;
+	}
+}
+
+.table-calendar {
+	margin: 0 0 .75rem;
+
+	td,
+	th {
+		border: 0;
+		text-align: center;
+		padding: 0 !important;
+		width: (100%/7);
+		line-height: 2.5rem;
+	}
+
+	td {
+		border-top: 0;
+	}
+}
+
+.table-calendar-link {
+	line-height: 2rem;
+	min-width: calc(2rem + 2px);
+	display: inline-block;
+	border-radius: 3px;
+	background: $gray-100;
+	color: $body-color;
+	font-weight: 600;
+	transition: .3s background, .3s color;
+	position: relative;
+
+	&:before {
+		content: '';
+		width: 4px;
+		height: 4px;
+		position: absolute;
+		left: .25rem;
+		top: .25rem;
+		border-radius: 50px;
+		background: $primary;
+	}
+
+	&:hover {
+		color: #fff;
+		text-decoration: none;
+		background: $primary;
+		transition: .3s background;
+
+		&:before {
+			background: #fff;
+		}
+	}
+}
+
+
+.table-header {
+	cursor: pointer;
+	transition: .3s color;
+
+	&:hover {
+		color: $body-color !important;
+	}
+
+	&:after {
+		content: '\f0dc';
+		font-family: FontAwesome;
+		display: inline-block;
+		margin-left: .5rem;
+		font-size: .75rem;
+	}
+}
+
+.table-header-asc {
+	color: $body-color !important;
+
+	&:after {
+		content: '\f0de';
+	}
+}
+
+.table-header-desc {
+	color: $body-color !important;
+
+	&:after {
+		content: '\f0dd';
+	}
+}

data/assets/stylesheets/dashboard/_tag.scss

@@ -0,0 +1,97 @@
+.tag {
+	font-size: px2rem(12px);
+	color: $text-muted-dark;
+	background-color: $gray-200;
+	border-radius: 3px;
+	padding: 0 .5rem;
+	line-height: 2em;
+	display: inline-flex;
+	cursor: default;
+	font-weight: 400;
+	user-select: none;
+
+	@at-root a#{&} {
+		text-decoration: none;
+		cursor: pointer;
+		transition: .3s color, .3s background;
+
+		&:hover {
+			background-color: rgba($text-muted-dark, .20);
+			color: inherit;
+		}
+	}
+}
+
+.tag-addon {
+	display: inline-block;
+	padding: 0 .5rem;
+	color: inherit;
+	text-decoration: none;
+	background: rgba(#000, .06);
+	margin: 0 -.5rem 0 .5rem;
+	text-align: center;
+	min-width: 1.5rem;
+
+	&:last-child {
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	i {
+		vertical-align: middle;
+		margin: 0 -.25rem;
+	}
+
+	@at-root a#{&} {
+		text-decoration: none;
+		cursor: pointer;
+		transition: .3s color, .3s background;
+
+		&:hover {
+			background: rgba(#000, .16);
+			color: inherit;
+		}
+	}
+}
+
+.tag-avatar {
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 3px 0 0 3px;
+	margin: 0 .5rem 0 -.5rem;
+}
+
+@each $vendor, $color in $colors {
+	.tag-#{$vendor} {
+		background-color: $color;
+		color: #fff;
+	}
+}
+
+@each $vendor, $color in $theme-colors {
+	.tag-#{$vendor} {
+		background-color: $color;
+		color: #fff;
+	}
+}
+
+.tag-rounded {
+	border-radius: 50px;
+
+	.tag-avatar {
+		border-radius: 50px;
+	}
+}
+
+.tags {
+	margin-bottom: -.5rem;
+	font-size: 0;
+
+	>.tag {
+		margin-bottom: .5rem;
+
+		&:not(:last-child) {
+			margin-right: .5rem;
+		}
+	}
+}

data/assets/stylesheets/dashboard/_text.scss

@@ -0,0 +1,22 @@
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+	i {
+		vertical-align: baseline;
+		font-size: 0.815em;
+	}
+}
+
+.text-inherit { color: inherit !important; }
+.text-default { color: $body-color !important; }
+.text-muted-dark { color: $text-muted-dark !important; }
+
+.tracking-tight		{ letter-spacing: -0.05em !important; }
+.tracking-normal	{ letter-spacing: 0 !important; }
+.tracking-wide		{ letter-spacing: 0.05em !important; }
+
+.leading-none	{ line-height: 1 !important; }
+.leading-tight	{ line-height: 1.25 !important; }
+.leading-normal	{ line-height: $line-height-base !important; }
+.leading-loose	{ line-height: 2 !important; }

data/assets/stylesheets/dashboard/_timeline.scss

@@ -0,0 +1,71 @@
+.timeline {
+	position: relative;
+	margin: 0 0 2rem;
+	padding: 0;
+	list-style: none;
+
+	&:before {
+		background-color: $gray-200;
+		position: absolute;
+		display: block;
+		content: '';
+		width: 1px;
+		height: 100%;
+		top: 0;
+		bottom: 0;
+		left: 4px;
+	}
+}
+
+.timeline-item {
+	position: relative;
+	display: flex;
+	padding-left: 2rem;
+	margin: .5rem 0;
+
+	&:first-child:before,
+	&:last-child:before {
+		content: '';
+		position: absolute;
+		background: #fff;
+		width: 1px;
+		left: .25rem;
+	}
+
+	&:first-child {
+		margin-top: 0;
+
+		&:before {
+			top: 0;
+			height: .5rem;
+		}
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+
+		&:before {
+			top: .5rem;
+			bottom: 0;
+		}
+	}
+}
+
+.timeline-badge {
+	position: absolute;
+	display: block;
+	width: px2rem(7px);
+	height: px2rem(7px);
+	left: 1px;
+	top: .5rem;
+	border-radius: 100%;
+	border: 1px solid #fff;
+	background: $gray-500;
+}
+
+.timeline-time {
+	white-space: nowrap;
+	margin-left: auto;
+	color: $text-muted;
+	font-size: $small-font-size;
+}

data/assets/stylesheets/dashboard/_type.scss

@@ -0,0 +1,120 @@
+.lead {
+	line-height: 1.4;
+}
+
+a {
+	text-decoration-skip: ink;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+	a {
+		color: inherit;
+	}
+}
+
+strong,
+b {
+	font-weight: 600;
+}
+
+p,
+ul,
+ol,
+blockquote {
+	margin-bottom: 1em;
+}
+
+blockquote {
+	font-style: italic;
+	color: $text-muted-dark;
+	padding-left: 2rem;
+	border-left: 2px solid $border-color;
+
+	p {
+		margin-bottom: 1rem;
+	}
+
+	cite {
+		display: block;
+		text-align: right;
+
+		&:before {
+			content: '— ';
+		}
+	}
+}
+
+code {
+	background: rgba(0, 0, 0, 0.025);
+	border: 1px solid rgba(#000, .05);
+	border-radius: 3px;
+	padding: 3px;
+
+	pre & {
+		padding: 0;
+		border-radius: 0;
+		border: none;
+		background: none;
+	}
+}
+
+hr {
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+}
+
+pre {
+	color: $gray-800;
+	padding: 1rem;
+	overflow: auto;
+	font-size: 85%;
+	line-height: 1.45;
+	background-color: #f8fafc;
+	border-radius: 3px;
+	tab-size: 4;
+	text-shadow: 0 1px white;
+	hyphens: none;
+}
+
+img {
+	max-width: 100%;
+}
+
+.text-wrap {
+	font-size: 1rem;
+	line-height: 1.66;
+
+	> :first-child {
+		margin-top: 0;
+	}
+
+	> :last-child {
+		margin-bottom: 0;
+	}
+
+	> {
+		h1, h2, h3, h4, h5, h6 {
+			margin-top: 1em;
+		}
+	}
+
+	table {
+		@extend .table, .table-bordered;
+	}
+}
+
+.section-nav {
+	background-color: $gray-100;
+	margin: 1rem 0;
+	padding: .5rem 1rem;
+	border: 1px solid $border-color;
+	border-radius: 3px;
+	list-style: none;
+
+	&:before {
+		content: 'Table of contents:';
+		display: block;
+		font-weight: 600;
+	}
+}