✨ feat(default.scss): Improving default styling

- Updated fieldset - Fixed audio html element not displaying - Header elements now have margin-bottom: 1rem by default - Input types button and reset no longer span 100% width
Spiderpig86 · Jun 11, 2020 · 5678de0 · 5678de0
1 parent 828aa26
commit 5678de0
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 38 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -662,15 +662,15 @@ h6 {
   line-height: 1.2;
 }
 
-/* Silent header */
+/* Silent header Deprecated 0.5.6
 h1 .silent,
 h2 .silent,
 h3 .silent,
 h4 .silent,
 h5 .silent,
 h6 .silent {
   color: #788196;
-}
+} */
 
 h1 {
   font-size: 3rem;

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -42,7 +42,6 @@ ul {
 img,
 embed,
 object,
-audio,
 video {
   max-width: 100%;
   height: auto; }
@@ -81,6 +80,11 @@ label {
   display: inline-block;
   margin: 0.25rem 0; }
 
+fieldset {
+  padding: 1rem; }
+  fieldset legend {
+    font-weight: bold; }
+
 [hidden] {
   display: none !important; }
 
@@ -567,25 +571,51 @@ pre > code {
 /* FONT */
 @import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem; }
+
+h2 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem; }
+
+h3 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem; }
+
+h4 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem; }
+
+h5 {
   font-family: "Montserrat", sans-serif;
   font-weight: 700;
-  line-height: 1.2; }
+  line-height: 1.2;
+  margin-bottom: 1rem; }
 
-/* Silent header */
-h1 .silent,
-h2 .silent,
-h3 .silent,
-h4 .silent,
-h5 .silent,
-h6 .silent {
-  color: #788196; }
+h6 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem; }
 
+/* Silent header Deprecated 0.5.6
+h1 .silent,
+h2 .silent,
+h3 .silent,
+h4 .silent,
+h5 .silent,
+h6 .silent {
+  color: #788196;
+} */
 h1 {
   font-size: 3rem;
   letter-spacing: 0.025rem; }
@@ -638,7 +668,7 @@ strong {
   margin: 1rem 0; }
 
 .title {
-  font-weight: bolder; }
+  font-weight: bold; }
 
 .title:not(:last-child),
 .subtitle:not(:last-child) {
@@ -852,7 +882,7 @@ kbd {
     text-transform: uppercase; }
 
 /* FORMS */
-input:not([type=checkbox]):not([type=radio]):not([type=submit]),
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
 select {
   width: 100%;
   border: 1px solid #ddd;
@@ -1246,7 +1276,20 @@ input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-i
   background-color: var(--cirrus-bg);
   max-height: 100vh;
   padding: 0 2rem;
-  transition: all .3s; }
+  transition: all .3s;
+  /* Remove any padding set for headers in default.scss */ }
+  .header h1 {
+    margin: 0; }
+  .header h2 {
+    margin: 0; }
+  .header h3 {
+    margin: 0; }
+  .header h4 {
+    margin: 0; }
+  .header h5 {
+    margin: 0; }
+  .header h6 {
+    margin: 0; }
 
 .header a {
   color: #8292a2; }

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/core/button.scss b/src/core/button.scss
@@ -341,7 +341,7 @@ button.btn-close::after {
     padding: .25rem 1rem;
     font-size: 70%;
 }
-
+     
 /* Big button */
 .btn-large {
     padding: .75rem 2rem;

diff --git a/src/core/default.scss b/src/core/default.scss
@@ -43,7 +43,6 @@ ul {
 img,
 embed,
 object,
-audio,
 video {
     max-width: 100%;
     height: auto;
@@ -88,6 +87,14 @@ label {
     margin: 0.25rem 0;
 }
 
+fieldset {
+    padding: 1rem;
+
+    legend {
+        font-weight: bold;
+    }
+}
+
 [hidden] {
     display: none !important;
 }

diff --git a/src/core/font.scss b/src/core/font.scss
@@ -3,26 +3,24 @@
 @import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Montserrat", sans-serif;
-  font-weight: 700;
-  line-height: 1.2;
+@for $index from 1 through 6 {
+  h#{$index} {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
 }
 
-/* Silent header */
+/* Silent header Deprecated 0.5.6
 h1 .silent,
 h2 .silent,
 h3 .silent,
 h4 .silent,
 h5 .silent,
 h6 .silent {
   color: #788196;
-}
+} */
 
 h1 {
   font-size: 3rem;
@@ -89,7 +87,7 @@ strong {
 }
 
 .title {
-  font-weight: bolder;
+  font-weight: bold;
 }
 
 .title:not(:last-child),

diff --git a/src/core/forms.scss b/src/core/forms.scss
@@ -1,6 +1,6 @@
 /* FORMS */
 
-input:not([type=checkbox]):not([type=radio]):not([type=submit]),
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
 select {
     width: 100%;
     border: 1px solid #ddd;

diff --git a/src/core/header.scss b/src/core/header.scss
@@ -12,6 +12,13 @@
   max-height: 100vh;
   padding: 0 2rem;
   transition: all .3s;
+
+  /* Remove any padding set for headers in default.scss */
+  @for $i from 1 through 6 {
+    h#{$i} {
+      margin: 0;
+    }
+  }
 }
 
 .header a {