diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss index fde69e99de91..06f53e8ca5fa 100644 --- a/core/client/assets/sass/layouts/users.scss +++ b/core/client/assets/sass/layouts/users.scss @@ -1,18 +1,19 @@ -// +// ------------------------------------------------------------ // Users -// -------------------------------------------------- +// +// Styles for the Users list page // Slug: /ghost/settings/users/ -// -------------------------------------------------- +// +// * Users List +// * Role Labels +// * User Actions +// * Invite User Modal +// ------------------------------------------------------------ -.user-list-header { - padding-left: 0; -} -.content.settings-users { - padding: 0 40px; - overflow: auto; - height: 100%; -} +// +// Users List +// -------------------------------------------------- .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,7 +246,6 @@ a.user-list-item { input { width: 100%; } - }//.form-group .button-add { @@ -251,5 +254,4 @@ a.user-list-item { font-size: 14px; line-height: 16px; } - }//.invite-new-user \ No newline at end of file diff --git a/core/client/templates/settings/users/index.hbs b/core/client/templates/settings/users/index.hbs index 3ccb9a348440..1e5ab8f519ce 100644 --- a/core/client/templates/settings/users/index.hbs +++ b/core/client/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"}}
{{#link-to "settings" class="btn btn-default btn-back"}}Back{{/link-to}}

Users

@@ -7,6 +7,8 @@
+
+ {{#if invitedUsers}}
@@ -64,4 +66,7 @@ {{/each}}
+ +
{{! .content settings-users }} + {{/view}}