Updated Grid and Cleaning up code

ggedde · Sep 10, 2021 · 85d15e3 · 85d15e3
1 parent 6270ba2
commit 85d15e3
Show file tree

Hide file tree

Showing 14 changed files with 212 additions and 249 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # SpryCss
-A simple and customizable CSS Toolkit while being as lightweight as possible (Only 12kb gzipped)
+A simple and customizable CSS Toolkit while being as lightweight as possible (Only 9kb gzipped)
 
 ![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/ggedde/spry-css?include_prereleases) &nbsp; ![GitHub](https://img.shields.io/github/license/ggedde/spry-css?label=license)
 

diff --git a/_colors.scss b/_colors.scss
@@ -1,29 +1,26 @@
 @each $color_name, $color_value in $colors {
+	.btn-#{$color_name}.btn-outline,
 	.color-#{$color_name} {
 		color: $color_value;
 	}
+	.btn-#{$color_name},
+	.btn-#{$color_name}.btn-outline:hover,
+	.btn-#{$color_name}.btn-outline:focus,
 	.bg-#{$color_name} {
 		background-color: $color_value;
 	}
+	.btn-#{$color_name},
+	.btn-#{$color_name}.btn-outline:hover,
+	.btn-#{$color_name}.btn-outline:focus,
 	.border-#{$color_name} {
 		border-color: $color_value;
 	}
 	.btn-#{$color_name} {
-		background-color: $color_value;
-		border-color: $color_value;
 		&:hover,
 		&:focus {
 			background-color: darken($color_value, 10%);
 			border-color: darken($color_value, 10%);
 		}
-		&.btn-outline {
-			color: $color_value;
-			&:hover,
-			&:focus {
-				background-color: $color_value;
-				border-color: $color_value;
-			}
-		}
 		&.btn-outline:active,
 		&:active {
 			background-color: darken($color_value, 5%);

diff --git a/_grid.scss b/_grid.scss
@@ -62,31 +62,22 @@
 
 @each $breakpoint, $breakpoint_width in $breakpoints {
 
-	@if map-get($gaps, $breakpoint) {
-		@media screen and (min-width: $breakpoint_width) {
-			[class*="grid-"] {
-				gap: map-get($gaps, $breakpoint);
-			}
-		}
-	}
-
 	.#{$breakpoint}-mw {
 		max-width: $breakpoint_width;
 	}
 
 	@media screen and (min-width: $breakpoint_width) {
-		.grid {
-			display: grid;
-			gap: map-get($gaps, $breakpoint);
-		}
 
-		.row {
-			gap: map-get($gaps, $breakpoint);
-			> * {
-				flex: 1;
+		@if map-get($gaps, $breakpoint) {
+			.grid, .row, [class*="grid-"] {
+				gap: map-get($gaps, $breakpoint);
 			}
 		}
 
+		.row > * {
+			flex: 1;
+		}
+
 		.row.#{$breakpoint}-columns-fixed > *,
 		.row > .#{$breakpoint}-col-fixed {
 			flex: 1;
@@ -140,8 +131,7 @@
 }
 @each $s, $space in $spacing {
 
-	.grid.g-#{$s},
-	.row.g-#{$s} {
+	.g-#{$s} {
 		gap: #{$space};
 	}
 

diff --git a/_modals.scss b/_modals.scss
@@ -19,103 +19,101 @@
 	opacity: 0;
 	pointer-events: none;
 	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+	inset: 0;
 	transition: opacity .15s cubic-bezier(.25,.8,.25,1);
 	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;
-		transform: scale(0.6);
-		transition: transform .2s cubic-bezier(.25,.8,.25,1);
-		width: 90%;
-		.modal-heading,
-		.modal-body,
-		.modal-footer {
-			padding: .9rem map-get($gaps, 'default');
-		}
-		.modal-body{
-			padding-top: map-get($gaps, 'default');
-			padding-bottom: map-get($gaps, 'default');
-		}
-		@each $breakpoint, $breakpoint_width in $breakpoints {
-			@if map-get($gaps, $breakpoint) {
-				@media screen and (min-width: $breakpoint_width) {
-					.modal-heading,
-					.modal-body,
-					.modal-footer {
-						padding-left: map-get($gaps, $breakpoint);
-						padding-right: map-get($gaps, $breakpoint);
-					}
-					.modal-body{
-						padding-top: map-get($gaps, $breakpoint);
-						padding-bottom: map-get($gaps, $breakpoint);
-					}
-				}
-			}
-		}
-		.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: 15px;
-				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 {
-			transform: none;
+	}
+}
+
+.modal-container {
+	background: white;
+	box-shadow: 0 2px 4px 0px rgba(0,0,0,.3);
+	box-sizing: border-box;
+	display: block;
+	overflow: hidden;
+	transform: scale(.6);
+	transition: transform .2s cubic-bezier(.25,.8,.25,1);
+	width: 90%;
+	.modal.show & {
+		transform: none;
+	}
+}
+.modal-heading,
+.modal-body,
+.modal-footer {
+	padding: .9rem map-get($gaps, 'default');
+}
+.modal-body{
+	padding-top: map-get($gaps, 'default');
+	padding-bottom: map-get($gaps, 'default');
+}
+@each $breakpoint, $breakpoint_width in $breakpoints {
+	@if map-get($gaps, $breakpoint) {
+		@media screen and (min-width: $breakpoint_width) {
+			.modal-heading,
+			.modal-body,
+			.modal-footer {
+				padding-left: map-get($gaps, $breakpoint);
+				padding-right: map-get($gaps, $breakpoint);
+			}
+			.modal-body{
+				padding-top: map-get($gaps, $breakpoint);
+				padding-bottom: map-get($gaps, $breakpoint);
+			}
 		}
 	}
 }
+.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: 15px;
+	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%);
+		}
+	}
+}
diff --git a/_typography.scss b/_typography.scss
@@ -1,15 +1,12 @@
 html {
     font-size: 90%;
-    @media screen and (min-width: map-get($breakpoints, 'sm')) {
+    @media screen and (min-width: map-get($breakpoints, 'md')) {
         font-size: 100%;
     }
 }
 body, input, textarea, select {
-    font-size: 1rem;
-    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-weight: 300;
-    letter-spacing: 0.01em;
-    line-height: 1.4;
+    font: 300 1rem/1.4 Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    letter-spacing: .01em;
     color: map-get($colors, 'text');
 }
 
@@ -34,22 +31,16 @@ body, input, textarea, select {
 
 section {
     h1 {
-        margin-top: -0.7rem;
+        margin-top: -.7rem;
     }
     h2 {
-        margin-top: -0.6rem;
+        margin-top: -.6rem;
     }
     h3 {
-        margin-top: -0.5rem;
+        margin-top: -.5rem;
     }
 }
 
-@each $color_name, $color_value in $colors {
-	section.bg-#{$color_name} + section.bg-#{$color_name} {
-		padding-top: 0;
-	}
-}
-
 p, h1, h2, h3, h4, h5, h6 {
     & + h1,
     & + h2,
@@ -67,7 +58,7 @@ a:not(.btn) {
     cursor: pointer;
     color: map-get($colors, 'primary');
     text-decoration: none;
-    transition: color 0.2s ease-in-out;
+    transition: color .2s ease-in-out;
     &:hover {
         text-decoration: none;
         color: lighten(map-get($colors, 'primary'), 10%);