Users

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

@@ -0,0 +1,140 @@
+//
+// Users
+// --------------------------------------------------
+// TODO: Rename everything. This is a layout, rather
+// than a re-usable component.
+
+.invited-users {
+    margin-bottom: 34px;
+}
+
+.object-list-title {
+    font-size: 13px;
+    font-weight: normal;
+    color: $midbrown;
+    margin-bottom: 14px;
+} // .object-list-title
+
+.object-list-item {
+
+    @media (max-width: 500px) {
+        display: block;
+        padding: 15px 0;
+        @include clearfix;
+    }
+
+    @media (min-width: 501px) {
+        @include display(flex);
+        @include justify-content(start);
+        @include align-items(center);
+        padding: 0 15px;
+    }
+
+    border-top: 1px solid $lightbrown;
+    min-height: 68px;
+
+} // .object-list-item
+
+a.object-list-item {
+    text-decoration: none;
+    &:hover {
+        background: lighten($lightbrown, 5%);
+    }
+    &:last-of-type:hover {
+        box-shadow: inset 0px -1px 0px $lightbrown;
+    }
+}
+
+.object-list-item-icon {
+    width: 35px;
+    height: 35px;
+    display: block;
+    border-radius: 100%;
+    background: $lightbrown;
+    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;
+    }
+} // .object-list-item-icon
+
+.object-list-item-figure {
+    width: 35px;
+    border-radius: 100%;
+    display: block;
+    border: 1px solid #979797;
+} // .object-list-item-figure
+
+.object-list-item-icon,
+.object-list-item-figure {
+    @media (max-width: 500px) {
+        float: left;
+        margin-right: 15px;
+    }
+}
+
+.object-list-item-body {
+
+    @include flex(1);
+    @include align-items(stretch);
+
+    padding-left: 15px;
+    line-height: 1;
+
+    @media (max-width: 500px) {
+        margin-top: 3px;
+    }
+
+    .name {
+        display: inline-block;
+        font-size: 15px;
+        font-weight: 400;
+        color: $darkgrey;
+    }
+    .description {
+        display: inline-block;
+        font-size: 12px;
+        color: $midbrown;
+        margin-top: 3px;
+    }
+
+} // .object-list-item-body
+
+.object-list-item-aside {
+    @media (max-width: 500px) {
+        float: left;
+        width: 100%;
+        margin-top: 15px;
+    }
+    .object-list-action:not(:first-of-type) {
+        margin-left: 20px;
+        @media (min-width: 501px) {
+            margin-left: 50px;
+        }
+    }
+    .role-label {
+        float: left;
+        margin-top: -1px;
+    }
+    .role-label + .role-label {
+        margin-left: 5px;
+    }
+} // .object-list-item-aside
+
+.object-list-action {
+    font-size: 11px;
+    text-transform: uppercase;
+    text-decoration: underline;
+    &:hover {
+
+    }
+} // .object-list-action

core/client/assets/sass/screen.scss

@@ -42,3 +42,4 @@
 // --------------------------------------------------
 
 @import "layouts/default";
+@import "layouts/users";