tabler_ui_rails 0.1.0 → 0.2.0

data/assets/stylesheets/dashboard/_carousel.scss

@@ -0,0 +1,9 @@
+.carousel-item-background {
+	content: '';
+	background: rgba(0, 0, 0, .5);
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}

data/assets/stylesheets/dashboard/_charts.scss

@@ -0,0 +1,51 @@
+$sizes: (
+	'xs': 2.5rem,
+	'sm': 4rem,
+	'lg': 10rem
+);
+
+.chart-circle {
+	display: block;
+	height: 8rem;
+	width: 8rem;
+	position: relative;
+
+	canvas {
+		margin: 0 auto;
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+	}
+}
+
+@each $size, $value in $sizes {
+	.chart-circle-#{$size} {
+		height: $value;
+		width: $value;
+		font-size: .8rem;
+	}
+}
+
+.chart-circle-value {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	margin-left: auto;
+	margin-right: auto;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+
+	//font-size: px2rem(24px);
+	//font-weight: 600;
+	line-height: 1;
+
+	small {
+		display: block;
+		color: $text-muted;
+		font-size: px2rem(15px);
+	}
+}

data/assets/stylesheets/dashboard/_chat.scss

@@ -0,0 +1,88 @@
+.chat {
+	outline: 0;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	min-height: 100%;
+}
+
+.chat-line {
+	padding: 0;
+	text-align: right;
+	position: relative;
+	display: flex;
+	flex-direction: row-reverse;
+
+	& + & {
+		padding-top: 1rem;
+	}
+}
+
+.chat-message {
+	position: relative;
+	display: inline-block;
+	background-color: $primary;
+	color: #fff;
+	font-size: px2rem(14px);
+	padding: .375rem .5rem;
+	border-radius: 3px;
+	white-space: normal;
+	text-align: left;
+	margin: 0 .5rem 0 2.5rem;
+	line-height: 1.4;
+
+	>:last-child {
+		margin-bottom: 0 !important;
+	}
+
+	&:after {
+		content: "";
+		position: absolute;
+		right: -5px;
+		top: 7px;
+		border-bottom: 6px solid transparent;
+		border-left: 6px solid $primary;
+		border-top: 6px solid transparent;
+	}
+
+	img {
+		max-width: 100%;
+	}
+
+	p {
+		margin-bottom: 1em;
+	}
+}
+
+.chat-line-friend {
+	flex-direction: row;
+
+	& + & {
+		margin-top: -.5rem;
+
+		.chat-author {
+			visibility: hidden;
+		}
+
+		.chat-message:after {
+			display: none;
+		}
+	}
+
+	.chat-message {
+		background-color: #f3f3f3;
+		color: $body-color;
+		margin-left: .5rem;
+		margin-right: 2.5rem;
+
+		&:after {
+			right: auto;
+			left: -5px;
+			border-left-width: 0;
+			border-right: 5px solid #f3f3f3;
+		}
+	}
+}

data/assets/stylesheets/dashboard/_chips.scss

@@ -0,0 +1,45 @@
+.chips {
+	margin: 0 0 -.5rem;
+
+	.chip {
+		margin: 0 .5rem .5rem 0;
+	}
+}
+
+.chip {
+	display: inline-block;
+	height: 2rem;
+	line-height: 2rem;
+	font-size: px2rem(14px);
+	font-weight: 500;
+	color: $text-muted-dark;
+	padding: 0 .75rem;
+	border-radius: 1rem;
+	background-color: $gray-100;
+	transition: .3s background;
+
+	.avatar {
+		float: left;
+		margin: 0 .5rem 0 -.75rem;
+		height: 2rem;
+		width: 2rem;
+		border-radius: 50%;
+	}
+
+	//.close {
+	//	cursor: pointer;
+	//	float: right;
+	//	font-size: 1.3rem;
+	//	padding-left: .5rem;
+	//	line-height: inherit;
+	//	margin-left: .25rem;
+	//}
+
+	@at-root a#{&} {
+		&:hover {
+			color: inherit;
+			text-decoration: none;
+			background-color: $gray-200;
+		}
+	}
+}

data/assets/stylesheets/dashboard/_close.scss

@@ -0,0 +1,10 @@
+.close {
+	font-size: 1rem;
+	line-height: 1.5;
+	transition: .3s color;
+
+	&:before {
+		content: '\ea00';
+		font-family: "feather";
+	}
+}

data/assets/stylesheets/dashboard/_colors.scss

@@ -0,0 +1,8 @@
+@each $color, $value in $colors {
+	@include bg-variant(".bg-#{$color}-lightest", mix($value, #fff, 10%));
+	@include bg-variant(".bg-#{$color}-lighter", mix($value, #fff, 30%));
+	@include bg-variant(".bg-#{$color}-light", mix($value, #fff, 70%));
+	@include bg-variant(".bg-#{$color}-dark", mix($value, #000, 80%));
+	@include bg-variant(".bg-#{$color}-darker", mix($value, #000, 40%));
+	@include bg-variant(".bg-#{$color}-darkest", mix($value, #000, 20%));
+}

data/assets/stylesheets/dashboard/_core.scss

@@ -0,0 +1,37 @@
+html {
+	font-size: 16px;
+	height: 100%;
+	direction: ltr;
+}
+
+body {
+	direction: ltr;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-text-size-adjust: none;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	-webkit-font-feature-settings: "liga" 0;
+	font-feature-settings: "liga" 0;
+	height: 100%;
+	overflow-y: scroll;
+	position: relative;
+
+	@media print {
+		background: none;
+	}
+}
+
+body *::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+	transition: .3s background;
+}
+
+body *::-webkit-scrollbar-thumb {
+	background: $gray-400;
+}
+body *:hover::-webkit-scrollbar-thumb {
+	background: $gray-500;
+}

data/assets/stylesheets/dashboard/_dropdown.scss

@@ -0,0 +1,68 @@
+.dropdown {
+	display: inline-block;
+}
+
+.dropdown-menu {
+	box-shadow: $dropdown-box-shadow;
+	min-width: 12rem;
+}
+
+.dropdown-item {
+	color: $text-muted-dark;
+}
+
+.dropdown-menu-arrow {
+	&:before {
+		position: absolute;
+		top: -6px;
+		left: 12px;
+		display: inline-block;
+		border-right: 5px solid transparent;
+		border-bottom: 5px solid $border-color;
+		border-left: 5px solid transparent;
+		border-bottom-color: rgba(0, 0, 0, 0.2);
+		content: '';
+	}
+
+	&:after {
+		position: absolute;
+		top: -5px;
+		left: 12px;
+		display: inline-block;
+		border-right: 5px solid transparent;
+		border-bottom: 5px solid #fff;
+		border-left: 5px solid transparent;
+		content: '';
+	}
+
+	&.dropdown-menu-right {
+		&:before,
+		&:after {
+			left: auto;
+			right: 12px;
+		}
+	}
+}
+
+.dropdown-toggle {
+	user-select: none;
+	cursor: pointer;
+
+	&:after {
+		vertical-align: 0.155em;
+	}
+
+	&:empty:after {
+		margin-left: 0;
+	}
+}
+
+.dropdown-icon {
+	color: $text-muted;
+	margin-right: .5rem;
+	margin-left: -.5rem;
+	width: 1em;
+	display: inline-block;
+	text-align: center;
+	vertical-align: -1px;
+}

data/assets/stylesheets/dashboard/_example.scss

@@ -0,0 +1,47 @@
+.example {
+	padding: 1.5rem;
+	border: 1px solid $border-color;
+	border-radius: 3px 3px 0 0;
+	font-size: px2rem(15px);
+}
+
+.example-bg {
+	background: $body-bg;
+}
+
+.example + .highlight {
+	border-top: none;
+	margin-top: 0;
+	border-radius: 0 0 3px 3px;
+}
+
+.highlight {
+	margin: 1rem 0 2rem;
+	border: 1px solid $border-color;
+	border-radius: 3px;
+	font-size: px2rem(15px);
+	max-height: 40rem;
+	overflow: auto;
+	background: #fcfcfc;
+}
+
+.highlight pre {
+	margin-bottom: 0;
+	background-color: transparent;
+}
+
+.example-column {
+	margin: 0 auto;
+
+	>.card:last-of-type {
+		margin-bottom: 0;
+	}
+}
+
+.example-column-1 {
+	max-width: 20rem;
+}
+
+.example-column-2 {
+	max-width: 40rem;
+}

data/assets/stylesheets/dashboard/_flag.scss

@@ -0,0 +1,17 @@
+.flag {
+	width: (1.2rem*640/480);
+	height: 1.2rem;
+	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 $flag in $flag-icons {
+	.flag-#{$flag} {
+		background-image: asset-url('flags/' + $flag + '.svg');
+	}
+}

data/assets/stylesheets/dashboard/_footer.scss

@@ -0,0 +1,15 @@
+.footer {
+	background: $footer-bg;
+	border-top: $border-width solid $border-color;
+	font-size: px2rem(14px);
+	padding: 1.25rem 0;
+	color: $text-muted;
+
+	a:not(.btn) {
+		color: $text-muted-dark;
+	}
+
+	@media print {
+		display: none;
+	}
+}

data/assets/stylesheets/dashboard/_form.scss

@@ -0,0 +1,158 @@
+textarea {
+	&[cols] {
+		height: auto;
+	}
+}
+
+
+.form-group {
+	display: block;
+}
+
+.form-label {
+	display: block;
+	margin-bottom: .375rem;
+	font-weight: 600;
+	font-size: px2rem(14px);
+}
+
+.form-label-small {
+	float: right;
+	font-weight: 400;
+	font-size: $small-font-size;
+}
+
+.form-footer {
+	margin-top: 2rem;
+}
+
+.custom-select,
+.custom-file {
+	//display: block;
+	//width: 100%;
+}
+
+.custom-control {
+	user-select: none;
+}
+
+.custom-controls-stacked {
+	.custom-control {
+		margin-bottom: .25rem;
+	}
+}
+
+.custom-control-label {
+	vertical-align: middle;
+
+	&:before {
+		border: 1px solid $input-border-color;
+		background-color: #fff;
+		background-size: .5rem;
+	}
+}
+
+.custom-control-description {
+	line-height: 1.5rem;
+}
+
+.input-group-prepend,
+.input-group-append,
+.input-group-btn {
+	font-size: px2rem(15px);
+
+	>.btn {
+		height: 100%;
+		border-color: $border-color;
+	}
+}
+
+.input-group-prepend > .input-group-text {
+	border-right: 0;
+}
+
+.input-group-append > .input-group-text {
+	border-left: 0;
+}
+
+/**
+Icon input
+ */
+.input-icon {
+	position: relative;
+
+	.form-control:not(:last-child) {
+		padding-right: 2.5rem;
+	}
+
+	.form-control:not(:first-child) {
+		padding-left: 2.5rem;
+	}
+}
+
+.input-icon-addon {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	color: $text-muted;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 2.5rem;
+	pointer-events: none;
+
+	&:last-child {
+		left: auto;
+		right: 0;
+	}
+}
+
+
+.form-fieldset {
+	background: $gray-100;
+	border: 1px solid $gray-200;
+	padding: 1rem;
+	border-radius: 3px;
+	margin-bottom: 1rem;
+}
+
+.form-required {
+	color: $red;
+
+	&:before {
+		content: ' ';
+	}
+}
+
+.state-valid {
+	padding-right: 2rem;
+	background: str-replace(url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$green}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") no-repeat center right .5rem/1rem;
+}
+
+.state-invalid {
+	padding-right: 2rem;
+	background: str-replace(url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$red}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") no-repeat center right .5rem/1rem;
+}
+
+.form-help {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	text-align: center;
+	line-height: 1rem;
+	color: $text-muted;
+	background: $gray-100;
+	border-radius: 50%;
+	font-size: px2rem(12px);
+	transition: .3s background-color, .3s color;
+	text-decoration: none;
+	cursor: pointer;
+	user-select: none;
+
+	&:hover,
+	&[aria-describedby] {
+		background: $primary;
+		color: #fff;
+	}
+}