Auto merge of #2109 - Turbo87:style-files, r=locks

Split up styles into per-route/component style files

This makes the styles of a component/route a lot easier to find and maintain.

I would like to eventually use https://github.com/salsify/ember-css-modules for this project, which will ensure proper scoping too.

r? @locks

Author: bors

app/styles/_buttons.scss

@@ -0,0 +1,54 @@
+@mixin vertical-gradient($start, $end) {
+    background: $end;
+    background: -moz-linear-gradient(top, $start 0%, $end 100%);
+    background: -webkit-gradient(linear, left top, left bottom,
+        color-stop(0%,$start),
+        color-stop(100%,$end));
+    background: -webkit-linear-gradient(top, $start 0%,$end 100%);
+    background: -ms-linear-gradient(top, $start 0%,$end 100%);
+    background: linear-gradient(to bottom, $start 0%,$end 100%);
+}
+
+@mixin button($start, $end) {
+    $start_dark: darken($start, 5%);
+    $end_dark: darken($end, 5%);
+    $start_light: lighten($start, 5%);
+    $end_light: lighten($end, 5%);
+
+    padding: 15px 40px;
+    display: inline-block;
+    color: $main-color;
+    text-decoration: none;
+    font-weight: bold;
+    border: none;
+    outline: 0;
+    border-radius: 30px;
+    @include vertical-gradient($start, $end);
+
+    img, svg {
+        float: left;
+        display: inline-block;
+        margin-right: 10px;
+    }
+
+    &:hover, &:focus { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
+    &.active { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
+    &[disabled] {
+        @include vertical-gradient($start_light, $end_light);
+        color: $main-color-light;
+    }
+}
+
+.yellow-button {
+    @include button(#fede9e, #fdc452);
+    vertical-align: middle;
+}
+
+button.small {
+    padding: 10px 20px;
+    border-radius: 30px;
+}
+
+.tan-button {
+    @include button(rgb(232, 227, 199), rgb(214, 205, 153));
+}

app/styles/app.scss

@@ -8,9 +8,22 @@ $main-bg-dark: #edebdd;
 $gray-border: #d5d3cb;
 $link-color: rgb(0, 172, 91);
 
+@import "buttons";
+
+@import "application";
 @import "home";
+@import "catch-all";
+@import "category-slugs";
 @import "crate";
+@import "crate/version";
+@import "components/crate-toml-copy";
+@import "components/flash-message";
+@import "components/pagination";
+@import "dashboard";
+@import "index";
+@import "loading";
 @import "me";
+@import "search";
 
 * {
   box-sizing: border-box;
@@ -41,101 +54,8 @@ body > div {
 }
 
 #noscript {
-  color: white;
-  padding: 10px 0;
-}
-
-#main {
-  display: flex;
-  flex-direction: column;
-
-  margin-bottom: 10px;
-  background-color: $main-bg;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0px 0px 5px 2px #3b6837;
-  border: 5px solid #62865f;
-  color: $main-color;
-}
-
-#header {
     color: white;
-    position: relative;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    a {
-        color: white; text-decoration: none;
-        &:hover { color: darken(white, 15%); }
-    }
-
-    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
-    .nav, .menu {
-        text-align: right;
-        margin-right: 5px;
-    }
-
-    .menu {
-        flex-grow: 2;
-        display: none;
-    }
-    .menu ul.dropdown {
-        right: 0;
-        left: auto;
-        min-width: 200px;
-    }
-
-    button {
-        background: none;
-        border: 0;
-        padding: 10px 0;
-
-        &.active {
-            background: rgb(42, 79, 39);
-            box-shadow: inset -2px 2px 4px 0px rgb(36, 61, 38);
-        }
-
-        img {
-          vertical-align: top;
-        }
-    }
-
-    .current-user-links {
-        left: auto;
-        right: 0;
-        min-width: 200px;
-    }
-    #doc-links {
-        left: auto;
-        min-width: 150px;
-    }
-    form.search {
-        display: flex;
-        flex-grow: 1;
-    }
-    @media only screen and (max-width: 820px) {
-        form.search { display: none; }
-    }
-    @media only screen and (max-width: 900px) {
-        .menu { display: block; }
-        .nav { display: none; }
-    }
-}
-
-#header input.search, #mobile-search input.search {
-    font-size: 90%;
-    border: none;
-    color: black;
-    margin-left: 30px;
-    padding: 5px 5px 5px 25px;
-    background-color: white;
-    background-image: url('/assets/search.png');
-    background-repeat: no-repeat;
-    background-position: 6px 6px;
-    background-size: 14px 15px;
-    border-radius: 15px;
+    padding: 10px 0;
 }
 
 form.search label {
@@ -147,26 +67,6 @@ form.search label {
     overflow: hidden;
 }
 
-#header input.search {
-    width: 100%;
-    margin-left: 16px;
-    margin-right: 16px;
-}
-
-#mobile-search {
-    display: none;
-    margin-bottom: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-    input.search {
-        width: 100%;
-        margin: 0;
-    }
-    @media only screen and (max-width: 820px) {
-        display: block;
-    }
-}
-
 input.search {
     box-shadow: none;
 }
@@ -189,34 +89,6 @@ span.small {
     color: rgb(166, 0, 0)
 }
 
-div.loading-state {
-    text-align: center;
-    height: 65vh;
-    padding-top: 30vh;
-}
-span.loading {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    background-image: url(/assets/ajax-loader.gif);
-}
-
-#flash {
-    display: none;
-    font-weight: bold;
-    font-size: 110%;
-    background-color: rgb(255, 213, 213);
-    border: 2px solid rgb(228, 136, 136);
-    text-align: center;
-    margin: 0 0 10px 0;
-    padding: 10px;
-    border-radius: 5px;
-
-    &.shown {
-        display: block;
-    }
-}
-
 a {
     color: $link-color;
     text-decoration: none;
@@ -229,46 +101,13 @@ a {
     &:hover { color: darken($main-color-light, 10%); }
 }
 
-.after-main-links {
-    margin: 40px;
-
-    a { color: white; }
-    a:hover { color: darken(white, 10%); }
-    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
-
-    @media only screen and (max-width: 450px) {
-        margin: 20px;
-        .sep { display: none; }
-        display: flex;
-        flex-direction: column;
-
-        a {
-            width: 50%;
-            font-size: 110%;
-            padding: 5px;
-            &:not(:first-child) { border-top: 1px solid darken($html-bg, 10%); }
-        }
-    }
-}
-
 pre {
     background: $main-color;
     color: white;
     padding: 20px;
     font-family: Consolas, Monaco, 'Andale Mono', monospace;
 }
 
-.pagination {
-    img, svg { vertical-align: middle; }
-
-    .next.active,
-    .prev.active,
-    .next:hover,
-    .prev:hover {
-        background: none;
-    }
-}
-
 button.dropdown, a.dropdown {
     color: inherit;
     cursor: pointer;
@@ -320,16 +159,6 @@ ul.dropdown {
 
 .hidden { display: none; }
 
-.fork-me {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    @media only screen and (max-width: 1180px) {
-        display: none;
-    }
-}
-
 @media only screen and (max-width: 400px) {
     h1 { font-size: 1.5em; }
 }
@@ -341,15 +170,6 @@ h1 {
   }
 }
 
-#p404 {
-    font-size: 120%;
-    line-height: 3em;
-    input {
-        width: 100%;
-        padding: 5px;
-    }
-}
-
 .arrow-in-list svg {
     background: #fff;
 }
@@ -362,9 +182,3 @@ abbr[title] {
     text-decoration: none;
     border-bottom: 1px dotted;
 }
-
-@media only percy {
-    #crate-downloads .graph {
-       display: none;
-    }
-}