Move detail tag form SCSS into its own file

Weasyl · Dec 5, 2024 · 59d64b3 · 59d64b3
1 parent 604c689
commit 59d64b3
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 130 deletions.
diff --git a/assets/scss/components/_detail-tag-form.scss b/assets/scss/components/_detail-tag-form.scss
@@ -0,0 +1,135 @@
+.tags-textarea {
+    font-size: 14px;
+    box-sizing: border-box;
+    width: 100% !important;
+}
+
+.tags-with-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;  // for “(No tags)”
+}
+
+.tags {
+    // fallback if `display: contents` not supported
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+
+    display: contents;
+}
+
+$tag-background: #eee;
+
+.tag {
+    display: inline-block;
+    line-height: 1.75rem;
+    padding: 0 1em;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: $tag-background;
+    font-weight: normal;
+}
+
+.tag-suggested, .content .tag-suggested {
+    background-color: scale-color($tag-background, $alpha: -30%);
+    border-style: dashed;
+    color: scale-color($link-color, $alpha: -20%);
+}
+
+.tag-actions {
+    display: flex;
+    align-items: center;
+    height: 1.75rem;
+    padding-left: 1em;
+    gap: 16px;
+}
+
+.suggested-tags {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    gap: 8px;
+
+    > li {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+}
+
+.suggested-tag-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    gap: 4px;
+}
+
+$tag-reject-deemphasize-size: 11px;
+
+.tag-reject-feedback {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    gap: 4px;
+
+    > label {
+        display: flex;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    > output {
+        font-size: $tag-reject-deemphasize-size;
+    }
+}
+
+.tag-reject-feedback[hidden] {
+    display: none;
+}
+
+.tag-reject-label {
+    flex: 1;
+
+    > p {
+        font-size: $tag-reject-deemphasize-size;
+        color: $content-color-lighter;
+    }
+}
+
+@keyframes pulse {
+    from {
+    }
+    to {
+        color: #777;
+    }
+}
+
+.tag-form-status-saving {
+    animation: pulse 0.75s linear alternate infinite;
+}
+
+.tags-manage {
+    margin-top: 12px;
+}
+
+.tags-actions {
+    margin-top: 8px;
+}
+
+@media (min-width: 45em) {
+    .di-tags {
+        width: 48%;
+        margin-right: 0;
+        margin-left: auto;
+    }
+}
+
+@media (min-width: 65em) {
+    .di-tags {
+        width: auto;
+        float: none;
+        margin-left: 0;
+    }
+}
diff --git a/assets/scss/site.scss b/assets/scss/site.scss
@@ -1,6 +1,7 @@
 @import 'theme';
 @import 'reset';
 @import 'components/date-picker';
+@import 'components/detail-tag-form';
 @import 'components/edit-profile';
 @import 'components/option';
 @import 'components/page-navigation';
@@ -1474,121 +1475,6 @@ blockquote + blockquote {
     }
 }
 
-/* ------------------------------------ =tags -- */
-
-.tags-textarea {
-    font-size: 14px;
-    box-sizing: border-box;
-    width: 100% !important;
-}
-
-.tags-with-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-    align-items: center;  // for “(No tags)”
-}
-
-.tags {
-    // fallback if `display: contents` not supported
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-
-    display: contents;
-}
-
-$tag-background: #eee;
-
-.tag {
-    display: inline-block;
-    line-height: 1.75rem;
-    padding: 0 1em;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-color: $tag-background;
-    font-weight: normal;
-}
-
-.tag-suggested,
-.content .tag-suggested {
-    background-color: scale-color($tag-background, $alpha: -30%);
-    border-style: dashed;
-    color: scale-color($link-color, $alpha: -20%);
-}
-
-.tag-actions {
-    display: flex;
-    align-items: center;
-    height: 1.75rem;
-    padding-left: 1em;
-    gap: 16px;
-}
-
-.suggested-tags {
-    display: flex;
-    flex-direction: column;
-    margin-top: 16px;
-    gap: 8px;
-
-    > li {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-    }
-}
-
-.suggested-tag-actions {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    gap: 4px;
-}
-
-$tag-reject-deemphasize-size: 11px;
-
-.tag-reject-feedback {
-    display: flex;
-    flex-direction: column;
-    margin-top: 16px;
-    gap: 4px;
-
-    > label {
-        display: flex;
-        align-items: flex-start;
-        gap: 4px;
-    }
-
-    > output {
-        font-size: $tag-reject-deemphasize-size;
-    }
-}
-
-.tag-reject-feedback[hidden] {
-    display: none;
-}
-
-.tag-reject-label {
-    flex: 1;
-
-    > p {
-        font-size: $tag-reject-deemphasize-size;
-        color: $content-color-lighter;
-    }
-}
-
-@keyframes pulse {
-    from {
-    }
-    to {
-        color: #777;
-    }
-}
-
-.tag-form-status-saving {
-    animation: pulse 0.75s linear alternate infinite;
-}
-
 /* ------------------------------------ =forms -- */
 
 #login-top {
@@ -3206,14 +3092,6 @@ img + #detail-art-text {
     font-weight: 400;
 }
 
-.tags-manage {
-    margin-top: 12px;
-}
-
-.tags-actions {
-    margin-top: 8px;
-}
-
 #detail-comments {
     clear: both;
 }
@@ -3325,12 +3203,6 @@ img + #detail-art-text {
         clear: left;
     }
 
-    .di-tags {
-        width: 48%;
-        margin-right: 0;
-        margin-left: auto;
-    }
-
     .detail-folder-nav {
         margin: 6em auto 4em;
         max-width: 20em;
@@ -3460,7 +3332,7 @@ img + #detail-art-text {
         padding-top: 2rem;
     }
 
-    #di-info, .di-tags, #detail-manage, #detail-collection-offer, #detail-mod {
+    #di-info, #detail-manage, #detail-collection-offer, #detail-mod {
         width: auto;
         float: none;
         margin-left: 0;