mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
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.
This commit is contained in:
parent
3e9a0834e5
commit
910af32fae
3 changed files with 52 additions and 63 deletions
|
@ -82,53 +82,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.author-select-wrapper {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.gh-select {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
content: attr(data-select-text);
|
||||
@include position(absolute, 0 0 0 0);
|
||||
font-size: 1.1em;
|
||||
&:after {
|
||||
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);
|
||||
pointer-events: none;
|
||||
};
|
||||
|
||||
}
|
||||
select {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
color: $lightgrey;
|
||||
height: 36px;
|
||||
&:focus {
|
||||
background: $grey;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $grey;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&,
|
||||
&:before,
|
||||
select {
|
||||
height: 41px;
|
||||
}
|
||||
&:before {
|
||||
line-height: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
} // .author-select-wrapper
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
|
@ -152,9 +128,9 @@
|
|||
}
|
||||
} // input[type='checkbox']
|
||||
|
||||
.select-wrapper {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
// .select-wrapper {
|
||||
// width: calc(100% - 10px);
|
||||
// }
|
||||
|
||||
.delete {
|
||||
display: block;
|
||||
|
@ -169,6 +145,7 @@
|
|||
|
||||
&:hover {
|
||||
background: $red;
|
||||
color: #fff;
|
||||
}
|
||||
} // .delete
|
||||
|
||||
|
|
|
@ -158,7 +158,7 @@ legend {
|
|||
|
||||
#{$all-text-inputs},
|
||||
textarea,
|
||||
.gh-select {
|
||||
select {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
|
@ -363,7 +363,7 @@ input[type='radio'] {
|
|||
/* =============================================================================
|
||||
Select Component
|
||||
---
|
||||
<span class="gh-select" {{bind-attr data-select-text=selectedTheme.label}}>
|
||||
<span class="gh-select">
|
||||
{{view Ember.Select
|
||||
id="activeTheme"
|
||||
name="general[activeTheme]"
|
||||
|
@ -376,19 +376,11 @@ input[type='radio'] {
|
|||
============================================================================= */
|
||||
|
||||
.gh-select {
|
||||
|
||||
height: 37px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: attr(data-select-text);
|
||||
@include position(absolute, 0 null null 10px);
|
||||
font-size: 1.1rem;
|
||||
font-weight: normal;
|
||||
color: $darkgrey;
|
||||
line-height: 35px;
|
||||
pointer-events: none;
|
||||
}
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
@include icon-after($i-chevron-down, 0.85em, $midbrown) {
|
||||
@include position(absolute, 50% 0.8em null null);
|
||||
|
@ -398,13 +390,33 @@ input[type='radio'] {
|
|||
};
|
||||
|
||||
select {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: window;
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
background: #fff;
|
||||
outline: none;
|
||||
padding: 8px 10px;
|
||||
line-height: normal;
|
||||
|
||||
}
|
||||
// This hides native gh-select button arrow in IE
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hover style - Not used, but works
|
||||
&:hover {}
|
||||
|
||||
// Focus style
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// This hides focus around selected option in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
} // select
|
||||
} // .gh-select
|
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
4
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue