Ghost/core/client/assets/sass/layouts/users.scss

239 lines
4.2 KiB
SCSS
Raw Normal View History

// ------------------------------------------------------------
2014-07-30 09:17:00 +04:00
// Users
//
// Styles for the Users list page
2014-07-30 11:51:37 +04:00
// Slug: /ghost/settings/users/
//
// * Users List
// * Role Labels
// * User Actions
// * Invite User Modal
// ------------------------------------------------------------
//
// Users List
// --------------------------------------------------
2014-07-30 09:17:00 +04:00
.invited-users {
margin-bottom: 34px;
}
.user-list-title {
2014-07-30 09:17:00 +04:00
font-size: 13px;
font-weight: normal;
color: $midbrown;
margin-bottom: 14px;
}
2014-07-30 09:17:00 +04:00
.user-list-item {
2014-07-30 09:17:00 +04:00
border-top: 1px solid $lightbrown;
@media (max-width: 550px) {
2014-07-30 09:17:00 +04:00
display: block;
padding: 15px 0;
@include clearfix;
}
@media (min-width: 551px) {
display: flex;
justify-content: start;
align-items: center;
2014-07-30 09:17:00 +04:00
padding: 0 15px;
height: 68px;
2014-07-30 09:17:00 +04:00
}
}
2014-07-30 09:17:00 +04:00
// Only apply these styles to anchor tags (pending invited are divs)
a.user-list-item {
2014-07-30 09:17:00 +04:00
text-decoration: none;
2014-09-23 13:54:56 +04:00
// 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;
}
2014-07-30 09:17:00 +04:00
}
}
.user-list-item-icon {
2014-07-30 09:17:00 +04:00
width: 35px;
height: 35px;
display: block;
border-radius: 100%;
background: $lightbrown;
font-size: 0px;
color: transparent;
overflow: hidden;
position: relative;
2014-07-30 09:17:00 +04:00
&:before {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -7px;
text-align: center;
color: $brown;
font-size: 14px;
}
}
2014-07-30 09:17:00 +04:00
.user-list-item-figure {
2014-07-30 09:17:00 +04:00
width: 35px;
2014-08-12 18:26:20 +04:00
height: 35px;
2014-07-30 09:17:00 +04:00
display: block;
border: 1px solid #979797;
2014-08-12 18:26:20 +04:00
border-radius: 100%;
background-size: cover;
2014-08-12 18:26:20 +04:00
background-position: center center;
}
2014-07-30 09:17:00 +04:00
.user-list-item-icon,
.user-list-item-figure {
@media (max-width: 550px) {
2014-07-30 09:17:00 +04:00
float: left;
margin-right: 15px;
}
}
.user-list-item-body {
flex: 1 1 auto;
align-items: stretch;
2014-07-30 09:17:00 +04:00
padding-left: 15px;
line-height: 1;
@media (max-width: 550px) {
2014-07-30 09:17:00 +04:00
margin-top: 3px;
}
.name {
display: inline-block;
font-size: 15px;
font-weight: 400;
color: $darkgrey;
}
2014-07-30 09:17:00 +04:00
.description {
display: inline-block;
font-size: 12px;
color: $midbrown;
2014-08-12 18:26:20 +04:00
white-space: nowrap;
2014-07-30 09:17:00 +04:00
margin-top: 3px;
}
}//.user-list-item-body
2014-07-30 09:17:00 +04:00
.user-list-item-aside {
@media (max-width: 550px) {
2014-07-30 09:17:00 +04:00
float: left;
width: 100%;
2014-09-23 13:54:56 +04:00
margin: 12px 0 0 50px;
2014-07-30 09:17:00 +04:00
}
.user-list-action:not(:first-of-type) {
2014-07-30 09:17:00 +04:00
margin-left: 20px;
@media (min-width: 551px) {
2014-07-30 09:17:00 +04:00
margin-left: 50px;
}
}
2014-07-30 09:17:00 +04:00
.role-label {
float: left;
margin-top: -1px;
}
2014-07-30 09:17:00 +04:00
.role-label + .role-label {
margin-left: 5px;
}
}//.user-list-item-aside
2014-07-30 09:17:00 +04:00
.user-list-action {
2014-07-30 09:17:00 +04:00
font-size: 11px;
text-transform: uppercase;
text-decoration: underline;
}
2014-07-30 09:17:51 +04:00
//
// 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;
2014-08-16 20:39:52 +04:00
background: #eee;
2014-07-30 09:17:51 +04:00
&.owner {
2014-08-16 20:39:52 +04:00
color: rgba(255,255,255,0.8);
2014-07-30 09:17:51 +04:00
background: $darkgrey;
}
2014-08-16 20:39:52 +04:00
&.administrator {
color: rgba(255,255,255,0.8);
2014-07-30 09:17:51 +04:00
background: $red;
}
&.editor {
2014-08-16 20:39:52 +04:00
color: rgba(255,255,255,0.8);
2014-07-30 09:17:51 +04:00
background: $blue;
}
}//.role-label
//
// Invite User Modal
// --------------------------------------------------
.invite-new-user {
.modal-body {
@include clearfix;
}
.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