Build legacy CSS via cssbundling as well

Add vanilla Sass builds that are also handled by cssbundling-rails.
2022-02-12 13:52:45 -06:00
parent 878eac083c
commit 8578fbdad9
11 changed files with 37 additions and 54 deletions
--- a/app/assets/stylesheets/legacy/_layout.scss
+++ b/app/assets/stylesheets/legacy/_layout.scss
@@ -0,0 +1,173 @@
+@import "variables";
+@import "mediaqueries";
+
+#wrapper {
+  width: 100%;
+  text-align: center;
+
+  > header {
+    margin: 0 auto;
+    padding: 4rem 0;
+    text-align: center;
+    background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
+                url('/img/bg-1.jpg');
+    background-size: cover;
+
+    @include media-max(small) {
+      padding: 3rem 0;
+    }
+
+    h1 {
+      color: #fff;
+
+      span.project-name {
+        display: none;
+      }
+
+      span.icon {
+        svg {
+          display: inline-block;
+          height: 1.875rem;
+          vertical-align: top;
+          width: auto;
+        }
+
+        margin-right: 0.5rem;
+      }
+    }
+
+    p.current-user {
+      color: rgba(255,255,255,0.6);
+
+      @include media-max(small) {
+        font-size: 0.85rem;
+      }
+    }
+
+    a {
+      color: rgba(255,255,255,0.6);
+      transition: color 0.1s linear;
+
+      &:hover, &:active {
+        color: #fff;
+      }
+    }
+  }
+}
+
+body#admin-panel {
+  #wrapper {
+    > header {
+      background: $color-red-bright;
+      background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
+                  url('/img/bg-1.jpg');
+    }
+  }
+
+  #main-nav {
+    ul {
+      grid-template-columns: repeat(4, 1fr);
+
+      li {
+        a {
+          &.active {
+            border-bottom: 2px solid $color-red-bright;
+          }
+        }
+      }
+    }
+  }
+}
+
+.flash-msg {
+  width: 100%;
+  text-align: center;
+  padding: 2rem 0;
+
+  &.notice {
+    background: $background-color-notice;
+  }
+
+  &.alert {
+    background: $background-color-alert;
+  }
+}
+
+main {
+  width: $content-width;
+  max-width: $content-max-width;
+  margin: 4rem auto 6rem auto;
+  text-align: left;
+
+  @include media-max(medium) {
+    max-width: 90%;
+  }
+
+  @include media-max(small) {
+    margin: 3rem auto;
+  }
+
+  p {
+    line-height: 1.5rem;
+    margin-bottom: 1rem;
+
+    &.notice {
+      text-align: center;
+    }
+  }
+
+  ul {
+    margin-bottom: 1.5rem;
+
+    li {
+      line-height: 1.5rem;
+    }
+  }
+
+  section {
+    margin-bottom: 3rem;
+
+    h2 {
+      display: none;
+    }
+  }
+
+  table {
+    width: 100%;
+
+    th, td {
+      &.hide-small {
+        @include media-max(small) {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      color: $text-color-discreet;
+      font-weight: normal;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      padding-bottom: 0.825rem;
+    }
+
+    td {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+}
+
+.grid {
+  display: grid;
+
+  &.services {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-row-gap: 1rem;
+    grid-column-gap: 2rem;
+
+    @include media-max(small) {
+      grid-template-columns: 1fr;
+    }
+  }
+}