476 lines
9.0 KiB
SCSS
476 lines
9.0 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;
|
|
}
|
|
|
|
%button-reset {
|
|
box-shadow: none;
|
|
border: none;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
font-weight: normal;
|
|
}
|
|
|
|
// 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 {
|
|
display: inline-block;
|
|
width: flex-grid(4,12);
|
|
@include text-align(right);
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
|
|
.search-label {
|
|
@extend %text-sr;
|
|
}
|
|
|
|
.search-field {
|
|
transition: all $tmg-f2 ease-in-out;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
font-family: inherit;
|
|
color: $gray;
|
|
@include text-align(right);
|
|
|
|
&:focus {
|
|
border-bottom: 2px solid $black;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
.action-search {
|
|
@extend %button-reset;
|
|
padding: ($baseline/4) ($baseline/2);
|
|
|
|
|
|
.icon {
|
|
color: $gray-l3;
|
|
}
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&:focus {
|
|
|
|
.icon {
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// main content bits
|
|
.page-content {
|
|
padding: $baseline;
|
|
}
|
|
|
|
.page-content-nav {
|
|
margin-bottom: $baseline;
|
|
border-bottom: 3px solid $gray-l5;
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
margin-bottom: -3px; // to match the border
|
|
border-bottom: 3px solid $gray-l5;
|
|
padding: ($baseline*.75);
|
|
color: $gray-d2;
|
|
|
|
&.is-active {
|
|
border-bottom: 3px solid $gray-d2;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
// STATE: hover and focus
|
|
&:hover,
|
|
&:focus {
|
|
border-bottom: 3px solid $link-color;
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
@extend %t-weight4;
|
|
}
|
|
|
|
.listing-tools {
|
|
@extend %t-copy-sub1;
|
|
margin: ($baseline/10) $baseline;
|
|
color: $gray-l1;
|
|
|
|
label { // override
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.listing-sort-select {
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
border: 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 {
|
|
box-shadow: 0 0 5px 1px $m-blue-t1;
|
|
|
|
.card-description {
|
|
color: $base-font-color;
|
|
}
|
|
}
|
|
|
|
.wrapper-card-core {
|
|
@include clearfix();
|
|
padding: ($baseline);
|
|
}
|
|
|
|
.card-type {
|
|
@extend %t-copy-sub2;
|
|
text-transform: uppercase;
|
|
color: $gray;
|
|
}
|
|
|
|
.card-title {
|
|
@extend %t-title5;
|
|
@extend %t-strong;
|
|
margin-bottom: rem(.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;
|
|
float: right;
|
|
margin: ($baseline/4) 0;
|
|
}
|
|
}
|
|
|
|
.wrapper-card-meta {
|
|
@include clearfix();
|
|
@extend %t-copy-sub1;
|
|
padding: ($baseline/2) $baseline;
|
|
background-color: $gray-l5;
|
|
color: $gray;
|
|
|
|
.meta-detail {
|
|
margin-top: ($baseline/4);
|
|
margin-right: ($baseline*.75);
|
|
color: $gray;
|
|
|
|
.icon {
|
|
margin-right: ($baseline/4);
|
|
}
|
|
}
|
|
|
|
.list-member-thumbs {
|
|
@extend %ui-no-list;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
|
|
.item-member-thumb {
|
|
display: inline-block;
|
|
}
|
|
|
|
img {
|
|
width: $baseline;
|
|
height: $baseline;
|
|
margin: 0 ($baseline/4);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
|
|
.team-activity {
|
|
float: right;
|
|
}
|
|
|
|
.card-actions {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 15%; // TODO: susy grid
|
|
}
|
|
}
|
|
|
|
&.has-pennant {
|
|
|
|
.wrapper-card-core {
|
|
padding-top: ($baseline*2);
|
|
}
|
|
|
|
.pennant {
|
|
@extend %t-copy-sub2;
|
|
@extend %t-strong;
|
|
display: block;
|
|
position: absolute;
|
|
top: ($baseline/2);
|
|
left: -($baseline/4);
|
|
box-shadow: 1px 1px 1px 0 $blue-d1;
|
|
background-color: $m-blue-l2;
|
|
padding: ($baseline/10) ($baseline*.75);
|
|
text-transform: uppercase;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.is-unavailable {
|
|
background-color: $gray-l5;
|
|
|
|
.wrapper-card-meta {
|
|
background-color: $gray-l4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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
|
|
margin-left: 2%;
|
|
border-left: 2px solid $gray-l4;
|
|
padding-left: 2%;
|
|
}
|
|
}
|
|
}
|