From 15b9104471e822c8c3b51cf545ec9e19273c7811 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 10 Jun 2015 10:45:49 -0400 Subject: [PATCH] generic and Team card/listing FED adjusting styles for teams cards --- lms/static/sass/elements/_controls.scss | 17 +- lms/static/sass/views/_teams.scss | 209 +++++++++++++++++++- lms/templates/ux/reference/teams-base.html | 213 ++++++++++++++++++++- 3 files changed, 429 insertions(+), 10 deletions(-) diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 7da27a81bf..ceede5d14f 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -294,8 +294,8 @@ @extend %btn-primary; border: 1px solid darken($action-primary-bg,10%); border-radius: 3px; - padding: ($baseline/2) $baseline; - background-color: $action-primary-fg; + padding: 8px $baseline; + background-color: transparent; color: darken($action-primary-bg,10%); text-align: center; @@ -339,6 +339,19 @@ } } +%btn-pl-secondary-base { + @extend %btn-pl-default-base; + @include transition(border $tmg-f2 ease-in-out); + border: 1px solid transparent; + color: $action-primary-bg; + + &:hover { + border: 1px solid $gray-l2; + background-color: transparent; + color: $action-primary-bg; + } +} + // ==================== // application: canned actions diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 578327be58..10d3be9c3e 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -9,8 +9,14 @@ } } + p, span { + color: inherit; + font-weight: inherit; + } + .icon { font-family: "FontAwesome"; + color: inherit; } %button-reset { @@ -82,7 +88,7 @@ } .search-field { - transition: all .25s ease-in-out; + transition: all $tmg-f2 ease-in-out; border: 0; border-bottom: 2px solid transparent; padding: ($baseline/4) ($baseline/2); @@ -105,6 +111,7 @@ color: $gray-l3; } + // STATE: hover and focus &:hover, &:focus { @@ -122,7 +129,7 @@ .page-content-nav { margin-bottom: $baseline; - border-bottom: 2px solid $gray-l5; + border-bottom: 3px solid $gray-l5; .nav-item { display: inline-block; @@ -136,6 +143,7 @@ color: $gray-d2; } + // STATE: hover and focus &:hover, &:focus { border-bottom: 3px solid $link-color; @@ -148,6 +156,196 @@ @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 { @@ -181,7 +379,7 @@ .input-text { @extend %t-copy-base; - @include transition(all $tmg-f2 ease-in-out 0s); + transition: all $tmg-f2 ease-in-out 0s; display: block; width: 90%; height: 100%; @@ -251,6 +449,7 @@ border: 1px solid transparent; color: $gray; + // STATE: hover and focus &:hover, &:focus { border: 1px solid $link-color; @@ -261,13 +460,13 @@ .required-wrapper { display: inline-block; vertical-align: top; - width: 60%; + width: 60%; // TODO: susy grid } .optional-wrapper { display: inline-block; vertical-align: top; - width: 35%; + width: 35%; // TODO: susy grid margin-left: 2%; border-left: 2px solid $gray-l4; padding-left: 2%; diff --git a/lms/templates/ux/reference/teams-base.html b/lms/templates/ux/reference/teams-base.html index 257dd01cf8..1616a4f038 100644 --- a/lms/templates/ux/reference/teams-base.html +++ b/lms/templates/ux/reference/teams-base.html @@ -153,13 +153,220 @@ Teams | Course name
-