mod-base 1.0.2-beta.2 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mod-base",
-    "version": "1.0.2-beta.2",
+    "version": "1.0.2",
     "description": "Base Styles for S3 Sites",
     "author": "",
     "license": "ISC"

package/src/styles/base/_breakpoint-mixins.scss

@@ -11,14 +11,14 @@
 }
 
 @mixin breakpoint-phone {
-	@include media-max-width(767.9px) {
+	@include media-max-width(767.98px) {
 		@content;
 	}
 }
 
 // Mobile first breakpoint mixins
 @mixin breakpoint-sm {
-	@include media-min-width(500px) {
+	@include media-min-width(576px) {
 		@content;
 	}
 }
@@ -41,7 +41,7 @@
 	}
 }
 
-@mixin breakpoint-2xl {
+@mixin breakpoint-xxl {
 	@include media-min-width(1440px) {
 		@content;
 	}

package/src/styles/base/_built-in-classes.scss

@@ -0,0 +1,22 @@
+/**
+ * Visually hide an element while still allowing it to be
+ * exposed to assistive technologies
+ */
+.visually-hidden {
+	border: 0;
+	clip: rect(0,0,0,0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    white-space: nowrap;
+	width: 1px;
+}
+
+/**
+ * Show / hide an element based on screen size
+ */
+
+.hidden {
+	display: none;
+}

package/src/styles/base/_reset.scss

@@ -150,3 +150,9 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+*,
+:after,
+:before {
+	box-sizing: border-box;
+}

package/src/styles/base/index.scss

@@ -1,6 +1,7 @@
 @import 'reset';
 
 @import 'breakpoint-mixins';
+@import 'built-in-classes';
 @import 'colors';
 @import 'flex';
 @import 'fonts';