mirror of
https://github.com/sandstorm-io/sandstorm.git
synced 2026-11-07 10:02:45 -05:00
597 lines
12 KiB
SCSS
597 lines
12 KiB
SCSS
// Styles used for the Admin Users page and Users details page
|
|
|
|
%user-class-label {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
%credential-property-label {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.admin-user-filters {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
>.search-icon {
|
|
@extend %pseudo-img-tag;
|
|
background-image: url("/search.svg");
|
|
background-size: 24px 24px;
|
|
background-position: center;
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
>input.search-bar {
|
|
flex: 1 1 auto;
|
|
padding: 4px;
|
|
}
|
|
|
|
.filter-user-classes {
|
|
margin-left: 20px;
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
.show-label {
|
|
}
|
|
.filter-boxes {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-class-admin {
|
|
@extend %user-class-label;
|
|
background-color: #C66822;
|
|
}
|
|
.user-class-user {
|
|
@extend %user-class-label;
|
|
background-color: #7EB54D;
|
|
}
|
|
.user-class-visitor {
|
|
@extend %user-class-label;
|
|
background-color: #939393;
|
|
}
|
|
|
|
.admin-user-table {
|
|
border: 1px solid $default-table-border-color;
|
|
|
|
div[role=columnheader] {
|
|
// Column header text should "stick" to the bottom of the row, to be
|
|
// closest to the contents of the column.
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
div[role=columnheader], div[role=gridcell] {
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch; // so the border-left covers the whole height of the row
|
|
justify-content: flex-start;
|
|
background-color: $default-table-header-background-color;
|
|
color: $default-table-header-foreground-color;
|
|
border-bottom: 1px solid $default-table-header-border-color;
|
|
>div[role=columnheader]:not(:first-child) {
|
|
border-left: 1px solid $default-table-header-border-color;
|
|
}
|
|
.created, .last-active {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.loading-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.invite-row {
|
|
height: 36px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
background-color: $default-table-row-action-background-color;
|
|
cursor: pointer;
|
|
|
|
.plus-icon {
|
|
@extend %pseudo-img-tag;
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("/plus-9E40B5.svg");
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $default-table-row-action-background-color-hover;
|
|
.plus-icon {
|
|
background-image: url("/plus-6A237C.svg");
|
|
}
|
|
}
|
|
|
|
.invite-link {
|
|
padding-left: 8px;
|
|
padding-top: 8px;
|
|
>a {
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
background-color: $default-table-row-background-color;
|
|
cursor: pointer;
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
&:hover {
|
|
background-color: $default-table-row-background-color-hover;
|
|
}
|
|
}
|
|
|
|
div.account-role {
|
|
flex: none;
|
|
width: 32px;
|
|
text-align: center;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&[role=gridcell] {
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
|
|
div.profile-name {
|
|
display: inline-block;
|
|
flex: 2 1 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&[role=gridcell] {
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
div.credentials {
|
|
display: inline-block;
|
|
flex: 2 1 0;
|
|
&[role=gridcell] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
.credential-list {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-top: 4px;
|
|
padding-bottom: 0;
|
|
list-style-type: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch; // so the childrens borders will span the whole row
|
|
justify-content: flex-start;
|
|
|
|
.credential {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
&:not(:first-child) {
|
|
padding-top: 4px;
|
|
border-top: 1px solid #dddddd;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.login-provider-icon {
|
|
align-self: flex-start;
|
|
@extend %login-provider-icon;
|
|
width: 32px;
|
|
height: 24px;
|
|
}
|
|
|
|
.credential-intrinsic-name {
|
|
flex: 0 1 1;
|
|
padding-left: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.created, div.last-active {
|
|
display: inline-block;
|
|
max-width: 20%;
|
|
flex: 1 1 0;
|
|
|
|
&[role=gridcell] {
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
div.actions {
|
|
flex: none;
|
|
width: 70px;
|
|
|
|
&[role=gridcell] {
|
|
text-align: right;
|
|
|
|
.manage-user-button {
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
@extend %button-base;
|
|
@extend %button-secondary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.role-explanations {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin-bottom: 16px;
|
|
>li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: 8px;
|
|
|
|
color: #5d5d5d;
|
|
&.current-role {
|
|
color: black;
|
|
}
|
|
|
|
.role {
|
|
flex: 0 1 auto;
|
|
width: 7em;
|
|
}
|
|
|
|
.explanation {
|
|
padding-left: 8px;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.current-role-label {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
|
|
background-color: #dcefdd;
|
|
}
|
|
|
|
.user-class-label {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
|
|
}
|
|
|
|
&.current-role {
|
|
.user-class-label {
|
|
&.admin {
|
|
color: #ffffff;
|
|
background-color: #C66822;
|
|
}
|
|
&.user {
|
|
color: #ffffff;
|
|
background-color: #7EB54D;
|
|
}
|
|
&.visitor {
|
|
color: #ffffff;
|
|
background-color: #939393;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-users-profile-information {
|
|
background-color: white;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
>li {
|
|
min-height: 36px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.profile-picture-name {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.profile-picture {
|
|
@extend %pseudo-img-tag;
|
|
flex: none;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 0px;
|
|
}
|
|
|
|
.profile-name {
|
|
flex: 1 1 auto;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.profile-handle {
|
|
.profile-handle-decorator {
|
|
flex: none;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
font-weight: bold;
|
|
color: #cccccc;
|
|
}
|
|
code {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.profile-pronouns {
|
|
.profile-pronouns-decorator {
|
|
flex: none;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
.profile-pronouns-icon {
|
|
@extend %pseudo-img-tag;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('/pronoun-m.svg');
|
|
opacity: .60; // Hack to get this to look a desired intermediate color. The icon lines are
|
|
// too thin for it to look normal if the color matches the rest.
|
|
display: inline-block;
|
|
font-size: 0px;
|
|
}
|
|
}
|
|
|
|
.profile-pronouns-preference {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-details-name {
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
.admin-user-roles-form {
|
|
display: inline-block;
|
|
|
|
.make-admin, .make-user, .make-visitor {
|
|
@extend %button-base;
|
|
@extend %button-secondary;
|
|
}
|
|
}
|
|
|
|
.admin-user-credential-list {
|
|
border: 1px solid $default-table-border-color;
|
|
|
|
div[role=columnheader] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
div[role=columnheader], div[role=gridcell] {
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.admin-user-credential-header {
|
|
.admin-user-credential-header-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
background-color: $default-table-header-background-color;
|
|
color: $default-table-header-foreground-color;
|
|
border-bottom: 1px solid $default-table-header-border-color;
|
|
|
|
>div[role=columnheader]:not(:first-child) {
|
|
border-left: 1px solid $default-table-header-border-color;
|
|
}
|
|
|
|
.admin-user-credential-header-cell {
|
|
display: inline-block;
|
|
&.credential {
|
|
flex: 4 1 0;
|
|
}
|
|
|
|
&.created, &.last-active, &.properties {
|
|
flex: 1 1 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-user-credential-body {
|
|
.admin-user-credential-body-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
background-color: $default-table-row-background-color;
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
.admin-user-credential-body-cell {
|
|
display: inline-block;
|
|
&.credential {
|
|
flex: 4 1 0;
|
|
}
|
|
|
|
&.created, &.last-active, &.properties {
|
|
flex: 1 1 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.credential-information {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
>li {
|
|
min-height: 36px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.credential-provider {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.login-provider-icon {
|
|
@extend %login-provider-icon;
|
|
flex: none;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
.intrinsic-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.credential-emails {
|
|
overflow: wrap;
|
|
.credential-emails-decorator {
|
|
// The email list may be multiple lines long, so this decorator is better off sticking to the
|
|
// top of its box.
|
|
align-self: flex-start;
|
|
flex: none;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
.credential-emails-icon {
|
|
@extend %pseudo-img-tag;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url('/email.svg');
|
|
display: inline-block;
|
|
font-size: 0px;
|
|
}
|
|
}
|
|
|
|
.credential-emails-list {
|
|
flex: 1 1 auto;
|
|
list-style-type: none;
|
|
padding-left: 8px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
>li {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-credential {
|
|
@extend %credential-property-label;
|
|
background-color: #dcefdd;
|
|
}
|
|
|
|
.org-member {
|
|
@extend %credential-property-label;
|
|
background-color: #dbdbdb;
|
|
}
|
|
|
|
.email-primary {
|
|
@extend %credential-property-label;
|
|
background-color: #e5e1ef;
|
|
}
|
|
|
|
.email-verified {
|
|
@extend %credential-property-label;
|
|
background-color: #dcefdd;
|
|
}
|
|
|
|
.email-unverified {
|
|
@extend %credential-property-label;
|
|
background-color: #efdcdd;
|
|
}
|
|
}
|
|
|
|
.admin-invite-email-form, .admin-invite-button-form {
|
|
@extend %standard-form;
|
|
}
|
|
|
|
.admin-invite-email-form {
|
|
textarea {
|
|
min-height: 200px;
|
|
}
|
|
}
|