Post settings menu styling for https://github.com/TryGhost/Ghost/issues/3084

core/client/assets/sass/layouts/post-settings-menu.scss

@@ -0,0 +1,174 @@
+/*
+ * Post Settings Menu
+ *
+ * Table of Contents
+ *
+ * Post Settings Menu
+ */
+
+ /* ==========================================================================
+   Post Settings Menu
+   ========================================================================== */
+
+.post-settings {
+    @include icon($i-settings, 14px);
+    display: inline-block;
+    padding: 0 10px;
+    color: $midgrey;
+    @include transition;
+    position: relative;
+    top: 1px;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+        color: $darkgrey;
+    }
+} // .post-settings
+
+.post-settings-menu {
+    padding-top: 0;
+    text-transform: none;
+
+    table {
+        margin: 0;
+    }
+
+    td {
+        padding: 0;
+        border-top: none;
+        border-bottom: lighten($grey, 5%) 1px solid;
+    }
+
+    .post-setting-label {
+        padding: 8px 10px 8px 15px;
+        border-right: lighten($grey, 5%) 1px solid;
+        text-align: right;
+    }
+
+    .label {
+        position: static;
+        width: auto;
+        font-weight: normal;
+        color: $midgrey;
+        white-space: nowrap;
+    }
+
+    input {
+        width: 200px;
+        margin: 0;
+
+        @media (max-width: 550px) {
+            width: 200px;
+        }
+
+        &[type="text"] {
+            border: none;
+            padding: 8px 0 8px 10px;
+            color: $lightgrey;
+            border-radius: 0;
+            background: transparent;
+
+            &:focus {
+                background: $grey;
+                border: none;
+            }
+        }
+    } // input
+
+    .post-setting-item {
+        padding: 5px 0 0 10px;
+        &.no-padding {
+            padding: 0;
+        }
+    }
+
+    .author-select-wrapper {
+
+        display: inline-block;
+        position: relative;
+        height: 36px;
+        width: 100%;
+
+        &:before {
+            content: attr(data-select-text);
+            @include position(absolute, 0 0 0 0);
+            font-size: 1.1em;
+            color: $lightgrey;
+            line-height: 36px;
+            text-indent: 10px;
+        }
+
+        // This is the &:after element
+        @include icon-after($i-chevron-down, 0.85em, $lightgrey) {
+            @include position(absolute, 50% 0.8em null null);
+            position: absolute;
+            margin-top: -(0.85em / 2);
+        };
+
+        select {
+            opacity: 0;
+            width: 100%;
+            margin-bottom: 0;
+            height: 36px;
+        }
+
+        &:hover {
+            background: $grey;
+        }
+
+        @media (max-width: 550px) {
+            &,
+            &:before,
+            select {
+                height: 41px;
+            }
+            &:before {
+                line-height: 41px;
+            }
+        }
+
+    } // .author-select-wrapper
+
+    .checkbox {
+        position: relative;
+        margin-top: 0;
+        top: 0; // Resets a global `form label` style
+        border: 0;
+        &:after {
+            border-color: lighten($grey, 10%);
+            background: $grey;
+        }
+    } // .checkbox
+
+    // Colour the checkbox border correctly for a dark background
+    input[type='checkbox'] {
+        &:focus {
+            & + .checkbox {
+                &:after {
+                    border-color: lighten($grey, 10%);
+                }
+            }
+        }
+    } // input[type='checkbox']
+
+    .select-wrapper {
+        width: calc(100% - 10px);
+    }
+
+    .delete {
+        display: block;
+        padding: 10px 15px;
+        cursor: pointer;
+        @include icon($i-trash) {
+            position: relative;
+            top: -1px;
+            margin-right: 10px
+        };
+
+        &:hover {
+            background: $red;
+        }
+    } // .delete
+
+} // .post-settings-menu

core/client/assets/sass/modules/dropdowns.scss

@@ -7,7 +7,6 @@
  * Dropdown Show & Hide
  * Menu
  * Menu Positioning Options
- * Post Settings
  */
 
 
@@ -163,120 +162,4 @@ button.dropdown {
     @extend .menu;
     @extend .menu-drop;
     @extend .menu-right;
-}
-
-
-/* ==========================================================================
-   Post Settings
-   ---
-   There classes are used on conjunction with the above classes
-   ========================================================================== */
-
-.post-settings {
-    @include icon($i-settings, 14px);
-    display: inline-block;
-    padding: 0 10px;
-    color: $midgrey;
-    @include transition;
-    position: relative;
-    top: 1px;
-    cursor: pointer;
-
-    &:hover,
-    &.active {
-        color: $darkgrey;
-    }
-} // .post-settings
-
-.post-settings-menu {
-    padding-top: 0;
-    text-transform: none;
-
-    table {
-        margin: 0;
-    }
-
-    td {
-        padding: 0;
-        border-top: none;
-        border-bottom: lighten($grey, 5%) 1px solid;
-    }
-
-    .post-setting-label {
-        padding: 8px 10px 8px 15px;
-        border-right: lighten($grey, 5%) 1px solid;
-        text-align: right;
-    }
-
-    .label {
-        position: static;
-        width: auto;
-        font-weight: normal;
-        color: $midgrey;
-        white-space: nowrap;
-    }
-
-    input {
-        width: 200px;
-        margin: 0;
-
-        @media (max-width: 550px) {
-            width: 200px;
-        }
-
-        &[type="text"] {
-            border: none;
-            padding: 8px 0 8px 10px;
-            color: $lightgrey;
-            border-radius: 0;
-            background: transparent;
-
-            &:focus {
-                background: $grey;
-                border: none;
-            }
-        }
-    } // input
-
-    .post-setting-item {
-        padding: 5px 0 0 10px;
-    }
-
-    .checkbox {
-        position: relative;
-        margin-top: 0;
-        top: 0; // Resets a global `form label` style
-        border: 0;
-        &:after {
-            border-color: lighten($grey, 10%);
-            background: $grey;
-        }
-    } // .checkbox
-
-    // Colour the checkbox border correctly for a dark background
-    input[type='checkbox'] {
-        &:focus {
-            & + .checkbox {
-                &:after {
-                    border-color: lighten($grey, 10%);
-                }
-            }
-        }
-    } // input[type='checkbox']
-
-    .delete {
-        display: block;
-        padding: 10px 15px;
-        cursor: pointer;
-        @include icon($i-trash) {
-            position: relative;
-            top: -1px;
-            margin-right: 10px
-        };
-
-        &:hover {
-            background: $red;
-        }
-    } // .delete
-
-} // .post-settings-menu
+}

core/client/assets/sass/modules/icons.scss

@@ -19,7 +19,7 @@
    ========================================================================== */
 
 @font-face {
-    font-family: 'Icons';
+    font-family: 'GhostIcons';
     src:url('../fonts/icons.eot');
     src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icons.woff') format('woff'),
@@ -37,7 +37,7 @@
 @mixin icon($char, $size: '', $color: '') {
     &:before {
         // Base
-        font-family: "Icons";
+        font-family: "GhostIcons";
         font-weight: normal;
         font-style: normal;
         vertical-align: -7%;
@@ -69,7 +69,7 @@
 @mixin icon-after($char, $size: '', $color: '') {
     &:after {
         // Base
-        font-family: "Icons";
+        font-family: "GhostIcons";
         font-weight: normal;
         font-style: normal;
         vertical-align: -7%;

core/client/assets/sass/screen.scss

@@ -61,6 +61,7 @@
 @import "layouts/content";
 @import "layouts/editor";
 @import "layouts/errors";
+@import "layouts/post-settings-menu";
 @import "layouts/settings";
 @import "layouts/setup";
 @import "layouts/users";