Update starting stylesheets

scriptex · Feb 18, 2018 · 4e69d80 · 4e69d80
1 parent 4ee7453
commit 4e69d80
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 138 deletions.
diff --git a/assets/styles/components/_btn.scss b/assets/styles/components/_btn.scss
@@ -1,4 +1,4 @@
-// Button
+// Buttons
 
 .c-btn {
 	text-align: center;
@@ -8,6 +8,11 @@
 	cursor: pointer;
 	appearance: none;
 
+	&.disabled,
+	&[disabled] {
+		cursor: default;
+	}
+
 	&--block {
 		width: 100%;
 		display: block;

diff --git a/assets/styles/elements/_links.scss b/assets/styles/elements/_links.scss
@@ -3,9 +3,12 @@
 a {
 	color: $color-action;
 	text-decoration: underline;
+	cursor: pointer;
 
 	&[href^='tel'] {
 		color: inherit;
+		cursor: default;
+		appearance: none;
 	}
 
 	&:hover,

diff --git a/assets/styles/generic/_form_elements.scss b/assets/styles/generic/_form_elements.scss
@@ -0,0 +1,91 @@
+// Form Elements
+
+fieldset {
+	padding: 0;
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='reset'],
+input[type='file'],
+input[type='image'],
+label[for] {
+	cursor: pointer;
+}
+
+button[disabled],
+input[disabled],
+textarea[disabled],
+select[disabled] {
+	cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	padding: 0;
+	border: 0;
+}
+
+input[type='text'],
+input[type='password'],
+input[type='date'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='month'],
+input[type='week'],
+input[type='email'],
+input[type='number'],
+input[type='search'],
+input[type='tel'],
+input[type='time'],
+input[type='url'],
+input[type='color'],
+textarea {
+	appearance: none;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+	appearance: none;
+}
+
+textarea {
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+}
+
+button,
+select {
+	text-transform: none;
+}
+
+input::placeholder {
+	color: inherit;
+	opacity: 1;
+}
+
+textarea::placeholder {
+	color: inherit;
+	opacity: 1;
+}
+
+input:-webkit-autofill {
+	-webkit-text-fill-color: inherit;
+	-webkit-box-shadow: 0 0 0 1000px $color-white inset;
+}
diff --git a/assets/styles/generic/_reset.scss b/assets/styles/generic/_reset.scss
@@ -53,124 +53,10 @@ img {
 	vertical-align: middle;
 }
 
-template {
-	display: none;
-}
-
 svg:not(:root) {
 	overflow: hidden;
 }
 
-fieldset {
-	padding: 0;
-}
-
 figure {
 	margin: 0;
 }
-
-a,
-button,
-input[type='submit'],
-input[type='button'],
-input[type='reset'],
-input[type='file'],
-input[type='image'],
-label[for],
-.c-btn {
-	cursor: pointer;
-}
-
-a[href^='tel'],
-button[disabled],
-input[disabled],
-textarea[disabled],
-select[disabled],
-.c-btn.disabled,
-.c-btn[disabled] {
-	cursor: default;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-	padding: 0;
-	border: 0;
-}
-
-input[type='text'],
-input[type='password'],
-input[type='date'],
-input[type='datetime'],
-input[type='datetime-local'],
-input[type='month'],
-input[type='week'],
-input[type='email'],
-input[type='number'],
-input[type='search'],
-input[type='tel'],
-input[type='time'],
-input[type='url'],
-input[type='color'],
-textarea,
-a[href^='tel'] {
-	appearance: none;
-}
-
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
-	appearance: none;
-}
-
-textarea {
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-	overflow-scrolling: touch;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-	font-family: inherit;
-	font-size: inherit;
-	color: inherit;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-	font-smoothing: antialiased;
-	text-rendering: optimizeLegibility;
-}
-
-button,
-select {
-	text-transform: none;
-}
-
-input::placeholder {
-	color: inherit;
-	opacity: 1;
-}
-
-textarea::placeholder {
-	color: inherit;
-	opacity: 1;
-}
-
-input:-webkit-autofill {
-	-webkit-text-fill-color: inherit;
-	-webkit-box-shadow: 0 0 0 1000px $color-white inset;
-}
-
-a,
-a img,
-input,
-button,
-select,
-textarea,
-.c-btn,
-[class^='svg-'] {
-	transition-property: color, opacity, border-color, background-color,
-		box-shadow, fill, stroke;
-	transition-duration: $timing;
-	transition-timing-function: $easing;
-}
diff --git a/assets/styles/generic/_transitions.scss b/assets/styles/generic/_transitions.scss
@@ -0,0 +1,15 @@
+// Transitions
+
+a,
+a img,
+input,
+button,
+select,
+textarea,
+.c-btn,
+[class^='svg-'] {
+	transition-property: color, opacity, border-color, background-color,
+		box-shadow, fill, stroke;
+	transition-duration: $timing;
+	transition-timing-function: $easing;
+}
diff --git a/assets/styles/objects/_grid.scss b/assets/styles/objects/_grid.scss
@@ -15,7 +15,7 @@
 		}
 
 		&--1of3 {
-			flex: 0 0 33.33333%;
+			flex: 0 0 calc(100% / 3);
 		}
 
 		&--2of3 {
@@ -25,5 +25,9 @@
 		&--1of5 {
 			flex: 0 0 20%;
 		}
+
+		&--1of6 {
+			flex: 0 0 calc(100% / 6);
+		}
 	}
 }
diff --git a/assets/styles/objects/_main.scss b/assets/styles/objects/_main.scss
@@ -0,0 +1,5 @@
+// Main
+
+.o-main {
+	flex: 1;
+}
diff --git a/assets/styles/objects/_wrapper.scss b/assets/styles/objects/_wrapper.scss
@@ -2,4 +2,5 @@
 
 .o-wrapper {
 	min-height: 100vh;
+	@include flex-column(nowrap, stretch, flex-start);
 }
diff --git a/assets/styles/settings/_colors.scss b/assets/styles/settings/_colors.scss
@@ -0,0 +1,6 @@
+// Colors
+
+$color-base: #333;
+$color-white: #fff;
+$color-black: #000;
+$color-action: #ef4c23;
diff --git a/assets/styles/settings/_text.scss b/assets/styles/settings/_text.scss
@@ -0,0 +1,15 @@
+// Text settings
+
+$font-sans-serif: sans-serif;
+$font-serif: serif;
+$font-monospace: monospace;
+
+$font-size-base: 1rem;
+$line-height-base: 1.35;
+
+$font-size-h1: 2rem;
+$font-size-h2: 1.75rem;
+$font-size-h3: 1.5rem;
+$font-size-h4: 1.25rem;
+$font-size-h5: $font-size-base;
+$font-size-h6: 0.75rem;
diff --git a/assets/styles/settings/_transitions.scss b/assets/styles/settings/_transitions.scss
@@ -0,0 +1,4 @@
+// Transition and Animation Settings
+
+$timing: 0.4s;
+$easing: ease-in-out;
diff --git a/assets/styles/settings/_variables.scss b/assets/styles/settings/_variables.scss
@@ -1,30 +1,8 @@
 // Variables
 
-$font-sans-serif: sans-serif;
-$font-serif: serif;
-$font-monospace: monospace;
-
-$font-size-base: 1rem;
-$line-height-base: 1.35;
-
-$font-size-h1: 2rem;
-$font-size-h2: 1.75rem;
-$font-size-h3: 1.5rem;
-$font-size-h4: 1.25rem;
-$font-size-h5: $font-size-base;
-$font-size-h6: 0.75rem;
-
-$color-base: #333;
-$color-white: #fff;
-$color-black: #000;
-$color-action: #ef4c23;
-
 $shell-width: 75rem;
 
 $small-desktop: 1439px;
 $tablet-landscape: 1279px;
 $tablet-portrait: 1023px;
 $mobile: 767px;
-
-$timing: 0.4s;
-$easing: ease-in-out;