// ------------------------------------------------------------ // Users // // Styles for the Users list page // Slug: /ghost/settings/users/ // // * Container // * Users List // * Role Labels // * User Actions // * Invite User Modal // ------------------------------------------------------------ // // Wrapper // -------------------------------------------------- .users-list-wrapper { overflow: auto; height: 100%; } // // Users List // -------------------------------------------------- .invited-users { margin-bottom: 34px; } .user-list-title { font-size: 13px; font-weight: normal; color: $midbrown; margin-bottom: 14px; } .user-list-item { border-top: 1px solid #e1e1e1; @media (max-width: 550px) { display: block; padding: 15px 0; } @media (min-width: 551px) { display: flex; justify-content: start; align-items: center; padding: 0 15px; height: 68px; } } // 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(#e1e1e1, 10%); } &:last-of-type:hover { box-shadow: inset 0px -1px 0px #e1e1e1; } } } .user-list-item-icon { width: 35px; height: 35px; display: block; border-radius: 100%; background: #e1e1e1; font-size: 0px; color: transparent; overflow: hidden; position: relative; &:before { position: absolute; top: 50%; left: 0; right: 0; margin-top: -7px; text-align: center; color: $brown; font-size: 14px; } } .user-list-item-figure { display: block; width: 35px; height: 35px; border-radius: 35px; background-size: cover; background-position: center center; position: relative; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } } .user-list-item-icon, .user-list-item-figure { @media (max-width: 550px) { float: left; margin-right: 15px; } } .user-list-item-body { flex: 1 1 auto; align-items: stretch; padding-left: 15px; line-height: 1; @media (max-width: 550px) { margin-top: 3px; } .name { display: inline-block; font-size: 15px; font-weight: 400; color: $darkgrey; } .description { display: inline-block; font-size: 12px; color: $midbrown; white-space: nowrap; margin-top: 3px; } }//.user-list-item-body .user-list-item-aside { @media (max-width: 550px) { float: left; width: 100%; margin: 12px 0 0 50px; } .user-list-action:not(:first-of-type) { margin-left: 20px; @media (min-width: 551px) { margin-left: 50px; } } .role-label { float: left; margin-top: -1px; } .role-label + .role-label { margin-left: 5px; } }//.user-list-item-aside .user-list-action { font-size: 11px; text-transform: uppercase; text-decoration: underline; } // // Role Labels // -------------------------------------------------- .role-label { display: inline-block; padding: 6px 8px; color: rgba(0,0,0,0.5); font-size: 9px; line-height: 1; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; background: #eee; &.owner { color: rgba(255,255,255,0.8); background: $darkgrey; } &.administrator { color: rgba(255,255,255,0.8); background: $red; } &.editor { color: rgba(255,255,255,0.8); background: $blue; } }//.role-label // // Invite User Modal // -------------------------------------------------- .invite-new-user { .form-group { margin-bottom: 0; padding: 0; label { position: static; display: block; text-align: left; } &:nth-of-type(1) { float: left; width: 60%; } &:nth-of-type(2) { float: left; width: 35%; margin-left: 5%; } input { width: 100%; } }//.form-group .btn-green { width: 100%; } }//.invite-new-user