Updated Grid and Documentation

- Added gap to flex grid - Added Modals - Updated Button sizing - Updated Form input and label sizing
ggedde · May 5, 2021 · 2530edc · 2530edc
1 parent 399cc3d
commit 2530edc
Show file tree

Hide file tree

Showing 12 changed files with 733 additions and 278 deletions.
diff --git a/_grid.scss b/_grid.scss
@@ -5,44 +5,63 @@
 	max-width: $row-max-width;
 	margin-left: auto;
 	margin-right: auto;
+	gap: $gap;
 	> * {
 		flex: 1;
-		padding-left: ($gutter-width / 2);
-		padding-right: ($gutter-width / 2);
 	}
-	.row {
-		margin-left: -#{($gutter-width / 2)};
-		margin-right: -#{($gutter-width / 2)};
+	> .col-auto {
+		flex: auto;
+	}
+}
+
+@each $i, $space in $spacing {
+	[class*="row"].g-#{$i},
+	[class*="row"].g-#{$i} [class*="row"] {
+		gap: #{$space}rem;
 	}
 }
 
 @for $i from 1 through 12 {
 	.row .col-#{$i} {
-		flex: 0 0 auto;
-		width: percentage($i / 12);
+		flex: 1 1 calc( #{percentage($i / 12)} - #{$gap} );
+		@if $i == 12 {
+			max-width: calc( #{percentage($i / 12)} );
+		} @else {
+			max-width: calc( #{percentage($i / 12)} - #{($gap / 2)} );
+		}
+	}
+	@each $s, $space in $spacing {
+		.row.g-#{$s} .col-#{$i},
+		.row.g-#{$s} [class*="row"] .col-#{$i} {
+			flex: 1 1 calc( #{percentage($i / 12)} - #{$space}rem );
+			@if $i == 12 {
+				max-width: calc( #{percentage($i / 12)} )
+			} @else {
+				max-width: calc( #{percentage($i / 12)} - #{($space / 2)}rem );
+			}
+		}
 	}
 }
 
 @each $breakpoint, $breakpoint_width in $breakpoints {
 
+	.#{$breakpoint}-row {
+		gap: $gap;
+		display: flex;
+		flex-wrap: wrap;
+		> * {
+			flex: 0 0 100%;
+		}
+	}
+
 	.#{$breakpoint}-mw {
 		max-width: $breakpoint_width;
-		margin-left: auto;
-		margin-right: auto;
 	}
 
-	.#{$breakpoint}-row {
-		max-width: $breakpoint_width;
-		margin-left: auto;
-		margin-right: auto;
-		> * {
-			// flex: 1;
-			padding-left: ($gutter-width / 2);
-			padding-right: ($gutter-width / 2);
-		}
-		.#{$breakpoint}-row {
-			margin-left: -#{($gutter-width / 2)};
-			margin-right: -#{($gutter-width / 2)};
+	@each $i, $space in $spacing {
+		.#{$breakpoint}-row.g-#{$i},
+		.#{$breakpoint}-row.g-#{$i} [class*="row"] {
+			gap: #{$space}rem;
 		}
 	}
 
@@ -51,23 +70,61 @@
 		// Flex
 		.#{$breakpoint}-row {
 			display: flex;
-			flex-wrap: wrap;
+
+			max-width: $row-max-width;
+			margin-left: auto;
+			margin-right: auto;
+			gap: $gap;
 			> * {
 				flex: 1;
-				padding-left: ($gutter-width / 2);
-				padding-right: ($gutter-width / 2);
+			}
+			> .col-auto {
+				flex: auto;
+			}
+		}
+
+		@each $i, $space in $spacing {
+			[class*="row"].#{$breakpoint}-g-#{$i},
+			[class*="row"].#{$breakpoint}-g-#{$i} [class*="row"] {
+				gap: #{$space}rem;
 			}
 		}
 
 		// Columns
 		@for $i from 1 through 12 {
-			.#{$breakpoint}-row .col-#{$i} {
-				flex: 0 0 auto;
-				width: percentage($i / 12);
+			.#{$breakpoint}-row .col-#{$i},
+			[class*="row"] .#{$breakpoint}-col-#{$i} {
+				flex: 1 1 calc( #{percentage($i / 12)} - #{$gap} );
+				@if $i == 12 {
+					max-width: calc( #{percentage($i / 12)} )
+				} @else {
+					max-width: calc( #{percentage($i / 12)} - #{($gap / 2)} );
+				}
 			}
-			.#{$breakpoint}-col-#{$i} {
-				flex: 0 0 auto;
-				width: percentage($i / 12) !important;
+			@each $s, $space in $spacing {
+				.#{$breakpoint}-row.g-#{$s} .col-#{$i},
+				[class*="row"].g-#{$s} .#{$breakpoint}-col-#{$i},
+				[class*="row"].g-#{$s} [class*="row"] .#{$breakpoint}-col-#{$i} {
+					flex: 1 1 calc( #{percentage($i / 12)} - #{$space}rem );
+					@if $i == 12 {
+						max-width: calc( #{percentage($i / 12)} )
+					} @else {
+						max-width: calc( #{percentage($i / 12)} - #{($space / 2)}rem );
+					}
+				}
+
+				[class*="row"].#{$breakpoint}-g-#{$s} .col-#{$i},
+				[class*="row"].#{$breakpoint}-g-#{$s} [class*="col"].#{$breakpoint}-col-#{$i},
+				[class*="row"].#{$breakpoint}-g-#{$s} .#{$breakpoint}-col-#{$i},
+				[class*="row"].#{$breakpoint}-g-#{$s} [class*="row"] .col-#{$i},
+				[class*="row"].#{$breakpoint}-g-#{$s} [class*="row"] .#{$breakpoint}-col-#{$i} {
+					flex: 1 1 calc( #{percentage($i / 12)} - #{$space}rem );
+					@if $i == 12 {
+						max-width: calc( #{percentage($i / 12)} )
+					} @else {
+						max-width: calc( #{percentage($i / 12)} - #{($space / 2)}rem );
+					}
+				}
 			}
 		}
 	}

diff --git a/_modals.scss b/_modals.scss
@@ -0,0 +1,106 @@
+@keyframes modalAlert {
+	20% {
+		transform: scale(1.03);
+	}
+	40% {
+		transform: scale(1);
+	}
+	60% {
+		transform: scale(1.03);
+	}
+	80% {
+		transform: none;
+	}
+}
+.modal {
+	align-items: center;
+	background-color: rgba(0, 0, 0, .7);
+	bottom: 0;
+	justify-content: center;
+	left: 0;
+	opacity: 0;
+	pointer-events: none;
+	position: fixed;
+	right: 0;
+	top: 0;
+	transition: opacity .2s ease-in-out;
+	z-index: 1000;
+	display: flex;
+	.modal-container {
+		background: white;
+		box-shadow: 0 2px 4px 0px rgba(0,0,0,0.3);
+		box-sizing: border-box;
+		display: block;
+		overflow: hidden;
+		top: 50%;
+		transform: scale(0.5) translateY(-50%);
+		transition: transform .4s cubic-bezier(1, 0, 0, 1);
+		width: 90%;
+		.modal-heading,
+		.modal-body,
+		.modal-footer {
+			padding: .6rem 1rem;
+		}
+		.modal-body{
+			padding: 2.5rem 1rem;
+			.modal-content {
+				display: block;
+				max-height: 50vh;
+				overflow: auto;
+			}
+		}
+		.modal-heading,
+		.modal-footer {
+			position: relative;
+			.modal-close {
+				background: transparent;
+				border: none;
+				cursor: pointer;
+				height: 24px;
+				margin-top: 0;
+				opacity: .7;
+				position: absolute;
+				right: 22px;
+				top: 12px;
+				transition: opacity .2s ease-in-out, transform .2s ease-in-out;
+				width: 24px;
+				&:hover {
+					opacity: 1;
+					transform: scale(1.05);
+				}
+				&::before, &::after {
+					background-color: map-get($colors, 'dark');
+					content: '';
+					height: 90%;
+					position: absolute;
+					right: 6px;
+					top: 0;
+					width: 2px;
+				}
+				&::before {
+					transform: rotate(45deg);
+				}
+				&::after {
+					transform: rotate(-45deg);
+				}
+				&:hover {
+					&::before, &::after {
+						background-color: lighten(map-get($colors, 'dark'), 10%);
+					}
+				}
+			}
+		}
+	}
+	&.bounce {
+		animation-name: modalAlert;
+  		animation-duration: .4s;
+	}
+	&.show {
+		opacity: 1;
+		pointer-events: all;
+		.modal-container {
+			transition: transform .3s cubic-bezier(0, 1, 0, 1);
+			transform: none;
+		}
+	}
+}
diff --git a/_reset.scss b/_reset.scss
@@ -17,6 +17,7 @@ h4,
 h5,
 h6,
 p,
+fieldset,
 ol,
 ul {
     margin: 0;

diff --git a/_typography.scss b/_typography.scss
@@ -27,9 +27,9 @@ body, input, textarea, select {
 }
 
 section {
-	padding: $section-padding 1rem;
+	padding: $section-padding $gap;
 	@media screen and (min-width: map-get($breakpoints, 'md')) {
-		padding: $section-padding $gutter-width;   
+		padding: $section-padding $gap;   
 	}
     h1 {
         margin-top: -0.7rem;
@@ -81,9 +81,11 @@ blockquote {
 	}
 }
 
-.small {
+.small,
+form.small.btn {
     font-size: 85%;
 }
-.large {
+.large,
+form.large.btn {
     font-size: 130%;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ h4, @@
     h5,
     h6,
     p,
+    fieldset,
     ol,
     ul {
         margin: 0;
@@ Expand Down @@