Ghost/ghost/admin/assets/sass/layouts/post-settings-menu.scss
Paul Adam Davis e219fb121e Refactor custom select styling
This is for both the global styling and the alternate version in the PSM for the author dropdown.

- `<select>` elements are note more accessible, with :focus support
- They no longer need a data-attr to show the currently selected item

NOTE: Does not work in Firefox. Yet.
2014-07-16 13:01:22 +01:00

152 lines
3.1 KiB
SCSS

/*
* 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;
&: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;
}
}
.gh-select {
height: 36px;
&:after {
color: $lightgrey;
margin-top: -(0.85em / 2);
}
select {
border: 0;
background: transparent;
border-radius: 0;
color: $lightgrey;
height: 36px;
&:focus {
background: $grey;
}
}
@media (max-width: 550px) {
&,
select {
height: 41px;
}
}
}
.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;
width: 100%;
text-align: left;
@include icon($i-trash) {
position: relative;
top: -1px;
margin-right: 10px
};
&:hover {
background: $red;
color: #fff;
}
} // .delete
} // .post-settings-menu