Organisation Tweaks

build/Builder.js

@@ -18,10 +18,24 @@ class Builder {
 		return varString;
 	}
 
+	//readonly-ish
+	#getHeader(){
+		const today = new Date();
+		return `/*! 		
+	BYBA Bandmaster Framework Stylesheet (generated ${today.toLocaleString()})
+	This file is generated by a tool - please make any changes in the respective SCSS
+	files and recompile, otherwise you risk your changes being overwritten!
+*/
+`;
+	}
+
 	build(src, dest) {
 		//src = path.resolve(src);
 		const dir = path.dirname(src);
-		const res = sass.compileString(this.getVariables() + `@import '${src}';`, {
+
+		const sassStr = `${this.#getHeader()} ${this.getVariables()} @import '${src}';`;
+
+		const res = sass.compileString(sassStr, {
 			loadPaths: [dir]
 		});
 

scss/abstracts/_variables.scss

@@ -31,6 +31,8 @@ $colour-contrast-dark: $black;
 $colour-contrast-light: $white;
 $min-contrast-ratio: 4.5 !default;
 
+$disable-opacity: 0.7; //how much to fade disabled controls
+
 //put in an array so we can loop over contextual stylings etc
 $colours: ("default": $default,
 	"error": $error,
@@ -60,6 +62,20 @@ $heading-sizes: (1: $font-size * 2.6,
 
 $button-weight: 400;
 
+//element selectors
+//style "textual" inputs - single line text, multi-line text, dropdown
+$text-input: 'textarea, select, input:not([type=hidden]):not([type=checkbox]):not([type=radio])';
+
 //utility variables
 $display-types: ('none', 'block', 'inline', 'inline-block', 'flex');
-$text-alignments: ('start', 'center', 'end'); //LTR/RTL accessible - go us!
+$text-alignments: ('start', 'center', 'end'); //LTR/RTL accessible - go us!
+
+$margin-names: (
+	"margin": "m",
+	"margin-top": "mt",
+	"margin-bottom": "mb",
+	"margin-left": "ml",
+	"margin-right": "mr"
+);
+
+$margins: (0, $spacer * 0.5, $spacer, $spacer * 2);

scss/abstracts/mixins/_buttons.scss

@@ -8,9 +8,10 @@
 	$hover_bg: color.scale($background, $lightness: -30%),
 	$hover_fg: $foreground
 ) {
+	display: inline-block;
 	background-color: $background;
 	border: solid 1px $background;
-	color: $foreground;
+	color: $foreground !important;
 	font-weight: $button-weight;
 	padding: $spacer-half;
 	margin: $spacer-half;

scss/abstracts/mixins/_utilities.scss

@@ -1,7 +1,12 @@
-@mixin generate-utility($class, $property, $values){
-	@each $val in $values{
+@mixin generate-utility($class, $property, $values, $useIndex: false){
+	@for $i from 1 through length($values){
+		$val: nth($values, $i);
+		$name: #{$class}-#{if($useIndex, $i - 1, $val)};
+	//}
+	//@each $val in $values{
 		//generates class name like `d-none`, `d-inline-block` etc
-		.#{$class}-#{$val}{
+		//.#{$class}-#{$val}{
+		.#{$name}{
 			#{$property}: #{$val};
 		}
 	}

scss/base/_utilities.scss

@@ -1,6 +1,10 @@
 @include generate-utility('d', 'display', $display-types);
 @include generate-utility('text', 'text-align', $text-alignments);
 
+@each $prop, $class in $margin-names{
+	@include generate-utility($class, $prop, $margins, true);
+}
+
 @include sm {
 	@include generate-utility('d-sm', 'display', $display-types);
 }
@@ -33,3 +37,8 @@
 		}
 	}
 }
+
+.disabled{
+	pointer-events: none;
+	opacity: $disable-opacity;
+}

scss/components/_card.scss

@@ -1,4 +1,5 @@
 .card {
+	top: 0;
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -18,12 +19,12 @@
 	height: 100%;
 }
 
-.card a{
+.card-action a{
 	text-decoration: none;
 	color: inherit;
 }
 
-.card a:after {
+.card-action a:after {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -40,4 +41,8 @@
 .card-action:hover{
 	position: relative;
 	top: -10px;
+}
+
+.card + .card{
+	margin-top: $spacer;
 }

scss/components/_index.scss

@@ -4,4 +4,6 @@
 @import 'navbar';
 @import 'alert';
 @import 'card';
-@import 'label';
+@import 'label';
+@import 'jumbotron';
+@import 'modal';

scss/components/_input.scss

@@ -1,6 +1,4 @@
-textarea,
-select,
-input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
+#{$text-input} {
 	display: block;
 	width: 100%;
 	padding: $spacer;
@@ -26,9 +24,7 @@ input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
 	position: relative;
 	margin: $spacer * 0.5 0;
 
-	textarea,
-	select,
-	input:not([type=hidden]) {
+	#{$text-input} {
 		padding-top: $spacer * 1.5; //make room for label
 		line-height: 1;
 

scss/components/_jumbotron.scss

@@ -0,0 +1,6 @@
+.jumbotron{
+	padding: $spacer * 2 $spacer;
+	margin-bottom: $spacer * 2;
+	border: 1px solid rgba(0,0,0,0.2);
+	border-radius: $radius-small;
+}

scss/components/_modal.scss

@@ -0,0 +1,57 @@
+.modal {
+	visibility: hidden;
+
+	&:target {
+		visibility: visible;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&::before {
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			background-color: rgba(0, 0, 0, .7);
+			content: "";
+			cursor: default;
+		}
+	}
+
+	.modal-content {
+		position: relative;
+		width: 40vw;
+		padding: $spacer;
+		background-color: $white;
+	}
+
+	.close {
+		position: relative;
+		display: block;
+		top: -1rem;
+		right: -1rem;
+
+		&::after {
+			right: -1rem;
+			top: -1rem;
+			width: 2rem;
+			height: 2rem;
+			position: absolute;
+			display: flex;
+			z-index: 1;
+			align-items: center;
+			justify-content: center;
+			background-color: black;
+			border-radius: 50%;
+			color: white;
+			content: "×";
+			cursor: pointer;
+		}
+	}
+}

scss/layout/_grid.scss

@@ -4,6 +4,10 @@
 	margin-left: $spacer * -0.5;
 	margin-right: $spacer * -0.5;
 
+	&.text-center{
+		justify-content: center;
+	}
+
 	> * {
 		box-sizing: border-box;
 		flex-shrink: 0;
@@ -16,7 +20,15 @@
 
 .col {
 	flex: 1 0 0%;
-	margin-bottom: $spacer;
+	//margin-bottom: $spacer;
+
+	.input:first-child{
+		margin-top: 0;
+	}
+
+	.input:last-child:not(:first-child){
+		margin-bottom: 0;
+	}
 }
 
 
@@ -28,7 +40,15 @@
 			.col#{$name}-#{$i} {
 				flex: 0 0 auto;
 				width: percentage(divide($i, $columns));
-				margin-bottom: $spacer;
+				//margin-bottom: $spacer;
+
+				.input:first-child{
+					margin-top: 0;
+				}
+
+				.input:last-child:not(:first-child){
+					margin-bottom: 0;
+				}
 			}
 		}
 	}