diff --git a/ghost/admin/assets/sass/layouts/users.scss b/ghost/admin/assets/sass/layouts/users.scss
index 5d5fbd61ec..67971e2f9f 100644
--- a/ghost/admin/assets/sass/layouts/users.scss
+++ b/ghost/admin/assets/sass/layouts/users.scss
@@ -1,19 +1,20 @@
-//
+// ------------------------------------------------------------
// Users
-// --------------------------------------------------
+//
+// Styles for the Users list page
// Slug: /ghost/settings/users/
+//
+// * Users List
+// * Role Labels
+// * User Actions
+// * Invite User Modal
+// ------------------------------------------------------------
+
+
+//
+// Users List
// --------------------------------------------------
-.user-list-header {
- padding-left: 0;
-}
-
-.content.settings-users {
- padding: 0 40px;
- overflow: auto;
- height: 100%;
-}
-
.invited-users {
margin-bottom: 34px;
}
@@ -27,32 +28,34 @@
.user-list-item {
- @media (max-width: 500px) {
+ border-top: 1px solid $lightbrown;
+
+ @media (max-width: 550px) {
display: block;
padding: 15px 0;
@include clearfix;
}
- @media (min-width: 501px) {
+ @media (min-width: 551px) {
display: flex;
justify-content: start;
align-items: center;
padding: 0 15px;
height: 68px;
}
-
- border-top: 1px solid $lightbrown;
-
}
+// Only apply these styles to anchor tags (pending invited are divs)
a.user-list-item {
text-decoration: none;
// Hover states only for large viewports
@media (min-width: 601px) {
+
&:hover {
background: lighten($lightbrown, 5%);
}
+
&:last-of-type:hover {
box-shadow: inset 0px -1px 0px $lightbrown;
}
@@ -94,7 +97,8 @@ a.user-list-item {
.user-list-item-icon,
.user-list-item-figure {
- @media (max-width: 500px) {
+
+ @media (max-width: 550px) {
float: left;
margin-right: 15px;
}
@@ -106,7 +110,7 @@ a.user-list-item {
padding-left: 15px;
line-height: 1;
- @media (max-width: 500px) {
+ @media (max-width: 550px) {
margin-top: 3px;
}
@@ -116,6 +120,7 @@ a.user-list-item {
font-weight: 400;
color: $darkgrey;
}
+
.description {
display: inline-block;
font-size: 12px;
@@ -127,7 +132,8 @@ a.user-list-item {
}//.user-list-item-body
.user-list-item-aside {
- @media (max-width: 500px) {
+
+ @media (max-width: 550px) {
float: left;
width: 100%;
margin: 12px 0 0 50px;
@@ -135,7 +141,8 @@ a.user-list-item {
.user-list-action:not(:first-of-type) {
margin-left: 20px;
- @media (min-width: 501px) {
+
+ @media (min-width: 551px) {
margin-left: 50px;
}
}
@@ -154,9 +161,6 @@ a.user-list-item {
font-size: 11px;
text-transform: uppercase;
text-decoration: underline;
- &:hover {
-
- }
}
@@ -189,9 +193,9 @@ a.user-list-item {
color: rgba(255,255,255,0.8);
background: $blue;
}
-
}//.role-label
+
//
// User Actions
// --------------------------------------------------
@@ -242,11 +246,9 @@ a.user-list-item {
input {
width: 100%;
}
-
}//.form-group
.btn-green {
width: 100%;
}
-
}//.invite-new-user
\ No newline at end of file
diff --git a/ghost/admin/templates/settings/users/index.hbs b/ghost/admin/templates/settings/users/index.hbs
index 3ccb9a3484..1e5ab8f519 100644
--- a/ghost/admin/templates/settings/users/index.hbs
+++ b/ghost/admin/templates/settings/users/index.hbs
@@ -1,4 +1,4 @@
-{{#view "settings/users/users-list-view" tagName="section" class="content settings-users" }}
+{{#view "settings/users/users-list-view"}}
+
+
{{#if invitedUsers}}
@@ -64,4 +66,7 @@
{{/each}}
+
+ {{! .content settings-users }}
+
{{/view}}