src/scss/ia/_pipeline.scss
$blue-variant: #7AB4E3;
$gold-variant: #F6BE68;

.platform-pr-merged { color: $purple; }

.platform-pr-closed { color: $red; }

#sort_pipeline {
    background-color: transparent;
    border: none;
    position: relative;
    bottom: 5px;

    select {
	color: $grey;
    }

    &:after {
	color: $grey;
    }
}

.sidebar-field .frm__select {
    width: 100%;
}

.frm__select.edit-sidebar {
    width: 7em;
    background-color: transparent;
    font-size: 1em;

    select {
	text-transform: capitalize;
	color: $grey;
	padding-left: 0;
    }

    &:after {
	color: $grey;
    }
}

#sidebar-top {
    padding: 2em 0;
    text-transform: capitalize;
    color: $grey;
    padding-top: 0;

    &.sidebar-logged-out {
	padding-top: 0.3em;
	
	#sidebar-close {
	    position: initial;
	}
    }
}

#sidebar-name, #edit-sidebar-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
}

#sidebar-id, #edit-sidebar-id {
    color: $grey;
    font-size: 13px;
}

#all_comments { margin-right: 1em; }

.edit-sidebar {
    border: 0;
    width: 100%;
    font-size: 15px;

    &.frm__input {
	margin-left: -0.8em;
	background-color: #EDF5FB;
	outline: 1px solid #B3D5EF;
    }

    &.frm__text {
	margin-left: -0.8em;
	background-color: #EDF5FB;
	outline: 1px solid #B3D5EF;
    }
}

input.edit-sidebar {
    height: 2.3em;

    &:hover {
	outline: 1px solid #ddd;
    }

    &.frm__input:hover {
	outline: 1px solid #B3D5EF;
    }
}

textarea.edit-sidebar {
    padding-top: 0.8em;
    padding-bottom: 2em;

    &:hover {
        outline: 1px solid #ddd;
    }

    &.frm__text:hover {
	outline: 1px solid #B3D5EF;
    }
}

.search-container {
    width: 20%;

    .ddgsi-loupe {
        color: $grey;
        font-weight: bold;

        position: relative;
        top: 2px;
        padding-right: 0.5em;
    }
    
    .search-thing {
        margin-right: 1em;
        color: $slate;
        width: 80%;
	font-size: 1em;
        
        /* Remove some of the default styles. */
        border: none;
        outline: none;
    }

    /* Style the placeholder. */
    .search-thing::-webkit-input-placeholder {
	    opacity: 0.5;
    }
    .search-thing::-moz-placeholder {
	    opacity: 0.5;
    }
    .search-thing:-ms-input-placeholder { 
	    opacity: 0.5;
    }
}

.wrap-pipeline {
    @include wrapper();

    input, textarea {
	outline: none;
    }
}

.hide { display: none; }

.toggle-details { margin-right: 1em; }

.pipeline-filter, #pipeline-clear-filters { margin-left: 1.5em; }

.pipeline-filter { 
    color: $grey-light;
    cursor: pointer;
    padding-bottom: 4px;

    .platform-no-info {
	position: relative;
	top: 2px;
	padding-right: 3px;
    }


    &.active-filter {
	box-shadow: inset 0px -2px $blue;
    }
}

.fix-float { visibility: hidden; }

.deselect-all .ddgsi-close { 
    position: relative;
    color: $grey;
    position: relative;
}

#page_sidebar {
    width: 395px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 13em;

    &.is_fixed {
	position: fixed;
	height: 100vh;
	padding-top: 23px;
    }
}

#actions_sidebar {
    width: 240px;

    .frm__select {
	width: 100%;
    }

    &.is_fixed {
	position: fixed;
	height: 100vh;
	padding-top: 23px;
    }
}

#page_sidebar, #actions_sidebar {
    box-sizing: border-box;
    position: absolute;
    z-index: $actions-sidebar-z-index;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $white;
    padding: 2em;
    box-shadow: -1px 0 0 rgba(0,0,0,.15);
    padding-top: 14.7em;

    .frm__label {
	font-weight: 400;
    }

    hr {
	@include scaleX(2);
    }
    
    .sidebar-field {
        margin-top: 1em;
    }

    #sidebar-close {
	position: relative;
	top: 6px;
    }

    #sidebar-pr, #pr, .primary-label {
        color: $grey-light;
        font-size: 0.95em;
        font-weight: 500;
        padding-top: 2em;
        padding-bottom: 0.5em;
        
        a { color: $grey-light; }
        
        .ddgsi {
            vertical-align: middle;
        }
    }

    #sidebar-pr .comment {
        margin-bottom: 0;
        margin-top: 1em;
	word-wrap: break-word;

        a { 
	    color: $slate; 
	    font-weight: normal;
	}
    }

    .ddgsi-close { cursor: pointer; }
}

#pipeline-stats {
    text-align: center;
    margin-top: -1em;
    padding-bottom: 3em;

    a {
	padding: 0em 1em;
	color: white;
    }

    .pipeline__toggle-view__button {
	margin: 0;
    }
    
    #created-stats { 
        font-weight: 600; 
        margin-bottom: 2em;
    }

    h1 {
	margin-bottom: 0.5em;
	margin-top: 2em;
    }
}

#dev_pipeline { 
    @include center-content();
    width: auto;
    margin: 0px 20px;
    overflow: initial;
}

.item-activity a { 
    color: $grey-dark; 
}

#dev_pipeline .dev_pipeline-column {
    text-align: left;
    border-radius: 3px;

    .dev_pipeline-column--container {
	padding: 1em;
	background-color: $silver;
    }


    .activity-details {
        a { 
	    color: $grey-dark; 
	    &:hover {
		color: $blue;
	    }
	}
    }

    .activity-details {
        font-size: 0.75em;
        margin-left: 2.3em;
    }

    .icon-circle {
        color: $red;
    }

    .icon-bubbles {
        color: $grey-light;
    }

    .icon {
        margin-right: 0.5em;
    }

    .dev_pipeline-column__title {
	font-size: 1em;
	font-weight: 600;
	color: $slate-light;
    }
}

.dev_pipeline-column__list {
    margin-bottom: 0;

    li {
        list-style: none;
        padding: 0.3em 0;
        font-size: 1em;
        background-color: white;
        margin-bottom: 0.5em;
        border-radius: 2px;
        padding: 0.5em;
        @include user-select(none);
	border-left: 2px solid transparent;

	&.important {
	    border-left: 2px solid $gold-variant;
	}

	&.selected {
	    background-color: #EDF5FB;
	    box-shadow: 0px 0px 0px 1px #B3D5EF;
	}

	&.on-hold {
	    opacity: 0.5;
	}

	&.dog-ear {
	    background-image: linear-gradient(-135deg, 
					$blue-variant,
					$blue-variant 2%,
					transparent 2%,
					transparent);
	    background-origin: border-box;
	}

    &:hover { 
	box-shadow: 0px 0px 0px 1px #B3D5EF;

	.invisible-link a {
	    position: relative;
	    display: inline-block;
	    width: 16px;
	    height: 16px;
	    right: 20px;
	    top: 2px;
	}

        .item-name {

	    .item-activity a {
		color: $blue;
	    }
            
	    @mixin pipeline_stamp() {
		content: "\f0c1";
		font-family: FontAwesome;
		font-weight: normal;
		font-style: normal;
		text-decoration: inherit;
		-webkit-font-smoothing: antialiased;
		margin-left: 2px;
		color: $blue;
	    }

            /* Change content to match the repo. */
            &.pipeline__stamp- {

		&:before {
		    @include pipeline_stamp();
		    margin-left: -3px;
		}

                &spice:before,  &goodies:before, &fathead:before, &longtail:before {
		    @include pipeline_stamp();
                }

		&goodies:before {
		    margin-left: -2px;
		}

		&spice:before {
		    margin-left: -4px;
		}

		&fathead:before, &longtail:before {
		    margin-left: -5px;
		}
            } 
        }
    }

        .item-name { 
	    .item-title {
		display: inline-block;
		/* Text should wrap if it's reached N% in the item. */
		max-width: 65%; 
	    }
	    
	    /* Display the type of repo */
	    &:before {
		display: inline;
		color: $grey;
		content: "N";
		font-weight: 500;
		padding: 0 0.77em 0 0.2em;
		float: left;
	    }

	    /* Change content to match the repo. */
	    &.pipeline__stamp {
		&-spice:before {
		    content: "S";
		}

		&-goodies:before {
		    content: "G";
		}

		&-fathead:before {
		    content: "F";
		}

		&-longtail:before {
		    content: "L";
		}
	    }
	}

        .icon-check, .icon-check-empty {
            margin: 0.25em 0.6em 0 0;
        }

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

    .ia-item--stamp {
        width: 20px;
        height: 20px;
        position: inherit;
        font-size: 0.8em;
        margin-right: 0.6em;
    }
}

#pipeline-action-submit, #pipeline-clear-filters {
    height: 1.6em;
    padding-top: 0;
    padding-bottom: 0.27em;
}

.pipeline-actions {
    padding-top: 0.3em;

    .count-txt {
	color: $grey;
	padding-bottom: 2em;
    }

    .frm__select {
	background-color: transparent;
	border-color: transparent;

	& > select {
	    position: relative;
	    padding-left: 0;
	    text-transform: capitalize;
	    opacity: 0; // For IE and Edge
	}

	&:after {
	    color: $grey;
	    top: 43%;
	}
    }

    .frm__input {
	margin: 0.4em 0;
    }

    .frm__label {
	font-size: 1em;
	background-color: transparent;

	&.overlap {
	    position: relative;
	    top: 26px;
	}
    }
}

.filters-bar {
    padding-bottom: 2em;
    padding-top: 2em;
}

.filter-count {
    padding-left: 0.4em;
}

.no-pr { text-decoration: line-through; }

#dev_pipeline .waiting-circle {
    margin-top: 3.5em;
}