Refactor base styles

assets/css/components/buttons.css

@@ -1,10 +1,6 @@
 /* Buttons
 /* ---------------------------------------------------------- */
 
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-button,
 .button {
     display: inline-block;
     height: var(--height);
@@ -23,18 +19,10 @@ button,
     transition: 0.4s ease;
 }
 
-input[type="submit"].fit,
-input[type="reset"].fit,
-input[type="button"].fit,
-button.fit,
 .button.fit {
     width: 100%;
 }
 
-input[type="submit"].small,
-input[type="reset"].small,
-input[type="button"].small,
-button.small,
 .button.small {
     height: calc(var(--height) * 0.9);
     line-height: calc(var(--height) * 0.9);
@@ -42,10 +30,6 @@ button.small,
     font-size: 1.2rem;
 }
 
-input[type="submit"].large,
-input[type="reset"].large,
-input[type="button"].large,
-button.large,
 .button.large {
     height: calc(var(--height) * 1.14);
     line-height: calc(var(--height) * 1.14);
@@ -53,37 +37,18 @@ button.large,
     font-size: 1.6rem;
 }
 
-
-input[type="submit"].disabled,
-input[type="submit"]:disabled,
-input[type="reset"].disabled,
-input[type="reset"]:disabled,
-input[type="button"].disabled,
-input[type="button"]:disabled,
-button.disabled,
-button:disabled,
 .button.disabled,
 .button:disabled {
     pointer-events: none;
     opacity: 0.4;
 }
 
-
-
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-button,
 .button {
     color: var(--color-primary) !important;
     background-color: transparent;
     box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-button:hover,
 .button:hover {
     text-decoration: none;
     color: color(var(--color-primary) l(-15%)) !important;
@@ -91,20 +56,12 @@ button:hover,
     transition: 0.2s ease;
 }
 
-input[type="submit"].primary,
-input[type="reset"].primary,
-input[type="button"].primary,
-button.primary,
 .button.primary {
     color: #fff !important;
     background-color: var(--color-primary);
     box-shadow: none;
 }
 
-input[type="submit"].primary:hover,
-input[type="reset"].primary:hover,
-input[type="button"].primary:hover,
-button.primary:hover,
 .button.primary:hover {
-        background-color: color(var(--color-primary) l(-10%));
+    background-color: color(var(--color-primary) l(-10%));
-    }
+}

assets/css/components/content.css

@@ -1,4 +1,58 @@
-/* Styling for Ghost-specific elements
+
+/* Tables
+/* ---------------------------------------------------------- */
+
+table {
+    border-collapse: separate;
+    margin: 0 0 var(--margin) 0;
+    width: 100%;
+    font-size: 0.8em;
+}
+
+th {
+    color: var(--color-base);
+    font-size: 0.9em;
+    font-weight: var(--font-bold);
+    padding: 0 0.7em 0.4em 0.7em;
+    text-align: left;
+}
+
+td {
+    padding: 0.4em 0.7em;
+    border-left-width: 0;
+    border-top-width: 0;
+}
+
+td:first-child {
+    border-left-width: 1px;
+}
+
+tbody tr {
+    border: solid 1px var(--color-border);
+    border-left: 0;
+    border-right: 0;
+}
+
+tbody tr:first-child td {
+    border-top-width: 1px;
+}
+
+tbody tr:nth-child(2n + 1) {
+    background-color: var(--color-bg);
+}
+
+tbody td {
+    border: solid 1px var(--color-border);
+    border-left-width: 0;
+    border-top-width: 0;
+}
+
+tfoot {
+    border-width: 0;
+}
+
+
+/* Cards
 /* ---------------------------------------------------------- */
 
 .kg-card {
@@ -220,90 +274,3 @@
     white-space: nowrap;
     overflow: hidden;
 }
-
-
-/* Members Forms
-/* ---------------------------------------------------------- */
-
-form[data-members-form] .button-loader,
-form[data-members-form] .message-success,
-form[data-members-form] .message-error {
-    display: none;
-}
-
-.message-success svg,
-.message-error svg {
-    position: relative;
-    top: -1px;
-    margin-right: 5px;
-    height: 15px;
-    width: 15px;
-}
-.message-success svg {
-    fill: #fff;
-}
-.message-error svg {
-    fill: var(--color-primary);
-}
-
-form[data-members-form].success .message-success,
-form[data-members-form].error .message-error {
-    position: fixed;
-    top: 20px;
-    left: 6vw;
-    right: 6vw;
-    z-index: 9999;
-    max-width: calc(1400px - 12vw);
-    margin: 0 auto;
-    padding: 10px 0;
-    color: #fff;
-    font-size: 1.4rem;
-    line-height: 1.5em;
-    font-weight: 500;
-    text-align: center;
-    background: var(--color-base);
-    border-radius: var(--radius);
-}
-form[data-members-form].success .message-success {
-    background: var(--color-success);
-}
-form[data-members-form].error .message-error {
-    color: var(--color-primary);
-    background: #fff;
-    box-shadow: var(--color-primary) 0 0 0 1px;
-}
-
-form[data-members-form] .button {
-    position: relative;
-}
-
-/*-- Loading --*/
-
-/* Hide button text */
-form[data-members-form].loading .button-content {
-    visibility: hidden;
-}
-
-/* Show loading spinner */
-form[data-members-form].loading .button-loader {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    margin-left: -19px;
-    transform: scale(0.7);
-}
-
-.button-loader svg path,
-.button-loader svg rect{
-  fill: #fff;
-}
-
-/*-- Show success message on success --*/
-form[data-members-form].success .message-success {
-    display: block;
-}
-
-/*-- Show error message on error --*/
-form[data-members-form].error .message-error {
-    display: block;
-}

assets/css/components/global.css

@@ -174,10 +174,10 @@ h6 {
 
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-  * {
+    * {
-    animation-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
+        animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+        scroll-behavior: auto !important;
-  }
+    }
 }

assets/css/components/lists.css

@@ -1,51 +0,0 @@
-/* Lists
-/* ---------------------------------------------------------- */
-
-ul,
-ol,
-dl {
-    margin: 0 0 var(--margin) 0;
-}
-
-ol,
-ul {
-    padding-left: 1.3em;
-    padding-right: 1.5em;
-}
-
-ol ol,
-ul ul,
-ul ol,
-ol ul {
-    margin: 0.5em 0 1em;
-}
-
-ul {
-    list-style: disc;
-}
-
-ol {
-    list-style: decimal;
-}
-
-ul,
-ol {
-    max-width: 100%;
-}
-
-li {
-    margin: 0.5em 0;
-    padding-left: 0.3em;
-    line-height: 1.6em;
-}
-
-
-dt {
-    display: block;
-    font-weight: var(--font-bold);
-    margin: 0 0 calc(var(--margin) * 0.5) 0;
-}
-
-dd {
-    margin-left: var(--margin);
-}

assets/css/components/members.css

@@ -0,0 +1,85 @@
+/* Members Forms
+/* ---------------------------------------------------------- */
+
+form[data-members-form] .button-loader,
+form[data-members-form] .message-success,
+form[data-members-form] .message-error {
+    display: none;
+}
+
+.message-success svg,
+.message-error svg {
+    position: relative;
+    top: -1px;
+    margin-right: 5px;
+    height: 15px;
+    width: 15px;
+}
+.message-success svg {
+    fill: #fff;
+}
+.message-error svg {
+    fill: var(--color-primary);
+}
+
+form[data-members-form].success .message-success,
+form[data-members-form].error .message-error {
+    position: fixed;
+    top: 20px;
+    left: 6vw;
+    right: 6vw;
+    z-index: 9999;
+    max-width: calc(1400px - 12vw);
+    margin: 0 auto;
+    padding: 10px 0;
+    color: #fff;
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    font-weight: 500;
+    text-align: center;
+    background: var(--color-base);
+    border-radius: var(--radius);
+}
+form[data-members-form].success .message-success {
+    background: var(--color-success);
+}
+form[data-members-form].error .message-error {
+    color: var(--color-primary);
+    background: #fff;
+    box-shadow: var(--color-primary) 0 0 0 1px;
+}
+
+form[data-members-form] .button {
+    position: relative;
+}
+
+/*-- Loading --*/
+
+/* Hide button text */
+form[data-members-form].loading .button-content {
+    visibility: hidden;
+}
+
+/* Show loading spinner */
+form[data-members-form].loading .button-loader {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    margin-left: -19px;
+    transform: scale(0.7);
+}
+
+.button-loader svg path,
+.button-loader svg rect{
+  fill: #fff;
+}
+
+/*-- Show success message on success --*/
+form[data-members-form].success .message-success {
+    display: block;
+}
+
+/*-- Show error message on error --*/
+form[data-members-form].error .message-error {
+    display: block;
+}

assets/css/components/tables.css

@@ -1,51 +0,0 @@
-/* Tables
-/* ---------------------------------------------------------- */
-
-table {
-    border-collapse: separate;
-    margin: 0 0 var(--margin) 0;
-    width: 100%;
-    font-size: 0.8em;
-}
-
-th {
-    color: var(--color-base);
-    font-size: 0.9em;
-    font-weight: var(--font-bold);
-    padding: 0 0.7em 0.4em 0.7em;
-    text-align: left;
-}
-
-td {
-    padding: 0.4em 0.7em;
-    border-left-width: 0;
-    border-top-width: 0;
-}
-
-td:first-child {
-    border-left-width: 1px;
-}
-
-tbody tr {
-    border: solid 1px var(--color-border);
-    border-left: 0;
-    border-right: 0;
-}
-
-tbody tr:first-child td {
-    border-top-width: 1px;
-}
-
-tbody tr:nth-child(2n + 1) {
-    background-color: var(--color-bg);
-}
-
-tbody td {
-    border: solid 1px var(--color-border);
-    border-left-width: 0;
-    border-top-width: 0;
-}
-
-tfoot {
-    border-width: 0;
-}

assets/css/screen.css

@@ -8,12 +8,16 @@ production stylesheet in assets/built/screen.css using: gulp dev
 
 /* Lib - Local component imports
 /* ---------------------------------------------------------- */
+
+/* Base */
 @import "vars.css";
 @import "components/global.css";
-@import "components/ghost.css";
+
-@import "components/lists.css";
+/* Ghost components */
-@import "components/grid.css";
+@import "components/content.css";
-@import "components/tables.css";
+@import "components/members.css";
+
+/* Global components */
 @import "components/forms.css";
 @import "components/buttons.css";