Move more common styles to _base

shipshapecode · Jul 12, 2018 · 76979d2 · 76979d2
1 parent a066a79
commit 76979d2
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 263 deletions.
diff --git a/src/css/_base.scss b/src/css/_base.scss
@@ -1,6 +1,7 @@
 @import "./mixins/cancel-link";
 @import "./mixins/pie-clearfix";
 @import "./mixins/inline-block";
+@import "./mixins/shepherd-button";
 @import "./helpers/popper";
 @import "./helpers/popper-theme-arrows";
 
@@ -53,5 +54,46 @@
         @include cancel-link;
       }
     }
+
+    footer {
+      padding: 0 1em 1em;
+
+      .#{$theme-prefix}-buttons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        text-align: right;
+
+        li {
+          display: inline;
+          margin: 0;
+          padding: 0;
+
+          .shepherd-button {
+            @include inline-block;
+
+            cursor: pointer;
+            margin: 0 0.5em 0 0;
+          }
+
+          &:last-child .shepherd-button {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .#{$theme-prefix}-text {
+      padding: 1em;
+
+      p {
+        line-height: 1.3em;
+        margin: 0 0 0.5em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }
diff --git a/src/css/mixins/_shepherd-button.scss b/src/css/mixins/_shepherd-button.scss
@@ -0,0 +1,19 @@
+@import '../variables';
+
+@mixin shepherd-button {
+  background: #3288e6;
+  border: 0;
+  border-radius: 3px;
+  color: $color-white;
+  font-family: inherit;
+  font-size: 0.8em;
+  letter-spacing: 0.1em;
+  line-height: 1em;
+  padding: 0.75em 2em;
+  text-transform: uppercase;
+
+  &.shepherd-button-secondary {
+    background: #eeeeee;
+    color: $color-grey;
+  }
+}
diff --git a/src/css/shepherd-theme-arrows-plain-buttons.scss b/src/css/shepherd-theme-arrows-plain-buttons.scss
@@ -16,44 +16,12 @@ $use-drop-shadow: true;
       border-radius: 5px 5px 0 0;
     }
 
-    .#{$theme-prefix}-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
     footer {
-      padding: 0 1em 1em;
-
       .#{$theme-prefix}-buttons {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: right;
-
         li {
-          display: inline;
-          margin: 0;
-          padding: 0;
-
           .shepherd-button {
-            @include inline-block;
-
-            cursor: pointer;
-            margin: 0 0.5em 0 0;
             text-decoration: none;
           }
-
-          &:last-child .shepherd-button {
-            margin-right: 0;
-          }
         }
       }
     }

diff --git a/src/css/shepherd-theme-arrows.scss b/src/css/shepherd-theme-arrows.scss
@@ -16,57 +16,11 @@ $use-drop-shadow: true;
       border-radius: 5px 5px 0 0;
     }
 
-    .#{$theme-prefix}-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
     footer {
-      padding: 0 1em 1em;
-
       .#{$theme-prefix}-buttons {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: right;
-
         li {
-          display: inline;
-          margin: 0;
-          padding: 0;
-
           .shepherd-button {
-            @include inline-block;
-
-            background: #3288e6;
-            border: 0;
-            border-radius: 3px;
-            color: $color-white;
-            cursor: pointer;
-            font-family: inherit;
-            font-size: 0.8em;
-            letter-spacing: 0.1em;
-            line-height: 1em;
-            margin: 0 0.5em 0 0;
-            padding: 0.75em 2em;
-            text-transform: uppercase;
-
-            &.shepherd-button-secondary {
-              background: #eeeeee;
-              color: $color-grey;
-            }
-          }
-
-          &:last-child .shepherd-button {
-            margin-right: 0;
+            @include shepherd-button;
           }
         }
       }

diff --git a/src/css/shepherd-theme-dark.scss b/src/css/shepherd-theme-dark.scss
@@ -22,57 +22,11 @@ $use-drop-shadow: false;
       border-radius: 5px 5px 0 0;
     }
 
-    .#{$theme-prefix}-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
     footer {
-      padding: 0 1em 1em;
-
       .#{$theme-prefix}-buttons {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: right;
-
         li {
-          display: inline;
-          margin: 0;
-          padding: 0;
-
           .shepherd-button {
-            @include inline-block;
-
-            background: #3288e6;
-            border: 0;
-            border-radius: 3px;
-            color: $color-white;
-            cursor: pointer;
-            font-family: inherit;
-            font-size: 0.8em;
-            letter-spacing: 0.1em;
-            line-height: 1em;
-            margin: 0 0.5em 0 0;
-            padding: 0.75em 2em;
-            text-transform: uppercase;
-
-            &.shepherd-button-secondary {
-              background: #eeeeee;
-              color: $color-grey;
-            }
-          }
-
-          &:last-child .shepherd-button {
-            margin-right: 0;
+            @include shepherd-button;
           }
         }
       }

diff --git a/src/css/shepherd-theme-default.scss b/src/css/shepherd-theme-default.scss
@@ -22,57 +22,11 @@ $use-drop-shadow: false;
       border-radius: 5px 5px 0 0;
     }
 
-    .#{$theme-prefix}-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
     footer {
-      padding: 0 1em 1em;
-
       .#{$theme-prefix}-buttons {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: right;
-
         li {
-          display: inline;
-          margin: 0;
-          padding: 0;
-
           .shepherd-button {
-            @include inline-block;
-
-            background: #3288e6;
-            border: 0;
-            border-radius: 3px;
-            color: $color-white;
-            cursor: pointer;
-            font-family: inherit;
-            font-size: 0.8em;
-            letter-spacing: 0.1em;
-            line-height: 1em;
-            margin: 0 0.5em 0 0;
-            padding: 0.75em 2em;
-            text-transform: uppercase;
-
-            &.shepherd-button-secondary {
-              background: #eeeeee;
-              color: $color-grey;
-            }
-          }
-
-          &:last-child .shepherd-button {
-            margin-right: 0;
+            @include shepherd-button;
           }
         }
       }

diff --git a/src/css/shepherd-theme-square-dark.scss b/src/css/shepherd-theme-square-dark.scss
@@ -24,57 +24,13 @@ $use-drop-shadow: false;
       border-radius: 0;
     }
 
-    .#{$theme-prefix}-text {
-      padding: 1em;
-
-      p {
-        line-height: 1.3em;
-        margin: 0 0 0.5em;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
     footer {
-      padding: 0 1em 1em;
-
       .#{$theme-prefix}-buttons {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: right;
-
         li {
-          display: inline;
-          margin: 0;
-          padding: 0;
-
           .shepherd-button {
-            @include inline-block;
+            @include shepherd-button;
 
-            background: #3288e6;
-            border: 0;
             border-radius: 0;
-            color: $color-white;
-            cursor: pointer;
-            font-family: inherit;
-            font-size: 0.8em;
-            letter-spacing: 0.1em;
-            line-height: 1em;
-            margin: 0 0.5em 0 0;
-            padding: 0.75em 2em;
-            text-transform: uppercase;
-
-            &.shepherd-button-secondary {
-              background: #eeeeee;
-              color: $color-grey;
-            }
-          }
-
-          &:last-child .shepherd-button {
-            margin-right: 0;
           }
         }
       }