simple vue-based column editor

resources/assets/sass/_bootstrap-base.scss

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

resources/assets/sass/_bootstrap.scss

@@ -1,8 +1,4 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-
-@import "bootstrap-customizations/variables";
+@import "bootstrap-base";
 @import "bootstrap-customizations/_helpers-before";
 
 @import "~bootstrap/scss/root";

resources/assets/sass/_mixins.scss

@@ -0,0 +1,55 @@
+@function dist($x) {
+	@return $spacer*.25*$x;
+}
+
+@mixin py($n) {
+	padding-top: dist($n);
+	padding-bottom: dist($n);
+}
+
+@mixin px($n) {
+	padding-left: dist($n);
+	padding-right: dist($n);
+}
+
+@mixin my($n) {
+	margin-top: dist($n);
+	margin-bottom: dist($n);
+}
+
+@mixin mx($n) {
+	margin-left: dist($n);
+	margin-right: dist($n);
+}
+
+@mixin pl($n) {
+	padding-left: dist($n);
+}
+
+@mixin pr($n) {
+	padding-right: dist($n);
+}
+
+@mixin pt($n) {
+	padding-top: dist($n);
+}
+
+@mixin pb($n) {
+	padding-bottom: dist($n);
+}
+
+@mixin ml($n) {
+	margin-left: dist($n);
+}
+
+@mixin mr($n) {
+	margin-right: dist($n);
+}
+
+@mixin mt($n) {
+	margin-top: dist($n);
+}
+
+@mixin mb($n) {
+	margin-bottom: dist($n);
+}

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

@@ -1,7 +1,10 @@
 $sp0: 0;
 $sp1_2: $spacer*.25;
-$sp1: $spacer*.5;
+
+$sp1_4: $spacer*.125;
+$sp2_4: $sp1_2;
 $sp3_4: $spacer*.75;
+
 $sp1: $spacer*.5;
 $sp2: $spacer*1;
 $sp3: $spacer*1.5;