update styles

karlyanelson · Dec 30, 2020 · dfacf33 · dfacf33
1 parent 04f6ef7
commit dfacf33
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 33 deletions.
diff --git a/src/js/components/CharacterList.js b/src/js/components/CharacterList.js
@@ -45,18 +45,18 @@ function characterListItem(character, index) {
   // Template Content
   return `
     <li 
-      class='characterListItem border border-gray rounded my-3 transition-all duration-300 ease-in-out ${
+      class='characterListItem border rounded my-3 transition-all duration-300 ease-in-out bg-ink ${
         charExpanded
-          ? "shadow-high relative z-10 bg-ink-dark"
-          : "shadow-button bg-opacity-75 bg-ink"
+          ? "shadow-high relative z-10 border-gray"
+          : "shadow-button border-black"
       }' 
       data-id='${character.id}' 
       data-index='${index}'
     > 
       <button data-toggle-character 
         aria-expanded=${charExpanded} 
         class='${
-          charExpanded ? "" : "hover:shadow-high"
+          charExpanded ? "" : "hover:shadow-high hover:bg-ink"
         } p-2 w-full text-white text-left text-base break-all flex items-center justify-between'> 
         <span 
           class='inline-block rounded-circle h-6 w-6 border border-black bg-no-repeat bg-center bg-cover flex-none' 
@@ -67,7 +67,7 @@ function characterListItem(character, index) {
         <span class='ml-2 flex-none ${arrow}'></span> 
       </button> 
 
-      <div class='border-t border-gray p-2 ${hidden} '> 
+      <div class='border-t border-gray px-4 pt-2 pb-4 ${hidden} '> 
         <fieldset> 
           <legend class='screenreader-only'>${btnCharName}'s Settings</legend> 
           <div class='flex items-center justify-between py-1' > 

diff --git a/src/styles.css b/src/styles.css
@@ -16,19 +16,48 @@
   @apply outline-custom;
 }
 
+button:focus {
+  @apply outline-custom;
+}
+
 a {
   text-decoration: underline;
 }
 
+body {
+  @apply bg-black text-white scrolling-touch;
+}
+
 body,
 button,
 textarea,
-input {
+input,
+select {
   @apply font-dnd;
 }
 
-body {
-  @apply bg-black text-white scrolling-touch;
+button,
+input,
+label,
+textarea,
+select {
+  @apply text-sm;
+  line-height: normal;
+}
+textarea,
+input,
+select {
+  @apply rounded border-2 border-black text-ink p-1 w-full;
+}
+
+label,
+input,
+select {
+  @apply block;
+}
+
+label {
+  @apply mt-1 mb-2 ml-0;
 }
 
 fieldset {
@@ -39,13 +68,6 @@ img {
   @apply max-w-none;
 }
 
-button,
-input,
-label {
-  @apply text-sm;
-  line-height: normal;
-}
-
 a {
   @apply text-white;
 }
@@ -75,7 +97,6 @@ h2 {
   @apply shadow-none;
 }
 
-button:focus,
 .button:focus {
   @apply outline-custom;
   outline-offset: -2px;
@@ -86,22 +107,7 @@ button:focus,
 }
 
 .button-error {
-  @apply text-error bg-transparent inline-block border border-error py-1 px-2 rounded font-semibold tracking-wide;
-}
-
-label,
-input,
-select {
-  @apply block;
-}
-
-label {
-  @apply mt-1 mb-2 ml-0;
-}
-
-input,
-select {
-  @apply text-ink p-1 w-full;
+  @apply text-error bg-transparent inline-block border-2 border-error py-1 px-2 rounded font-semibold tracking-wide;
 }
 
 input[type="number"] {
@@ -121,7 +127,7 @@ input[type="file"] {
 }
 
 textarea {
-  @apply w-full min-w-full min-h-40 p-2;
+  @apply w-full min-w-full min-h-40;
 }
 
 [type="file"]:focus + label {