Remove header.css and replace with tailwind styles (#784)

cds-snc · Oct 9, 2020 · fc3a491 · fc3a491
1 parent 0ecc277
commit fc3a491
Show file tree

Hide file tree

Showing 14 changed files with 284 additions and 361 deletions.
diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css
diff --git a/app/assets/stylesheets/homepage.css b/app/assets/stylesheets/homepage.css
diff --git a/app/assets/stylesheets/tailwind/layout.css b/app/assets/stylesheets/tailwind/layout.css
@@ -0,0 +1,5 @@
+@layer components {
+  .container {
+    @apply mx-auto w-full;
+  }
+}
diff --git a/app/assets/stylesheets/tailwind/style.css b/app/assets/stylesheets/tailwind/style.css
@@ -1,4 +1,6 @@
 @tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 html {
   font-size: 62.5%;
@@ -13,7 +15,7 @@ h2 {
 }
 
 a {
-  @apply underline text-base;
+  @apply underline text-smaller;
 }
 
 p {
@@ -24,22 +26,36 @@ li {
   @apply text-base leading-tight;
 }
 
+.btn {
+  padding: .526315em .789473em .263157em;
+  @apply no-underline inline-block text-white text-smaller leading-tight;
+}
+
 .btn-blue {
   background-color: theme("colors.blue.lighter");
-  @apply py-4 px-5 font-bold no-underline border-b-2;
+  @apply px-5 py-4 border-b-2 border-black font-bold text-black text-base;
 }
 
-.btn-light {
-  color: theme("colors.green.default");
-  border-color: theme("colors.green.default");
-  background-color: theme("colors.white.default");
-  @apply py-4 px-6 font-bold no-underline border-2;
-  border-bottom: 4px solid theme("colors.green.dark");
+.btn-green {
+  background-color: theme("colors.green.default");
+  box-shadow: 0 2px 0 theme("colors.green.border");
+}
+.btn-green:hover {
+  background-color: theme("colors.green.hover");
 }
 
-@tailwind components;
-
-@tailwind utilities;
+/* Homepage Button */
+#contact-form .btn {
+  color: theme("colors.green.darker");
+  border-color: theme("colors.green.darker");
+  background-color: theme("colors.white.default");
+  @apply px-6 py-4 border-b-4 font-bold border-2;
+  border-bottom: 4px solid;
+  box-shadow: none;
+}
+#contact-form .btn:hover {
+  @apply bg-gray-selected;
+}
 
 .input {
   border-color: #000;

diff --git a/app/assets/stylesheets/tailwind/typography.css b/app/assets/stylesheets/tailwind/typography.css
@@ -0,0 +1,4 @@
+@layer components {
+  /* links */
+
+}
diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html
@@ -15,7 +15,7 @@
       <button
         data-button-id={{button_id}}
         type="submit"
-        class="btn-light text-base outline-none focus:shadow-outline hover:bg-gray-selected button{% if destructive %}-destructive{% endif %}"
+        class="btn btn-green text-base outline-none focus:shadow-outline {% if destructive %}-destructive{% endif %}"
         {% if button_name %}name="{{ button_name }}"{% endif %}
         {% if button_value %}value="{{ button_value }}"{% endif %}
       >