organize sass

resources/assets/sass/_bootstrap.scss

@@ -1,3 +1,9 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+@import "bootstrap-customizations/variables";
+
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";

resources/assets/sass/_bst-base.scss

@@ -1,4 +0,0 @@
-
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";

resources/assets/sass/_fa-utils.scss

@@ -0,0 +1,13 @@
+
+// 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;
+}

resources/assets/sass/_helpers.scss

@@ -0,0 +1,14 @@
+// generic hiding class
+.hidden {
+	display: none !important;
+}
+
+// fadeout styles for hiding flash messages
+.fadeout {
+	transition: opacity .5s ease-in-out;
+	opacity: 1;
+
+	&.fade {
+		opacity: 0;
+	}
+}

resources/assets/sass/app.scss

@@ -1,170 +1,16 @@
-
-// Fonts
-//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
-
 // Variables
-@import "bst-base";
+@import "bootstrap";
-
-$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
+@import "helpers";
-.form-help {
+@import "fa-utils";
-	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 {
+@import "bootstrap-customizations/paginate";
-	display: flex;
+@import "bootstrap-customizations/card";
-	align-items: center;
+@import "bootstrap-customizations/tooltip";
-}
+@import "bootstrap-customizations/navbar";
-
+@import "bootstrap-customizations/footer";
-// special styles for buttons in card header
+@import "bootstrap-customizations/help";
-.card-header .btn {
-	@extend .btn-sm;
-	@extend .btn-outline-light;
-}
-
-.fadeout {
-	transition: opacity .5s ease-in-out;
-	opacity: 1;
-
-	&.fade {
-		opacity: 0;
-	}
-}

resources/assets/sass/bootstrap-customizations/_card.scss

@@ -0,0 +1,24 @@
+
+.card-header {
+	color: white;
+	font-weight: bold;
+}
+
+.card {
+	box-shadow: 0 2px 3px rgba(black, .3);
+}
+
+.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;
+}
+
+.card-header .fa-large {
+	margin: -.6em 0; // fix icon alignment
+}

resources/assets/sass/bootstrap-customizations/_footer.scss

@@ -0,0 +1,6 @@
+
+.page-footer {
+	font-size: 95%;
+	background: $body-bg;
+	border-top: 2px dotted $gray-200;
+}

resources/assets/sass/bootstrap-customizations/_help.scss

@@ -0,0 +1,5 @@
+// help bubble icon
+.form-help {
+	display: inline-block;
+	margin-top: $form-text-margin-top;
+}

resources/assets/sass/bootstrap-customizations/_navbar.scss

@@ -0,0 +1,7 @@
+// layout tweaks
+.page-navbar {
+	background: white;
+	border-bottom: 1px solid $primary;
+
+	box-shadow: 0 -3px 8px rgba(black, 1);
+}

resources/assets/sass/bootstrap-customizations/_paginate.scss

@@ -0,0 +1,36 @@
+.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;
+		}
+	}
+}

resources/assets/sass/bootstrap-customizations/_tooltip.scss

@@ -0,0 +1,9 @@
+
+// tooltip tweaking
+.tooltip-inner {
+	text-align: left;
+}
+
+.tooltip-inner {
+	box-shadow: 0 2px 5px rgba(black, .3);
+}

resources/assets/sass/bootstrap-customizations/_variables.scss

@@ -0,0 +1,36 @@
+$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;