Skip to content

Commit

Permalink
UI/CSS Improvements
Browse files Browse the repository at this point in the history
Remove shadow on last tag item hover, was an inconsistent style addition thats not used elsewhere such as the content list
- Remove box-shadow on last of type settings tag hover state
- http://g.recordit.co/CEglFT7Hlr.gif

Remove * selector and specify user-select on individual classes for performance.
- remove * selector
- update classes that benefit from user-select none

Having different visuals based around if a radio/checkbox uses a label or not is weird and style changes should use a class modifier.
- Merged the two together as I was unable to find an example checkbox/radio in use that did not use the label tag

Improved UI for radio/checkboxes
- Added cursor pointer to radio/checkboxes
- Added hover state to radio/checkboxes

Add cursor to select boxes for usability
- cursor: pointer; added to select boxes

Add hover state to post edit icon
- add dark grey hover state to post edit icon

Add visual hover to nav user menu dropdown
- Move dropdown icon to visually indicate hover
  • Loading branch information
jamesslock committed Jan 28, 2016
1 parent 6095300 commit ffab312
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 18 deletions.
3 changes: 3 additions & 0 deletions core/client/app/styles/layouts/content.css
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,9 @@
border: none;
font-size: 18px;
}
.content-preview .post-controls .post-edit:hover {
color: var(--darkgrey);
}

.content-preview img {
width: 100%;
Expand Down
6 changes: 4 additions & 2 deletions core/client/app/styles/layouts/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ body > .ember-view:not(.liquid-target-container) {
display: flex;
align-items: center;
padding: 15px;
cursor: pointer;
}

.gh-nav-menu i {
Expand All @@ -71,10 +72,11 @@ body > .ember-view:not(.liquid-target-container) {
height: 11px;
font-size: 11px;
line-height: 11px;
transition: margin-top 0.2s ease;
}

.gh-nav-menu:hover {
cursor: pointer;
.gh-nav-menu:hover i {
margin-top: 5px;
}

.gh-nav-menu-icon {
Expand Down
4 changes: 0 additions & 4 deletions core/client/app/styles/layouts/tags.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
border-left: 3px solid;
}

.settings-tag:last-of-type:hover .tag-edit-button {
box-shadow: inset 0 -1px 0 #dfe1e3;
}

.settings-tag .label {
display: inline-block;
overflow: hidden;
Expand Down
25 changes: 13 additions & 12 deletions core/client/app/styles/patterns/forms.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
/* Forms
/* ---------------------------------------------------------- */

form * {
user-select: text;
}

form label {
display: block;
color: var(--darkgrey);
font-size: 1.3rem;
font-weight: bold;
user-select: text;
}

form .word-count {
Expand All @@ -21,6 +18,7 @@ fieldset {
margin: 0 0 3em 0;
padding: 0;
border: none;
user-select: text;
}

legend {
Expand All @@ -31,6 +29,7 @@ legend {
color: #b1b1b1;
font-size: 1.2em;
line-height: 2.0em;
user-select: text;
}

input {
Expand All @@ -50,6 +49,7 @@ input {
margin-bottom: 1.6em;
max-width: 500px;
width: 100%;
user-select: text;
}

.form-group p {
Expand Down Expand Up @@ -122,6 +122,7 @@ select {
font-size: 1.4rem;
font-weight: normal;
user-select: text;
cursor: pointer;
transition: border-color 0.15s linear;

-webkit-appearance: none;
Expand Down Expand Up @@ -161,17 +162,19 @@ textarea {
.for-checkbox label {
display: block;
padding-bottom: 4px;
cursor: pointer;
}

.for-radio label p,
.for-checkbox label p {
overflow: auto;
color: #000;
font-weight: normal;
}

.for-radio label:hover input:not(:checked) + .input-toggle-component,
.for-checkbox label:hover input:not(:checked) + .input-toggle-component {
border-color: #dfe1e3;
.for-radio label:hover p,
.for-checkbox label:hover p {
color: var(--midgrey);
}

.for-radio input,
Expand All @@ -196,11 +199,9 @@ textarea {
background: #f7f7f7;
}

.for-radio p,
.for-checkbox p {
overflow: auto;
color: #b3b2a8;
font-weight: normal;
.for-checkbox label:hover input:not(:checked) + .input-toggle-component,
.for-radio label:hover input:not(:checked) + .input-toggle-component {
border-color: var(--lightgrey);
}

.for-checkbox .input-toggle-component {
Expand Down

0 comments on commit ffab312

Please sign in to comment.