datatable.directory/resources/assets/sass/app.scss

// Fonts
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "bst-base";

$sp0: 0;
$sp1_2: $spacer*.25;
$sp1: $spacer*.5;
$sp3_4: $spacer*.75;
$sp1: $spacer*.5;
$sp2: $spacer*1;
$sp3: $spacer*1.5;
$sp4: $spacer*2;


// Body
$body-bg: white;

// Typography
$font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

$link-color:                $gray-800;
$link-decoration:           none;
$link-hover-color:          darken($link-color, 15%);
$link-hover-decoration:     underline;

$card-cap-bg: lighten($primary, 5);
$card-border-color: $primary;
//$card-border-width: 2px;
$card-border-radius: 5px;
$card-inner-border-radius: 2px;

$list-group-hover-bg: rgba($primary, .1);

$tooltip-max-width: 300px;
$tooltip-bg: darken($primary, 20%);
$tooltip-arrow-color: $tooltip-bg;

$pagination-padding-y-sm: $sp1_2;
$pagination-padding-x-sm: $sp3_4;


@import "bst-modules";


// generic hiding class
.hidden {
	display: none !important;
}

// padding right for icons (must not use space next to it!)
.fa-pr::before {
	margin-right: $sp1;
}

.fa-large.fa-pr::before {
	margin-right: $sp2;
}

.fa-large {
	font-size: 1.6em;
}

.card-header .fa-large {
	margin: -.6em 0; // fix alignment
}


html {
	overflow-y: scroll;
}

// help bubble icon
.form-help {
	display: inline-block;
	margin-top: $form-text-margin-top;
}

// tooltip tweaking
.tooltip-inner {
	text-align: left;
}

.tooltip-inner {
	box-shadow: 0 2px 5px rgba(black, .3);
}

// layout tweaks
.page-navbar {
	background: white;
	border-bottom: 1px solid $primary;

	box-shadow: 0 -3px 8px rgba(black, 1);
}

.page-footer {
	font-size: 95%;
	background: $body-bg;
	border-top: 2px dotted $gray-200;
}

.card-header {
	color: white;
	font-weight: bold;
}

.card {
	box-shadow: 0 2px 3px rgba(black, .3);
}

.pagination-outline-light {
	.page-link {
		color: white;
		background-color: transparent;
		border: $pagination-border-width solid white;

		&:hover {
			color: white;
			background-color: rgba(black, .2);
			border-color: white;
		}

		&:focus {
			z-index: 2;
			outline: 0 none;
			box-shadow: 0 0 0 $btn-focus-width rgba(white, .5);
		}
	}

	.page-item {
		font-weight: normal;

		&.active .page-link {
			color: white;
			font-weight: bold;
			background-color: rgba(black, .2);
			border-color: white;
		}

		&.disabled .page-link {
			color: rgba(white, .6);
			background-color: transparent;
			border-color: white;
		}
	}
}

.card-header-extra {
	display: flex;
	align-items: center;
}

// special styles for buttons in card header
.card-header .btn {
	@extend .btn-sm;
	@extend .btn-outline-light;
}

.fadeout {
	transition: opacity .5s ease-in-out;
	opacity: 1;

	&.fade {
		opacity: 0;
	}
}