_dashboard.scss

// studio - views - user dashboard
// ====================

.view-dashboard {

	// temp
	.content {
		margin-bottom: ($baseline*5);

		&:last-child {
			margin-bottom: 0;
		}
	}

	// ====================

	// basic layout
	.content-primary, .content-supplementary {
	  @include box-sizing(border-box);
	  float: left;
	}

	.content-primary {
	  width: flex-grid(9, 12);
	  margin-right: flex-gutter();
	}

	.content-supplementary {
	  width: flex-grid(3, 12);
	}

	// ====================

	// elements - notices
	.content .notice-incontext {
		width: flexgrid(9, 9);

	  // CASE: notice has actions {
	  &.has-actions, &.list-notices .notice-item.has-actions {

	    .msg, .list-actions {
	      display: inline-block;
	      vertical-align: middle;
	    }

	    .msg {
	      width: flex-grid(6, 9);
	      margin-right: flex-gutter();
	    }

	    .list-actions {
	      width: flex-grid(3, 9);
	      text-align: right;
	      margin-top: 0;

	      .action-item {

	      }

	      .action-create-course {
	      	@extend %btn-primary-green;
	      	@extend %t-action3;
	      }
	    }
	  }
	}



	// elements - course creation rights controls
	.wrapper-creationrights {
		overflow: hidden;

		.ui-toggle-control {
			@extend %ui-depth2;
			@extend %btn-secondary-gray;
			@include clearfix();
			display: block;
			text-align: left;

			// STATE: hover - syncing up colors with current so transition is smoother
			&:hover {
				background: $gray-d1;
				color: $white;
			}

			.label {
				@extend %t-action3;
				float: left;
				width: flex-grid(8, 9);
				margin: 3px flex-gutter() 0 0;
			}

			.icon-remove-sign {
				@extend %t-action1;
				@include transform(rotate(45deg));
				@include transform-origin(center center);
				@include transition(all $tmg-f1 linear 0s);
				float: right;
				text-align: right;
			}
		}

		.ui-toggle-target {
			@extend %ui-depth1;
			@include transition(opacity $tmg-f1 ease-in-out 0s);
			position: relative;
			top: -2px;
			display: none;
			opacity: 0;
		}

		// CASE: when the content area is shown
		&.is-shown {

			.ui-toggle-control {
				@include border-bottom-radius(0);

				.icon-remove-sign {
					@include transform(rotate(90deg));
					@include transform-origin(center center);
				}
			}

			.ui-toggle-target {
				display: block;
				opacity: 1.0;
			}
		}


	}

	// elements - course creation rights controls
	.status-creationrights {
		margin-top: $baseline;

		.title {
			@extend %t-title7;
			margin-bottom: ($baseline/4);
			font-weight: 700;
			color: $gray-d1;
		}

		.copy {

		}

		.list-actions, .form-actions {
      margin-top: ($baseline*0.75);

      .action-item {

      }

      .action-primary {
        @extend %btn-primary-blue;
        @extend %t-action3;
      }

      // specific - request button
      // BT: should we abstract these states out for all buttons like this
      .action-request {
      	position: relative;
      	overflow: hidden;

      	.icon-cog {
      		@include transition(all $tmg-f1 ease-in-out $tmg-f1);
      		@include font-size(20);
      		position: absolute;
      		top: ($baseline/2);
					left: -($baseline);
      		visibility: hidden;
      		opacity: 0.0;
      	}

        // state: submitting
      	&.is-submitting {
      		padding-left: ($baseline*2);

					.icon-cog {
						left: ($baseline*0.75);
						visibility: visible;
						opacity: 1.0;
					}
      	}

        // state: has an error
        &.has-error {
          padding-left: ($baseline*2);
          background: $red;
          border-color: $red-d1;

          .icon-cog {
            left: ($baseline*0.75);
            visibility: visible;
            opacity: 1.0;
          }
        }
      }
    }

    .status-update {

    	.label {
				@extend %cont-text-sr;
    	}

    	.value {
    		border-radius: ($baseline/4);
    		position: relative;
    		overflow: hidden;
    		padding: ($baseline/5) ($baseline/2);
    		background: $gray;

    		.status-indicator {
    		  position: absolute;
    		  top: 0;
    		  left: 0;
    		  display: block;
    		  width: 100%;
    		  height: ($baseline/4);
    		  opacity: 0.40;
    		}
    	}

			.value-formal, .value-description {
				border-radius: ($baseline/10);
				display: inline-block;
				vertical-align: middle;
				color: $white;
			}

    	.value-formal {
    		@extend %t-title5;
    		margin: ($baseline/2);
    		font-weight: 700;

    		[class^="icon-"] {
    			margin-right: ($baseline/4);
    		}
    	}

    	.value-description {
    		@extend %t-copy-sub1;
    		position: relative;
    		color: $white;
				opacity: 0.85;
    	}
    }

		// CASE: rights are not requested yet
		&.is-unrequested {

			.title {
				@extend %cont-text-sr;
			}
		}

		// CASE: status is pending
		&.is-pending {

			.status-update {

				.value {
					background: $orange;
				}

				.status-indicator {
					background: $orange-d1;
				}
			}
		}


    // CASE: status is denied
    &.is-denied {

    	.status-update {

    		.value {
    			background: $red-l1;
    		}

    		.status-indicator {
    			background: $red-s1;
    		}
    	}
    }
	}

	// ====================

  // ELEM: course listings
	.courses {
	  margin: $baseline 0;
	}

	.list-courses {
		margin-top: $baseline;
		border-radius: 3px;
		border: 1px solid $gray;
		background: $white;
		box-shadow: 0 1px 2px $shadow-l1;

		.course-item {
      @include box-sizing(border-box);
      width: flex-grid(9, 9);
			position: relative;
			border-bottom: 1px solid $gray-l1;
      padding: $baseline;

      // STATE: hover/focus
      &:hover {
        background: $paleYellow;

        .course-actions .view-live-button {
          opacity: 1.0;
          pointer-events: auto;
        }

        .course-title {
          color: $orange-d1;
        }

        .course-metadata {
          opacity: 1.0;
        }
      }

      .course-link, .course-actions {
        @include box-sizing(border-box);
        display: inline-block;
        vertical-align: middle;
      }

      // encompassing course link
      .course-link {
        @extend %ui-depth2;
        width: flex-grid(7, 9);
        margin-right: flex-gutter();
      }

      // course title
      .course-title {
        @extend %t-title4;
        margin: 0 ($baseline*2) ($baseline/4) 0;
        font-weight: 300;
      }

      // course metadata
      .course-metadata {
        @extend %t-copy-sub1;
        @include transition(opacity $tmg-f1 ease-in-out 0);
        color: $gray;
        opacity: 0.75;

        .metadata-item {
          display: inline-block;

          &:after {
            content: "/";
            margin-left: ($baseline/10);
            margin-right: ($baseline/10);
            color: $gray-l4;
          }

          &:last-child {

            &:after {
              content: "";
              margin-left: 0;
              margin-right: 0;
            }
          }

          .label {
            @extend %cont-text-sr;
          }
        }
      }

      .course-actions {
        @extend %ui-depth3;
        position: static;
        width: flex-grid(2, 9);
        text-align: right;

        // view live button
        .view-live-button {
          @extend %ui-depth3;
          @include transition(opacity $tmg-f2 ease-in-out 0);
          @include box-sizing(border-box);
          padding: ($baseline/2);
          opacity: 0.0;
          pointer-events: none;

          &:hover {
            opacity: 1.0;
            pointer-events: auto;
          }
        }

        &:last-child {
          border-bottom: none;
        }
      }
		}
	}

  // ELEM: new user form
  .wrapper-create-course {

    // CASE: when form is animating
    &.animate {

      // STATE: shown
      &.is-shown {
        height: ($baseline*26);

        // STATE: errors
        &.has-errors {
          height: ($baseline*33);
        }
      }
    }
  }

  // ====================

  // course listings

	.create-course {

		.row {
			@include clearfix();
			margin-bottom: ($baseline*0.75);
		}

		.column {
			float: left;
			width: 48%;
		}

		.column:first-child {
			margin-right: 4%;
		}

		label {
			@extend %t-title7;
			display: block;
			font-weight: 700;
		}

		.new-course-org,
		.new-course-number,
		.new-course-name,
		.new-course-run {
			width: 100%;
		}

		.new-course-name {
			@extend %t-title5;
			font-weight: 300;
		}

		.new-course-save {
			@include blue-button;
		}

		.new-course-cancel {
			@include white-button;
		}

		.item-details {
			padding-bottom: 0;
		}

	    .wrap-error {
	      @include transition(all $tmg-f2 ease 0s);
	      height: 0;
	      overflow: hidden;
	      opacity: 0;
	    }

	    .wrap-error.is-shown {
	      height: 65px;
	      opacity: 1;
	    }

	    .message-status {
	      display: block;
	      margin-bottom: 0;
	      padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
	      font-weight: bold;
	    }

	}
}