d559a35879
highlight topic cards on tab-select add border highlight to sorting select input on teams and topics pages. Co-authored-by: Ben Warzeski <benwarzeski@edX-C02CD0HCLVDM.local>
774 lines
14 KiB
SCSS
774 lines
14 KiB
SCSS
.view-teams {
|
|
|
|
// resets for existing styles
|
|
div.course-wrapper section.course-content {
|
|
padding: 0;
|
|
|
|
p {
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
}
|
|
|
|
p,
|
|
span {
|
|
color: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.icon {
|
|
font-family: "FontAwesome";
|
|
color: inherit;
|
|
}
|
|
|
|
// layout
|
|
.page-header {
|
|
@include clearfix();
|
|
|
|
border-bottom: 1px solid $gray-l3;
|
|
padding: $baseline $baseline ($baseline/2) $baseline;
|
|
|
|
.page-title {
|
|
@extend %t-title4;
|
|
|
|
margin-bottom: ($baseline/4);
|
|
text-transform: none;
|
|
color: $black;
|
|
}
|
|
|
|
.page-description {
|
|
@extend %t-copy-sub1;
|
|
|
|
margin-bottom: ($baseline/4);
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
.page-header.has-secondary {
|
|
.page-header-main {
|
|
display: inline-block;
|
|
width: flex-grid(8, 12);
|
|
}
|
|
|
|
.page-header-secondary {
|
|
@include text-align(right);
|
|
|
|
display: inline-block;
|
|
width: flex-grid(4, 12);
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
// ui bits
|
|
.breadcrumbs {
|
|
@extend %t-copy-sub1;
|
|
|
|
.nav-item {
|
|
@include margin-right($baseline/2);
|
|
|
|
display: inline-block;
|
|
}
|
|
|
|
.icon {
|
|
@include margin-right($baseline/4);
|
|
|
|
display: inline-block;
|
|
color: $gray-l2;
|
|
|
|
@include rtl {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-header-search {
|
|
.wrapper-search-input {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.search-label {
|
|
@extend %text-sr;
|
|
}
|
|
|
|
.search-field {
|
|
transition: all $tmg-f2 ease-in-out;
|
|
border: 1px solid $gray-l4;
|
|
border-radius: 3px;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
font-family: inherit;
|
|
color: $gray;
|
|
}
|
|
|
|
.action-search {
|
|
@extend %button-reset;
|
|
|
|
background-color: $gray-l3;
|
|
padding: ($baseline/5) ($baseline/2);
|
|
text-shadow: none;
|
|
vertical-align: middle;
|
|
|
|
.icon {
|
|
color: $white;
|
|
}
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $blue;
|
|
}
|
|
}
|
|
|
|
.action-clear {
|
|
@include right(0);
|
|
@include margin(0, ($baseline/4), 0, 0);
|
|
|
|
@extend %button-reset;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
padding: ($baseline/4);
|
|
color: $gray-l3;
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&:focus {
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
|
|
// main content bits
|
|
.page-content {
|
|
padding: $baseline;
|
|
}
|
|
|
|
.page-content-nav {
|
|
@extend %page-content-nav;
|
|
}
|
|
|
|
.intro {
|
|
@extend %t-weight4;
|
|
}
|
|
|
|
.listing-tools {
|
|
margin: ($baseline/10) $baseline;
|
|
}
|
|
|
|
// reset general ul styles
|
|
.cards-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.card {
|
|
@include clearfix();
|
|
|
|
transition: all $tmg-f2 ease-in-out;
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 30%; // TODO: susy grid
|
|
margin: ($baseline) 1.2%;
|
|
border: 1px solid $gray-l4;
|
|
border-bottom: 2px solid $gray-l3;
|
|
border-radius: 3px;
|
|
background-color: $white;
|
|
color: $black;
|
|
|
|
// STATE: hover, active, and focus
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
box-shadow: 0 0 5px 1px $m-blue-t1;
|
|
|
|
.card-description {
|
|
color: $body-color;
|
|
}
|
|
}
|
|
|
|
.wrapper-card-core {
|
|
@include clearfix();
|
|
|
|
padding: ($baseline);
|
|
}
|
|
|
|
.card-type {
|
|
@extend %t-copy-sub2;
|
|
|
|
color: $gray;
|
|
}
|
|
|
|
.card-title {
|
|
@extend %t-title5;
|
|
@extend %t-strong;
|
|
|
|
margin-bottom: rem(0.5);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-description {
|
|
@extend %t-copy-sub1;
|
|
|
|
color: $gray;
|
|
}
|
|
|
|
.card-actions {
|
|
@include clearfix();
|
|
|
|
.action-view {
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include float(right);
|
|
|
|
margin: ($baseline/4) 0;
|
|
}
|
|
}
|
|
|
|
.wrapper-card-meta {
|
|
@include clearfix();
|
|
|
|
@extend %t-copy-sub1;
|
|
|
|
padding: ($baseline/2) $baseline;
|
|
background-color: $gray-l6;
|
|
color: $gray;
|
|
|
|
.meta-detail {
|
|
@include margin(($baseline/4) ($baseline*0.75) ($baseline/4) 0);
|
|
|
|
color: $gray-d1;
|
|
|
|
abbr {
|
|
border: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.icon {
|
|
@include margin-right ($baseline/4);
|
|
}
|
|
}
|
|
|
|
.member-count {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
@include margin-right($baseline/4);
|
|
}
|
|
|
|
.list-member-thumbs {
|
|
@extend %ui-no-list;
|
|
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
.item-member-thumb {
|
|
display: inline-block;
|
|
margin: 0 ($baseline/4);
|
|
}
|
|
|
|
img {
|
|
width: $baseline;
|
|
height: $baseline;
|
|
border-radius: ($baseline/5);
|
|
border: 1px solid $gray-l4;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.square-card {
|
|
.card-description { // replace with js or char limit
|
|
height: 4rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrapper-card-meta {
|
|
&.has-actions {
|
|
.card-meta,
|
|
.card-actions {
|
|
display: inline-block;
|
|
width: 48%; // TODO: susy grid
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.list-card {
|
|
width: auto;
|
|
display: block;
|
|
|
|
.card-core {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 84%; // TODO: susy grid
|
|
}
|
|
|
|
.card-meta {
|
|
@include clearfix();
|
|
}
|
|
|
|
.meta-detail {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.team-activity {
|
|
@include float(right);
|
|
}
|
|
|
|
.card-actions {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 15%; // TODO: susy grid
|
|
}
|
|
}
|
|
|
|
&.has-pennant {
|
|
.pennant {
|
|
@extend %t-copy-sub2;
|
|
@extend %t-strong;
|
|
|
|
display: block;
|
|
position: absolute;
|
|
top: ($baseline/2);
|
|
|
|
@include left(-($baseline/4));
|
|
|
|
box-shadow: 1px 1px 1px 0 $blue-d1;
|
|
background-color: $m-blue-l2;
|
|
padding: ($baseline/10) ($baseline*0.75);
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.is-unavailable {
|
|
background-color: $gray-l5;
|
|
|
|
.wrapper-card-meta {
|
|
background-color: $gray-l4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.team-management {
|
|
padding: 1%;
|
|
|
|
h3,
|
|
p,
|
|
.action,
|
|
.team-management-section,
|
|
input {
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
#upload-team-csv {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.team-profile,
|
|
.team-management {
|
|
.page-content-main {
|
|
display: inline-block;
|
|
width: flex-grid(8, 12);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.page-content-secondary {
|
|
display: inline-block;
|
|
width: flex-grid(4, 12);
|
|
|
|
@include margin-left($baseline * 0.75);
|
|
|
|
margin-bottom: $baseline;
|
|
|
|
@extend %t-copy-sub1;
|
|
|
|
color: $gray;
|
|
|
|
div,
|
|
.team-detail-header {
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
.image-url {
|
|
border: 2px solid $outer-border-color;
|
|
border-radius: ($baseline/4);
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
.leave-team {
|
|
margin-bottom: $baseline;
|
|
margin-top: ($baseline/2);
|
|
}
|
|
|
|
.invite-header,
|
|
.invite-text {
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
.invite-team {
|
|
margin-top: ($baseline);
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
.invite-link-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.member-profile {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
@include tooltip-hover-style(-($baseline*2));
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-team {
|
|
legend {
|
|
@extend %t-title6;
|
|
@extend %t-weight4;
|
|
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
.description {
|
|
@extend %t-copy-sub1;
|
|
|
|
margin-bottom: ($baseline/2);
|
|
color: $gray-l1;
|
|
}
|
|
|
|
.form-field {
|
|
margin: 0 0 ($baseline*0.75) 0;
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
&.is-required {
|
|
@extend %t-weight4;
|
|
|
|
.label::after {
|
|
@include margin-left($baseline/4);
|
|
|
|
content: "*";
|
|
}
|
|
}
|
|
|
|
.input-text {
|
|
@extend %t-copy-base;
|
|
|
|
transition: all $tmg-f2 ease-in-out 0s;
|
|
display: block;
|
|
width: 90%;
|
|
height: 100%;
|
|
margin-bottom: ($baseline/4);
|
|
border: 1px solid $gray-l2;
|
|
padding: ($baseline/2);
|
|
}
|
|
|
|
.input-select {
|
|
@extend %t-copy-base;
|
|
|
|
width: 90%;
|
|
margin-bottom: ($baseline/4);
|
|
border: 1px solid $gray-l2;
|
|
}
|
|
|
|
.input-text,
|
|
.input-select {
|
|
&:focus {
|
|
border: 1px solid $blue;
|
|
|
|
+ .tip {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-errors {
|
|
.input-text,
|
|
.input-select {
|
|
border: 1px solid $alert-color;
|
|
|
|
+ .tip {
|
|
color: $alert-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub1;
|
|
|
|
display: block;
|
|
color: $gray-l1;
|
|
}
|
|
}
|
|
|
|
.required-wrapper {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 60%; // TODO: susy grid
|
|
}
|
|
|
|
.optional-wrapper {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 35%; // TODO: susy grid
|
|
|
|
@include margin-left(2%);
|
|
|
|
border-left: 2px solid $gray-l4;
|
|
padding-left: 2%;
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
.action {
|
|
@extend %t-copy;
|
|
@extend %t-action2;
|
|
|
|
@include margin-right ($baseline/2);
|
|
|
|
padding: ($baseline/2) $baseline;
|
|
}
|
|
|
|
.action-primary {
|
|
@extend %btn-primary-blue;
|
|
|
|
&:focus {
|
|
border: inherit;
|
|
box-shadow: none;
|
|
}
|
|
|
|
display: inline-block;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.action-cancel {
|
|
@extend %button-reset;
|
|
|
|
display: inline-block;
|
|
border: 1px solid transparent;
|
|
color: $gray;
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&:focus {
|
|
border: 1px solid $link-color;
|
|
color: $link-color;
|
|
}
|
|
}
|
|
|
|
.header-action-view {
|
|
display: inline-block;
|
|
width: 33%;
|
|
vertical-align: text-bottom;
|
|
|
|
.join-team.form-actions,
|
|
.join-team-message {
|
|
@include text-align(right);
|
|
}
|
|
}
|
|
|
|
.join-team-message {
|
|
@extend %t-copy-sub1;
|
|
|
|
@include text-align(right);
|
|
|
|
color: $gray-l1;
|
|
display: block;
|
|
margin-bottom: ($baseline/4);
|
|
}
|
|
|
|
.team-actions {
|
|
@extend %ui-well;
|
|
|
|
margin: 20px 1.2%;
|
|
color: $gray;
|
|
text-align: center;
|
|
|
|
.title {
|
|
@extend %t-title6;
|
|
@extend %t-strong;
|
|
|
|
margin-bottom: ($baseline/2);
|
|
text-align: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.copy {
|
|
text-align: inherit;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.teams-content {
|
|
.teams-main {
|
|
.team-edit-fields {
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
@include clearfix();
|
|
|
|
.team-required-fields {
|
|
@include float(left);
|
|
|
|
width: 55%;
|
|
|
|
.u-field {
|
|
@include margin-right($baseline*2);
|
|
}
|
|
|
|
.u-field.u-field-name {
|
|
padding-bottom: $baseline;
|
|
|
|
.u-field-value {
|
|
width: 100%;
|
|
|
|
input {
|
|
border-radius: ($baseline/5);
|
|
height: ($baseline*2);
|
|
}
|
|
}
|
|
|
|
.u-field-message {
|
|
@include padding-left(0);
|
|
|
|
padding-top: ($baseline/4);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.u-field.u-field-description {
|
|
.u-field-value {
|
|
width: 100%;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: ($baseline*5);
|
|
border-radius: ($baseline/5);
|
|
}
|
|
}
|
|
|
|
.u-field-footer {
|
|
.u-field-message {
|
|
display: block;
|
|
|
|
@extend %t-copy-sub1;
|
|
|
|
@include padding-left(0);
|
|
|
|
margin-top: ($baseline/4);
|
|
color: $gray-l1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field-title {
|
|
padding-bottom: ($baseline/4);
|
|
color: $body-color;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.team-optional-fields {
|
|
@include float(left);
|
|
@include margin-left($baseline*2);
|
|
|
|
width: 40%;
|
|
|
|
.u-field.u-field-optional_description {
|
|
margin-bottom: ($baseline/2);
|
|
|
|
.u-field-title {
|
|
color: $body-color;
|
|
font-weight: $font-semibold;
|
|
margin-bottom: ($baseline/5);
|
|
}
|
|
|
|
.u-field-value {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.u-field.u-field-language {
|
|
margin-bottom: ($baseline/5);
|
|
}
|
|
|
|
.u-field-value-display {
|
|
display: none;
|
|
}
|
|
|
|
.u-field-title {
|
|
color: $body-color;
|
|
}
|
|
|
|
.u-field-message {
|
|
@include padding-left(0);
|
|
}
|
|
|
|
.u-field-title,
|
|
.u-field-value,
|
|
.u-field-message {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field {
|
|
padding: 0;
|
|
}
|
|
|
|
.u-field.error {
|
|
input,
|
|
textarea {
|
|
border-color: $error-color;
|
|
}
|
|
|
|
.u-field-message-help,
|
|
.u-field-description-message {
|
|
color: $error-color !important;
|
|
}
|
|
}
|
|
|
|
.teams-paging-header .listing-sort-select.input-select,
|
|
.topics-paging-header .listing-sort-select.input-select {
|
|
border: 1px solid $gray-l2;
|
|
}
|
|
|
|
.create-team.wrapper-msg {
|
|
margin: 0 0 $baseline 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// vertical line between required and optional fields
|
|
.vertical-line::after {
|
|
height: 100%;
|
|
border-left: 2px solid $gray-l4;
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
|
|
.form-instructions {
|
|
margin: ($baseline/2) 0 $baseline 0;
|
|
}
|
|
|
|
.create-team.form-actions {
|
|
margin-top: $baseline;
|
|
}
|