0
Fork 0
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:
Paul Adam Davis 2014-07-16 12:58:38 +01:00
parent 3e9a0834e5
commit 910af32fae
3 changed files with 52 additions and 63 deletions

View file

@ -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

View file

@ -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

File diff suppressed because one or more lines are too long