mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-20 09:22:49 +03:00
e219fb121e
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.
152 lines
3.1 KiB
SCSS
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 |