Merge pull request #22 from elmastudio/ellen-working

Ellen working

assets/src/sass/1-base/_base-index.scss

@@ -0,0 +1,7 @@
+@import "mixins";
+@import "variables";
+@import "colors";
+@import "sanitize";
+@import "typography";
+@import "media";
+@import "helper";

assets/src/sass/1-base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+
+	/* Base theme colors (not customizable via global styles) */
+	--global--color--notification-bg: #CEF0F8;
+	--global--color--notification-border: #75D7F0;
+	--global--color--success-bg: #CFF7D3;
+	--global--color--success-border: #85E0A3;
+	--global--color--danger-bg: #FFE2E0;
+	--global--color--danger-border: #FFAFA3;
+	--global--color--warning-bg: #FFF1C2;
+	--global--color--warning-border: #FFD966;
+	--global--color--variant-notification: #0087A8;
+	--global--color--variant-notification-background: #D8F4FA;
+	--global--color--variant-success: #198F51;
+	--global--color--variant-success-background: #BEEFC2;
+	--global--color--variant-error: #E03E1A;
+	--global--color--variant-error-background: #FCCDCA;
+}

assets/src/sass/1-base/_helper.scss

@@ -0,0 +1,142 @@
+.mobile-hide {
+	display: none !important;
+}
+
+@include breakpoint(md) {
+
+	.tablet-hide {
+		display: none !important;
+	}
+
+	.tablet-show {
+		display: block !important;
+	}
+
+	.tablet-flex {
+		display: flex;
+	}
+
+	.justify-between {
+		justify-content: space-between;
+	}
+}
+
+@include breakpoint(lg) {
+
+	.desktop-hide {
+		display: none !important;
+	}
+
+	.desktop-show {
+		display: block !important;
+	}
+
+	.desktop-flex {
+		display: flex;
+	}
+}
+
+.no-hyphens {
+	hyphens: none !important;
+}
+
+.relative {
+	position: relative;
+}
+
+.absolute {
+	position: absolute;
+}
+
+.top-fullwidth {
+	top: 0;
+	left: 0;
+	right: 0;
+}
+
+.bottom-fullwidth {
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.zindex100 {
+	z-index: 100;
+}
+
+.zindex1000 {
+	z-index: 1000;
+}
+
+.display-block {
+	display: block !important;
+}
+
+.display-flex {
+	display: flex !important;
+}
+
+.display-inline {
+	display: inline !important;
+}
+
+.height-100 {
+	height: 100%;
+}
+
+.width-100 {
+	width: 100%;
+}
+
+@media only screen and (max-width: 48em) {
+
+	.mobile-hide {
+		&__border-left {
+			border-left-width: 0 !important;
+		}
+	}
+
+	.mobile-hide {
+		&__padding-left {
+			padding-left: 0 !important;
+		}
+	}
+}
+
+@media only screen and (max-width: 64em) {
+
+	.mobile-justify-right {
+		justify-content: flex-end !important;
+	}
+}
+
+@include breakpoint(md) {
+
+	.tablet-show {
+		&__border-left {
+			border-left-width: 1px !important;
+		}
+	}
+
+	.tablet-flex-row,
+	.tablet-flex-row ul {
+		flex-direction: row !important;
+	}
+}
+
+.badge-popular {right: 0 !important; top: -20px !important;}
+
+.is-grid {
+	display: grid;
+}
+
+/* Centered elements */
+.push-center,
+.center {
+	@include push--auto;
+}
+
+/* Typography */
+.justify {
+	text-align: justify;
+}

assets/src/sass/1-base/_media.scss

@@ -0,0 +1,20 @@
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+img,
+video {
+	height: auto;
+	max-width: 100%;
+}
+
+audio,
+video {
+	display: inline-block;
+}
+
+figure {
+	margin: 0;
+}